/* ==========================================================================
   Dactyl Websites — the pricing page.

   Built from the guide pages' materials (linen, sand, umber, the one
   terracotta, gold only for Pro) and pricing.js. The page reads as a ledger:
   the whole price in three lines, the build as the home page's price on a
   sand panel with what a build includes under it, the plans side by side row by
   row on one grid (a phone gets them as cards), and the ad-hoc rates as
   something you can try.
   ========================================================================== */

/* ------------------------------------------------------------ The build
   The home page's price, word for word and in the same layout (index.html
   #pricing), on a sand panel rather than the umber sheet: the question with
   what websites usually cost under it on the left; the figure in ink with
   its $ in the accent, what it buys, a terracotta rule, the $500 to start
   as a figure of its own, and the line into the packages on the right.
   BUILD PRICE on the brand's tape, stuck over the panel's corner (the page
   heroes' tape, once more). Under a hairline in the same panel, what every
   build includes: six ruled lines, three across.
   Contrast, measured, on sand: ink 14.74, ink-2 8.15, accent-ink 4.62 (the
   link), accent 3.64 (the $ and the $500, large marks only). */
.pr-build { padding-block: clamp(3rem, 8vw, 5rem) clamp(4rem, 10vw, 7rem); }
.pr-panel-build {
  position: relative;
  padding: clamp(3.2rem, 9vw, 4.5rem) clamp(1.3rem, 5vw, 2rem) clamp(2rem, 6vw, 3rem);
  border-radius: 2.25rem;
  background: var(--sand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 30px 60px -44px rgba(40, 24, 8, .45);
}
.pr-tape { position: absolute; top: -1.1rem; left: clamp(1rem, 4vw, 2rem); margin: 0; transform: rotate(-4deg); transform-origin: left center; }
.pr-tape .tape__strip { font-size: clamp(.95rem, 1.2vw, 1.2rem); }

.pr-stage { display: flex; flex-direction: column; color: var(--ink); }
.pr-stage__q {
  order: 0;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, 11vw, 3.4rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.036em;
  color: var(--ink);
}
.pr-stage__q .qm { font-style: normal; color: inherit; }
.pr-stage__price { order: 1; margin-top: 2rem; }
.pr-stage__ctx {
  order: 2;
  max-width: 25rem;
  margin: 2.2rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(20, 17, 13, .14);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
}
main.gd .pr-stage__ctx a { color: var(--accent-ink); }
.pr-stage__next { order: 3; display: flex; align-items: center; gap: 1.1rem; margin: 2rem 0 0; }
main.gd .pr-stage__next > a:not(.btn) {
  font-family: var(--display);
  font-size: clamp(1.4rem, 5.4vw, 1.7rem);
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--glide);
}
main.gd .pr-stage__next > a:not(.btn):hover { background-size: 100% 1px; }
.pr-stage__next svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: wheel-nudge 1.8s var(--ease) infinite;
}

/* The figure, set exactly as the home page's (site.css .price__fig): the
   serif at its tightest, the $ raised to the cap line at a third of the
   size. Ink here, as the panel is light; the $ keeps the accent. */
.pr-big {
  display: flex;
  align-items: flex-start;
  gap: .04em;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.5rem, 22vw, 8.5rem);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pr-big__cur { margin-top: .34em; font-size: .3em; line-height: 1; letter-spacing: 0; color: var(--accent); }
.pr-big__n { display: block; }
.pr-for {
  max-width: 20em;
  text-wrap: balance;
  margin: 1.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 5.6vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--ink);
}
.pr-rule { display: block; width: 5rem; height: 2px; margin: 1.6rem 0 1.3rem; background: var(--accent); transform-origin: left; }
.pr-note { max-width: 36rem; margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); }
.pr-start {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .15rem .8rem;
  margin-bottom: .8rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--ink);
}
.pr-start b {
  font-family: var(--display);
  font-size: clamp(2.8rem, 12vw, 3.6rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--accent);
}

