/* ============================================================================
   OPTICS STUDIO — Service pages (Figma 667:65 "Services-Pitch Decks-Desktop")
   Loaded AFTER style.css, which provides fonts, tokens (--u/--uw with the
   744/390 tablet/mobile remaps), the fixed nav, .slide__title, .text-link,
   the .sfoot__* footer internals, and .optics-bookend.

   Same scaling practices as the deck: --u sizes type/vertical rhythm and
   component dimensions, --uw sizes margins and the 12-column grid, so the
   1728-canvas coordinates in the design map 1:1 to units here. Unlike the
   deck there is no snap ladder — the page scrolls freely; the footer
   slides OVER the pinned page at the end (see .page/.pfoot below).
   ============================================================================ */

/* Footer slide-over — the deck's sticky-ladder transition, generalized to a
   page of arbitrary height. The deck pins each 100svh slide with sticky
   top:0 and lets the next slide rise over it; here the whole page pins via
   sticky with a NEGATIVE top of (100svh − page height), which engages at
   the exact moment the page's last viewport-full is on screen — then the
   footer (later in flow, higher z) rises over it. --page-h is measured by
   pages.js (ResizeObserver); without JS the fallback keeps top so negative
   that sticky never engages and the page scrolls statically. */
.page {
  position: sticky;
  top: min(0px, calc(100svh - var(--page-h, 999999px)));
  z-index: 1;
}

/* ----------------------------------------------------------------------------
   Anim gate — mirrors style.css §3.5: everything pages.js animates is hidden
   before first paint; the reduced-motion block re-shows it all.
   ---------------------------------------------------------------------------- */
.anim-pending .phero__kicker,
.anim-pending .phero__title,
.anim-pending .phero__lead,
.anim-pending [data-reveal] .prow,
.anim-pending [data-reveal] .plabel,
.anim-pending [data-reveal] .pbody,
.anim-pending [data-reveal] .slide__title,
.anim-pending [data-reveal] .pnote,
.anim-pending [data-reveal] .pstep,
.anim-pending [data-reveal] .pnum-ghost,
.anim-pending [data-reveal] .process-rule,
.anim-pending [data-reveal] .ptier,
.anim-pending [data-reveal] .faq__item,
.anim-pending [data-reveal] .prefoot__col,
.anim-pending [data-reveal] .plegal__updated,
.anim-pending [data-reveal] .plegal__item,
.anim-pending [data-reveal] .plegal-contact__body {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .anim-pending .phero__kicker,
  .anim-pending .phero__title,
  .anim-pending .phero__lead,
  .anim-pending [data-reveal] .prow,
  .anim-pending [data-reveal] .plabel,
  .anim-pending [data-reveal] .pbody,
  .anim-pending [data-reveal] .slide__title,
  .anim-pending [data-reveal] .pnote,
  .anim-pending [data-reveal] .pstep,
  .anim-pending [data-reveal] .pnum-ghost,
  .anim-pending [data-reveal] .process-rule,
  .anim-pending [data-reveal] .ptier,
  .anim-pending [data-reveal] .faq__item,
  .anim-pending [data-reveal] .prefoot__col,
  .anim-pending [data-reveal] .plegal__updated,
  .anim-pending [data-reveal] .plegal__item,
  .anim-pending [data-reveal] .plegal-contact__body {
    visibility: visible;
  }
}

/* ----------------------------------------------------------------------------
   Scaffold — every section shares the canvas margin; the 12-col grid used
   throughout reproduces the design's column positions at any width.
   ---------------------------------------------------------------------------- */
.page {
  padding-top: var(--nav-h);
}

/* Nav right slot: Book a call (replaces the deck's slide indicator) */
.nav__booking {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(var(--u) * 20);
  line-height: 1;
  color: var(--color-ink);
}

.nav--dark .nav__booking { color: #fff; }

.psection {
  padding-inline: var(--margin);
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: calc(var(--uw) * 24);
  align-items: start;
}

/* Full-width hairline that opens a section (design draws them edge-to-edge) */
.psection--ruled {
  border-top: 1px solid var(--color-line);
}

/* ----------------------------------------------------------------------------
   Hero (683:601) — kicker y=96 · H1 y=132 (col 1-4) · leads stacked in the
   same 533 column from y=260 · long run-out to "What's included"
   ---------------------------------------------------------------------------- */
.phero {
  padding-top: calc(var(--u) * 40);     /* nav 56 → kicker top 96 */
  padding-bottom: calc(var(--u) * 368); /* leads bottom → included label */
}

.phero__kicker {
  margin: 0 0 calc(var(--u) * 16);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 20);
  line-height: 1;
  color: #7c7c7c;
}

