/* Layout: try it, see why it matters, watch one decision travel from a text to a review. */

/* Hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--fill-soft) 100%); border-bottom: 1px solid var(--line); isolation: isolate; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: clamp(40px, 6vw, 96px); align-items: start; padding-block: clamp(56px, 6.5vw, 96px); }
/* Desktop: the headline's cap line sits on the phone's top edge (Geist: ~.15em from the
   line box to the caps at line-height 1), and the copy below gets the column to itself. */
@media (min-width: 961px) {
  .hero h1 { margin-top: -.15em; }
  /* The phone is the hero: a wide right column, and a short top pad so the whole device,
     the headline and the text-me field all sit above the fold at 1440x900. */
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(400px, 520px); gap: clamp(56px, 7vw, 120px); align-items: stretch; padding-top: 48px; padding-bottom: calc(clamp(56px, 6.5vw, 96px) + 96px); }
  .hero-phone { align-self: start; }
  /* Scale the whole device (text included), not just its frame: ~460x780 at full width, but never
     taller than the first screen. Zoom caps to the viewport's own height (header + top pad + a breathing
     margin reserved below the bezel) so the device, including its shadow, stays above the fold on short
     laptop screens; width follows since zoom scales the whole 360x760 box uniformly. */
  .hero { --hero-phone-zoom: clamp(.55, calc((100svh - 153px) / 760px), 1.3); }
  .hero .hero-phone .q-phone { zoom: var(--hero-phone-zoom); height: 760px; width: 360px; }
  .hero-phone #demo { min-height: calc(760px * var(--hero-phone-zoom)); }
  .phone-foot { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--s-5); }
  /* Round 34 (Dan, 9 Nov, after r33's phone fit): scale the whole left column with viewport height the
     same way, so the headline, subhead, body and bar box all fit above the fold on short laptop screens
     too; headline cap line now lands on the phone's top edge instead of the old fixed 72px pad, and the
     three gaps above the bar box (head→sub, sub→body, body→bar) are equal. */
  .hero { --hero-copy-scale: clamp(.6, calc((100svh + 102px) / 1092px), .85); --hero-gap: calc(16px + 24px * var(--hero-copy-scale)); }
  .hero h1 { font-size: calc(clamp(44px, 6vw, 96px) * var(--hero-copy-scale)); margin-top: calc(-.15em + 13px); }
  .hero-copy { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 0; }
  .hero-copy .hero-lede { margin-top: var(--hero-gap); font-size: calc(clamp(19px, 1.9vw, 28px) * var(--hero-copy-scale)); }
  .hero-copy .hero-value { margin-top: var(--hero-gap); font-size: calc(clamp(17px, 1.45vw, 22px) * var(--hero-copy-scale)); }
  /* The bar box itself scales too (bar height, chips, note, divider row) so it clears the fold with the
     "Free to start" row landing near the phone's bottom. */
  .hero-copy .ask-panel { margin-top: var(--hero-gap); padding: calc(clamp(20px, 2.4vw, 32px) * var(--hero-copy-scale)); }
  /* Round 35 design-check fix: the scaled padding above dropped the bar's own inner padding below 8px at
     short viewports (6-6.7px at 1512x815/1280x720) — floor it at 10/12px so the text never crowds the
     pill's edge; the extra few px comes out of --hero-gap below, not the fold rule. */
  .hero-copy .ask-bar { min-height: calc(64px * var(--hero-copy-scale)); padding: max(10px, calc(8px * var(--hero-copy-scale))) max(10px, calc(8px * var(--hero-copy-scale))) max(10px, calc(8px * var(--hero-copy-scale))) max(12px, calc(10px * var(--hero-copy-scale))); }
  .hero-copy .ask-mark { width: calc(44px * var(--hero-copy-scale)); height: calc(44px * var(--hero-copy-scale)); }
  .hero-copy .ask-text, .hero-copy .ask-lead, .hero-copy .ask-cycle { font-size: calc(17px * var(--hero-copy-scale)); }
  .hero-copy .ask-go { min-height: calc(48px * var(--hero-copy-scale)); font-size: calc(15px * var(--hero-copy-scale)); }
  .hero-copy .ask-chips { margin-top: calc(16px * var(--hero-copy-scale)); gap: calc(8px * var(--hero-copy-scale)); }
  .hero-copy .ask-chip { min-height: calc(36px * var(--hero-copy-scale)); font-size: calc(14px * var(--hero-copy-scale)); }
  /* "Future You texts first…" must never wrap at desktop widths (was wrapping after "record"); the panel
     is wide enough once it isn't capped to 48ch. */
  .hero-copy .ask-note { max-width: none; white-space: nowrap; margin-top: calc(14px * var(--hero-copy-scale)); font-size: calc(14px * var(--hero-copy-scale)); }
  /* Less air before the divider and the "Free to start" row, so the box's own bottom clears the fold. */
  .hero-copy .assure { margin-top: calc(10px * var(--hero-copy-scale)); padding-top: max(10px, calc(10px * var(--hero-copy-scale))); font-size: calc(14px * var(--hero-copy-scale)); }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .hero { --hero-phone-zoom: clamp(.55, calc((100svh - 153px) / 760px), 1.1); }
}
h1 { font-size: clamp(44px, 6vw, 96px); font-weight: 600; line-height: .98; letter-spacing: -.022em; }
.hero-lede { margin-top: var(--s-6); max-width: 30ch; font-size: clamp(19px, 1.9vw, 28px); line-height: 1.4; letter-spacing: -.012em; color: var(--ink-2); }
.hero-lede b { font-weight: 600; color: var(--ink); }
/* Value prop: answers the question above it and leads straight into the text-me box. */
.hero-value { max-width: 40ch; margin-top: var(--s-7); margin-bottom: 0; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.6; color: var(--ink); }
.hero-value b { font-weight: 600; text-decoration: underline; text-decoration-color: var(--rust); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.hero-value + .phone-signup { margin-top: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; margin-top: var(--s-5); }
.cta-row .q-login { padding: 6px 4px; }
.cta-sep { width: 1px; height: 20px; background: var(--line-strong); }
.btn-quiet { min-height: 44px; padding: 0 18px; font-size: 15px; color: var(--ink); background: linear-gradient(180deg, #fff, #f3f5f6); border-color: var(--line-strong); border-bottom-color: var(--line-edge); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(14,20,23,.06); }
.btn-quiet:hover { border-color: var(--line-edge); background: linear-gradient(180deg, #fff, #eef1f3); }

/* Text-me sign-up: the hero's primary action (Boardy-style number field under the headline). */
.phone-signup { max-width: 560px; margin-top: var(--s-6); }
.ps-label { display: block; margin-bottom: var(--s-2); font-size: 15px; font-weight: 600; color: var(--ink); }
.ps-row { display: flex; gap: var(--s-2); }
.ps-field { flex: 1; min-width: 0; display: flex; align-items: stretch; min-height: 52px; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 1px 2px rgba(14,20,23,.05); transition: border-color .2s, box-shadow .2s; }
.ps-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.ps-field select { flex: none; appearance: none; -webkit-appearance: none; padding: 0 26px 0 14px; border: 0; border-right: 1px solid var(--line); border-radius: 8px 0 0 8px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233a3c40' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px; font: 500 16px/1 var(--body); color: var(--ink); cursor: pointer; }
.ps-field input { flex: 1; min-width: 0; padding: 0 14px; border: 0; border-radius: 0 8px 8px 0; background: transparent; font: 400 17px/1 var(--body); color: var(--ink); }
.ps-field select:focus, .ps-field input:focus { outline: none; }
.ps-field select:focus-visible { box-shadow: inset 0 0 0 2px var(--teal); }
.ps-field input::placeholder { color: #6b757d; }
.phone-signup.has-error .ps-field { border-color: #b3261e; }
.phone-signup.has-error .ps-field:focus-within { box-shadow: 0 0 0 3px #f9dedc; }
.phone-signup .btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.ps-status:empty { display: none; }
.ps-status { margin-top: var(--s-2); font-size: 14.5px; font-weight: 500; line-height: 1.45; }
.ps-status.is-error { color: #b3261e; }
.ps-status.is-ok { color: var(--teal-ink); background: var(--teal-soft); padding: 10px 14px; border-radius: 8px; }
.ps-consent { margin-top: var(--s-2); max-width: 54ch; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ps-consent a { color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chat-door-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--teal-ink); text-decoration: none; }
.chat-door-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.assure { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); max-width: 620px; font-size: 14px; color: var(--muted); }
.assure b { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.assure b svg { width: 14px; height: 14px; stroke: var(--teal); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.assure i { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.hero-phone { position: relative; display: grid; justify-items: center; gap: var(--s-5); }
.hero-phone::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: 132%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; width: 150%; background: radial-gradient(circle, rgba(43,122,130,.16) 0%, rgba(120,186,192,.12) 30%, rgba(214,236,238,.08) 50%, transparent 68%); filter: blur(8px); pointer-events: none; }
/* Reserve the phone's height so the hero doesn't shift when main.js draws it. */
#demo { width: 100%; min-height: 740px; }
.hero-phone .q-phone { width: min(100%, 340px); height: 740px; }
.hero-phone .q-suggest button { font-size: 13px; }
.phone-foot { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.phone-caption { font-size: 14px; color: var(--muted); }
.door-channels { margin-top: -4px; font-size: 13px; color: var(--muted); }
.phone-caption b { color: var(--ink); font-weight: 600; }

/* Bands */
.band { padding-block: var(--section); }
.band-stone { background: var(--fill); border-block: 1px solid var(--line); }
.sec-title { font-size: clamp(36px, 4.8vw, 68px); line-height: 1.02; letter-spacing: -.022em; max-width: 20ch; }
.sec-sub { margin-top: var(--s-4); font-size: clamp(19px, 1.8vw, 22px); font-weight: 500; letter-spacing: -.01em; color: var(--teal); }

/* The bridge */
.bridge { background: var(--fill-soft); padding-block: clamp(88px, 10vw, 150px); }
.bridge-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.bridge-copy { display: grid; gap: var(--s-6); }
.bridge-copy .sec-title { margin-bottom: var(--s-4); max-width: 15ch; }
.bridge-copy > p { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.65; color: #2c363c; max-width: 46ch; }
.bridge-copy .bridge-turn { margin-top: var(--s-3); font-size: clamp(24px, 2.5vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--teal); }
.truths { list-style: none; margin: var(--s-2) 0; padding: var(--s-4) 0; border-block: 1px solid #e3e7ea; display: grid; gap: var(--s-2); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.compare-fig { margin: 0; padding: clamp(14px, 1.8vw, 24px); border-radius: var(--r-panel); background: #eceff1; }
.compare-fig figcaption, .compare-fig .q-slider-label { padding-inline: 4px; }
.compare-fig figcaption { color: #2c363c; }
.compare-fig figcaption .fig-label { color: #174a50; }
.compare-fig .q-slider-label { color: #2c363c; }
.compare { --pos: 52%; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-card); cursor: ew-resize; touch-action: pan-y; user-select: none; background: #2a2a2a; box-shadow: 0 2px 4px rgba(14,20,23,.08), 0 40px 70px -40px rgba(14,20,23,.55); }
.compare picture { display: contents; }
/* At rest the drawn tower stands in the left half and the real one in the right. */
.compare-photo { position: absolute; left: -6%; top: -4%; width: 112%; max-width: none; height: auto; filter: contrast(1.04); }
.compare-drawing { position: absolute; inset: 0; overflow: hidden; background: #eef1f3; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-drawing img { position: absolute; left: -39%; top: -8%; width: 100%; max-width: none; height: auto; }
.compare .q-handle, .compare .q-tag { z-index: 2; }
figcaption { margin-top: var(--s-3); font-size: 12.5px; line-height: 1.5; color: #5b6670; }

/* How it works */
.center { text-align: center; }
.center .sec-title { margin-inline: auto; }
.flow-mount { margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3.5vw, 56px) clamp(16px, 3vw, 48px); border-radius: var(--r-panel); background: var(--fill); }
@media (max-width: 640px) { .flow-mount { margin-inline: calc(-1 * var(--gutter) + 8px); padding-inline: 12px; border-radius: var(--r-panel); } }

/* One call: Maya's scroll story */
.chat { display: flex; flex-direction: column; gap: 6px; font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.chat .q-bubble { max-width: 88%; font-size: 15.5px; animation: none; }
.chat-reply { display: flex; gap: 8px; margin-top: 10px; align-self: flex-end; }
.chat-reply span { padding: 7px 14px; border-radius: 16px; font-size: 14px; background: #e9e9eb; color: #4a4a4e; }
.chat-reply .is-picked { background: var(--blue); color: #fff; }
.q-noticed { display: grid; gap: 2px; }
.q-noticed b { font-weight: 600; }
.illus { color: var(--muted); font-size: 13px; }

/* Who's asking */
.asks { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-7) 0 0; padding: 0; }
.ask { position: relative; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); font-size: 16px; line-height: 1.4; letter-spacing: -.005em; color: var(--ink-2); cursor: default; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s; }
.ask b { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 600; color: var(--teal-ink); }
.ask-ico { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-card); background: var(--tile-pearl-teal); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 6px -2px rgba(31,92,99,.55); opacity: 0; transform: scale(.7); transition: opacity .25s, transform .35s var(--ease-out); }
.ask-ico svg { width: 15px; height: 15px; }
.ask:hover, .ask:focus-visible { transform: translateY(-4px) scale(1.03); border-color: #cfd6da; box-shadow: 0 2px 4px rgba(14,20,23,.05), 0 18px 36px -16px rgba(14,20,23,.28); z-index: 2; }
.ask:hover .ask-ico, .ask:focus-visible .ask-ico { opacity: 1; transform: none; }
@media (max-width: 1080px) {
  .asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--s-4) / 2); }
}

/* Confluence: every persona flows into one record */
.confluence { --cf-gap: clamp(96px, 10vw, 136px); position: relative; margin-top: 0; }
.cf-lines { display: block; width: 100%; height: var(--cf-gap); overflow: visible; }
.cf-lines path { fill: none; stroke: var(--teal); stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cf-lines .cf-arrow { stroke-width: 1.25; stroke-linejoin: round; }
.cf-band { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-5); min-height: 76px; padding: 0 clamp(20px, 3vw, 36px); border-radius: 8px; color: #fff; background: linear-gradient(180deg, var(--teal-hi) 0%, var(--teal) 100%); border: 1px solid #1c565d; border-bottom-color: var(--teal-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(31,92,99,.28), 0 24px 48px -24px rgba(31,92,99,.5); }
.cf-mark { height: 20px; width: auto; fill: #fff; justify-self: start; }
.cf-record { font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; letter-spacing: -.02em; }
.cf-traits { justify-self: end; display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.cf-traits i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.7); }

/* One authored moment: lines draw in, the band settles, the network follows. */
.confluence.is-armed .cf-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.confluence.is-armed .cf-lines .cf-arrow { stroke-dashoffset: 0; opacity: 0; transition: opacity .4s; transition-delay: calc(.85s + var(--i, 0) * 70ms); }
.confluence.is-armed .cf-band { opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .7s var(--ease-out) .55s, transform .9s var(--ease-out) .55s; }
.confluence.is-armed .cf-edges path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out) 1.05s; }
.confluence.is-armed .cf-node, .confluence.is-armed .cf-you { opacity: 0; transition: opacity .8s var(--ease-out) 1.3s, transform .45s var(--ease-out), box-shadow .3s, border-color .3s; }
.confluence.is-in .cf-lines path, .confluence.is-in .cf-edges path { stroke-dashoffset: 0; }
.confluence.is-in .cf-lines .cf-arrow, .confluence.is-in .cf-node, .confluence.is-in .cf-you { opacity: 1; }
.confluence.is-in .cf-band { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .cf-band { grid-template-columns: 1fr; justify-items: center; gap: 8px; padding: 22px 20px; text-align: center; }
  .cf-mark, .cf-traits { justify-self: center; }
  .cf-traits { gap: 8px; font-size: 11px; letter-spacing: .12em; }
}
/* Panel: a warm wash that starts clear where the lines leave the cards. */
.confluence { --cf-pad: clamp(16px, 3vw, 40px); margin-inline: calc(-1 * var(--cf-pad)); padding: 0 var(--cf-pad) clamp(28px, 3.5vw, 44px); border-radius: 0 0 12px 12px; background:
  radial-gradient(60% 55% at 50% 80%, rgba(43,122,130,.06), transparent 70%),
  linear-gradient(180deg, rgba(244,246,247,0) 0, #f6f8f9 24%, #f1f4f5 100%);
  box-shadow: inset 0 -1px 0 rgba(14,20,23,.05); }
#who { padding-bottom: clamp(48px, 5vw, 80px); }

/* Network: nodes placed in % so it spreads across the full width. */
.cf-net { position: relative; aspect-ratio: 1000 / 340; }
.cf-edges-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cf-edges path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cf-edges path:first-child { stroke: var(--teal); stroke-width: 1.25; }
.cf-nodes { list-style: none; margin: 0; padding: 0; }
.cf-node, .cf-you { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; }
.cf-node { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 6px; white-space: nowrap; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; color: var(--ink-2); box-shadow: var(--shadow-1); cursor: default; transition: transform .45s var(--ease-out), box-shadow .3s, border-color .3s; }
.cf-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fill); color: #4a555e; }
.cf-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cf-node.is-ai { color: var(--teal-ink); }
.cf-node.is-ai .cf-ico { background: var(--teal-soft); color: var(--teal); }
.cf-node.is-tool { color: var(--slate); }
.cf-node.is-tool .cf-ico { background: var(--fill-2); color: var(--slate); }
.cf-node:hover, .cf-node:focus-visible { transform: translate(var(--mx), calc(var(--my) - 4px)) scale(1.06); border-color: var(--line-strong); box-shadow: 0 2px 4px rgba(14,20,23,.05), 0 14px 28px -12px rgba(14,20,23,.24); z-index: 2; }
.cf-node:focus-visible { outline-offset: 3px; border-radius: 8px; }
.cf-you { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.01em; background: radial-gradient(circle at 35% 30%, #2b7a82, var(--teal) 60%, #174a50); box-shadow: 0 0 0 7px rgba(31,92,99,.08), 0 0 0 15px rgba(31,92,99,.04), 0 12px 24px -8px rgba(31,92,99,.45); z-index: 1; }

@media (max-width: 860px) {
  .cf-net { aspect-ratio: 1000 / 470; }
  .cf-node { height: 36px; gap: 7px; padding: 0 12px 0 5px; font-size: 13.5px; }
  .cf-ico { width: 26px; height: 26px; }
  .cf-you { width: 58px; height: 58px; font-size: 15px; }
}
/* Phones: You under the band, then the network as two tidy columns. */
@media (max-width: 640px) {
  .confluence { --cf-gap: 72px; --cf-pad: 14px; border-radius: 0 0 22px 22px; }
  .cf-net { aspect-ratio: auto; display: grid; justify-items: center; gap: 20px; padding-top: 30px; }
  .cf-net::before { content: ""; position: absolute; left: 50%; top: 0; height: 30px; width: 1.25px; margin-left: -.6px; background: var(--teal); }
  .cf-edges-svg { display: none; }
  .cf-you { position: relative; left: auto; top: auto; translate: none; }
  .cf-nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; padding-top: 20px; border-top: 1px solid #e3e7ea; }
  .cf-node { position: relative; left: auto; top: auto; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-node:hover, .cf-node:focus-visible { transform: none; }
}

/* ---------- Drawing grammar shared by the page: figure labels. */
.fig-label { display: inline-block; flex: none; white-space: nowrap; margin-right: 10px; font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink); font-style: normal; }
figcaption .fig-label { vertical-align: 1px; }

/* ---------- Gather: dark teal, the record as the object. Future You and the tools are sources; strings run into it. */
.gather { margin-inline: clamp(12px, 2vw, 32px); border-radius: var(--r-panel); --g-ink: #0f3338; --g-mid: #164a51; --g-hi: #2a7079; --g-text: #eef6f6; --g-text-2: #c9dfe0; --g-muted: #acccce; --g-rule: rgba(255,255,255,.16); --g-accent: #9fdfe4; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(80px, 9vw, 136px); color: var(--g-text); background: var(--g-mid); }
.gather::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(to bottom right, rgba(255,255,255,.075) 0%, rgba(255,255,255,0) 42%),
  linear-gradient(162deg, #21636b 0%, var(--g-mid) 38%, #123d43 72%, var(--g-ink) 100%); }
.gather::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.18) 100%); }
.gather ::selection { background: var(--g-accent); color: var(--g-ink); }
.gather .sec-title { color: #fff; max-width: 17ch; }
.gather .gather-head p { color: var(--g-text-2); }
.gather-flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto auto auto; column-gap: clamp(32px, 4.5vw, 72px); margin-top: clamp(48px, 6vw, 80px); }
.gt-col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: var(--s-4); align-content: start; min-width: 0; }
.gt-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.gt-fig { z-index: 1; }
.gt-wires path { transition: stroke .25s, opacity .25s, stroke-width .25s; }
.gt-wires path.is-hot { stroke: #fff; stroke-width: 2; opacity: 1; stroke-dasharray: none; }
.gt-wires circle { transition: r .25s, fill .25s; }
.gt-wires circle.is-hot { fill: #fff; r: 4.5; }
.gt-wires path { fill: none; stroke: rgba(255,255,255,.38); stroke-width: 1; stroke-dasharray: 2 5; }
.gt-wires path.is-named { stroke: var(--g-accent); stroke-dasharray: none; stroke-width: 1.25; opacity: .9; }
.gt-wires circle { fill: var(--g-accent); }
.gather.is-armed .gt-wires path.is-named { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.gather.is-armed .gt-wires circle { opacity: 0; transition: opacity .4s; transition-delay: calc(1s + var(--i, 0) * 120ms); }
.gather.is-in .gt-wires path.is-named { stroke-dashoffset: 0; }
.gather.is-in .gt-wires circle { opacity: 1; }
.gt-fig { position: relative; margin: 0 0 var(--s-3); display: flex; flex-direction: column; height: 100%; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.055); border: 1px solid var(--g-rule); }
.gt-fig figcaption { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--g-rule); font-size: 13px; font-weight: 500; color: var(--g-text-2); }
.gt-fig figcaption .fig-label { color: var(--g-accent); }
.gt-fig figcaption svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.gt-chat-in { display: flex; flex-direction: column; gap: 6px; padding: 16px; font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.gt-chat-in .q-bubble { max-width: 94%; font-size: 13.5px; line-height: 1.4; animation: none; }
.gt-chat-in .q-them { background: rgba(255,255,255,.94); color: var(--ink); }
.gt-tool-list { list-style: none; margin: 0; padding: 4px 0; display: grid; }
.gt-tool-list li { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 16px; font-size: 14px; color: var(--g-text); cursor: default; transition: background-color .2s; outline-offset: -2px; }
.gt-tool-list li.is-hot, .gt-tool-list li:hover { background: rgba(255,255,255,.08); }
.gt-tool-list li span { opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .3s var(--ease-out); }
.gt-tool-list li.is-hot span, .gt-tool-list li:hover span, .gt-tool-list li:focus-visible span { opacity: 1; transform: none; }
.gt-hint { display: block; margin: auto 0 0; padding: 10px 16px 12px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: var(--g-muted); }
.gt-chat.is-hot { background: rgba(255,255,255,.1); }
.gt-rec-row { transition: background-color .2s, box-shadow .2s; }
.gt-rec-row.is-hot { background: var(--teal-soft); }
.gt-rec-row.is-hot::before { background: var(--teal); }
.gt-tool-list li + li { border-top: 1px solid rgba(255,255,255,.1); }
.gt-tool-list img { width: 18px; height: 18px; display: block; }
.gt-tool-list b { font-weight: 600; white-space: nowrap; }
.gt-tool-list span { font-size: 13px; color: var(--g-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The record is the one solid object: white, a shadow, rust marks on its kept rows (the light accent). */
.gt-record { background: var(--surface); border-color: transparent; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 30px 60px -30px rgba(0,0,0,.6); }
.gt-record figcaption { color: var(--ink-2); border-bottom-color: var(--line); }
.gt-record figcaption .fig-label { color: var(--rust); }
.gt-rec-rows { display: grid; padding: 4px 0; }
.gt-rec-row { position: relative; display: grid; gap: 4px; padding: 14px 16px 14px 30px; }
.gt-rec-row + .gt-rec-row { border-top: 1px solid var(--line); }
.gt-rec-row::before { content: ""; position: absolute; left: 16px; top: 21px; width: 7px; height: 1.5px; background: var(--line-strong); }
.gt-rec-row small { font-weight: 600; color: var(--muted); }
.gt-rec-row p { font-size: 16.5px; line-height: 1.4; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.gt-rec-row.is-out { background: #f0f7f8; }
.gt-rec-row.is-out::before { background: var(--teal); }
.gt-rec-row.is-out small { color: var(--teal-ink); }
.gt-rec-row.is-out p { text-decoration: none; }
.gt-rec-row.is-out p b { font-weight: 600; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.gt-col h3 { position: relative; padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.45); font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.022em; line-height: 1.08; color: #fff; }
.gt-col h3::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--g-accent); box-shadow: 0 0 0 3px var(--g-mid); }
.gt-def { font-size: 17px; line-height: 1.5; color: var(--g-text-2); max-width: 34ch; }
.gt-more { border-top: 1px solid var(--g-rule); border-bottom: 1px solid var(--g-rule); }
.gt-more summary { position: relative; padding: 12px 32px 12px 0; font-size: 14px; font-weight: 600; color: var(--g-accent); cursor: pointer; list-style: none; }
.gt-more summary::-webkit-details-marker { display: none; }
.gt-more summary i { position: absolute; right: 2px; top: 50%; width: 12px; height: 1.5px; background: var(--g-accent); }
.gt-more summary i::after { content: ""; position: absolute; inset: 0; background: var(--g-accent); transform: rotate(90deg); transition: transform .3s var(--ease-out); }
.gt-more[open] summary i::after { transform: rotate(0); }
.gt-more .gt-facts { border-top: 0; margin-bottom: 4px; }
.gt-more .gt-facts li:last-child { border-bottom: 0; }
.gt-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--g-rule); }
.gt-facts li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--g-rule); font-size: 15.5px; line-height: 1.45; color: var(--g-text); }
.gt-facts li::before { content: ""; position: absolute; left: 1px; top: 20px; width: 7px; height: 1.5px; background: var(--g-accent); }
.gt-link { display: inline-flex; align-items: center; gap: 6px; align-self: start; font-weight: 600; font-size: 15.5px; color: #fff; text-decoration: none; border-bottom: 1px solid var(--g-accent); padding-bottom: 2px; }
.gt-link:hover { color: var(--g-accent); }
@media (max-width: 960px) {
  .gather-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .gather-head p { padding-bottom: 0; }
  .gather-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s-8); }
  .gt-col { grid-row: auto; grid-template-rows: none; }
  .gt-fig { height: auto; }
  .gt-wires { display: none; }
  .gt-def { max-width: none; }
}
@media (max-width: 960px) { .gt-tool-list li span { opacity: 1; transform: none; } .gt-hint { display: none; } }
@media (max-width: 640px) { .gather { padding-block: 64px 72px; } .gt-col h3 { font-size: 26px; } .gt-tool-list li { grid-template-columns: 18px minmax(0, 1fr); row-gap: 2px; } .gt-tool-list span { grid-column: 2; white-space: normal; } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.faq-grid > .sec-title { position: sticky; top: 112px; }

@media (max-width: 960px) {
  .hero .wrap, .bridge-grid, .privacy-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-grid > .sec-title { position: static; }
}
@media (max-width: 640px) {
  :root { --section: 72px; }
  .hero .wrap { padding-block: 32px 64px; gap: 48px; }
  h1 { font-size: clamp(40px, 11.4vw, 52px); }
  .ps-row { flex-direction: column; }
  .ps-row .btn { width: 100%; }
  .phone-signup { margin-top: var(--s-5); }
  .hero-value { margin-top: var(--s-5); }
  .cta-row { margin-top: var(--s-4); justify-content: center; gap: var(--s-3) var(--s-4); }
  .assure { margin-top: var(--s-5); }
  .hero-lede { margin-top: var(--s-4); }
  .hero-phone .q-phone { width: min(100%, 358px); height: 776px; }
  #demo { min-height: 776px; }
  .q-tag { bottom: 10px; padding: 5px 8px; font-size: 11px; letter-spacing: .06em; }
  .q-tag-l { left: 10px; } .q-tag-r { right: 10px; }
  .bridge-copy > p { font-size: 17px; }
  .q-privacy li { font-size: 17px; }
}
@media (max-width: 520px) { .asks { grid-template-columns: minmax(0, 1fr); } .ask:last-child:nth-child(odd) { width: auto; justify-self: stretch; } }

/* ---------- Doors: two equal ways in (by text, on the web). Same band every time. */
.only-phone { display: none !important; }
@media (max-width: 960px) { .only-phone { display: inline-flex !important; } .not-phone { display: none !important; } }
.doors-title { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.022em; line-height: 1.1; text-align: center; }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); max-width: 820px; margin: var(--s-6) auto 0; }
.door { display: grid; justify-items: start; align-content: start; gap: var(--s-3); padding: var(--s-4) 0 0; border-top: 1px solid var(--ink); text-align: left; }
.door .btn { width: 100%; }
.door p { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.door-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.door-text .door-label { color: var(--teal); }
.door-web .door-label { color: var(--ink); }
@media (max-width: 640px) { .doors { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Text links. */
.text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-5); font-weight: 600; font-size: 15.5px; color: var(--teal-ink); text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------- How it works: one statement, then the tools, then one call. */
.sec-head, .how-head, .gather-head, .one-call-head, .who-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 80px); align-items: end; }
.how-head p, .gather-head p, .one-call-head p, .sec-lede { margin: 0; max-width: 46ch; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.6; color: var(--ink-2); padding-bottom: .3em; }
.how-head p b { font-weight: 600; color: var(--ink); }
@media (max-width: 960px) { .sec-head, .how-head, .gather-head, .one-call-head, .who-head { grid-template-columns: minmax(0, 1fr); align-items: start; } .how-head p, .gather-head p, .one-call-head p, .sec-lede { padding-bottom: 0; } }
.how .sec-title { max-width: 14ch; }

.one-call { position: relative; isolation: isolate; margin-top: clamp(72px, 9vw, 128px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--line); overflow: clip; }
/* The faint 1867 drawing behind the band ties One call back to the bridge. */
.one-call::before { content: ""; position: absolute; z-index: -1; top: 0; right: -4%; width: min(56%, 720px); height: 100%; background: url(images/roebling-tower-1867.webp) center top / cover no-repeat; opacity: .07; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 95%); mask-image: linear-gradient(180deg, #000 40%, transparent 95%); pointer-events: none; }
.one-call-head { max-width: none; margin-inline: 0; text-align: left; }
.one-call-head h3 { font-size: clamp(36px, 4.8vw, 68px); letter-spacing: -.022em; line-height: 1.02; max-width: 14ch; }

/* Maya's scroll story: chapters on the left, the matching scene in a sticky stage on the right.
   (overflow: clip on .one-call, not hidden, so the stage can stick.) */
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 104px); margin-top: var(--s-6); }
.chapter { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); padding-block: var(--s-5); opacity: .3; transition: opacity .5s var(--ease-out); }
.chapter:first-child { min-height: 52vh; justify-content: flex-start; padding-top: var(--s-8); }
.chapter.is-active { opacity: 1; }
.when { font-size: 14px; font-weight: 600; color: var(--teal-ink); }
.chapter h4 { margin: 0; font-size: clamp(28px, 3vw, 42px); font-weight: 600; letter-spacing: -.022em; line-height: 1.12; max-width: 20ch; }
.chapter > p { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.chapter > .scene { display: none; }
.stage { position: sticky; top: 104px; align-self: start; height: calc(100vh - 144px); min-height: 520px; max-height: 780px; border-radius: var(--r-panel); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); overflow: hidden; }
.stage .scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); padding: clamp(24px, 3.2vw, 44px); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.stage .scene.is-active { opacity: 1; transform: none; }
.stage .q-rec, .chapter .q-rec { width: 100%; }
.versus { display: grid; gap: var(--s-3); }
.versus-before { padding: 16px 20px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); }
.versus-before small { font-weight: 600; }
.versus-before p { font-size: 18px; color: #4a555e; }
.one-call .illus { margin-top: var(--s-5); }
.doors-inline { margin-top: clamp(48px, 6vw, 80px); }
@media (max-width: 960px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .stage { display: none; }
  .chapter, .chapter:first-child { min-height: 0; opacity: 1; padding-block: var(--s-6); justify-content: flex-start; }
  .chapter + .chapter { border-top: 1px solid var(--line); }
  .chapter > .scene { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
}
@media (max-width: 640px) { .chapter > p { font-size: 17px; } .one-call::before { width: 100%; right: 0; } }

/* ---------- Who it's for */
.cf-traits { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff; }


/* ---------- FAQ end */
.faq-end { margin-top: var(--s-6); font-size: 17px; color: var(--ink-2); }
.faq-end a { color: var(--teal-ink); font-weight: 600; }

/* ---------- Closing: the same two doors, on teal. */
.closing .doors { margin-top: var(--s-6); }
.closing .door { border-top-color: rgba(255,255,255,.55); color: #fff; }
.closing .door-label, .closing .door p { color: #dcedef; }
.closing .btn-chat { border-color: rgba(255,255,255,.25); }
.closing .btn-light, .closing .btn-primary { border-color: transparent; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(4,18,20,.3), 0 10px 24px -12px rgba(4,18,20,.55); }
.closing p { margin: var(--s-5) 0 0; font-size: 16px; }
.closing .door p { margin: 0; font-size: 14.5px; }

/* ---------- Footer */
.site-foot .wrap { align-items: flex-start; padding-block: clamp(56px, 6vw, 88px) var(--s-6); }
.foot-brand { display: grid; gap: var(--s-3); max-width: 560px; min-width: 0; flex: 1 1 320px; }
.foot-doors { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.foot-brand .foot-line { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; color: #fff; max-width: 18ch; }
.foot-doors { margin-top: var(--s-3); }
.foot-doors a { color: #d5dbdf; font-weight: 500; }
.foot-doors a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
/* Flex (not a fixed-column grid) so the three columns wrap onto a second row rather than ever
   clipping at the viewport edge if the window is narrow or zoomed (Dan, 9 Nov). */
.site-foot nav.foot-cols { display: flex; flex-wrap: wrap; gap: var(--s-7); max-width: 100%; flex: 0 1 auto; min-width: 0; }
.foot-cols div { display: grid; align-content: start; gap: var(--s-2); min-width: 0; }
.foot-cols b { font-size: 13px; font-weight: 600; color: #fff; }
.foot-credit { flex-basis: 100%; padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.14); color: #8a949c; }
@media (max-width: 640px) { .site-foot nav.foot-cols { gap: var(--s-5) var(--s-7); } }

/* ---------- The one way in: a bar that starts in the hero and follows the visitor. Click it for two paths. */
.ask-home { max-width: 660px; margin-top: clamp(40px, 4.5vw, 64px); }
.ask-bar { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 8px 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-panel); background: #fff; color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(14,20,23,.06), 0 14px 32px -18px rgba(14,20,23,.3); transition: border-color .2s, box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
.ask-bar:hover { border-color: #cfd6da; box-shadow: 0 1px 2px rgba(14,20,23,.06), 0 18px 40px -18px rgba(14,20,23,.35); }
.ask-bar:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--r-panel); }
.ask-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-card); background: var(--tile-pearl-teal); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 6px -2px rgba(31,92,99,.55); }
.ask-mark svg { width: 22px; height: 22px; fill: currentColor; }
.ask-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4em; font-size: 17px; line-height: 1.3; }
.ask-lead { font-weight: 600; white-space: nowrap; }
.ask-cycle { position: relative; display: inline-block; color: var(--ink); font-size: 17px; font-weight: 400; }
.ask-cycle { opacity: 1; transition: opacity .25s var(--ease-out), transform .3s var(--ease-out); }
.ask-cycle.is-out { opacity: 0; transform: translateY(-6px); }
.ask-cycle.is-in { opacity: 1; transform: none; }
@keyframes ask-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes ask-in { from { opacity: 0; transform: translateY(8px); } }
.ask-go { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 48px; padding: 0 20px; border-radius: var(--r-btn); font-weight: 500; font-size: 15px; white-space: nowrap; transition: background-color .12s, box-shadow .15s; }
@media (hover: hover) { .ask-bar:hover .ask-go { background: linear-gradient(180deg, var(--teal), var(--teal-ink)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(31,92,99,.3), 0 6px 16px -4px rgba(31,92,99,.38); } .ask-bar:hover .ask-go::before { background-position: 0 0, 0 0; transition: background-position 1.1s var(--ease-out); } }
.ask-bar:hover .ask-go .q-ico { transform: translateX(3px); }
.ask-go .q-ico { transition: transform .25s var(--ease-out); }
.ask-note { margin-top: var(--s-3); font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 48ch; }
/* Docked: pinned to the bottom centre once the hero bar has scrolled away. */
.ask-dock { position: fixed; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; margin-inline: auto; width: min(680px, calc(100% - 32px)); transform: translateY(14px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out), transform .45s var(--ease-out); will-change: transform, opacity; }
.ask-dock.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ask-dock .ask-bar { box-shadow: 0 1px 2px rgba(14,20,23,.1), 0 24px 56px -20px rgba(14,20,23,.45); }
body.has-dock { padding-bottom: 108px; }
@media (max-width: 640px) {
  .ask-bar { min-height: 56px; padding: 6px 6px 6px 8px; gap: 8px; }
  .ask-mark { width: 38px; height: 38px; }
  .ask-mark svg { width: 19px; height: 19px; }
  .ask-text { font-size: 15px; }
  .ask-cycle { font-size: 15.5px; }
  .ask-go { min-height: 42px; padding: 0 14px; font-size: 14px; }
  .ask-go span, .ask-dock .ask-cycle { display: none; }
  .ask-dock .ask-text { font-size: 16px; }
  body.has-dock { padding-bottom: 96px; }
}
@media (max-width: 420px) { .ask-home .ask-text, .rb-bar .ask-text { flex-direction: column; align-items: flex-start; gap: 0; } .ask-home .ask-cycle, .rb-bar .ask-cycle { font-size: 14.5px; line-height: 1.25; } }

/* ---------- The modal (v5, 9 Nov). Cool and plain with depth: a white dialog, white option rows
   with a hairline and soft elevation, the site's own teal (the .ask-mark gradient #2B7A82 → --teal,
   hover --teal-ink), Geist inside, a pearl sheen on the primary, the hovered row and the icon tiles.
   One button system: .qm-btn-primary (shaded teal) · .qm-btn-secondary (shaded white) · .qm-link.
   40px controls on desktop, 46px on phones, 6px radius, weight 500, sentence case, no arrows.
   The page behind keeps its own type and colours; nothing warm reaches the dialog. */
.q-modal {
  --qm-pad: 24px; --qm-h: 40px;
  /* Promoted to site-wide tokens in base.css (v5 carried across the site); same values. */
  --qm-ink: var(--ink); --qm-2: var(--muted); --qm-3: var(--ink-3);
  --qm-line: var(--line); --qm-line-2: var(--line-strong); --qm-fill: var(--fill); --qm-fill-2: var(--fill-2);
  /* The site's teal, exactly: --teal, the .ask-mark / FY avatar highlight, --teal-ink, --g-ink, --teal-soft. */
  --qm-teal: var(--teal, #1f5c63); --qm-teal-hi: var(--teal-hi); --qm-teal-h: var(--teal-ink, #174a50); --qm-teal-a: #0f3338; --qm-teal-tint: var(--teal-soft, #e3f4f6);
  --qm-lift: var(--lift-1);
  --qm-lift-2: var(--lift-2);
  /* Pearl: very low-alpha white → pale aqua → pale lilac, laid over with soft-light. */
  --qm-pearl: var(--pearl);
  --qm-font: var(--font);
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--s-5);
  background: rgba(14, 20, 23, .4); animation: qm-fade .18s ease-out;
  font-family: var(--qm-font); color: var(--qm-ink); caret-color: var(--qm-teal);
  font-feature-settings: "ss01" 0; -webkit-font-smoothing: antialiased;
}
.q-modal ::selection { background: var(--qm-teal-tint); color: var(--qm-ink); }
.q-modal[hidden] { display: none; }
@keyframes qm-fade { from { opacity: 0; } }
.q-modal-card { position: relative; display: flex; flex-direction: column; width: min(100%, 440px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; background: #fff; color: var(--qm-ink); border-radius: 12px; box-shadow: 0 0 0 1px rgba(14, 20, 23, .05), 0 1px 2px rgba(14, 20, 23, .04), 0 4px 8px -2px rgba(14, 20, 23, .06), 0 16px 32px -8px rgba(14, 20, 23, .12), 0 40px 80px -24px rgba(14, 20, 23, .24); animation: qm-up .24s var(--ease-out); }
@keyframes qm-up { from { opacity: 0; transform: translateY(6px); } }
.qm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--qm-pad); animation: qm-step .18s ease-out; }
@keyframes qm-step { from { opacity: 0; } }

/* Close: a quiet 36px target, top right, level with the title. */
.q-modal-close { position: absolute; z-index: 2; top: 18px; right: 18px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--qm-2); transition: background-color .12s, color .12s; }
.q-modal-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.q-modal-close:active { background: var(--qm-fill-2); }

/* Header: one title, one secondary line. The title takes programmatic focus for screen readers;
   it is not a control, so it never shows a ring. Real controls get a 2px teal ring. */
.qm-head { padding-right: 40px; }
.qm-head h3 { font-family: var(--qm-font); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--qm-ink); text-wrap: balance; }
.qm-head h3::before { display: none; }
.qm-lead { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--qm-2); text-wrap: pretty; }
.qm-body h3:focus, .qm-body h3:focus-visible, .q-modal [tabindex="-1"]:focus { outline: none; box-shadow: none; }
.q-modal :is(.qm-btn, .qm-link, .qm-row, .q-modal-close, .qm-more summary, a):focus-visible { outline: 2px solid var(--qm-teal); outline-offset: 2px; border-radius: 6px; }
.q-modal .qm-row:focus-visible { border-radius: 8px; }

/* Rows: the whole row is the button. White with one cool-grey hairline, 8px radius, 8px apart. */
.qm-rows { display: grid; gap: 8px; margin-top: 20px; }
.qm-row { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 14px; border: 1px solid var(--qm-line); border-radius: 8px; background: #fff; box-shadow: var(--qm-lift); font-family: var(--qm-font); text-align: left; transition: border-color .15s, background-color .15s, box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.qm-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--qm-pearl); background-size: 260% 100%; background-position: 100% 0; opacity: 0; mix-blend-mode: soft-light; pointer-events: none; transition: opacity .25s, background-position 1.1s var(--ease-out); }
.qm-row:active { transform: translateY(0); background: var(--qm-fill); border-color: var(--qm-line-2); box-shadow: 0 1px 1px rgba(14, 20, 23, .05); }
.qm-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; }
.qm-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--qm-2);
  background: radial-gradient(120% 90% at 25% 15%, rgba(205, 240, 238, .75), rgba(205, 240, 238, 0) 55%), radial-gradient(110% 90% at 85% 95%, rgba(226, 218, 248, .7), rgba(226, 218, 248, 0) 55%), linear-gradient(180deg, #fbfcfc, #eceff1);
  box-shadow: inset 0 0 0 1px rgba(14, 20, 23, .06), inset 0 1px 0 #fff, 0 1px 2px rgba(14, 20, 23, .06); }
.qm-mark svg { width: 18px; height: 18px; fill: currentColor; }
.qm-mark.is-fy { color: #fff; background: radial-gradient(110% 80% at 25% 10%, rgba(200, 245, 242, .35), rgba(200, 245, 242, 0) 55%), radial-gradient(100% 80% at 90% 100%, rgba(215, 205, 250, .22), rgba(215, 205, 250, 0) 60%), linear-gradient(180deg, var(--qm-teal-hi), var(--qm-teal)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 2px 6px -2px rgba(31, 92, 99, .55); }
.qm-mark.is-fy svg { width: 16px; height: 16px; }
.qm-mark.is-rec svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qm-row-t { min-width: 0; }
.qm-row-t b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; color: var(--qm-ink); }
.qm-row-d { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--qm-2); }
.qm-row[data-soon] .qm-mark { color: var(--qm-3); }
/* Five short answers: one bordered list, hairline dividers. */
.qm-rows.is-compact { gap: 0; border: 1px solid var(--qm-line); border-radius: 8px; overflow: hidden; box-shadow: var(--qm-lift); }
.qm-rows.is-compact .qm-row { min-height: 48px; padding: 0 14px; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.qm-rows.is-compact .qm-row + .qm-row { border-top: 1px solid var(--qm-line); }
.qm-rows.is-compact .qm-row:focus-visible { outline-offset: -2px; border-radius: 0; }
.qm-rows.is-compact .qm-row-t b { font-size: 14.5px; font-weight: 400; }
.qm-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; background: #eef1f3; color: var(--qm-2); font-size: 11.5px; font-weight: 500; letter-spacing: .01em; }

/* Sample: two small bubbles, no frame. You in teal, Future You in light grey. */
.qm-chat { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; font-family: var(--qm-font); }
.qm-chat .q-bubble { max-width: 80%; padding: 7px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; animation: none; box-shadow: none; }
.qm-chat .q-me { align-self: flex-end; background: linear-gradient(180deg, #236870, var(--qm-teal)); color: #fff; border-bottom-right-radius: 4px; }
.qm-chat .q-them { align-self: flex-start; background: #f1f3f5; color: var(--qm-ink); border-bottom-left-radius: 4px; }

/* The button system. */
.qm-btn { transition: background-color .12s, border-color .12s, color .12s, box-shadow .15s, transform .12s; display: inline-flex; align-items: center; justify-content: center; min-height: var(--qm-h); padding: 0 14px; border: 1px solid transparent; border-radius: 6px; font: 500 14px/1 var(--qm-font); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; }
.qm-btn-primary { position: relative; isolation: isolate; overflow: hidden; color: #fff; border-color: #1c565d; border-bottom-color: var(--qm-teal-h);
  background: linear-gradient(180deg, var(--qm-teal-hi), var(--qm-teal));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(31, 92, 99, .28), 0 4px 12px -2px rgba(31, 92, 99, .3); text-shadow: 0 -1px 0 rgba(15, 51, 56, .25); }
.qm-btn-primary::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: soft-light;
  background: var(--qm-pearl), radial-gradient(90% 140% at 20% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
  background-size: 260% 100%, 100% 100%; background-position: 100% 0, 0 0; }
/* The sheen sweeps only on the way in (over the darker hover teal), and snaps back on leave, so it
   never crosses the text on the lighter resting teal: white text stays ≥ 4.5:1 throughout. */
.qm-btn-primary:active { background: linear-gradient(180deg, var(--qm-teal-h), var(--qm-teal-h)); box-shadow: inset 0 1px 2px rgba(15, 51, 56, .45), 0 1px 1px rgba(31, 92, 99, .2); transform: translateY(1px); }
.qm-btn-primary[aria-busy="true"] { opacity: .75; cursor: progress; }
.qm-btn-secondary { background: linear-gradient(180deg, #fff, #f3f5f6); border-color: var(--qm-line-2); border-bottom-color: #c9d0d5; color: var(--qm-ink); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(14, 20, 23, .06); }
.qm-btn-secondary:active { background: var(--qm-fill-2); box-shadow: inset 0 1px 2px rgba(14, 20, 23, .1); transform: translateY(1px); }
.qm-link { display: inline-flex; align-items: center; min-height: var(--qm-h); padding: 0 2px; border: 0; background: none; font: 500 14px/1 var(--qm-font); color: var(--qm-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; text-decoration-thickness: 1px; cursor: pointer; transition: color .12s, text-decoration-color .12s; }
.qm-link:active { color: var(--qm-ink); }

/* Footer: tertiary link left; secondary then primary on the right. */
.qm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.qm-foot-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Texting not open: no field, one honest line on a light grey note. */
.qm-note { margin-top: 20px; padding: 12px 14px; border-radius: 8px; background: var(--qm-fill); font-size: 13.5px; line-height: 1.5; color: var(--qm-ink); }
.qm-note span { display: block; color: var(--qm-2); }

/* Phone form (live only): one clean field on light grey, one line under it. */
.qm-body .phone-signup { max-width: none; margin-top: 20px; }
.qm-body .ps-label { display: block; margin-bottom: 6px; font: 500 13px/1.3 var(--qm-font); color: var(--qm-ink); }
.qm-body .ps-field { min-height: 44px; border: 1px solid transparent; border-radius: 6px; background: var(--qm-fill); box-shadow: none; }
.qm-body .ps-field:focus-within { border-color: var(--qm-teal); background: #fff; box-shadow: 0 0 0 3px var(--qm-teal-tint); }
.qm-body .ps-field select { padding: 0 26px 0 12px; border-right-color: var(--qm-line-2); border-radius: 6px 0 0 6px; font: 500 14px/1 var(--qm-font); color: var(--qm-ink); }
.qm-body .ps-field select:focus-visible { box-shadow: inset 0 0 0 2px var(--qm-teal); }
.qm-body .ps-field input { padding: 0 12px; font: 400 16px/1 var(--qm-font); color: var(--qm-ink); }
.qm-body .ps-field input::placeholder { color: var(--qm-3); }
.qm-body .ps-status:not(:empty) { margin-top: 8px; padding: 0; background: none; font-size: 13px; font-weight: 500; }
.qm-body .ps-status.is-ok { color: var(--qm-teal); }

/* Legal: 12px, secondary grey, under the actions. The first-message text expands inline from a link. */
.qm-legal { margin-top: 16px; max-width: none; font-size: 12px; line-height: 1.5; color: var(--qm-2); }
.qm-legal a { color: var(--qm-ink); }
.qm-more { margin-top: 8px; }
.qm-foot + .qm-more { margin-top: 12px; }
.qm-more summary { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 500; color: var(--qm-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .25em; cursor: pointer; list-style: none; }
.qm-more summary::-webkit-details-marker { display: none; }
.qm-more .qm-legal { margin-top: 6px; }
.qm-more p { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--qm-2); }

/* Hover only where a pointer hovers, so a tap never leaves a row looking pressed. */
@media (hover: hover) {
  .q-modal-close:hover { background: var(--qm-fill); color: var(--qm-ink); }
  .qm-row:hover { border-color: #cfd6da; transform: translateY(-1px); box-shadow: var(--qm-lift-2); }
  .qm-row:hover::before { opacity: 1; background-position: 0 0; }
  .qm-row:active { transform: translateY(0); box-shadow: 0 1px 1px rgba(14, 20, 23, .05); }
  .qm-rows.is-compact .qm-row:hover { background: #fafbfb; box-shadow: none; transform: none; }
  .qm-btn-primary:hover { background: linear-gradient(180deg, var(--qm-teal), var(--qm-teal-h)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(31, 92, 99, .3), 0 6px 16px -4px rgba(31, 92, 99, .38); }
  .qm-btn-primary:hover::before { background-position: 0 0, 0 0; transition: background-position 1.1s var(--ease-out); }
  .qm-btn-primary:active { background: linear-gradient(180deg, var(--qm-teal-h), var(--qm-teal-h)); }
  .qm-btn-secondary:hover { background: linear-gradient(180deg, #fff, #eef1f3); border-color: #c9d0d5; box-shadow: inset 0 1px 0 #fff, 0 2px 6px -2px rgba(14, 20, 23, .12); }
  .qm-link:hover { color: var(--qm-ink); text-decoration-color: currentColor; }
  .qm-more summary:hover { color: var(--qm-ink); text-decoration-color: currentColor; }
}
body.has-modal { overflow: hidden; }
@media (max-width: 640px) {
  .q-modal { --qm-h: 46px; --qm-pad: 20px; padding: 0; align-items: end; }
  .q-modal-card { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom); animation-name: qm-sheet; }
  @keyframes qm-sheet { from { transform: translateY(20px); opacity: 0; } }
  .qm-body { padding-top: 24px; }
  .q-modal-close { top: 14px; right: 12px; width: 44px; height: 44px; }
  .qm-head { padding-right: 44px; }
  .qm-btn { font-size: 15px; }
  .qm-foot { flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  .qm-foot-r { flex-direction: column-reverse; align-items: stretch; gap: 8px; margin-left: 0; }
  .qm-foot .qm-btn-primary { width: 100%; }
  .qm-link { justify-content: center; min-height: 44px; }
  .qm-foot > .qm-link:only-child { align-self: center; }
  .qm-more { text-align: center; }
  .qm-more summary { min-height: 44px; }
  .qm-more p, .qm-more .qm-legal { text-align: left; }
  .qm-rows.is-compact .qm-row { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .q-modal, .q-modal-card, .qm-body { animation: none; } .qm-row, .qm-btn, .qm-row::before, .qm-btn-primary::before { transition: none; } .qm-row:hover, .qm-btn:active { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ask-cycle.is-out, .ask-cycle.is-in { animation: none; } }

/* ---------- The resource band: the line Dan likes, at full strength, with the one way in inside it. */
.resource-band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(88px, 10vw, 150px); color: #fff; background: var(--g-ink, #0f3338); text-align: center; }
.resource-band h2 { margin-inline: auto; max-width: 16ch; font-size: clamp(38px, 5.4vw, 76px); line-height: .98; letter-spacing: -.022em; color: #fff; }
.rb-sub { margin: var(--s-5) auto 0; max-width: 34ch; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; font-weight: 400; color: #cfe3e4; }
.rb-mark { display: grid; place-items: center; width: clamp(72px, 7vw, 104px); height: clamp(72px, 7vw, 104px); margin: 0 auto clamp(24px, 3vw, 40px); border-radius: 28px; background: var(--tile-pearl-teal); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 1px 2px rgba(15,50,54,.3), 0 10px 24px -10px rgba(31,92,99,.7); }
.rb-mark svg { width: 52%; height: 52%; fill: currentColor; }
.rb-bar { max-width: 680px; margin: clamp(40px, 5vw, 64px) auto 0; }
.rb-bar .ask-bar { border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 30px 60px -28px rgba(0,0,0,.6); }
.rb-bar .ask-note { color: #a9c9cc; margin-inline: auto; text-align: center; }
@media (max-width: 640px) { .resource-band { padding-block: 72px 80px; } }

/* ---------- Suggestion chips under the bar (the prompt-box pattern). Each opens Future You with that prompt. */
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-4); }
.ask-chip { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); border-bottom-color: var(--line-edge); background: linear-gradient(180deg, #fff, #f3f5f6); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(14,20,23,.06); font: 500 14px/1 var(--body); color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s, box-shadow .2s, transform .25s var(--ease-out); }
.ask-chip:hover { border-color: var(--line-edge); color: var(--ink); background: linear-gradient(180deg, #fff, #eef1f3); box-shadow: inset 0 1px 0 #fff, 0 2px 6px -2px rgba(14,20,23,.12); transform: translateY(-1px); }
.ask-chip:active { background: var(--fill-2); box-shadow: inset 0 1px 2px rgba(14,20,23,.1); transform: none; }
.ask-note { margin-top: var(--s-4); }

/* ---------- One scroll motion: titles, figures and cards rise in once. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.is-in.d1 { transition-delay: .08s; } .reveal.is-in.d2 { transition-delay: .16s; } .reveal.is-in.d3 { transition-delay: .24s; } .reveal.is-in.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }


/* ---------- Maya's stage: readable without zooming (Dan). */
.stage .scene { padding: clamp(28px, 3.5vw, 56px); gap: var(--s-5); }
.stage .chat .q-bubble { font-size: 18px; line-height: 1.38; max-width: 92%; padding: 11px 16px; border-radius: 20px; }
.stage .chat-reply span { font-size: 16px; padding: 9px 16px; }
.stage .q-card { font-size: 17px; padding: 24px; gap: 14px; }
.stage .q-card header b { font-size: 17px; }
.stage .q-msg p { font-size: 18px; }
.stage .q-private { font-size: 16.5px; padding: 16px 18px; }
.stage .q-rec header { font-size: 17px; }
.stage .q-row p { font-size: 21px; }
.stage .q-row small, .stage .q-card small, .stage .q-muted { font-size: 14px; }
.stage .q-noticed { font-size: 16.5px; padding: 18px 20px; }
.stage .versus-before p, .stage .q-card-profile .q-serif { font-size: 20px; }
.stage .q-card-profile b { font-size: 18px; }
@media (max-width: 960px) { .chapter > .scene .chat .q-bubble { font-size: 16.5px; } .chapter > .scene .q-row p { font-size: 19px; } }

/* ---------- Where your judgment goes today: four short truths, right above the line that answers them. */
.leaks { list-style: none; margin: 0 0 clamp(56px, 6vw, 88px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.leaks li { display: grid; align-content: start; gap: 10px; padding: 28px clamp(16px, 2vw, 32px) 28px 0; border-right: 1px solid var(--line); }
.leaks li + li { padding-left: clamp(16px, 2vw, 32px); }
.leaks li:last-child { border-right: 0; padding-right: 0; }
.leak-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-ink); margin-bottom: 6px; }
.leak-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.leaks b { font-size: clamp(19px, 1.5vw, 23px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.leaks li > span:last-child { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 30ch; }
@media (max-width: 1080px) { .leaks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .leaks li { padding: 22px 20px 22px 0; } .leaks li:nth-child(2n) { border-right: 0; padding-right: 0; padding-left: 20px; } .leaks li:nth-child(2n+1) { padding-left: 0; } .leaks li:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 600px) { .leaks { grid-template-columns: minmax(0, 1fr); } .leaks li, .leaks li:nth-child(2n) { border-right: 0; padding: 20px 0; padding-left: 0; } .leaks li + li { border-top: 1px solid var(--line); } .leaks li:nth-child(-n+2) { border-bottom: 0; } }
/* Slider tags carry the section's point: the result looks the same; the thinking is what differs. */
.q-tag { display: grid; gap: 2px; line-height: 1.2; }
.q-tag-sub { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--teal-ink); }
@media (max-width: 640px) { .q-tag-sub { display: none; } }

/* ---------- Bridge hand-off: the question, then strings drawn down into the four places judgment goes. */
.bridge .wrap.bridge-grid { padding-bottom: 0; }
.bridge-ask { margin-top: clamp(64px, 7vw, 112px); text-align: center; }
.bridge-q { margin: 0 auto; max-width: 20ch; font-size: clamp(32px, 4vw, 60px); font-weight: 600; line-height: 1.05; letter-spacing: -.022em; color: var(--teal); text-wrap: balance; }
.leaks-band { position: relative; margin-top: clamp(28px, 3vw, 44px); padding-block: clamp(96px, 9vw, 128px) clamp(40px, 4vw, 56px); background: linear-gradient(180deg, rgba(244,246,247,0) 0%, #f4f6f7 22%, #eef1f3 100%); }
.leaks-band .wrap { position: relative; }
.leaks-wires { position: absolute; left: 0; right: 0; top: calc(-1 * clamp(96px, 9vw, 128px)); width: 100%; height: clamp(96px, 9vw, 128px); overflow: visible; pointer-events: none; }
.leaks-wires path { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 1); }
.leaks-wires circle { fill: var(--teal); opacity: var(--dot, 0); transition: opacity .3s; }
.leaks-band .leaks { margin-bottom: 0; border-top-color: #d5dbdf; border-bottom: 0; }
.leaks-band .leaks li { border-right-color: #d5dbdf; }
.leaks-band .leaks li:nth-child(-n+2) { border-bottom-color: #d5dbdf; }
.bridge { padding-bottom: 0; }
/* 4. More room between the strip and the answer. */
.how .how-head { padding-top: clamp(32px, 5vw, 80px); }
@media (prefers-reduced-motion: reduce) { .leaks-wires path { stroke-dashoffset: 0; } .leaks-wires circle { opacity: 1; } }
@media (max-width: 960px) { .leaks-wires { display: none; } .leaks-band { padding-top: clamp(48px, 6vw, 72px); } }

/* ---------- 5. End band: bigger Q, one-line header and subline, even spacing. */
.rb-mark { width: clamp(96px, 9vw, 140px); height: clamp(96px, 9vw, 140px); border-radius: 32px; margin-bottom: clamp(36px, 4vw, 56px); }
.resource-band h2 { max-width: none; font-size: clamp(36px, 4.6vw, 66px); line-height: 1.02; }
.rb-sub { margin-top: clamp(20px, 2.2vw, 30px); max-width: none; font-size: clamp(19px, 2vw, 29px); line-height: 1.35; }
.rb-bar { margin-top: clamp(44px, 5vw, 72px); }
.rb-bar .ask-text { gap: 0 .55em; }
@media (min-width: 1200px) { .resource-band h2, .rb-sub { white-space: nowrap; } }

/* ---------- 6. Closing: headline, button, then the line, with room between them. */
.closing .btn { margin-top: clamp(32px, 3.5vw, 48px); min-height: 56px; padding: 0 28px; font-size: 17px; }
.closing p { margin: clamp(24px, 2.5vw, 32px) auto 0; max-width: 60ch; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.55; color: #dcedef; }

/* ---------- 7. Footer: dark teal with the Q mark faded behind, off to the side. */
.site-foot { position: relative; overflow: hidden; background: #0f3338; color: #bcd3d5; }
.site-foot .wrap { position: relative; color: #a9c4c7; }
.foot-mark { position: absolute; right: -4%; bottom: -18%; width: clamp(260px, 32vw, 520px); height: auto; fill: rgba(255,255,255,.06); pointer-events: none; }
.site-foot .q-logo { color: #fff; }
.site-foot .q-logo svg { height: 24px; }
.foot-brand .foot-line { color: #fff; }
.foot-doors a { color: #dbe9ea; }
.foot-doors a:hover { color: #fff; }
.site-foot nav a { color: #dbe9ea; }
.site-foot nav a:hover { color: #fff; }
.foot-cols b { color: #fff; }
.foot-credit { border-top-color: rgba(255,255,255,.14); color: #b3cccf; }

/* ---------- Round 11 */
/* 1. The hero's bar block is its own space. */
.ask-panel { margin-top: clamp(32px, 3.5vw, 48px); padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--fill); max-width: 720px; }
.ask-panel .ask-home { margin-top: 0; max-width: none; }
.ask-panel .assure { max-width: none; border-top-color: #e3e7ea; }
.ask-panel .ask-chip { background: linear-gradient(180deg, #fff, #f3f5f6); }
/* 2-3. Bridge: top-aligned, two stacked sentences, roomier body. */
.bridge-grid { align-items: start; }
.bridge-title { display: grid; gap: .35em; }
.bridge-title span { display: block; }
.bridge-copy { gap: var(--s-6); }
.bridge-copy > p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.75; max-width: 42ch; }
.bridge-copy > p + p { margin-top: var(--s-2); }
/* 4. Future You. */
.fy-intro { padding-top: clamp(96px, 11vw, 176px); }
.fy-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.fy-live { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-5); padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--teal-ink); }
.fy-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.fy-copy .sec-title { max-width: 16ch; }
.fy-tone { color: var(--teal); }
.fy-copy .sec-lede { margin-top: var(--s-5); max-width: 42ch; }
.fy-copy .text-link { margin-top: var(--s-6); }
.fy-stage { position: relative; aspect-ratio: 1; max-height: 640px; }
.fy-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; border-radius: var(--r-panel); }
.fy-canvas:active { cursor: grabbing; }
.fy-card { position: absolute; left: clamp(8px, 2vw, 24px); bottom: clamp(16px, 3vw, 40px); max-width: 300px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(14,20,23,.05), 0 20px 40px -20px rgba(14,20,23,.3); display: grid; gap: 4px; transition: opacity .4s, transform .5s var(--ease-out); }
.fy-card.is-swap { opacity: 0; transform: translateY(6px); }
.fy-card small { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); }
.fy-card p { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.fy-card span { font-size: 13px; color: var(--muted); }
.fy-hint { position: absolute; right: clamp(8px, 2vw, 24px); bottom: clamp(16px, 3vw, 40px); font-size: 12.5px; color: var(--muted); }
@media (max-width: 960px) { .fy-grid { grid-template-columns: minmax(0, 1fr); } .fy-stage { max-height: 440px; } .fy-hint { display: none; } }
/* 5. Maya: larger intro, the avatar travels the beats. */
.one-call-lede { font-size: clamp(19px, 1.6vw, 24px) !important; line-height: 1.55; max-width: 48ch !important; }
.one-call-lede b { font-weight: 700; color: var(--ink); }
.chapters { position: relative; padding-left: 56px; }
.maya-track { position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.maya-dot { position: absolute; left: 50%; top: 0; width: 40px; height: 40px; translate: -50% 0; display: grid; place-items: center; border-radius: 50%; background: var(--tile-pearl-teal); color: #fff; box-shadow: 0 0 0 4px var(--fill-soft), 0 6px 14px -6px rgba(31,92,99,.6); transition: transform .7s var(--ease-out); }
.maya-dot svg { width: 20px; height: 20px; }
@media (max-width: 960px) { .chapters { padding-left: 0; } .maya-track { display: none; } }
/* 6. Persona: two lines. */
.two-line { display: grid; gap: .3em; }
.two-line span { display: block; }
/* 7. The You node: bigger, animated like Future You. */
.cf-you { width: 132px; height: 132px; background: none; box-shadow: none; }
.cf-you-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.cf-you b { position: relative; z-index: 1; font-size: 18px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
@media (max-width: 860px) { .cf-you { width: 104px; height: 104px; } }
/* The You label stays readable over the dots. */
.cf-you b { padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--teal-ink); text-shadow: none; font-size: 16px; box-shadow: 0 1px 2px rgba(14,20,23,.1); }
.maya-dot { z-index: 2; }

/* ---------- Round 12 */
/* Standing rule: no hanging words; sentences on their own lines. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.sec-lede, .how-head p, .gather-head p, .one-call-lede, .rb-sub { max-width: none; }
/* 1. Depth behind the hero's bar panel; 7. the same soft shadow on the tools panel, chips and card (kept light so they never stack dark). */
.ask-panel, .flow-mount { box-shadow: 0 1px 2px rgba(14,20,23,.05), 0 24px 48px -28px rgba(14,20,23,.28); }
.q-tool { box-shadow: 0 1px 2px rgba(14,20,23,.05), 0 8px 18px -12px rgba(14,20,23,.25); }
.q-tool-panel { box-shadow: 0 1px 2px rgba(14,20,23,.05), 0 24px 48px -28px rgba(14,20,23,.3); }
/* 2. The dock: earlier (see JS) and larger. */
.ask-dock { width: min(860px, calc(100% - 32px)); }
.ask-dock .ask-bar { min-height: 76px; padding: 10px 10px 10px 12px; }
.ask-dock .ask-mark { width: 52px; height: 52px; }
.ask-dock .ask-mark svg { width: 26px; height: 26px; }
.ask-dock .ask-text { font-size: 19px; }
.ask-dock .ask-cycle { font-size: 19px; }
.ask-dock .ask-go { min-height: 56px; padding: 0 24px; font-size: 17px; }
@media (max-width: 640px) { .ask-dock .ask-bar { min-height: 64px; } .ask-dock .ask-mark { width: 44px; height: 44px; } .ask-dock .ask-text { font-size: 17px; } .ask-dock .ask-go { min-height: 48px; padding: 0 18px; font-size: 15px; } }
/* 3. The carousel: people whose thinking went uncredited, landing on you. */
.bridge { padding-top: clamp(88px, 10vw, 150px); }
.bridge-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-5); }
.bridge-head .sec-title { max-width: 24ch; }
.bridge-head .two-line span:last-child { font-size: .62em; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--ink-2); max-width: 40ch; }
.car-nav { display: flex; gap: 8px; padding-bottom: 6px; }
.car-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); border-bottom-color: var(--line-edge); background: linear-gradient(180deg, #fff, #f3f5f6); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(14,20,23,.06); color: var(--ink); cursor: pointer; transition: border-color .15s, color .15s, box-shadow .2s, transform .25s var(--ease-out); }
.car-btn:hover { border-color: var(--line-edge); color: var(--teal); background: linear-gradient(180deg, #fff, #eef1f3); box-shadow: inset 0 1px 0 #fff, 0 2px 6px -2px rgba(14,20,23,.12); transform: translateY(-1px); }
.car-btn[disabled] { opacity: .35; cursor: default; transform: none; }
.car-btn svg { width: 18px; height: 18px; }
.car { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.car-track { list-style: none; margin: 0 auto; padding-block: 8px 24px; display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 min(100%, 880px); scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 3vw, 48px); align-items: center; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-panel); background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(14,20,23,.04), 0 24px 48px -32px rgba(14,20,23,.28); }
.car-fig { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; display: grid; place-items: center; }
.car-fig svg { width: 72%; height: 72%; }
.car-fig figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: inherit; opacity: .8; }
.car-fig-tesla { background: #eceff1; color: #2c363c; }
.car-fig-franklin { background: #d9e9ea; color: #1f5c63; }
.car-fig-roebling { background: #eef1f3; }
.car-fig-roebling img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.car-fig-roebling figcaption { color: #2c363c; background: rgba(255,255,255,.85); padding: 4px 8px; border-radius: 6px; opacity: 1; }
.car-fig-johnson { background: #0e1417; color: #f4f6f7; }
.car-fig-you { background: var(--teal-soft); color: var(--teal); }
.car-copy h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.022em; line-height: 1.08; }
.car-copy p { margin-top: var(--s-4); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--ink-2); }
.car-copy .car-point { margin-top: var(--s-5); font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); }
.car-slide-you { background: #f0f7f8; border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); }
.car-slide-you .car-point { color: var(--teal); }
.car-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.car-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background .25s, transform .25s; }
.car-dots i.is-on { background: var(--teal); transform: scale(1.25); }
@media (max-width: 960px) { .bridge-head { grid-template-columns: minmax(0, 1fr); } .car-nav { display: none; } .car-slide { grid-template-columns: minmax(0, 1fr); flex-basis: 88%; } .car-fig { aspect-ratio: 16 / 10; } }
/* 4. The strip items answer the cursor. */
.leaks li { transition: transform .35s var(--ease-out), background-color .25s; cursor: default; border-radius: var(--r-card); }
.leaks li:hover, .leaks li:focus-within { transform: translateY(-4px); background: rgba(255,255,255,.6); }
.leak-ico { transition: transform .35s var(--ease-out), background-color .25s, color .25s; }
.leaks li:hover .leak-ico { transform: scale(1.12) rotate(-6deg); background: var(--teal); color: #fff; }
.leaks li:hover b { color: var(--teal-ink); }
/* 8. Future You: its own light teal band. */
.fy-intro { padding-block: clamp(96px, 11vw, 176px); background: #eef6f6; border-block: 1px solid #d7e8e9; }
.fy-live { background: #fff; }
/* 9-10. Card and labels: quieter, aligned, placed in the open space around the figure. */
.fy-card { max-width: 320px; padding: 16px 18px; gap: 6px; border-radius: 12px; border-color: #d7e8e9; box-shadow: 0 1px 2px rgba(31,92,99,.06), 0 16px 32px -20px rgba(31,92,99,.35); transition: opacity .4s, transform .5s var(--ease-out), left .6s var(--ease-out), top .6s var(--ease-out); }
.fy-card small { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--teal); line-height: 1.2; }
.fy-card p { font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--ink); text-decoration: none; }
.fy-card span { font-size: 13px; color: var(--muted); line-height: 1.2; }
.fy-card[data-pos="tl"] { left: clamp(8px, 2vw, 24px); top: clamp(16px, 3vw, 40px); bottom: auto; right: auto; }
.fy-card[data-pos="tr"] { right: clamp(8px, 2vw, 24px); top: clamp(16px, 3vw, 40px); left: auto; bottom: auto; }
.fy-card[data-pos="bl"] { left: clamp(8px, 2vw, 24px); bottom: clamp(16px, 3vw, 40px); top: auto; right: auto; }
.fy-card[data-pos="br"] { right: clamp(8px, 2vw, 24px); bottom: clamp(56px, 5vw, 72px); top: auto; left: auto; }
/* 11. Room between Future You and Maya. */
.one-call { margin-top: clamp(96px, 11vw, 160px); }
/* 13. Teal head: lede top-aligned and larger. */
.gather .gather-head { align-items: start; }
.gather .gather-head p { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; padding-top: .35em; padding-bottom: 0; }
/* 15. The You node: a hollow ring of dots, the word plain. */
.cf-you { width: 220px; height: 220px; }
.cf-you b { padding: 0; background: none; box-shadow: none; color: var(--teal-ink); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
@media (max-width: 860px) { .cf-you { width: 150px; height: 150px; } .cf-you b { font-size: 18px; } }
/* 17. Closing button. */
.closing .btn { min-height: 64px; padding: 0 36px; font-size: 19px; }
/* On phones the card sits under the figure instead of over it. */
@media (max-width: 960px) { .fy-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: auto; height: 520px; } .fy-canvas { position: relative; height: 100%; } .fy-card, .fy-card[data-pos] { position: static; max-width: none; margin-top: 12px; } }

/* ---------- Mock-card system (Maya's scenes, tools card, teal figures, modal). White, hairlines, hierarchy by type; no pale boxes, no badges, no meters. */
.m-card { display: grid; background: #fff; border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; width: 100%; }
.m-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.m-head b { font-size: 16px; font-weight: 600; }
.m-head small { display: block; color: var(--muted); font-size: 13px; }
.m-head img { width: 18px; height: 18px; }
.m-meta, .m-lock { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.m-lock svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.m-row { display: grid; gap: 8px; padding: 20px; }
.m-row + .m-row { border-top: 1px solid var(--line); }
.m-row > small { font-size: 13px; color: var(--muted); }
.m-call { font-size: clamp(19px, 1.5vw, 23px); font-weight: 500; line-height: 1.35; letter-spacing: -.015em; color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.m-kept { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--teal-ink); }
.m-kept svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-note { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; }
.m-note small { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--teal); }
.m-note p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.m-q { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--tile-pearl-teal); color: #fff; }
.m-q svg { width: 14px; height: 14px; fill: currentColor; }
.m-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 18px 20px; align-items: start; }
.m-msg + .m-msg { border-top: 1px solid var(--line); }
.m-av { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--teal-soft); color: var(--teal-ink); font-size: 12px; font-weight: 600; flex: none; }
.m-av-q { background: var(--tile-pearl-teal); color: #fff; }
.m-av-q svg { width: 18px; height: 18px; fill: currentColor; }
.m-who { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.m-who b { font-size: 15px; font-weight: 600; }
.m-who small { font-size: 12.5px; color: var(--muted); }
.m-msg p { font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.m-fy .m-who small { color: var(--teal); font-weight: 600; }
.m-actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.m-quiet { font-size: 14px; color: var(--muted); }
.m-before { display: grid; gap: 4px; margin: 0 0 var(--s-4); padding: 0 2px; font-size: clamp(18px, 1.4vw, 21px); color: var(--muted); }
.m-before small { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.m-title { font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.m-profile .m-row p:not(.m-title) { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.m-status p { font-size: 15px !important; color: var(--ink) !important; }
/* Beat 1: a chat screen that fills the stage. */
.stage .scene-chat { padding: 0; justify-content: stretch; }
.chat-screen { display: flex; flex-direction: column; height: 100%; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); font-family: var(--body); }
.chat-head b { font-size: 16px; font-weight: 600; display: block; }
.chat-head small { font-size: 13px; color: var(--muted); }
.chat-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tile-pearl-teal); color: #fff; }
.chat-av svg { width: 20px; height: 20px; fill: currentColor; }
.chat-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 24px; }
.stage .chat-screen .q-bubble { font-size: 18px; line-height: 1.4; padding: 12px 16px; max-width: 86%; border-radius: 20px; }
.chat-screen .chat-reply { display: flex; gap: 10px; align-self: stretch; margin: 0; padding: 14px 24px 20px; border-top: 1px solid var(--line); background: var(--fill-soft); }
.chat-screen .chat-reply span { flex: 1; text-align: center; padding: 12px 16px; border-radius: 12px; font-size: 16px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.chat-screen .chat-reply .is-picked { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (max-width: 960px) { .chapter > .scene-chat { padding: 0; overflow: hidden; } .chat-thread { justify-content: flex-start; padding: 18px; } .chat-screen .q-bubble { font-size: 16px; } }
/* Tools card: quieter status, sentence-case label, kept row without the wash. */
.q-status { background: none !important; padding: 0; font-size: 13px; }
.q-status-live { color: var(--teal-ink); } .q-status-rollout { color: var(--rust); }
.q-tp-label { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); }
.q-tool-panel .q-row.is-on { background: #fff; }
.q-tool-panel .q-row.is-on::before { background: var(--teal); }
/* Teal record figure: no pale wash on the shown row. */
.gt-rec-row.is-out { background: transparent; }

/* Persona head: lede top-aligned. */
.who-head { align-items: start; }
.who-head .sec-lede { padding-top: .35em; padding-bottom: 0; }
/* FAQ: use the width; bigger questions and answers. */
.faq-grid { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(32px, 5vw, 96px); }
.q-faq summary { padding: 26px 48px 26px 0; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; }
.q-faq p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; max-width: 70ch; padding-bottom: 28px; }
.faq-end { font-size: 18px; }
/* Closing: three lines, a clear size step, generous space, then the button. */
.close-lines { display: grid; gap: clamp(18px, 2.2vw, 32px); justify-items: center; }
.close-lines span { display: block; text-wrap: balance; }
.close-1 { font-size: clamp(36px, 5.4vw, 68px); letter-spacing: -.022em; line-height: 1.02; color: #fff; }
.close-2 { font-size: clamp(22px, 2.6vw, 36px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: #cfe6e8; }
.close-3 { font-size: clamp(20px, 2.1vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.closing .btn { margin-top: clamp(36px, 4vw, 56px); }

/* ---------- Round 13 */
/* 1. Carousel head centered; nav at the foot. */
.bridge-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.bridge-head .sec-title { max-width: 30ch; justify-items: center; }
.bridge-head .two-line span:last-child { max-width: none; }
.car-foot { display: flex; align-items: center; justify-content: center; gap: var(--s-5); margin-top: var(--s-4); }
.car-nav { display: none; }
/* 2 + 4. The carousel is its own band, fading in from the strip's tan at the top (inverted), cards on a deeper tan. */
.bridge { background: linear-gradient(180deg, #eef1f3 0%, #f8f9fa 240px, #f8f9fa 100%); }
.car { padding-block: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px); background: #eef1f3; }
.car-slide { box-shadow: 0 1px 2px rgba(14,20,23,.05), 0 28px 56px -32px rgba(14,20,23,.35); }
/* Icons: dimensional tiles on gradient fields. */
.car-fig { background: none; }
.car-fig-tesla { background: linear-gradient(160deg, #5b6670, #2c363c); }
.car-fig-franklin { background: linear-gradient(160deg, #2b7a82, #164a51); }
.car-fig-johnson { background: linear-gradient(160deg, #2c363c, #0e1417); }
.car-fig-you { background: linear-gradient(160deg, #f4f6f7, #e3e7ea); }
.car-fig figcaption { color: rgba(255,255,255,.85); }
.car-fig-roebling figcaption { color: #2c363c; }
.car-fig-you figcaption { color: var(--teal-ink); }
.car-tile { display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 26%; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 24px 48px -20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.2); }
.car-tile svg { width: 72%; height: 72%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.car-you-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 5. Future You fills its space. */
.fy-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(32px, 4vw, 64px); }
.fy-stage { max-height: 760px; }
.fy-intro { padding-block: clamp(72px, 8vw, 120px); }
/* 6. Persona head: lede top aligned to the headline's cap line. */
.who-head .sec-lede { padding-top: 0; margin-top: .55em; }
/* 7. The You node: a dimensional orb with a halo, a fine dot mesh, and the word on it. */
.cf-you { --hx: 35%; --hy: 30%; width: 200px; height: 200px; background: radial-gradient(circle at var(--hx) var(--hy), #5fa3aa 0%, var(--teal) 42%, #174a50 100%); box-shadow: inset 0 -18px 36px rgba(14,20,23,.35), inset 0 10px 24px rgba(255,255,255,.18), 0 30px 60px -24px rgba(15,51,56,.6); transition: box-shadow .4s; overflow: visible; }
.cf-you-halo { position: absolute; inset: -14%; border-radius: 50%; border: 1px solid rgba(31,92,99,.35); pointer-events: none; }
.cf-you-halo::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 1px dashed rgba(31,92,99,.25); }
.cf-you-canvas { opacity: .9; }
.cf-you b { color: #fff; font-size: 26px; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(14,20,23,.3); }
@media (max-width: 860px) { .cf-you { width: 150px; height: 150px; } .cf-you b { font-size: 20px; } }
/* Strip items: the hover card has real inner padding; the resting state matches so nothing shifts. */
.leaks li, .leaks li + li, .leaks li:last-child, .leaks li:nth-child(2n), .leaks li:nth-child(2n+1) { padding: 28px 24px; }
.leaks li { border-right: 0; }
.leaks li + li { border-left: 1px solid var(--line); }
.leaks li:hover, .leaks li:focus-within { background: #fff; box-shadow: 0 1px 2px rgba(14,20,23,.05), 0 24px 48px -28px rgba(14,20,23,.3); border-left-color: transparent; }
.leaks li:hover + li, .leaks li:focus-within + li { border-left-color: transparent; }
.leaks li > span:last-child { max-width: none; }
@media (max-width: 1080px) { .leaks li:nth-child(2n+1) { border-left: 0; } .leaks li:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 600px) { .leaks li, .leaks li + li { border-left: 0; padding: 22px 20px; } }
/* Future You title: two lines, no hanging word; persona lede cap-aligned. */
.fy-copy .sec-title.fy-title { max-width: none; font-size: clamp(32px, 3.6vw, 52px); }
.fy-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.who-head .sec-lede { margin-top: 3px; }
/* Tools panel: the chip column stretches to the card's height so the fan spans north to south. */
.q-flow { align-items: stretch; }
.q-tools { height: 100%; align-content: space-between; row-gap: 10px; }
.q-tool-step { margin-top: 0; }
@media (max-width: 860px) { .q-tools { height: auto; } }
/* Future You title: both halves on one line each at desktop. */
.fy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fy-copy .sec-title.fy-title { font-size: clamp(30px, 2.9vw, 42px); }
@media (min-width: 1200px) { .fy-title, .fy-title .fy-tone { white-space: nowrap; } }

/* ---------- Round 14 */
/* 0. Palette (v5): tinted surfaces are cool grey or light teal. */
.ask-panel { background: var(--fill); }
.ask-panel .assure { border-top-color: #e3e7ea; }
.bridge { background: linear-gradient(180deg, var(--fill) 0%, var(--fill-soft) 240px, var(--fill-soft) 100%); }
.car { background: var(--teal-tint); }
.leaks-band { background: linear-gradient(180deg, rgba(244,246,247,0) 0%, var(--fill) 22%, var(--fill) 100%); }
.leaks-band .leaks, .leaks-band .leaks li, .leaks li + li { border-color: #e3e7ea; }
.leaks li:hover, .leaks li:focus-within { background: #fff; }
.flow-mount { background: var(--fill); }
.one-call { background: var(--teal-wash); margin-top: 0; padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(72px, 8vw, 120px); border-top: 0; }
.one-call::before { display: none; }
.how { padding-bottom: 0; }
.fy-intro { background: var(--surface); border-block: 1px solid var(--line); }
.car-fig-tesla { background: linear-gradient(160deg, #5b6f82, #2c3a48); }
.car-fig-franklin { background: linear-gradient(160deg, #2b7a82, #164a51); }
.car-fig-roebling { background: linear-gradient(160deg, #1f5c63, #0f3338); }
.car-fig-johnson { background: linear-gradient(160deg, #3a454c, #0e1417); }
.car-fig-you { background: linear-gradient(160deg, #f4f6f7, #e3e7ea); }
.car-slide-you { background: #fff; }
/* 2. Strip items use the width. */
.leaks b { font-size: clamp(22px, 1.9vw, 28px); text-wrap: balance; }
.leaks li > span:last-child { font-size: 17px; line-height: 1.5; }
.leak-ico { width: 44px; height: 44px; }
/* 3. 'Work like it' head: lede cap-aligned, whole lines. */
.how-head { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.how-head p { padding-top: 0; margin-top: 3px; }
/* 4. Future You: head row like every section; the figure fills a full-width stage. */
.fy-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 80px); align-items: start; }
.fy-head .sec-title { max-width: 18ch; }
.fy-head .sec-lede { margin-top: 3px; }
.fy-copy .text-link { margin-top: var(--s-6); }
.fy-stage { margin-top: clamp(32px, 4vw, 56px); aspect-ratio: auto; height: clamp(520px, 62vw, 820px); max-height: none; }
.fy-card[data-pos="bl"], .fy-card[data-pos="tl"] { left: clamp(8px, 6vw, 120px); }
.fy-card[data-pos="br"], .fy-card[data-pos="tr"] { right: clamp(8px, 6vw, 120px); }
@media (max-width: 960px) { .fy-head { grid-template-columns: minmax(0, 1fr); } .fy-stage { height: auto; } }
/* 5. Maya's cards fill the stage. */
.stage .scene { justify-content: stretch; }
.stage .m-card { flex: 1; align-content: start; }
.stage .scene > .m-before { flex: none; }
.stage .m-card > :last-child { align-self: stretch; }
/* Phones: ledes small enough that each sentence line stays whole. */
@media (max-width: 420px) { .sec-lede, .how-head p, .gather-head p, .one-call-lede, .rb-sub { font-size: 16px !important; line-height: 1.5; } }
.car-fig-roebling .car-tile svg { width: 88%; height: 88%; }
/* ---------- Round 14b */
/* 2. Future You: balanced two columns, the figure fully visible beside the copy. */
.fy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.fy-copy .sec-title.fy-title { font-size: clamp(36px, 4.2vw, 60px); max-width: none; white-space: normal; }
.fy-title .fy-tone { white-space: normal; }
.fy-copy .sec-lede { margin-top: var(--s-5); }
.fy-stage { margin-top: 0; height: clamp(480px, 46vw, 700px); }
.fy-card[data-pos="bl"], .fy-card[data-pos="tl"] { left: clamp(8px, 2vw, 24px); }
.fy-card[data-pos="br"], .fy-card[data-pos="tr"] { right: clamp(8px, 2vw, 24px); }
@media (max-width: 960px) { .fy-grid { grid-template-columns: minmax(0, 1fr); } .fy-stage { height: auto; } }
/* 3. Maya's stage spans the viewport height. */
.stage { top: 24px; height: calc(100vh - 48px); max-height: none; min-height: 600px; }
/* 4. 'Work like it' lede: one line for the first sentence; no tinted box under the tools. */
.how-head p { font-size: clamp(17px, 1.35vw, 20px); }
.flow-mount { background: transparent; box-shadow: none; padding-inline: 0; }

/* ---------- Round 15 */
/* 2. The example prompt: Geist has no true italic, so it reads upright in the secondary grey. */
.ask-cycle { font-style: normal; color: var(--muted); }
/* 3 + 5. Lighter, symmetric fades: the carousel fades in from the lightest rust; the strip fades out to the stone below. */
.bridge { background: linear-gradient(180deg, var(--fill) 0%, var(--fill-soft) 220px, var(--fill-soft) 100%); }
.leaks-band { background: linear-gradient(180deg, rgba(244,246,247,0) 0%, var(--fill) 24%, var(--fill) 62%, var(--fill) 100%); padding-bottom: clamp(72px, 7vw, 104px); }
/* 4. Hero panel: a gentle left-to-right drift between the two light tints. */
.ask-panel { background: linear-gradient(100deg, #f4f6f7 0%, #f4f6f7 45%, #eef6f6 100%); background-size: 200% 100%; animation: panel-drift 14s ease-in-out infinite alternate; }
@keyframes panel-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .ask-panel { animation: none; } }
/* 6. Future You fills the column; card and labels with product polish. */
.fy-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 3vw, 56px); }
.fy-stage { height: clamp(560px, 54vw, 820px); }
.fy-card { max-width: 380px; padding: 18px 20px; gap: 8px; border-radius: 14px; border: 0; box-shadow: 0 1px 2px rgba(31,92,99,.08), 0 24px 48px -24px rgba(31,92,99,.45); background: #fff; }
.fy-card::before { content: none; }
.fy-card { border: 1px solid rgba(31,92,99,.14); }
.fy-card small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--teal-ink); }
.fy-card small svg { width: 14px; height: 14px; fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fy-card p { font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.fy-card span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.fy-card span img { width: 16px; height: 16px; }
/* 7 + 8. Maya's stage fits between the nav and the dock; chapters align with it. */
.stage { top: 96px; height: calc(100vh - 96px - 128px); min-height: 520px; max-height: 760px; }
.stage .scene { justify-content: center; }
.stage .m-card { flex: 0 0 auto; }
.stage .scene-chat { justify-content: stretch; }
.chat-thread { justify-content: flex-start; padding-top: 20px; }
.chat-screen .chat-reply { margin-top: auto; }
.chapter, .chapter:first-child { min-height: calc(100vh - 224px); padding-top: 0; justify-content: center; }
.story-grid { margin-top: var(--s-7); }
/* 10. Ledes slightly larger and semibold, sentence per line. */
.sec-lede, .gather-head p, .one-call-lede, .rb-sub, .bridge-head .two-line span:last-child { font-weight: 600; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.5; }
.how-head p { font-weight: 600; font-size: clamp(17px, 1.3vw, 19px); }
.how-head p b { font-weight: 700; }
.one-call-lede { font-size: clamp(19px, 1.55vw, 24px) !important; }
.one-call-lede b { font-weight: 700; }
.gather .gather-head p { font-size: clamp(19px, 1.6vw, 25px); }
.rb-sub { font-size: clamp(20px, 2vw, 29px); }
.bridge-head .two-line span:last-child { color: var(--ink-2); }

/* ---------- Round 16 (backgrounds reverted in round 17: the page keeps its round-15 fields; only the two existing fades carry a light drift) */
.hero { border-bottom: 0; }
.bridge, .leaks-band { position: relative; isolation: isolate; overflow: clip; }
.bridge { background: var(--fill-soft); padding-top: clamp(72px, 8vw, 120px); }
.bridge::before { content: ""; position: absolute; left: -50%; top: 0; width: 200%; height: 260px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--fill) 0%, #f4f6f7 30%, var(--teal-wash) 60%, var(--fill) 100%);
  mask: linear-gradient(180deg, #000 0, rgba(0,0,0,.85) 40%, transparent 100%); -webkit-mask: linear-gradient(180deg, #000 0, rgba(0,0,0,.85) 40%, transparent 100%);
  animation: fade-drift 28s ease-in-out infinite alternate; will-change: transform; }
.leaks-band { background: linear-gradient(180deg, rgba(244,246,247,0) 0%, var(--fill) 28%, var(--fill) 60%, rgba(244,246,247,0) 100%); padding-bottom: clamp(48px, 5vw, 72px); }
.leaks-band::after { content: ""; position: absolute; left: -50%; bottom: 0; width: 200%; height: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--teal-wash) 0%, var(--fill) 35%, #f4f6f7 65%, var(--teal-wash) 100%);
  mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.9) 55%, #000 100%); -webkit-mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.9) 55%, #000 100%);
  animation: fade-drift 32s ease-in-out infinite alternate; will-change: transform; }
.leaks-band .wrap { position: relative; z-index: 1; }
@keyframes fade-drift { from { transform: translateX(0); } to { transform: translateX(25%); } }
@media (prefers-reduced-motion: reduce) { .bridge::before, .leaks-band::after { animation: none; transform: translateX(12%); } }
.band-stone, .how { background: var(--fill); border-block: 0; }
.fy-intro { background: var(--surface); border-block: 0; }
.one-call { border-top: 0; }
/* Carousel band: a light teal field with a fine engraved ruling, strongest behind the cards and gone at the edges, no picture. */
.car { position: relative; isolation: isolate; background: linear-gradient(180deg, rgba(232,242,242,0) 0%, var(--teal-tint) 22%, var(--teal-tint) 78%, rgba(232,242,242,0) 100%); padding-block: clamp(56px, 6vw, 88px) clamp(40px, 4.5vw, 64px); }
.car::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(23,74,80,.11) 0 1px, transparent 1px 6px);
  mask: radial-gradient(70% 90% at 50% 48%, #000 20%, rgba(0,0,0,.35) 60%, transparent 100%); -webkit-mask: radial-gradient(70% 90% at 50% 48%, #000 20%, rgba(0,0,0,.35) 60%, transparent 100%); }
.car::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(60% 70% at 50% 50%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%); }
.car-track, .car-foot { position: relative; z-index: 1; }
/* 4. Future You: the column breathes over the section height; the figure sits a step to the right; card and labels take the room. */
.fy-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 4vw, 72px); align-items: stretch; }
.fy-copy { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding-block: clamp(16px, 2vw, 32px); }
.fy-copy .fy-meet { margin-bottom: 0; align-self: flex-start; }
.fy-copy .sec-title.fy-title { margin: 0; }
.fy-lede { display: grid; gap: clamp(14px, 1.6vw, 24px); }
.fy-copy .fy-lede .sec-lede { margin-top: 0; }
.fy-copy .text-link { margin-top: 0; }
.fy-stage { height: clamp(600px, 56vw, 860px); }
.fy-canvas { left: clamp(0px, 4vw, 64px); width: calc(100% - clamp(0px, 4vw, 64px)); }
.fy-card { max-width: 460px; padding: 22px 26px; gap: 10px; border-radius: var(--r-card); }
.fy-card small { font-size: 13.5px; }
.fy-card small svg { width: 15px; height: 15px; }
.fy-card p { font-size: clamp(20px, 1.6vw, 23px); }
.fy-card span { font-size: 14.5px; }
.fy-card span img { width: 18px; height: 18px; }
.fy-card[data-pos="bl"], .fy-card[data-pos="tl"] { left: clamp(8px, 2vw, 32px); }
.fy-card[data-pos="br"], .fy-card[data-pos="tr"] { right: clamp(8px, 2vw, 32px); }
.fy-card[data-pos="tl"], .fy-card[data-pos="tr"] { top: clamp(24px, 3vw, 48px); }
.fy-card[data-pos="bl"] { bottom: clamp(24px, 3vw, 48px); }
.fy-card[data-pos="br"] { bottom: clamp(64px, 6vw, 88px); }
@media (max-width: 960px) { .fy-grid { grid-template-columns: minmax(0, 1fr); } .fy-copy { min-height: 0; padding-block: 0; gap: var(--s-5); } .fy-stage { height: auto; } .fy-canvas { left: 0; width: 100%; } .fy-card { max-width: none; } }
/* 5. "Work like it." sits closer to the strip; its lede matches the other ledes. */
.how { padding-top: 0; }
.how .how-head { padding-top: clamp(56px, 6.5vw, 100px); }
@media (min-width: 961px) { .how .how-head { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }
.how-head p { font-weight: 600; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.5; margin-top: 6px; }
@media (max-width: 960px) { .how .how-head { grid-template-columns: minmax(0, 1fr); } .fy-stage { display: grid; grid-template-rows: 440px auto; height: auto; } .fy-canvas { position: relative; height: 440px; } }
@media (max-width: 960px) { .unit-m { display: inline-block; } }
/* Roebling year tag matches the other tiles: no pill. */
.car-fig-roebling figcaption { color: rgba(255,255,255,.85); background: none; padding: 0; border-radius: 0; opacity: .8; }

/* ---------- Round 17 */
/* 3. The figure lives in a light rounded panel; card, labels and hint sit at its edges. */
.fy-stage { border-radius: var(--r-panel); background: linear-gradient(180deg, #fff 0%, #f3f8f8 100%); border: 1px solid rgba(31,92,99,.12); box-shadow: 0 1px 2px rgba(31,92,99,.05), 0 32px 64px -44px rgba(31,92,99,.4); }
.fy-canvas { border-radius: 11px; }
.fy-hint { right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); color: var(--ink-2); opacity: .7; }
.fy-card { box-shadow: 0 1px 2px rgba(31,92,99,.08), 0 20px 40px -20px rgba(31,92,99,.4); }
@media (max-width: 960px) { .fy-stage { padding: 12px; border-radius: var(--r-panel); } .fy-canvas { border-radius: var(--r-card); } .fy-card, .fy-card[data-pos] { margin-top: 12px; } }
/* 4. End band: the dark teal breathes like the quadron.tech ground: a soft lighter haze left of centre, a second one low right, a gentle vignette. Static. */
.resource-band { background:
  radial-gradient(55% 75% at 32% 38%, rgba(43,122,130,.42) 0%, rgba(43,122,130,0) 70%),
  radial-gradient(45% 55% at 78% 85%, rgba(31,92,99,.38) 0%, rgba(31,92,99,0) 70%),
  radial-gradient(130% 110% at 50% 50%, rgba(0,0,0,0) 50%, rgba(4,18,20,.55) 100%),
  #0e3237; }
/* "You, today" tile: the same dimensional tile as the other slides, in cool grey; the dotted figure scaled to sit inside it. */
.car-fig-you .car-tile { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(31,92,99,.20), rgba(31,92,99,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 24px 48px -20px rgba(15,51,56,.45), 0 2px 6px rgba(15,51,56,.14); }
.car-you-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* "Meet Future You": the Q mark breathing in a small teal tile with a slow sheen, label beside it. No pill, no dot. */
.fy-meet { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; letter-spacing: .005em; color: var(--teal-ink); }
.fy-q { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: var(--tile-pearl-teal); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 0 rgba(43,122,130,.38); animation: fy-breathe 3.8s ease-in-out infinite; overflow: hidden; }
.fy-q svg { width: 14px; height: 14px; fill: currentColor; position: relative; z-index: 1; }
.fy-q::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 65%); background-size: 280% 100%; background-position: 120% 0; animation: fy-sheen 5.6s ease-in-out infinite; }
@keyframes fy-breathe { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 0 rgba(43,122,130,.38); } 55% { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 7px rgba(43,122,130,0); } }
@keyframes fy-sheen { 0%, 60% { background-position: 120% 0; } 85%, 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .fy-q, .fy-q::after { animation: none; } .fy-q { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 4px rgba(43,122,130,.14); } }
/* Persona section rolls out top to bottom with the scroll (--p set by main.js): strings, then the record band, then the trunk, the orb, the spokes, the nodes. */
.confluence.is-armed { --p: 0; }
.confluence.is-armed .cf-lines path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - var(--i, 0) * .025) / .3, 1)); transition: stroke-dashoffset .2s linear; }
.confluence.is-armed .cf-lines .cf-arrow { stroke-dasharray: none; stroke-dashoffset: 0; opacity: clamp(0, (var(--p) - .3 - var(--i, 0) * .01) / .06, 1); transition: opacity .2s linear; }
.confluence.is-armed .cf-band { --t: clamp(0, (var(--p) - .34) / .14, 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 12px)); transition: opacity .2s linear, transform .2s linear; }
.confluence.is-armed .cf-edges path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .64) / .16, 1)); transition: stroke-dashoffset .2s linear; }
.confluence.is-armed .cf-edges path:first-child { stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .48) / .12, 1)); }
.confluence.is-armed .cf-you { opacity: clamp(0, (var(--p) - .56) / .1, 1); transition: opacity .2s linear, box-shadow .4s; }
.confluence.is-armed .cf-node { opacity: clamp(0, (var(--p) - .74 - var(--n, 0) * .02) / .1, 1); transition: opacity .2s linear, transform .45s var(--ease-out), box-shadow .3s, border-color .3s; }
.cf-nodes li:nth-child(1) { --n: 0; } .cf-nodes li:nth-child(2) { --n: 1; } .cf-nodes li:nth-child(3) { --n: 2; } .cf-nodes li:nth-child(4) { --n: 3; } .cf-nodes li:nth-child(5) { --n: 4; } .cf-nodes li:nth-child(6) { --n: 5; } .cf-nodes li:nth-child(7) { --n: 6; } .cf-nodes li:nth-child(8) { --n: 7; }
@media (prefers-reduced-motion: reduce) { .confluence.is-armed { --p: 1; } }

/* ---------- Round 18 */
/* 1. Right-column ledes end flush right (experiment). */
@media (min-width: 961px) { .how-head p, .one-call-head .one-call-lede, .gather-head p, .who-head .sec-lede { text-align: right; justify-self: end; } }
/* 2. Carousel lede a third larger. */
.bridge-head .two-line span:last-child { font-size: clamp(25px, 2.05vw, 32px); line-height: 1.4; }
/* 3. Future You panel takes the column; the figure sits centred in it. */
@media (min-width: 961px) { .fy-grid { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: clamp(28px, 3.5vw, 64px); } }
.fy-canvas { left: 0; width: 100%; }
/* 4. */
.fy-lede .sec-lede b { font-weight: 700; color: var(--ink); }
/* 5. One secondary call to action everywhere: label, then a teal chip with the arrow; the chip fills and the arrow steps on hover. */
.cta-link { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 999px; border: 1px solid var(--line-strong); border-bottom-color: var(--line-edge); background: linear-gradient(180deg, #fff, #f3f5f6); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(14,20,23,.06); font-weight: 500; font-size: 15.5px; line-height: 1; letter-spacing: -.005em; color: var(--teal-ink); text-decoration: none; transition: border-color .25s, background-color .25s, box-shadow .3s, transform .3s var(--ease-out); }
.cta-link .cta-chip { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); transition: background-color .25s, color .25s, transform .3s var(--ease-out); }
.cta-link .cta-chip .q-ico { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
.cta-link:hover, .cta-link:focus-visible { border-color: var(--line-edge); background: linear-gradient(180deg, #fff, #eef1f3); box-shadow: inset 0 1px 0 #fff, 0 2px 6px -2px rgba(14,20,23,.12); transform: translateY(-1px); }
.cta-link:hover .cta-chip, .cta-link:focus-visible .cta-chip { background: var(--tile-pearl-teal); color: #fff; }
.cta-link:hover .cta-chip .q-ico { transform: translateX(2px); }
.cta-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.cta-link.cta-on-dark { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); box-shadow: none; align-self: start; }
.cta-link.cta-on-dark .cta-chip { background: rgba(255,255,255,.14); color: var(--g-accent, #9fdfe4); }
.cta-link.cta-on-dark:hover, .cta-link.cta-on-dark:focus-visible { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.1); box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.cta-link.cta-on-dark:hover .cta-chip { background: #fff; color: var(--g-ink, #0f3338); }
.fy-copy .cta-link { align-self: flex-start; }
.faq-end { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; font-size: 17px; color: var(--ink-2); }
.faq-end p { margin: 0; }
.faq-end-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
/* 6. The network: thin, quiet lines in a cool grey; the lines that touch a hovered node (or every spoke, for the orb) warm up. */
.cf-edges path { stroke: #d5dbdf; stroke-width: 1; stroke-opacity: 1; transition: stroke .3s, stroke-width .3s, stroke-opacity .3s; }
.cf-edges path:first-child { stroke: var(--teal); stroke-width: 1.25; }
.cf-edges path.is-hot { stroke: var(--teal); stroke-width: 1.5; }
.cf-net.is-hover .cf-edges path:not(.is-hot):not(:first-child) { stroke-opacity: .55; }
/* Tools panel, alive: the string fires a point of light to the card, the chip answers, the card cross-fades. */
.q-wires path.q-wire-pulse { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px rgba(31,92,99,.95)); animation: q-pulse .8s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes q-pulse { to { stroke-dashoffset: 0; } }
.q-tool.is-fired { animation: q-fire .55s var(--ease-out); }
@keyframes q-fire { 0% { transform: scale(1); } 35% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(31,92,99,.12); } 100% { transform: scale(1); } }
.q-tool-panel > * { animation: q-xfade .5s var(--ease-out) both; }
.q-tool-panel > :nth-child(2) { animation-delay: .05s; } .q-tool-panel > :nth-child(3) { animation-delay: .1s; } .q-tool-panel > :nth-child(4) { animation-delay: .15s; } .q-tool-panel > :nth-child(5) { animation-delay: .2s; }
@keyframes q-xfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .q-wire-pulse, .q-tool.is-fired, .q-tool-panel > * { animation: none; } }

/* ---------- Round 19 */
/* 1. Future You becomes Maya: a stream of dots leaves the figure's base, crosses the section boundary and lands on a small
   dotted figure beside her name; the chapter avatar carries the same figure. Scroll-driven; static under reduced motion. */
.how { position: relative; }
.fy-hand { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.fy-hand circle { fill: var(--teal); opacity: 0; transition: opacity .25s linear; }
.fy-hand circle.is-on { opacity: var(--a, .9); }
.fy-hand .is-head { fill: var(--ink); }
.maya-mark { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: .35em; vertical-align: -.35em; border-radius: 50%; background: var(--teal-soft, #e8f2f2); box-shadow: 0 0 0 0 rgba(31,92,99,.25); transition: box-shadow .5s var(--ease-out), background-color .4s; }
.maya-mark svg { width: 100%; height: 100%; }
.maya-mark svg circle { fill: var(--teal); opacity: .35; transition: opacity .4s; }
.maya-mark.is-lit { background: #fff; box-shadow: 0 0 0 4px rgba(31,92,99,.14); }
.maya-mark.is-lit svg circle { opacity: 1; }
.one-call-lede b { transition: color .4s; }
.one-call-lede.is-lit b { color: var(--teal); }
.maya-dot svg.q-dotfig { width: 30px; height: 30px; }
.maya-dot svg.q-dotfig circle { fill: #fff; }
@media (prefers-reduced-motion: reduce) { .fy-hand circle { opacity: var(--a, .9); } .maya-mark svg circle { opacity: 1; } }
.fy-card { z-index: 3; }

/* ---------- Round 19: the tool card, as a product. No ruled rows, no box in a box: a header, one sentence, a real app
   window, the kept result, and the page's own call to action. */
.q-tool-panel { border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: 0 1px 2px rgba(31,92,99,.05), 0 28px 56px -36px rgba(31,92,99,.38); }
.q-tool-panel .tp-head { display: flex; align-items: center; gap: 14px; padding: 22px 26px 0; border: 0; }
.q-tool-panel .tp-head .q-chip-mark { width: 40px; height: 40px; border-radius: 12px; border-color: rgba(31,92,99,.14); box-shadow: 0 1px 2px rgba(31,92,99,.06); }
.q-tool-panel .tp-head .q-chip-mark img { width: 22px; height: 22px; }
.tp-title b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.tp-title small { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); }
.tp-status { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 5px 11px 5px 9px; border-radius: 999px; border: 1px solid; font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.tp-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.tp-status.is-live { color: var(--teal-ink); border-color: rgba(31,92,99,.24); background: #fff; }
.tp-status.is-rollout { color: var(--rust); border-color: var(--rust-line); background: #fff; }
.tp-job { margin: 18px 26px 0; font-size: 17.5px; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); }
.tp-app { --app: #f4f6f7; margin: 18px 26px 0; border-radius: var(--r-card); overflow: hidden; background: #fff; border: 1px solid rgba(20,30,32,.08); box-shadow: 0 1px 2px rgba(20,30,32,.05), 0 14px 28px -22px rgba(20,30,32,.3); }
.tp-app figcaption { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; background: var(--app); font-size: 12.5px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid rgba(20,30,32,.06); }
.tp-app figcaption img { width: 14px; height: 14px; }
.tp-app-in { display: flex; flex-direction: column; gap: 8px; padding: 14px; font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.tp-app-in .q-bubble { font-size: 14px; max-width: 88%; animation: none; }
.tp-app-in .q-them { background: #f1f1f3; border: 0; }
.tp-app-imessage { --app: #f4f6f7; } .tp-app-telegram { --app: #f4f6f7; } .tp-app-slack { --app: #f4f6f7; } .tp-app-gmail { --app: #f4f6f7; }
.tp-app-calendar { --app: #f4f6f7; } .tp-app-granola { --app: #f4f6f7; } .tp-app-claude { --app: #f4f6f7; } .tp-app-chatgpt { --app: #f4f6f7; }
.tp-doc { margin: 0; padding: 2px 2px 8px; font: 500 14.5px/1.45 var(--body); color: var(--ink); border-bottom: 1px solid rgba(20,30,32,.06); }
.tp-fy { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; font-family: var(--body); }
.tp-fy-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--tile-pearl-teal); color: #fff; }
.tp-fy-av svg { width: 14px; height: 14px; fill: currentColor; }
.tp-fy b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.tp-fy p { margin: 1px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.tp-kept { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 18px 26px 0; padding: 14px 16px; border-radius: var(--r-card); background: linear-gradient(180deg, #f7f9fa, #f1f4f5); box-shadow: inset 0 0 0 1px var(--line); }
.tp-kept-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tile-pearl-teal); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 6px -2px rgba(31,92,99,.55); }
.tp-kept-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-kept small { display: block; font-size: 12.5px; color: var(--teal-ink); }
.tp-kept p { margin: 2px 0 0; font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.tp-kept-state { font-size: 12.5px; font-weight: 600; color: var(--teal-ink); }
.tp-foot { padding: 20px 26px 22px; }
.tp-steps { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: tp; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.tp-steps li { position: relative; padding-left: 28px; counter-increment: tp; }
.tp-steps li::before { content: counter(tp); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--teal-soft, #e8f2f2); color: var(--teal-ink); font-size: 11px; font-weight: 600; }
.tp-connector { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 14px; font-size: 13.5px; color: var(--ink-2); }
.tp-connector code { padding: 4px 10px; border-radius: 8px; background: var(--fill); font: 500 13px/1.4 var(--body); color: var(--ink); }
.tp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tp-cta small { color: var(--muted); font-size: 13.5px; }
.tp-private { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.tp-private svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 640px) { .q-tool-panel .tp-head, .tp-job, .tp-app, .tp-kept { margin-inline: 18px; } .q-tool-panel .tp-head { padding-inline: 18px; flex-wrap: wrap; } .tp-status { margin-left: 0; } .tp-foot { padding-inline: 18px; } }
.tp-title { flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) { .tp-status { flex: 0 0 auto; width: max-content; margin-top: 2px; } }
@media (max-width: 640px) { .q-tool-panel .tp-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px 14px; } .tp-status { grid-column: 1 / -1; justify-self: start; margin: 0; } }

/* "Work like it" lede: four thoughts with a line of air between them. */
.how-head .how-lede { display: grid; gap: clamp(12px, 1.2vw, 18px); margin-top: 6px; }
.how-head .how-lede p { margin: 0; font-weight: 600; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.5; color: var(--ink-2); padding: 0; max-width: none; }
.how-head .how-lede p b { font-weight: 700; color: var(--ink); }
@media (min-width: 961px) { .how-head .how-lede { text-align: right; justify-self: end; } }
@media (max-width: 420px) { .how-head .how-lede p { font-size: 16px; line-height: 1.5; } }

/* ---------- Round 20 */
/* 1. Maya header raised; the intro sits lower with a large avatar to the left, so the hand-off runs further down to it. */
.one-call { padding-top: clamp(56px, 6vw, 88px); }
.one-call-head { align-items: start; }
.one-call-intro { display: flex; align-items: center; gap: clamp(16px, 1.6vw, 24px); justify-self: end; margin-top: clamp(48px, 6vw, 104px); }
.one-call-intro .one-call-lede { text-align: left !important; justify-self: auto; font-size: clamp(22px, 1.9vw, 30px) !important; line-height: 1.35; padding: 0; }
.one-call-intro .one-call-lede b { color: var(--ink); }
.one-call-lede.is-lit b { color: var(--teal); }
.maya-mark { width: clamp(64px, 5.6vw, 84px); height: clamp(64px, 5.6vw, 84px); margin: 0; vertical-align: middle; flex: none; background: linear-gradient(180deg, #fff, #f3f8f8); border: 1px solid rgba(31,92,99,.16); box-shadow: 0 1px 2px rgba(31,92,99,.06), 0 16px 32px -20px rgba(31,92,99,.45), 0 0 0 0 rgba(31,92,99,.18); }
.maya-mark svg { width: 70%; height: 70%; }
.maya-mark svg circle { fill: var(--teal); opacity: .3; }
.maya-mark.is-lit { background: linear-gradient(180deg, #fff, #eef6f6); box-shadow: 0 1px 2px rgba(31,92,99,.06), 0 16px 32px -20px rgba(31,92,99,.45), 0 0 0 6px rgba(31,92,99,.1); }
.maya-mark.is-lit svg circle { opacity: 1; }
@media (max-width: 960px) { .one-call-intro { justify-self: start; margin-top: var(--s-5); } .one-call-intro .one-call-lede { font-size: 20px !important; } .maya-mark { width: 56px; height: 56px; } }
/* 2. Maya's four beats in the tool-card language: a soft panel, windows with tinted title bars, a kept result as a check-row. */
.stage { border-radius: var(--r-panel); background: linear-gradient(180deg, #fff 0%, #f3f8f8 100%); border: 1px solid rgba(31,92,99,.12); box-shadow: 0 1px 2px rgba(31,92,99,.05), 0 32px 64px -44px rgba(31,92,99,.4); }
.stage .scene { padding: clamp(24px, 2.6vw, 40px); justify-content: center; gap: var(--s-4); }
.stage .m-card { flex: 0 1 auto; width: 100%; }
.m-card { border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: 0 1px 2px rgba(20,30,32,.05), 0 20px 40px -28px rgba(20,30,32,.35); }
.m-head { --app: #f4f5f7; padding: 12px 20px; background: var(--app); border-bottom: 1px solid rgba(20,30,32,.06); }
.m-head b { font-size: 15px; }
.m-head img { width: 18px; height: 18px; }
.m-row { padding: 22px 24px; gap: 6px; }
.m-row + .m-row { border-top: 0; }
.m-call { font-size: clamp(19px, 1.5vw, 23px); font-weight: 600; text-decoration: none; letter-spacing: -.015em; }
.m-keptrow { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 18px 20px 0; padding: 16px 18px; border-radius: var(--r-card); background: linear-gradient(180deg, #f7f9fa, #f1f4f5); box-shadow: inset 0 0 0 1px var(--line); }
.m-keptrow small { font-size: 13px; color: var(--teal-ink); }
.m-keptrow .m-call { margin-top: 3px; font-size: clamp(18px, 1.4vw, 21px); }
.m-check { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tile-pearl-teal); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 6px -2px rgba(31,92,99,.55); }
.m-check svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-state { font-size: 13px; font-weight: 600; color: var(--teal-ink); }
.m-note { margin: 10px 20px 20px; padding: 16px 18px; border-radius: var(--r-card); background: var(--teal-wash, #eef6f6); grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
.m-note .m-q { width: 32px; height: 32px; border-radius: 10px; }
.m-note p { font-size: 16.5px; }
.m-msg { padding: 18px 22px; gap: 14px; }
.m-msg + .m-msg { border-top: 0; padding-top: 4px; }
.m-av { border-radius: var(--r-card); background: linear-gradient(180deg, #e3e7ea, #d5dbdf); color: #2c363c; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.m-av-q { background: var(--tile-pearl-teal); color: #fff; box-shadow: none; }
.m-who b { font-size: 15.5px; }
.m-msg p { font-size: 17px; }
.m-actions { gap: 10px; margin-top: 12px; }
.m-actions .m-kept { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px 6px 9px; border-radius: var(--r-btn); border: 1px solid #1c565d; border-bottom-color: var(--teal-ink); background: linear-gradient(180deg, var(--teal-hi), var(--teal)); box-shadow: var(--teal-shadow); color: #fff; font-size: 13.5px; font-weight: 500; }
.m-actions .m-kept svg { stroke: #fff; }
.m-actions .m-quiet { padding: 6px 12px; border-radius: var(--r-btn); border: 1px solid var(--line-strong); border-bottom-color: var(--line-edge); background: linear-gradient(180deg, #fff, #f3f5f6); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(14,20,23,.06); font-size: 13.5px; color: var(--ink-2); }
.m-profile .m-head { --app: #f4f6f7; }
.m-profile .m-row:not(.m-status) { padding-bottom: 8px; }
.m-profile .m-row > small { color: var(--teal-ink); font-weight: 600; }
.m-status { margin: 8px 20px 20px; padding: 14px 18px; border-radius: var(--r-card); background: var(--fill); }
.m-status p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.m-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(31,92,99,.24); font-size: 12.5px; font-weight: 600; color: var(--teal-ink); }
.m-before { padding: 0 4px; }
.chat-screen { border-radius: var(--r-panel); overflow: hidden; background: #fff; border: 1px solid rgba(20,30,32,.08); box-shadow: 0 1px 2px rgba(20,30,32,.05), 0 20px 40px -28px rgba(20,30,32,.35); }
.chat-head { padding: 12px 20px; background: #f4f6f7; border-bottom: 1px solid rgba(20,30,32,.06); }
.chat-head b { font-size: 15px; }
.chat-head small { font-size: 12.5px; }
.chat-screen .chat-reply { border-top: 0; background: transparent; padding: 10px 24px 22px; }
.chat-screen .chat-reply span { border-radius: 999px; border: 1px solid rgba(20,30,32,.12); font-weight: 500; }
.chat-screen .chat-reply .is-picked { background: var(--blue); border-color: var(--blue); }
.stage .scene-chat { padding: clamp(24px, 2.6vw, 40px); }
.stage .chat-screen { height: 100%; }
/* 3. The ecosystem reads larger: bigger chips, wider card, larger type. */
.q-flow { grid-template-columns: minmax(230px, 300px) minmax(48px, 1fr) minmax(0, 720px); }
.q-tool { height: 52px; padding: 0 20px 0 14px; gap: 12px; font-size: 17px; }
.q-tool .q-chip-mark { width: 30px; height: 30px; border-radius: 8px; }
.q-tool .q-chip-mark img { width: 18px; height: 18px; }
.q-tools { gap: 10px; }
.q-tool-step { font-size: 13px; }
.tp-title b { font-size: 20px; }
.tp-title small { font-size: 14px; }
.tp-job { font-size: 19px; margin-top: 20px; }
.tp-app-in .q-bubble { font-size: 15.5px; }
.tp-fy p, .tp-fy b { font-size: 15.5px; }
.tp-doc { font-size: 15.5px; }
.tp-kept p { font-size: 18px; }
.tp-kept small { font-size: 13.5px; }
.tp-steps { font-size: 15px; }
.q-tool-panel .tp-head { padding: 26px 30px 0; }
.tp-job, .tp-app, .tp-kept { margin-inline: 30px; }
.tp-foot { padding-inline: 30px; }
@media (max-width: 960px) { .q-tool { height: 46px; font-size: 15px; } .tp-job, .tp-app, .tp-kept { margin-inline: 18px; } .q-tool-panel .tp-head, .tp-foot { padding-inline: 18px; } }
/* 4. The teal section's three figures in the same language: windows with title bars, no dashes, no underlines. */
.gt-fig { border-radius: var(--r-panel); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.gt-fig figcaption { padding: 12px 16px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 600; }
.gt-tool-list li + li { border-top: 0; }
.gt-tool-list li { grid-template-columns: 30px auto minmax(0, 1fr); padding: 10px 14px; border-radius: var(--r-card); margin: 2px 6px; }
.gt-tool-list li img { width: 18px; height: 18px; padding: 6px; box-sizing: content-box; border-radius: 8px; background: #fff; }
.gt-record { border-radius: var(--r-panel); }
.gt-record figcaption { background: #f4f6f7; border-bottom-color: rgba(20,30,32,.06); color: var(--ink-2); }
.gt-rec-row { padding: 14px 16px 14px 38px; }
.gt-rec-row + .gt-rec-row { border-top: 0; }
.gt-rec-row::before { left: 16px; top: 19px; width: 12px; height: 12px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 3px var(--rust-ring); }
.gt-rec-row small { font-weight: 500; }
.gt-rec-row p { font-weight: 600; text-decoration: none; letter-spacing: -.01em; }
.gt-rec-row.is-out { margin: 6px 10px 10px; padding: 14px 16px 14px 38px; border-radius: var(--r-card); background: linear-gradient(180deg, #f7f9fa, #f1f4f5); }
.gt-rec-row.is-out::before { left: 16px; background: var(--teal); box-shadow: 0 0 0 3px rgba(31,92,99,.14); }
.gt-rec-row.is-out small { color: var(--teal-ink); }
.gt-rec-row.is-out p { font-weight: 500; }
.gt-rec-row.is-out p b { font-weight: 600; text-decoration: none; }
/* 5. Carousel lede: air between the two sentences; the top fade stays a wash, not a highlight. */
.bridge-head .sub-l { display: block; }
.bridge-head .sub-l + .sub-l { margin-top: .4em; }
.bridge::before { background: linear-gradient(90deg, #f6f8f9 0%, #f6f8f9 30%, #f1f7f7 60%, #f6f8f9 100%); mask: linear-gradient(180deg, rgba(0,0,0,.7) 0, rgba(0,0,0,.4) 50%, transparent 100%); -webkit-mask: linear-gradient(180deg, rgba(0,0,0,.7) 0, rgba(0,0,0,.4) 50%, transparent 100%); }
/* Right-column ledes: one sentence per row on desktop, however long. */
@media (min-width: 961px) { .how-head .how-lede p, .gather-head p { white-space: nowrap; } .how-head .how-lede p br { display: none; } .how-head, .gather-head { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.q-tool img { width: 22px; height: 22px; }
/* Beats 2–4 fill the panel: the cards render a step larger inside the stage. */
@media (min-width: 1200px) { .stage .m-card, .stage .m-before { zoom: 1.14; } }
.stage .scene { gap: var(--s-5); }
@media (max-width: 640px) { .m-keptrow { grid-template-columns: 28px minmax(0, 1fr); margin: 14px 14px 0; padding: 14px; } .m-keptrow .m-check { width: 28px; height: 28px; } .m-keptrow small { font-size: 12.5px; } .m-keptrow .m-state { grid-column: 2; justify-self: start; } .m-note, .m-status { margin-inline: 14px; } .m-row { padding: 18px; } }

/* ---------- Round 21: the life rail. A record that grows with a life, drifting up the figure's right edge. */
.fy-life { position: absolute; right: clamp(16px, 2vw, 32px); top: clamp(20px, 2.4vw, 36px); bottom: clamp(20px, 2.4vw, 36px); width: clamp(180px, 16vw, 236px); overflow: hidden; pointer-events: auto;
  mask: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); -webkit-mask: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
.fy-life::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: rgba(31,92,99,.18); }
.fy-life-track { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: clamp(22px, 2.4vw, 32px); animation: life-drift var(--dur, 50s) linear infinite; will-change: transform; }
.fy-life:hover .fy-life-track { animation-play-state: paused; }
@keyframes life-drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.fy-life-track li { position: relative; display: grid; gap: 2px; transition: opacity .4s; }
.fy-life-track li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1.5px solid rgba(31,92,99,.45); box-sizing: border-box; transition: background-color .4s, border-color .4s, box-shadow .4s; }
.fy-life-track li.is-now::before { background: var(--rust); border-color: var(--rust); box-shadow: 0 0 0 3px var(--rust-ring); }
.fy-life-track small { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--teal); }
.fy-life-track b { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); line-height: 1.3; }
.fy-life-track p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.fy-life-track li.is-now b { color: var(--teal-ink); }
/* The figure and its labels keep clear of the rail. */
@media (min-width: 961px) { .fy-canvas { width: calc(100% - clamp(200px, 18vw, 268px)); } .fy-hint { right: auto; left: clamp(16px, 2vw, 28px); } .fy-card[data-pos="tr"], .fy-card[data-pos="br"] { right: auto; left: clamp(8px, 2vw, 32px); } }
@media (max-width: 960px) { .fy-life { display: none; } }
@media (prefers-reduced-motion: reduce) { .fy-life-track { animation: none; } .fy-life { mask: none; -webkit-mask: none; overflow: auto; } }

/* ---------- Round 22 */
/* 1. The teal section reads: the record is a light card again; iMessage sits in the tools list so every record row has a visible source. */
.gt-fig.gt-record { background: #fff; border-color: transparent; }
.gt-record figcaption { background: #f4f6f7; color: var(--ink-2); }
.gt-rec-row small { color: var(--ink-2); }
.gt-rec-row p { color: var(--ink); }
.gt-fig figcaption { color: #e3eeee; }
.gt-tool-list li span, .gt-hint { color: #d2e4e5; }
.gt-tool-list li.is-hot, .gt-tool-list li:hover, .gt-tool-list li:focus-visible { background: rgba(255,255,255,.12); }
.gt-wires path { stroke: rgba(255,255,255,.5); }
/* Contrast. */
.car-fig-you figcaption { color: #2c363c; }
.cf-you { background: radial-gradient(circle at var(--hx) var(--hy), #4f969e 0%, var(--teal) 42%, #174a50 100%); }
.closing h2 .v, .closing h2 span, .close-2 { color: #d7ecee; }
/* 2. Staggered ledes: each line steps in from the right, the way Maya's intro cascades. */
@media (min-width: 961px) {
  .lede-stack { display: grid; gap: clamp(10px, 1vw, 16px); text-align: right; justify-self: end; }
  .lede-stack p { margin: 0; white-space: nowrap; }
  .lede-stack p:nth-child(2) { margin-right: 1.5em; } .lede-stack p:nth-child(3) { margin-right: 3em; } .lede-stack p:nth-child(4) { margin-right: 4.5em; }
  .who-head { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.gather .gather-lede p { font-weight: 600; font-size: clamp(19px, 1.6vw, 25px); line-height: 1.5; color: var(--g-text-2); padding: 0; }
.who-lede .sec-lede { padding: 0; }
@media (max-width: 960px) { .lede-stack { display: grid; gap: 6px; } .lede-stack p { margin: 0; } }
/* 3. */
.bridge-q { font-size: clamp(36px, 4.5vw, 68px); }
/* Life rail: a clear end to each cycle before it begins again. */
.fy-life-cap { margin-top: clamp(10px, 1vw, 16px); padding-bottom: clamp(56px, 6vw, 88px); gap: 10px; }
.fy-life-cap::before { display: none; }
.fy-life-q { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -29px; border-radius: 8px; background: var(--tile-pearl-teal); color: #fff; }
.fy-life-q svg { width: 13px; height: 13px; fill: currentColor; }
.fy-life-cap b { color: var(--teal-ink); font-size: 13px; }
.fy-life-cap::after { content: ""; position: absolute; left: -20px; right: 0; bottom: clamp(26px, 3vw, 42px); height: 1px; background: linear-gradient(90deg, rgba(31,92,99,.35), rgba(31,92,99,0)); }
.gt-fig.gt-record figcaption { color: var(--ink-2); background: #f4f6f7; }
.gt-fig.gt-record figcaption svg { stroke: var(--ink-2); }
@media (min-width: 961px) { .fy-hint { left: calc((100% - clamp(200px, 18vw, 268px)) / 2); translate: -50% 0; right: auto; } }
/* Hero line 2: semibold, 15% larger, one clause per line. */
.hero-lede { font-weight: 600; font-size: clamp(21px, 2.2vw, 32px); max-width: none; line-height: 1.3; color: var(--ink-2); }
@media (min-width: 961px) { .hero-lede { white-space: nowrap; } }
@media (max-width: 960px) { .hero-lede br { display: none; } }
@media (max-width: 420px) { .hero-lede { font-size: 19px; } }
/* Correction: no horizontal cascade. The stagger is vertical: the lede block starts lower than the headline, as in Maya's head. */
@media (min-width: 961px) {
  .lede-stack p:nth-child(2), .lede-stack p:nth-child(3), .lede-stack p:nth-child(4) { margin-right: 0; }
  .how-head, .gather-head, .who-head { align-items: start; }
  .how-head .how-lede, .gather-head .gather-lede, .who-head .who-lede { margin-top: clamp(48px, 6vw, 104px); align-self: start; }
}

/* Teal column titles carry a small dimensional tile: a presence mark, connected nodes, a vault. */
.gt-col h3 { display: flex; align-items: center; gap: 12px; }
.gt-ico { display: grid; place-items: center; flex: none; width: clamp(36px, 3vw, 42px); height: clamp(36px, 3vw, 42px); border-radius: 11px; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px -14px rgba(0,0,0,.6); transition: transform .35s var(--ease-out), background-color .3s, border-color .3s, box-shadow .3s; }
.gt-ico svg { width: 58%; height: 58%; }
.gt-col:hover .gt-ico, .gt-col:focus-within .gt-ico { transform: translateY(-2px); border-color: rgba(159,223,228,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 12px 26px -14px rgba(0,0,0,.65), 0 0 0 4px rgba(159,223,228,.12); color: var(--g-accent, #9fdfe4); }
.gt-ico-dial { transform-origin: 12px 12px; transition: transform .7s var(--ease-out); }
.gt-col:hover .gt-ico-dial, .gt-col:focus-within .gt-ico-dial { transform: rotate(60deg); }
.gt-ico-links { stroke-dasharray: 6; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease-out); }
.gt-col:hover .gt-ico-links { stroke-dashoffset: -12; }
.gt-ico-dots { transition: opacity .3s; }
.gt-col:hover .gt-ico-fy .gt-ico-dots { animation: gt-typing 1.1s ease-in-out infinite; }
@keyframes gt-typing { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gt-ico, .gt-ico-dial, .gt-ico-links { transition: none; } .gt-col:hover .gt-ico-fy .gt-ico-dots { animation: none; } .gt-col:hover .gt-ico-dial { transform: none; } .gt-col:hover .gt-ico-links { stroke-dashoffset: 0; } }
@media (max-width: 640px) { .gt-ico { width: 34px; height: 34px; border-radius: 10px; } }

/* Section heads: headlines a step larger; the lede sits well below the headline and fades in after it. */
.sec-title, .one-call-head h3 { font-size: clamp(39px, 5.2vw, 74px); }
.fy-copy .sec-title.fy-title { font-size: clamp(39px, 4.6vw, 66px); }
@media (min-width: 961px) { .how-head .how-lede, .gather-head .gather-lede, .who-head .who-lede, .one-call-intro { margin-top: clamp(72px, 9vw, 150px); } }
.reveal.is-in.lede-late { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) { .reveal.is-in.lede-late { transition-delay: 0s; } }
/* Life-rail end cap: the Q tile sits on the rail line like the year markers; the text keeps the chapter column. */
.fy-life::before { left: 17px; }
.fy-life-track { padding-left: 34px; }
.fy-life-cap { position: relative; display: block; }
.fy-life-cap b { display: block; line-height: 1.45; padding-top: 3px; }
.fy-life-q { position: absolute; left: -30px; top: 0; margin: 0; width: 26px; height: 26px; }
.fy-life-cap::after { left: -34px; }

/* ---------- Statement heads. The headline runs the full width at display size; the lede is a second beat, lower and to the right,
   fading and rising in with the scroll (--lp set by main.js). */
.how .how-head, .gather .gather-head, #story .who-head, .one-call .one-call-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; }
.how .sec-title, .gather .sec-title, .who-head .sec-title, .one-call-head h3 { font-size: clamp(52px, 7.6vw, 112px); line-height: .98; letter-spacing: -.022em; max-width: none; }
.how .sec-title.two-line span:first-child, .who-head .sec-title.two-line span:first-child { max-width: 11ch; }
.gather .sec-title { max-width: 12ch; }
.one-call-head h3 { max-width: 12ch; }
.how .how-head .how-lede, .gather .gather-head .gather-lede, #story .who-head .who-lede, .one-call .one-call-intro { margin-top: clamp(64px, 8vw, 140px); justify-self: end; }
.lede-scroll { --lp: 0; opacity: var(--lp); transform: translateY(calc((1 - var(--lp)) * 28px)); will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) { .lede-scroll { opacity: 1; transform: none; } }
@media (max-width: 960px) { .how .sec-title, .gather .sec-title, .who-head .sec-title, .one-call-head h3 { font-size: clamp(40px, 11vw, 60px); } .how-head .how-lede, .gather-head .gather-lede, .who-head .who-lede, .one-call-intro { margin-top: clamp(28px, 7vw, 40px); justify-self: start; } }
/* Statement heads, tuned: confident headline, a larger lede set on its own column inside the right gutter. */
.how .sec-title, .gather .sec-title, .who-head .sec-title, .one-call-head h3 { font-size: clamp(46px, 6.1vw, 88px); line-height: 1; letter-spacing: -.022em; }
@media (min-width: 961px) {
  .how .how-head .how-lede, .gather .gather-head .gather-lede, #story .who-head .who-lede, .one-call .one-call-intro { margin-top: clamp(48px, 6vw, 96px); padding-right: clamp(24px, 6vw, 104px); max-width: 64ch; }
  .how-head .how-lede p, .gather .gather-lede p, .who-lede .sec-lede { font-size: clamp(21px, 1.75vw, 27px); line-height: 1.45; }
  .how-head .how-lede, .gather .gather-lede, .who-head .who-lede { gap: clamp(12px, 1.2vw, 18px); }
  .lede-scroll { transform: translateY(calc((1 - var(--lp)) * 22px)); }
}
.how .sec-title.two-line span:first-child { max-width: 16ch; }
/* ---------- Heads, iteration 1: one shared lede column, headline scale eased, rhythm tuned to line count, Maya in the family, mobile contained. */
:root { --lede-inset: clamp(24px, 6vw, 86px); }
.how .sec-title, .gather .sec-title, .who-head .sec-title, .one-call-head h3 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.022em; }
@media (min-width: 961px) {
  .how .how-head .how-lede, .gather .gather-head .gather-lede, #story .who-head .who-lede, .one-call .one-call-intro { margin-right: 0; padding-right: var(--lede-inset); max-width: none; width: auto; justify-self: end; }
  /* Three-line headlines get a shorter beat; two-line headlines a longer one, so the second beat lands about one headline-line below in both cases. */
  .how .how-head .how-lede, .gather .gather-head .gather-lede { margin-top: clamp(40px, 4.8vw, 72px); }
  #story .who-head .who-lede, .one-call .one-call-intro { margin-top: clamp(56px, 6.6vw, 100px); }
  .one-call-intro { flex-direction: row-reverse; }
  .one-call-intro .one-call-lede { text-align: right !important; }
}
@media (max-width: 960px) {
  .lede-stack, .how-lede, .gather-lede, .who-lede { justify-self: start; text-align: left; padding-right: 0; margin-left: 0; margin-right: 0; max-width: none; width: auto; }
  .lede-stack p, .how-lede p, .gather-lede p, .who-lede p { white-space: normal; margin: 0; text-align: left; }
  .who-lede { gap: 0; }
  .who-lede .sec-lede + .sec-lede { margin-top: 0; }
  .how-head .how-lede p, .gather .gather-lede p, .who-lede .sec-lede, .sec-lede { font-size: 17px; line-height: 1.5; }
}
@media (max-width: 960px) { .how .how-head .how-lede, .gather .gather-head .gather-lede, #story .who-head .who-lede, .one-call .one-call-intro { justify-self: start; padding-right: 0; margin-top: clamp(28px, 7vw, 40px); } .one-call .one-call-intro { flex-direction: row; } .one-call-intro .one-call-lede { text-align: left !important; } }

/* ---------- Heads, iteration 2: one rule for the beat (0.85 headline-size of air under every headline), headline eased to 72px,
   Maya's avatar lives in the inset so her text ends on the shared column too, the lede arrives a little earlier in the scroll. */
:root { --head-size: clamp(42px, 5vw, 72px); }
.how .sec-title, .gather .sec-title, .who-head .sec-title, .one-call-head h3 { font-size: var(--head-size); }
@media (min-width: 961px) {
  .how .how-head .how-lede, .gather .gather-head .gather-lede, #story .who-head .who-lede, .one-call .one-call-intro { margin-top: calc(var(--head-size) * .85); }
  .one-call .one-call-intro { padding-right: 0; gap: 16px; }
  .one-call .one-call-intro .maya-mark { width: calc(var(--lede-inset) - 16px); height: calc(var(--lede-inset) - 16px); }
}

/* Space between each lede and the visual that follows; sentence gap only between sentences. */
@media (min-width: 961px) { .how .how-head .how-lede, .gather .gather-head .gather-lede, #story .who-head .who-lede, .one-call .one-call-intro { margin-bottom: clamp(72px, 8vw, 120px); } }
@media (max-width: 960px) { .how .how-head .how-lede, .gather .gather-head .gather-lede, #story .who-head .who-lede, .one-call .one-call-intro { margin-bottom: clamp(40px, 10vw, 64px); } }
.who-head .who-lede { gap: clamp(10px, 1vw, 16px); }
/* The lede's bottom margin is the only space before each head's visual. */
.how .flow-mount, .gather .gather-flow, #story .asks, .one-call .story-grid { margin-top: 0; }
#story .asks { margin-top: 22px; }
@media (max-width: 960px) { #story .asks { margin-top: 28px; } }

/* Carousel segue: a plain line before the people, so a reader knows why they are here. */
.car-bridge { position: relative; z-index: 1; margin: 0 auto clamp(20px, 2.4vw, 32px); text-align: center; font-size: clamp(17px, 1.3vw, 19px); font-weight: 600; letter-spacing: -.005em; color: var(--ink-2); }
/* Detector: hint and footer muted text contrast. */
.fy-hint { color: #5b6670; opacity: 1; }
.site-foot .foot-muted, .site-foot small, .site-foot p { color: #bcd3d5; }

/* Pass 2: mobile tools grid restored; persona cards in the page's card language; FAQ heading room on mobile. */
@media (max-width: 960px) { .q-flow { grid-template-columns: minmax(0, 1fr) !important; } .q-wires { display: none; } }
.ask { border-radius: var(--r-card); border-color: var(--line); box-shadow: 0 1px 2px rgba(20,30,32,.04), 0 16px 32px -28px rgba(20,30,32,.3); }
@media (max-width: 960px) { .faq-grid > .sec-title { margin-bottom: 20px; } }
/* Teal section breathes below the three CTAs; even rhythm down each column. */
.gather { padding-bottom: clamp(96px, 10vw, 140px); }
.gt-col { row-gap: var(--s-5); }
.gt-col .cta-link { margin-top: 4px; }
@media (max-width: 640px) { .gather { padding-bottom: 80px; } }
#who.gather { padding-bottom: clamp(96px, 10vw, 140px); }
@media (max-width: 640px) { #who.gather { padding-bottom: 80px; } }
/* Explicit inner padding on bordered and tinted containers. */
.ask-panel { padding: 24px; }
.car-slide { padding: 28px; }
.stage .scene { padding: 32px; }
@media (max-width: 640px) { .ask-panel { padding: 18px; } .car-slide { padding: 18px; } .stage .scene { padding: 20px; } }
.scene { padding: 24px; }
@media (max-width: 960px) { .chapter > .scene { padding: 16px; } .chapter > .scene-chat { padding: 0; } }

/* ---------- Mobile pass, iteration 1 */
@media (max-width: 640px) {
  /* Hero bar: prompt on top, button full width below. */
  .hero .ask-bar { flex-wrap: wrap; border-radius: var(--r-panel); padding: 14px 14px 12px; gap: 10px 12px; }
  .hero .ask-bar .ask-text { flex: 1 1 calc(100% - 60px); font-size: 17px; }
  .hero .ask-bar .ask-go { flex: 1 1 100%; min-height: 48px; justify-content: center; }
  .ask-chip { min-height: 44px; padding: 0 16px; font-size: 15px; }
  /* Dock: a compact pill, out of the way of content. */
  .ask-dock { width: auto; left: auto; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); margin: 0; }
  .ask-dock .ask-bar { min-height: 56px; padding: 6px 6px 6px 8px; gap: 8px; }
  .ask-dock .ask-mark { width: 42px; height: 42px; }
  .ask-dock .ask-mark svg { width: 22px; height: 22px; }
  .ask-dock .ask-text { display: none; }
  .ask-dock .ask-go { min-height: 44px; padding: 0 16px; font-size: 15px; }
  /* Tap targets. */
  .nav-links a, .site-head .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .site-head .btn-small { min-height: 44px; padding: 0 18px; }
  .chat-screen .chat-reply span, .chat-reply span { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .cf-node { height: 44px; }
  .q-tool { height: 46px; }
  /* Label floor. */
  .car-fig figcaption, .q-tool-step, .tp-status, .tp-kept small, .tp-kept-state, .tp-private, .q-flow-foot, .m-lock, .m-state, .m-head small, .fy-card small, .illus { font-size: 13px; }
  /* Maya beats: no forced viewport-height chapters on a phone. */
  .chapter, .chapter:first-child { min-height: 0; padding-block: 28px 8px; justify-content: flex-start; }
  .chapter + .chapter { margin-top: 24px; }
  .chapter > .scene { margin-top: 16px; }
  /* Tighter section rhythm on a phone. */
  .band { padding-block: 64px; }
  .bridge { padding-block: 56px 48px; }
  .how .how-head { padding-top: 40px; }
  .fy-intro { padding-block: 56px 40px; }
  .fy-stage { grid-template-rows: 360px auto; }
  .fy-canvas { height: 360px; }
  .one-call { padding-top: 48px; padding-bottom: 56px; }
  .resource-band { padding-block: 64px 72px; }
  .closing { padding-block: 64px; }
  .leaks-band { padding-block: 64px 40px; }
  .flow-mount { margin-top: 32px; }
}

/* ---------- Mobile pass, iteration 2: shorter page, touch targets everywhere touch is likely. */
@media (max-width: 1024px), (pointer: coarse) {
  .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .site-head .btn-small { min-height: 44px; }
  .ask-chip { min-height: 44px; }
  .q-suggest button, .chat-reply span, .chat-screen .chat-reply span { min-height: 44px; }
  .cf-node { height: 44px; }
  .q-faq summary, .gt-more summary { min-height: 44px; }
  .site-foot a { display: inline-block; padding-block: 10px; }
  .site-foot nav a, .foot-links a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 640px) {
  /* The strip: two columns instead of four stacked blocks. */
  .leaks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .leaks li { padding: 0; }
  .leaks li h3, .leaks li b { font-size: 18px; }
  .leaks-band { padding-block: 56px 32px; }
  .bridge-ask { margin-top: 40px; }
  /* Teal columns: names only in the tools list, tighter rows. */
  .gt-tool-list li { padding: 8px 12px; }
  .gt-tool-list li span { display: none; }
  .gt-hint { display: none; }
  .gt-chat-in .q-them { font-size: 13.5px; }
  .gt-fig { margin-bottom: 16px; }
  .gather { padding-top: 56px; }
  .gather-flow { gap: 40px; }
  /* Maya: tighter copy block per beat. */
  .chapter h4 { font-size: 24px; }
  .chapter > p { font-size: 16px; }
  /* Persona cards and network. */
  .asks { gap: 10px; }
  .ask { padding: 16px; }
  .cf-you { width: 120px; height: 120px; }
  .cf-you b { font-size: 18px; }
  .confluence { --cf-gap: 56px; }
  /* Hero: phone a touch smaller so the fold hands over sooner. */
  .q-phone { height: 720px; }
  .hero .wrap { padding-bottom: 40px; }
}
@media (max-width: 640px) {
  /* Strip: one column of compact rows, icon beside the text, natural wrapping. */
  .leaks { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .leaks li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 0; }
  .leaks li .leak-ico { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .leaks li h3, .leaks li b, .leaks li p { grid-column: 2; }
  .leaks li br { display: none; }
  .leaks li p { font-size: 16px; line-height: 1.45; }
  .q-login { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 640px) { .leaks li > b, .leaks li > span:not(.leak-ico) { grid-column: 2; } .leaks li > span:not(.leak-ico) { font-size: 16px; line-height: 1.45; display: block; } .leaks li > b { font-size: 18px; line-height: 1.25; } }

/* ---------- Mobile pass, iteration 3 */
.site-head { transition: transform .35s var(--ease-out); }
.site-head.is-away { transform: translateY(-100%); }
.ask-dock.is-moving { opacity: 0; transform: translateY(10px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .site-head { transition: none; } .ask-dock.is-moving { opacity: 1; transform: none; pointer-events: auto; } }
@media (max-width: 640px) {
  .site-foot a, .foot-doors a { display: inline-block; padding-block: 12px; }
  .how .how-head .how-lede, .gather .gather-head .gather-lede, #story .who-head .who-lede, .one-call .one-call-intro { margin-bottom: 28px; }
  .car-track { scroll-padding-inline: 16px; }
  .car-slide { flex-basis: calc(100% - 40px); }
}
@media (max-width: 1024px), (pointer: coarse) { .q-login { min-height: 44px; display: inline-flex; align-items: center; } .foot-doors a, .site-foot a { display: inline-block; padding-block: 12px; } }
/* Mobile pass, iteration 4: anchors land below the header; footer doors as rows; the band's bar stacks like the hero's. */
html { scroll-padding-top: 88px; }
section[id], [id="future-you"], [id="one-call"], [id="tools"] { scroll-margin-top: 88px; }
@media (max-width: 640px) {
  .foot-doors { font-size: 0; display: grid; gap: 4px; }
  .foot-doors a { font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .ask-bar.is-band { flex-wrap: wrap; border-radius: var(--r-panel); padding: 14px 14px 12px; gap: 10px 12px; }
  .ask-bar.is-band .ask-text { flex: 1 1 calc(100% - 60px); font-size: 17px; }
  .ask-bar.is-band .ask-go { flex: 1 1 100%; min-height: 48px; justify-content: center; }
  .q-faq i::before, .q-faq i::after { width: 13px; height: 2px; margin: -1px 0 0 -6.5px; }
}
/* Mobile pass, iteration 5: FAQ in one column; strip rows without stray rules; no hover states on touch; label floor; balanced cycle line. */
@media (max-width: 640px) {
  .faq-grid, .band .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .faq-grid > .sec-title { position: static; margin-bottom: 8px; }
  .leaks, .leaks li, .leaks li + li, .leaks li:nth-child(2n), .leaks li:nth-child(2n+1), .leaks li:nth-child(-n+2), .leaks-band .leaks, .leaks-band .leaks li { border: 0; border-radius: 0; }
  .q-tool-step > span, .m-chip, .tp-app figcaption, .m-av, .m-who small, .chat-head small, .fy-card small, .tp-kept small, .fy-life-track p, .q-phone-head .q-back b, .q-contact { font-size: 13px; }
  .ask-home .ask-cycle, .rb-bar .ask-cycle { text-wrap: balance; }
}
@media (hover: none) {
  .leaks li:hover, .leaks li:focus-within { transform: none; background: transparent; box-shadow: none; }
  .leaks li:hover .leak-ico { transform: none; background: var(--tile-pearl); color: var(--ink-2); }
  .leaks li:hover b { color: var(--ink); }
}
/* Mobile pass, iteration 5b: the peeking carousel card reads as "next", not as clipped; label floor extends to tablets. */
@media (max-width: 640px) {
  .car-slide { transition: opacity .35s var(--ease-out); }
  .car-slide:not(.is-current) { opacity: .5; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .car-fig figcaption, .q-tool-step, .q-tool-step > span, .tp-status, .tp-kept small, .tp-kept-state, .tp-private, .q-flow-foot, .m-lock, .m-state, .m-head small, .fy-card small, .m-chip, .tp-app figcaption, .m-av, .m-who small, .chat-head small, .fy-life-track p, .q-phone-head .q-back b, .q-contact { font-size: 13px; }
}
/* Mobile pass, iteration 5c: the two drifting background fades stay still on phones and tablets (they stalled scrolling under software raster and cost battery; desktop keeps its light drift). */
@media (max-width: 1024px), (pointer: coarse) { .bridge::before, .leaks-band::after { animation: none; transform: translateX(12%); will-change: auto; } }

/* ---------- Round 27: Dan's morning review (9 Nov). Desktop rhythm on the statement heads, the carousel's caption, Maya's intro, the closing's field. */
/* 1. Carousel head: headline, lede and caption in one tight stack; the caption larger and muted, set on the row's own left edge. */
.bridge-head .two-line span:last-child { margin-top: clamp(14px, 1.4vw, 22px); color: var(--muted); }
.bridge-head .sub-l + .sub-l { margin-top: .2em; }
.bridge-head { margin-bottom: clamp(36px, 4vw, 56px); }
.car-bridge { margin: 0 auto clamp(22px, 2.4vw, 34px); text-align: left; font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; color: var(--muted); text-wrap: balance; }
/* 2, 5, 6. Statement heads: the lede sits a measured step under the headline, not a screen away; stagger kept. */
@media (min-width: 961px) {
  /* 4. Maya's intro: a size up, pulled left off the gutter, the ring clear of the stream. */
  .one-call .one-call-intro { margin-top: clamp(28px, 3vw, 44px); margin-bottom: clamp(56px, 6vw, 88px); padding-right: calc(var(--lede-inset) + clamp(48px, 7vw, 140px)); gap: clamp(20px, 2vw, 28px); }
  .one-call .one-call-intro .one-call-lede { font-size: clamp(25px, 2.2vw, 35px) !important; line-height: 1.3; }
  .one-call .one-call-intro .maya-mark { width: clamp(80px, 7vw, 104px); height: clamp(80px, 7vw, 104px); }
}
/* 3. Room under the "Meet Future You" badge. */
.fy-copy .fy-meet { margin-bottom: clamp(22px, 2.4vw, 36px); }
/* 7. Closing: the brand teal with the end band's atmosphere. */
.closing { background:
  radial-gradient(55% 75% at 32% 38%, rgba(43,122,130,.40) 0%, rgba(43,122,130,0) 70%),
  radial-gradient(45% 55% at 78% 85%, rgba(15,51,56,.55) 0%, rgba(15,51,56,0) 70%),
  radial-gradient(130% 110% at 50% 50%, rgba(0,0,0,0) 50%, rgba(4,18,20,.55) 100%),
  #1f5c63; }
.closing::before { display: none; }
.closing .btn-light, .closing .btn-primary { color: var(--teal-ink); }
/* 8. Phones: headlines and visuals carry the story; the ledes and sublines step out, and the sections breathe evenly. */
@media (max-width: 640px) {
  .bridge-head .two-line span:last-child, .car-bridge, .how-head .how-lede, .fy-lede, .one-call-lede br, .one-call-lede .ocl-2, .gather-head .gather-lede, .who-head .who-lede, .rb-sub, .close-2, .close-3 { display: none; }
  .band, .bridge, .fy-intro, .gather, .resource-band, .closing, .how .how-head { padding-block: 72px 64px; }
  .how .how-head { padding-bottom: 0; }
  .bridge-head { margin-bottom: 36px; }
  .bridge-head .sec-title { text-align: left; justify-items: start; }
  .how .how-head .how-lede, .gather .gather-head .gather-lede, #story .who-head .who-lede, .one-call .one-call-intro { margin-bottom: 0; }
  .how .how-head .sec-title, .gather .gather-head .sec-title, #story .who-head .sec-title { margin-bottom: 40px; }
  .one-call-head h3 { margin-bottom: 0; }
  .one-call .one-call-intro { margin-top: 24px; margin-bottom: 40px; }
  .fy-copy { gap: 0; }
  .fy-copy .fy-meet { margin-bottom: 18px; }
  .fy-copy .cta-link { margin-top: 28px; }
  .rb-bar { margin-top: 36px; }
  .close-lines { gap: 0; }
  .closing .btn { margin-top: 32px; }
}
/* Round 27, tuned after measuring: the carousel's 150px (margin + padding) collapses to the head's own margin; the statement ledes step 20–28px under their headlines; the carousel lede keeps its ink. */
.bridge-head .two-line span:last-child { color: var(--ink-2); }
.bridge .car { margin-top: 0; padding-top: 0; }
@media (min-width: 961px) {
}
@media (max-width: 640px) { .close-lines .close-2, .close-lines .close-3 { display: none; } }

/* ---------- Round 28: story and value. The rail shows where each kept call went; the teal words breathe; the Future You columns part. */
.fy-life-track .fy-then { display: block; margin-top: 4px; font-style: normal; font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--teal-ink); }
.fy-life-track .fy-then::before { content: "→ "; color: var(--teal); }
@media (min-width: 961px) {
  .fy-grid { gap: clamp(72px, 9vw, 144px); grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
  .gather, #who.gather { padding-bottom: clamp(48px, 5vw, 70px); }
  .gt-col h3 { margin-top: clamp(40px, 5vw, 70px); }
}
@media (max-width: 640px) { .gather, #who.gather { padding-bottom: 40px; } .gt-col h3 { margin-top: 32px; } }
.chapter h4 { max-width: 14ch; }
.chapter > p { font-size: clamp(17px, 1.3vw, 20px); color: var(--muted); }

/* ---------- Round 29: the carousel head and its label; a patina on the past, grey on today; the strip's raised cards; heads to ledes; the teal chat at reading size. */
/* 1. Head → lede a step wider; the bridge line as a small centred label in the system, just above the cards. */
.bridge-head .two-line span:last-child { margin-top: clamp(22px, 2.2vw, 34px); }
.bridge-head { margin-bottom: clamp(28px, 3vw, 44px); }
.car-bridge { margin: 0 auto clamp(16px, 1.8vw, 24px); text-align: center; font-size: 15px; font-weight: 600; letter-spacing: .01em; line-height: 1.4; color: var(--muted); text-wrap: balance; }
/* 2. The four historical cards faded (v5: cool, desaturated); "You, today" on a cool modern grey. */
.car-slide:not(.car-slide-you) { background: linear-gradient(165deg, #f7f9fa 0%, #eef1f3 100%); border-color: #e3e7ea; box-shadow: 0 1px 2px rgba(14,20,23,.05), 0 28px 56px -32px rgba(14,20,23,.35); }
.car-slide:not(.car-slide-you) .car-copy h3, .car-slide:not(.car-slide-you) .car-point { color: #0e1417; }
.car-slide:not(.car-slide-you) .car-copy p { color: #4a555e; }
.car-slide:not(.car-slide-you) .car-fig { filter: grayscale(.4) contrast(.98) brightness(1.02); }
.car-slide:not(.car-slide-you) .car-fig figcaption { color: rgba(255,255,255,.8); }
.car-slide-you { background: linear-gradient(165deg, #f8f8f9 0%, #eef0f2 100%); border-color: #d9dde2; box-shadow: 0 1px 2px rgba(30,35,45,.05), 0 28px 56px -32px rgba(30,35,45,.3); }
.car-slide-you .car-copy h3 { color: var(--ink); }
.car-slide-you .car-copy p { color: var(--ink-2); }
.car-fig-you .car-tile { background: linear-gradient(180deg, rgba(60,66,78,.14), rgba(60,66,78,.05)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 24px 48px -20px rgba(30,35,45,.35), 0 2px 6px rgba(30,35,45,.1); }
/* 3. The grievance strip: resting rows in the page's card language; the raised state a soft white card with a square icon chip. */
.leaks li { border-radius: var(--r-card); transition: transform .35s var(--ease-out), background-color .25s, box-shadow .35s var(--ease-out); }
.leak-ico { border-radius: var(--r-card); background: var(--tile-pearl); color: var(--ink-2); }
.leaks li:hover, .leaks li:focus-within { transform: translateY(-3px); background: #fff; box-shadow: 0 1px 2px rgba(14,20,23,.04), 0 20px 44px -24px rgba(14,20,23,.28), 0 0 0 1px rgba(14,20,23,.04); }
.leaks li:hover .leak-ico { transform: scale(1.06); background: var(--teal); color: #fff; }
.leaks li:hover b { color: var(--ink); }
/* 4. Statement heads: a little more air between headline and lede, consistently. */
@media (min-width: 961px) {
}
/* 5. The teal chat at reading size, filling its panel. */
.gt-chat-in { flex: 1; justify-content: center; gap: 12px; padding: clamp(16px, 1.6vw, 24px); }
.gt-chat-in .q-bubble, .gt-chat-in .q-them { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.42; padding: 12px 16px; max-width: 90%; border-radius: 18px; }
@media (hover: none) { .leaks li:hover, .leaks li:focus-within { transform: none; background: transparent; box-shadow: none; } .leaks li:hover .leak-ico { transform: none; background: var(--tile-pearl); color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(14,20,23,.06), inset 0 1px 0 #fff, 0 1px 2px rgba(14,20,23,.06); } }

/* ---------- Round 29 B/C: one vertical rhythm for the page.
   Scale at 1440: --rh-section 200px = the gap between rooms (clamp 120–208); coloured bands carry 0.7× (140px) inside their top and bottom; --rh-head 44px headline→lede; --rh-lede 96px lede→visual; --rh-inner 56px between figures inside a room.
   Each boundary carries its gap once: paper rooms open above and sit flush below; a coloured band that follows a paper room adds its own margin.
   Phone (≤640): 112px between rooms, coloured bands 80px inside, headline→visual 48px, inner 40px, Maya beats 64px apart. One idea per screen. */
:root { --rh-section: clamp(120px, 14vw, 208px); --rh-band: calc(var(--rh-section) * .7); --rh-head: clamp(30px, 3.2vw, 48px); --rh-lede: clamp(64px, 7vw, 104px); --rh-inner: clamp(40px, 4vw, 64px); }
@media (min-width: 641px) {
  .hero .wrap { padding-bottom: 0; }
  .bridge { padding-top: calc(var(--rh-section) * .6); padding-bottom: 0; }
  .bridge-head { margin-bottom: var(--rh-lede); }
  .leaks-band { margin-top: var(--rh-inner); padding-block: var(--rh-band) var(--rh-section); }
  .how, .how .how-head { padding-top: 0; }
  .how .how-head .how-lede { margin-top: var(--rh-head); margin-bottom: var(--rh-lede); }
  .fy-intro { margin-top: var(--rh-section); padding-block: var(--rh-band); }
  .one-call { padding-block: calc(var(--rh-band) * .6) var(--rh-band); }
  .one-call .one-call-intro { margin-top: calc(var(--rh-head) * 2.4); margin-bottom: var(--rh-lede); }
  .gather, #who.gather { margin-top: 0; padding-block: var(--rh-band) calc(var(--rh-band) * .8); }
  .gather .gather-head .gather-lede { margin-top: var(--rh-head); margin-bottom: var(--rh-lede); }
  .gather-flow { margin-top: 0; }
  .gt-col h3 { margin-top: var(--rh-inner); }
  #story.band { padding-block: var(--rh-section) 0; }
  #story .who-head .who-lede { margin-top: var(--rh-head); margin-bottom: var(--rh-lede); }
  .asks { margin-top: 0; }
  .resource-band { margin-top: var(--rh-section); padding-block: var(--rh-band); }
  #faq.band { padding-block: var(--rh-section) 0; }
  .closing { margin-top: var(--rh-section); padding-block: var(--rh-band); }
  .fy-copy .fy-meet { margin-bottom: var(--rh-head); }
}
@media (max-width: 640px) {
  :root { --rh-m-section: 112px; --rh-m-band: 80px; --rh-m-head: 48px; --rh-m-inner: 40px; }
  .hero .wrap { padding-bottom: 0; }
  .bridge { padding-block: 72px 0; }
  .leaks-band { margin-top: var(--rh-m-inner); padding-block: var(--rh-m-band) var(--rh-m-section); }
  .how .how-head { padding-top: 0; padding-bottom: 0; }
  .fy-intro { margin-top: var(--rh-m-section); padding-block: var(--rh-m-band); }
  .one-call { padding-block: 56px var(--rh-m-band); }
  .gather, #who.gather { padding-block: var(--rh-m-band) 64px; }
  #story.band, #faq.band { padding-block: var(--rh-m-section) 0; }
  .resource-band, .closing { margin-top: var(--rh-m-section); padding-block: var(--rh-m-band); }
  .site-foot { margin-top: 0; }
  .bridge-head, .how .how-head .sec-title, .gather .gather-head .sec-title, #story .who-head .sec-title { margin-bottom: var(--rh-m-head); }
  .one-call .one-call-intro { margin-top: 28px; margin-bottom: var(--rh-m-head); }
  .fy-copy .cta-link { margin-top: 32px; }
  .fy-stage { margin-top: var(--rh-m-head); }
  .leaks { gap: var(--rh-m-inner); }
  .chapter + .chapter { margin-top: 64px; }
  .gt-col h3 { margin-top: var(--rh-m-inner); }
  .gather-flow { gap: 56px; margin-top: 0; }
  .asks { margin-top: var(--rh-m-head); }
  .rb-bar { margin-top: var(--rh-m-head); }
  .closing .btn { margin-top: var(--rh-m-head); }
  .faq-grid { gap: 28px; }
}
/* Strip chips at rest: a white chip so the icon reads on the tinted band. */
.leak-ico { background: var(--tile-pearl); box-shadow: inset 0 0 0 1px rgba(14,20,23,.06), inset 0 1px 0 #fff, 0 1px 2px rgba(14,20,23,.06); }
.leaks li:hover .leak-ico { background: var(--tile-pearl-teal); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 6px -2px rgba(31,92,99,.55); }

/* Round 29 rhythm, tuned after measuring: every boundary carries ~1× section (200px at 1440, 112px on phones), bands keep 0.7× inside. */
@media (min-width: 641px) {
  .leaks-band { margin-top: 0; padding-top: var(--rh-lede); }
  .bridge .car { padding-bottom: 0; margin-bottom: 0; }
}
@media (max-width: 640px) {
  .leaks-band { margin-top: 0; padding-top: 56px; }
  .bridge .car { padding-bottom: 0; margin-bottom: 0; }
  .fy-intro { margin-top: calc(var(--rh-m-section) - var(--rh-m-band)); }
  .one-call { padding-bottom: calc(var(--rh-m-section) - var(--rh-m-band)); }
  #story.band { padding-top: calc(var(--rh-m-section) - 64px); }
  .resource-band, .closing { margin-top: calc(var(--rh-m-section) - var(--rh-m-band)); }
  #faq.band { padding-top: calc(var(--rh-m-section) - var(--rh-m-band)); }
}

/* Round 29, Dan's additions: the rail wider and at reading size; beat titles break by sentence with readable subheaders; the bridge question sits in the rhythm; the persona lede's point in semibold. */
.fy-life { width: clamp(240px, 21vw, 310px); right: clamp(12px, 1.4vw, 20px); }
.fy-life-track small { font-size: 13px; }
.fy-life-track b { font-size: 15.5px; }
.fy-life-track p { font-size: 14px; line-height: 1.45; }
.fy-life-track .fy-then { font-size: 14px; }
.chapter h4 { max-width: none; }
.chapter h4 br { display: inline; }
.chapter > p { font-size: clamp(18px, 1.4vw, 20px); font-weight: 500; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 640px) { .chapter > p { font-size: 17px; } }
.who-lede .sec-lede b { font-weight: 600; color: var(--ink); }
.bridge-ask { margin-top: var(--rh-inner); }
@media (max-width: 640px) { .bridge-ask { margin-top: var(--rh-m-inner); } }
/* Round 29 craft: reading-size multi-line text at 1.3+ (display titles keep their deliberate set); the how room carries no stray top padding. */
.leaks b { line-height: 1.3; }
.foot-line { line-height: 1.3; }
.how.band { padding-top: 0; }

/* ---------- Round 30. */
/* 0. The four historical cards (v5): a faded cool fill, a neutral grain, desaturated tiles; today stays cool grey. */
.car-slide:not(.car-slide-you) { position: relative; isolation: isolate; background: linear-gradient(165deg, #f7f9fa 0%, #f1f4f5 55%, #eceff1 100%); border-color: #d5dbdf; }
.car-slide:not(.car-slide-you)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36 0 0 0 0 .41 0 0 0 0 .45 0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); background-size: 220px 220px; }
.car-slide:not(.car-slide-you)::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,0) 55%, rgba(14,20,23,.16) 100%), linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%); }
.car-slide:not(.car-slide-you) .car-copy h3, .car-slide:not(.car-slide-you) .car-point { color: #0e1417; }
.car-slide:not(.car-slide-you) .car-copy p { color: #4a555e; }
.car-slide:not(.car-slide-you) .car-fig { filter: grayscale(.4) contrast(.98) brightness(1.02); }
.car-slide:not(.car-slide-you) .car-tile { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 24px 48px -20px rgba(14,20,23,.5); }
.car-copy p, .car-copy .car-point { text-wrap: pretty; }
/* 2, 4, 5, 6. Future You: the badge announces the room; copy on its own lines with air; the CTA a step lower; the figure centred left of the rail. */
.fy-meet { font-size: 17px; gap: 12px; }
.fy-q { width: 36px; height: 36px; border-radius: 11px; }
.fy-q svg { width: 18px; height: 18px; }
@media (min-width: 961px) {
  .fy-copy { padding-top: 0; }
  .fy-copy .fy-meet { margin-bottom: clamp(40px, 4vw, 60px); }
  .fy-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(56px, 6.5vw, 104px); }
  .fy-lede { gap: clamp(22px, 2.4vw, 34px); }
  .fy-lede .sec-lede { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.6; max-width: none; }
  .fy-copy .cta-link { margin-top: clamp(32px, 3.4vw, 52px); }
  .fy-canvas { width: calc(100% - clamp(240px, 21vw, 310px) - clamp(12px, 1.4vw, 20px)); }
}
/* 8. A little more string between the question and the strip. */
@media (min-width: 641px) { .leaks-band { padding-top: clamp(112px, 9vw, 136px); } }
@media (max-width: 640px) { .leaks-band { padding-top: 72px; } }

/* ---------- Round 31. Quick fixes. */
.car-slide:not(.car-slide-you) { background: linear-gradient(165deg, #f8f9fa 0%, #f3f5f6 55%, #eceff1 100%); border-color: #d5dbdf; }
.car-slide:not(.car-slide-you)::before { opacity: .38; }
.car-slide:not(.car-slide-you)::after { background: radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,0) 60%, rgba(14,20,23,.10) 100%), linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%); }
.car-slide:not(.car-slide-you) .car-fig { filter: grayscale(.4) contrast(.98) brightness(1.02); }
.who-lede .sec-lede b { font-weight: 700; }
@media (min-width: 641px) { .bridge-ask { margin-top: var(--rh-lede); } #story .who-head .who-lede { margin-bottom: calc(var(--rh-lede) + 24px); } }

/* ---------- Round 31. ONE section-transition system.
   Every room: last visual → colour boundary = --rh-exit (60px at 1440); boundary → first header line = --rh-enter (140px); inside a dark block, 140px both sides.
   Head → lede = --rh-head (44px); lede → visual = --rh-lede (96px). Tinted rooms blend into their neighbours over --rh-blend (96px); dark blocks keep their edge.
   Phones: exit 32 / enter 80 / blend 56; head→visual 48. */
:root { --rh-enter: calc(var(--rh-section) * .7); --rh-exit: calc(var(--rh-section) * .3); --rh-blend: clamp(56px, 6.5vw, 96px); }
@media (min-width: 641px) {
  .hero .wrap { padding-bottom: var(--rh-exit); }
  .bridge { padding-top: var(--rh-enter); padding-bottom: 0; background: linear-gradient(180deg, var(--surface) 0, var(--fill-soft) var(--rh-blend), var(--fill-soft) calc(100% - var(--rh-blend)), var(--fill) 100%); }
  .leaks-band { padding-bottom: var(--rh-exit); }
  .how .how-head { padding-top: var(--rh-enter); }
  .fy-intro { margin-top: var(--rh-exit); padding-top: var(--rh-enter); padding-bottom: var(--rh-exit); border-block: 0; background: linear-gradient(180deg, var(--fill) 0, var(--teal-wash) var(--rh-blend), var(--teal-wash) 100%); }
  .one-call { padding-top: var(--rh-enter); padding-bottom: var(--rh-exit); background: linear-gradient(180deg, var(--teal-wash) 0, var(--teal-wash) calc(100% - var(--rh-blend) - var(--rh-exit)), var(--surface) calc(100% - var(--rh-exit)), var(--surface) 100%); }
  .gather, #who.gather { margin-top: 0; padding-block: var(--rh-enter); }
  #story.band { padding-top: var(--rh-enter); padding-bottom: var(--rh-exit); }
  .resource-band { margin-top: 0; padding-block: var(--rh-enter); }
  #faq.band { padding-top: var(--rh-enter); padding-bottom: var(--rh-exit); }
  .closing { margin-top: 0; padding-block: var(--rh-enter); }
  .how .how-head .how-lede, .gather .gather-head .gather-lede, #story .who-head .who-lede { margin-top: var(--rh-head); }
  .how .how-head .how-lede, .gather .gather-head .gather-lede { margin-bottom: var(--rh-lede); }
  .gather-flow { margin-top: 0; }
  .fy-copy .fy-meet { margin-bottom: var(--rh-head); }
  .one-call .one-call-intro { margin-bottom: var(--rh-lede); }
}
@media (max-width: 640px) {
  :root { --rh-m-enter: 80px; --rh-m-exit: 32px; --rh-m-blend: 56px; }
  .hero .wrap { padding-bottom: var(--rh-m-exit); }
  .bridge { padding-block: var(--rh-m-enter) 0; background: linear-gradient(180deg, var(--surface) 0, var(--fill-soft) var(--rh-m-blend), var(--fill-soft) calc(100% - var(--rh-m-blend)), var(--fill) 100%); }
  .leaks-band { padding-bottom: var(--rh-m-exit); }
  .how .how-head { padding-top: var(--rh-m-enter); }
  .fy-intro { margin-top: var(--rh-m-exit); padding-block: var(--rh-m-enter) var(--rh-m-exit); border-block: 0; background: linear-gradient(180deg, var(--fill) 0, var(--teal-wash) var(--rh-m-blend), var(--teal-wash) 100%); }
  .one-call { padding-block: var(--rh-m-enter) var(--rh-m-exit); background: linear-gradient(180deg, var(--teal-wash) 0, var(--teal-wash) calc(100% - var(--rh-m-blend) - var(--rh-m-exit)), var(--surface) calc(100% - var(--rh-m-exit)), var(--surface) 100%); }
  .gather, #who.gather { padding-block: var(--rh-m-enter); }
  #story.band { padding-block: var(--rh-m-enter) var(--rh-m-exit); }
  .resource-band, .closing { margin-top: 0; padding-block: var(--rh-m-enter); }
  #faq.band { padding-block: var(--rh-m-enter) var(--rh-m-exit); }
  .bridge-ask { margin-top: var(--rh-m-head); }
}
/* Round 31, critique iteration: the Future You column stacks from the top so its headline sits one head-step under the badge. */
@media (min-width: 961px) { .fy-copy { justify-content: flex-start; min-height: 0; } .fy-copy .fy-lede { margin-top: var(--rh-head); } }
/* Maya beats top-anchored: each beat's title sits one enter-step (140px) into its runway, like every other header on the page. */
@media (min-width: 961px) { .chapter, .chapter:first-child { justify-content: flex-start; padding-top: var(--rh-enter); } }

/* Scoped: footer line leading (the bare .foot-line rule lost the cascade). */
.site-foot .foot-line { line-height: 1.3; }

/* Scoped: persona cards sit one lede-step (+24) under the lede; the old list margin is retired here. */
@media (min-width: 641px) { #story .asks { margin-top: 0; } }

/* ---------- Round 31c: Dan's regression list, as locked values (LOCKED-SPEC.md §O). */
:root { --rh-head: clamp(56px, 6vw, 96px); --fy-rail: clamp(240px, 21vw, 310px); }
@media (min-width: 961px) {
  /* O1. Future You panel wide again (r22–24 split); the kept card never crosses the rail. */
  .fy-intro .fy-grid { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: clamp(48px, 5vw, 80px); }
  .fy-stage .fy-card, .fy-stage .fy-card[data-pos] { left: clamp(8px, 2vw, 24px); right: auto; max-width: min(400px, calc(100% - var(--fy-rail) - clamp(12px, 1.4vw, 20px) - 40px)); }
  .fy-life { width: var(--fy-rail); }
  /* O3. Future You copy spread out; badge larger; CTA lower. */
  .fy-intro .fy-lede { gap: clamp(28px, 3vw, 44px); }
  .fy-intro .fy-lede .sec-lede { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.65; }
  .fy-intro .fy-meet { font-size: 18.5px; }
  .fy-intro .fy-q { width: 40px; height: 40px; border-radius: 12px; }
  .fy-intro .fy-copy .cta-link { margin-top: clamp(44px, 4.5vw, 72px); }
  /* O5. Head → lede, one locked value in every staggered head; Maya's intro at 1.25× of it. */
  .how .how-head .how-lede, .gather .gather-head .gather-lede, #story .who-head .who-lede { margin-top: var(--rh-head); }
  .one-call .one-call-intro { margin-top: calc(var(--rh-head) * 1.25); }
  .fy-intro .fy-copy .fy-meet { margin-bottom: clamp(40px, 4vw, 60px); }
  /* O6. Persona cards span the content width with readable type. */
  #story .asks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* O2. The bridge label readable. */
.bridge .car-bridge { font-size: 17.5px; color: var(--ink-2); }
/* O6. Persona card type. */
#story .ask { font-size: 17.5px; line-height: 1.45; }
#story .ask b { font-size: 19px; }

/* ---------- Round 31c, hero bottom (LOCKED-SPEC §C, §O7): no hard edge under the phone, the shadow never clipped, the hint in flow. */
.hero { overflow: visible; background: linear-gradient(180deg, var(--surface) 0%, var(--fill-soft) 100%); }
@media (min-width: 641px) { .bridge { background: linear-gradient(180deg, var(--fill-soft) 0, var(--fill-soft) calc(100% - var(--rh-blend)), var(--fill) 100%); } .hero .wrap { padding-bottom: calc(var(--rh-exit) + 56px); } }
@media (max-width: 640px) { .bridge { background: linear-gradient(180deg, var(--fill-soft) 0, var(--fill-soft) calc(100% - var(--rh-m-blend)), var(--fill) 100%); } .hero .wrap { padding-bottom: calc(var(--rh-m-exit) + 40px); } }
.hero .phone-foot { position: static; margin-top: 28px; }
.hero .phone-caption { font-size: 15px; letter-spacing: .005em; color: var(--muted); }
.hero .phone-caption b { font-weight: 600; color: var(--ink-2); }
@keyframes q-chip-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(43,122,130,0); } 40% { box-shadow: 0 0 0 6px rgba(43,122,130,.18); } }
.hero .q-suggest button { animation: q-chip-pulse 2.2s ease-in-out 1.2s 2; }
@media (prefers-reduced-motion: reduce) { .hero .q-suggest button { animation: none; } }
/* Hero: clip sideways only (the drifting panel layer is wider than the viewport); the bottom stays open so the phone's shadow is never cut. */
.hero { overflow: visible; overflow-x: clip; overflow-y: visible; }
/* The bridge's drifting tint layer fades in from nothing at the top, so the hero hands off with no band edge (O7). */
.bridge::before { mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.85) 38%, transparent 100%); -webkit-mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.85) 38%, transparent 100%); }

/* ---------- Rust, round 3 (Dan, 10 Nov): rust is the problem section's colour and nowhere else.
   "Where your thinking leaks away": the strings from the question are the hero, landing on each card
   as a rust top rule; all header language here is rust. One value, --rust-deep (7.8:1 on white).
   Everything that resolves it (the record, You, the band, buttons) stays teal. */
.bridge-q { color: var(--rust-deep); }
.leaks b, .leaks li:hover b, .leaks li:focus-within b { color: var(--rust-deep); }
.leaks-wires path { stroke: var(--rust-deep); stroke-width: 2.25; stroke-linecap: round; }
.leaks-wires circle { fill: var(--rust-deep); stroke: none; }
/* The landing: each card's top edge takes the line, drawn out from the centre once the strings arrive. */
.leaks > li { position: relative; }
.leaks > li::before { content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 2px; border-radius: 2px; background: var(--rust-deep); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .7s var(--ease-out); pointer-events: none; }
.leaks.is-landed > li::before { transform: scaleX(1); }
/* Neutral tiles with ink glyphs, so the rust stays on the lines and headings. */
.leaks li:hover .leak-ico, .leaks li:focus-within .leak-ico { transform: scale(1.06); background: var(--tile-pearl); color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(14,20,23,.06), inset 0 1px 0 #fff, 0 1px 2px rgba(14,20,23,.06); }
@media (prefers-reduced-motion: reduce) { .leaks > li::before { transform: none; transition: none; } }

/* ---------- Rust, round 4 (Dan, 10 Nov): primarily the problem section, used artfully elsewhere.
   Lines are the rust signature across the page: the leaking strings, the network's spokes into You,
   and two key-phrase underlines (hero, closing band). Never on buttons, never a large fill. */
/* Hero: "prove what's yours", a precise 3px underline that draws in on load. */
.hero-value b { text-decoration: none; padding-bottom: 2px; background: linear-gradient(var(--rust-deep), var(--rust-deep)) 0 100% / 0 3px no-repeat; animation: rust-underline .9s var(--ease-out) .5s forwards; }
@keyframes rust-underline { to { background-size: 100% 3px; } }
/* Closing band: "working for you" carries the same underline, in the brighter rust for the dark ground. */
.rb-key { background: linear-gradient(var(--rust), var(--rust)) 0 92% / 100% .07em no-repeat; padding-bottom: .02em; }
/* The You network: the spokes into You are fine rust lines, strongest at You and fading toward each chip,
   with a slow pulse travelling inward. The record's line to You and the ring between chips stay quiet. */
.cf-edges path:nth-child(n+2):nth-child(-n+9) { stroke: url(#cf-rust-fade); stroke-width: 1.25; stroke-linecap: round; }
.cf-edges path.is-hot:nth-child(n+2):nth-child(-n+9) { stroke: var(--rust-deep); stroke-width: 1.75; }
.cf-flow path { fill: none; stroke: var(--rust-deep); stroke-width: 4.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: .0001 2.9999; stroke-dashoffset: 0; opacity: 0; animation: cf-flow 4.8s linear infinite; }
.confluence.is-in .cf-flow path, .confluence:not(.is-armed) .cf-flow path { opacity: .85; transition: opacity .6s; }
.confluence.is-armed .cf-flow path { opacity: clamp(0, (var(--p) - .8) / .1, .85); }
.cf-flow path:nth-child(2) { animation-delay: -1.2s; } .cf-flow path:nth-child(3) { animation-delay: -2.9s; } .cf-flow path:nth-child(4) { animation-delay: -.6s; }
.cf-flow path:nth-child(5) { animation-delay: -3.6s; } .cf-flow path:nth-child(6) { animation-delay: -2.1s; } .cf-flow path:nth-child(7) { animation-delay: -4.2s; } .cf-flow path:nth-child(8) { animation-delay: -1.7s; }
@keyframes cf-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 3; } }
/* Chrome scales pathLength dashes oddly under non-scaling-stroke + a stretched viewBox, which left every
   network line drawn only ~70% of the way to its chip. A 3-unit dash/gap always covers the whole line. */
.confluence.is-armed .cf-edges path { stroke-dasharray: 3; stroke-dashoffset: calc(3 - 3 * clamp(0, (var(--p) - .64) / .16, 1)); }
.confluence.is-armed .cf-edges path:first-child { stroke-dashoffset: calc(3 - 3 * clamp(0, (var(--p) - .48) / .12, 1)); }
/* Problem section, tablet: the landing rules stay, static. */
@media (max-width: 960px) { .leaks > li::before { transform: none; transition: none; left: 0; right: auto; width: 32px; } }
/* Problem section, phone: one tight column, a rust spine linking the four problems through their tiles. */
@media (max-width: 640px) {
  .leaks { gap: 0; }
  .leaks-band .leaks > li:nth-child(n) { position: relative; padding: 0 0 26px; }
  .leaks-band .leaks > li:last-child { padding-bottom: 0; }
  .leaks > li::before { display: none; }
  .leaks > li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; border-radius: 1px; background: var(--rust-deep); opacity: .85; }
  .leaks li .leak-ico { position: relative; z-index: 1; box-shadow: inset 0 0 0 1px var(--rust-deep), inset 0 1px 0 #fff, 0 1px 2px rgba(14,20,23,.06); }
}
@media (prefers-reduced-motion: reduce) { .hero-value b { animation: none; background-size: 100% 3px; } .cf-flow path { animation: none; opacity: 0 !important; } }
/* Rust, round 5 (Dan, 10 Nov): the problem section's tiles get a warm pearl that belongs to rust:
   white with a faint rust-tint sheen, a warm hairline, a rust glyph. No aqua or lilac here. */
.leaks-band { --tile-pearl-warm: linear-gradient(135deg, #fff 0%, #fff 22%, #f7ede9 52%, #fff 82%), #fff; }
.leaks-band .leak-ico, .leaks-band .leaks li:hover .leak-ico, .leaks-band .leaks li:focus-within .leak-ico { background: var(--tile-pearl-warm); color: var(--rust-deep); box-shadow: inset 0 0 0 1px rgba(143,53,32,.15), inset 0 1px 0 #fff, 0 1px 2px rgba(143,53,32,.08); }
@media (max-width: 640px) { .leaks-band .leaks li .leak-ico { box-shadow: inset 0 0 0 1px rgba(143,53,32,.28), inset 0 1px 0 #fff, 0 1px 2px rgba(143,53,32,.08); } }
/* Rust, round 7 (Dan, 10 Nov): the footer's three doors carry rust underlines (a lighter rust that reads
   on the dark teal; decorative, the text stays light). Hover: a heavier underline and full white. */
.foot-doors a { text-decoration: underline; text-decoration-color: #d0714f; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color .2s, text-decoration-thickness .2s; }
.foot-doors a:hover, .foot-doors a:focus-visible { color: #fff; text-decoration-color: #d0714f; text-decoration-thickness: 2px; }

/* Dan 10 Nov: column headings stay on one line (e.g. "Works where you work"). */
.gt-col h3 { white-space: nowrap; }
@media (max-width: 380px) { .gt-col h3 { white-space: normal; } }

/* ---------- Dan refinements, 10 Nov (r52). */
/* 1. Problem headline: a smooth top-to-bottom hand-off from the teal sections above (nudged toward
   eggplant) into this section's rust. Fallback colour (no gradient-text support, forced-colors) stays
   the existing rust-deep so the text is never invisible. Every stop is well past AA for this large, bold size. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .bridge-q {
    background-image: linear-gradient(180deg, #234955 0%, var(--rust-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@media (forced-colors: active) { .bridge-q { background-image: none; -webkit-background-clip: border-box; background-clip: border-box; color: CanvasText; } }

/* 2 + 5. One dark-teal header colour, reused everywhere it should match "becomes who you are tomorrow." */
.hl-teal { color: var(--teal); }
.how-head .how-lede p b, .fy-lede .sec-lede b, .who-lede .sec-lede b { color: var(--teal); }

/* 3. "is the work.": a light teal, with a slow sheen sweeping across it. Static (plain colour) under
   reduced motion or without gradient-text support. */
.is-work { color: var(--teal-soft); }
@media (prefers-reduced-motion: no-preference) {
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .is-work {
      background-image: linear-gradient(110deg, var(--teal-soft) 38%, #fbfffe 50%, var(--teal-soft) 62%);
      background-size: 260% 100%;
      background-position: 160% 0;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: is-work-sheen 7s ease-in-out infinite;
    }
  }
}
@keyframes is-work-sheen { 0%, 100% { background-position: 160% 0; } 50% { background-position: -60% 0; } }

/* 4. Light text on the dark-teal grounds reads with a touch of depth. Subtle, never a glow.
   ".is-work" uses filter: drop-shadow() rather than text-shadow: with background-clip: text + a
   transparent fill, text-shadow paints under the glyph and muddies the gradient to grey; drop-shadow
   is a post-render effect so it reads clean against the sheen. */
.close-1, .close-2, .close-3 { text-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18); }
.is-work { filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)) drop-shadow(0 8px 24px rgba(0,0,0,.18)); }

/* 7. "Text Future You on iMessage… Free to start." stays one line from tablet up; phones still wrap. */
@media (min-width: 768px) { .rb-bar .ask-note { white-space: nowrap; max-width: none; } }