/* ═══════════════════════════════════════════════════════════════
   TABTRICKLE — scroll-driven chapter system

   Built to the rules in "10k website system/front-end-design-rules" and
   "front-end-design-skill", against the supplied reference frames.

   ─── The composition, from the reference art direction ─────────
     · pure #000, edge to edge, one idea per screen
     · a small numbered mono label   ("001 / The problem")
     · a very large tight headline
     · at most one short grey line under it
     · the product object bleeding off the frame
     · NO cards, NO panels, NO borders, NO rounded boxes anywhere

   Text sits directly on the background. Hierarchy is size, weight and
   colour — never a container. The photography has a pure black background,
   so a chapter is #000 and the object has no visible edge at all; giving
   any of this media a border or a radius puts the frame back and kills it.

   ─── Rules this file is holding to ─────────────────────────────
     · hero heading 6rem+, line-height ~0.95, weight 800
     · section headings 3rem+ at desktop
     · labels 0.7rem, uppercase, 0.15em+ tracking, muted
     · consecutive chapters never share a layout (left / right / centre /
       full-bleed band), and the background zone shifts across the page
     · staggered entrances, label → heading → body → action
     · one pinned chapter, one oversized element moving horizontally
   ═══════════════════════════════════════════════════════════════ */

:root {
  --frame-pad: clamp(4.5rem, 9vw, 8rem);
  --zone-black: #000000;
  --zone-ink: #060706;
}

/* ─── Shared chapter shell ──────────────────────────────────── */
.frame {
  position: relative;
  background: var(--zone-black);
  color: var(--silver);
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--frame-pad) 0;
  overflow: hidden;
  isolation: isolate;
}
.frame-zone-ink { background: var(--zone-ink); }
/* No width here. .frame-inner also carries .container, and setting width:100%
   overrode the container's own min(1180px, 100% - 3rem) — which put the copy
   flush against the left edge of the viewport with no gutter at all. */
.frame-inner { position: relative; z-index: 2; }

/* Numbered label. The homepage genuinely is a sequence — the chapters are
   read in order and each one depends on the one before — so the numbering
   encodes something true rather than decorating. */
.frame-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.frame-label b { color: var(--lime); font-weight: 400; }

.frame h2 {
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #fff;
  max-width: 13ch;
  text-wrap: balance;
}
.frame-sub {
  margin-top: clamp(1.25rem, 2.4vw, 1.85rem);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--silver);
  max-width: 40ch;
}
.frame-actions { margin-top: clamp(1.75rem, 3.4vw, 2.6rem); }

.frame-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime);
  border-bottom: 1px solid rgba(188, 238, 9, .3);
  transition: border-color .2s ease, transform .2s ease;
}
.frame-link:hover { border-bottom-color: var(--lime); transform: translateX(3px); }
/* Two actions in one chapter: the on-site route leads, the funnel follows. */
.frame-actions-pair { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.frame-link-quiet { color: var(--silver); border-bottom-color: rgba(168, 170, 172, .3); }
.frame-link-quiet:hover { color: var(--lime); border-bottom-color: var(--lime); }
@media (prefers-reduced-motion: reduce) { .frame-link { transition: none; } }

/* ─── The object ────────────────────────────────────────────────
   contain, never cover: these are photographed objects with deliberate
   negative space, and cropping them to fill a box is the destructive crop
   the brief rules out. Source background is black and so is the chapter, so
   contain leaves no visible letterbox. */
.frame-media { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.frame-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0; border-radius: 0;
}

@media (min-width: 900px) {
  .frame-copy { max-width: 34rem; }
  .frame h2 { max-width: 15ch; }
  /* Wide enough that the contained object reads at the scale it does in the
     reference frames. Narrower than this and the keycap floats as a small
     item in a large black field. */
  .frame-media { width: 68%; }
  /* The sources are near-black, not pure black, so the contained image's own
     top and bottom edges read as a faint block sitting on the chapter.
     Feathering them dissolves the edge; the copy-side edge is handled by the
     horizontal gradient below. */
  .frame-media img {
    object-fit: contain;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }

  /* LAYOUT A — copy left, object right. */
  .frame-left  .frame-media { left: auto; right: 0; }
  .frame-left  .frame-media img { object-position: right center; }
  .frame-left  .frame-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, #000 0%, #000 12%, rgba(0,0,0,.55) 30%, rgba(0,0,0,0) 54%);
  }

  /* LAYOUT B — object left, copy right. Consecutive chapters alternate. */
  .frame-right .frame-media { right: auto; left: 0; }
  .frame-right .frame-media img { object-position: left center; }
  .frame-right .frame-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(270deg, #000 0%, #000 12%, rgba(0,0,0,.55) 30%, rgba(0,0,0,0) 54%);
  }
  .frame-right .frame-inner { display: flex; justify-content: flex-end; }
  .frame-right .frame-copy { text-align: left; }
}