/* .slide__title supplies the Serrif face/size; kill its slide-margin */
.phero__title {
  grid-column: 1 / span 4;
  margin-top: 0;
}

.phero__lead {
  margin: calc(var(--u) * 40) 0 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 20);
  line-height: 1.3;
  color: #727272;
}

.phero__lead--first  { grid-column: 1 / span 4; }
.phero__lead--second {
  grid-column: 1 / span 4;
  margin-top: calc(var(--u) * 26);   /* the design's blank 20/1.3 line */
}

/* ----------------------------------------------------------------------------
   Shared section furniture
   ---------------------------------------------------------------------------- */
/* Saans Medium 20 section label ("What's included:", "Common questions", …) */
.plabel {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(var(--u) * 20);
  line-height: 1;
  color: var(--color-ink);
}

/* 20px running body (#727272) — how-we-think copy, pricing note */
.pbody {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 20);
  line-height: 1.3;
  color: #727272;
}

/* ----------------------------------------------------------------------------
   What's included — label block, then five ruled rows:
   num (col 1) · name (col 5-8) · desc (col 9-11, 18px #3c3c3c)
   Row hairlines bleed edge-to-edge like the design.
   ---------------------------------------------------------------------------- */
/* label y=588 sits ABOVE the first row hairline (672): the hero block above
   provides the gap; rows then carry their own edge-to-edge top rules. */
.pinc__label { padding-bottom: calc(var(--u) * 64); }

/* list reset — the UA's ol padding shoved every row off the margin grid */
.pinc__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.prow {
  border-top: 1px solid var(--color-line);
  margin-inline: calc(-1 * var(--margin));
  padding: calc(var(--u) * 64) var(--margin) calc(var(--u) * 40);
}

.prow__num {
  grid-column: 1 / span 1;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(var(--u) * 20);
  line-height: 1;
  color: var(--color-ink);
}

.prow__name {
  grid-column: 5 / span 4;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(var(--u) * 20);
  line-height: 1;
  color: var(--color-ink);
}

.prow__desc {
  grid-column: 9 / span 3;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 18);
  line-height: 1.3;
  color: #3c3c3c;
}

/* ----------------------------------------------------------------------------
   How we think — ruled section: label (col 1-4) · body (col 9-12, 533w)
   ---------------------------------------------------------------------------- */
.pthink {
  margin-inline: 0;
  padding-top: calc(var(--u) * 64);
  padding-bottom: calc(var(--u) * 360);   /* body → process rule (667:122) */
}

.pthink .plabel { grid-column: 1 / span 4; }

.pthink .pbody { grid-column: 9 / span 4; }

.pbody p { margin: 0; }
.pbody p + p { margin-top: calc(var(--u) * 26); }

/* ----------------------------------------------------------------------------
   Process — H1-size heading 112 below the rule; ghost numerals · rule (40
   inset) · names · items, all on the 4-card column grid. Same composition as
   deck slide 05, restated here for the flow layout.
   ---------------------------------------------------------------------------- */
.pprocess {
  padding-top: calc(var(--u) * 112);
}

.pprocess .slide__title { margin-top: 0; }

.pprocess__block {
  margin-top: calc(var(--u) * 316);
  padding-bottom: calc(var(--u) * 404);  /* items bottom → next section rule */
}

.pprocess__nums,
.pprocess__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: calc(var(--uw) * 24);
}

.pnum-ghost {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: calc(var(--u) * 112);
  line-height: 1;
  letter-spacing: calc(var(--u) * -1.12);
  color: var(--color-line);
}

.process-rule {
  height: 1px;
  margin-top: calc(var(--u) * 40);
  background: var(--color-line);
}

.pstep { margin-top: calc(var(--u) * 40); }

.pstep__name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(var(--u) * 20);
  line-height: 1.2;
  letter-spacing: calc(var(--u) * -0.2);
  color: var(--color-ink);
}

.pstep__items {
  margin: calc(var(--u) * 16) 0 0;
  max-width: calc(var(--uw) * 360);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 20);
  line-height: 1.3;
  letter-spacing: calc(var(--u) * -0.2);
  text-transform: capitalize;
  color: #3c3c3c;
}

