/* SubflowAI scroll preview. Page layer on top of scrollcraft.css.
   Brand tokens: teal #367e83, cream #faf9f5, charcoal #2a2a2a, gold #ffc300.
   Montserrat headings, Roboto body. Charcoal on gold, never white on gold. */

:root {
  --sc-canvas:      #faf9f5;
  --sc-surface:     #ffffff;
  --sc-ink:         #2a2a2a;
  --sc-ink-soft:    #5a5a5a;
  --sc-accent:      #367e83;
  --sc-accent-ink:  #ffffff;
  --sc-font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sc-font-text:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sc-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sc-shadow-color: 186 24% 14%;

  --teal:      #367e83;
  --teal-dark: #2a5f63;
  --teal-pale: #e8f3f4;
  --gold:      #ffc300;
  --gold-pale: #fffbeb;
  --charcoal:  #2a2a2a;
  --rule:      #e8e8e8;
}

/* ------------------------------------------------------------- grounds --
   Hard cuts. Each chapter lands on its own ground and stays there. Restating
   color with the token is required: color inherits as a computed value. */
.g-cream { background: var(--sc-canvas); }
.g-white { background: #ffffff; }
.g-pale  { background: var(--teal-pale); }
.g-gold  { background: var(--gold-pale); }
.g-teal  { background: var(--teal-dark); --sc-ink: #faf9f5; --sc-ink-soft: #e8e8e8; --sc-accent: var(--gold); --sc-accent-ink: var(--charcoal); --sc-hairline: rgb(250 249 245 / 0.22); color: var(--sc-ink); }
.g-char  { background: var(--charcoal);  --sc-ink: #faf9f5; --sc-ink-soft: #e8e8e8; --sc-accent: var(--gold); --sc-accent-ink: var(--charcoal); --sc-hairline: rgb(250 249 245 / 0.2); color: var(--sc-ink); }

/* ---------------------------------------------------------------- type -- */
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
.h-xl, .h-lg, .h-md, .h-sm {
  font-family: var(--sc-font-display);
  font-weight: 700;
  color: var(--sc-ink);
  text-wrap: balance;
}
.h-xl { font-size: clamp(2.05rem, 1.15rem + 3.9vw, 4.1rem); line-height: 1.05; letter-spacing: -0.028em; max-width: 21ch; }
.h-lg { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.1rem);  line-height: 1.08; letter-spacing: -0.024em; max-width: 22ch; }
.h-md { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.1rem); line-height: 1.14; letter-spacing: -0.018em; max-width: 24ch; }
.h-sm { font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem);  line-height: 1.22; letter-spacing: -0.012em; font-weight: 600; }
.lede { font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); max-width: 44ch; text-wrap: pretty; }
.soft { color: var(--sc-ink-soft); }
.note { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 62ch; }
main p { text-wrap: pretty; }
.nb { white-space: nowrap; }
main a, main summary { scroll-margin-block: 6rem; }

