/* ============================================================
   THE COLLECTIVE — brand pass, 2026-11-03.
   From the brand board: the emblem (a ring of eight points around one
   figure), Cormorant Garamond set in spaced capitals for the name, a warm
   paper ground, ink, and warm greys. No gold anywhere: the accent is ink, and
   emphasis is the serif italic. Geist stays for body copy, labels and buttons.
   The section-structure notes below (trays, hairlines, corners) still hold.

   Earlier notes — EXS design system, fourth pass, 2026-09-07

   From the call recording (Erik's Figma 1:24–1:34; colours 1:30:19–1:30:50;
   logo 1:30:11) and the review of the third pass: more contrast, a
   little smaller ("zoomed out"), more premium, smoother, not overdone.

   Palette is white, black, gold, and true greys (R = G = B) only.

   SEPARATION, fifth pass. Full-bleed black bands were the fourth pass and he
   sent them back: "the separation with the colors, like it's black. It just
   looks off." So no section is a slab of colour any more. A section that
   needs to stand apart becomes a TRAY: a #f0f0f0 ground, a 1px #d9d9d9
   hairline, a 28px corner, inset from the page so white always shows down
   both sides. The edge is the separator, not the tone — it survives a cheap
   screen and a squint, which a 6% luminance step does not. Inside a tray the
   cards flip to white, so the grey cards he likes become the grammar of the
   whole page: tray 28px > card 14px > control 11px, and you can tell how deep
   you are from the corner alone.

   Trays are rare, never adjacent, and always contain a bounded object. On the
   home page only two of six surfaces are trays. Black stays on the page but
   only as OBJECTS with four visible edges — the video tiles, the buttons, the
   nav pill, the accordion toggles — never as a ground. Gold appears where it
   names a thing: the ampersand, one word in the hero, the play button, hover.
   Type is Geist. Fraunces is loaded for the ampersand glyph and nothing else.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{
  --paper:#f4f2ed;
  --grey-1:#ebe8e1;
  --grey-2:#dad5cb;
  --grey-3:#bcb6aa;
  --ink:#1b1a18;
  --ink-soft:#4a4741;
  --faint:#857f75;
  --line:var(--grey-2);
  --gold:#1b1a18;
  --gold-deep:#1b1a18;
  --gold-lift:#f4f2ed;
  --mark:var(--gold-lift);
  --paper-2:var(--grey-1);
  --white:var(--paper);
  --line-2:var(--grey-3);
  --gold-soft:var(--grey-1);
  --sans:"Geist",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --amp:"Cormorant Garamond","Cormorant",Garamond,Georgia,serif;
  --serif:var(--amp);
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
  --gap:clamp(3.5rem,7vw,6rem);
  --head:5.5rem;                 /* fixed header clearance */
  /* The fit card's ONE height. cal.com's inline month view reports its own
     height and sits at 538-570px at every width (measured against a live
     cal.com link, 330px to 1000px wide), so the stage is floored at 600 to
     hold it with no scrollbar inside the embed, and capped at 640 so the
     whole card still fits a laptop screen. */
  /* Roomier than the calendar strictly needs. cal.com settles at 570px but
     passes through taller values while it loads (712 observed), and the extra
     headroom means that transient is never clipped and the questions get the
     buffer he asked for rather than sitting in a tight box. */
  --fith:clamp(600px,calc(100svh - 12rem),665px);
  --r:6px;                      /* card */
  --r-tray:10px;                 /* section tray */
  --r-ctl:3px;                  /* control */
  --edge:var(--grey-2);          /* the hairline that does the separating */
  --gutter:clamp(3.2rem,6.5vw,5rem);
  --lift:0 1px 2px rgba(0,0,0,.04),0 10px 26px -18px rgba(0,0,0,.20);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
[id]{scroll-margin-top:var(--head)}

/* ---------- containers ---------- */
.wrap{width:min(1080px,100% - 3rem);margin-inline:auto}
.mid{width:min(760px,100% - 3rem);margin-inline:auto}
.hold{width:min(820px,100% - 3rem);margin-inline:auto;text-align:center}
.hold .lede,.hold .body{margin-inline:auto}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---------- type ---------- */
h1,h2,h3{font-weight:700;letter-spacing:-.035em;line-height:1.05;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.7rem,6.2vw,4.9rem);letter-spacing:-.045em;line-height:.98}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:clamp(1.1rem,1.6vw,1.3rem);letter-spacing:-.02em;line-height:1.2}
.gold{color:var(--gold)}
.on-dark .gold,.band .gold{color:var(--gold)}
.it{font-style:normal;font-family:var(--sans);font-weight:inherit;color:var(--gold)}
.on-dark .it,.band .it{color:var(--gold)}
.own-line{display:block}
.kick{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.lede{font-size:clamp(1.02rem,1.3vw,1.18rem);color:var(--ink-soft);max-width:42ch;line-height:1.5}
.body{color:var(--ink-soft);max-width:52ch;font-size:1rem}
.tiny{font-size:.8rem;color:var(--faint)}
.ph{color:var(--faint)}
.mk{position:relative;display:inline}
.mk::before{display:none}

/* ---------- section head: centred stack ---------- */
.head{display:grid;justify-items:center;text-align:center;gap:.7rem;margin-bottom:clamp(1.6rem,3.2vw,2.5rem)}
.head h2{margin:0}
.head .body,.head .lede{max-width:48ch;margin:0;color:var(--ink-soft);font-size:1.02rem}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;color:#fff;
  padding:.95rem 1.7rem;min-height:3.2rem;border-radius:var(--r-ctl);font-size:1rem;font-weight:600;font-family:var(--sans);
  text-decoration:none;border:2px solid var(--ink);cursor:pointer;background:var(--ink);
  transition:background .22s var(--out),border-color .22s var(--out),color .22s var(--out),transform .28s var(--out)}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#000;transform:translateY(-1px)}
.btn .arw{transition:transform .3s var(--out)}
.btn:hover .arw{transform:translateX(3px)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);border-color:var(--ink);color:#fff}
/* .btn-pale was a white button on black. On a grey tray it is just the button. */
.btn-pale{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-pale:hover{background:var(--gold);border-color:var(--gold);color:#000}
.btn-sm{padding:.62rem 1.2rem;min-height:2.7rem;font-size:.92rem;border-radius:9px}
.btn-lg{padding:1.05rem 2.2rem;min-height:3.6rem;font-size:1.08rem}
.ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.7rem}
.center .ctas,.hold .ctas,.head .ctas{justify-content:center}
.btn:focus-visible,.opt:focus-visible,.acc-q:focus-visible,.lnk:focus-visible,.socials a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- header: mark left, pill nav centre, apply right ---------- */
header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);transition:background .3s,border-color .3s}
header .wrap{border-bottom:1px solid transparent}
header.stuck .wrap{border-bottom-color:var(--line)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.8rem 0;gap:1.2rem}
.nav>.btn{justify-self:end}


/* 700, not 400. The favicon is this exact glyph rendered to a PNG, and at
   32px the light cut collapsed into a smudge — which is what he was looking
   at when he called the icon horrible. Matching the wordmark to the weight
   that survives keeps the mark and the icon the same object. */

.nav nav{display:flex;gap:.15rem;background:var(--grey-1);border-radius:100px;padding:.28rem}
.nav nav a{font-size:.9rem;font-weight:500;color:var(--ink-soft);text-decoration:none;padding:.5rem 1rem;border-radius:100px;
  transition:color .2s,background .25s var(--out)}
.nav nav a:hover{color:var(--ink)}
.nav nav a[aria-current]{color:#fff;background:var(--ink)}
.nav nav a::after{display:none}
main{padding-top:var(--head)}

/* mobile menu (app.js builds .burger and .msheet from the nav) */
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;justify-self:end}
.burger i{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--out),opacity .3s}
.menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0}
.menu-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.msheet{position:fixed;inset:0;padding:6rem 1.5rem 2rem;background:var(--paper);z-index:90;display:none;
  flex-direction:column;gap:1.2rem;align-items:center;text-align:center}