/* ----------------------------------------------------------------------------
   Pricing — H1-size heading + note, then a 3-up card row (design h=634).
   Card: name/tag · scope row · price block · uses row · desc · filled button.
   ---------------------------------------------------------------------------- */
.ppricing {
  padding-top: calc(var(--u) * 112);
}

.ppricing .slide__title { margin-top: 0; }

.ppricing .pnote {
  margin: calc(var(--u) * 32) 0 0;
  max-width: calc(var(--uw) * 533);
}

.ptiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(var(--uw) * 24);
  margin-top: calc(var(--u) * 148);
  padding-bottom: calc(var(--u) * 112);
  align-items: stretch;
}

/* Two-tier pages (Presentation Systems) — wider pair reads as deliberate */
.ptiers--two { grid-template-columns: repeat(2, 1fr); }

.ptier {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--u) * 634);
  border: 1px solid var(--color-line);
  border-radius: calc(var(--u) * 2);
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
  overflow: hidden;
}

.ptier__name {
  margin: calc(var(--u) * 40) calc(var(--u) * 24) 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(var(--u) * 24);
  line-height: 1.1;
  color: var(--color-ink);
}

.ptier__tag {
  margin: calc(var(--u) * 8) calc(var(--u) * 24) calc(var(--u) * 40);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 16);
  line-height: 1;
  color: #7c7c7c;
}

.ptier__row {
  display: flex;
  align-items: center;
  height: calc(var(--u) * 64);
  padding-inline: calc(var(--u) * 24);
  background: #fff;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 16);
  line-height: 1;
  color: var(--color-ink);
}

.ptier__price {
  padding: calc(var(--u) * 30) calc(var(--u) * 24) 0;
  height: calc(var(--u) * 128);
  background: #fff;
  border-bottom: 1px solid var(--color-line);
}

.ptier__amount {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(var(--u) * 40);
  line-height: 1;
  letter-spacing: calc(var(--u) * -0.4);
  color: var(--color-ink);
}

.ptier__timeline {
  margin: calc(var(--u) * 16) 0 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 16);
  line-height: 1;
  color: var(--color-ink);
}

.ptier__uses {
  border-top: 0;               /* price block above already draws it */
  font-weight: 500;
}

.ptier__desc {
  margin: calc(var(--u) * 28) calc(var(--u) * 24) calc(var(--u) * 28);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 16);
  line-height: 1.3;
  color: #3c3c3c;
}

.ptier__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto calc(var(--u) * 24) calc(var(--u) * 40);
  height: calc(var(--u) * 72);
  border-radius: calc(var(--u) * 4);
  background: #101010;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(var(--u) * 16);
  line-height: 1;
  color: #fff;
  text-decoration: none;
  transition: background-color 200ms ease;
}

.ptier__cta:hover { background: #3c3c3c; }

/* ----------------------------------------------------------------------------
   FAQ — label (col 1-4) · Q&A list (col 5-12). Questions Medium 20;
   answers 18px #3c3c3c at a 534 measure; hairline between items runs from
   the list column to the right margin (design w=1131).
   ---------------------------------------------------------------------------- */
.pfaq {
  padding-top: calc(var(--u) * 64);
  padding-bottom: calc(var(--u) * 96);
}

.pfaq .plabel { grid-column: 1 / span 4; }

.pfaq__list {
  grid-column: 5 / -1;
  margin: 0;
}

.faq__item { padding-bottom: calc(var(--u) * 56); }

.faq__item + .faq__item {
  border-top: 1px solid var(--color-line);
  padding-top: calc(var(--u) * 64);
}

.faq__q {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(var(--u) * 20);
  line-height: 1;
  color: var(--color-ink);
}

.faq__a {
  margin: calc(var(--u) * 32) 0 0;
  max-width: calc(var(--uw) * 534);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 18);
  line-height: 1.3;
  color: #3c3c3c;
}

/* ----------------------------------------------------------------------------
   Pre-footer (680:321) — full-bleed #f9f9f9 band: Serrif title + four
   service columns on the card grid (name · desc · Learn more).
   ---------------------------------------------------------------------------- */
.prefoot {
  background: #f9f9f9;
  padding-top: calc(var(--u) * 72);
  padding-bottom: calc(var(--u) * 184);
}

.prefoot .slide__title { margin-top: 0; }