.ch { padding-block: var(--sc-section); }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.8rem 1.5rem;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.005em;
  white-space: nowrap; text-decoration: none;
  color: #ffffff; background: var(--teal);
  border: 2px solid var(--teal); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e1);
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--teal-dark); box-shadow: none; }
.btn--ink { background: var(--charcoal); border-color: var(--charcoal); color: #faf9f5; }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--charcoal); font-weight: 700; }
.btn--gold:focus-visible { outline-color: #faf9f5; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
  .btn--ghost:hover { background: var(--teal-dark); color: #ffffff; }
  .btn--ink:hover { background: #000000; border-color: #000000; }
  .btn--gold:hover { background: #ffd23d; border-color: #ffd23d; }
}
.textlink {
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1rem;
  color: var(--teal-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em;
  padding-block: 0.6rem;
}
.g-char .textlink, .g-teal .textlink { color: var(--gold); }

/* ---------------------------------------------------------- title page -- */
.title {
  position: relative; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
}
.title__top { padding-top: clamp(1.25rem, 3vh, 2.25rem); position: relative; z-index: 2; }
.mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; color: var(--sc-ink); }
.mark img { width: 36px; height: 36px; border-radius: 8px; }
.title__inner {
  position: relative; z-index: 2;
  margin-block: auto; padding-block: clamp(2rem, 7vh, 5rem) clamp(2rem, 6vh, 4rem);
}
.title__inner > * + * { margin-top: var(--sc-5); }
.title__inner .lede { max-width: 40ch; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-6); margin-top: var(--sc-6); }
.trust { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-top: var(--sc-5); }

/* The scroll cue. One treatment wherever a full screen could pass for the end
   of the page: the title page and the pinned chapter. Semibold words beside a
   solid disc that bobs 9px, and it only moves for readers who have not asked
   for stillness. */
.cue {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.005em;
  color: var(--teal-dark);
}
.chev {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--teal-dark); box-shadow: var(--sc-e1);
}
.chev::before {
  content: ""; width: 0.5rem; height: 0.5rem; margin-top: -0.2rem;
  border-right: 2px solid #faf9f5; border-bottom: 2px solid #faf9f5;
  transform: rotate(45deg);
}
@keyframes cue-bob {
  0%, 100% { transform: translate3d(0, -3px, 0); }
  50%      { transform: translate3d(0, 6px, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .chev { animation: cue-bob 1.25s ease-in-out infinite; }
}
/* The foot of the title page. --banner-h is the cookie banner's height while
   it is up (page.js), so the cue is not born underneath it. */
.title__scroll {
  position: relative; z-index: 2;
  padding-bottom: calc(1.25rem + var(--banner-h, 0px));
}

/* The product on the title page. Stacked (phone, tablet): a band of the
   scheduled week under the buttons, cropped by object-fit so its height can
   give way on a short screen. The engine's parallax is switched off here,
   because a plate that drifts would climb over the buttons. */
.title__inner > .hero { margin-top: var(--sc-4); }
.hero { position: relative; max-width: 40rem; }
.hero__plate {
  overflow: hidden; border-radius: var(--sc-r-lg);
  background: #ffffff; border: 1px solid var(--rule); box-shadow: var(--sc-e3);
  height: clamp(7.5rem, calc(100svh - 44.5rem), 12.3rem);
}
@media (max-width: 1099px) { .hero__plate { transform: none !important; } }
.hero__plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__slots { display: none; }
.title__inner > .hero + .trust { margin-top: var(--sc-3); }
/* Wide screens: the whole calendar as the right-hand plate, bleeding off the
   edge. Three planes at three rates: open slots behind, the plate, two filled
   slots in front that overlap its edge and nothing worth reading. */
@media (min-width: 1100px) {
  .title__inner { display: grid; grid-template-columns: minmax(0, 41rem) minmax(0, 1fr); column-gap: var(--sc-7); align-content: center; }
  .title__inner > * { grid-column: 1; }
  .title__inner > .hero { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin-top: 0; width: min(52vw, 56rem); max-width: none; }
  .hero__plate { height: auto; }
  .hero__plate img { height: auto; object-fit: fill; }
  .hero__slots { display: block; position: absolute; inset: 0; pointer-events: none; }
  .hero__slots i { position: absolute; display: block; width: 14%; aspect-ratio: 5 / 7; border-radius: var(--sc-r-md); box-shadow: var(--sc-e2); }
  .hero__slots .is-teal { background: var(--teal); left: 58%; top: -27%; }
  .hero__slots .is-gold { background: var(--gold); left: 3.5%; bottom: -17%; }
  .title .week--front { display: none; }
  .title__inner > .hero + .trust { margin-top: var(--sc-5); }
}

/* The week: two planes of open slots behind the type. Hairlines only, so the
   headline keeps the paper. The mask clears the side the copy sits on. */
.week {
  position: absolute; z-index: 1; pointer-events: none;
  right: -3vw; top: 9%;
  width: min(60vw, 56rem);
  display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(0.4rem, 0.9vw, 0.9rem);
  -webkit-mask-image: linear-gradient(to left, #000 22%, transparent 88%);
          mask-image: linear-gradient(to left, #000 22%, transparent 88%);
}
.week i { display: block; aspect-ratio: 5 / 7; border-radius: var(--sc-r-md); }
.week--back i { border: 1px dashed rgb(54 126 131 / 0.34); }
.week--front i.is-teal { background: var(--teal); box-shadow: var(--sc-e2); }
.week--front i.is-gold { background: var(--gold); box-shadow: var(--sc-e2); }

/* ------------------------------------------------------------ busywork -- */
.busy { padding-top: clamp(2rem, 5vw, 5rem); }
.kicker { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); max-width: 40ch; }
.busy__head .h-lg { margin-top: var(--sc-3); max-width: 20ch; }
.busy__pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 26rem)); gap: var(--sc-6) var(--sc-8);
  margin-top: var(--sc-8); margin-left: auto; width: fit-content; max-width: 100%;
}
.busy__pair p { padding-top: var(--sc-4); border-top: 1px solid var(--sc-ink); }
.turn { margin-top: var(--sc-9); font-size: var(--sc-t-xl); line-height: 1.32; letter-spacing: -0.012em; max-width: 34ch; color: var(--sc-ink); }
.turn strong { font-family: var(--sc-font-display); font-weight: 700; color: var(--teal-dark); }

/* ---------------------------------------------------------------- peak --
   The signature move. --close runs 0 to 1 across act progress 0.64 to 0.85 and
   everything in the device reads from it. No engine edits: this is page CSS
   computing from the --sc-p the engine already publishes. */
.peak { --close: clamp(0, calc((var(--sc-p, 0) - 0.64) / 0.21), 1); }
.peak__stage {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center; gap: var(--sc-7);
  padding-inline: var(--sc-gutter);
}
.peak__copy { max-width: 27rem; }
.peak__steps { display: grid; }
.step { grid-area: 1 / 1; align-self: center; }
.step .step__n {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display); font-weight: 700; font-size: 0.85rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--teal-dark);
}
/* Where you are in the chapter, and that there is more of it. The bar is the
   pin's own progress. The cue is an engine cue, so it leaves as step 3 lands.
   Shown only once the engine is running: without it there is no pin. */
