/* Pearl route layer: pricing, support, 404, legal and the ID-12 link fallbacks.
   Loads after soft.css on every route except the homepage, so equal-specificity rules here
   win; route-scoped selectors (.pricing-page …) match soft.css's own where it scopes.
   Round 1 (2026-09-22): footage windows, one radius set, the four elevations, Barlow 700.
   Round 2 (2026-09-23): the team pass, pricing's shared subgrid rows, the footage strips.
   Round 3 (2026-09-23): the .pass ticket on a recessed rail, the offer strip, FAQ motion,
   legal headings in Barlow.
   Round 4 (2026-09-23, plan §5, lane C; calls 12, 13, 14, 17):
   - Every secondary block sits on soft.css's .grid-12, and a block that starts on column 7
     carries data-grid-col="7" (scripts/check-grid.py holds it to x=736 at 1440).
   - /pricing/: the h1 on columns 1-6 with the lede on 7; the three prices and actions in
     the first 900px at 1440; one stub height, one perforation line, actions pinned to the
     foot; the FAQ on column 7 beside a sticky heading and the one-line offer.
   - /support/ and /404.html: the h1 and the dock text share --window-inset (§2.3).
   - /invite/ and /l/: the pass stands upright on a backing plate tilted -1.5 degrees; the
     stub label is a .pass-label, not a disclosure; the install steps are one left-aligned
     block, a row of three on the grid from 1024px. /l/ is a split grid of its own.
   - Type and radii only from the round 4 scales (13/15/17/20, 1.4/1.6; pill/16/28/40 or a
     nested outer − padding).
   Round 5 (2026-09-23, plan §6, lane C; calls 3, 10, 12, 13, 14, 15):
   - /pricing/: the pricing-team salvage on columns 7-12 beside the h1 and lede (as tall as
     the text column from 1024px, so the prices and actions still end inside 900px); the
     rail an inset well with the passes its only raised layer; phones drop the tray, set
     each pass's name and price on one row and read h1, passes, figure, lede; the Team
     card's pearl "Ask about Team"; the organisation action on columns 9-12.
   - /support/: a 6/6 split with no picture (the address in a recessed stage on 7-12); the
     questions on 7-12 and one sticky contact card on 1-5 holding the safety route.
   - /404.html: one window with the h1 inside, the lede and actions on pearl below. No dock.
   - /invite/ and /l/: the pre-launch line in place of install steps while the store links
     are hidden; /invite/ centred to the footer; /l/ puts the pass on 7-12 from 1024px.
   - Legal: the contents on the column's edge and the article on column 5 from 1024px. */

/* Every route sits on the header's column; text starts on its edge. */
.wrap,
.foot .wrap {
  width: var(--page);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

/* 44px targets: the mailto address sets at 13px, so 13px of padding each way clears 44
   without moving a line. */
.mailto-note a {
  padding-block: 13px;
  margin-block: -13px;
}

/* One display weight. */
.pages-title,
.pages-section-title,
.organization-panel h2,
.link-fallback__title {
  font-weight: 700;
}

/* A lede beside a display heading starts with its first line's cap top level with the
   heading's (±1px at 1440). Barlow Condensed's cap top sits 0.18em into a 0.96 line (h1)
   and 0.19em into a 0.98 line (h2); the system face's cap top sits 9.5px into a 20px/1.6
   line and 8.1px into a 17px/1.6 one (measured in Chrome, round 4). */
.pages-intro,
.compare-head,
.link-fallback {
  --h1-cap: calc(var(--d-h1) * 0.18);
  --h2-cap: calc(var(--d-h2) * 0.19);
}

/* Pricing: the intro --------------------------------------------------------------------
   Round 5 (call 3): the h1 and the lede stack on columns 1-6 and the pricing-team figure
   takes columns 7-12, 3:2 below 1024px. From 1024px the figure is exactly as tall as the
   text column (it brings no height of its own and stretches across both rows), so all
   three prices and actions stay inside the first 900px at 1440x900; at 3:2 (624x416) they
   would end near 1045px. Without the figure (markup commented) the lede returns to column
   7 at the h1's cap, the round 4 state. */
.pricing-page .pricing-intro {
  align-items: start;
  padding: var(--space-top) 0 0;
}
.pricing-intro__title {
  grid-column: 1 / 7;
  margin: 0;
}
.pricing-intro__aside {
  grid-column: 7 / 13;
  min-width: 0;
  padding-top: max(0px, calc(var(--h1-cap) - 9.5px));
}
.pricing-intro__aside .pages-lede {
  max-width: 30em;
  margin: 0;
}
.pricing-page .pricing-intro:has(.pricing-art) {
  padding: var(--space-top) 0 0;
}
.pricing-intro:has(.pricing-art) .pricing-intro__title {
  grid-row: 1;
}
.pricing-intro:has(.pricing-art) .pricing-intro__aside {
  grid-column: 1 / 7;
  grid-row: 2;
  padding-top: var(--space-head);
}
.pricing-intro:has(.pricing-art) .pricing-intro__aside .pages-lede {
  max-width: none;
}
/* The window's top edge sits level with the h1's cap top, as a lede beside a heading does. */
.pricing-intro > .pricing-art {
  grid-column: 7 / 13;
  grid-row: 1 / span 2;
  width: 100%;
  margin-top: var(--h1-cap);
  aspect-ratio: 3 / 2;
}
@media (min-width: 1024px) {
  .pricing-intro > .pricing-art {
    align-self: stretch;
    min-height: 240px;
    aspect-ratio: auto;
  }
  /* About 2.1:1 at 1440: the crop keeps the bat's tip clear of the tag and the helmet whole. */
  .pricing-art .field-window__media {
    object-position: 50% 40%;
  }
}

/* Passes: the ticket both /pricing/ and the link fallbacks use -------------------------
   A raised pearl card cut into a stub and a body by a dashed perforation, with a 14px
   half-circle notch at each end of it. The notches are a mask on the ::before that paints
   the pearl, because a mask on the card would also cut away its shadow; the raise is
   therefore drop-shadows on the card (the --e-raised-* offsets, blur halved, since a
   drop-shadow's blur is a standard deviation), which follow the notched outline. Each use
   sets --perf-y, the perforation's centre from the card's top edge. */
.pass {
  --perf-y: 60px;
  --notch: 14px;
  --perf-ink: light-dark(rgb(13 15 20 / 18%), rgb(242 243 247 / 18%));
  --pass-raise-sm: drop-shadow(5px 5px 5.5px var(--soft-shadow))
    drop-shadow(-5px -5px 5.5px var(--soft-light));
  --pass-raise-lg: drop-shadow(12px 12px 13px var(--soft-shadow))
    drop-shadow(-12px -12px 13px var(--soft-light));
  --pass-raise: var(--pass-raise-sm);
  --notch-mask:
    radial-gradient(
        circle at 0 var(--perf-y),
        transparent var(--notch),
        #000 calc(var(--notch) + 0.5px)
      )
      left / 51% 100% no-repeat,
    radial-gradient(
        circle at 100% var(--perf-y),
        transparent var(--notch),
        #000 calc(var(--notch) + 0.5px)
      )
      right / 51% 100% no-repeat;
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: var(--r-28);
  background: none;
  box-shadow: none;
  filter: var(--pass-raise);
}
.pass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface);
  -webkit-mask: var(--notch-mask);
  mask: var(--notch-mask);
}
/* 2px dashes (8 on, 6 off) between the notches, 10px clear of each. */
.pass__perf {
  position: absolute;
  top: calc(var(--perf-y) - 1px);
  right: calc(var(--notch) + 10px);
  left: calc(var(--notch) + 10px);
  height: 2px;
  color: var(--perf-ink);
  background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 14px);
  pointer-events: none;
  transition: color var(--dur-ui) var(--ease-out);
}
@media (forced-colors: active) {
  .pass {
    border: 1px solid CanvasText;
    filter: none;
  }
  .pass__perf {
    background: none;
    border-top: 2px dashed CanvasText;
  }
}

/* Pricing: three passes on a rail -------------------------------------------------------
   The rail is recessed (40px radius, 12px in), so each pass takes the nested 28px radius.
   Every pass spans the rail's five rows through subgrid (stub, price, terms, features,
   action), so the perforations, prices, first features and actions each sit on one line.
   The stub is one height on every pass (the name, then a 52px line holding Free's line,
   Early Team's founder tag or Team's Season/Annual switch) because the notch mask needs
   --perf-y and CSS cannot read it from layout. Early Team is raised further, not higher:
   its perforation stays on the shared line. */