.prefoot__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: calc(var(--uw) * 24);
  margin-top: calc(var(--u) * 100);
}

.prefoot__name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(var(--u) * 20);
  line-height: 1.2;
  letter-spacing: calc(var(--u) * -0.2);
  color: var(--color-ink);
}

.prefoot__desc {
  margin: calc(var(--u) * 16) 0 0;
  max-width: calc(var(--uw) * 360);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 18);
  line-height: 1.3;
  color: #727272;
}

.prefoot__more {
  display: inline-block;
  margin-top: calc(var(--u) * 23);   /* the design's blank 18/1.3 line */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 18);
  line-height: 1.3;
  color: #727272;
}

.prefoot__more:hover { color: var(--color-ink); }

@media (max-width: 1024px) {
  /* 680:399 — 2×2 column grid under a 32px title */
  .prefoot {
    padding-top: calc(var(--u) * 80);
    padding-bottom: calc(var(--u) * 120);
  }
  .prefoot__cols {
    grid-template-columns: repeat(2, 1fr);
    row-gap: calc(var(--u) * 46);
    margin-top: calc(var(--u) * 70);
  }
}

@media (max-width: 600px) {
  /* 680:551 — single column, 18px */
  .prefoot { padding-top: calc(var(--u) * 64); padding-bottom: calc(var(--u) * 96); }
  .prefoot__cols {
    grid-template-columns: 1fr;
    row-gap: calc(var(--u) * 64);
    margin-top: calc(var(--u) * 64);
  }
  .prefoot__name { font-size: calc(var(--u) * 18); letter-spacing: calc(var(--u) * -0.18); }
  .prefoot__desc { font-size: calc(var(--u) * 18); max-width: none; }
  .prefoot__more { font-size: calc(var(--u) * 18); }
}

/* ----------------------------------------------------------------------------
   Legal (688:928 / 688:997) — service-style hero with a long run-out to the
   body rule, then the FAQ's two-column ruled system: "Last updated" label
   (col 1-4, dim) · heading/body rows (col 5-12; body 20px #727272 at an 812
   measure) with hairlines between rows. The Contact row closes the page
   under a full-width rule with its label back at the margin.
   ---------------------------------------------------------------------------- */
.phero--legal { padding-bottom: calc(var(--u) * 744); }   /* H1 → rule y=920 */

.plegal { padding-top: calc(var(--u) * 64); }

.plegal__updated {
  grid-column: 1 / span 4;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 20);
  line-height: 1;
  color: #7c7c7c;
}

.plegal__list {
  grid-column: 5 / -1;
  margin: 0;
}

.plegal__item { padding-bottom: calc(var(--u) * 52); }

.plegal__item + .plegal__item {
  border-top: 1px solid var(--color-line);
  padding-top: calc(var(--u) * 64);
}

.plegal__item h2 {
  margin: 0 0 calc(var(--u) * 24);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(var(--u) * 20);
  line-height: 1;
  color: var(--color-ink);
}

.plegal__item p,
.plegal__item ul {
  margin: 0;
  max-width: calc(var(--uw) * 812);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 20);
  line-height: 1.3;
  color: #727272;
}

.plegal__item p + p,
.plegal__item p + ul { margin-top: calc(var(--u) * 26); }

.plegal__item ul { padding-left: calc(var(--u) * 30); }

.plegal__item a { color: inherit; }
.plegal__item a:hover { color: var(--color-ink); }

.plegal-contact {
  padding-top: calc(var(--u) * 64);
  padding-bottom: calc(var(--u) * 104);
}

.plegal-contact .plabel { grid-column: 1 / span 4; }

.plegal-contact__body {
  grid-column: 5 / -1;
  margin: 0;
  max-width: calc(var(--uw) * 812);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--u) * 20);
  line-height: 1.3;
  color: #3c3c3c;
}

.plegal-contact__body a { color: inherit; }

@media (max-width: 1024px) {
  /* label stacks above the rows, FAQ-style */
  .plegal__updated { grid-column: 1 / -1; }
  .plegal__list {
    grid-column: 1 / -1;
    margin-top: calc(var(--u) * 96);
  }
  .plegal__item p,
  .plegal__item ul,
  .plegal-contact__body { max-width: none; }
  .plegal-contact .plabel { grid-column: 1 / -1; }
  .plegal-contact__body {
    grid-column: 1 / -1;
    margin-top: calc(var(--u) * 44);
  }
}