.peak__nav { display: none; margin-top: var(--sc-5); }
.sc-ready .peak__nav { display: block; }
.peak__bar { height: 3px; border-radius: 2px; background: rgb(42 95 99 / 0.24); overflow: hidden; }
.peak__bar i { display: block; height: 100%; background: var(--teal-dark); transform-origin: 0 50%; transform: scaleX(var(--sc-p, 0)); }
.peak__bar { margin-top: var(--sc-4); }
.step p { margin-top: var(--sc-4); font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); }

.peak__device { display: grid; place-items: center; }
.scene {
  --w: min(42vw, 48rem, calc((100vh - 15rem) * 1.5));
  --h: calc(var(--w) * 0.5625);
  position: relative; width: var(--w); height: var(--h);
  margin-bottom: calc(var(--h) * 0.25);
  perspective: calc(var(--h) * 5); perspective-origin: 50% 0%;
}
.scene::after {       /* contact shadow under the deck's near edge */
  content: ""; position: absolute; left: -10%; right: -10%;
  top: calc(100% + var(--h) * 0.2); height: calc(var(--h) * 0.14);
  background: radial-gradient(closest-side, hsl(var(--sc-shadow-color) / 0.3), transparent);
  filter: blur(6px);
}
.laptop { position: absolute; inset: 0; transform-style: preserve-3d; }
.lid {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateX(calc(var(--close) * -87deg));
}
.lid__screen, .lid__back {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 14px 14px 4px 4px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.lid__screen { background: #161b1c; border: 7px solid var(--charcoal); box-shadow: var(--sc-e3); }
.lid__dim { position: absolute; inset: 0; z-index: 3; background: #0d1011; opacity: var(--close); }
.lid__back { transform: rotateX(180deg); background: linear-gradient(#3b3b3b, #262626); }
.deck {
  position: absolute; left: 0; top: 100%; width: 100%; height: var(--h);
  transform-origin: 50% 0; transform: rotateX(90deg);
  border-radius: 4px 4px 18px 18px;
  background:
    linear-gradient(#232323, #232323) 50% 82% / 26% 22% no-repeat,
    linear-gradient(#1d1d1d, #1d1d1d) 50% 16% / 88% 44% no-repeat,
    linear-gradient(#3a3a3a, #2c2c2c);
  opacity: clamp(0, calc((0.96 - var(--close)) * 25), 1);
}
/* Five Notes go out after the lid is down. No labels: the clip already said
   which five. */
.sent {
  position: absolute; left: 0; right: 0; bottom: 14%;
  display: flex; justify-content: center; gap: 2.4%;
}
.sent i {
  --t: clamp(0, calc((var(--sc-p, 0) - (0.87 + var(--i) * 0.016)) / 0.04), 1);
  display: block; width: 9.5%; aspect-ratio: 5 / 7; border-radius: 10px;
  background: linear-gradient(#3f9197, var(--teal-dark));
  box-shadow: var(--sc-e2);
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * 1.75rem), 0);
}

/* ---------------------------------------------------------------- watch --
   Click-to-load. The link and its poster are all that exist until a click. */
.watch { padding-top: calc(var(--sc-section) * 0.7); }
.watch__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-7) var(--sc-7); align-items: end; }
.video .h-sm { max-width: 30ch; }
.yt {
  position: relative; display: block; margin-top: var(--sc-4);
  aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--sc-r-lg); background: #161b1c; box-shadow: var(--sc-e3);
}
.yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.yt__play {
  position: absolute; left: var(--sc-4); bottom: var(--sc-4);
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.5rem 1.1rem;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--charcoal); background: var(--gold); border-radius: var(--sc-r-md); box-shadow: var(--sc-e2);
}
.yt__play::before { content: ""; border-left: 0.75em solid currentColor; border-top: 0.45em solid transparent; border-bottom: 0.45em solid transparent; }

/* -------------------------------------------------------- run it by chat -- */
.chat__head .lede { margin-top: var(--sc-5); max-width: 40ch; }
.prompts {
  list-style: none; padding: 0; margin-top: var(--sc-8);
  font-family: var(--sc-font-mono); font-size: clamp(1.02rem, 0.9rem + 0.75vw, 1.5rem); line-height: 1.4;
  border-top: 1px solid var(--sc-hairline);
}
.prompts li { padding-block: var(--sc-4); border-bottom: 1px solid var(--sc-hairline); color: var(--sc-ink); }
/* Gold on teal dark is 4.48:1, so this line is set at heading size: 28px bold
   at its smallest, well inside the large-text class (3:1). */
.approve { margin-top: var(--sc-9); color: var(--gold); max-width: none; }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-6) var(--sc-7); margin-top: var(--sc-6); }
.points dt { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.25; color: var(--sc-ink); }
.points dd { margin-top: var(--sc-3); color: var(--sc-ink-soft); }
.chat .note { margin-top: var(--sc-7); }

/* -------------------------------------------------------------- spreads -- */
.spread { padding-block: calc(var(--sc-section) * 0.62); }
.spread:first-child { padding-top: var(--sc-section); }
.spread:last-child { padding-bottom: var(--sc-section); }
.plate { overflow: hidden; border-radius: var(--sc-r-lg); background: #ffffff; border: 1px solid var(--rule); box-shadow: var(--sc-e3); }
.plate img { width: 100%; height: auto; scale: 1.08; }
.plate--still img { display: block; scale: 1; }
.spread__text > * + * { margin-top: var(--sc-4); }
.spread__text p { color: var(--sc-ink-soft); max-width: 52ch; }
.spread__text--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sc-5) var(--sc-8); align-items: start; margin-top: var(--sc-7); }
.spread__text--split > * + * { margin-top: 0; }
.solo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sc-5) var(--sc-8); align-items: start; padding-top: var(--sc-6); border-top: 1px solid var(--sc-ink); }
.solo p { font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); max-width: 44ch; }
.side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-7) var(--sc-8); align-items: center; }
.side--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* ------------------------------------------------------- 5-minute week -- */
.week5__wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sc-6) var(--sc-8); align-items: start; }
.week5__lead .plate { margin-top: var(--sc-6); }
.steps { padding: 0; list-style: none; counter-reset: s; border-top: 1px solid var(--sc-ink); }
.steps li {
  counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--sc-2);
  padding-block: var(--sc-3); border-bottom: 1px solid rgb(42 42 42 / 0.16);
}
.steps li::before { content: counter(s); font-family: var(--sc-font-display); font-weight: 700; color: var(--teal-dark); font-variant-numeric: tabular-nums; }
.result { margin-top: var(--sc-5); font-size: var(--sc-t-lg); line-height: 1.4; }
.result strong { font-family: var(--sc-font-display); }