.msheet a{font-size:1.4rem;font-weight:600;color:var(--ink);text-decoration:none}
.msheet a.btn{margin-top:1rem;color:#fff;font-size:1.05rem}
.menu-open .msheet{display:flex}
.menu-open{overflow:hidden}
@media(max-width:860px){
  .nav{grid-template-columns:auto 1fr auto auto;gap:.8rem}
  .nav nav{display:none}
  .nav>.btn{grid-column:3}
  .burger{display:flex;grid-column:4}
}

/* ---------- sections and bands ---------- */
section{padding:var(--gap) 0}
.sep{border-top:0}
.after-rule,.after-hero{padding-top:var(--gap)}
/* interior page opener: same shape on program / education / results */
.phero{padding:clamp(4.5rem,9vw,7rem) 0 clamp(2rem,4vw,3rem);text-align:center}
.after-hero-block{padding-top:clamp(3rem,6vw,4.5rem)}

/* ---------- the twelve-week rail ----------
   Four stops, all open, on one hairline. Replaces an accordion that sat
   directly above the FAQ accordion, and the SVG bar above it that drew the
   same week ranges the headings already state. */
.rail{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
  margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--edge);padding-top:0}
.rail .stop{position:relative;padding-top:1.9rem;text-align:left}
.rail .stop::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--ink)}
.rail .wk{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:.5rem}
.rail h3{font-size:1.12rem;margin-bottom:.5rem}
.rail p{font-size:.97rem;color:var(--ink-soft);line-height:1.5}
@media(max-width:860px){
  /* the rail stands up rather than wrapping into a ragged grid */
  .rail{grid-template-columns:1fr;gap:0;border-top:0;border-left:1px solid var(--edge);padding-left:1.6rem;margin-left:5px}
  .rail .stop{padding-top:0;padding-bottom:1.8rem}
  .rail .stop:last-child{padding-bottom:0}
  .rail .stop::before{top:.34em;left:calc(-1.6rem - 6px)}
}
.rule-full{display:none}
.band{background:var(--grey-1);color:var(--ink);border:1px solid var(--edge);border-radius:var(--r-tray);
  width:min(1180px,100% - 2.5rem);margin:var(--gutter) auto;padding:clamp(2.4rem,5vw,3.8rem) 0}
.band h2,.band h3{color:var(--ink)}
.band .kick{color:var(--faint)}
.band .body,.band .lede,.band .head .body{color:var(--ink-soft)}
/* a tray sits inside the page, so its own wrap needs less room than the page's */
.band .wrap{width:min(1080px,100% - 3.5rem)}
@media(max-width:700px){.band{width:min(1180px,100% - 1.5rem);border-radius:20px}
  .band .wrap{width:min(1080px,100% - 2.2rem)}}

/* ---------- hero: fills the first screen, nothing else in view ---------- */
.hero{min-height:calc(100svh - var(--head));display:grid;align-content:center;
  padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,4.5rem);text-align:center}
.hero .kick{margin-bottom:1.4rem}
.hero .hold{width:min(980px,100% - 3rem)}
.hero h1{margin-inline:auto;max-width:14ch;font-size:clamp(2.7rem,7vw,5.6rem)}
.hero .lede{margin:1.4rem auto 0;max-width:40ch}
.hero .ctas{justify-content:center;margin-top:2.4rem}


/* Inside the Collective: four numbers on one hairline, like the week rail. */
.tally{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.tal{padding:clamp(1.6rem,3vw,2.2rem) clamp(1rem,2vw,1.5rem);text-align:left}
.tal+.tal{border-left:1px solid var(--edge)}
.tal b{display:block;font-size:clamp(3rem,5.4vw,4.4rem);font-weight:700;letter-spacing:-.06em;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums}
.tal h3{font-size:1.02rem;margin:1rem 0 .4rem}
.tal p{font-size:.95rem;color:var(--ink-soft);line-height:1.5}
@media(max-width:700px){.tally{grid-template-columns:1fr}.tal+.tal{border-left:0;border-top:1px solid var(--edge)}}
@media(max-width:340px){.tally{grid-template-columns:1fr}.tal+.tal{border-left:0;border-top:1px solid var(--edge)}}
.feats{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:2.1rem;
  max-width:30rem;margin-inline:auto;
  font-size:.82rem;font-weight:500;color:var(--faint)}
.feats li{display:inline-flex;align-items:center;gap:1.1rem}
.feats li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none}
@media(max-width:700px){
  .feats{gap:.35rem 1.4rem;max-width:24rem}
  .feats li+li::before{display:none}
}
.feats a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold);transition:color .2s}
.feats a:hover{color:var(--gold)}

/* ---------- blocks ---------- */
.block,.panel{background:var(--grey-1);border-radius:var(--r);overflow:hidden}
.grad-cool,.grad-warm,.grad-dark{background:var(--grey-1)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:820px){.feat{grid-template-columns:1fr}}
.feat .panel{padding:1.7rem 1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.feat .panel p{font-size:.98rem;color:var(--ink-soft);max-width:30ch}
.feat .panel .big{font-size:clamp(2.6rem,4.6vw,3.6rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ink)}

/* ---------- testimonials: the big block, on black ---------- */
.tblock{background:#fff;border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--lift);
  padding:clamp(1.8rem,3.6vw,2.8rem) clamp(.8rem,2.5vw,1.8rem)}
.tcycle{position:relative}
.tstage{display:grid}
.tslide{grid-area:1/1;display:grid;gap:2rem;opacity:0;visibility:hidden;transform:translateY(10px) scale(.995);
  transition:opacity .7s var(--out),transform .7s var(--out),visibility 0s linear .7s}
.tslide.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--out),transform .7s var(--out)}
@media(min-width:820px){.tslide{grid-template-columns:1fr 1fr;gap:0}
  .tslide .quote+.quote{border-left:1px solid var(--edge)}}
.quote{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;padding:.5rem clamp(.5rem,3.5vw,3rem)}
.quote blockquote{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:500;letter-spacing:-.02em;line-height:1.3;color:var(--ink);max-width:26ch}
.quote .who{display:flex;align-items:center;gap:.8rem;font-size:.92rem;color:var(--faint);margin-top:auto;text-align:left}
.quote .who .av{width:44px;height:44px;border-radius:50%;background:var(--grey-1);border:1px solid var(--edge);flex:none}
.quote .who b{display:block;color:var(--ink);font-weight:600}
.quote.ph blockquote{color:var(--faint)}
.tdots{display:flex;gap:.55rem;justify-content:center;margin-top:2.2rem}
/* Bigger than a decoration: these are the control for six testimonials, so
   they get a real hit area (a 22px transparent box around a 9px dot). */
.tdots button{width:9px;height:9px;padding:0;border:0;border-radius:100px;background:var(--grey-3);cursor:pointer;
  position:relative;transition:background .3s var(--out),width .3s var(--out)}
.tdots button::after{content:"";position:absolute;inset:-7px;border-radius:100px}
.tdots button:hover{background:var(--faint)}
.tdots button[aria-current="true"]{background:var(--ink);width:30px}
.tdots button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Erik and Splash ---------- */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.people.one{grid-template-columns:minmax(0,520px);justify-content:center}
@media(max-width:700px){.people,.people.two{grid-template-columns:1fr}}
.person{background:var(--grey-1);border:1px solid var(--grey-2);border-radius:var(--r);padding:clamp(2rem,4vw,2.8rem) clamp(1.4rem,3vw,2.2rem);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  transition:transform .35s var(--out),border-color .35s,box-shadow .35s var(--out)}
.person:hover{transform:translateY(-3px);border-color:var(--grey-3);box-shadow:0 14px 30px -22px rgba(0,0,0,.35)}
.person img,.person .avatar{width:150px;height:150px;border-radius:50%;object-fit:cover;background:var(--grey-2);
  border:4px solid #fff;box-shadow:0 0 0 1px var(--grey-2);margin-bottom:1rem}
.person .avatar{display:grid;place-items:center;font-weight:700;font-size:2rem;color:var(--gold)}
.person h3{margin:0;font-size:1.55rem}
.person .handle{font-size:.9rem;color:var(--faint)}
.person p{font-size:1rem;color:var(--ink-soft);max-width:34ch;margin-top:.7rem}
.person p.ph{color:var(--faint)}

/* ---------- motion ----------
   Restrained on purpose. A spotlight follows the cursor across a card (not
   across a face), a highlight slides between nav tabs, headings rise out of a
   cut line the first time you see them, a sweep crosses a button on hover, and
   a hairline tracks scroll depth. Everything is a compositor property
   (transform / opacity), everything has a resting state that is fully visible,
   and all of it stops dead under prefers-reduced-motion. */

/* A card lights up under the pointer. It is on the numbered cards, the FAQ
   rows, the video tiles, the quotes and the rail stops — everything made of
   type and rules. It is deliberately NOT on .person: those hold a face, and a
   light sweeping across someone's portrait reads as a gimmick. */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  opacity:0;transition:opacity .35s var(--out);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.9),transparent 62%)}