@media (max-width: 600px) {
  .plegal__updated { font-size: calc(var(--u) * 18); }
  .plegal__list { margin-top: calc(var(--u) * 64); }
  .plegal__item h2 { font-size: calc(var(--u) * 18); }
  .plegal__item p,
  .plegal__item ul,
  .plegal-contact__body { font-size: calc(var(--u) * 18); }
  .plegal__item { padding-bottom: calc(var(--u) * 40); }
  .plegal__item + .plegal__item { padding-top: calc(var(--u) * 48); }
}

/* ----------------------------------------------------------------------------
   Footer — the deck's slide 07 restated for flow: full-viewport dark section,
   internals (.sfoot__*) come from style.css. Snap target (see top of file).
   ---------------------------------------------------------------------------- */
.pfoot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: var(--nav-h) var(--margin) calc(var(--u) * 40);
  background: #101010;
}

/* shadow cast upward from the footer's top edge while it rides over the
   pinned page — same gradient as the deck's .slide + .slide::before */
.pfoot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--u) * 120);
  background: linear-gradient(to top, rgba(16, 16, 16, 0.10), rgba(16, 16, 16, 0));
  pointer-events: none;
}

.pfoot .slide__title { color: #fff; }

.pfoot__bookend {
  margin-top: auto;
  padding-top: calc(var(--u) * 64);
  line-height: 0;
}

/* ----------------------------------------------------------------------------
   TABLET ≤1024 — 744 canvas (units remapped in style.css). Leads stack;
   included rows become num | (name + desc); process reflows to a 2×2 step
   grid with small numerals (ghost row + rule hidden); pricing stacks.
   ---------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Hero (678:255) — kicker drops the "Services —" prefix; the H1 takes the
     deck's tablet hero size; the two leads stack into one full-measure block */
  .phero {
    padding-top: calc(var(--u) * 104);    /* tablet keeps the kicker at 170 */
    padding-bottom: calc(var(--u) * 204);
  }
  .phero__title {
    grid-column: 1 / -1;
    font-size: calc(var(--u) * 36);
    letter-spacing: 0;
  }
  .phero__lead--first,
  .phero__lead--second { grid-column: 1 / -1; }

  /* Included rows (679:278) — num / name / desc stack at the margin */
  .prow__num  { grid-column: 1 / -1; }
  .prow__name {
    grid-column: 1 / -1;
    margin-top: calc(var(--u) * 16);
  }
  .prow__desc {
    grid-column: 1 / -1;
    margin-top: calc(var(--u) * 24);
    max-width: calc(var(--u) * 493);
  }

  /* How we think — body drops below the label at full measure */
  .pthink { padding-bottom: calc(var(--u) * 90); }
  .pthink .plabel { grid-column: 1 / -1; }
  .pthink .pbody {
    grid-column: 1 / -1;
    margin-top: calc(var(--u) * 104);
  }

  /* Process (679:310) — the homepage's tablet treatment: the whole block
     (ghost numerals · rule · steps) is an edge-bleed snap carousel, two
     steps per page. style.css §13 already supplies the [data-carousel]
     scroller and dots styles; here we size the inner grids and pick the
     snap points (01/03 only — 02/04 are the peeking halves of each page). */
  .pprocess {
    padding-top: calc(var(--u) * 64);
    padding-bottom: calc(var(--u) * 64);   /* dots → closing rule (679:320) */
  }
  .pprocess__block {
    margin-top: calc(var(--u) * 208);
    padding-bottom: 0;   /* desktop's 404 run-out belongs to the no-dots layout */
  }
  .pprocess__nums,
  .pprocess__steps {
    grid-template-columns: repeat(4, calc(var(--u) * 394));
    gap: calc(var(--u) * 24);
    width: max-content;
  }
  .process-rule { width: calc(var(--u) * 1648); }
  .pprocess__nums .pnum-ghost:nth-child(even) { scroll-snap-align: none; }
  .pprocess .carousel-dots { margin-top: calc(var(--u) * 277); }   /* 679:307 */

  /* Pricing (680:342) — cards become the edge-bleed carousel, desktop dims */
  .ppricing .pnote { max-width: none; }
  .ptiers,
  .ptiers--two {
    display: flex;
    gap: calc(var(--u) * 24);
    margin-top: calc(var(--u) * 148);
    padding-bottom: 0;
  }
  .ptier { flex: 0 0 calc(var(--u) * 394); }
  .ppricing { padding-bottom: calc(var(--u) * 128); }   /* dots → rule (680:382) */
  .ppricing .carousel-dots { margin-top: calc(var(--u) * 64); }

  /* FAQ (680:382) — stacked full-measure */
  .pfaq .plabel { grid-column: 1 / -1; }
  .pfaq__list {
    grid-column: 1 / -1;
    margin-top: calc(var(--u) * 96);
  }
  .faq__a { max-width: none; margin-top: calc(var(--u) * 44); }
  .faq__item { padding-bottom: calc(var(--u) * 68); }
  .faq__item + .faq__item { padding-top: calc(var(--u) * 64); }
}