.pricing-page .plans-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  gap: 0 12px;
  align-items: stretch;
  margin: 0;
  padding: 12px;
  border-radius: var(--r-40);
  box-shadow: var(--e-inset-lg);
}
.pricing-page .plan-card {
  --pad-top: 20px;
  --stub-h: 92px;
  --perf-gap: 16px;
  --perf-y: calc(var(--pad-top) + var(--stub-h) + var(--perf-gap));
  grid-row: 1 / span 5;
  padding: var(--pad-top) 32px 24px;
  transition: transform var(--dur-ui) var(--ease-out);
}
/* soft.css paints every plan card as a raised 30px slab; a pass paints itself (above). */
.pricing-page .plan-card.pass {
  border: 0;
  border-radius: var(--r-28);
  background: none;
  box-shadow: none;
}
@supports (grid-template-rows: subgrid) {
  .pricing-page .plan-card {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
.pricing-page .plan-card--early {
  --pass-raise: var(--pass-raise-lg);
}
.pricing-page .plan-heading {
  display: grid;
  grid-template-rows: auto 52px;
  align-content: start;
  justify-items: start;
  row-gap: 10px;
  box-sizing: border-box;
  height: var(--stub-h);
  margin: 0 0 calc(var(--perf-gap) * 2);
}
.pricing-page .plan-heading > :nth-child(2) {
  align-self: center;
  margin: 0;
}
/* Free's line: what the plan is, where the others carry their tag and switch. */
.plan-line {
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui, 1.4);
}
.pricing-page .plan-price {
  margin: 0 0 8px;
}
/* Annual hides the note that would repeat its own price (site.js sets [hidden]); it keeps
   its line box, invisible and out of the accessibility tree, so the toggle never moves
   the rail or anything under it. */
.pricing-page [data-annual-note][hidden] {
  /* !important only to outrank styles.css's global [hidden] { display: none !important }. */
  display: inline !important;
  visibility: hidden;
}
.pricing-page .plan-terms {
  margin: 0 0 16px;
}
.pricing-page .plan-features {
  margin: 0 0 20px;
}
/* The action row: pinned to the foot (margin-top: auto where the pass is a flex column),
   the same 24px above the pass's lower edge on all three. Round 5: the rail's inner
   spacing tightened by 4px a step (20px top, 16px either side of the perforation) so it
   fits under the pricing-team figure's text column inside the first 900px. */
.pricing-page .plan-action {
  display: grid;
  align-content: end;
  justify-items: stretch;
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
}
.plan-action .button {
  text-wrap: balance;
}
.pricing-page .plans-toolbar {
  display: flex;
  align-items: center;
  margin: 0;
}
.pricing-page .plans-toolbar[hidden] {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .pricing-page .plan-card:hover {
    --perf-ink: light-dark(rgb(13 15 20 / 28%), rgb(242 243 247 / 28%));
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-page .plan-card,
  .pass__perf {
    transition: none;
  }
  .pricing-page .plan-card:hover {
    transform: none;
  }
}
/* One address for both offer actions, centred under the rail. */
.plans-mailto {
  justify-content: center;
  margin: var(--space-caption) 0 0;
  text-align: center;
}
.plans-mailto .copy-status {
  left: 50%;
  transform: translateX(-50%);
}
.pricing-page .plan-notes {
  margin-top: var(--space-block);
}
.plan-notes > p {
  grid-column: 1 / 7;
}
.plan-notes > p[data-grid-col='7'] {
  grid-column: 7 / 13;
}
/* Three passes stay side by side from 961px; the columns tighten below 1180px. */
@media (min-width: 961px) and (max-width: 1180px) {
  .pricing-page .plan-card {
    padding-inline: 22px;
  }
  .pricing-page .plan-action .button {
    padding-inline: 14px;
  }
}

/* Comparison ---------------------------------------------------------------------------
   The head follows the homepage's chapter-head pattern: the h2 on columns 1-6, the lede on
   column 7, cap tops level. The Team column rises out of the recessed well as one soft
   column the well's full height, 8px in from its top, right and bottom (28 − 8 = the
   column's 20px radius); row lines run behind it. Phones get their own compact table. */
.compare-head {
  align-items: start;
  margin-bottom: var(--space-lede);
}
.compare-head > .pages-section-title {
  grid-column: 1 / 7;
  margin: 0;
}
.compare-head > .compare-head__lede {
  grid-column: 7 / 13;
  max-width: 44ch;
  margin: 0;
  padding-top: max(0px, calc(var(--h2-cap) - 8.1px));
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose, 1.6);
}
.pricing-page .comparison-scroll {
  --well-pad-x: 24px;
  --well-pad-y: 12px;
  --col-inset: 8px;
  --team-col: 0.7;
  position: relative;
  padding: var(--well-pad-y) var(--col-inset) var(--well-pad-y) var(--well-pad-x);
  border: 0;
  border-radius: var(--r-28);
  box-shadow: var(--e-inset-lg);
}
.pricing-page .comparison-scroll::before {
  content: '';
  position: absolute;
  top: var(--col-inset);
  bottom: var(--col-inset);
  left: calc(var(--well-pad-x) + (100% - var(--well-pad-x) - var(--col-inset)) * var(--team-col));
  right: var(--col-inset);
  border-radius: calc(var(--r-28) - var(--col-inset));
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
}
.pricing-page .comparison-table {
  position: relative;
  z-index: 1;
  table-layout: fixed;
}
.pricing-page .comparison-table thead th:nth-child(2) {
  width: 24%;
}
.pricing-page .comparison-table td:last-child,
.pricing-page .comparison-table thead th:last-child {
  border-bottom-color: transparent;
  background: transparent;
  color: var(--ink);
}
.pricing-page .comparison-table tbody tr:last-child > * {
  border-bottom: 0;
}
/* The Trinity row carries the app's launcher mark (the approved coloured 3). */
.plan-row__mark {
  display: inline-block;
  width: 11px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -2px;
}
/* The Lucide files draw in currentColor, which an image element resolves to black;
   opacity brings them onto the ink steps (check ≈ --ink, minus ≈ --ink-secondary). */
.cell-mark {
  opacity: 0.86;
}
.cell-mark--none {
  opacity: 0.6;
}
/* Dark: an image resolves currentColor to black, so the marks are inverted onto the light
   ink (the same opacity steps then land on --ink and --ink-secondary). Followed from the OS
   unless html[data-appearance] pins a scheme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance='light']) .cell-mark {
    filter: invert(1);
  }
}
:root[data-appearance='dark'] .cell-mark {
  filter: invert(1);
}

/* Organisations: one raised panel on the page grid. From 1024px the h2 and copy sit on
   columns 1-7 (56px in from the panel's edge) and the action on columns 9-12, centred on
   the copy (round 5), so column 8 is the one gutter between them. */
.pricing-page .organization-panel {
  border: 0;
  border-radius: var(--r-40);
  box-shadow: var(--e-raised-lg);
}
.organization-panel > * {
  grid-column: 1 / -1;
  min-width: 0;
}
.organization-panel__action {
  display: grid;
  justify-items: start;
  gap: 12px;
}
.organization-panel__action .mailto-note {
  margin: calc(var(--space-hint) - 12px) 0 0;
}
@media (min-width: 1024px) {
  .pricing-page .organization-panel {
    align-items: center;
    row-gap: 0;
    padding: 56px 0;
  }
  .organization-panel__copy {
    grid-column: 1 / 8;
    padding-left: 56px;
  }
  .organization-panel__action {
    grid-column: 9 / 13;
    align-self: center;
    padding-right: 56px;
  }
}

/* Pricing FAQ: the questions start on column 7. From 1024px the left column (columns 1-5)
   sticks beside them: the heading, the founder tag, then the offer on one raised line and
   where its button opens. */
.pricing-faq {
  align-items: start;
}
.pricing-faq__aside {
  grid-column: 1 / 6;
  min-width: 0;
  align-self: start;
}
.pricing-faq > .faq-list {
  grid-column: 7 / 13;
  min-width: 0;
}
.pricing-faq__aside .pages-section-title {
  margin-bottom: var(--space-head);
}
.pricing-strip__tag {
  margin: 0 0 var(--space-caption);
}
.pricing-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 8px 8px 8px 28px;
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
}
.pricing-strip__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  margin: 0;
  color: var(--ink);
  font: 700 var(--d-card) / var(--d-card-lh, 1.05) var(--font-display);
  letter-spacing: var(--d-card-ls, -0.01em);
}
.pricing-strip__price {
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.pricing-strip > .button {
  height: var(--btn-md);
}
.pricing-strip__note {
  margin: var(--space-caption) 0 0;
}
@media (min-width: 1024px) and (min-height: 640px) {
  .pricing-faq__aside {
    position: sticky;
    top: calc(var(--capsule-bottom, 88px) + 24px);
  }
}

/* FAQ rows (pricing, support): soft.css's .disclosure styles the row's hover and the
   chevron. The question text sits on the row's rules (round 4, C2), so the summary has no
   inline padding (soft.css's older rule gave it 8px). The zero-specificity rules below
   only draw the chevron until .disclosure lands, so they never outrank it. */
.faq-item summary {
  padding-inline: 0;
}
:where(.faq-item) :where(.disclosure__chevron) {
  display: block;
  width: 20px;
  height: 20px;
  margin-top: calc((1.4em - 20px) / 2);
  background: var(--ink-secondary);
  -webkit-mask: url('/icons/chevron-right.svg') center / 20px 20px no-repeat;
  mask: url('/icons/chevron-right.svg') center / 20px 20px no-repeat;
  transition: transform var(--dur-ui) var(--ease-out);
}
:where(.faq-item[open]) :where(.disclosure__chevron) {
  transform: rotate(90deg);
}

/* Support ------------------------------------------------------------------------------
   Round 5 (call 13, zero-credit state): a 6/6 split, no picture. Columns 1-6: the h1, the
   lede and the one red "Email support"; column 7: a compact address card (Barlow
   Condensed 700 at the price size), its inline 44px copy control and where it opens,
   bottom-aligned with the email action. Below, one grid: the questions on columns 7-12
   and, beside them on columns 1-5, one raised contact card (sticky from 1024px) whose
   ruled lower zone holds the safety route. The tier-S state (.support-hero--art) swaps
   the address for a 4:5 window and puts the standard mailto note under the button. */
.support-hero {
  --h1-cap: calc(var(--d-h1) * 0.18);
  --h2-cap: calc(var(--d-h2) * 0.19);
  align-items: start;
  padding-top: var(--space-top);
}
.support-hero__copy {
  grid-column: 1 / 7;
  min-width: 0;
}
.support-hero__copy .pages-title {
  margin: 0 0 var(--space-head);
}
.support-hero__lede {
  max-width: 36ch;
  margin: 0 0 var(--space-lede);
}
.support-hero__copy > .button {
  height: var(--btn-lg);
}
/* A content-sized contact line beside the email action, not a second hero. The inset
   pearl keeps the address grouped with its inline copy control and helper line. */
.support-address {
  position: relative;
  grid-column: 7 / 13;
  align-self: end;
  justify-self: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin-top: 0;
  padding: 24px;
  border-radius: var(--r-28);
  box-shadow: var(--e-inset-lg);
}
.support-address__line {
  margin: 0;
  color: var(--ink);
  font: 700 var(--d-price) / var(--d-price-lh) var(--font-display);
  letter-spacing: var(--d-card-ls);
  overflow-wrap: anywhere;
  text-wrap: wrap;
}
.support-address .copy-address {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: normal;
}
.support-address__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.12em;
  transition: text-decoration-color var(--dur-ui) var(--ease-out);
}
@media (hover: hover) {
  .support-address__link:hover {
    text-decoration-color: currentColor;
  }
}
.support-address__link:focus-visible {
  border-radius: var(--r-16);
}
/* The 44px control follows the address; feedback occupies the helper row without reflow. */
.support-address .icon-button--copy {
  position: static;
  flex-shrink: 0;
}
.support-address .copy-status {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  white-space: nowrap;
  letter-spacing: normal;
}
.support-address__note {
  margin: 8px 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  line-height: var(--lh-ui, 1.4);
}
/* Tier S: the kitchen still on columns 7-12, 4:5, its top at the h1's cap. */
.support-hero--art > .support-art {
  grid-column: 7 / 13;
  justify-self: end;
  width: min(100%, 520px);
  margin-top: var(--h1-cap);
  aspect-ratio: 4 / 5;
}

