/* Layout is fluid rather than stepped: one column, sized by the viewport.
   --measure and --gutter are the only two knobs, and everything else is
   clamped against them, so phone and desktop are the same page at two sizes.

   The container sets only inline padding. It used to set `padding:0 20px`,
   which — being a class — outranked the element rules below it and quietly
   zeroed every section's vertical padding. Keep these axes separate. */
:root{
  --bg:#0a0a0b; --surface:#15151a; --surface2:#1f1f26; --line:#2a2a32;
  --text:#f5f2ec; --muted:#8e8b86; --accent:#f0ebe1; --accent2:#c4bfb7; --warn:#e07a5f;
  --measure:26rem; --gutter:20px;
}
@media (min-width:600px){:root{--measure:32rem;--gutter:26px}}
@media (min-width:1024px){:root{--measure:42rem;--gutter:32px}}
@media (min-width:1440px){:root{--measure:48rem;--gutter:40px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.5 Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
@supports(font-variation-settings:normal){html,body{font-family:InterVariable,Inter,-apple-system,system-ui,sans-serif}}
body{font-feature-settings:"cv11","ss01";overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wrap{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(30px,7vw,50px);border-top:1px solid var(--line)}
h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:0 0 clamp(14px,3.4vw,20px);font-weight:600}
p{margin:0}

header{padding-block:clamp(42px,11vw,80px) clamp(26px,6vw,42px)}
.mark{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  font-weight:700;margin-bottom:clamp(22px,5.5vw,34px)}
h1{font-size:clamp(30px,7.6vw,58px);line-height:1.1;letter-spacing:-.03em;font-weight:600;
  margin:0 0 12px;text-wrap:balance}
.sub{color:var(--muted);font-size:clamp(16.5px,4.2vw,22px);line-height:1.42;
  margin-bottom:clamp(22px,5.5vw,30px);text-wrap:pretty}

.btn{display:block;text-align:center;background:var(--accent);color:var(--bg);text-decoration:none;
  padding:15px 20px;border-radius:12px;font-weight:600;font-size:16px;letter-spacing:-.01em;
  border:none;width:100%;min-height:48px;cursor:pointer;font-family:inherit;transition:background .15s}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
/* Touch devices keep a hover state stuck on after a tap, so gate it. */
@media (hover:hover){
  .btn:hover{background:var(--accent2)}
  .btn.ghost:hover{background:var(--surface2)}
}
.micro{color:var(--muted);font-size:13px;margin-top:10px;text-align:center;text-wrap:pretty}

ol{list-style:none;margin:0;padding:0;counter-reset:s}
ol li{counter-increment:s;position:relative;padding-left:32px;margin-bottom:13px;text-wrap:pretty}
ol li:last-child{margin-bottom:0}
ol li::before{content:counter(s);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center}

/* The rail bleeds to both edges of the column, so its inline padding has to be
   the same value the container pulls back. */
.rail{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--gutter) 14px;margin-inline:calc(var(--gutter) * -1);
  scroll-padding-inline:var(--gutter);scrollbar-width:none;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 clamp(196px,58vw,264px);scroll-snap-align:center;
  aspect-ratio:3/4.35;border-radius:14px;overflow:hidden;background:#111}
.card img{width:100%;height:100%;object-fit:cover}
/* A card whose photo has not been supplied yet. Same shape, same scrim, so the
   row keeps its rhythm instead of showing a hole. */
.card .initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--surface2);color:var(--muted);font-size:clamp(46px,11vw,60px);font-weight:600}
/* Two founders rather than six coaches, but the SAME card — no width override.
   calc(50% - 6px) was used here to stop the second one falling off the edge,
   and because it scales with the rail it blew Albert's photo up to 602px
   against a coach card's 220px on a desktop. If two do not fit, the rail
   scrolls, which is what the coach rail does. */
.rail.founders{scroll-snap-type:none}
.rail.founders .card{scroll-snap-align:none}
@media (min-width:560px){.rail.founders{justify-content:center}}
.scrim{position:absolute;inset:0;background:linear-gradient(to top,
  rgba(6,6,7,.95) 0%,rgba(6,6,7,.74) 27%,rgba(6,6,7,.1) 56%,transparent 74%)}