/* MOBILE: the object sits under the copy at its own aspect. There is no
   portrait master, and cover would push the keycap off a 390px screen. */
@media (max-width: 899px) {
  .frame {
    min-height: auto;
    /* Column flex rather than block, so the copy can be ordered ahead of the
       object. The object is first in the DOM because it is the background on
       desktop; on a phone the headline has to come first or the reader meets
       a photograph before they know what it is. */
    display: flex;
    flex-direction: column;
    padding: clamp(4.5rem, 13vw, 6.5rem) 0 0;
  }
  .frame-inner { order: 1; }
  .frame-media {
    order: 2;
    position: relative; inset: auto; width: 100%;
    margin-top: clamp(2.5rem, 8vw, 3.5rem);
  }
  .frame-media img { height: auto; object-fit: contain; }
  .frame h2 { max-width: 100%; }
}

/* ─── LAYOUT C · Hero — centred ─────────────────────────────── */
.hero {
  position: relative;
  background: var(--zone-black);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(7rem, 14vw, 10rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.hero-content, .hero-foot { position: relative; z-index: 2; text-align: center; }

.hero h1 {
  /* Sized to sit on ONE line at desktop, as the reference frame does.
     Wrapping it to two lines pushed the second line down onto the keycap. */
  font-size: clamp(2.6rem, 5.9vw, 5.2rem);
  line-height: .98;
  letter-spacing: -0.042em;
  font-weight: 800;
  color: #fff;
  margin-inline: auto;
  max-width: none;
}
@media (max-width: 899px) { .hero h1 { max-width: 14ch; } }
.hero-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: clamp(1.25rem, 2.6vw, 1.9rem);
}
.hero-device {
  font-family: var(--font-mono);
  font-size: clamp(.85rem, 1.4vw, 1rem);
  letter-spacing: .14em;
  color: var(--lime);
  margin-bottom: clamp(1.5rem, 3vw, 2.15rem);
}
.hero .btn-row { justify-content: center; }
.hero-smallprint {
  margin-top: 1.4rem;
  font-size: .84rem;
  color: var(--on-dark-muted);
  max-width: 46ch;
  margin-inline: auto;
}
.hero-inline-link { color: var(--silver); border-bottom: 1px solid rgba(168,170,172,.4); }
.hero-inline-link:hover { color: var(--lime); border-bottom-color: var(--lime); }

/* The test line reads as a phone number, not as a sentence — the digits are
   the point, so they get the mono face and the label sits above them small. */
.hero-call { flex-direction: column; gap: .15rem; line-height: 1.2; }
.hero-call-label {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}
.hero-call-number {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.hero-stage { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; }
/* contain, not cover. The clip is composed with the keycap centred in a wide
   black field, and cover scaled that up until the key filled the screen and
   ran into the headline. contain keeps the framing as shot; the letterbox is
   pure black against a pure black chapter, so it is invisible. */
.hero-video {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center center;
  display: block;
}
/* Vertical scrim only — protects the headline above and the actions below,
   and leaves the key in the middle of the frame at full strength. */
.hero-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.88) 0%, rgba(0,0,0,.36) 24%,
    rgba(0,0,0,0) 46%, rgba(0,0,0,.58) 76%, rgba(0,0,0,.92) 100%);
}