/* The questions first in the DOM, on columns 7-12; the contact card beside them on 1-5,
   its top at the questions' h2 cap. */
.support-page .support-layout {
  --h2-cap: calc(var(--d-h2) * 0.19);
  align-items: start;
  padding-top: clamp(72px, 8vw, 120px);
}
.support-questions {
  grid-column: 7 / 13;
  grid-row: 1;
  min-width: 0;
}
.support-contact {
  grid-column: 1 / 6;
  grid-row: 1;
  min-width: 0;
  margin-top: var(--h2-cap);
}
.support-page .support-contact-main {
  padding: var(--pad-card) var(--pad-card) 0;
  border: 0;
  border-radius: var(--r-28);
  box-shadow: var(--e-raised-lg);
}
.support-contact-main > p {
  margin: 0;
}
.support-contact-main > .support-help-note {
  margin-top: var(--space-block);
  padding-top: 0;
  border-top: 0;
}
.support-contact-main > p:not(.support-help-note) + .support-help-note {
  margin-top: var(--space-lede);
}
.support-page .support-questions .pages-section-title {
  margin-bottom: var(--space-head);
}
.support-page .faq-search {
  margin-bottom: var(--space-block);
}
.support-page .support-contact h2 {
  margin: 0 0 var(--space-head);
}
/* The ruled lower zone: a hairline across the card's full width, then the safety route. */
.support-page .support-safety {
  margin: var(--space-block) calc(-1 * var(--pad-card)) 0;
  padding: var(--space-block) var(--pad-card) 20px;
  border: 0;
  border-top: 1px solid var(--border);
}
.support-page .support-safety p {
  max-width: 40ch;
  margin: 0 0 8px;
}
/* The card stays with the reader through the questions. The height floor keeps a card
   taller than a short window from being cut off while it sticks. */
@media (min-width: 1024px) and (min-height: 640px) {
  .support-contact {
    position: sticky;
    top: calc(var(--capsule-bottom, 88px) + 24px);
  }
}
@media (max-width: 1023px) {
  /* Tablets: the same compact address sits under the action in one column. */
  .support-hero__copy,
  .support-address {
    grid-column: 1 / -1;
  }
  .support-address {
    margin-top: 24px;
  }
  /* Tablets: one column, the questions and then the card at a readable width. */
  .support-page .support-layout {
    row-gap: 56px;
  }
  .support-questions,
  .support-contact {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .support-contact {
    max-width: 560px;
    margin-top: 0;
  }
}
@media (max-width: 760px) {
  .support-hero__copy,
  .support-address,
  .support-hero--art > .support-art {
    grid-column: 1 / -1;
  }
  .support-hero__copy > .button {
    width: 100%;
  }
  .support-address {
    margin-top: 32px;
    padding: 24px;
    border-radius: var(--r-28);
  }
  .support-address__line {
    font-size: var(--d-card);
    line-height: var(--d-card-lh);
    letter-spacing: var(--d-card-ls);
  }
  .support-address .copy-address {
    gap: 8px;
    justify-content: space-between;
  }
  .support-address .copy-status {
    top: 100%;
  }
  .support-hero--art > .support-art {
    justify-self: stretch;
    width: 100%;
    margin-top: 32px;
  }
  .support-page .support-layout {
    row-gap: 48px;
    padding-top: 64px;
  }
  .support-page .support-contact-main {
    padding: 28px 24px 0;
  }
  .support-page .support-safety {
    margin-inline: -24px;
    padding-inline: 24px;
  }
}
/* Inputs are the one thing recessed small; focus presses the well deeper (the ink ring
   stays). */
.support-page .faq-search input {
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--e-inset-sm);
  transition: box-shadow var(--dur-ui) var(--ease-out);
}
.support-page .faq-search input:focus {
  box-shadow:
    inset 5px 5px 10px light-dark(rgb(13 15 20 / 16%), rgb(6 8 12 / 70%)),
    inset -5px -5px 10px var(--soft-light);
}
@media (prefers-reduced-motion: reduce) {
  .support-page .faq-search input {
    transition: none;
  }
}
.faq-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--ink-secondary);
  -webkit-mask: url('/icons/x.svg') center / 16px no-repeat;
  mask: url('/icons/x.svg') center / 16px no-repeat;
  cursor: pointer;
}