.spot:hover::before{opacity:1}
.vid.spot::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.09),transparent 62%);z-index:1}

/* ---------- nav: a highlight that slides between tabs ---------- */
.nav nav{position:relative}
.limelight{position:absolute;top:.28rem;bottom:.28rem;left:0;width:0;border-radius:100px;background:#fff;
  opacity:0;pointer-events:none;z-index:0;
  transition:transform .22s var(--out),width .22s var(--out),opacity .16s linear}
.nav nav:hover .limelight{opacity:1}
.nav nav a{position:relative;z-index:1}
/* The white pill behind a hovered tab is the .limelight element, not a
   background on the link. The link's :hover only changes colour, so there is
   nothing here to override on the current tab. */
.nav nav a[aria-current]{background:var(--ink);color:#fff}

/* ---------- headings rise out of a cut line ----------
   .cut is added by app.js only after it has wrapped the text, so a heading is
   never left invisible by a script that did not run. */
.cut{display:block;overflow:hidden;
  /* room for descenders (the p in "Splash", the y in "you") so the mask does
     not shave them off, without changing the heading's layout height */
  padding-bottom:.14em;margin-bottom:-.14em}
.cut > i{display:block;font-style:inherit;transform:translateY(105%);
  transition:transform .85s cubic-bezier(.16,1,.3,1)}
.cut.lit > i,.no-js .cut > i{transform:none}

/* ---------- a sweep across the button on hover ---------- */
.btn{overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .7s var(--out)}
.btn:hover::after{transform:translateX(120%)}
.btn-line::after,.btn-pale::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%)}

/* ---------- a hairline that tracks how far down the page you are ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--gold);z-index:120;pointer-events:none}
/* Where the browser supports it, the hairline is driven by a scroll timeline
   instead of a scroll listener. A scroll timeline is POSITIONAL — the browser
   recomputes it from the scroll offset rather than from a clock — so it cannot
   drift or stall the way a rAF-driven value does, and it drops the listener
   entirely. The JS in app.js stays as the fallback for browsers without it. */
@supports (animation-timeline: scroll()) {
  .progress{animation:progress-grow linear both;animation-timeline:scroll(root block)}
}
@keyframes progress-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Press feedback. The sweep happens NEAR a button; this is the moment the
   interface confirms it heard the click. 0.97, not 0.9 — a big squash reads
   as a toy. */
/* ⛔ No press-scale on .acc-q or .opt. They are full-width rows, so scaling
   drags the text visibly inward and back — "it sinks in, pops out" — which is
   exactly what he objected to. It stays on the small controls, where a press
   reads as a press and nothing shifts enough to notice. */
.btn,.opt,.acc-q,.tdots button,.socials a,.lnk{transition-property:background,border-color,color,transform,opacity;
  -webkit-tap-highlight-color:transparent}
.btn:active,.socials a:active{transform:scale(.97)}
.tdots button:active{transform:scale(.9)}

.socials{display:flex;gap:.5rem;margin-top:1.2rem}
.socials a{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--grey-2);display:grid;place-items:center;
  color:var(--ink);transition:background .22s,color .22s,border-color .22s,transform .25s var(--out)}
.socials a:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.socials svg{width:18px;height:18px;display:block}