/* -------------------------------------------------------------- letters -- */
/* The growth maths. A sentence, three ruled lines and the claim they add up
   to. The figures are the source's and stay in the sentence they came in. */
.maths { margin-top: var(--sc-6); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-5) var(--sc-8); align-items: start; }
.maths__lead { font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); max-width: 36ch; }
.maths__label { font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-ink); }
.maths__list { list-style: none; padding: 0; margin-top: var(--sc-3); border-top: 1px solid var(--sc-ink); }
.maths__list li { padding-block: var(--sc-3); border-bottom: 1px solid rgb(42 42 42 / 0.16); color: var(--sc-ink); }
.maths__close { margin-top: var(--sc-4); font-family: var(--sc-font-display); font-weight: 700; color: var(--teal-dark); }
.letters__lead { margin-top: var(--sc-8); }
.letter blockquote p { color: var(--sc-ink); }
.letter figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.letter figcaption b { display: block; font-family: var(--sc-font-display); font-weight: 600; color: var(--sc-ink); }
.letters__lead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-6) var(--sc-7); align-items: start; }
.letter--big { padding-top: var(--sc-5); border-top: 2px solid var(--teal); }
.letter--big blockquote p { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.36; letter-spacing: -0.01em; }
.letters__cols { margin-top: var(--sc-8); columns: 3 18rem; column-gap: var(--sc-7); font-size: var(--sc-t-sm); }
.letters__cols .letter { break-inside: avoid; padding-top: var(--sc-4); margin-bottom: var(--sc-6); border-top: 1px solid rgb(42 42 42 / 0.2); }
.letters__cols .letter blockquote p { color: var(--sc-ink-soft); line-height: 1.55; }