/* 404 ----------------------------------------------------------------------------------
   Round 5 (call 10): one window across the column, 16:7 from 761px and 4:5 at 760px and
   below, with the h1 inside at its lower left (--window-inset) over a scrim deepest there;
   then, on pearl 32px below, the lede and both actions on columns 1-6. No dock. The
   picture is the lacrosse salvage: the calm grass in the left half takes the h1, the two
   players run in the right half (lane D's boxes, handoff.json). */
.not-found {
  --window-inset: clamp(24px, 4.4vw, 64px);
  display: block;
  min-height: 0;
  padding-top: var(--space-top);
  padding-bottom: 0;
}
.not-found__window {
  display: flex;
  align-items: flex-end;
  width: 100%;
  aspect-ratio: 16 / 7;
}
.not-found__window .field-window__media {
  object-position: 70% 30%;
}
/* Tuned against the brightest 5% of pixels behind the h1: 3:1 or more at 1024-1920 and at
   390 and 320 (round 5 contrast probe, r5/build-C). */
.not-found__scrim {
  background: radial-gradient(
    80% 110% at 0% 100%,
    rgb(9 12 11 / 66%) 0%,
    rgb(9 12 11 / 40%) 45%,
    rgb(9 12 11 / 0) 78%
  );
}
.not-found__copy {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(50% + var(--window-inset));
  padding: 0 var(--window-inset) var(--window-inset);
}
.not-found__copy .pages-title {
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 24px rgb(0 0 0 / 28%);
}
.not-found__below {
  align-items: start;
  padding-top: var(--space-block);
}
.not-found__below-copy {
  grid-column: 1 / 7;
  min-width: 0;
}
.not-found__lede {
  max-width: 44ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-20);
  line-height: var(--lh-prose, 1.6);
}
.not-found__lede a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
/* The h1 sits inside the window, so the line under it is a block, not a heading's lede. */
.not-found__below .not-found-actions {
  margin: var(--space-block) 0 0;
}
.not-found__below .not-found-actions .button {
  height: var(--btn-md);
}
/* 2026-10-19 refresh: a quiet row of the routes most people look for. */
.not-found__more {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: var(--space-block);
  font-size: var(--fs-15);
  line-height: var(--lh-ui, 1.4);
}
/* Short routes: the footer's sign-off at the section-heading size, not the homepage's. */
.not-found-page .foot__signoff,
.link-fallback-page .foot__signoff {
  font-size: var(--d-h2);
  line-height: var(--d-h2-lh);
}
@media (max-width: 760px) {
  .not-found {
    --window-inset: 20px;
    padding-top: 20px;
  }
  .not-found__window {
    aspect-ratio: 4 / 5;
  }
  .not-found__window .field-window__media {
    object-position: 50% 50%;
  }
  .not-found__scrim {
    background: linear-gradient(
      0deg,
      rgb(9 12 11 / 78%) 0%,
      rgb(9 12 11 / 52%) 30%,
      rgb(9 12 11 / 0) 56%
    );
  }
  .not-found__copy {
    max-width: none;
  }
  .not-found__below-copy {
    grid-column: 1 / -1;
  }
  .not-found__lede {
    font-size: var(--fs-17);
  }
}
@media (max-width: 430px) {
  .not-found__below .not-found-actions {
    display: grid;
  }
  .not-found__below .not-found-actions .button {
    width: 100%;
  }
}

/* ID-12 link fallbacks (/invite/{token}, /l/{type}/{id}) --------------------------------
   Round 5 (calls 10 and 14). /invite/ keeps one centred axis down to the footer, 720px at
   most: the headline, the art window when it lands (16:7, 720x315), the pass, then the
   help band, centred too. /l/ is a split grid of its own: from 1024px the headline and
   lede on columns 1-6 and the pass on 7-12, top-aligned to the h1's cap; with the
   open-gate still the art takes 7-12 (4:5) and the pass returns under the lede. Both end
   on the help band: while the stores have no listing it says TEAMON3 is in pre-launch;
   once the store links unhide, the three install steps show instead. */
.link-fallback {
  padding: var(--space-top) 0 0;
}

.link-fallback__intro {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
}
.link-fallback__title {
  margin: 0 0 20px;
}
.link-fallback .pages-lede {
  max-width: 44ch;
  margin: 0;
}

/* /invite/: the centred column. */
.link-fallback--center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(720px, 100%) minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  text-align: center;
}
.link-fallback--center > * {
  grid-column: 2;
  min-width: 0;
}
.link-fallback--center .pages-lede {
  margin-inline: auto;
  text-wrap: balance;
}
.link-fallback--center > .link-fallback__art {
  width: 100%;
  margin-top: 40px;
  aspect-ratio: 16 / 7;
}
.link-fallback--center:has(.link-fallback__art) > .team-pass {
  margin-top: -56px;
}

/* /l/: the split grid (.grid-12 in the markup). Below 1024px one column: the headline and
   lede, then the pass. */
.link-fallback--split {
  align-items: start;
  padding-top: 64px;
  text-align: left;
}
.link-fallback--split > .link-fallback__intro,
.link-fallback--split > .team-pass {
  grid-column: 1 / -1;
}
.link-fallback--split > .team-pass {
  justify-self: start;
}
.link-fallback--split > .link-fallback__art {
  grid-column: 7 / 13;
  grid-row: 1 / span 2;
  justify-self: start;
  width: min(100%, 520px);
  margin-top: var(--h1-cap);
  aspect-ratio: 4 / 5;
}
.link-fallback--split > .link-help {
  grid-column: 1 / -1;
}
@media (min-width: 1024px) {
  /* The band on the same grid: "Link not working?" (ready state only) on columns 1-6 and
     the install row beside it on 7-12; alone, the install row keeps 1-6. */
  .link-fallback--split > .link-help {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap, 32px);
  }
  .link-fallback--split > .link-help > .link-help__row {
    grid-column: 1 / 7;
    grid-row: 1;
  }
  .link-fallback--split > .team-pass[data-pass-state='ready'] ~ .link-help > .link-help__install {
    grid-column: 7 / 13;
  }
  /* Half the column holds the steps as a list, not a cramped row of three. */
  .link-fallback--split .link-steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
  .link-fallback--split > .link-fallback__intro {
    grid-column: 1 / 7;
    grid-row: 1;
  }
  /* The pass's face starts level with the h1's cap top; its tilted plate shows past it. */
  .link-fallback--split > .team-pass {
    grid-column: 7 / 13;
    grid-row: 1;
    margin-top: var(--h1-cap);
  }
  .link-fallback--split:has(.link-fallback__art) > .team-pass {
    grid-column: 1 / 7;
    grid-row: 2;
    margin-top: 48px;
  }
}

/* The pass: upright, on a backing plate. The plate (.team-pass::before) is the pass's
   own outline tilted -1.5 degrees and raised large, so a corner shows at the top right
   and the bottom left; the ticket itself (.team-pass__face, the .pass) stands at 0 degrees
   on it with the small raise, so its text is never rotated. On arrival the plate fans out
   from under the ticket. */
.team-pass {
  position: relative;
  isolation: isolate;
  z-index: 3;
  width: min(100%, 560px);
  margin-top: 48px;
  text-align: left;
}
.team-pass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
  transform: rotate(-1.5deg);
}
@media (prefers-reduced-motion: no-preference) {
  .team-pass::before {
    animation: plate-fan 480ms var(--ease-out) 120ms both;
  }
}
@keyframes plate-fan {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-1.5deg);
  }
}
.team-pass__face {
  --perf-y: 72px;
}
.team-pass__stub {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--perf-y);
  padding: 0 32px;
}
/* The stub's name ("Team invite", "Shared link"): a label, not a disclosure, so it takes
   the marker voice rather than the truth tag's pill. */
.pass-label {
  margin: 0;
  color: var(--ink-secondary);
  font: 700 var(--fs-13) / var(--lh-ui, 1.4) var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.team-pass__body {
  display: grid;
  gap: 14px;
  padding: 28px 32px 32px;
}
.team-pass__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.team-pass__actions > .button {
  height: var(--btn-md);
}
.team-pass__open {
  width: 100%;
}
.team-pass[data-pass-device='desk'] [data-email-self] {
  flex: 1 1 auto;
}
.team-pass__fine {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  line-height: var(--lh-ui, 1.4);
  text-align: center;
}
.team-pass__missing {
  display: grid;
  justify-items: start;
  gap: 10px;
}
.team-pass__missing > p {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-17);
  line-height: var(--lh-prose, 1.6);
}
.team-pass__missing > .team-pass__title {
  margin: 0;
}
/* Two pearl ways out when the link cannot open: the app tour and a person. */
.team-pass__missing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
}
.team-pass__missing-actions > .button {
  flex: 1 1 auto;
  height: var(--btn-md);
}
/* Two states. Missing (the default, and the no-JavaScript state) says how to get in
   without a working link and offers the app tour; ready (set by /invite.js and /l.js) is
   the action, and on a fine-pointer-only computer (data-pass-device="desk") the two ways
   to send the link to a phone. The "Link not working?" row below repeats the missing
   half, so it waits for ready. */