.hero-video-toggle {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 .95rem;
  border: 1px solid rgba(245,246,247,.22);
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: var(--on-dark-strong);
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.hero-video-toggle:hover { border-color: var(--lime); color: var(--lime); }
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle-icon {
  width: 9px; height: 10px; background: currentColor;
  clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%, 0 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 0);
}
.hero-video-toggle.is-paused .hero-video-toggle-icon { clip-path: polygon(0 0, 100% 50%, 0 100%); }

@media (max-width: 899px) {
  .hero { min-height: 94svh; padding-top: clamp(6rem, 20vw, 8rem); }
  /* cover on a phone: contained, a 16:9 clip in a tall portrait frame is a
     thin strip stranded in the middle of the screen. The keycap sits in the
     centre of the frame, so the sides this crops are ripple and black. */
  .hero-video { object-fit: cover; object-position: center 58%; }
}

/* ─── LAYOUT D · Pinned chapter — the engine ────────────────────
   The object holds still while the six stages move past it. This is the
   page's one pinned section. */
.engine { background: var(--zone-ink); padding: clamp(5rem, 10vw, 8rem) 0; }
.engine-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.engine-head h2 {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #fff;
  max-width: 16ch;
  text-wrap: balance;
}
.engine-head .frame-sub { max-width: 44ch; }
.engine-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.engine-media { margin: 0; min-width: 0; }
/* The source frames are near-black rather than pure black, so an unmasked
   image reads as a faintly lighter rectangle sitting on the page — a box,
   which is the one thing this system does not allow.
   Feathered with a LINEAR gradient, deliberately: a radial mask here
   composited to solid black in Chromium and erased the image entirely. */
.engine-media img,
.frame-object img {
  width: 100%; border: 0; border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.lifecycle { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
.lifecycle-step { display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(1rem, 2vw, 1.75rem); }
.lifecycle-n {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .16em;
  color: var(--on-dark-muted);
  padding-top: .5rem;
  transition: color .4s ease;
}
.lifecycle-step h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 650; letter-spacing: -0.02em;
  color: #fff; margin-bottom: .45rem;
  transition: color .4s ease;
}
.lifecycle-step p { font-size: .97rem; line-height: 1.6; color: var(--silver); max-width: 46ch; }
/* Emphasis only. Every stage is fully legible without it, which is the
   no-JS state; nothing here is a container. */
.lifecycle-step.is-active .lifecycle-n { color: var(--lime); }
@media (prefers-reduced-motion: reduce) {
  .lifecycle-n, .lifecycle-step h3 { transition: none; }
}

@media (min-width: 900px) {
  .engine-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .engine-media-sticky {
    position: sticky;
    top: clamp(6rem, 16vh, 10rem);
    min-height: calc(100svh - clamp(11rem, 26vh, 16rem));
    display: flex; align-items: center;
  }
  .engine-media-sticky > picture { width: 100%; }
}

/* ─── LAYOUT E · Full-bleed object + caption row ────────────────
   The reference labels the objects with small mono captions
   ("01 Answer  02 Follow up  03 Reopen"), not with cards. This is that. */
.architecture { background: var(--zone-black); padding: clamp(5rem, 10vw, 8rem) 0; text-align: center; }
.architecture h2 {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 700; color: #fff;
  max-width: 18ch; margin-inline: auto;
}
.architecture .frame-label { display: block; }
.architecture .frame-sub { margin-inline: auto; max-width: 46ch; }
.frame-object { margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; max-width: 860px; }
.frame-object img { width: 100%; border: 0; border-radius: 0; }

.caption-row {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; padding: 0;
  display: grid; gap: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 1040px; text-align: left;
}
.caption-n {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .16em;
  color: var(--lime); margin-bottom: .55rem;
}
.caption-row h3 {
  font-size: 1.05rem; font-weight: 650; letter-spacing: -0.012em;
  color: #fff; margin-bottom: .3rem;
}
/* The heading text is the link, and at its natural 21px it was under the
   24px minimum target size — and well under the 44px the brief asks for.
   Padding gives it a real hit area without changing how it reads. */
.caption-row h3 a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 1rem;
  color: inherit;
  border-bottom: 1px solid transparent;
}
.caption-row h3 a:hover { color: var(--lime); border-bottom-color: currentColor; }
.caption-row p { font-size: .9rem; line-height: 1.5; color: var(--silver); }
@media (min-width: 760px) {
  .caption-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caption-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .caption-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The centred chapters keep their closing action on the centre line. */
.architecture .frame-actions { text-align: center; }

/* ─── LAYOUT F · The lime band ──────────────────────────────────
   The page's accent zone and its one oversized element that travels
   horizontally on scroll. The words are the lifecycle itself, so the band
   states the product rather than decorating the page. */
.band {
  background: var(--lime);
  color: var(--ink);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  overflow: hidden;
}
.band-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  will-change: transform;
}
.band-track span {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.band-track span::after {
  content: "·";
  margin-left: 3rem;
  color: rgba(10, 10, 10, .45);
}

/* ─── LAYOUT G · Proof — the light zone ─────────────────────────
   One titanium break in an otherwise black page. Still no cards: the
   screenshots are the only objects and everything else is type. */
.proof { background: var(--paper); color: var(--on-light-body); padding: clamp(5rem, 11vw, 9rem) 0; }
.proof h2, .proof h3 { color: var(--on-light-strong); }
.proof .frame-label { color: var(--ink-soft); }
.proof .frame-label b { color: var(--ink); }
.proof h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.04; letter-spacing: -0.032em; font-weight: 700;
  max-width: 19ch;
}
.proof-lead { margin-top: 1.4rem; font-size: 1.02rem; max-width: 54ch; }