/* --------------------------------------------------------------- doubts -- */
.doubt { padding-block: calc(var(--sc-section) * 0.7); }
.doubt__wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--sc-7) var(--sc-8); align-items: start; }
.doubt .soft { margin-top: var(--sc-3); color: var(--sc-ink); }
.facts { list-style: none; padding: 0; margin-top: var(--sc-5); border-top: 1px solid var(--sc-ink); font-size: var(--sc-t-sm); }
.facts li { padding-block: var(--sc-3); border-bottom: 1px solid rgb(42 42 42 / 0.16); break-inside: avoid; color: var(--sc-ink); }
.facts b { display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); }
.facts--two { columns: 2 16rem; column-gap: var(--sc-7); border-top: 0; }
.facts--two li { border-top: 1px solid var(--sc-ink); border-bottom: 0; }

/* -------------------------------------------------------------- pricing -- */
.ledger { margin-top: var(--sc-7); border-top: 1px solid var(--sc-ink); }
.tier {
  display: grid; grid-template-columns: minmax(11rem, 3fr) minmax(0, 7fr) auto; gap: var(--sc-4) var(--sc-6); align-items: center;
  padding: var(--sc-5) var(--sc-5); border-bottom: 1px solid rgb(42 42 42 / 0.18);
}
.tier h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); color: var(--sc-ink-soft); }
.tier__price { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--sc-ink); }
.tier ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0; font-size: var(--sc-t-sm); color: var(--sc-ink); }
.tier li:not(:last-child)::after { content: "·"; margin-inline: 0.6em; color: var(--sc-ink-soft); }
.tier .btn { min-width: 10.5rem; }
.tier--gold { background: var(--gold); border-bottom-color: transparent; border-radius: var(--sc-r-md); margin-top: var(--sc-3); box-shadow: var(--sc-e2); }
.tier--gold h3, .tier--gold li:not(:last-child)::after { color: var(--charcoal); }
.pricing .note { margin-top: var(--sc-6); }
.pricing .note a { color: var(--teal-dark); font-weight: 500; }