.team-pass__fine--desk,
.team-pass[data-pass-device='desk'] .team-pass__fine--touch,
.team-pass[data-pass-state='missing'] .team-pass__actions,
.team-pass[data-pass-state='missing'] .team-pass__fine,
.team-pass[data-pass-state='ready'] .team-pass__missing,
.team-pass[data-pass-state='missing'] ~ .link-help [data-pass-ready-only] {
  display: none;
}
.team-pass[data-pass-state='ready'][data-pass-device='desk'] .team-pass__fine--desk {
  display: block;
}

/* Help: one band across the page column, a hairline above it (left-aligned on /l/,
   centred on /invite/). The install steps are a list on phones and tablets and a row of
   three from 1024px, each number in a small recessed well centred on the first line of
   its step. */
.link-fallback > .link-help {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: grid;
  gap: 48px;
  width: 100%;
  margin-top: 88px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.link-help__row {
  min-width: 0;
  padding: 0;
  border: 0;
}
.link-help__title {
  margin: 0 0 16px;
}
.link-help__row p {
  max-width: 48ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose, 1.6);
}
.link-help__row > .link-help__title:last-child,
.link-help__row > p:last-child {
  margin-bottom: 0;
}
.link-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 560px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.link-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
  color: var(--ink);
  font-size: var(--fs-17);
  line-height: var(--lh-ui, 1.4);
  counter-increment: step;
}
.link-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: var(--e-inset-sm);
  color: var(--ink);
  font: 700 var(--fs-20) / 1 var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  /* Centred on the step's first line (17px at 1.4), so a two-line step keeps its number
     level with the line it starts on. */
  margin-top: calc((1.4em - 44px) / 2);
}
.link-steps + [data-store-links] {
  margin-top: 16px;
}
/* Round 5, call 14 (wording neutral since 2026-10-19). While the store links are hidden
   the band says what the link needs and the three steps wait; unhiding the links (ID-12)
   flips both. */
.link-help__install:has([data-store-links][hidden]) .link-steps {
  display: none;
}
.link-help__install:not(:has([data-store-links][hidden])) .link-prelaunch {
  display: none;
}
@media (min-width: 1024px) {
  .link-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-gap, 32px);
    max-width: none;
  }
}
/* /invite/: the band keeps the page's centred axis, its rule the centre column's width.
   From 1024px the steps are one centred row of three 240px columns, each number centred
   above its text. */
.link-fallback--center > .link-help {
  justify-items: center;
  text-align: center;
}
@media (min-width: 761px) {
  .link-fallback--center > .link-help {
    grid-column: 2;
  }
}
.link-fallback--center .link-help__row p {
  margin-inline: auto;
  text-wrap: balance;
}
.link-fallback--center .link-steps {
  margin-inline: auto;
  text-align: left;
}
@media (min-width: 1024px) {
  /* 3 x 240 = the 720px centre column; the text keeps 12px clear of its neighbour. */
  .link-fallback--center .link-steps {
    grid-template-columns: repeat(3, 240px);
    justify-content: center;
    column-gap: 0;
    text-align: center;
  }
  .link-fallback--center .link-steps li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: center;
    row-gap: 14px;
    padding-inline: 12px;
  }
  .link-fallback--center .link-steps li::before {
    margin-top: 0;
  }
}
/* Fit (lane B, 2026-09-25): from 1024px the page must fit one screen down to 1280x720, and a
   single centred stack (headline, pass, then the help band under a rule) ran 1.28 screens.
   The headline keeps the centred axis across the full 960px; under it the pass (560px) and
   the help band share one row, the band on the right behind a vertical hairline and set
   left, its install steps back to a list. Auto-placement keeps them paired whether or not
   the art window lands above. */
@media (min-width: 1024px) {
  .link-fallback--center {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 400px) minmax(0, 1fr);
    padding-top: 40px;
  }
  .link-fallback--center > .link-fallback__intro,
  .link-fallback--center > .link-fallback__art {
    grid-column: 2 / 4;
  }
  .link-fallback--center > .team-pass {
    grid-column: 2;
    justify-self: start;
    margin-top: 40px;
  }
  .link-fallback--center > .link-help {
    grid-column: 3;
    align-self: stretch;
    align-content: center;
    justify-items: start;
    gap: 32px;
    width: auto;
    margin: 40px 0 0 48px;
    padding: 0 0 0 48px;
    border-top: 0;
    border-left: 1px solid var(--border);
    text-align: left;
  }
  .link-fallback--center .link-help__row p {
    margin-inline: 0;
  }
  .link-fallback--center .link-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    margin-inline: 0;
    text-align: left;
  }
  .link-fallback--center .link-steps li {
    grid-template-columns: 44px minmax(0, 1fr);
    justify-items: stretch;
    padding-inline: 0;
  }
  .link-fallback--center .link-steps li::before {
    margin-top: calc((1.4em - 44px) / 2);
  }
}

@media (max-width: 760px) {
  .link-fallback--center {
    grid-template-columns: minmax(0, 1fr);
  }
  .link-fallback--center > * {
    grid-column: 1;
  }
  .link-fallback--center > .link-fallback__art {
    margin-top: 28px;
    aspect-ratio: 16 / 9;
  }
  .link-fallback--center:has(.link-fallback__art) > .team-pass {
    margin-top: -32px;
  }
  .link-fallback--split > *,
  .link-fallback--split > .link-fallback__intro,
  .link-fallback--split > .team-pass {
    grid-column: 1 / -1;
  }
  .link-fallback--split > .link-fallback__art,
  .link-fallback--split:has(.link-fallback__art) > .link-fallback__art {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: stretch;
    width: 100%;
    margin: 0 0 28px;
    aspect-ratio: 16 / 9;
  }
  .link-fallback--split:has(.link-fallback__art) > .link-fallback__intro,
  .link-fallback--split:has(.link-fallback__art) > .team-pass {
    grid-column: 1 / -1;
  }
  .team-pass {
    width: 100%;
    margin-top: 32px;
  }
  .team-pass__stub {
    padding-inline: 24px;
  }
  .team-pass__body {
    padding: 24px;
  }
  .team-pass__actions > .button {
    flex: 1 1 100%;
  }
  /* Fit (lane B, 2026-09-25): 32px above and below the rule keeps the page within 1.25
     screens at 390x664. */
  .link-fallback > .link-help {
    gap: 32px;
    margin-top: 32px;
    padding-top: 32px;
  }
}
@media (max-width: 360px) {
  .team-pass__body {
    padding-inline: 20px;
  }
  .team-pass__open.button {
    padding-inline: 12px;
  }
}

/* Legal (chrome only) -------------------------------------------------------------------- */
/* From 1024px the page is on the one grid (round 5, call 15): the 240px contents start on
   the column's left edge and the article on column 5, whose left edge is a third of the
   column plus a third of a gutter in (x=517 at 1440, 757 at 1920). The article keeps its
   680px measure and shrinks rather than overflowing at 1024. */
.legal-page .legal-layout {
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 48px;
}
.legal-page .legal {
  max-width: 680px;
}
@media (min-width: 1024px) {
  .legal-page .legal-layout {
    grid-template-columns: 240px minmax(0, 680px);
    justify-content: start;
    column-gap: calc((100% + var(--grid-gap, 32px)) / 3 - 240px);
  }
}
.legal-page .legal__summary {
  border: 0;
  border-radius: var(--r-28);
  box-shadow: var(--e-inset-lg);
}
/* Phones: a softer highlight, so the recess has no bright band down its right edge. */
@media (max-width: 760px) {
  .legal-page .legal__summary {
    box-shadow:
      inset 9px 9px 20px var(--soft-shadow),
      inset -6px -6px 14px var(--soft-light);
  }
}
.legal-page .legal-nav {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* Document switcher: soft.css's .seg as a vertical track beside the article (the current
   document raised); three across on phones. Only layout lives here. */