.proof-shots {
  display: grid; gap: clamp(2rem, 4.5vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem); align-items: start;
}
.proof-shot { margin: 0; }
.proof-shot img {
  width: 100%; max-width: 310px;
  border: 0; border-radius: 14px;
  box-shadow: 0 20px 44px rgba(10,10,10,.16);
}
.proof-shot figcaption { margin-top: 1rem; max-width: 310px; font-size: .9rem; }
.proof-step {
  display: block; font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: .4rem;
}
.proof-note { font-size: .92rem; max-width: 32ch; }
@media (min-width: 900px) { .proof-shots { grid-template-columns: auto auto minmax(0, 1fr); } }

.proof-outcomes { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.proof-outcomes h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -0.02em; margin-bottom: .7rem; }
.proof-outcomes-intro { max-width: 56ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

/* Type and space, not a bordered table. */
.outcome-list { display: grid; margin: 0; }
.outcome { display: grid; gap: .25rem .5rem; padding: 1.1rem 0; border-top: 1px solid var(--hairline-light); }
.outcome:last-child { border-bottom: 1px solid var(--hairline-light); }
.outcome dt {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft);
}
.outcome dd { margin: 0; font-size: 1rem; color: var(--on-light-strong); }
.outcome-human dd::after {
  content: "Human";
  display: inline-block; margin-left: .6rem; padding: .12rem .45rem;
  border-radius: 3px; background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; vertical-align: middle;
}
@media (min-width: 760px) { .outcome { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; } }

.proof-founder {
  margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--hairline-light);
  display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start;
}
.proof-founder-photo { width: 100%; max-width: 190px; border-radius: 10px; }
.proof-founder h3 { font-size: 1.22rem; margin-bottom: .65rem; }
.proof-founder p { margin-bottom: 1rem; max-width: 62ch; }
.proof-honest { font-size: .92rem; }
.proof-founder .textlink { color: var(--ink); border-bottom-color: var(--ink-soft); }
@media (min-width: 860px) { .proof-founder { grid-template-columns: 190px minmax(0, 1fr); } }

