/* ============================================================
JohnMac.pro design tokens — inlined from Design System/tokens/
Identical block to mind-and-code-webinar.html so the two pages
stay siblings. Do not fork values here.
============================================================ */
:root{
--violet-900:#241236;--violet-800:#2A1848;--violet-700:#4733C7;--violet-600:#7060D8;--violet-500:#6C54FC;--violet-400:#8B5CF6;--violet-300:#A697FE;--violet-100:#E9E4FF;--violet-050:#F5F3FF;
--pink-700:#A3005A;--pink-600:#B80063;--pink-500:#D00070;--pink-400:#E31A87;--pink-100:#FFE3F1;
--plum-1000:#121224;--plum-900:#141021;--plum-800:#181224;--plum-700:#1E1336;--plum-600:#241236;--plum-500:#2A1848;
--grey-900:#1B1B22;--grey-800:#2C2C36;--grey-700:#4A4A56;--grey-600:#6B6B78;--grey-500:#8E8E9B;--grey-400:#B4B4BF;--grey-300:#D5D2DD;--grey-200:#E6E5EB;--grey-100:#F0EFF3;--grey-050:#F7F7F7;--white:#FFFFFF;
--amber-500:#F5A524;--red-500:#E02D3C;--blue-500:#3B82F6;
/* --- Mint: the success / live hue -------------------------------
Promoted into the Design System on 2026-08-25, where it REPLACED the
old generic semantic green #2FBF71. Ramp and alias below mirror
Design System/tokens/colors.css — keep them in sync, don't fork.
ROLE: small "live / available / done" signals. Not decoration, not a
fourth accent — magenta owns action, violet owns furniture.
CONTRAST is a hard constraint:
--mint-400 #4FFDD7 .... 13.6:1 on plum · 1.3:1 on white
--mint-700 #0A7360 .... 3.0:1 on plum · 5.8:1 on white
Prefer --state-success, which flips step by theme.
---------------------------------------------------------------- */
--mint-300:#7CFFE3;--mint-400:#4FFDD7;--mint-600:#12B894;--mint-700:#0A7360;
--bg-page:var(--white);--bg-sunken:var(--grey-050);--surface-card:var(--white);--surface-raised:var(--white);--surface-inset:var(--grey-100);
--text-strong:var(--grey-900);--text-body:var(--grey-700);--text-muted:var(--grey-600);--text-faint:var(--grey-500);--text-on-brand:var(--white);
--action:var(--pink-500);--action-hover:var(--pink-400);--action-press:var(--pink-600);
--brand:var(--violet-400);--brand-hover:var(--violet-300);--brand-press:var(--violet-600);--brand-subtle:var(--violet-050);
--state-success:var(--mint-700);
--link:var(--pink-500);--link-hover:var(--pink-400);
--border-hairline:rgba(27,27,34,.10);--border-strong:rgba(27,27,34,.20);--border-brand:var(--violet-400);
--focus-ring:var(--violet-400);
--glass-fill:rgba(255,255,255,.78);--overlay-scrim:rgba(18,18,36,.72);
--font-body:"Nunito",ui-sans-serif,system-ui,sans-serif;
--font-display:"Nunito",ui-sans-serif,system-ui,sans-serif;
--font-article:"Merriweather",Georgia,serif;
--font-hand:"Gloria Hallelujah",cursive;
--font-mono:"Fira Code",ui-monospace,SFMono-Regular,Menlo,monospace;
--text-2xs:.75rem;--text-xs:.8125rem;--text-s:.9375rem;--text-m:1.0625rem;--text-l:1.25rem;--text-xl:1.5rem;--text-2xl:2rem;--text-3xl:2.5rem;--text-4xl:3rem;--text-5xl:3.75rem;
--lh-tight:1.12;--lh-snug:1.25;--lh-normal:1.5;--lh-relaxed:1.7;--lh-hand:1.9;
--ls-tight:-.02em;--ls-snug:-.01em;--ls-normal:0;--ls-wide:.06em;--ls-caps:.12em;
--fw-regular:400;--fw-semibold:600;--fw-bold:700;--fw-black:800;
--type-hero-size:var(--text-5xl);--type-h1-size:var(--text-4xl);--type-h2-size:var(--text-2xl);--type-h3-size:var(--text-l);
--type-lead-size:var(--text-l);--type-body-size:var(--text-m);--type-small-size:var(--text-s);
--type-hand-size:var(--text-m);--type-eyebrow-size:var(--text-2xs);--type-eyebrow-ls:var(--ls-caps);
--space-3xs:2px;--space-2xs:4px;--space-xs:8px;--space-s:12px;--space-m:16px;--space-l:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px;--space-5xl:128px;
--section-y:clamp(64px,8vw,120px);--gutter:clamp(20px,4vw,48px);
--content-max:1120px;--prose-max:66ch;--narrow-max:640px;--grid-gap:var(--space-l);
--radius-xs:4px;--radius-s:8px;--radius-m:12px;--radius-l:16px;--radius-xl:24px;--radius-pill:999px;--radius-circle:50%;
--shadow-s:0 1px 2px rgba(18,18,36,.08);
--shadow-m:0 10px 30px -12px rgba(18,18,36,.18);
--shadow-l:0 30px 70px -24px rgba(18,18,36,.35);
--shadow-card-on-plum:0 40px 80px -30px rgba(0,0,0,.6);
--glow-action:0 8px 24px -8px rgba(208,0,112,.55);
--ring-focus:0 0 0 3px rgba(139,92,246,.45);
--blur-glass:saturate(140%) blur(14px);
/* --- page-level background knobs -------------------------------
The cohort page sits DEEPER than the webinar page on purpose.
Paid tier = quieter ground, less glow, more void. Same plum
family, lower on the ramp.
--------------------------------------------------------------- */
--hero-1:#241640; /* top of the hero wash */
--hero-2:#160F2B; /* middle */
--hero-3:#0C0918; /* bottom / deepest */
--glow-color:#6C54FC;
--glow-strength:.30; /* matched to the webinar page */
--grid-color:#8B5CF6;
/* The webinar page runs .055, but on that page the grid sits on a lighter
wash (#2A1848). This page's ground is deeper, so the same opacity reads
as nothing. Raised to match the webinar's PERCEIVED texture, not its number. */
--grid-strength:.10;
--card-tint:#1A1230;
--seam-below:#FFFFFF; /* colour revealed by the torn edge = the band under the hero */
--grad-hero:radial-gradient(120% 90% at 50% 0%,var(--hero-1) 0%,var(--hero-2) 45%,var(--hero-3) 100%);
--grad-action:linear-gradient(180deg,var(--pink-400),var(--pink-500));
--grad-protect:linear-gradient(to top,rgba(12,9,24,.94),rgba(12,9,24,0));
--clip-torn-bottom:polygon(0 0,100% 0,100% calc(100% - 40px),88% calc(100% - 4px),74% calc(100% - 34px),60% 100%,46% calc(100% - 30px),32% calc(100% - 2px),18% calc(100% - 36px),6% calc(100% - 6px),0 calc(100% - 30px));
--ease-out:cubic-bezier(.2,.8,.2,1);--ease-in-out:cubic-bezier(.6,0,.4,1);
--dur-fast:120ms;--dur-base:200ms;--dur-slow:400ms;--motion-hover:all var(--dur-fast) var(--ease-out);
}
[data-theme="plum"]{
--bg-page:var(--plum-700);--bg-sunken:var(--plum-1000);--surface-card:var(--plum-600);--surface-raised:var(--plum-500);--surface-inset:rgba(255,255,255,.07);
--text-strong:var(--white);--text-body:rgba(255,255,255,.78);--text-muted:rgba(255,255,255,.62);--text-faint:rgba(255,255,255,.45);
--brand-subtle:rgba(139,92,246,.16);
--state-success:var(--mint-400);
--border-hairline:rgba(255,255,255,.10);--border-strong:rgba(255,255,255,.22);
--link:var(--pink-400);--link-hover:var(--pink-100);
--glass-fill:rgba(20,16,33,.72);
}
[data-theme="light"]{
--bg-page:var(--white);--bg-sunken:var(--grey-050);--surface-card:var(--white);--surface-raised:var(--white);--surface-inset:var(--grey-100);
--text-strong:var(--grey-900);--text-body:var(--grey-700);--text-muted:var(--grey-600);--text-faint:var(--grey-500);
--brand-subtle:var(--violet-050);
--state-success:var(--mint-700);
--border-hairline:rgba(27,27,34,.10);--border-strong:rgba(27,27,34,.20);
--link:var(--pink-500);--link-hover:var(--pink-400);
--glass-fill:rgba(255,255,255,.78);
}
/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--hero-3);color:var(--text-body);font-family:var(--font-body);font-size:var(--type-body-size);line-height:var(--lh-relaxed);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);font-weight:var(--fw-bold);letter-spacing:var(--ls-snug);line-height:var(--lh-snug);margin:0 0 var(--space-m)}
h1{font-size:var(--type-h1-size);letter-spacing:var(--ls-tight)}
h2{font-size:var(--type-h2-size)}
h3{font-size:var(--type-h3-size)}
p{margin:0 0 var(--space-m)}
a{color:var(--link);text-decoration-color:rgba(208,0,112,.4);text-underline-offset:3px;transition:var(--motion-hover)}
a:hover{color:var(--link-hover);text-decoration-color:currentColor}
code,kbd{font-family:var(--font-mono);font-size:.9em}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
img{max-width:100%;display:block}
.wrap{max-width:var(--content-max);margin:0 auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- shared type helpers ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-xs);margin:0 0 var(--space-m);
font-family:var(--font-mono);font-size:var(--type-eyebrow-size);font-weight:var(--fw-semibold);
letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--brand)}
.lead{font-size:var(--type-lead-size);line-height:var(--lh-normal);color:var(--text-body);
max-width:var(--narrow-max);margin-bottom:var(--space-l)}
.hand{font-family:var(--font-hand);font-size:var(--type-hand-size);line-height:var(--lh-hand);
color:var(--violet-300);margin:0 0 var(--space-xl)}
.mono{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--ls-wide);text-transform:uppercase}
.ph{border-bottom:1px dashed rgba(139,92,246,.7);padding-bottom:1px}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
padding:15px var(--space-xl);border:0;border-radius:var(--radius-pill);cursor:pointer;
background:var(--grad-action);color:var(--white);box-shadow:var(--glow-action);text-decoration:none;
font-family:var(--font-body);font-size:var(--type-body-size);font-weight:var(--fw-bold);
letter-spacing:var(--ls-snug);transition:var(--motion-hover)}
.btn:hover{background:var(--action-hover);color:var(--white)}
.btn:active{background:var(--action-press)}
.btn:focus-visible{box-shadow:var(--ring-focus)}
.btn--block{width:100%}
.btn--ghost{background:transparent;color:var(--text-strong);box-shadow:none;
border:1px solid var(--border-strong)}
.btn--ghost:hover{background:var(--surface-inset);color:var(--text-strong);border-color:var(--brand)}
/* ---------- announcement bar ---------- */
.announce{position:relative;z-index:3;background:rgba(0,0,0,.32);border-bottom:1px solid var(--border-hairline)}
.announce .wrap{display:flex;justify-content:center;align-items:center;gap:var(--space-s);flex-wrap:wrap;
padding-block:var(--space-xs);font-family:var(--font-mono);font-size:var(--text-2xs);
letter-spacing:var(--ls-wide);color:var(--text-muted);text-transform:uppercase}
.announce b{color:var(--brand);font-weight:var(--fw-semibold)}
.announce .dot{width:6px;height:6px;border-radius:var(--radius-circle);background:var(--mint-400);
box-shadow:0 0 0 4px rgba(79,253,215,.16)}
/* ---------- header ---------- */
.site-head{position:relative;z-index:3}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-m);padding-block:var(--space-l)}
.site-head img{height:28px;width:auto}
.head-links{display:flex;align-items:center;gap:var(--space-l);
font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--ls-wide)}
.head-links a{color:var(--text-muted);text-decoration:none}
.head-links a:hover{color:var(--text-strong)}
/* ---------- hero ---------- */
.hero{position:relative;background:var(--grad-hero);overflow:hidden;padding-bottom:clamp(40px,5vw,64px)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grid-strength);
background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),
linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(100% 85% at 50% 0%,#000 0%,transparent 88%);
mask-image:radial-gradient(100% 85% at 50% 0%,#000 0%,transparent 88%)}
/* the violet bloom behind the grid — same treatment as the webinar hero */
.hero::after{content:"";position:absolute;left:50%;top:-320px;width:900px;height:640px;
transform:translateX(-50%);pointer-events:none;opacity:var(--glow-strength);
background:radial-gradient(closest-side,var(--glow-color),transparent 70%);filter:blur(20px)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
gap:clamp(32px,5vw,64px);align-items:center;padding-top:clamp(24px,4vw,48px)}
.hero h1{font-size:clamp(2.1rem,3.9vw,3.5rem);line-height:1.08;
letter-spacing:var(--ls-tight);font-weight:var(--fw-black);margin-bottom:var(--space-l);max-width:19ch}
.hero h1 em{font-style:normal;color:var(--violet-300)}
.hero .lead{max-width:52ch;margin-bottom:var(--space-m)}
.hero .lead b{color:var(--text-strong);font-weight:var(--fw-bold)}
/* the hero facts strip — Fira Code spec-sheet chrome */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:var(--space-l) 0 0;padding:0;
border-top:1px solid var(--border-hairline)}
.spec li{padding:var(--space-m) var(--space-s) var(--space-m) 0;min-width:0}
/* The price is the only right-hand value in the row, so it sits flush with the
end of the hairline above rather than hugging the label to its left. Its
column is still 1fr — only the content is pushed over — so the four columns
stay on the same grid as everything else. */
.spec li:last-child{justify-self:end;text-align:right;padding-right:0}
.spec dt,.spec .k{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-caps);
text-transform:uppercase;color:var(--text-faint);margin-bottom:2px}
.spec .v{display:block;font-size:var(--text-l);font-weight:var(--fw-bold);color:var(--text-strong);
line-height:1.2;letter-spacing:var(--ls-snug)}
/* ---------- hero visual: the ring -------------------------------
Pure CSS/SVG stand-in for John's glowing-ring graphic, drawn in
the violet ramp only (magenta stays reserved for CTAs).
TO SWAP IN THE REAL ARTWORK: replace the whole .ring block in the
markup with 
.
---------------------------------------------------------------- */
.ring-stage{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:520px;margin-inline:auto}
.ring-img{width:100%;border-radius:var(--radius-circle)}
.ring{position:relative;width:86%;aspect-ratio:1;border-radius:var(--radius-circle);
background:conic-gradient(from 210deg,#4733C7,#6C54FC 22%,#A697FE 38%,#8B5CF6 55%,#4733C7 74%,#2A1848 88%,#4733C7);
-webkit-mask:radial-gradient(closest-side,transparent 58%,#000 59%);
mask:radial-gradient(closest-side,transparent 58%,#000 59%);
filter:blur(.4px)}
.ring::before{content:"";position:absolute;inset:-14%;border-radius:var(--radius-circle);
background:conic-gradient(from 210deg,transparent,#6C54FC 30%,#A697FE 48%,transparent 70%);
filter:blur(38px);opacity:.55;z-index:-1}
.ring::after{content:"";position:absolute;inset:12%;border-radius:var(--radius-circle);
background:radial-gradient(closest-side at 62% 38%,rgba(166,151,254,.42),rgba(71,51,199,.18) 55%,transparent 78%);
filter:blur(12px)}
.ring-core{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--radius-circle);
text-align:center;z-index:2}
.ring-core .n{font-family:var(--font-display);font-size:clamp(3rem,7vw,5rem);font-weight:var(--fw-black);
line-height:1;letter-spacing:var(--ls-tight);color:var(--white)}
.ring-core .t{display:block;margin-top:var(--space-xs);font-family:var(--font-mono);font-size:var(--text-2xs);
letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--violet-300)}
/* ================================================================
SEAT PICKER — the centrepiece. Sits above the fold by pulling up
into the hero.
================================================================ */
.seating{position:relative;z-index:4;margin-top:calc(var(--space-2xl) * -1);padding-bottom:var(--section-y);
background:linear-gradient(to bottom,transparent 0 120px,var(--hero-3) 120px)}
.seat-panel{position:relative;background:var(--card-tint);border:1px solid rgba(139,92,246,.22);
border-radius:var(--radius-xl);box-shadow:var(--shadow-card-on-plum);
padding:clamp(24px,3.4vw,40px)}
.seat-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(120% 140% at 50% -20%,rgba(139,92,246,.14),transparent 60%)}
.seat-head{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
gap:var(--space-m);margin-bottom:var(--space-l);
padding-bottom:var(--space-l);border-bottom:1px solid var(--border-hairline)}
.seat-head h2{margin:0;font-size:var(--text-xl);letter-spacing:var(--ls-snug)}
.seat-head .sub{margin:4px 0 0;font-family:var(--font-mono);font-size:var(--text-2xs);
letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-faint)}
/* availability signal — mint, per the token note */
.remain{display:inline-flex;align-items:baseline;gap:var(--space-xs);padding:8px var(--space-m);
border-radius:var(--radius-pill);border:1px solid rgba(79,253,215,.38);
background:rgba(79,253,215,.09)}
.remain .big{font-size:var(--text-xl);font-weight:var(--fw-black);color:var(--mint-400);line-height:1}
.remain .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-caps);
text-transform:uppercase;color:var(--mint-400);opacity:.8}
/* the row of seats */
/* The gap below is wider than the gap between seats on purpose: the row and the
tier cards are two separate decisions (which seat, which tier), and at
--space-l they read as one crowded block. */
.seat-row{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-s);
list-style:none;margin:0 0 var(--space-2xl);padding:0}
/* The is the grid item and already stretches to the tallest cell in the
row, but the seat inside it sizes to its own content. A taken seat carries
an extra "Taken" stamp, so it stood taller than its neighbours. Making the
li a flex container and letting the seat grow pins every tile to the same
height, whichever ones happen to be sold. */
.seat-row > li{display:flex}
.seat{flex:1}
.seat{position:relative;display:block;text-align:center;text-decoration:none;
padding:var(--space-m) var(--space-xs) var(--space-s);
border-radius:var(--radius-m);border:1px solid var(--border-hairline);
background:rgba(255,255,255,.035);transition:var(--motion-hover)}
.seat .glyph{width:40px;height:40px;margin:0 auto var(--space-xs);display:block;
color:var(--violet-300);transition:var(--motion-hover)}
.seat .no{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-caps);
text-transform:uppercase;color:var(--text-faint)}
.seat .price{display:block;margin-top:2px;font-size:var(--text-m);font-weight:var(--fw-bold);
color:var(--text-strong);letter-spacing:var(--ls-snug)}
.seat .tier{display:block;margin-top:2px;font-family:var(--font-mono);font-size:10px;
letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--brand)}
a.seat:hover{transform:translateY(-2px);border-color:var(--brand);background:rgba(139,92,246,.12)}
a.seat:hover .glyph{color:var(--white)}
a.seat:focus-visible{box-shadow:var(--ring-focus)}
/* premium seats read hotter — violet fill, not magenta (action stays reserved) */
.seat--premium{border-color:rgba(139,92,246,.42);background:rgba(139,92,246,.10)}
.seat--premium .glyph{color:var(--violet-400)}
/* taken state: flip data-taken="1" on the to sell a seat.
The is swapped for a in the markup so it isn't clickable. */
.seat--taken{background:rgba(255,255,255,.02);border-style:dashed;
border-color:var(--border-hairline);cursor:not-allowed}
.seat--taken .glyph{color:var(--text-faint);opacity:.5}
.seat--taken .price,.seat--taken .tier{color:var(--text-faint)}
.seat--taken .price{text-decoration:line-through;text-decoration-thickness:1px}
/* the stamp replaces the tier label rather than hanging off the card,
so it can never collide with what sits below the seat row */
.seat--taken .tier{display:none}
.seat--taken .stamp{display:inline-block;margin-top:4px;
padding:2px var(--space-xs);border-radius:var(--radius-pill);
background:rgba(255,255,255,.06);border:1px solid var(--border-strong);
font-family:var(--font-mono);font-size:9px;letter-spacing:var(--ls-caps);
text-transform:uppercase;color:var(--text-faint)}
/* the two tier cards under the seat row */
.tiers{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-l)}
.tier-card{position:relative;display:flex;flex-direction:column;
padding:var(--space-l);border-radius:var(--radius-l);
border:1px solid var(--border-hairline);background:rgba(255,255,255,.04)}
.tier-card--premium{border-color:rgba(139,92,246,.42);background:rgba(139,92,246,.09)}
/* scarcity signal — mint on plum, dark ink on top (15:1) */
.tier-card .flag{position:absolute;top:calc(var(--space-l) * -0.5 - 2px);left:var(--space-l);
padding:4px var(--space-s);border-radius:var(--radius-pill);
background:var(--mint-400);color:var(--hero-3);
font-family:var(--font-mono);font-size:10px;font-weight:var(--fw-semibold);
letter-spacing:var(--ls-caps);text-transform:uppercase}
.tier-card h3{display:flex;align-items:center;gap:var(--space-xs);margin:0 0 2px;font-size:var(--text-l)}
/* VIP sticker beside the premium heading — sized down hard from its 150px source */
.vip{flex:none;width:28px;height:28px;display:block;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.tier-card .amount{display:flex;align-items:baseline;gap:var(--space-xs);margin-bottom:var(--space-s)}
.tier-card .amount .num{font-size:var(--text-3xl);font-weight:var(--fw-black);color:var(--text-strong);
line-height:1;letter-spacing:var(--ls-tight)}
.tier-card .amount .of{font-family:var(--font-mono);font-size:var(--text-2xs);
letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-faint)}
.tier-card ul{list-style:none;margin:0 0 var(--space-l);padding:0;font-size:var(--type-small-size)}
.tier-card li{display:grid;grid-template-columns:14px 1fr;gap:var(--space-xs);padding:5px 0;color:var(--text-body)}
.tier-card li::before{content:"◇";color:var(--brand);line-height:1.6}
.tier-card li b{color:var(--text-strong);font-weight:var(--fw-bold)}
.tier-card .btn{margin-top:auto}
.tier-note{margin:var(--space-s) 0 0;text-align:center;font-size:var(--text-xs);color:var(--text-faint)}
/* ---------- torn seam into the light band ---------- */
.seam{background:var(--seam-below)}
.seam-top{background:var(--hero-3);height:44px;clip-path:var(--clip-torn-bottom)}
/* ---------- light band: what you get ---------- */
.band{padding-block:var(--section-y)}
.band--light{background:var(--white)}
.band-head{max-width:var(--prose-max);margin-bottom:var(--space-2xl)}
.band-head h2{font-size:clamp(1.9rem,3.4vw,var(--text-3xl));letter-spacing:var(--ls-tight);
font-weight:var(--fw-black);max-width:18ch}
.band-head p{margin:0;font-size:var(--type-lead-size);line-height:var(--lh-normal);color:var(--text-body)}
.gets{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-l);list-style:none;margin:0;padding:0}
.get{display:flex;flex-direction:column;padding:var(--space-l);border-radius:var(--radius-l);
background:var(--white);box-shadow:var(--shadow-m);transition:transform var(--dur-base) var(--ease-out)}
.get:hover{transform:translateY(-2px)}
.get .n{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-caps);
text-transform:uppercase;color:var(--brand);margin-bottom:var(--space-s)}
.get h3{margin:0 0 var(--space-xs);color:var(--grey-900);font-size:var(--text-l)}
.get p{margin:0;font-size:var(--type-small-size);color:var(--grey-700)}
/* the headline benefit gets the full first row */
.get--hero{grid-column:1 / -1;background:var(--grey-050);box-shadow:none;
border:1px solid var(--border-hairline);
display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-xl);align-items:center;
padding:clamp(24px,3vw,40px)}
.get--hero h3{font-size:clamp(1.5rem,2.6vw,var(--text-2xl));letter-spacing:var(--ls-tight);max-width:16ch}
.get--hero p{font-size:var(--type-body-size)}
/* the handwritten aside now closes the left column instead of sitting alone
in the right one, which the photos took over */
.get--hero .hand{color:var(--violet-600);margin:var(--space-m) 0 0}
/* ---------- instant-photo frames ----------
Two horizontal shots in Polaroid-style frames — fat bottom margin,
gently skewed, overlapping. Left deliberately caption-free: the section
already spends its one handwritten aside on the .hand line. */
.snaps{position:relative;min-height:clamp(250px,25vw,330px)}
.snap{position:absolute;margin:0;background:var(--white);
padding:11px 11px 38px;border-radius:3px;
box-shadow:0 14px 30px -12px rgba(18,18,36,.34),0 2px 5px rgba(18,18,36,.10);
transition:transform var(--dur-base) var(--ease-out)}
.snap img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--grey-200)}
.snap--a{width:min(76%,290px);top:0;left:0;transform:rotate(-4.5deg);z-index:1}
.snap--b{width:min(76%,290px);right:0;bottom:0;transform:rotate(3.5deg);z-index:2}
.snap--a:hover{transform:rotate(-4.5deg) translateY(-2px);z-index:3}
.snap--b:hover{transform:rotate(3.5deg) translateY(-2px)}
/* ---------- certificate card ----------
Closes the deck, spanning the two columns the 3-up grid leaves over so the
last row fills edge to edge instead of trailing off. Violet, because badges
are furniture — magenta stays reserved for things you can click.
The tint is deliberately almost nothing: a 115deg wash that has already
resolved to plain white by 62%, so it reads as a faint warm corner rather
than a coloured card. If you can see where it ends, it is too strong. */
.get--cert{grid-column:span 2;
display:grid;grid-template-columns:auto 1fr;gap:var(--space-l);align-items:center;
background:linear-gradient(115deg,var(--violet-050) 0%,var(--white) 62%)}
.cert-badge{flex:none;width:clamp(74px,7vw,96px);height:auto;display:block;
filter:drop-shadow(0 4px 10px rgba(112,96,216,.22))}
/* ---------- full-bleed image band: THE BUILD ---------- */
.build{position:relative;min-height:clamp(420px,52vw,600px);display:grid;align-items:end;
overflow:hidden;background:var(--hero-3)}
/* The photo is cool-blue on its own. This pulls it back into the plum
family so the page keeps two background families, not three. */
.build img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
opacity:.6;filter:saturate(.35) brightness(.9)}
.build::before{content:"";position:absolute;inset:0;z-index:1;
background:var(--violet-800);mix-blend-mode:color;opacity:.92}
.build::after{content:"";position:absolute;inset:0;z-index:1;
background:var(--grad-protect)}
.build .wrap{position:relative;z-index:2;padding-block:clamp(40px,6vw,80px)}
.build h2{font-size:clamp(2rem,4.6vw,var(--text-4xl));letter-spacing:var(--ls-tight);
font-weight:var(--fw-black);max-width:16ch;line-height:1.08}
.build p{max-width:54ch;font-size:var(--type-lead-size);line-height:var(--lh-normal);color:var(--text-body)}
.build .hand{margin-bottom:0}
/* ---------- stats band ---------- */
.stats{position:relative;overflow:hidden;background:var(--plum-1000);
padding-block:var(--section-y);
/* deep foot so a band of footage breathes below the cards rather than being
clipped tight against the next section — the motion needs somewhere to live */
padding-bottom:clamp(200px,24vw,360px)}
/* Full-WIDTH backdrop pinned to the foot of the band, dissolving UPWARD into
the plum so the eyebrow and headline sit on clean ground while the footage
owns the lower half. The aspect-ratio is the source's own, so the frame is
never cropped horizontally — the lamp and the lit face, which are the whole
character of the shot, stay in. Anything taller than the band spills off the
top, where the mask has already faded it to nothing.
The fade reaches full strength by 26%, NOT 62%. The man's face sits about a
quarter down the frame, so a long lazy fade erased the single thing the shot
is worth having. Short fade = headline still gets clean ground above the
image, face and hands stay fully rendered. */
.stats-bg{position:absolute;left:0;right:0;bottom:0;
aspect-ratio:1284/716;pointer-events:none;z-index:0}
.stats-bg img,.stats-bg video{position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;object-position:50% 50%;
/* Warmth deliberately left in. The lamp is the mood, and stripping it to a
third saturation made the whole band grey. The cool blue on the right is
the thing to watch — if it ever starts reading as its own background
family, pull saturation down before touching opacity. */
filter:saturate(.62) brightness(.96) contrast(1.02);
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 11%,#000 26%,#000 88%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 11%,#000 26%,#000 88%,transparent 100%)}
.stats-bg img{opacity:.62;transition:opacity 600ms var(--ease-out)}
/* The video is the poster's own first frame, stacked exactly on top of it. It
starts at zero and fades in only once the decoder is actually producing
pictures — never a black flash on a slow line.
The still must fade OUT as the video fades in. Leaving both up composites a
frozen frame over the moving one at half strength each, which reads as
permanent ghosting. Exactly one of the two is ever visible. Because they are
the same frame at the moment of handoff, the crossfade itself is invisible. */
.stats-bg video{opacity:0;transition:opacity 600ms var(--ease-out)}
.stats-bg.is-live img{opacity:0}
.stats-bg.is-live video{opacity:.62}
/* Message hangs top-left on clean plum; the numbers stack in a narrow column
on the right, over the smoky side of the frame that carries no subject.
That leaves the whole centre-left — lamp, face, hands — unobstructed, which
is the entire reason the footage is here. */
.stats > .wrap{position:relative;z-index:1;
display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,31%,368px);
gap:clamp(28px,5vw,64px);align-items:start}
/* Constrain the CHILDREN, not the wrapper. `ch` on .band-head resolves against
its own 16px font-size, not the h2's display size, so a max-width there
throttles the headline to a fraction of the intended measure. */
.stats .band-head h2{max-width:15ch}
.stats .band-head p:last-child{max-width:40ch}
.stat-col{display:flex;flex-direction:column;gap:var(--space-l)}
/* glass, because these sit over imagery — the one place the brand allows it.
Tighter than the old two-across cards: in a narrow column the generous
padding and 4.5rem numerals just pushed the band absurdly tall. */
.stat{padding:var(--space-l);border-radius:var(--radius-l);
border:1px solid var(--border-hairline);background:var(--glass-fill);
backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass)}
.stat .k{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-caps);
text-transform:uppercase;color:var(--brand);line-height:1.4}
.stat .big{display:block;margin:6px 0 var(--space-xs);
font-size:clamp(2.3rem,3.4vw,3.1rem);font-weight:var(--fw-black);color:var(--white);
line-height:.95;letter-spacing:var(--ls-tight)}
.stat p{font-size:var(--text-xs);line-height:1.55;color:var(--text-body);margin:0 0 var(--space-m)}
.stat .src{display:block;margin-top:var(--space-s);font-family:var(--font-mono);font-size:9px;
letter-spacing:var(--ls-wide);color:var(--text-faint);text-transform:uppercase;line-height:1.5}
/* the beginner-reassurance line, sitting under the column rather than in a card */
.stat-note{margin:var(--space-xs) 0 0;font-size:var(--text-xs);line-height:1.55;
color:var(--text-muted)}
/* graphic 1: two indexed bars — same job, with vs without AI skills */
.bars{display:grid;gap:var(--space-s);margin:0}
.bar-row{display:grid;grid-template-columns:1fr;gap:4px}
.bar-row .lbl{display:flex;justify-content:space-between;align-items:baseline;
font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-wide);
text-transform:uppercase;color:var(--text-muted)}
.bar-row .lbl .val{color:var(--text-strong);font-size:var(--text-xs);font-weight:var(--fw-semibold)}
.bar-track{height:14px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.bar-fill{height:100%;border-radius:4px;background:var(--violet-700)}
.bar-fill--lead{background:linear-gradient(90deg,var(--violet-500),var(--violet-300))}
/* The .track graphic (a before → after line with two ticks) lived here to carry
the "26% -> 76% chief AI officer" stat. That figure was not supported by the
research and the card was replaced, orphaning the whole block — removed
2026-08-25 rather than left to rot. Both stat cards now use .bars. */
/* ---------- beginners band ---------- */
.begin{background:var(--white);padding-block:var(--section-y)}
.begin .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.begin h2{font-size:clamp(1.9rem,3.4vw,var(--text-3xl));letter-spacing:var(--ls-tight);
font-weight:var(--fw-black);color:var(--grey-900);max-width:16ch}
.begin p{color:var(--grey-700)}
.begin .hand{color:var(--violet-600)}
.nots{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-s)}
.nots li{display:flex;align-items:flex-start;gap:var(--space-s);padding:var(--space-s) var(--space-m);
border-radius:var(--radius-m);background:var(--grey-050);color:var(--grey-700);font-size:var(--type-small-size)}
.nots li .x{flex:none;width:20px;height:20px;border-radius:var(--radius-circle);margin-top:3px;
display:grid;place-items:center;background:var(--violet-100);color:var(--violet-600);
font-family:var(--font-mono);font-size:11px;font-weight:var(--fw-semibold)}
.nots li b{color:var(--grey-900)}
/* ---------- about band ---------- */
.about{position:relative;background:var(--hero-3);padding-block:var(--section-y)}
.about::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;
background:linear-gradient(to bottom,rgba(255,255,255,.05),transparent)}
.about .wrap{position:relative;display:grid;grid-template-columns:200px 1fr;
gap:clamp(28px,4vw,64px);align-items:start}
.portrait{position:relative;width:180px;height:180px;border-radius:var(--radius-circle);
overflow:hidden;border:3px solid var(--white);box-shadow:var(--shadow-l)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.about h2{max-width:22ch}
.about p{max-width:62ch}
.facts{display:flex;flex-wrap:wrap;gap:var(--space-m) var(--space-l);list-style:none;margin:var(--space-l) 0 0;padding:0;
font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--ls-wide);
color:var(--text-faint);text-transform:uppercase}
.facts li{display:flex;align-items:center;gap:var(--space-xs)}
.facts li::before{content:"◇";color:var(--brand)}
/* ---------- closing CTA ---------- */
.close{position:relative;background:var(--grad-hero);padding-block:var(--section-y);overflow:hidden;text-align:center}
.close::after{content:"";position:absolute;left:50%;bottom:-360px;width:900px;height:640px;
transform:translateX(-50%);pointer-events:none;opacity:var(--glow-strength);
background:radial-gradient(closest-side,var(--glow-color),transparent 70%);filter:blur(20px)}
.close .wrap{position:relative;z-index:2;max-width:760px}
.close h2{font-size:clamp(2rem,4.6vw,var(--text-4xl));letter-spacing:var(--ls-tight);
font-weight:var(--fw-black);line-height:1.08;margin-bottom:var(--space-m)}
.close .lead{margin-inline:auto;margin-bottom:var(--space-xl)}
.close .hand{margin-top:var(--space-l);margin-bottom:0}
.close .btn{padding-inline:var(--space-2xl)}
/* ---------- terms accordion ----------
Sits directly above the footer, same dark band. / so it
works with zero JS (native open/close) — cohort.js only adds a smooth
height transition on top when it's available. */
.terms{background:var(--plum-1000);padding-top:var(--space-l)}
.terms .wrap{max-width:640px}
.terms-acc{border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-m);
background:rgba(255,255,255,.04)}
.terms-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;
justify-content:space-between;gap:var(--space-m);padding:var(--space-m) var(--space-l);
font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--text-s);color:var(--white)}
.terms-acc summary::-webkit-details-marker{display:none}
.terms-acc-icon{flex:0 0 auto;width:20px;height:20px;border-radius:var(--radius-circle);
border:1px solid rgba(255,255,255,.3);position:relative;transition:transform var(--dur-base) var(--ease-out)}
.terms-acc-icon::before,.terms-acc-icon::after{content:'';position:absolute;background:currentColor;
top:50%;left:50%;transform:translate(-50%,-50%)}
.terms-acc-icon::before{width:8px;height:1.5px}
.terms-acc-icon::after{width:1.5px;height:8px;transition:opacity var(--dur-fast) var(--ease-out)}
.terms-acc[open] .terms-acc-icon{transform:rotate(180deg)}
.terms-acc[open] .terms-acc-icon::after{opacity:0}
.terms-acc-body{overflow:hidden;transition:height var(--dur-slow) var(--ease-out)}
.terms-acc-body-inner{padding:0 var(--space-l) var(--space-l);font-size:var(--text-2xs);
line-height:var(--lh-relaxed);color:rgba(255,255,255,.55)}
.terms-acc-body-inner p{margin:0 0 var(--space-s)}
.terms-acc-body-inner p:last-child{margin-bottom:0}
.terms-acc-body-inner a{color:var(--link);text-decoration:underline;font-weight:var(--fw-semibold)}
/* Bricks injects every "entire website" popup template into wp_footer on
every page it touches, including this standalone one — its CSS is
deliberately dequeued here (see cohort-landing.php), so without this the
injected markup renders as an unstyled plain-text block instead of staying
hidden. This page builds its own terms disclosure above instead. */
.brx-popup,.brx-popup-backdrop{display:none!important}
/* ---------- footer ---------- */
.site-foot{background:var(--plum-1000);padding-block:var(--space-xl)}
.site-foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-m);
font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--ls-wide);color:var(--text-faint)}
.site-foot img{height:22px;width:auto;opacity:.85}
.site-foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.site-foot a:hover{color:var(--text-body)}
/* ---------- responsive ---------- */
@media (max-width:980px){
.hero-grid{grid-template-columns:1fr;gap:var(--space-2xl)}
.ring-stage{max-width:400px}
.tiers{grid-template-columns:1fr}
.gets{grid-template-columns:repeat(2,1fr)}
.get--hero{grid-template-columns:1fr;gap:var(--space-xl)}
/* keep the two photos overlapping once the card stacks.
width:100% is load-bearing — the snaps are all position:absolute, so with
auto margins and no explicit width this grid item collapses to zero. */
.snaps{width:100%;max-width:430px;margin-inline:auto}
/* the right-hand column drops below the message once there is no room beside it */
.stats > .wrap{grid-template-columns:1fr;gap:var(--space-xl)}
.stats .band-head{max-width:none}
/* the cards go full-width here, so the footage sits under text rather than
beside it — pull it back to a hint. The video is never fetched at this
width (see the loader script), so this only ever styles the still. */
.stats-bg img{opacity:.28}
.stats{padding-bottom:clamp(140px,30vw,220px)}
.begin .wrap{grid-template-columns:1fr;gap:var(--space-xl)}
.about .wrap{grid-template-columns:1fr;gap:var(--space-xl)}
}
@media (max-width:760px){
.seating{margin-top:0;background:var(--hero-3);padding-top:var(--space-2xl)}
.seat-row{grid-template-columns:repeat(3,1fr);gap:var(--space-xs)}
.seat{padding:var(--space-s) 4px}
.seat .glyph{width:32px;height:32px}
.gets{grid-template-columns:1fr}
/* single column now, so a 2-column span would conjure an implicit second
track and push the card off-screen. Badge goes above the copy. */
.get--cert{grid-column:auto;grid-template-columns:1fr;gap:var(--space-m);
justify-items:start}
.head-links .hide-s{display:none}
.spec li{flex-basis:50%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}