.legal-switch {
  display: flex;
  width: 100%;
}

/* On this page: every numbered section, the one in view marked by legal.js as a raised
   pill. The list scrolls inside the sticky column so all 22 / 26 entries stay reachable. */
.legal-toc {
  margin: 0;
  padding: 0 0 0 32px;
  list-style: decimal;
}
.legal-toc li {
  margin: 0;
  padding: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  line-height: var(--lh-ui, 1.4);
}
.legal-toc li::marker {
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}
.legal-toc a {
  display: block;
  margin: 1px 0;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-ui, 1.4);
  text-decoration: none;
  transition:
    box-shadow var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out);
}
@media (hover: hover) {
  .legal-toc a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
}
.legal-toc a[aria-current='true'] {
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
  color: var(--ink);
  text-decoration: none;
}
.legal-page .legal-shortcuts {
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .legal-page .legal-nav {
    position: sticky;
    top: calc(var(--capsule-bottom, 88px) + 16px);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 128px);
    max-height: calc(100dvh - 128px);
  }
  .legal-page .legal-shortcuts {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  /* Scrolls on its own; the padding keeps the raised pill's shadow inside the clip. */
  .legal-page .legal-shortcuts .legal-toc {
    flex: 1 1 auto;
    min-height: 0;
    margin: -16px -16px 0 -8px;
    padding: 16px 16px 40px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* The last visible entry fades out, so a clipped list reads as "more below". */
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
  }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .legal-page .legal-nav {
    position: static;
  }
}