/* ----------------------------------------------------------------------------
   MOBILE ≤600 — 390 canvas. Single column throughout; type follows the
   deck's mobile scale (H1 28, body 16, labels 18).
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Hero (680:456) — 28/1.15 title, 18px body */
  .phero { padding-bottom: calc(var(--u) * 128); }
  .phero__kicker { font-size: calc(var(--u) * 18); }
  .phero__title {
    font-size: calc(var(--u) * 28);
    line-height: 1.15;
    letter-spacing: calc(var(--u) * -0.28);
  }
  .phero__lead {
    margin-top: calc(var(--u) * 40);
    font-size: calc(var(--u) * 18);
  }
  .phero__lead--second { margin-top: calc(var(--u) * 23); }

  .plabel { font-size: calc(var(--u) * 18); }
  .pbody  { font-size: calc(var(--u) * 18); }

  /* Included rows (680:471) — 18px throughout, num stays ink */
  .prow__num  { font-size: calc(var(--u) * 18); }
  .prow__name { font-size: calc(var(--u) * 18); }
  .prow__desc { font-size: calc(var(--u) * 18); max-width: none; }

  /* Process (680:499) — one step per page; every numeral snaps */
  .pprocess__block { margin-top: calc(var(--u) * 66); }
  .pprocess .carousel-dots { margin-top: calc(var(--u) * 222); }   /* 680:500 */
  .pprocess__nums,
  .pprocess__steps { grid-template-columns: repeat(4, calc(var(--u) * 342)); }
  .process-rule { width: calc(var(--u) * 1440); }   /* 4×342 + 3×24 */
  .pprocess__nums .pnum-ghost:nth-child(even) { scroll-snap-align: start; }

  /* Pricing (680:517) — 342-wide card pages, denser 14px internals */
  .ptiers,
  .ptiers--two { margin-top: calc(var(--u) * 96); }
  .ptier { flex: 0 0 100%; min-height: calc(var(--u) * 568); }
  .ptier__name { margin-top: calc(var(--u) * 32); }
  .ptier__tag {
    margin-top: calc(var(--u) * 4);
    margin-bottom: calc(var(--u) * 32);
    font-size: calc(var(--u) * 14);
  }
  .ptier__row { height: calc(var(--u) * 62); font-size: calc(var(--u) * 14); }
  .ptier__uses { height: calc(var(--u) * 64); }
  .ptier__price { height: calc(var(--u) * 102); padding-top: calc(var(--u) * 24); }
  .ptier__amount { font-size: calc(var(--u) * 32); letter-spacing: calc(var(--u) * -0.32); }
  .ptier__timeline { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 14); }
  .ptier__desc { margin-top: calc(var(--u) * 28); font-size: calc(var(--u) * 14); }
  .ptier__cta { margin-bottom: calc(var(--u) * 24); font-size: calc(var(--u) * 14); }
  .ppricing { padding-bottom: calc(var(--u) * 64); }
  .ppricing .carousel-dots { margin-top: calc(var(--u) * 40); }   /* 680:512 */

  /* FAQ (680:537) */
  .pfaq { padding-bottom: calc(var(--u) * 96); }
  .pfaq__list { margin-top: calc(var(--u) * 96); }
  .faq__q { font-size: calc(var(--u) * 18); line-height: 1.3; }
  .faq__a { margin-top: calc(var(--u) * 24); font-size: calc(var(--u) * 18); }
  .faq__item { padding-bottom: calc(var(--u) * 68); }
  .faq__item + .faq__item { padding-top: calc(var(--u) * 64); }

  .pfoot { padding-bottom: calc(var(--u) * 24); }
}