/* What every build includes, in the same panel under a hairline. */
.pr-includes { margin-top: clamp(2.6rem, 7vw, 3.5rem); padding-top: clamp(2rem, 5vw, 2.6rem); border-top: 1px solid rgba(20, 17, 13, .14); }
.pr-includes__h {
  margin: 0 0 1.4rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 6.6vw, 2.2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
}
.pr-includes__h em:not(.dot) { font-style: italic; color: var(--accent); }
.pr-includes__h em.dot { font-style: normal; color: inherit; }
.pr-incl { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.pr-incl li { display: grid; grid-template-columns: 2.6rem 1fr; padding: 1.05rem 0 1.15rem; border-bottom: 1px solid rgba(20, 17, 13, .12); }
.pr-incl span { padding-top: .3rem; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--accent-ink); }
.pr-incl p { margin: 0; font-family: var(--display); font-size: clamp(1.1rem, 4.4vw, 1.3rem); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .pr-build { padding-block: clamp(3rem, 7svh, 5rem) clamp(5rem, 12svh, 8rem); }
  .pr-panel-build { padding: clamp(4.5rem, 9svh, 6.5rem) clamp(3rem, 6vw, 6.5rem) clamp(3rem, 6svh, 4.5rem); }
  .pr-tape { top: -1.3rem; left: clamp(2rem, 4vw, 4rem); }
  .pr-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
    column-gap: clamp(4rem, 8vw, 10rem);
    align-items: start;
  }
  .pr-stage__q { grid-column: 1; grid-row: 1; font-size: clamp(3.2rem, 5vw, 5.8rem); }
  .pr-stage__ctx { grid-column: 1; grid-row: 2; margin-top: 2.4rem; padding-top: 1.5rem; font-size: 1.02rem; }
  .pr-stage__price { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
  .pr-stage__next { grid-column: 2; grid-row: 3; margin-top: 2.2rem; }
  main.gd .pr-stage__next > a:not(.btn) { font-size: clamp(1.6rem, 2.1vw, 2.2rem); }
  .pr-big { font-size: clamp(6.5rem, 11.5vw, 13rem); font-weight: 400; line-height: .86; }
  .pr-for { margin-top: 1.4rem; font-size: clamp(1.5rem, 2.1vw, 2.2rem); }
  .pr-rule { margin: 2rem 0 1.6rem; }
  .pr-note { font-size: 1.1rem; }
  .pr-start { font-size: clamp(1.5rem, 2vw, 2.1rem); }
  .pr-start b { font-size: clamp(3.4rem, 5vw, 5.4rem); }

  .pr-includes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; margin-top: clamp(3.5rem, 8svh, 5rem); }
  .pr-includes__h { margin: 0; font-size: clamp(2rem, 2.8vw, 2.9rem); }
  .pr-incl { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.4rem, 2.6vw, 2.4rem); }
  .pr-incl p { font-size: clamp(1.1rem, 1.35vw, 1.3rem); }
}
@media (prefers-reduced-motion: reduce) { .pr-stage__next svg { animation: none; } }

/* ------------------------------------------------------------ The plans
   Phones: the three plan cards. Wide: one grid, a row for each thing a plan
   does, the Pro column in gold. */