/* ------------------------------------------------------------------ faq -- */
.faq { padding-top: 0; }
.faq__wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--sc-6) var(--sc-8); align-items: start; }
.faq__list { border-top: 1px solid var(--sc-ink); }
.faq details { border-bottom: 1px solid rgb(42 42 42 / 0.18); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--sc-4) 2.5rem var(--sc-4) 0; position: relative;
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); line-height: 1.35; color: var(--sc-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.6rem; height: 0.6rem; margin-top: -0.45rem;
  border-right: 2px solid var(--teal-dark); border-bottom: 2px solid var(--teal-dark);
  transform: rotate(45deg); transition: transform 160ms var(--sc-ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -0.1rem; }
.faq details p { padding-bottom: var(--sc-5); color: var(--sc-ink-soft); max-width: 68ch; }

/* ------------------------------------------------------------- colophon -- */
.colophon { padding-block: var(--sc-9) var(--sc-6); }
.colophon__ask > * + * { margin-top: var(--sc-6); }
.colophon__copy > * + *, .colophon__act > * + * { margin-top: var(--sc-5); }
/* Two columns from tablet up: the argument on the left, the ask on the right.
   One tall left-hand stack left the right half of the close empty. */
@media (min-width: 861px) {
  .colophon__ask { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--sc-8); align-items: center; }
  .colophon__ask > * + * { margin-top: 0; }
  .colophon__line { max-width: 56ch; }
}
.colophon__line { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 48ch; color: var(--sc-ink); }
.colophon__line a { font-family: var(--sc-font-display); font-weight: 700; color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 0.26em; }
.foot { margin-top: var(--sc-8); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); display: grid; gap: var(--sc-2) var(--sc-6); }
.foot__fine { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
/* Wide screens: fine print stacked on the left on one line each, links on the right. */
@media (min-width: 861px) {
  .foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .foot__links { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
}
.foot__links { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); font-size: var(--sc-t-sm); }
.foot__links a { color: var(--sc-ink); padding-block: 0.5rem; }

/* --------------------------------------------------------------- chrome -- */
.folio {
  position: fixed; z-index: var(--sc-z-chrome); left: 0; top: 50%;
  width: var(--sc-gutter); display: none; justify-content: center; pointer-events: none;
}
.folio span {
  writing-mode: vertical-rl; transform: rotate(180deg) translateY(50%);
  font-family: var(--sc-font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--charcoal); transition: color 200ms var(--sc-ease-out);
}
[data-ground="dark"] .folio span { color: #faf9f5; }
@media (min-width: 1100px) { .folio { display: flex; } }

.pin-cta {
  position: fixed; z-index: var(--sc-z-chrome); top: max(0.75rem, env(safe-area-inset-top)); right: max(0.75rem, env(safe-area-inset-right));
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1.05rem;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap;
  color: var(--charcoal); background: var(--gold); border-radius: var(--sc-r-md); box-shadow: var(--sc-e2);
  opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0);
  transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out), visibility 0s linear 200ms;
}
.pin-cta.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pin-cta:focus-visible { outline-color: var(--charcoal); }