/* ─── Insights ──────────────────────────────────────────────── */
.insights { background: var(--zone-ink); padding: clamp(5rem, 10vw, 8rem) 0; }
.insights h2 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  letter-spacing: -0.032em; font-weight: 700; color: #fff; max-width: 20ch;
}
.insight-grid { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.insight a { display: grid; gap: .5rem; align-content: start; }
.insight-date { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; color: var(--silver); }
.insight h3 { font-size: 1.1rem; font-weight: 650; letter-spacing: -0.015em; color: #fff; line-height: 1.32; }
.insight p { font-size: .9rem; color: var(--silver); }
.insight a:hover h3 { color: var(--lime); }
.insights-cta { margin-top: clamp(2.5rem, 5vw, 3.25rem); }
@media (min-width: 780px) { .insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ─── Closing — centred ─────────────────────────────────────── */
.closing {
  position: relative; background: var(--zone-black);
  min-height: 86svh; display: flex; align-items: center; text-align: center;
  padding: var(--frame-pad) 0; overflow: hidden; isolation: isolate;
}
.closing-media { position: absolute; inset: 0; z-index: 0; margin: 0; }
.closing-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  border: 0; border-radius: 0; opacity: .5;
}
.closing-media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.68) 0%, rgba(0,0,0,.93) 72%);
}
.closing-inner { position: relative; z-index: 2; max-width: 46rem; margin-inline: auto; }
.closing h2 {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.02; letter-spacing: -0.036em; font-weight: 700;
  color: #fff; margin-bottom: 1.2rem;
}
.closing p { color: var(--silver); font-size: 1rem; max-width: 44ch; margin-inline: auto; }
.closing .btn-row { justify-content: center; margin-top: clamp(1.75rem, 3.4vw, 2.5rem); }
.closing-note { margin-top: 1.4rem; font-size: .84rem; color: var(--on-dark-muted); }

/* ─── FAQ ───────────────────────────────────────────────────────
   A definition list, because that is what a Q&A is. No accordion: an
   answer hidden behind a click is an answer a crawler and a hurried
   reader both have to work for, and there is nothing here worth hiding.

   Named .qa-* rather than .faq-*: style.css still owns .faq-list/.faq-item
   for the More Info page, and those rules draw exactly the bordered panel
   this system does not use. */
.faq { background: var(--zone-ink); padding: clamp(5rem, 10vw, 8rem) 0; }
.faq h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.04; letter-spacing: -0.032em; font-weight: 700;
  color: #fff; max-width: 18ch;
}
.qa-list { margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; }
.qa-item {
  display: grid;
  gap: .5rem 2.5rem;
  padding: clamp(1.5rem, 3vw, 2.15rem) 0;
  border-top: 1px solid var(--hairline-dark);
}
.qa-item:last-child { border-bottom: 1px solid var(--hairline-dark); }
.qa-item dt { min-width: 0; }
.qa-item dt h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 650; letter-spacing: -0.015em;
  line-height: 1.3; color: #fff;
}
.qa-item dd {
  margin: 0;
  font-size: 1rem; line-height: 1.65;
  color: var(--silver);
  max-width: 62ch;
}
@media (min-width: 860px) {
  .qa-item { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}

/* A flat numbered list for pages that describe a sequence without pinning
   a visual beside it. Same type as .lifecycle, laid out in columns. */
.lifecycle-flat { gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 820px) {
  .lifecycle-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.25rem) 3rem; }
}

.chapter-zone-ink { background: var(--zone-ink); padding: clamp(5rem, 10vw, 8rem) 0; }
.lifecycle-chapter .frame-actions { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ─── Interior page head ────────────────────────────────────── */
.page-head { background: var(--zone-black); padding: clamp(9rem, 17vw, 13rem) 0 clamp(4rem, 8vw, 6rem); }
.page-head h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1.0; letter-spacing: -0.038em; font-weight: 800;
  color: #fff; max-width: 14ch;
}
.page-head-sub { margin-top: clamp(1.25rem, 2.4vw, 1.85rem); font-size: 1.02rem; line-height: 1.6; color: var(--silver); max-width: 52ch; }
.page-head .btn-row { margin-top: clamp(1.75rem, 3.4vw, 2.5rem); }
.page-head-note {
  margin-top: 1.25rem;
  font-size: .86rem;
  color: var(--on-dark-muted);
  max-width: 44ch;
}
.lifecycle-after {
  max-width: 62ch; margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: .95rem; color: var(--on-dark-muted);
}
.outcome-note { margin-top: 1.75rem; max-width: 58ch; font-size: .95rem; }