.plan h3.plan__name {
  margin: 0;
  font-family: var(--mono);
  font-size: max(12px, .78rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plan.plan--deep h3.plan__name { color: var(--ink-2); }
.plan.plan--ember h3.plan__name { color: #33230a; }
.pr-cards { margin-top: clamp(2rem, 5vw, 3rem); }
.pr-table { display: none; }

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .pr-cards { display: none; }
  /* The plans sit in a panel of their own, on sand: one object rather than
     rows floating on the page.

     Colour follows the home page's plan cards exactly and nothing else:
     Starter is the panel's own sand, Essential one step deeper, Pro the
     gold. Ticks are ink; terracotta is kept for the group labels down the
     left, so it marks structure rather than decorating every cell.

     Contrast, computed: on the Essential tone (#ddd5c6) ink-3 is only 4.38,
     so small text there is ink-2 (7.14). On sand ink-3 is 5.00 and the
     group labels' accent-ink 4.62. On the Pro wash (#eddcb8) ink is used
     for text and bronze #6e4f12 (5.57) for its ticks. */
  .pr-panel {
    --ess: #ddd5c6;
    --pro: #eddcb8;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.4rem);
    border-radius: var(--r-xl);
    background: var(--sand);
    overflow: clip;
  }
  .pr-table { display: table; table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9688rem; line-height: 1.45; }
  .pr-table thead .pr-plan { width: 23%; }
  .pr-table th, .pr-table td { text-align: left; font-weight: 400; }
  .pr-table thead th, .pr-table thead td {
    position: sticky;
    top: var(--nav-h, 56px);
    z-index: 5;
    padding: 1.3rem 1.1rem 1.1rem;
    vertical-align: bottom;
    background: var(--sand);
    border-bottom: 1px solid var(--ink);
  }
  /* While the header row is pinned, a strip of sand fills the space above
     it up to the top of the screen, so rows that have gone up are not seen
     behind it. The panel clips it (overflow: clip, which unlike hidden
     makes no scroll box, so the header still pins to the screen): before
     the panel has reached the top it lies on the panel's own sand and is
     invisible, and it can never show outside the panel. The old version
     was a box-shadow nothing clipped, and it sat over the paragraph above
     the table as a loose sand box. */
  .pr-table thead th::before, .pr-table thead td::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: calc(100% - 1px);
    height: calc(var(--nav-h, 56px) + 3px);
    background: var(--sand);
    pointer-events: none;
  }
  .pr-corner { width: 31%; }
  .pr-corner span { font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
  .pr-plan i { display: block; font-style: normal; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
  .pr-plan b { display: block; margin-top: .3rem; font-family: var(--display); font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 400; line-height: 1.05; letter-spacing: -.025em; color: var(--ink); }
  .pr-price { display: block; margin-top: .35rem; font-family: var(--display); font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums; }
  .pr-price em { font-style: normal; font-size: .62em; vertical-align: .45em; margin-right: .05em; color: var(--ink-3); }
  .pr-price small { margin-left: .2em; font-family: var(--sans); font-size: .58em; letter-spacing: 0; color: var(--ink-3); }

  /* The three columns, top to bottom without a break, each with round
     ends top and bottom so they read as three upright bands. */
  .pr-table thead .pr-plan { border-radius: 1.1rem 1.1rem 0 0; }
  .pr-table tbody tr:last-child td { border-radius: 0 0 1.1rem 1.1rem; }
  .pr-table thead .pr-plan:nth-child(3), .pr-row td:nth-child(3) { background: var(--ess); }
  .pr-table thead .pr-plan:nth-child(3) i,
  .pr-table thead .pr-plan:nth-child(3) .pr-price em,
  .pr-table thead .pr-plan:nth-child(3) .pr-price small { color: var(--ink-2); }

  /* Pro: the gold of the home page's Pro card, on its header only; the
     column under it is a pale wash of the same gold. */
  .pr-table thead .pr-pro {
    border-bottom-color: #8a6522;
    background:
      linear-gradient(115deg, rgba(255, 244, 205, 0) 30%, rgba(255, 250, 232, .5) 50%, rgba(255, 244, 205, 0) 70%),
      linear-gradient(160deg, #f6da8c 0%, #ebc166 40%, #dcab4f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 250, 225, .9);
  }
  .pr-pro i { color: #3a2808; }
  .pr-pro b, .pr-pro .pr-price, .pr-pro .pr-price em, .pr-pro .pr-price small { color: #1a1103; }
  .pr-row .pr-protd { background: var(--pro); color: var(--ink); }

  .pr-row th small { display: block; margin-bottom: .25rem; font-family: var(--mono); font-size: max(12px, .68rem); font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
  .pr-row th { padding: .95rem 1.1rem .95rem 0; border-bottom: 1px solid var(--hair-2); vertical-align: top; color: var(--ink); font-weight: 500; }
  .pr-row td { padding: .95rem 1.1rem; border-bottom: 1px solid var(--hair-2); vertical-align: top; color: var(--ink-2); }
  .pr-row--first th, .pr-row--first td { padding-top: 1.25rem; }
  .pr-row .pr-protd { border-bottom-color: rgba(138, 101, 34, .22); }
  .pr-table tbody tr:last-child th, .pr-table tbody tr:last-child td { border-bottom: 0; }
  .pr-corner { padding-left: 0 !important; }

  .pr-ck { display: block; width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .pr-ck path { stroke-dasharray: 20; }
  .pr-protd .pr-ck { stroke: #6e4f12; }
  .pr-no { display: block; width: .9rem; height: 1.5px; margin-top: .68rem; background: var(--ink-3); opacity: .7; }
  .pr-tx { display: block; max-width: 17em; }
}

/* ------------------------------------------------------------ Ad-hoc */
.pr-adhoc__grid { display: grid; gap: 2.6rem; align-items: center; }
.pr-calc { display: grid; gap: 2rem; }
.pr-tiers { margin: 0; border-top: 1px solid var(--ink); }
.pr-tier { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--hair-2); }
.pr-tier dt { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2.1rem); letter-spacing: -.02em; color: var(--ink-3); transition: color .4s var(--ease); }
.pr-tier dt span { display: block; margin-top: .35rem; font-family: var(--mono); font-size: max(12px, .78rem); letter-spacing: .1em; color: var(--ink-3); }
.pr-tier dd { margin: 0; font-family: var(--display); font-size: clamp(3rem, 11vw, 5.4rem); line-height: .95; letter-spacing: -.04em; color: var(--ink-3); transition: color .4s var(--ease); font-variant-numeric: lining-nums; }
.pr-tier dd .adhoc__cur { font-size: .4em; vertical-align: .9em; margin-right: .05em; }
.pr-tier dd em { display: block; margin-top: .4rem; font-family: var(--mono); font-style: normal; font-size: max(12px, .72rem); letter-spacing: .14em; text-transform: uppercase; text-align: right; }
.pr-tier dt { color: var(--ink); }
.pr-tier dd { color: var(--accent-ink); }

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .pr-adhoc__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); }
}

/* The large rate's friendly footnote sits under its row; the old <p> in the
   Essential cell became a quieter second line. */
.pr-tier { flex-wrap: wrap; }
.pr-tier__note { flex-basis: 100%; margin: .2rem 0 0; max-width: 32em; font-size: .95rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.pr-tx__sub { display: block; margin-top: .35rem; font-size: .9em; color: var(--ink-3); }

/* ------------------------------------------------------------ The gold
   The two Pro-only extras (Monthly Marketing Boost, Prototype Sandbox): a
   shine running round the cell's edge, after the CSS-mask shine border
   (frontendhero.dev, "animated shine border"), in gold, with two long
   trails. A ring is cut out of the cell's own box with a composite mask
   (::before, 1.5px), and a conic gradient whose angle (--pr-a) turns is
   painted through it: each head a hot white-gold point, its trail fading
   back through gold over more than a third of the way round. ::after is
   the same light, wider and blurred, for the glow it throws on the cell.
   Pure CSS, so it costs nothing while off screen; for reduced motion it
   stands still, lit. */
@property --pr-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pr-glim { position: relative; isolation: isolate; }
.pr-glim::before,
.pr-glim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  /* Each trail runs from nothing, through deep amber (it has to show on
     the pale gold wash), up through bright gold to a white-hot head. */
  background: conic-gradient(from var(--pr-a),
    rgba(176, 124, 34, 0) 0deg,
    rgba(176, 124, 34, .25) 50deg,
    rgba(196, 146, 52, .7) 115deg,
    rgba(226, 180, 86, .95) 150deg,
    rgba(250, 224, 150, 1) 166deg,
    rgba(255, 253, 240, 1) 174deg,
    rgba(255, 244, 205, 0) 179deg,
    rgba(176, 124, 34, 0) 180deg,
    rgba(176, 124, 34, .25) 230deg,
    rgba(196, 146, 52, .7) 295deg,
    rgba(226, 180, 86, .95) 330deg,
    rgba(250, 224, 150, 1) 346deg,
    rgba(255, 253, 240, 1) 354deg,
    rgba(255, 244, 205, 0) 359deg);
  animation: pr-shine 5.5s linear infinite;
}
.pr-glim::before {
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.pr-glim::after {
  inset: -4px;
  padding: 9px;
  filter: blur(8px);
  opacity: 1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.pr-glim > * { position: relative; z-index: 3; }
@keyframes pr-shine { to { --pr-a: 360deg; } }
/* The two cells run half a lap apart, so their lights never move as one. */
tr:last-child .pr-glim::before,
tr:last-child .pr-glim::after { animation-delay: -2.75s; }
@media (prefers-reduced-motion: reduce) {
  .pr-glim::before, .pr-glim::after { animation: none; --pr-a: 30deg; }
}

/* ------------------------------------------------------------ Phones: one plan at a time
   The three cards are gone; the same table the wide screen shows is used,
   one plan's column at a time beside the rows. A switch at the top, which
   stays under the header as you read down, picks the plan (pricing.js).
   Pro is shown first. */
.pr-switch { display: none; }
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .pr-cards { display: none; }
  .pr-panel { margin-top: 2rem; padding: .5rem 1rem 1rem; border-radius: var(--r-xl); background: var(--sand); }
  .pr-switch {
    position: sticky;
    top: calc(var(--nav-h, 56px) + .5rem);
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem;
    margin: 0 -.5rem;
    padding: .3rem;
    border-radius: 999px;
    background: var(--linen);
    box-shadow: 0 0 0 1px var(--hair-2), 0 10px 24px -14px rgba(40, 24, 8, .35);
  }
  .pr-switch button {
    display: grid;
    justify-items: center;
    gap: .1rem;
    min-height: 52px;
    padding: .45rem .2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    color: var(--ink-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .35s var(--ease), color .35s var(--ease), transform .16s var(--ease);
  }
  .pr-switch button:active { transform: scale(.96); }
  .pr-switch b { font-family: var(--display); font-size: 1.15rem; font-weight: 400; line-height: 1.1; }
  .pr-switch span { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
  .pr-switch [aria-selected="true"] { background: var(--ink); color: var(--linen); }
  .pr-switch [aria-selected="true"] span { color: rgba(246, 243, 238, .72); }
  .pr-switch [data-plan="3"][aria-selected="true"] {
    background: linear-gradient(160deg, #f6da8c 0%, #ebc166 40%, #dcab4f 100%);
    color: #1a1103;
    box-shadow: inset 0 1px 0 rgba(255, 250, 225, .85);
  }
  .pr-switch [data-plan="3"][aria-selected="true"] span { color: #3a2808; }
  .pr-switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  .pr-table { display: table; width: 100%; table-layout: fixed; margin-top: .8rem; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
  .pr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pr-table th, .pr-table td { text-align: left; vertical-align: top; }
  .pr-row th { width: 44%; padding: 1rem .9rem 1rem 0; border-bottom: 1px solid var(--hair-2); font-weight: 500; color: var(--ink); }
  .pr-row th small { display: block; margin-bottom: .3rem; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
  .pr-row td { padding: 1rem .2rem 1rem .9rem; border-bottom: 1px solid var(--hair-2); color: var(--ink-2); }
  .pr-table tbody tr:last-child th, .pr-table tbody tr:last-child td { border-bottom: 0; }
  .pr-row td { display: none; }
  .pr-panel[data-plan="1"] .pr-row td:nth-child(2),
  .pr-panel[data-plan="2"] .pr-row td:nth-child(3),
  .pr-panel[data-plan="3"] .pr-row td:nth-child(4) { display: table-cell; }
  .pr-panel[data-plan="3"] .pr-row td { color: var(--ink); }
  .pr-ck { display: block; width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .pr-protd .pr-ck { stroke: #6e4f12; }
  .pr-no { display: block; width: .9rem; height: 1.5px; margin-top: .7rem; background: var(--ink-3); opacity: .7; }
  .pr-tx { display: block; }
}

/* ------------------------------------------------------------ Phones: the plans, swiped
   The pricing page's own panel (index.html keeps its cards on a phone).
   Edge to edge, so the plans get every pixel the screen has. The row names
   are pinned down the left (--hw, kept narrow: the plan's detail is what is
   being read); beside them the three plans sit side by side in one strip
   that is swiped sideways and snaps a whole plan at a time. Each plan's
   colour is on its own cells, so the colour travels and snaps with it:
   Starter on linen, Essential a step deeper, Pro the gold wash under a gold
   head (the wide table's colours). The next plan's edge shows at the right,
   which is what says "swipe". The switch above follows along (pricing.js).

   Contrast on these tones, computed: ink-2 on linen 9.41, on --ess 7.14,
   ink on --pro 14.9; accent-ink group labels on sand 4.62. */
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .pr-plans .pr-panel {
    --ess: #ddd5c6;
    --pro: #eddcb8;
    margin: 2.4rem calc(var(--gutter) * -1) 0;
    padding: .9rem 0 1.4rem;
    /* Round ends, so it reads as one object between the linen and the
       sand band under it, not a stripe of sand that stops short. */
    border-radius: 2rem;
  }
  /* Clear of the header's tape, which hangs below the header bar. */
  .pr-plans .pr-switch { top: calc(var(--nav-h, 56px) + 1.9rem); margin: 0 .6rem; }

  .pr-scroll {
    --hw: 37vw;                                   /* the pinned row names (the panel is the screen's width) */
    --peek: 1.4rem;                               /* the next plan's edge */
    container-type: inline-size;
    margin-top: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--hw);
    display: flex;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pr-scroll::-webkit-scrollbar { display: none; }
  /* Room after the last plan, so Pro snaps to the same place as the other
     two rather than stopping short against the end. (A flex item, because
     a scroller's own end padding is not counted everywhere.) */
  .pr-scroll::after { content: ""; flex: 0 0 var(--peek); }

  .pr-plans .pr-table {
    --pw: calc(100cqw - var(--hw) - var(--peek));
    display: table;
    flex: none;
    table-layout: fixed;
    width: calc(var(--hw) + 3 * var(--pw));
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .975rem;
  }
  /* The heads are shown again: each plan's name and price, on its colour. */
  .pr-plans .pr-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .pr-plans .pr-table thead th,
  .pr-plans .pr-table thead td { padding: 1.15rem 1rem 1rem; vertical-align: bottom; text-align: left; font-weight: 400; border-bottom: 1px solid var(--ink); }
  .pr-plans .pr-corner { width: var(--hw); }
  /* The corner says what to do rather than what it is. */
  .pr-plans .pr-corner span { display: none; }
  .pr-plans .pr-corner::after { content: "Swipe to compare \2192"; display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; color: var(--ink-3); }
  .pr-plans .pr-plan { width: var(--pw); scroll-snap-align: start; border-radius: 1.1rem 1.1rem 0 0; }
  .pr-plans .pr-plan i { display: block; font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
  .pr-plans .pr-plan b { display: block; margin-top: .25rem; font-family: var(--display); font-size: 1.9rem; font-weight: 400; line-height: 1.05; letter-spacing: -.025em; color: var(--ink); }
  .pr-plans .pr-price { display: block; margin-top: .3rem; font-family: var(--display); font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums; }
  .pr-plans .pr-price em { font-style: normal; font-size: .62em; vertical-align: .45em; margin-right: .05em; color: var(--ink-2); }
  .pr-plans .pr-price small { margin-left: .2em; font-family: var(--sans); font-size: .62em; letter-spacing: 0; color: var(--ink-2); }

  /* The pinned column: on the panel's sand, over the plans as they pass
     under it, with a hairline and a soft shade along its edge. */
  .pr-plans .pr-table .pr-corner,
  .pr-plans .pr-row th {
    position: sticky;
    left: 0;
    z-index: 3;
    width: var(--hw);
    padding-left: var(--gutter);
    background: var(--sand);
    box-shadow: 1px 0 0 var(--hair-2), 8px 0 14px -10px rgba(40, 24, 8, .28);
  }
  .pr-plans .pr-row th { padding: 1rem .8rem 1rem var(--gutter); font-size: .95rem; line-height: 1.4; font-weight: 500; hyphens: auto; overflow-wrap: break-word; }
  .pr-plans .pr-row th small { font-size: 12px; letter-spacing: .12em; }
  .pr-plans .pr-row td { display: table-cell; width: var(--pw); padding: 1rem 1.1rem; color: var(--ink-2); }
  .pr-plans .pr-row--first th, .pr-plans .pr-row--first td { padding-top: 1.3rem; }

  /* The plans' colours, cell by cell, so they move as one band. */
  .pr-plans .pr-table thead .pr-plan:nth-child(2), .pr-plans .pr-row td:nth-child(2) { background: var(--linen); }
  .pr-plans .pr-table thead .pr-plan:nth-child(3), .pr-plans .pr-row td:nth-child(3) { background: var(--ess); }
  .pr-plans .pr-row td.pr-protd { background: var(--pro); color: var(--ink); border-bottom-color: rgba(138, 101, 34, .22); }
  .pr-plans .pr-table thead .pr-pro {
    border-bottom-color: #8a6522;
    background:
      linear-gradient(115deg, rgba(255, 244, 205, 0) 30%, rgba(255, 250, 232, .5) 50%, rgba(255, 244, 205, 0) 70%),
      linear-gradient(160deg, #f6da8c 0%, #ebc166 40%, #dcab4f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 250, 225, .9);
  }
  .pr-plans .pr-pro i { color: #3a2808; }
  .pr-plans .pr-pro b, .pr-plans .pr-pro .pr-price, .pr-plans .pr-pro .pr-price em, .pr-plans .pr-pro .pr-price small { color: #1a1103; }
  .pr-plans .pr-table tbody tr:last-child td { border-radius: 0 0 1.1rem 1.1rem; }
  .pr-plans .pr-tx { max-width: none; }
}


.pr-big { cursor: default; }