/* Phones: the Contents pill and its sheet. Hidden wherever the sidebar shows. */
.legal-contents {
  display: none;
}
@media (max-width: 760px) {
  .legal-page .legal-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .legal-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: var(--r-pill);
  }
  .legal-switch > a {
    justify-content: center;
    padding: 6px 8px;
    font-size: var(--fs-15);
    line-height: var(--lh-ui, 1.4);
    text-align: center;
  }
  /* Across, the track is a pill, so its options and thumb are pills too (the stacked
     track's 28 − 4 = 24px nesting no longer applies). */
  .legal-switch > a,
  .legal-switch > .seg__thumb {
    border-radius: var(--r-pill);
  }
  /* "Privacy / Terms / Contact" to the eye; the full names stay in each link's name. */
  .legal-switch__more {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* The Contents pill: solid pearl with a tight drop (no white halo; it floats over text),
     centred over a fixed 88px band that fades the page out beneath it. The band lets taps
     through; only the pill and its sheet take them. */
  .legal-contents {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: calc(88px + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(
      light-dark(rgb(232 233 229 / 0), rgb(26 29 40 / 0)),
      light-dark(#e8e9e5, #1a1d28) 40%
    );
    pointer-events: none;
  }
  /* Round 6 fix 2 (S4): while the menu is open (site.js marks <html> .menu-open) the pill
     and its sheet go under the menu's frosted scrim (z-index 19) with the rest of the page,
     which is inert meanwhile. */
  .menu-open .legal-contents {
    z-index: 18;
  }
  .legal-contents > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 20px;
    border-radius: var(--r-pill);
    background: var(--surface);
    /* Dark: the pill is the page's own colour, so a faint rim keeps its edge over text. */
    box-shadow:
      0 6px 16px -6px light-dark(rgb(6 8 7 / 35%), rgb(4 5 9 / 70%)),
      0 0 0 1px light-dark(transparent, var(--rim-dark));
    color: var(--ink);
    font-size: var(--fs-15);
    font-weight: 600;
    line-height: var(--lh-ui, 1.4);
    list-style: none;
    cursor: pointer;
    pointer-events: auto;
  }
  .legal-contents > summary::-webkit-details-marker {
    display: none;
  }
  .legal-contents > summary::after {
    content: '';
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url('/icons/chevron-down.svg') center / 18px no-repeat;
    mask: url('/icons/chevron-down.svg') center / 18px no-repeat;
    transform: rotate(180deg);
    transition: transform var(--dur-ui) var(--ease-out);
  }
  .legal-contents[open] > summary::after {
    transform: none;
  }
  .legal-contents__sheet {
    position: absolute;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    width: min(calc(100vw - 32px), 360px);
    max-height: 60vh;
    padding: 16px 12px 16px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--r-28);
    background: var(--surface);
    box-shadow:
      0 18px 40px -14px light-dark(rgb(6 8 7 / 40%), rgb(4 5 9 / 80%)),
      0 2px 6px rgb(6 8 7 / 10%),
      0 0 0 1px light-dark(transparent, var(--rim-dark));
    transform: translateX(-50%);
    pointer-events: auto;
  }
  .legal-contents__sheet .legal-toc {
    padding-left: 36px;
  }
  .legal-contents__sheet .legal-toc a {
    padding-block: 10px;
  }
  /* The last lines of the document clear the band and the pill. */
  .legal-page .legal-layout {
    padding-bottom: 112px;
  }
  /* The pill never sits on the footer's last line. */
  .legal-page .foot {
    padding-bottom: 88px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .legal-contents > summary::after,
  .faq-item .disclosure__chevron,
  .faq-item::details-content {
    transition: none;
  }
}

/* Pricing, tablet and phone -------------------------------------------------------------
   From 960px down the passes stack (Early Team first), each keeping the shared stub; the
   intro, notes, comparison head, organisation panel and FAQ each become one column. */
@media (max-width: 960px) {
  .pricing-page .plans-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
  }
  .pricing-page .plan-card {
    display: flex;
    padding: var(--pad-top) 24px 24px;
  }
  .pricing-page .plan-card--early {
    order: -1;
  }
}
@media (max-width: 1023px) {
  .pricing-faq__aside,
  .pricing-faq > .faq-list {
    grid-column: 1 / -1;
  }
  .pricing-faq {
    row-gap: 32px;
  }
}
@media (max-width: 760px) {
  /* Round 5 (call 12): the h1 leads straight into the passes, so $0 and $99 both show
     above a 640px fold at 320x640; the figure and the lede follow the passes and their
     email note. Only the intro's children move (it lays itself out as contents of the
     page column, now one flex column); the DOM, and so the reading and focus order, stays
     h1, lede, figure, passes. */
  .pricing-page main > .wrap {
    display: flex;
    flex-direction: column;
  }
  :where(.pricing-page main > .wrap) > * {
    order: 4;
  }
  .pricing-page .pricing-intro,
  .pricing-page .pricing-intro:has(.pricing-art) {
    display: contents;
  }
  .pricing-page .pricing-intro__title {
    order: 0;
    margin-top: var(--space-top);
  }
  .pricing-page .plans-grid {
    order: 1;
  }
  .pricing-page .plans-mailto {
    order: 2;
  }
  .pricing-page .pricing-intro > .pricing-art {
    order: 3;
  }
  .pricing-page .pricing-intro > .pricing-intro__aside {
    order: 4;
  }
  .pricing-page .pricing-intro > .pricing-art {
    margin-top: var(--space-block);
  }
  .pricing-page .pricing-intro > .pricing-intro__aside,
  .pricing-page .pricing-intro:has(.pricing-art) > .pricing-intro__aside {
    padding-top: var(--space-block);
  }
  .pricing-page .pricing-intro:not(:has(.pricing-art)) > .pricing-intro__aside {
    margin-top: 0;
  }
  .plan-notes > p,
  .plan-notes > p[data-grid-col='7'],
  .compare-head > .pages-section-title,
  .compare-head > .compare-head__lede {
    grid-column: 1 / -1;
  }
  /* No tray on phones: the passes sit on the page column, and their notches show the
     page surface. */
  .pricing-page .plans-grid {
    gap: 12px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  /* Each pass's first row holds its name and its price (price right, on the name's
     baseline); Free's line, the founder tag or the Season/Annual switch takes the second
     row; the perforation follows, then the terms. The heading's two children join the
     pass's own grid. */
  .pricing-page .plan-card,
  .pricing-page .plan-card.pass {
    --pad-top: 20px;
    --row-1: 40px;
    --row-2: 60px;
    --perf-gap: 16px;
    --stub-h: calc(var(--row-1) + var(--row-2));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: var(--row-1) var(--row-2) auto auto 1fr;
    align-content: start;
    column-gap: 12px;
    row-gap: 0;
    padding: var(--pad-top) 20px 20px;
  }
  .pricing-page .plan-card > * {
    grid-column: 1 / -1;
  }
  /* Stacked, each pass keeps only the second row it needs. Early Team takes the small
     raise here: without the tray, the large one's white highlight would wash the h1's
     last line 20px above it. */
  .pricing-page .plan-card--free {
    --row-2: 40px;
  }
  .pricing-page .plan-card--early {
    --row-2: 46px;
    --pass-raise: var(--pass-raise-sm);
  }
  .pricing-page .plan-heading {
    display: contents;
  }
  .pricing-page .plan-title {
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
  }
  .pricing-page .plan-price {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
    justify-self: end;
    margin: 0;
  }
  .pricing-page .plan-heading > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    margin: 8px 0 0;
  }
  .pricing-page .plan-terms {
    grid-row: 3;
    margin: calc(var(--perf-gap) * 2) 0 16px;
  }
  .pricing-page .plan-features {
    grid-row: 4;
    margin: 0 0 20px;
  }
  .pricing-page .plan-action {
    grid-row: 5;
  }
  .pricing-page .plan-notes {
    row-gap: var(--space-block);
    margin-top: var(--space-block);
  }
  .compare-head {
    row-gap: var(--space-head);
    margin-bottom: var(--space-lede);
  }
  .compare-head > .compare-head__lede {
    padding-top: 0;
  }
  /* The comparison: a compact three-column table (feature | Free | Team). The header is
     an ordinary first row in the well with a hairline under it (round 4: it no longer
     sticks), and the raised Team column is dropped at this width. */
  .pricing-page .comparison-scroll {
    --well-pad-x: 12px;
    --well-pad-y: 6px;
    padding: var(--well-pad-y) var(--well-pad-x);
  }
  .pricing-page .comparison-scroll::before {
    display: none;
  }
  .pricing-page .comparison-table th,
  .pricing-page .comparison-table td {
    height: 44px;
    padding: 8px 4px;
    font-size: var(--fs-15);
    line-height: var(--lh-ui, 1.4);
  }
  .pricing-page .comparison-table th:first-child {
    width: auto;
    padding-left: 8px;
  }
  .pricing-page .comparison-table thead th:nth-child(2) {
    width: 70px;
  }
  .pricing-page .comparison-table thead th:last-child {
    width: 108px;
  }
  .pricing-page .comparison-table thead th,
  .pricing-page .comparison-table thead th:last-child {
    border-bottom: 1px solid var(--border);
    background: transparent;
  }
  .pricing-page .comparison-table td:last-child {
    border-bottom-color: var(--border);
  }
  .pricing-page .comparison-table tbody tr:last-child > * {
    border-bottom: 0;
  }
  .plan-row__mark {
    margin-right: 6px;
  }
  .comparison-long {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .organization-panel__action {
    justify-items: stretch;
  }
  .organization-panel__action .button {
    width: 100%;
  }
  /* The questions come before the offer on phones: the aside's children join the grid and
     the heading leads, the list follows, the offer closes. */
  .pricing-faq__aside {
    display: contents;
  }
  .pricing-faq__aside > * {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .pricing-faq__aside .pages-section-title {
    order: 1;
    margin-bottom: 0;
  }
  .pricing-faq > .faq-list {
    order: 2;
  }
  .pricing-strip__tag {
    order: 3;
    justify-self: start;
    margin: var(--space-block) 0 var(--space-caption);
  }
  .pricing-strip {
    order: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 16px;
    padding: 24px 20px 20px;
  }
  .pricing-strip > .button {
    width: 100%;
  }
  .pricing-strip__note {
    order: 5;
    margin: 0;
  }
  .pricing-faq {
    row-gap: 20px;
  }
}
/* 320px: the comparison's value columns and the well's padding give the feature names
   room (after the 760px block, which sets the same properties). */
@media (max-width: 360px) {
  .pricing-page .plan-card {
    padding-inline: 20px;
  }
  .plan-action .button {
    padding-inline: 16px;
  }
  .pricing-page .comparison-scroll {
    --well-pad-x: 4px;
  }
  .pricing-page .comparison-table th:first-child {
    padding-left: 10px;
  }
  .pricing-page .comparison-table thead th:nth-child(2) {
    width: 66px;
  }
  .pricing-page .comparison-table thead th:last-child {
    width: 100px;
  }
}

/* ─── The closing (.site-close), /app/ and /trinity/ ──────────────────────────────
   Round 6, fix round 3: one component, moved here from app-page.css and trinity.css
   (fix round 2 kept two byte-identical copies). Headline and a one-line recap on the
   left with the page's cross-link under them; right, the Early Team email first, then
   the plans, then the address and its copy control. Phones: copy, actions, cross-link.
   scripts/check-app-page.py rule 12 holds the two routes' panels to the same geometry. */
.site-close {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    'copy actions'
    'more actions';
  grid-template-rows: auto 1fr;
  gap: var(--space-lede) var(--grid-gap);
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid light-dark(rgb(255 255 255 / 70%), var(--rim-dark));
  border-radius: var(--r-40);
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
}
.site-close__copy {
  grid-area: copy;
  min-width: 0;
}
.site-close__copy h2 {
  margin: 0;
  text-align: left;
  text-wrap: balance;
}
.site-close__copy p {
  max-width: 56ch;
  margin: var(--space-head) 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.site-close__actions {
  display: flex;
  grid-area: actions;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  justify-self: end;
  width: min(100%, 320px);
}
/* Stacked actions sit 12px apart; the note under them is a hint (--space-hint). */
.site-close__actions > .button + .button {
  margin-top: 12px;
}

.site-close__more {
  grid-area: more;
  align-self: start;
  margin: 0;
}
@media (max-width: 760px) {
  .site-close {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'copy'
      'actions'
      'more';
    grid-template-rows: none;
    gap: 0;
    padding: 28px 20px;
  }
  .site-close__actions {
    justify-self: stretch;
    width: 100%;
    margin-top: var(--space-lede);
  }
  .site-close__more {
    margin-top: var(--space-block);
  }
}

/* Lane P fit pass: scoped to pricing, support and 404. */
.pricing-page .fit-rail-hint {
  display: none;
}
.pricing-page .comparison-scroll {
  margin-top: 0;
  padding-block: 12px;
}
.pricing-page .comparison-table th,
.pricing-page .comparison-table td {
  padding-block: 10px;
  line-height: var(--lh-ui);
}
.pricing-page .comparison-table thead th {
  padding-block: 12px;
}

.support-page .support-fit {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}
.support-page .support-hero {
  grid-column: 1 / -1;
  grid-row: 1;
}
.support-page .support-questions {
  grid-row: 2;
  margin-top: var(--space-section);
}
.support-page .support-contact {
  grid-row: 2;
  margin-top: var(--space-section);
}
.not-found-page .not-found__window {
  max-height: calc(100svh - 300px);
}
@media (max-width: 760px) {
  .pricing-page .fit-rail-hint {
    display: block;
    order: 1;
    margin: var(--space-head) 0 var(--space-caption);
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
    color: var(--ink-secondary);
  }
  .pricing-page .plans-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 4px;
    padding: 8px 4px 16px;
    margin-block: -8px -16px;
  }
  .pricing-page .plan-card {
    scroll-snap-align: start;
    min-width: 0;
  }
  .pricing-page .plan-card--early {
    order: 0;
  }
  .pricing-page .comparison-scroll {
    overflow-x: auto;
    padding: 4px;
    border-radius: var(--r-16);
  }
  .pricing-page .comparison-table {
    min-width: 510px;
  }
  .pricing-page .comparison-table th,
  .pricing-page .comparison-table td {
    padding: 8px 12px;
  }
  .pricing-page .comparison-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 210px;
    background: var(--surface);
    box-shadow: 2px 0 0 var(--border);
  }
  .pricing-page .comparison-long {
    display: inline;
  }
  .support-page .support-fit {
    display: flex;
    flex-direction: column;
  }
  .support-page .support-hero {
    display: block;
    width: 100%;
  }
  .support-page .support-hero__copy .pages-title {
    font-size: var(--d-h2);
    line-height: var(--d-h2-lh);
  }
  .support-page .support-hero__lede {
    font-size: var(--fs-15);
    line-height: var(--lh-ui);
  }
  .support-page .support-address {
    min-height: 0;
    padding: 8px 8px 8px 12px;
    margin-top: var(--space-block);
    border-radius: var(--r-16);
  }
  .support-page .support-address__link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
  .support-page .support-address__note {
    margin-top: 0;
  }
  .support-page .support-contact {
    order: 1;
    margin-top: var(--space-section);
    width: 100%;
  }
  .support-page .support-contact-main {
    font-size: var(--fs-15);
    line-height: var(--lh-ui);
  }
  .support-page .support-safety h3 {
    margin-bottom: 6px;
  }
  .support-page .support-questions {
    order: 2;
    margin-top: var(--space-section);
    width: 100%;
  }
  .not-found-page .not-found__window {
    max-height: calc(100svh - 320px);
    min-height: 240px;
  }
}
.pricing-page #compare .comparison-table th,
.pricing-page #compare .comparison-table td {
  padding-block: 6px;
}
/* Lane SP (2026-10-20): the pricing sections on the one rhythm (soft.css spacing scale). The
   passes, the address under them and the two notes are blocks of the intro. */