/* ─── Staggered entrances ───────────────────────────────────────
   label → heading → body → action, 0.09s apart. Built on .reveal, which
   already honours prefers-reduced-motion in style.css. */
.reveal > * { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: no-preference) {
  .reveal:not(.reveal-visible) > *:nth-child(1) { opacity: 0; transform: translateY(16px); }
  .reveal:not(.reveal-visible) > *:nth-child(2) { opacity: 0; transform: translateY(16px); }
  .reveal:not(.reveal-visible) > *:nth-child(3) { opacity: 0; transform: translateY(16px); }
  .reveal:not(.reveal-visible) > *:nth-child(4) { opacity: 0; transform: translateY(16px); }
  .reveal-visible > *:nth-child(1) { transition-delay: 0s; }
  .reveal-visible > *:nth-child(2) { transition-delay: .09s; }
  .reveal-visible > *:nth-child(3) { transition-delay: .18s; }
  .reveal-visible > *:nth-child(4) { transition-delay: .27s; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal > * { transition: none; }
}

/* ─── Pricing block ─────────────────────────────────────────────
   Renders only when pricing_published is on (scripts/pricing.py).

   Deliberately not a pricing table and not a three-up tier grid: the three
   products use different commercial models, and that shape would imply they
   are software tiers a buyer picks between. It is one block on one product
   page, sitting near the close — type and rules, no card. */
.pricing {
  max-width: 46rem;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline-dark);
}
.chapter-paper .pricing, .proof .pricing { border-top-color: var(--hairline-light); }

.pricing-lead {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.45;
  color: #fff;
  max-width: 34ch;
  margin-bottom: 1.1rem;
}
.chapter-paper .pricing-lead { color: var(--on-light-strong); }

/* The number. Mono, because it is data — and large enough that a buyer
   scanning for it finds it without reading the paragraph. */
.pricing-figure {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lime);
  margin-bottom: 1.75rem;
}
.chapter-paper .pricing-figure { color: var(--ink); }

/* The lifecycle the monthly figure actually buys. */
.pricing-journey {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .55rem;
  margin: 0 0 1.75rem;
  padding: 0;
}
.pricing-journey li {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--silver);
}
.pricing-journey li + li::before { content: "→ "; color: var(--lime-deep); }
.chapter-paper .pricing-journey li { color: var(--on-light-body); }

.pricing-scope { display: grid; gap: 1.75rem; }
.pricing-col h3 {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: .75rem;
}
.chapter-paper .pricing-col h3 { color: var(--ink-soft); }
.pricing-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pricing-col li {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--on-dark-body);
  padding-left: 1.1rem;
  position: relative;
}
.chapter-paper .pricing-col li { color: var(--on-light-body); }
.pricing-col li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
}
/* Exclusions read as boundaries, not as features — hollow, not filled. */
.pricing-col-excl li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--silver);
}

.pricing-note {
  margin-top: 1.5rem;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--on-dark-muted);
  max-width: 52ch;
}
.chapter-paper .pricing-note { color: var(--on-light-body); }

@media (min-width: 760px) {
  .pricing-scope { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* Heading for the pricing chapter — same weight as an engine head, but it
   is a standalone h2 rather than sitting inside .engine-head. */
.engine-head-h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 700;
  color: #fff;
  max-width: 20ch;
}

/* Compact price line for a homepage chapter. Renders only when
   pricing_published is on. Sits before the chapter's CTA — never the hero. */
.price-line {
  display: grid;
  gap: .5rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  max-width: 40rem;
}
.price-line-figure {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--lime);
}
.price-line-note { font-size: .92rem; line-height: 1.55; color: var(--silver); }
.chapter-paper .price-line-figure { color: var(--ink); }
.chapter-paper .price-line-note { color: var(--on-light-body); }