.meta{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px}
.meta h3{margin:0 0 3px;font-size:clamp(18px,4.6vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.meta h3 span{font-weight:300;opacity:.7}
.tags{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.68;font-weight:500;margin-bottom:9px}
.notices{font-size:13px;line-height:1.35;opacity:.92;border-top:1px solid rgba(255,255,255,.18);
  padding-top:8px;margin-bottom:9px}
.notices em{display:block;font-style:normal;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.55;margin-bottom:3px}
.swipe{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px}
/* The rail scrolls at every width (Albert, 2026-09-05). On a phone it lives
   inside the column. On a wide screen it takes the whole viewport: the row is
   centred when the cards fit and scrolls when they don't. The auto margins on
   the end cards do the centring; justify-content:center would put the first
   card out of reach once the row overflows. */
@media (min-width:820px){
  .rail{margin-inline:calc(50% - 50vw + var(--gutter));padding-inline:0;gap:16px;
    scroll-padding-inline:var(--gutter)}
  .card{flex:0 0 clamp(220px,17vw,270px)}
  .card:first-child{margin-left:auto}
  .card:last-child{margin-right:auto}
  .swipe{text-align:center}
}

.tier{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,4vw,22px)}
.tier+.tier{margin-top:11px}
.tier.lead{border-color:var(--accent)}
.tier .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tier .what{font-size:clamp(17px,4.3vw,19px);font-weight:600;letter-spacing:-.01em}
.tier .amt{font-size:clamp(22px,5.6vw,26px);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.tier .amt s{color:var(--muted);font-weight:400;font-size:15px;margin-right:6px}
.tier ul{margin:11px 0 15px;padding:0;list-style:none}
.tier li{color:var(--muted);font-size:14px;line-height:1.45;padding-left:16px;position:relative;text-wrap:pretty}
.tier li+li{margin-top:4px}
.tier li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;
  background:var(--muted);opacity:.6}
.badge{display:inline-block;background:var(--accent);color:var(--bg);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:5px;margin-bottom:9px}

/* `el.hidden = true` sets the attribute, and the UA's [hidden]{display:none}
   is an author rule away from losing — `form{display:flex}` below outranks it,
   so a hidden form stayed on screen. Both the coach page's applied=1 state and
   /enroll's after-details state depend on this working. */
[hidden]{display:none!important}
form{display:flex;flex-direction:column;gap:9px}
/* 16px is the floor that stops iOS zooming the page when a field is focused. */
input[type=text],input[type=email],input[type=tel],textarea{background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:14px;color:var(--text);outline:none;width:100%;min-height:48px;font-size:16px;font-family:inherit}
textarea{min-height:96px;resize:vertical;line-height:1.45}
input:focus,textarea:focus{border-color:var(--accent)}
::placeholder{color:var(--muted)}
.err{color:var(--warn);font-size:13px;min-height:18px;margin-top:6px;text-align:center}

/* The text thread on the home page and in the gallery. */
.phone{max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px 12px 18px;display:flex;flex-direction:column;gap:6px}
.phone.tall{min-height:420px}
.phone .top{display:flex;align-items:center;gap:8px;justify-content:center;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.avatar{width:26px;height:26px;border-radius:50%;background:#3a3a44;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.phone .name{font-size:13px;font-weight:600}
.stamp{text-align:center;font-size:10.5px;color:var(--muted);margin:10px 0 2px}
.b{max-width:78%;padding:9px 13px;border-radius:18px;font-size:15px;line-height:1.35}
/* Apple's iMessage blue, exactly. White on it is 3.98, under AA's 4.5 for
   15px, and it was darkened to #2b71e1 to clear that on 2026-09-09 — then put
   back the same day: side by side against production Albert could see the
   difference and the real blue won. This is a decorative mock of a thread with
   invented filler in it, not functional UI, and the recognisability IS the
   point. Do not "fix" it again without changing what the block is for. */
.b.me{align-self:flex-end;background:#2f7bf5;color:#fff;border-bottom-right-radius:5px}
.b.her{align-self:flex-start;background:#2a2a32;border-bottom-left-radius:5px}
.phone .meta{align-self:flex-end;font-size:10.5px;color:var(--muted);margin:-2px 6px 0 0}
.gap{height:72px}
@media (min-width:600px){.gap{height:120px}}.gap.small{height:60px}.gap.big{flex:1}
.phone.anim .compose{margin-top:0}
.compose{margin-top:auto;background:#1a1a20;border:1px solid var(--line);border-radius:18px;
  padding:9px 9px 9px 13px;font-size:15px;color:var(--text);line-height:1.35;
  display:flex;align-items:flex-end;gap:8px}
.compose .field{flex:1;min-width:0}
/* The send button is the whole point of the compose bar: it goes live the
   moment there is something to send, and dies again every time he deletes it.
   A full keyboard was the other option and costs 40% of a phone screen to say
   less than this does. */
/* Apple's is the arrow.up SF Symbol: a stroked shaft with a chevron head and
   round caps, not a solid wedge. And a real iPhone does not park it there
   greyed out — it appears with the first character and goes when the field
   empties, which is the beat this whole thread is about. */
.compose .send{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#2f7bf5;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.55);transition:opacity .16s ease,transform .18s cubic-bezier(.2,.9,.3,1.2)}
.compose .send svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.compose.armed .send{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.compose .send{transition:none}}
.cursor{display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* The problem section: short beats that read like someone talking, then one
   line in full text weight that turns toward the product. */
.beat{font-size:clamp(16.5px,4.2vw,19px);line-height:1.45;margin-bottom:14px;text-wrap:pretty}
.bridge{font-size:clamp(16.5px,4.2vw,19px);line-height:1.45;font-weight:600;margin-top:22px;text-wrap:pretty}
.beat.how{color:var(--muted);font-size:clamp(15px,3.8vw,17px)}
.bridge+.beat.how{margin-top:26px}
/* The feedback preview reads as something said, not something listed. */
.debrief{margin:0;padding:clamp(18px,4vw,22px);background:var(--surface);border:1px solid var(--line);border-radius:14px}
.debrief p{font-size:clamp(15px,3.8vw,16.5px);line-height:1.5;margin-bottom:12px;text-wrap:pretty}
.debrief p:last-child{margin-bottom:0}
.debrief .close{color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
/* The turn after the thread: a short headline, one line under it, then the
   process as plain sentences with room to breathe. */
.turn{margin-top:clamp(30px,7vw,44px)}
.turn-h{font-size:clamp(26px,6.6vw,42px);line-height:1.1;letter-spacing:-.025em;font-weight:600}
.turn-s{color:var(--muted);font-size:clamp(17px,4.3vw,22px);line-height:1.4;margin-top:8px}
.turn-list{list-style:none;margin:clamp(20px,5vw,28px) 0 0;padding:0}
.turn-list li{position:relative;padding:0 0 0 22px;margin-bottom:14px;font-size:clamp(16px,4vw,19px);line-height:1.5;text-wrap:pretty}
.turn-list li:last-child{margin-bottom:0}
.turn-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.clip.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  border:1px dashed var(--line);color:var(--muted);font-size:13px;text-align:center;padding:20px}
.play{width:46px;height:46px;border-radius:50%;border:1px solid var(--muted);position:relative;opacity:.7}
.play::after{content:"";position:absolute;left:18px;top:14px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--muted)}
.cal-embed{min-height:320px;border-radius:14px;overflow:hidden}
/* The booking page's calendar gets a wider column than the prose, because a
   month grid plus a slot list needs the room. */
.wrap.wide{max-width:calc(var(--measure) + 14rem)}
/* The stand-in calendar. Three panels on desktop, stacked on a phone. */
.cal-embed.mock{display:grid;grid-template-columns:1fr;gap:0;background:var(--surface);border:1px solid var(--line)}
.cal-embed.mock>*{padding:clamp(16px,4vw,22px)}
.cal-embed.mock aside{border-bottom:1px solid var(--line)}
.cal-embed.mock .who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:10px}
.cal-embed.mock h3{margin:0 0 10px;font-size:20px;letter-spacing:-.02em}
.cal-embed.mock aside ul{list-style:none;margin:0;padding:0;color:var(--muted);font-size:14px}
.cal-embed.mock aside li{padding:3px 0}
.cal-embed.mock .mh{display:flex;justify-content:space-between;margin-bottom:12px;font-size:14px}
.cal-embed.mock .mh span{color:var(--muted);letter-spacing:.2em}
.cal-embed.mock .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:13px}
.cal-embed.mock .grid span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--muted);opacity:.45}
.cal-embed.mock .grid .dow{aspect-ratio:auto;font-size:10px;letter-spacing:.1em;opacity:1;padding-bottom:4px}
.cal-embed.mock .grid .open{opacity:1;color:var(--text);background:var(--surface2);font-weight:600}
.cal-embed.mock .grid .sel{background:var(--accent);color:var(--bg)}
.cal-embed.mock .slots{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.cal-embed.mock .sh{font-size:13px;color:var(--muted);margin-bottom:4px}
.slot{display:block;text-align:center;padding:11px;border:1px solid var(--line);border-radius:10px;color:var(--text);text-decoration:none;font-weight:600;font-size:14px}
.slot.sel{border-color:var(--accent)}
@media (min-width:820px){
  .cal-embed.mock{grid-template-columns:200px 1fr 150px}
  .cal-embed.mock aside{border-bottom:0;border-right:1px solid var(--line)}
  .cal-embed.mock .slots{border-top:0;border-left:1px solid var(--line)}
  .cal-embed.mock .grid span{font-size:14px}
}
.clip{width:100%;aspect-ratio:16/9;border-radius:14px;background:#111;margin-bottom:22px}
.rules{color:var(--muted);font-size:clamp(14px,3.6vw,15px);line-height:1.55;text-wrap:pretty}
footer{padding-block:clamp(26px,6vw,36px) max(clamp(40px,10vw,64px),env(safe-area-inset-bottom));
  color:var(--muted);font-size:11.5px;line-height:1.6;border-top:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Desktop is a centred page. On a phone everything hangs off the left edge,
   which is right for a narrow screen; on a wide one the same layout reads as
   a column pushed to one side. So above a tablet the headings centre and every
   block that is narrower than the column (the phone, the form, the video, the
   lists, the prose) is centred in it, with text inside still set left. */
@media (min-width:820px){
  header,h2,.turn-h,.turn-s,.swipe,footer{text-align:center}
  header .sub{margin-inline:auto;max-width:36rem}
  .phone,.clip,form,.turn-list,.rules,.beat,.tier,.err,.micro,.cal-embed,.debrief{margin-inline:auto}
  .phone{max-width:440px}
  form,.tier,.cal-embed.placeholder{max-width:480px}
  .clip{max-width:640px}
  .turn-list,.rules,.beat,.debrief{max-width:36rem}
  .micro{max-width:480px}
  section .sub{text-align:center;margin-inline:auto;max-width:36rem}
}

/* ============================================================================
   Polish layer (2026-09-08). Everything below is a section the page didn't
   have: the nav, the proof band, the research strip, the pull quote, the FAQ
   and the deep footer. Each one is gated behind a `show` flag in site.json, so
   any of them can be pulled without touching this file.

   The rule the whole layer follows: no new colour and no new typeface. What
   makes a page read as finished is not decoration, it's that the objections
   have somewhere to land and the chrome is where the eye expects it.
   ========================================================================= */

/* The sticky nav. Colour is mixed from --bg so both themes work; the border
   only appears once the page has moved, so the top of the hero stays clean. */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  -webkit-backdrop-filter:saturate(170%) blur(14px);backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{max-width:calc(var(--measure) + 13rem);margin-inline:auto;padding-inline:var(--gutter);
  height:56px;display:flex;align-items:center;gap:22px}
.nav-mark{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--text);text-decoration:none;white-space:nowrap}
.nav-mark span{color:var(--muted)}
.nav-links{display:none;gap:22px;margin-inline:auto}
.nav-links a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;transition:color .15s}
/* The pill says the same thing as the buttons in the page (Albert,
   2026-09-09), which is too long for a phone, so it carries both labels and
   the width decides. */
.cta-long{display:none}
.cta-short{display:inline}
@media(min-width:620px){.cta-long{display:inline}.cta-short{display:none}}
/* A real phone is 390-430px, below anything headless Chrome will render. The
   mark (206px) plus the pill (142px) plus gutters does not fit there, so the
   second word of the wordmark goes and the brand carries it alone. */
@media(max-width:479px){.nav-mark span{display:none}}
.nav-cta{background:var(--accent);color:var(--bg);text-decoration:none;font-size:13px;font-weight:600;
  padding:9px 15px;border-radius:999px;white-space:nowrap;margin-left:auto;transition:background .15s}
@media(hover:hover){.nav-links a:hover{color:var(--text)}.nav-cta:hover{background:var(--accent2)}}
@media(min-width:720px){.nav-links{display:flex}.nav-cta{margin-left:0}}
/* Anchored jumps have to clear the sticky bar. */
[id]{scroll-margin-top:74px}
html{scroll-behavior:smooth}

/* The mobile dock. Slides up once the hero CTA is behind you, so the page
   always has a way forward without a button in every section. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:49;
  padding:10px var(--gutter) max(10px,env(safe-area-inset-bottom));
  background:var(--bg);background:color-mix(in srgb,var(--bg) 90%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);transform:translateY(115%);transition:transform .28s ease}
.dock.up{transform:none}
.dock .btn{max-width:var(--measure);margin-inline:auto;padding:13px 20px;min-height:44px}
@media(min-width:720px){.dock{display:none}}

/* The proof band. Full-bleed hairline grid directly under the hero — the one
   place every finished service site puts its numbers. */
.band{border-block:1px solid var(--line)}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  max-width:calc(var(--measure) + 6rem);margin-inline:auto}
.proof>div{background:var(--bg);padding:clamp(15px,3.6vw,20px) 10px;text-align:center}
.proof b{display:block;font-size:clamp(18px,4.8vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.proof span{display:block;color:var(--muted);font-size:clamp(10.5px,2.7vw,12.5px);
  line-height:1.35;margin-top:6px;text-wrap:balance}

/* The research strip. Four real findings, cited. This is the credibility
   device Once actually owns — nobody else in the category has one. */
.findings{display:grid;gap:10px}
.finding{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:clamp(16px,3.8vw,20px)}
.finding p{font-size:clamp(15px,3.8vw,16.5px);line-height:1.45;text-wrap:pretty}
.finding cite{display:block;font-style:normal;color:var(--muted);font-size:11.5px;
  line-height:1.4;margin-top:11px}
@media(min-width:820px){.findings{grid-template-columns:1fr 1fr;max-width:44rem;margin-inline:auto}}

/* The founding story, set as the one full-width moment on the page. It is the
   only place the site changes surface colour, which is what makes it land. */
.pull{background:var(--surface);border-top:1px solid var(--line);padding-block:clamp(46px,10vw,84px)}
.pull blockquote{margin:0;font-size:clamp(19px,5vw,30px);line-height:1.32;letter-spacing:-.022em;
  font-weight:500;text-wrap:pretty;max-width:34rem;margin-inline:auto}
.pull .who{color:var(--muted);font-size:13px;margin-top:clamp(16px,4vw,22px);
  max-width:34rem;margin-inline:auto}

/* FAQ. Native <details>, so it needs no script and opens for find-in-page. */
.faq{border-top:1px solid var(--line);max-width:36rem;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:16px 30px 16px 0;position:relative;
  font-size:clamp(15.5px,3.9vw,17px);font-weight:500;line-height:1.4;text-wrap:pretty}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{color:var(--muted);font-size:clamp(14.5px,3.7vw,15.5px);line-height:1.55;
  padding:0 4px 18px 0;text-wrap:pretty}
.faq .a+.a{margin-top:10px}

/* The founders, as two people rather than a paragraph with a hole in it. */
.people{display:flex;gap:14px;justify-content:center;margin-bottom:clamp(20px,5vw,26px)}
.person{text-align:center}
.person .ring{width:clamp(62px,17vw,78px);height:clamp(62px,17vw,78px);border-radius:50%;
  background:var(--surface2);border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-size:clamp(20px,5vw,25px);font-weight:600;color:var(--muted);
  overflow:hidden;margin-inline:auto}
.person .ring img{width:100%;height:100%;object-fit:cover}
.person b{display:block;font-size:13.5px;font-weight:600;margin-top:9px}
.person span{display:block;color:var(--muted);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;margin-top:2px}

/* The deep footer. Three columns on a wide screen, stacked on a phone. */
.foot-grid{display:grid;gap:26px;grid-template-columns:1fr;text-align:left}
@media(min-width:720px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr}}
.foot-grid h4{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:0 0 10px;font-weight:600}
.foot-grid p{color:var(--muted);font-size:13px;line-height:1.55;max-width:22rem}
.foot-grid .fmark{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--text);margin-bottom:10px}
.foot-grid a{color:var(--muted);text-decoration:none;display:block;padding:3.5px 0;font-size:13px;
  transition:color .15s}
@media(hover:hover){.foot-grid a:hover{color:var(--text)}}
.foot-note{margin-top:clamp(26px,6vw,34px);padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:11.5px;line-height:1.6;text-align:left}

/* The opening thread plays itself in (2026-09-09). `staged` is added by JS, so
   with JS off every message is simply visible. */
.phone.staged .b:not(.set),.phone.staged .stamp:not(.set){opacity:0;transform:translateY(9px) scale(.97);transition:opacity .3s ease,transform .34s cubic-bezier(.2,.85,.3,1)}
.phone.staged .b.in,.phone.staged .stamp.in{opacity:1;transform:none}
.typing{align-self:flex-start;background:#2a2a32;border-radius:16px;border-bottom-left-radius:5px;padding:12px 14px;display:inline-flex;align-items:center;gap:4px;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.typing.in{opacity:1;transform:none}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);display:block;animation:dot 1.25s infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:.95;transform:translateY(-3px)}}
.receipt{align-self:flex-end;font-size:10.5px;color:var(--muted);margin:-1px 6px 0 0;opacity:0;transition:opacity .35s ease}
.receipt.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  .phone.staged .b,.phone.staged .stamp,.receipt{opacity:1;transform:none}
  .typing i{animation:none}
}

/* "Who this is for" — the qualifying list (2026-09-09). Same rhythm as the
   turn list, but the marker is a rule rather than a dot: these are criteria,
   not steps. */
.fit-list{list-style:none;margin:clamp(20px,4.5vw,28px) 0 0;padding:0;max-width:44ch}
.fit-list li{padding:0;margin-bottom:clamp(15px,3.2vw,20px);font-size:clamp(16px,3.8vw,19px);
  line-height:1.45;text-wrap:pretty}
/* Centred only on the home page's "Who this is for". /coach reuses .fit-list
   for Discretion, which is prose about her and reads wrong centred. */
/* Centred, but the column governs the measure rather than a tight ch cap —
   at 34ch every statement broke into three stubby lines (Albert: "overly
   centered and wrapped"). They read better running on. */
#fit h2{text-align:center}
#fit .fit-list{margin-inline:auto;max-width:none;text-align:center}
#fit .fit-list li{text-wrap:pretty}
.fit-list li:last-child{margin-bottom:0}

/* The Once events, under the founders' note. A grid rather than a carousel
   (Albert, 2026-09-09): a scroller shows three photos at a time, which is a
   poor way to say "hundreds of people came to these." All nine are on screen
   at once, and every other column is dropped a little so the block reads as
   editorial rather than as a spreadsheet. Same card as the coach rail. */
.reel{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px;
  padding-bottom:clamp(18px,4vw,30px)}
.reel figure{margin:0;border-radius:14px;overflow:hidden;background:var(--surface2);aspect-ratio:3/4.35}
.reel img,.reel video{width:100%;height:100%;object-fit:cover;display:block}
/* A poster still sits behind the clip for anyone who asked not to be moved at.
   The transform rule below is not enough on its own — an autoplaying video
   ignores prefers-reduced-motion entirely. */
.reel .reel-still{display:none;position:absolute;inset:0}
.reel figure{position:relative}
@media (prefers-reduced-motion:reduce){
  .reel video{display:none}
  .reel .reel-still{display:block}
}
.reel figure:nth-child(2n){transform:translateY(clamp(16px,4.5vw,26px))}
.reel-cap{text-align:left;margin-top:8px}
/* Three columns only once --measure widens at 1024. Firing this at 720 made a
   tile shrink from 225px to 144px as the window got BIGGER, because the column
   count changed while the container did not. */
@media (min-width:1024px){
  .reel{grid-template-columns:repeat(3,1fr);gap:14px}
  .reel figure:nth-child(2n){transform:none}
  .reel figure:nth-child(3n-1){transform:translateY(clamp(20px,3vw,34px))}
}
@media (prefers-reduced-motion:reduce){.reel figure{transform:none!important}}