.pricing-page :is(.pages-section, .organization-panel) {
  margin-top: var(--space-section);
  padding-block: 0;
}
.pricing-page .organization-panel {
  padding-block: var(--pad-card);
}
@media (min-width: 1024px) {
  .pricing-page .organization-panel {
    padding-block: 56px;
  }
}
.pricing-page .plans-grid {
  margin-top: var(--space-block);
}
.pricing-page .pages-caption {
  margin-top: var(--space-caption);
}
.pricing-page .organization-panel h2 {
  margin: 0 0 var(--space-head);
}
.pricing-page .organization-prices {
  margin-top: var(--space-lede);
}

.pricing-page .fee-stats__list {
  margin-top: 0;
}
.pricing-page .plan-notes {
  padding: 0;
}
.pricing-intro:has(.pricing-art) {
  grid-template-rows: auto 1fr;
}
@media (max-width: 1023px) {
  .pricing-page .organization-panel {
    row-gap: var(--space-block);
  }
}
@media (max-width: 1023px) {
  .pricing-page .pricing-faq {
    row-gap: var(--space-block);
  }
}
@media (max-width: 760px) {
  .pricing-page .pricing-faq {
    row-gap: 0;
  }
  /* The rail's 8px top padding is room for the passes' shadows, taken back (see above). */
  .pricing-page .plans-grid {
    margin-top: -8px;
  }
  .pricing-page .pricing-faq > .faq-list {
    margin-top: var(--space-head);
  }
  .pricing-strip__note {
    margin-top: var(--space-caption);
  }
}
@media (max-width: 760px) {
  .pricing-page #compare .comparison-table {
    min-width: 620px;
  }
  .pricing-page #compare .comparison-table thead th:nth-child(2) {
    width: 130px;
  }
  .pricing-page #compare .comparison-table thead th:last-child {
    width: 260px;
  }
  .pricing-page #compare .comparison-table th:first-child {
    width: 230px;
  }
}
@media (max-width: 760px) {
  .pricing-page #compare .comparison-table {
    min-width: 486px;
  }
  .pricing-page #compare .comparison-table thead th:nth-child(2) {
    width: 140px;
  }
  .pricing-page #compare .comparison-table thead th:last-child {
    width: 190px;
  }
  .pricing-page #compare .comparison-table th:first-child {
    width: 156px;
  }
}

@media (max-width: 760px) {
  .pricing-page #compare .comparison-table {
    min-width: 470px;
  }
  .pricing-page #compare .comparison-table thead th:nth-child(2) {
    width: 120px;
  }
  .pricing-page #compare .comparison-table thead th:last-child {
    width: 167px;
  }
  .pricing-page #compare .comparison-table th:first-child {
    width: 183px;
  }
}
@media (max-width: 760px) {
  .pricing-page #compare .comparison-scroll {
    padding: 0;
  }
}

/* 2026-10-19 refresh: planned personal plans (#personal). Two quiet raised cards on the page
   grid (columns 1-6 and 7-12, one column on phones) and three plain notes below them. Pearl,
   not the pass vocabulary: these are not offers yet. */
.personal-plans__grid {
  row-gap: var(--grid-gap);
}
.personal-plan {
  grid-column: 1 / 7;
  display: grid;
  gap: 8px;
  padding: var(--pad-card);
  border: 1px solid light-dark(rgb(255 255 255 / 65%), var(--rim-dark));
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--soft-raised);
}
.personal-plan[data-grid-col='7'] {
  grid-column: 7 / 13;
}
.personal-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.personal-plan h3 {
  margin: 0;
  font-weight: 700;
}
.personal-plan p {
  margin: 0;
}
.personal-plan__price {
  color: var(--ink);
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: var(--lh-ui, 1.4);
}
.personal-plan__covers {
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}
.personal-plans__notes {
  display: grid;
  gap: 8px;
  max-width: 72ch;
  margin: 24px 0 0;
  padding-left: 20px;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}
@media (max-width: 760px) {
  .personal-plan,
  .personal-plan[data-grid-col='7'] {
    grid-column: 1 / -1;
    gap: 4px;
  }
  .personal-plans__notes {
    margin-top: 16px;
  }
}

/* Organization prices inside the existing raised panel. */
.organization-prices,
.organization-addons {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}
.organization-prices b {
  color: var(--ink);
  font-size: var(--fs-17);
  font-weight: 600;
}
.organization-panel .organization-addons-title {
  margin: 16px 0 0;
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui, 1.4);
}
.organization-panel__copy > p.organization-note {
  max-width: 54ch;
  margin: var(--space-block) 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose, 1.6);
}
.organization-panel__copy > p:not([class]) {
  max-width: 54ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose, 1.6);
}

/* ─── Copy diet, 2026-10-20 (lane C2; the Apple iPhone Duo benchmark) ────────────────────
   /pricing/: numbers stand alone. Each pass is its price and one line (the features moved to
   the comparison), so the rail drops its features row; the fees are three stats; the
   personal and organization prices are set in the display face. */
.pricing-page .plans-grid {
  grid-template-rows: repeat(4, auto);
}
.pricing-page .plan-card {
  grid-row: 1 / span 4;
}
.pricing-page .plan-terms {
  margin-bottom: 24px;
}
.pricing-page .plan-notes > p {
  grid-column: 1 / -1;
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
}
.fee-stats__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fee-stat {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: var(--pad-card);
  border: 1px solid light-dark(rgb(255 255 255 / 65%), var(--rim-dark));
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-raised-sm);
}
.fee-stat > p {
  margin: 0;
}
.fee-stat__value {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--d-price, 40px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  text-wrap: balance;
}
.fee-stat__label {
  max-width: 34ch;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-ui, 1.4);
  text-wrap: pretty;
}

.pricing-page .personal-plan__price {
  font-family: var(--font-display);
  font-size: var(--d-card, 28px);
  font-weight: 700;
  line-height: var(--d-card-lh, 1.1);
}
.pricing-page .organization-prices {
  gap: 12px;
}
.pricing-page .organization-prices b {
  margin-right: 6px;
  font-family: var(--font-display);
  font-size: var(--d-price, 40px);
  font-weight: 700;
  line-height: 1;
}
/* With the features gone the three passes fit side by side down to 761px, so the rail stays
   one screen at 768x1024 (stacked, it read 1.07 screens). */
@media (min-width: 761px) and (max-width: 960px) {
  .pricing-page .plans-grid {
    display: grid;
    gap: 0 10px;
    padding: 10px;
  }
  .pricing-page .plan-card {
    display: grid;
    padding: var(--pad-top) 16px 20px;
  }
  .pricing-page .plan-card--early {
    order: 0;
  }
  .pricing-page .plan-card .seg button {
    padding-inline: 12px;
  }
}
@media (max-width: 760px) {
  .fee-stats__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-page .plan-notes > p {
    text-align: left;
  }
}

/* Lane SP (2026-10-20): one rhythm on every inner route (soft.css spacing scale). The
   footer's first content sits one section gap under the last section's content, so no
   main, wrap or closing section adds space of its own at the bottom. */
.foot {
  padding-top: var(--space-section);
}
/* What follows a chapter head: a lede gap after a heading row with its lede, a head gap after
   a heading alone. A phone's swipe hint (.fit-rail-hint, hidden on wider screens) may sit
   between them; the route that shows it spaces the rail under it. */
:is(.chapter-head, .chapter-head + .fit-rail-hint) + * {
  margin-top: var(--space-lede);
}
.chapter-head:not(:has(> .chapter-lede)) + *,
.chapter-head:not(:has(> .chapter-lede)) + .fit-rail-hint + * {
  margin-top: var(--space-head);
}