/* ---------- library: two video slots, black tiles ---------- */
.vids{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:700px){.vids{grid-template-columns:1fr}}
.vid{position:relative;border-radius:var(--r);aspect-ratio:16/9;overflow:hidden;background:#0a0a0a;border:1px solid var(--edge);
  display:grid;place-items:center;text-decoration:none;color:#fff;transition:transform .35s var(--out)}
.vid:hover{transform:translateY(-3px)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .play{width:64px;height:64px;border-radius:50%;background:var(--gold-lift);display:grid;place-items:center;transition:transform .3s var(--out)}
.vid .play::after{content:"";border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #000;margin-left:4px}
.vid:hover .play{transform:scale(1.08)}
.vid .cap{position:absolute;left:1.2rem;right:1.2rem;bottom:1rem;font-size:.9rem;color:#8c8c8c}
.vid .cap b{display:block;color:#fff;font-weight:600;font-size:1rem}
.vid.soon-slot .play{background:#2a2a2a}
.vid.soon-slot .play::after{border-left-color:#8c8c8c}
.vid.soon-slot:hover .play{background:var(--gold-lift)}
.vid.soon-slot:hover .play::after{border-left-color:#000}
.libwide{display:grid;grid-template-columns:1.15fr .85fr;border-radius:var(--r);overflow:hidden;background:var(--grey-1)}
.libwide .vid{border:0;border-radius:0;aspect-ratio:auto;min-height:260px}
.libwide .txt{padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;justify-content:center;gap:.6rem}
.libwide .txt h3{font-size:clamp(1.2rem,1.8vw,1.5rem)}
.libwide .txt p{font-size:1rem;color:var(--ink-soft)}
@media(max-width:820px){.libwide{grid-template-columns:1fr}}

/* ---------- the fit check: one white card inside the booking tray ----------
   Questions and the contact form share one locked height (measured, tallest
   screen wins). The calendar step unlocks it and widens the card to the full
   wrap so the whole cal.com month view shows with no inner scroll. */
.fit{position:relative;background:#fff;color:var(--ink);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--lift);
  padding:clamp(1.4rem,3vw,2.1rem) clamp(1.2rem,3vw,2.2rem) clamp(1.1rem,2.4rem,1.8rem);
  width:min(1000px,100%);margin-inline:auto;scroll-margin-top:var(--head)}
.fit-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.dots{display:flex;gap:.35rem}
.dots i{width:34px;height:4px;border-radius:4px;background:var(--grey-2);transition:background .4s var(--ease)}
.dots i.on{background:var(--ink)}
/* ONE fixed height for every screen of the funnel, questions through calendar.
   It used to be measured in JS and then unlocked for cal.com, so the card threw
   itself open when someone qualified. The height is now whatever the calendar
   needs, capped to what a laptop viewport can actually show. */
.q-body{height:var(--fith);min-height:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.q-body.cal{justify-content:stretch}
.q-body .calwrap{display:flex;flex-direction:column;gap:0;height:100%;width:100%}
.q-body.cal .q-num{margin:0;text-transform:none;letter-spacing:0;font-size:.92rem;font-weight:500}
.q-body .fade{width:100%;display:flex;flex-direction:column;align-items:center}
.q-num{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.q-body h3{font-size:clamp(1.45rem,2.5vw,2rem);font-weight:700;letter-spacing:-.03em;margin:.7rem 0 1.3rem;max-width:24ch;line-height:1.1}
.q-body .body{margin:0 auto .3rem;max-width:44ch}
.opts{display:grid;gap:.6rem;width:min(560px,100%)}
.opt{text-align:left;background:#fff;border:1px solid var(--grey-2);color:var(--ink);padding:1rem 1.2rem;border-radius:var(--r-ctl);
  font-size:1rem;font-weight:500;font-family:var(--sans);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:border-color .2s,background .2s,transform .25s var(--out)}
.opt:hover{border-color:var(--ink);background:var(--grey-1);transform:translateX(4px)}
.opt em{font-style:normal;color:var(--gold);opacity:0;transition:opacity .2s}
.opt:hover em{opacity:1}
.q-foot{display:flex;justify-content:center;min-height:1.6rem;margin-top:1rem}
.lnk{background:none;border:0;font-family:var(--sans);font-size:.92rem;font-weight:500;color:var(--faint);cursor:pointer;padding:0;transition:color .2s}
.lnk:hover{color:var(--ink)}
.lnk[hidden]{visibility:hidden;display:block}
.fade{animation:fadein .45s var(--out)}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tick{width:48px;height:48px;border-radius:50%;background:var(--gold-lift);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;margin:0 auto 1.1rem}
.no .tick{background:var(--grey-1);color:var(--faint)}
.field{display:grid;gap:.4rem;margin-top:.9rem;width:min(420px,100%);text-align:left}
.field label{font-size:.86rem;font-weight:600;color:var(--ink-soft)}
.field input{font-family:var(--sans);font-size:1.02rem;padding:.9rem 1rem;border:1px solid var(--edge);border-radius:var(--r-ctl);background:#fff;color:var(--ink);width:100%}
.field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(166,124,28,.25)}
.field .err{font-size:.82rem;color:#b3261e;min-height:1.1em}
/* cal.com reports its own height (about 570px) and the card's stage is a fixed
   640, so the embed never fills it. Centre it with auto margins in the column
   and let the box shrink to whatever cal.com asks for.
   ⛔ Do NOT make this a flex container to centre the iframe instead. cal.com
   measures its own width as it loads; a flex parent changed that measurement
   mid-load, the embed dropped under the 769px cliff, and it came back as the
   2600px stacked layout clipped top and bottom. Height auto, margin auto. */
/* No border. The embed sits on the same white as the card, so a hairline here
   just drew a second box inside a box. Padding stays: that is the breathing
   room, and it is what keeps the calendar off the top edge. */
#cal-embed{flex:0 0 auto;width:100%;margin:auto 0;border-radius:var(--r-ctl);
  overflow:hidden;background:#fff;padding:clamp(.9rem,1.6vw,1.25rem)}
.cal-fallback{padding:3rem 1.4rem;text-align:center;color:var(--faint);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
/* 🔴 cal.com has a CLIFF, not a taper, at 769px of embed width. At 769 the
   month view settles at 570px tall. At 768 cal.com throws the month_view
   layout away and renders a stacked card 2641px tall — measured. A fixed
   640px box would clip that on every phone, so below the width where the
   embed can still clear 769px the card stops being a fixed height and grows
   with the embed, and the page scrolls instead of the box. */
/* The inner padding costs the iframe 40px of width, which moves the cliff:
   the embed only clears 769px while the card is at least ~880px wide, and it
   is that wide only above roughly a 980px viewport. Below that the card stops
   being a fixed height and grows with the stacked embed. */
@media(max-width:980px){
  .q-body.cal{height:auto;min-height:0;overflow:visible}
  #cal-embed{flex:none;height:auto;min-height:520px}
}

.fitpage{padding-block:clamp(3.5rem,7vw,6rem)}
.fitpage .wrap{width:min(1080px,100% - 3rem)}

/* ---------- booking block (results.html) ---------- */
.bookwrap{background:var(--grey-1);border-radius:var(--r);overflow:hidden}
.bookwrap .inner{padding:clamp(2rem,4.5vw,3.2rem);text-align:center}
.bookwrap .inner .lede{margin-inline:auto}
.bookwrap .inner .ctas{justify-content:center}

/* ---------- accordion (FAQ, week by week): rounded rows, one open at a time ---------- */
.acc{display:grid;gap:.6rem;border:0}
.acc-item{background:var(--grey-1);border:1px solid transparent;border-radius:var(--r);padding:0 1.3rem;
  transition:background .3s var(--out),border-color .3s var(--out)}
.acc-item.open{background:#fff;border-color:var(--grey-2)}
.acc-q{width:100%;background:none;border:0;font-family:var(--sans);font-size:1.04rem;font-weight:600;color:var(--ink);
  text-align:left;padding:1.15rem 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.acc-q .pm{position:relative;width:28px;height:28px;border-radius:50%;background:var(--ink);flex:none;transition:transform .4s var(--out),background .3s}
.acc-q .pm::before,.acc-q .pm::after{content:"";position:absolute;background:#fff;border-radius:1px;left:50%;top:50%;transform:translate(-50%,-50%)}
.acc-q .pm::before{width:12px;height:2px}
.acc-q .pm::after{width:2px;height:12px}
.acc-item.open .pm{transform:rotate(45deg);background:var(--gold)}
.acc-a{height:0;overflow:hidden;transition:height .45s var(--out)}
.acc-a p{padding:0 0 1.3rem;color:var(--ink-soft);max-width:60ch;font-size:1rem}

/* The one piece of ornament on the site, and it earns its place: the only
   serif on any page is the gold ampersand in the wordmark, so a serif quote
   mark in the same face and colour reads as the brand rather than as clip
   art, and it says "quotes follow" without a word of label. */
.qmark{display:block;text-align:center;font-family:var(--amp);font-style:italic;font-weight:700;
  color:var(--gold);font-size:clamp(4.5rem,10vw,7.5rem);line-height:.55;
  margin:0 0 clamp(.6rem,1.4vw,1rem);user-select:none}

/* ---------- quotes on a hairline grid (results.html) ----------
   The page used .quotes / .who-av / .quote.big, none of which were ever in
   this stylesheet, so four testimonials rendered as unstyled stacked blocks.
   One grid, hairlines between, two of them full width so the page does not
   become a wall of equal boxes. */
.qgrid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--edge);margin-top:clamp(1rem,2vw,1.6rem)}
.qgrid .q{padding:clamp(1.7rem,3.4vw,2.6rem) clamp(1rem,2.4vw,2rem);border-bottom:1px solid var(--edge)}
.qgrid .q:nth-of-type(2){border-right:1px solid var(--edge)}
.qgrid .q.wide{grid-column:1/-1;border-right:0;text-align:center}
.qgrid blockquote{font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:500;letter-spacing:-.02em;line-height:1.35;color:var(--ink)}
.qgrid .q.wide blockquote{font-size:clamp(1.25rem,2.1vw,1.7rem);max-width:34ch;margin-inline:auto}
.qgrid .q.ph blockquote{color:var(--faint)}
.qgrid .who{font-size:.86rem;color:var(--faint);margin-top:1.1rem}
@media(max-width:760px){.qgrid{grid-template-columns:1fr}.qgrid .q:nth-of-type(2){border-right:0}}

/* ---------- stats (results.html) ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--grey-2);border-radius:var(--r);overflow:hidden}
.stat{background:var(--grey-1);padding:1.6rem 1.3rem;text-align:center}
.stat b{display:block;font-size:clamp(2rem,3.4vw,2.8rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.stats.light{background:var(--grey-2)}
.stats.light .stat{background:var(--grey-1)}

/* ---------- row list (currently unused; kept light like everything else) ---------- */
.rows{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--edge)}
.row{border-bottom:1px solid var(--edge);display:grid;grid-template-columns:3rem 1fr 2rem;gap:1.2rem;
  padding:1.3rem 0;text-decoration:none;color:inherit;align-items:center;transition:background .25s}
.row:hover{background:var(--grey-1)}
.row .n{font-size:.72rem;letter-spacing:.14em;color:var(--faint);font-weight:600}
.row .t{display:block;font-size:clamp(1.25rem,2.5vw,1.8rem);font-weight:700;letter-spacing:-.035em;line-height:1.1;text-transform:none}
.row .t i{font-style:normal;color:var(--gold)}
.row .rowtext{grid-column:2;display:block;min-width:0}
.row .sayw{display:block;overflow:hidden;max-height:0;transition:max-height .4s var(--out),margin-top .4s var(--out)}
.row:hover .sayw,.row:focus-visible .sayw{max-height:5rem;margin-top:.5rem}
.row .say{display:block;font-size:.95rem;color:var(--ink-soft);max-width:52ch}
.row .go{grid-column:3;justify-self:end;color:var(--faint);transition:transform .3s var(--out),color .25s}
.row:hover .go{transform:translateX(4px);color:var(--gold)}

/* ---------- generic cards (program/education) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
.card{background:var(--grey-1);border:1px solid transparent;border-radius:var(--r);padding:1.6rem 1.4rem;text-align:center;
  transition:transform .35s var(--out),border-color .35s}
.card:hover{transform:translateY(-3px);border-color:var(--grey-2)}
.card .q{font-size:.72rem;letter-spacing:.14em;color:var(--faint);font-weight:600}
.card h3{margin:.7rem 0 .45rem}
.card p{font-size:.98rem;color:var(--ink-soft)}

/* ---------- under maintenance ---------- */
.soon{border:1px solid var(--grey-2);border-radius:var(--r);padding:clamp(2rem,4.5vw,3.2rem);text-align:center;background:var(--grey-1)}
.soon .kick{color:var(--gold)}
.soon h3{margin:.8rem 0 .6rem;font-size:clamp(1.5rem,2.8vw,2rem)}
.soon p{color:var(--ink-soft);max-width:46ch;margin-inline:auto;font-size:1rem}

/* ---------- reveal: soft rise on first view, staggered ---------- */
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .7s var(--out),transform .7s var(--out)}
.js .rv-1.in{transition-delay:.08s}.js .rv-2.in{transition-delay:.16s}
.js .rv-3.in{transition-delay:.24s}.js .rv-4.in{transition-delay:.32s}
@keyframes lift-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lift{animation:lift-in .8s cubic-bezier(.25,.9,.3,1) both}
.lift.d1{animation-delay:.1s}.lift.d2{animation-delay:.2s}.lift.d3{animation-delay:.3s}

/* ---------- legal pages ---------- */
.legal h1{margin-top:1.3rem;font-size:clamp(2.4rem,5.4vw,4rem)}
.legal .lede{margin-bottom:2rem}
.legal h3{font-size:1.08rem;margin:1.9rem 0 .5rem;scroll-margin-top:6rem}
.legal h3:first-of-type{margin-top:0}
.legal p{color:var(--ink-soft);max-width:66ch;font-size:1rem}
.legal ul{margin:.4rem 0 0 1.1rem;color:var(--ink-soft);max-width:66ch;font-size:1rem}
.legal li{margin:.3rem 0}
.legal a{color:var(--gold);text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal .updated{font-size:.8rem;color:var(--faint);margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--grey-2)}

/* ---------- footer ---------- */
footer{background:var(--paper);color:var(--ink-soft);padding:clamp(3rem,6vw,4.5rem) 0 2rem;font-size:.9rem;border-top:1px solid var(--grey-2)}
footer a{color:var(--ink);text-decoration:none;transition:color .2s}
footer a:hover{color:var(--gold)}
.f-grid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,.7fr));gap:2.2rem}
@media(max-width:820px){.f-grid{grid-template-columns:1fr 1fr 1fr}.f-grid>div:first-child{grid-column:1/-1}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr 1fr}}
.f-grid h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:.8rem;font-weight:600}
.f-grid ul{list-style:none;display:grid;gap:.5rem}
.disc{background:var(--grey-1);border-radius:var(--r);padding:1.2rem 1.4rem;margin-top:2.4rem;font-size:.8rem;line-height:1.6;color:var(--faint)}
.disc b{color:var(--ink-soft);font-weight:600}
.f-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--grey-2);font-size:.82rem}

/* ---------- leftovers other pages still reference ---------- */
.statement{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;letter-spacing:-.04em;line-height:1.15;max-width:24ch;margin-inline:auto;text-align:center}
.statement .wd{display:inline}
.statement .wd.key{color:var(--gold);font-style:normal;font-family:var(--sans)}
.who-card{background:var(--grey-1);border-radius:var(--r);padding:1.7rem}
.who-top{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.who-pic{width:56px;height:56px;border-radius:50%;object-fit:cover}
.who-list{list-style:none;display:grid;gap:.35rem;margin-top:.9rem;font-size:.95rem;color:var(--ink-soft)}
.chartwrap{position:relative;margin-top:2rem}
.chartwrap svg{width:100%;height:auto;display:block}
.chart-line{stroke:var(--gold);stroke-width:2.2;fill:none}
.chart-fill{fill:url(#cg);opacity:.9}
.cross{opacity:0}.chartwrap:hover .cross{opacity:1}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;border-radius:8px;padding:.4rem .6rem;font-size:.78rem;opacity:0;transition:opacity .2s}
.chartwrap:hover .tip{opacity:1}
.tip span{display:block;color:#a3a3a3;font-size:.72rem}


/* ================= THE COLLECTIVE: brand layer ================= */
/* The emblem. Drawn with a non-scaling hairline so the rim stays as fine at
   34px in the header as it is at 150px in the hero, like the board. */
.emblem{display:block;color:var(--ink);overflow:visible}
.emblem .rim{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke}
.emblem .dots circle{fill:var(--faint)}
.emblem .fig{fill:currentColor}

/* Horizontal lockup (board, right): emblem | hairline | "Collective" over a
   small spaced THE. */
.mark{display:inline-flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--ink);line-height:1;justify-self:start}
.mark .emblem{width:40px;height:40px;flex:none}
.mark .vr{width:1px;height:34px;background:var(--grey-2);flex:none}
.mark .wm{display:flex;flex-direction:column;gap:.28rem}
.mark .w1{font-family:var(--amp);font-weight:500;font-size:1.62rem;letter-spacing:.03em;line-height:.85}
.mark .w2{font-family:var(--amp);font-weight:500;font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;color:var(--faint);line-height:1}
footer .mark .emblem{width:46px;height:46px}
@media(max-width:420px){.mark{gap:.6rem}.mark .emblem{width:34px;height:34px}.mark .vr{height:28px}.mark .w1{font-size:1.32rem}
  .nav{gap:.5rem}.nav>.btn-sm{padding:.55rem .85rem}}

/* Stacked lockup (board, centre + left): emblem, THE, COLLECTIVE, hairline. */
.emblem.big{width:clamp(96px,11vw,132px);height:clamp(96px,11vw,132px);margin:0 auto clamp(1.6rem,3vw,2.2rem)}
.lockup{font-family:var(--amp);font-weight:500;text-transform:uppercase;letter-spacing:.06em;line-height:1;color:var(--ink);max-width:none!important}
.lockup .the{display:block;font-size:clamp(1.1rem,1.9vw,1.55rem);letter-spacing:.32em;margin:0 0 .5rem .32em}
.lockup .name{display:block;font-size:clamp(3rem,9.5vw,7.4rem);letter-spacing:.06em;margin-left:.06em}
.hair{display:block;width:56px;height:1px;background:var(--grey-3);margin:clamp(1.4rem,2.6vw,2rem) auto clamp(1.2rem,2.2vw,1.6rem)}
.hero .kick{margin:0}
.hero .lede{margin:.9rem auto 0}

/* Type: every heading in the serif. Cormorant runs small on the x-height, so
   sizes step up and tracking opens instead of tightening. */
h1,h2,h3,.statement{font-family:var(--amp);font-weight:500;letter-spacing:-.005em;line-height:1.04}
h1{font-size:clamp(2.9rem,6.8vw,5.4rem)}
h2{font-size:clamp(2.3rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.35rem,1.9vw,1.6rem);letter-spacing:0;line-height:1.15}
.it,.on-dark .it,.band .it,.row .t i,.statement .wd.key{font-family:var(--amp);font-style:italic;font-weight:400;color:var(--ink)}
.kick,.q-num,.rail .wk,.f-grid h4{letter-spacing:.24em;color:var(--faint)}
.tal b,.feat .panel .big,.stat b{font-family:var(--amp);font-weight:500;letter-spacing:-.01em;font-feature-settings:"lnum" 1}
.tal b{font-size:clamp(3.6rem,6.4vw,5.2rem);line-height:.85;font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"lnum" 1}
.tal h3{font-size:1.3rem}
.person h3{font-size:1.9rem}
.quote blockquote,.qgrid blockquote{font-family:var(--amp);font-weight:500;letter-spacing:0;line-height:1.22}
.quote blockquote{font-size:clamp(1.5rem,2.5vw,2.05rem)}
.qmark{color:var(--grey-3);font-weight:400}
.acc-q{font-weight:500}
.legal h3{font-size:1.35rem}

/* Buttons: ink on paper, quiet spaced capitals, square corners. Hover inverts
   to paper with an ink rule instead of the old gold fill. */
.btn{color:var(--paper);background:var(--ink);border:1px solid var(--ink);font-size:.8rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.btn:hover,.btn-pale:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-pale{color:var(--paper)}
.btn-sm{font-size:.72rem;padding:.7rem 1.15rem;min-height:2.6rem;border-radius:var(--r-ctl)}
.btn-lg{font-size:.82rem;padding:1.05rem 2.1rem}
.btn::after{background:linear-gradient(105deg,transparent 35%,rgba(244,242,237,.18) 50%,transparent 65%)}
.btn:focus-visible,.opt:focus-visible,.acc-q:focus-visible,.lnk:focus-visible,.socials a:focus-visible,.tdots button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.msheet a.btn{color:var(--paper);font-size:.82rem}
.msheet a:not(.btn){font-family:var(--amp);font-weight:500;font-size:1.9rem}

/* Surfaces: paper page, warm trays, and cards a shade lighter than paper so
   they read as sheets laid on it. */
header{background:rgba(244,242,237,.9)}
.nav nav{background:transparent;padding:0;gap:.4rem}
.nav nav a{font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:.55rem .8rem;border-radius:var(--r-ctl)}
.nav nav a[aria-current]{background:transparent;color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink);border-radius:0}
.limelight{background:var(--grey-1);border-radius:var(--r-ctl)}
.tblock,.fit,.opt,.acc-item.open,.field input,.socials a{background:#fbfaf7}
.person img,.person .avatar{border-color:var(--paper)}
.person:hover{box-shadow:0 14px 30px -22px rgba(27,26,24,.35)}
.spot::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 62%)}
#cal-embed{background:transparent}
.tick{background:var(--ink);color:var(--paper)}
.opt em{color:var(--faint)}
.opt:hover{background:var(--grey-1)}
.field input:focus{box-shadow:0 0 0 3px rgba(27,26,24,.12)}
.acc-q .pm{background:transparent;border:1px solid var(--ink)}
.acc-q .pm::before,.acc-q .pm::after{background:var(--ink)}
.acc-item.open .pm{background:var(--ink)}
.acc-item.open .pm::before,.acc-item.open .pm::after{background:var(--paper)}
.vid{background:var(--ink)}
.vid .play{background:var(--paper)}
.vid .play::after{border-left-color:var(--ink)}
.vid.soon-slot .play{background:#3a3833}
.vid.soon-slot:hover .play{background:var(--paper)}
.vid.soon-slot:hover .play::after{border-left-color:var(--ink)}
.progress{background:var(--ink);height:1px}
.feats li+li::before{background:var(--grey-3)}
.legal a,.soon .kick{color:var(--ink)}
.legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--grey-3)}
footer{background:var(--paper)}
footer a:hover{color:var(--faint)}
.disc{background:var(--grey-1)}


/* VOICES (home testimonials): the emblem, large and live, beside the
   quote it is showing. One bubble per member on the ring; the active bubble
   fills with ink, the figure in the middle stays as the anchor. */
.voices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;
  margin-top:clamp(.6rem,2vw,1.4rem)}
.orbit{position:relative;width:min(100%,440px);aspect-ratio:1;margin:0 auto}
.orbit svg{width:100%;height:100%;display:block;overflow:visible}
.orbit .rim{fill:none;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.orbit .figure{fill:var(--ink)}
.pt{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.pt .hit{fill:transparent}
.pt .face{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--out)}
.pt .ring{fill:none;stroke:var(--paper);stroke-width:2;vector-effect:non-scaling-stroke;transition:stroke .25s}
.pt image{filter:grayscale(.35);transition:filter .3s}
.pt:hover .face{transform:scale(1.14)}
.pt:hover image,.pt.act image{filter:none}
.pt.act .face{transform:scale(1.28)}
.pt.act .ring{stroke:var(--ink);stroke-width:2.4}
.pt:focus-visible .hit{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.orbit:not(.touched) .pt:not(.act) .face{animation:pt-breathe 4.2s var(--out) var(--d,0s) infinite}
@keyframes pt-breathe{0%,100%{transform:none}8%{transform:scale(1.16)}20%{transform:none}}
.tqs{display:grid;min-height:clamp(320px,34vw,420px);align-items:center}
.tq{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .45s var(--out),transform .5s var(--out),visibility 0s linear .45s}
.tq.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--out),transform .5s var(--out)}
.tq blockquote{font-family:var(--amp);font-weight:500;font-size:clamp(1.45rem,2.3vw,1.95rem);line-height:1.22;color:var(--ink);max-width:30ch}
.tq .who,.rq .who{margin-top:1.1rem;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);display:flex;gap:.7rem;align-items:baseline}
.tq .who b,.rq .who b{font-family:var(--amp);font-size:1.35rem;letter-spacing:.02em;text-transform:none;color:var(--ink);font-weight:500}
.tq img{margin-top:1.3rem;width:auto;max-width:100%;max-height:210px;border-radius:var(--r);border:1px solid var(--edge);box-shadow:var(--lift)}
@media(max-width:820px){.voices{grid-template-columns:1fr}.orbit{width:min(100%,340px)}.tqs{min-height:0;align-items:start}
  .tq blockquote{font-size:1.35rem}}

/* RESULTS: the same members, in full. Text left, their proof right. */
.rqs{display:grid;gap:0;border-top:1px solid var(--edge)}
.rq{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:start;
  padding:clamp(2rem,4vw,3rem) 0;border-bottom:1px solid var(--edge)}
.rq.noimg{grid-template-columns:minmax(0,1fr)}
.rq.noimg .rq-txt{max-width:62ch}
.rq blockquote p{font-family:var(--amp);font-weight:500;font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.32;color:var(--ink)}
.rq blockquote p+p{margin-top:.8rem}
.rq img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--edge);box-shadow:var(--lift)}
#ricky img{max-width:220px;justify-self:start}
@media(max-width:820px){.rq{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .spot::before,.limelight,.btn::after,.progress{display:none}
  .btn:active,.socials a:active,.tdots button:active{transform:none}
  .cut > i{transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
}


/* ---------- print / PDF ------------------------------------------------------
   The legal pages get sent out as standalone PDFs (Whop wants them uploaded),
   so printing has to produce a DOCUMENT, not a screenshot of a web page: no
   nav, no site footer, no buttons, black on white.

   ⚠️ The entrance animations matter here. `.lift` and `.rv` animate opacity and
   transform, and a print snapshot can catch them mid-flight and render half the
   page invisible. They are forced to their resting state below. */
@media print{
  @page{margin:18mm 16mm}

  header,footer,nav,.btn,.ctas{display:none!important}

  .lift,.rv,.d1,.d2,.d3{animation:none!important;opacity:1!important;transform:none!important}

  html,body{background:#fff!important;color:#000!important}
  main,.fitpage{min-height:0!important;padding:0!important;margin:0!important}
  .mid,.legal,.hold,.wrap{width:100%!important;max-width:none!important;margin:0!important}

  .kick{font-size:8pt;letter-spacing:.2em;color:#555!important;margin-bottom:6pt}
  h1{font-size:25pt!important;margin:0 0 6pt}
  h1 .it{color:#8a6212!important}
  .lede{font-size:10.5pt!important;color:#333!important;max-width:none!important;margin:0 0 4pt}

  /* A heading stranded at the foot of a page is the classic print bug. */
  h3{font-size:11.5pt!important;margin:13pt 0 3pt;break-after:avoid;page-break-after:avoid}
  p,li{font-size:10pt!important;line-height:1.5;color:#000!important;orphans:3;widows:3}
  /* Screen CSS leans on flex gap for rhythm; print has no flex here, so
     consecutive paragraphs inside a section ran together with no space. */
  p{margin:0 0 6pt}
  ul{margin:0 0 0 14pt}
  li{margin-bottom:2pt}
  a{color:#000!important;text-decoration:underline}
  .updated{margin-top:14pt;font-size:8.5pt;color:#555!important;border-top:1px solid #ccc;padding-top:6pt}
}
/* On a phone the bubbles and the quote stack, so only the chosen quote takes
   up room — no blank space sized for the longest one. */
@media(max-width:820px){.tq{display:none}.tq.on{display:block}}
.tq .who,.rq .who{align-items:center}
.who .av{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--edge);flex:none;margin:0;box-shadow:none;max-height:none}
/* Home bubbles: initials, not photos (photos are on the Results page). */
.pt .dot{fill:#fbfaf7;stroke:var(--faint);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .25s,stroke .25s}
.pt text{font-family:var(--amp);font-weight:500;font-size:4.2px;letter-spacing:.04em;text-anchor:middle;fill:var(--ink-soft);pointer-events:none;transition:fill .25s}
.pt:hover .dot{stroke:var(--ink)}
.pt.act .dot{fill:var(--ink);stroke:var(--ink)}
.pt.act text{fill:var(--paper)}
/* Scuba's proof is a tall phone screenshot: give it more height on the home
   panel and a narrower column on Results so the profit line stays readable. */
#tq-scuba img{max-height:300px}
#scuba img{max-width:320px;justify-self:start}

/* INSIDE: the headline offer card (1-on-1 with the mentor you choose) and
   its illustrated scheduler. Paper sheet on the page, scheduler as a white
   card inside it. The chosen day and slot are ink; the slot "lands" and the
   booked tick fades in on a slow loop so it reads as someone choosing. */
.one{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(1.8rem,4vw,3.5rem);align-items:center;
  background:#fbfaf7;border:1px solid var(--edge);border-radius:var(--r-tray);padding:clamp(1.6rem,4vw,3rem);margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.one-txt h3{font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.08;margin:.7rem 0 1rem}
.one-txt p:not(.kick){color:var(--ink-soft);max-width:46ch;line-height:1.6}
.one-who{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}
.one-who .pick{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .9rem .35rem .35rem;border:1px solid var(--edge);border-radius:999px;background:var(--paper)}
.one-who img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.one-who b{font-family:var(--amp);font-weight:500;font-size:1.25rem}
.one-who .or{font-family:var(--amp);font-style:italic;color:var(--faint);font-size:1.1rem}
.sched{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:1.2rem;box-shadow:0 24px 50px -30px rgba(27,26,24,.35);font-size:.82rem}
.sched-top{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:1rem}
.sched-t{font-family:var(--amp);font-weight:500;font-size:1.25rem}
.seg{display:inline-flex;border:1px solid var(--edge);border-radius:var(--r-ctl);overflow:hidden;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.seg span{padding:.4rem .7rem;color:var(--faint)}
.seg .on{background:var(--ink);color:var(--paper)}
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin-bottom:.9rem}
.days span{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem 0;border:1px solid var(--edge);border-radius:var(--r-ctl);
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.days b{font-family:var(--amp);font-size:1.2rem;font-weight:500;letter-spacing:0;color:var(--ink)}
.days .on{background:var(--ink);border-color:var(--ink);color:rgba(244,242,237,.7)}
.days .on b{color:var(--paper)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.slots span{text-align:center;padding:.6rem 0;border:1px solid var(--edge);border-radius:var(--r-ctl);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.slots .on{background:var(--ink);border-color:var(--ink);color:var(--paper);animation:slot-pick 5s var(--out) infinite}
.sched-foot{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--edge);
  font-size:.7rem;color:var(--faint)}
.sched-foot .ok{color:var(--ink);font-weight:500;letter-spacing:.06em;animation:booked 5s var(--out) infinite}
@keyframes slot-pick{0%,12%{background:#fff;color:var(--ink-soft);border-color:var(--edge);transform:none}
  20%{transform:scale(.94)}28%,100%{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:none}}
@keyframes booked{0%,32%{opacity:0;transform:translateY(4px)}42%,92%{opacity:1;transform:none}100%{opacity:0}}
.tal h3{min-height:0}
@media(max-width:860px){.one{grid-template-columns:1fr}}
@media(max-width:420px){.slots{grid-template-columns:repeat(2,1fr)}.sched-t{font-size:1.05rem}}
.sched-t,.sched-foot .ok{white-space:nowrap}
.sched-t,.slots,.days b{font-feature-settings:"lnum" 1}
@media(max-width:420px){.sched-top{flex-direction:column;align-items:flex-start}.sched-foot{flex-direction:column;align-items:flex-start;gap:.4rem}}

/* ===== HOW IT WORKS: interactive graphics =====
   One per feature card, one per stage. Ink, paper and warm grey only.
   Every one answers to hover, tap and keyboard; none is needed to read
   the page — the copy beside each says the same thing. */
@media(min-width:860px){.cards.feature{grid-template-columns:repeat(2,1fr)}}
.cards.feature .card{text-align:left;padding:1.6rem 1.6rem 1.8rem}
.cvis.g{height:auto;min-height:150px;margin:0 0 1.3rem;display:flex;flex-direction:column;justify-content:center;
  background:#fbfaf7;border:1px solid var(--edge);border-radius:var(--r);padding:1rem;color:var(--ink)}
.gcap{font-size:.74rem;letter-spacing:.08em;color:var(--faint);margin-top:.6rem;min-height:1.2em;transition:color .25s}
.g button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.g button:focus-visible,.g [tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 01 seats: hover a seat, its lines to the other four draw in */
.g-seats svg{width:100%;max-width:360px;margin:0 auto;display:block;overflow:visible}
.g-seats .ln{stroke:var(--ink);stroke-width:1;stroke-dasharray:140;stroke-dashoffset:140;opacity:.18;transition:stroke-dashoffset .6s var(--out),opacity .3s}
.g-seats.web .ln{stroke-dashoffset:0}
.g-seats .ln.hot{stroke-dashoffset:0;opacity:.9;stroke-width:1.4}
.g-seats .st{cursor:pointer;outline:none}
.g-seats .hit{fill:transparent}
.g-seats .seat{fill:var(--paper);stroke:var(--ink);stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:transform .3s var(--out),fill .25s}
.g-seats .st:hover .seat,.g-seats .st.on .seat{transform:scale(1.18);fill:var(--ink)}
.g-seats .me .seat{fill:var(--ink)}
.g-seats text{font-size:5.4px;font-weight:600;letter-spacing:.12em;text-anchor:middle;fill:var(--paper);pointer-events:none}
.g-seats .gcap{text-align:center}

/* 02 sessions: six tiles, hover one and it goes live, then recorded */
.g-sess .tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}
.g-sess .tile{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem 0 .6rem;border:1px solid var(--edge)!important;
  border-radius:var(--r-ctl);background:var(--paper)!important;transition:background .25s,color .25s,transform .25s}
.g-sess .n{font-family:var(--amp);font-size:1.35rem;font-weight:500;font-feature-settings:"lnum" 1;line-height:1}
.g-sess .st{display:flex;align-items:center;gap:.25rem;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.g-sess .st i{width:0;height:0;border-left:5px solid currentColor;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.g-sess .st em{font-style:normal}
.g-sess .tile.live{background:var(--ink)!important;color:var(--paper);transform:translateY(-3px)}
.g-sess .tile.live .st{color:var(--paper)}
.g-sess .tile.live .st i{width:6px;height:6px;border:0;border-radius:50%;background:var(--paper);animation:livedot 1s ease-in-out infinite}
@keyframes livedot{50%{opacity:.25}}
.g-sess .gcap{text-align:center}
@media(max-width:420px){.g-sess .tiles{grid-template-columns:repeat(3,1fr)}}

/* 03 trade log: tap a trade, the review note appears and it gets ticked */
.g-log .log{display:grid;gap:.35rem}
.g-log .row{display:grid;grid-template-columns:3rem 1fr auto 1.4rem;align-items:center;gap:.6rem;text-align:left;padding:.55rem .75rem;
  border:1px solid var(--edge)!important;border-radius:var(--r-ctl);background:var(--paper)!important;font-size:.82rem;transition:border-color .2s,background .2s}
.g-log .row b{font-weight:600;letter-spacing:.06em}
.g-log .row .r{font-variant-numeric:tabular-nums;color:var(--faint)}
.g-log .row .r.up{color:var(--ink)}
.g-log .ck{width:1.1rem;height:1.1rem;border-radius:50%;border:1px solid var(--grey-3);position:relative;transition:background .25s,border-color .25s}
.g-log .row.done .ck{background:var(--ink);border-color:var(--ink)}
.g-log .row.done .ck::after{content:"";position:absolute;left:.32rem;top:.16rem;width:.28rem;height:.5rem;border:solid var(--paper);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.g-log .row.on{border-color:var(--ink)!important;background:#fff!important}
.g-log .note{font-family:var(--amp);font-size:1.08rem;letter-spacing:0;color:var(--ink);line-height:1.3;min-height:2.7em;margin-top:.8rem}
.g-log .note.idle{font-family:var(--sans);font-size:.74rem;letter-spacing:.08em;color:var(--faint)}

/* 04 chat: the exchange plays when the card is hovered or scrolls in */
.g-chat .chat{display:flex;flex-direction:column;gap:.45rem;min-height:150px;justify-content:flex-end}
.g-chat .msg{max-width:82%;padding:.55rem .8rem;border-radius:12px;font-size:.84rem;line-height:1.35;opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--out),transform .35s var(--out)}
.g-chat .msg.me{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:3px}
.g-chat .msg.them{align-self:flex-start;background:#fff;border:1px solid var(--edge);border-bottom-left-radius:3px}
.g-chat .msg.typing{align-self:flex-start;background:#fff;border:1px solid var(--edge);display:none;gap:.25rem}
.g-chat .msg.typing i{width:5px;height:5px;border-radius:50%;background:var(--faint);animation:typ 1s infinite}
.g-chat .msg.typing i:nth-child(2){animation-delay:.15s}.g-chat .msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,60%,100%{opacity:.25}30%{opacity:1}}
.g-chat .msg.in{opacity:1;transform:none}
.g-chat .msg.typing.in{display:flex}

/* stage graphics */
.svis.g{margin-top:1.1rem;background:#fbfaf7;border:1px solid var(--edge);border-radius:var(--r);padding:.9rem;color:var(--ink)}
.rail .svis .gcap{font-size:.72rem;line-height:1.4}
/* S1 risk slider */
.g-risk label{display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.g-risk output{font-family:var(--amp);font-size:1.3rem;letter-spacing:0;color:var(--ink);font-feature-settings:"lnum" 1;line-height:1}
.g-risk input{width:100%;margin:.5rem 0 .7rem;accent-color:var(--ink)}
.g-risk .bar{position:relative;height:10px;border-radius:5px;background:var(--grey-1);overflow:visible}
.g-risk .fill{position:absolute;inset:0 auto 0 0;border-radius:5px;background:var(--ink);transition:width .3s var(--out)}
.g-risk.over .fill{background:repeating-linear-gradient(135deg,var(--ink) 0 5px,#5b5852 5px 10px)}
.g-risk .lim{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);left:66.6%}
.g-risk .lim::after{content:"limit";position:absolute;top:-1.15rem;left:50%;transform:translateX(-50%);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.g-risk.over .gcap{color:var(--ink)}
/* S2 instruments */
.g-inst .chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.5rem}
.g-inst .chips button{padding:.3rem .55rem;border:1px solid var(--edge);border-radius:var(--r-ctl);font-size:.7rem;font-weight:600;letter-spacing:.08em;background:var(--paper)}
.g-inst .chips .on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.g-inst svg{width:100%;display:block;overflow:visible}
.g-inst .px{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;transition:d .5s var(--out)}
.g-inst .mk{fill:none;stroke:var(--ink);stroke-width:1.2;transition:cx .5s var(--out),cy .5s var(--out);animation:mkp 2s ease-in-out infinite}
@keyframes mkp{50%{stroke-opacity:.3}}
.g-inst .mkt{font-size:7px;letter-spacing:.12em;text-transform:uppercase;fill:var(--faint);transition:x .5s var(--out),y .5s var(--out)}
/* S3 curve */
.g-curve .seg2{display:inline-flex;border:1px solid var(--edge);border-radius:var(--r-ctl);overflow:hidden;margin-bottom:.5rem}
.g-curve .seg2 button{padding:.32rem .65rem;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.g-curve .seg2 .on{background:var(--ink);color:var(--paper)}
.g-curve svg{width:100%;display:block}
.g-curve .base{stroke:var(--grey-2);stroke-width:1;stroke-dasharray:3 3}
.g-curve .eq{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;transition:d .7s var(--out)}
/* S4 handover */
.g-hand .hb{display:grid;grid-template-columns:4.2rem 1fr;align-items:center;gap:.6rem;margin-bottom:.45rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.g-hand .hb i{height:10px;border-radius:5px;background:var(--grey-1);overflow:hidden}
.g-hand .hb b{display:block;height:100%;border-radius:5px;background:var(--ink);transition:width .6s var(--out)}
.g-hand .hb .m{background:var(--grey-3)}
.g-hand .steps{display:flex;gap:.35rem;margin-top:.7rem}
.g-hand .steps button{flex:1;padding:.32rem 0;border:1px solid var(--edge);border-radius:var(--r-ctl);font-family:var(--amp);font-size:1.05rem;font-feature-settings:"lnum" 1;background:var(--paper)}
.g-hand .steps .on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.g-risk .bar{margin-top:1.2rem}.g-risk input{margin-bottom:.2rem}

/* ===== HOME: small interactive touches =====
   Hero emblem: the point nearest the pointer swells and the figure leans a
   touch toward it; tap it on a phone and the points ripple round the ring.
   Tally: each number carries a tiny graphic that plays when the column is
   hovered, focused, or first scrolls into view. */
.emblem.big .dots circle{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--out),fill .3s}
.emblem.big .dots circle.near{transform:scale(2.1);fill:var(--ink)}
.emblem.big .dots circle.rip{animation:rip .7s var(--out)}
@keyframes rip{40%{transform:scale(2.2);fill:var(--ink)}}
.emblem.big .fig{transition:transform .5s var(--out)}
.emblem.big{cursor:pointer}

.tal{position:relative;outline:none}
.tal:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
.tg{position:absolute;top:clamp(1.6rem,3vw,2.2rem);right:clamp(1rem,2vw,1.5rem);width:76px;height:auto;overflow:visible;color:var(--ink)}
/* 5: seats link up */
.tg-seats .lk path{stroke:var(--ink);stroke-width:.8;stroke-dasharray:60;stroke-dashoffset:60;opacity:.35;transition:stroke-dashoffset .7s var(--out)}
.tg-seats circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.2;transition:fill .3s calc(var(--i)*.09s)}
.tg-seats .me{fill:var(--ink)}
.tal:hover .tg-seats .lk path,.tal:focus .tg-seats .lk path,.tal.play .tg-seats .lk path{stroke-dashoffset:0}
.tal:hover .tg-seats circle,.tal:focus .tg-seats circle{fill:var(--ink)}
/* 2: two mentors, one room — the circles move in and overlap */
.tg-two circle{fill:none;stroke:var(--ink);stroke-width:1.2;transition:transform .6s var(--out),fill .4s}
.tg-two text{font-family:var(--amp);font-size:9px;font-weight:500;text-anchor:middle;fill:var(--ink);transition:transform .6s var(--out),opacity .3s}
.tal:hover .tg-two .a,.tal:focus .tg-two .a,.tal.play .tg-two .a{transform:translateX(6px)}
.tal:hover .tg-two .b,.tal:focus .tg-two .b,.tal.play .tg-two .b{transform:translateX(-6px)}
.tal:hover .tg-two .la,.tal:focus .tg-two .la,.tal.play .tg-two .la{transform:translateX(1px)}
.tal:hover .tg-two .lb,.tal:focus .tg-two .lb,.tal.play .tg-two .lb{transform:translateX(-1px)}
.tal:hover .tg-two circle,.tal:focus .tg-two circle{fill:rgba(27,26,24,.08)}
/* 6: a week of sessions fills in, last one live */
.tg-six rect{fill:var(--paper);stroke:var(--ink);stroke-width:1;transform-box:fill-box;transform-origin:bottom;transform:scaleY(.45);
  transition:transform .45s var(--out) calc(var(--i)*.07s),fill .3s calc(var(--i)*.07s)}
.tal:hover .tg-six rect,.tal:focus .tg-six rect,.tal.play .tg-six rect{transform:none;fill:var(--ink)}
.tg-six .live{fill:var(--ink);opacity:0;transition:opacity .3s .5s}
.tal:hover .tg-six .live,.tal:focus .tg-six .live,.tal.play .tg-six .live{opacity:1;animation:livedot 1s ease-in-out .9s infinite}
@media(max-width:700px){.tg{width:64px}}
.tg{width:92px}@media(max-width:700px){.tg{width:76px}}
/* 6: a week calendar. Six days carry a session, Sunday is off. On hover
   (or first scroll-in) the session days fill in across both weeks and
   Wednesday's dot pulses as "live now". */
.tg-cal{width:104px}
.tg-cal .frame{fill:#fbfaf7;stroke:var(--ink);stroke-width:1}
.tg-cal .band{fill:var(--ink)}
.tg-cal .ring{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.tg-cal .dl{font-size:5.6px;font-weight:600;letter-spacing:.06em;text-anchor:middle;fill:var(--faint)}
.tg-cal .cell{fill:var(--paper);stroke:var(--ink);stroke-width:.8;transition:fill .3s calc(var(--i)*.05s)}
.tg-cal .cell.off{stroke:var(--grey-3);stroke-dasharray:1.5 1.5}
.tal:hover .tg-cal .cell:not(.off),.tal:focus .tg-cal .cell:not(.off),.tal.play .tg-cal .cell:not(.off){fill:var(--ink)}
.tg-cal .live{fill:var(--paper);opacity:0;transition:opacity .3s .5s}
.tal:hover .tg-cal .live,.tal:focus .tg-cal .live,.tal.play .tg-cal .live{opacity:1;animation:livedot 1s ease-in-out .9s infinite}
@media(max-width:700px){.tg-cal{width:88px}}

/* Alignment: every graphic box in a row is the same height, so the card
   titles (01–04) and the stage boxes line up across the row. The stage
   boxes sit on a shared baseline at the bottom of each column. */
@media(min-width:861px){
  .cards.feature .cvis.g{height:236px;min-height:0;justify-content:center}
  .g-chat .chat{min-height:0;height:100%}
  .rail .stop{display:flex;flex-direction:column}
  .rail .stop>p:not(.wk){margin-bottom:1.2rem}
  .rail .svis.g{margin-top:auto;height:184px;display:flex;flex-direction:column;justify-content:space-between}
  .rail .g-hand{justify-content:center}
}
.g-inst .chips{display:grid;grid-template-columns:repeat(6,1fr);gap:.25rem}
.g-inst .chips button{padding:.3rem 0;text-align:center}
@media(min-width:861px){.rail .svis.g-hand{justify-content:center}}
.g-curve .seg2{align-self:flex-start}