/* ==========================================================================
   layout.css — section rhythm + the zoom rail

   THE RAIL. Every product frame on the page shares one left edge, one width,
   one radius and one chrome. The frame box never moves between sections; what
   changes is how deep into the app we are, expressed as `--z` on the frame
   (frame.css turns it into `--u`, so one number magnifies the whole interior).
   That ladder is strictly monotonic down the page — §1 at 0.86 through §10 at
   1.09 — so the interface is genuinely larger the further you read, and the
   scroll-linked dolly in zoom.js is a continuation of the same move rather than
   a separate effect. A fixed camera that only ever pushes forward is what makes
   nine frames read as one object.

   This replaces the four-placement scheme from the plan: moving the frame
   around would have broken exactly the illusion the zoom depends on, and the
   variety it was buying comes instead from the frame's interior, which changes
   completely section to section.
   ========================================================================== */

.sec { padding: var(--sec-gap) 0; }
/* Anchor clearance for the sticky nav. §11 is a `.sec--plain` following a
   `.zsec`, so `.sec + .sec` zeroes its top padding and an #anchor jump used to
   park its heading underneath the nav bar. */
.sec[id] { scroll-margin-top: 90px; }
.sec + .sec { padding-top: 0; }
.sec.sec--dark { background: var(--paper); padding: var(--sec-gap) 0; }
.sec--dark + .sec { padding-top: var(--sec-gap); }

/* --- the two-column zoom section ---------------------------------------- */
.zsec > .zsec__in {
  display: grid;
  grid-template-columns: minmax(340px, 460px) 1fr;
  gap: 56px;
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.zsec__copy { max-width: var(--measure); }
.zsec__copy .eyebrow { display: block; margin-bottom: 18px; }
.zsec__copy h2 { margin-bottom: 16px; }
.zsec__copy p { color: var(--body); }
.zsec__copy p + p { margin-top: 14px; }

/* a short spec list under the copy — replaces the old tile grids */
.spec { margin-top: 26px; display: flex; flex-direction: column; gap: 0; }
.spec li { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--border); font-size: 14.5px; }
.spec li:last-child { border-bottom: 1px solid var(--border); }
.spec b { font-weight: 500; color: var(--ink); font-family: var(--font-display);
  letter-spacing: -0.01em; }
.spec span { font-family: var(--font-mono); font-size: var(--t-eyebrow);
  letter-spacing: 0.06em; color: var(--faint); text-align: right; white-space: nowrap; }


/* --- the frame rail ------------------------------------------------------ */
/* Width is deliberately larger than the column so the frame runs past the
   right viewport edge at every realistic width; body has overflow-x hidden. */
.zframe-rail {
  position: relative;
  min-width: 0;
}
.zframe {
  width: max(1280px, calc(50vw + 420px));
  /* Pinned left edge. All zoom growth goes rightward, off the same viewport
     edge the hero establishes as cropped — so the rail's left edge is invariant
     at every scale and going deeper pushes more of the app off-screen, which is
     what descending into one app actually looks like. No `will-change`: nine
     frames permanently promoted is ~100MB of layer memory, and zoom.js only
     ever filters the two or three frames near the viewport. */
  transform-origin: 0 50%;
}

/* --- plain sections (index, CTA) ----------------------------------------- */
.sec--plain > .sec__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.sec__head { max-width: var(--measure); margin-bottom: 48px; }
.sec__head .eyebrow { display: block; margin-bottom: 18px; }
.sec__head h2 { margin-bottom: 16px; }

/* --- CTA ---------------------------------------------------------------- */
.cta { text-align: left; padding: 96px 0 104px; border-top: 1px solid var(--border); }
.cta h2 { font-size: var(--t-display); line-height: 1.04; letter-spacing: -0.035em;
  max-width: 22ch; margin-bottom: 20px; }
.cta p { max-width: 52ch; margin-bottom: 32px; }
.cta__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1040px) {
  .zsec > .zsec__in { grid-template-columns: minmax(300px, 420px) 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .zsec > .zsec__in { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .zframe {
    width: calc(100vw - 20px);
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .zsec__copy { max-width: none; }
  .cta { padding: 72px 0 80px; }
}

/* ==========================================================================
   §2 THE ARGUMENT — problem, cost, why it persists.
   A stepped vertical sequence, not a three-card grid: cards were the thing that
   made the old page read as a pile. Hairlines and air instead, and no product
   frame anywhere in this section — the product does not appear until the
   argument for it has been made.
   ========================================================================== */
.arg { display: flex; flex-direction: column; }
.arg__m {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px 56px;
  padding: 44px 0;
  border-top: 1px solid var(--border);
}
.arg__m:last-child { border-bottom: 1px solid var(--border); }

.arg__l {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.arg__l b { display: block; color: var(--ink); font-weight: 400; margin-bottom: 6px; }

.arg__b { max-width: var(--measure); }
.arg__b p.arg__s {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 25px);
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: pretty;
}
.arg__b p { margin-top: 15px; color: var(--body); }

@media (max-width: 860px) {
  .arg__m { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
}