/* --------------------------------------------------------------- narrow --
   860px is the engine's own phone breakpoint; coarse pointers get the phone
   clip at any width, so the lid takes the phone clip's shape there too. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .scene { --h: calc(var(--w) * 0.97); }
}
@media (max-width: 860px) {
  .week { right: -22vw; top: 4.5rem; width: 118vw; opacity: 0.8; }
  /* The title page is packed so that, with the cookie banner still up on a
     390x844 phone, the plate, the trust line and the cue all sit above it. */
  .title__top { padding-top: 0.75rem; }
  .title__inner { padding-block: 0.75rem 0.5rem; }
  .title__inner > .lede { margin-top: 0.875rem; }
  .title__inner > .cta-row { margin-top: 1.25rem; }
  .title__scroll { padding-bottom: calc(0.4rem + var(--banner-h, 0px)); }
  .maths { grid-template-columns: 1fr; }
  .week i:nth-child(n+15) { display: none; }
  .busy__pair { grid-template-columns: 1fr; margin-top: var(--sc-7); }
  .turn { margin-top: var(--sc-8); }

  .peak__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--sc-4); align-items: start; padding-top: 4.25rem; padding-bottom: 1.5rem; }
  .peak__copy { max-width: none; }
  .peak__steps { min-height: 14.5rem; }
  .peak__nav { margin-top: var(--sc-3); }
  .step { align-self: start; }
  .step .step__n { margin-bottom: var(--sc-2); font-size: 0.85rem; }
  .step p { font-size: var(--sc-t-base); margin-top: var(--sc-3); }
  .peak__device { align-self: center; }
  .scene { --w: min(70vw, calc((100svh - 28rem) * 0.82)); }

  .points { grid-template-columns: 1fr; }
  .spread__text--split, .solo, .side, .side--flip, .faq__wrap, .watch__grid, .week5__wrap, .letters__lead, .doubt__wrap { grid-template-columns: 1fr; }
  .week5__lead .plate { margin-top: var(--sc-5); }
  .watch__grid { align-items: start; }
  .side--flip > .plate { order: 2; }
  .spread__text--split { gap: var(--sc-4); margin-top: var(--sc-6); }
  .tier { grid-template-columns: 1fr; padding-inline: var(--sc-4); gap: var(--sc-3); }
  .tier__name { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-4); }
  .tier .btn { justify-self: start; }
  .tier ul { display: block; }
  .tier li:not(:last-child)::after { content: none; }
  .tier li { padding-block: 0.15rem; }
}

/* -------------------------------------------------------- reduced motion --
   The peak stops being a film and becomes a page: unpinned, all three steps in
   reading order, the lid open on the finished week. Nothing is lost, only stilled. */
@media (prefers-reduced-motion: reduce) {
  .peak { height: auto !important; --close: 0; }
  .peak .sc-stage { position: static; height: auto; padding-block: var(--sc-section); }
  .peak__steps { gap: var(--sc-6); min-height: 0; }
  .peak__nav, .sc-ready .peak__nav { display: none; }
  .peak .step { grid-area: auto; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .sent { display: none; }
  .plate img { scale: 1; }
  .pin-cta, .btn, .folio span, .faq summary::after { transition: none; }
}

/* Answer capsule: the plain answer search and AI assistants quote (spec aeo-capsules-site-check-2026-10-18). */
.answer-capsule { max-width: 62ch; margin-top: var(--sc-5); font-size: 1rem; line-height: 1.6; color: var(--sc-ink); padding: 0.75rem 1rem; border-left: 4px solid var(--sc-accent); background: var(--sc-surface); border-radius: 0 8px 8px 0; }