/* ============================================================================
   The Academy — styles. Top block = fonts/base/keyframes/theme tokens/#ace-hero
   (ported verbatim from the original). Below = de-inlined component classes.
   ============================================================================ */

/* ===================== ACE HERO (ported from ace-site (2).html, scoped to #ace-hero) ===================== */
/* fixed three.js background: thin spinning glass logo + dot grid — replaces the old spinning chip watermark */
#bg{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.4s ease; }
#bg canvas{ width:100%; height:100%; display:block; }

#ace-hero{ --logo:url("assets/27d1d83c-2ad5-4e0e-a0fb-6f0ac38dc77e.png"); position:relative; z-index:2; color:#eef2f5; font-family:'Inter',system-ui,sans-serif; }
#ace-hero .hero{ position:relative; min-height:100vh; display:flex; align-items:center; }
#ace-hero .wrap{ width:100%; max-width:1550px; margin:0 auto; padding:0 clamp(1.5rem,5vw,4rem); }
#ace-hero .grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; width:100%; }
#ace-hero .eyebrow{ font-size:.8rem; letter-spacing:.34em; text-transform:uppercase; color:#9aa6ac;
  display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.5rem; }
#ace-hero .eyebrow::before{ content:""; width:30px; height:1px; background:#5d666b; }
#ace-hero h1{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-optical-sizing:auto; margin:0;
  font-size:clamp(3.2rem,6vw,5.2rem); line-height:1.04; letter-spacing:-.015em; color:#eef2f5; }
#ace-hero h1 .light{ color:#aeb8bf; font-style:italic; font-weight:400; }
#ace-hero .lead{ margin:1.6rem 0 0; max-width:480px; color:#b7c0c6; font-size:1.18rem; line-height:1.6; }
#ace-hero .cta{ margin-top:2.1rem; display:flex; gap:.9rem; flex-wrap:wrap; }
#ace-hero .btn{ font-size:.92rem; font-weight:500; padding:.82rem 1.5rem; border-radius:999px; text-decoration:none; transition:transform .2s ease; }
#ace-hero .btn.primary{ background:#eef2f5; color:#15191b; } #ace-hero .btn.primary:hover{ transform:translateY(-2px); }
#ace-hero .btn.ghost{ color:#cfd6db; border:1px solid #3a4248; } #ace-hero .btn.ghost:hover{ border-color:#6b757b; }

/* the 3D medallion stack (hero right) */
.medallion .stage{ position:relative; height:580px; perspective:1600px; perspective-origin:50% 42%; }
.medallion .ground{ position:absolute; left:50%; top:50%; width:276px; height:36px; margin-left:-138px; margin-top:172px;
  border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); filter:blur(3px); }
.medallion .coin{ position:absolute; left:50%; top:50%; width:276px; height:276px; margin-left:-138px; margin-top:-138px;
  transform-style:preserve-3d; will-change:transform; }
.medallion .edge{ position:absolute; inset:0; transform-style:preserve-3d; }
.medallion .seg{ position:absolute; left:50%; top:50%;
  background:linear-gradient(to bottom, #686d72, #c4c9cd 22%, #eef1f3 45%, #bdc2c6 60%, #7c8186 80%, #51555a); }
.medallion .face{ position:absolute; inset:0; border-radius:50%; backface-visibility:hidden; display:flex; align-items:center; justify-content:center;
  background:conic-gradient(from 90deg, #aeb4ba, #f2f4f6 9%, #c2c7cc 19%, #eef1f3 31%, #abb1b7 43%, #f0f3f5 57%, #bcc1c6 71%, #eef1f3 85%, #aeb4ba);
  box-shadow: inset 0 0 18px rgba(0,0,0,.45); }
.medallion .ring{ position:absolute; inset:20px; border-radius:50%;
  background: radial-gradient(circle at 38% 30%, #fbfcfd, #d2d7db 30%, #aeb3b8 56%, #d3d7db 74%, #84898e 100%);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.6), inset 0 -3px 9px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.medallion .center{ width:80%; height:80%; border-radius:50%;
  background: radial-gradient(circle at 42% 36%, #eef1f3, #c3c8cc 45%, #9aa0a4 78%, #7c8186 100%);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.4), inset 0 -2px 3px rgba(255,255,255,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:13% 10%; overflow:hidden; }
.medallion .mark{ width:40%; height:27%; flex:0 0 auto; background:var(--logo) center/contain no-repeat; filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); opacity:.9; }
.medallion .rule{ width:46%; height:2px; flex:0 0 auto; border-radius:2px; background:linear-gradient(90deg,transparent,#82878c,transparent); opacity:.8; }
.medallion .msg{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:30px; line-height:.96; letter-spacing:.02em; text-transform:uppercase; text-align:center; color:#34383e; padding:0 2px;
  text-shadow:0 1px 0 rgba(255,255,255,.6), 0 -1px 1px rgba(0,0,0,.4); }
@media (max-width: 900px){
  #ace-hero .grid{ grid-template-columns:1fr; }
  #ace-hero .copy{ order:2; text-align:center; } #ace-hero .eyebrow{ justify-content:center; } #ace-hero .cta{ justify-content:center; } #ace-hero .lead{ margin-inline:auto; }
  .medallion .stage{ order:1; height:420px; }
}

/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/096104f3-f561-42f3-9b6b-e32b763febfb.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/81b48e72-0a3e-46b9-9f69-ad255ea20d61.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/9e1a6332-f775-4f08-9c79-cf17078ab90d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/37b2956c-f594-4e04-8c28-457adaa25625.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/6b2fcdba-a99b-4570-99f0-fa6e888b6b9e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/0f45a022-7fe7-45d1-a2cf-d6f8e382d85b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/76b4d180-5105-4693-a459-fbb92547ff88.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/8cf3f251-5e90-468a-b926-974465d0bfc9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/b9469181-682d-4f1d-875e-955512f7d2fe.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/e74fa754-a3af-455d-b45f-dc07dd284819.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/e197cac2-eb9c-4bdc-bd06-76ee011d9f7d.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/012baf9c-bc8d-4ad3-a39d-0510e536233f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/156c321b-1e0f-4b7a-84dd-34ff42c12496.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/35e1fba6-4cb1-4e90-8da2-77528baae8a0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/b9469181-682d-4f1d-875e-955512f7d2fe.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/e74fa754-a3af-455d-b45f-dc07dd284819.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/e197cac2-eb9c-4bdc-bd06-76ee011d9f7d.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/012baf9c-bc8d-4ad3-a39d-0510e536233f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/156c321b-1e0f-4b7a-84dd-34ff42c12496.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/35e1fba6-4cb1-4e90-8da2-77528baae8a0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/b9469181-682d-4f1d-875e-955512f7d2fe.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/e74fa754-a3af-455d-b45f-dc07dd284819.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/e197cac2-eb9c-4bdc-bd06-76ee011d9f7d.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/012baf9c-bc8d-4ad3-a39d-0510e536233f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/156c321b-1e0f-4b7a-84dd-34ff42c12496.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/35e1fba6-4cb1-4e90-8da2-77528baae8a0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


*{box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html{overflow-x:hidden;}
html,body{margin:0;padding:0;background:var(--bg);}
::selection{background:var(--blue);color:#fff;}
@keyframes acad-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes acad-marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes acad-cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes acad-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes acad-shimmer{to{background-position:200% center}}
@keyframes acad-pulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes acad-logo-in{0%{opacity:0;transform:translateY(40px) scale(.78) rotate(-12deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes acad-logo-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-22px) rotate(1.5deg)}}
@keyframes acad-logo-spin{to{transform:rotate(360deg)}}
@keyframes acad-sheen{0%{transform:translateX(-130%) skewX(-18deg)}60%,100%{transform:translateX(230%) skewX(-18deg)}}
[data-root="academy"],[data-theme="dark"]{--bg:#070809;--bg2:#0a0c11;--panel:#0a0d13;--panel2:#0e131c;--panel3:#10141c;--ink:#eef1f6;--ink-rgb:238,241,246;--accent:oklch(72% .06 258);}
[data-theme="light"]{--bg:#f7f8fa;--bg2:#edeff3;--panel:#ffffff;--panel2:#ffffff;--panel3:#ffffff;--ink:#14161c;--ink-rgb:20,22,28;--accent:oklch(50% .2 266);}
[data-theme="light"] [data-coursecard]{box-shadow:0 18px 50px -30px rgba(20,22,30,.4);}


/* ============================================================================
   COMPONENTS — de-inlined from the original generated markup. Section order
   matches index.html. Tokens/keyframes/#ace-hero live above (ported verbatim).
   ============================================================================ */

:root{
  --blue:#6277a0; --blue-deep:#46556f; --blue-rgb:98,119,160;
  /* gradient retired — one confident blue instead of rainbow slop. --grad kept as a token so every
     old `var(--grad)` (text clips, bars, buttons, dots) now resolves to the solid brand blue. */
  --grad:var(--blue);
}
html{ background:var(--bg); }
body{margin:0;background: var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;position:relative;}

/* shared helpers */
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.italic{ font-style:italic; }
.mono{ font-family:'Inter',system-ui,sans-serif; }

/* ============ PRELOADER ============ */
.preloader{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex;
  align-items:center; justify-content:center; transition:opacity .8s ease, visibility .8s; }
/* the brand logo masks a gradient that rises to fill it bottom -> top, then the site loads */
.pre-logo{ width:min(150px,30vw); aspect-ratio:1134/1153; position:relative; overflow:hidden;
  background:rgba(238,242,245,.07);
  -webkit-mask:url("logo.svg") center/contain no-repeat;
          mask:url("logo.svg") center/contain no-repeat; }
.pre-logo__fill{ position:absolute; left:0; right:0; bottom:0; height:0%; background:var(--grad); will-change:height;
  box-shadow:0 0 30px 4px oklch(70% .2 230 / .5); }

/* ============ FILM GRAIN ============ */
.grain{ position:fixed; inset:0; z-index:8000; pointer-events:none; mix-blend-mode:overlay; opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }

/* ============ THEME TOGGLE ============ */
.theme-toggle{ position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px); z-index:7600; display:flex;
  align-items:center; gap:10px; font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); background:rgba(var(--ink-rgb),.06); border:1px solid rgba(var(--ink-rgb),.18);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:11px 16px 11px 13px; border-radius:100px;
  cursor:pointer; transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s; }
.theme-toggle:hover{ transform:translateY(-2px); border-color:rgba(var(--ink-rgb),.4); }
.theme-toggle__dot{ width:18px; height:18px; border-radius:50%; background:var(--grad); box-shadow:0 0 14px -2px oklch(62% .23 250 / .8); }

/* ============ NAV ============ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:7000; display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,56px); transition:background .35s ease, padding .3s ease, border-color .35s ease, backdrop-filter .35s ease; }
/* frosted bar once you scroll, so the nav stays legible over every section */
.nav--scrolled{ background:rgba(8,11,16,.55); border-bottom:1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1); padding-top:14px; padding-bottom:14px; }
.btn-glow--sm{ padding:.6rem 1.2rem; font-size:.72rem; letter-spacing:.08em; }
.nav__brand{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:20px; letter-spacing:-.02em; color:#fff; text-decoration:none; }
.nav__links{ display:flex; gap:30px; align-items:center; font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.nav__links a{ color:#fff; text-decoration:none; }
.nav__cta{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#070809;
  background:var(--grad); padding:12px 20px; border-radius:100px; text-decoration:none; white-space:nowrap;
  transition:transform .35s cubic-bezier(.16,1,.3,1); display:inline-block; font-weight:500; }

/* ============ BACKGROUND CANVAS (three.js glass logo + dot grid) ============ */
#bg{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.4s ease; }
#bg canvas{ width:100%; height:100%; display:block; }

/* ============ PRESS STRIP ============ */
.press{ border-top:1px solid rgba(var(--ink-rgb),.08); border-bottom:1px solid rgba(var(--ink-rgb),.08);
  padding:26px clamp(20px,4vw,56px); display:flex; flex-wrap:wrap; align-items:center; gap:clamp(28px,6vw,72px);
  justify-content:center; background:transparent; position:relative; z-index:2; }
.press__label{ font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--ink-rgb),.4); }
.press__name{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(16px,1.9vw,23px); color:rgba(var(--ink-rgb),.62); letter-spacing:-.01em; }
.press__name--nyp{ font-weight:700; }
.press__name--cbs{ letter-spacing:.16em; }

/* ============ COURSES (3 flagship cards) ============ */
/* COLOR BREAK BAND — light-blue grid, dark cards float on top */
.courses{
  position:relative;
  z-index:2;
  overflow:hidden;
  isolation:isolate;
  --band:#8294b5;
  background: linear-gradient(359deg, #070809 0%, #0c1113 6%, #18202f 34%, #222c40 60%, #2e3a52 100%);
  padding:clamp(70px,10vh,128px) clamp(20px,4vw,56px) clamp(78px,11vh,138px);
  }
/* grid lines, fading top→bottom so band reads as a panel rising out of the dark */
.courses::before{
  /* content:""; */
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.28) 1.5px, transparent 1.7px);
  background-size:26px 26px;
  background-position:center top;
  -webkit-mask-image:radial-gradient(135% 100% at 50% 0%,#000 42%,transparent 86%);
  mask-image:radial-gradient(135% 100% at 50% 0%,#000 42%,transparent 86%);
  }
/* soft seams: just kiss the dark sections above/below so the blue stays vivid */
.courses::after{ content:""; position:absolute; left:0; right:0; z-index:0; pointer-events:none;
  top:0; bottom:0;
  background:
    linear-gradient(180deg,rgba(7,8,9,.30),transparent 9%),
    linear-gradient(0deg,rgba(7,8,9,.34),transparent 11%); }
.courses>*{ position:relative; z-index:1; }
.courses__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(40px,6vh,72px); }
.courses__eyebrow{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.82);
  margin-bottom:18px; opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.courses__title{ margin:0; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(40px,7vw,104px); line-height:.92; color:var(--ink);
  letter-spacing:-.04em; opacity:0; transform:translateY(28px); transition:opacity .9s ease .08s, transform .9s cubic-bezier(.16,1,.3,1) .08s; }
.courses__title .grad-text{ background:linear-gradient(100deg,#fff,#dbe9ff 60%,#bcd4ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.courses__lede{ max-width:38ch; margin:0; font-size:15.5px; line-height:1.6; color:rgba(var(--ink-rgb),.7);
  opacity:0; transform:translateY(28px); transition:opacity .9s ease .16s, transform .9s cubic-bezier(.16,1,.3,1) .16s; }
/* ---- fanned card deck (one front, two peeking behind) ---- */
.courses__deck{ display:grid; width:min(440px,86vw); margin:0 auto clamp(46px,7vh,84px);
  perspective:1700px; opacity:0; transform:translateY(46px); transition:opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.courses__deck.is-in{ opacity:1; transform:none; }

.course-card{ grid-area:1/1; position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid rgba(255,255,255,.08); border-radius:26px; overflow:hidden; text-decoration:none; color:inherit; cursor:pointer;
  box-shadow:0 44px 90px -30px rgba(0,0,0,.72), 0 8px 22px -8px rgba(0,0,0,.5);
  transform-origin:50% 120%; will-change:transform;
  transition:transform 1.15s cubic-bezier(.22,1,.3,1), opacity .9s ease, filter .9s ease, box-shadow .8s ease; }
/* flower fan: middle card upright in front, the two behind splay left & right */
.course-card[data-pos="0"]{ transform:translateX(0) rotate(0deg) scale(1); opacity:1; filter:none; z-index:30; }
.course-card[data-pos="1"]{ transform:translateX(13%) translateY(3.5%) rotate(8deg) scale(.92); opacity:.9; filter:brightness(.58) saturate(.85); z-index:20; }
.course-card[data-pos="2"]{ transform:translateX(-13%) translateY(3.5%) rotate(-8deg) scale(.92); opacity:.9; filter:brightness(.58) saturate(.85); z-index:10; }
.course-card[data-pos="0"]:hover{ transform:translateY(-8px) scale(1.012); box-shadow:0 56px 110px -34px var(--cg), 0 0 0 1px color-mix(in oklch, var(--cg) 50%, transparent); }
.course-card[data-pos="1"]:hover,.course-card[data-pos="2"]:hover{ filter:brightness(.78) saturate(.95); }

/* ---- CTA block under the deck ---- */
.courses__cta{ text-align:center; max-width:740px; margin:0 auto; }
.courses__cta .courses__eyebrow{ color:rgba(8,20,24,.66); }
.courses__cta .courses__title{ font-size:clamp(38px,6.4vw,92px); margin-bottom:22px; }
.courses__cta .courses__lede{ max-width:46ch; margin:0 auto; color:rgba(var(--ink-rgb),.7); }
.courses__btn{ display:inline-flex; align-items:center; gap:10px; margin-top:34px; background:#0a0d13; color:#fff; border:1px solid rgba(255,255,255,.14);
  font-family:'Inter',system-ui,sans-serif; font-size:13px; letter-spacing:.06em; text-decoration:none;
  padding:17px 34px; border-radius:100px; box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, background-color .35s ease; }
.courses__btn span{ display:inline-block; transition:transform .35s cubic-bezier(.16,1,.3,1), letter-spacing .35s ease; }
.courses__btn:hover{ background-color:#10243f; box-shadow:0 24px 56px -18px rgba(var(--blue-rgb),.55), inset 0 0 0 1px rgba(var(--blue-rgb),.5); }
.courses__btn:hover span{ transform:scale(1.05); letter-spacing:.12em; }
.courses__faces{ display:inline-flex; margin-top:34px; }
.cface{ width:64px; height:64px; border-radius:50%; margin-left:-20px; border:3px solid var(--band);
  background-size:cover; box-shadow:0 10px 24px -10px rgba(0,0,0,.5); }
.cface:first-child{ margin-left:0; }
.cface{ background-position:center; background-repeat:no-repeat; background-size:cover; }
.cface--1{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%232a3942'/%3E%3Ccircle cx='32' cy='25' r='11' fill='%23aeb9c0'/%3E%3Cpath d='M13 60c0-11 8-19 19-19s19 8 19 19z' fill='%23aeb9c0'/%3E%3C/svg%3E"); }
.cface--2{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%233a2f2a'/%3E%3Ccircle cx='32' cy='25' r='11' fill='%23c9b6a6'/%3E%3Cpath d='M13 60c0-11 8-19 19-19s19 8 19 19z' fill='%23c9b6a6'/%3E%3C/svg%3E"); }
.cface--3{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%232f3a36'/%3E%3Ccircle cx='32' cy='25' r='11' fill='%23b3c2bb'/%3E%3Cpath d='M13 60c0-11 8-19 19-19s19 8 19 19z' fill='%23b3c2bb'/%3E%3C/svg%3E"); }
.course-card--1{ --cg:oklch(64% .08 258); }
.course-card--2{ --cg:oklch(60% .08 272); }
.course-card--3{ --cg:oklch(62% .08 246); }
.cc-glow{ position:absolute; inset:0; background:radial-gradient(90% 60% at 50% -10%, color-mix(in oklch, var(--cg) 28%, transparent), transparent 60%);
  opacity:.5; transition:opacity .5s ease; pointer-events:none; z-index:1; }
.cc-bar{ position:relative; height:3px; background:var(--grad); z-index:3; }
.cc-media{ position:relative; aspect-ratio:16/11; overflow:hidden; z-index:2; }
.cc-img{ position:absolute; inset:0; transition:transform .9s cubic-bezier(.16,1,.3,1), clip-path 1s cubic-bezier(.16,1,.3,1); }
/* premium abstract "renders" — layered mesh gradient per card hue */
.course-card--1 .cc-img{ background:
  radial-gradient(75% 60% at 80% 8%, oklch(72% .17 200 / .55), transparent 60%),
  radial-gradient(80% 75% at 8% 115%, oklch(52% .2 250 / .5), transparent 58%),
  linear-gradient(158deg, #0f1928, var(--panel)); }
.course-card--2 .cc-img{ background:
  radial-gradient(75% 60% at 18% 8%, oklch(66% .24 290 / .55), transparent 60%),
  radial-gradient(80% 75% at 95% 115%, oklch(54% .22 250 / .45), transparent 58%),
  linear-gradient(158deg, #161033, var(--panel)); }
.course-card--3 .cc-img{ background:
  radial-gradient(75% 60% at 82% 8%, oklch(66% .26 322 / .55), transparent 60%),
  radial-gradient(80% 75% at 8% 115%, oklch(58% .2 350 / .45), transparent 58%),
  linear-gradient(158deg, #220f2c, var(--panel)); }
/* fine dot grid overlay, faded toward the bottom so the numeral/tag read cleanly */
.cc-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 55%,transparent 100%); }
.cc-img__stripe{ position:absolute; inset:0; z-index:2;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.5px);
  background-size:19px 19px;
  -webkit-mask-image:radial-gradient(130% 95% at 50% -5%, #000, transparent 78%);
          mask-image:radial-gradient(130% 95% at 50% -5%, #000, transparent 78%); }
/* soft signature glow orb top-right of each render */
.cc-img::after{ content:""; position:absolute; right:-12%; top:-22%; width:62%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in oklch, var(--cg) 60%, transparent), transparent 66%);
  filter:blur(6px); opacity:.7; pointer-events:none; }
.cc-num{ position:absolute; top:-.28em; right:.04em; font-family:'Fraunces',Georgia,serif; font-weight:500;
  font-size:clamp(150px,17vw,210px); line-height:1; color:rgba(var(--ink-rgb),.07); pointer-events:none; }
.cc-tag{ position:absolute; left:16px; bottom:14px; font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.18em;
  color:rgba(var(--ink-rgb),.75); text-transform:uppercase; z-index:2; }
.cc-body{ position:relative; z-index:2; padding:clamp(26px,2.4vw,38px); display:flex; flex-direction:column; flex:1; }
.cc-kicker{ font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.cc-h3{ margin:0 0 14px; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(28px,2.6vw,38px); line-height:1.0; letter-spacing:-.03em; color:var(--ink); }
.cc-p{ margin:0 0 24px; font-size:14.5px; line-height:1.6; color:rgba(var(--ink-rgb),.62); }
.cc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:auto 0 26px; }
.cc-chip{ font-family:'Inter',system-ui,sans-serif; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(var(--ink-rgb),.7);
  border:1px solid rgba(var(--ink-rgb),.16); border-radius:100px; padding:6px 12px; }
.cc-foot{ display:inline-flex; align-items:center; gap:10px; font-family:'Inter',system-ui,sans-serif; font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); padding-top:18px; border-top:1px solid rgba(var(--ink-rgb),.1); }
.cc-arrow{ transition:transform .4s cubic-bezier(.16,1,.3,1); margin-left:auto; }

/* ============ FLIP / FOUNDER (stepped scroll-lock) ============ */
.flip{ position:relative; z-index:2; height:190vh; background:transparent; }
.flip__pin{ position:sticky; top:0; height:100vh; overflow:hidden; perspective:1800px; }
.flip__layer{ position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:1550px; transform-style:preserve-3d; }
.flip-panel{ position:absolute; top:50%; width:min(440px,40vw); text-align:left; z-index:5; }
.flip-a{ left:54%; transform:translateY(-50%); }
.flip-b{ left:clamp(20px,6vw,80px); transform:translateY(-50%) translateX(-40px); opacity:0; }
.flip-c{ left:54%; transform:translateY(-50%); opacity:0; }
.flip-eyebrow{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:24px; }
.flip-h2{ margin:0 0 24px; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(40px,6vw,72px); line-height:1.02; letter-spacing:-.035em; }
.flip-p{ margin:0; font-size:18px; line-height:1.65; color:rgba(var(--ink-rgb),.7); }
.flip-cta{ display:inline-block; margin-top:26px; font-family:'Inter',system-ui,sans-serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:#070809; background:var(--grad); padding:15px 26px; border-radius:100px; text-decoration:none; font-weight:500; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.flip-card{ position:absolute; top:50%; left:26%; transform:translate(-50%,-50%); width:min(550px,52vw); aspect-ratio:854/1280;
  transform-style:preserve-3d; will-change:transform,left; z-index:6; }
.flip-card__face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:14px; overflow:hidden;
  box-shadow:0 40px 100px -24px rgba(0,0,0,.85),0 0 60px -20px oklch(62% .23 230 / .5); }
.flip-card__face--back{ transform:rotateY(180deg); box-shadow:0 40px 100px -24px rgba(0,0,0,.85),0 0 60px -20px oklch(60% .26 300 / .5); }
.flip-card__face img{ width:100%; height:100%; object-fit:cover; display:block; }
.flip-card__face--back img{ transform:scaleX(-1); }

/* ============ DECK (13 cards, scroll-dealt) ============ */
.deck{ position:relative; height:360vh; background:transparent; }
/* frosted glass: the fixed metallic logo stays visible (blurred) behind the deck as you scroll */
.deck__pin{ position:sticky; top:0; height:100vh; overflow:hidden; background:rgba(8,11,16,.5);
  -webkit-backdrop-filter:blur(34px) saturate(1.05); backdrop-filter:blur(34px) saturate(1.05); }
.deck__head{ position:absolute; top:clamp(60px,10vh,104px); left:0; right:0; text-align:center; padding:0 6vw; z-index:50; pointer-events:none; }
.deck__eyebrow{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.deck__title{ margin:0 auto; max-width:20ch; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(26px,3.4vw,50px); line-height:1.0; letter-spacing:-.03em; }
.deck__stagewrap{ position:absolute; top:clamp(190px,30vh,290px); bottom:clamp(86px,13vh,132px); left:0; right:0; display:flex; align-items:center; justify-content:center; }
.deck__stage{ position:relative; width:min(378px,82vw); height:min(530px,100%); }
.deck-card{ position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%,-50%);
  background:linear-gradient(180deg,var(--panel3),var(--panel)); border:1px solid oklch(70% .14 235 / .35); border-radius:20px;
  box-shadow:0 40px 90px -28px rgba(0,0,0,.9),0 0 70px -36px oklch(62% .23 270 / .8),inset 0 0 0 1px rgba(255,255,255,.02);
  display:flex; align-items:center; justify-content:center; padding:clamp(26px,4vw,40px); overflow:hidden; will-change:transform,opacity; }
.deck-card__bar{ position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); }
.deck-card__corner{ position:absolute; display:flex; flex-direction:column; align-items:center; line-height:.92; }
.deck-card__corner--tl{ top:20px; left:22px; }
.deck-card__corner--br{ bottom:20px; right:22px; transform:rotate(180deg); }
.deck-card__rank{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:28px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.deck-card__suit{ font-size:20px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.deck-card__watermark{ position:absolute; right:-6%; bottom:-7%; font-size:clamp(180px,42vw,300px); line-height:1; color:oklch(70% .2 255 / .06); pointer-events:none; user-select:none; }
.deck-card__body{ position:relative; z-index:2; text-align:left; width:100%; }
.deck-card__kicker{ font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.deck-card__h3{ margin:0 0 14px; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(26px,3.6vw,38px); line-height:1.0; letter-spacing:-.025em; }
.deck-card__p{ margin:0; font-size:14.5px; line-height:1.6; color:rgba(var(--ink-rgb),.62); }
.deck__meter{ position:absolute; bottom:clamp(40px,7vh,72px); left:0; right:0; display:flex; align-items:center; justify-content:center; gap:16px; z-index:50; pointer-events:none; }
.deck__count{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.14em; color:rgba(var(--ink-rgb),.5); }
.deck__count b{ color:var(--ink); font-weight:400; }
.deck__bartrack{ width:64px; height:1px; background:rgba(var(--ink-rgb),.2); position:relative; overflow:hidden; }
.deck__bar{ position:absolute; inset:0 100% 0 0; background:var(--grad); }
.deck__hint{ font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--ink-rgb),.4); }

/* ============ MARQUEE ============ */
.marquee{ overflow:hidden; border-top:1px solid rgba(var(--ink-rgb),.08); border-bottom:1px solid rgba(var(--ink-rgb),.08);
  padding:20px 0; background:transparent; position:relative; z-index:2; white-space:nowrap; }
.marquee__row{ display:inline-flex; animation:acad-marquee 28s linear infinite; will-change:transform; }
.marquee__row--rev{ animation:acad-marquee-r 30s linear infinite; }
.marquee__text{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-style:italic; font-size:clamp(26px,4vw,52px); color:rgba(var(--ink-rgb),.9); padding-right:40px; letter-spacing:-.02em; }
.marquee__star{ color:oklch(70% .2 230); }
.marquee--bottom{ border-bottom:none; padding:16px 0; }
.marquee--bottom .marquee__text{ font-family:'Inter',system-ui,sans-serif; font-weight:400; font-style:normal; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(var(--ink-rgb),.45); padding-right:30px; }

/* ============ WHY JOIN ============ */
.why{ background:transparent; position:relative; z-index:2; padding:clamp(70px,11vh,150px) clamp(20px,4vw,56px); }
.why__title{ margin:0 0 clamp(40px,6vh,72px); font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(32px,4.6vw,64px); line-height:1.0; letter-spacing:-.03em; max-width:20ch; }
.why__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(20px,3vw,40px); }
.why-item{ padding-top:30px; border-top:1px solid oklch(70% .18 240 / .45); }
.why-item__n{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:24px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:24px; }
.why-item__h3{ margin:0 0 14px; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(20px,2.4vw,28px); line-height:1.1; letter-spacing:-.02em; }
.why-item__p{ margin:0; font-size:15px; line-height:1.65; color:rgba(var(--ink-rgb),.6); }

/* ============ FINAL CTA ============ */
.cta-final{ background:radial-gradient(130% 120% at 50% 130%,oklch(55% .22 285 / .4) 0%,var(--bg2) 45%,var(--bg) 100%); padding:clamp(90px,14vh,180px) clamp(20px,4vw,56px); text-align:center; }
.cta-final__eyebrow{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:30px; }
.cta-final__title{ margin:0 auto 28px; max-width:14ch; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(48px,9vw,150px); line-height:.92; letter-spacing:-.045em; }
.cta-final__p{ margin:0 auto 40px; max-width:50ch; font-size:16.5px; line-height:1.6; color:rgba(var(--ink-rgb),.62); }
.cta-final__btn{ display:inline-block; font-family:'Inter',system-ui,sans-serif; font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  color:#070809; background:var(--grad); padding:19px 40px; border-radius:100px; text-decoration:none; font-weight:500; transition:transform .35s cubic-bezier(.16,1,.3,1); }

/* ============ FOOTER ============ */
.footer{ background:transparent; position:relative; z-index:2; padding:clamp(60px,9vh,110px) clamp(20px,4vw,56px) 40px; border-top:1px solid rgba(var(--ink-rgb),.08); }
.footer__top{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(36px,5vw,72px); align-items:start; margin-bottom:clamp(48px,7vh,80px); }
.footer__brand{ max-width:46ch; }
.footer__brandname{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(30px,4vw,46px); letter-spacing:-.03em; margin-bottom:20px; }
.footer__brandp{ margin:0 0 30px; font-size:15px; line-height:1.65; color:rgba(var(--ink-rgb),.55); }
.footer__eyebrow{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.footer__h3{ margin:0; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(24px,2.6vw,34px); line-height:1.05; letter-spacing:-.03em; max-width:16ch; }
.signup{ background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid oklch(70% .14 235 / .3); border-radius:20px; padding:clamp(26px,3vw,38px); position:relative; overflow:hidden; }
.signup__bar{ position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); }
.signup__glow{ position:absolute; inset:0; background:radial-gradient(90% 70% at 85% -10%,rgba(var(--blue-rgb),.22),transparent 60%); pointer-events:none; }
.signup__success{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:clamp(24px,3vw,32px); border:1px solid oklch(70% .18 200 / .4); border-radius:16px; background:oklch(62% .2 230 / .08); }
.signup__check{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--grad); color:#070809; font-size:22px; font-weight:800; }
.signup__successtitle{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:22px; letter-spacing:-.02em; }
.signup__successp{ margin:0; font-size:14.5px; line-height:1.6; color:rgba(var(--ink-rgb),.6); }
.form{ position:relative; z-index:2; display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:'Inter',system-ui,sans-serif; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--ink-rgb),.55); }
.field input{ font-family:'Inter',system-ui,sans-serif; font-size:15px; color:var(--ink); background:rgba(var(--ink-rgb),.06); border:0;
  border-radius:12px; padding:14px 16px; outline:none; transition:box-shadow .3s,background .3s; }
.field input::placeholder{ color:rgba(var(--ink-rgb),.4); }
.field input:focus{ background:rgba(var(--ink-rgb),.09); box-shadow:0 0 0 2px rgba(var(--blue-rgb),.55) inset; }
.form__submit{ margin-top:6px; font-family:'Inter',system-ui,sans-serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  color:#070809; background:var(--grad); border:none; cursor:pointer; padding:16px 28px; border-radius:100px;
  transition:transform .35s cubic-bezier(.16,1,.3,1); box-shadow:0 12px 40px -12px oklch(62% .23 250 / .7); }
.form__note{ margin:2px 0 0; font-family:'Inter',system-ui,sans-serif; font-size:10px; letter-spacing:.06em; color:rgba(var(--ink-rgb),.34); }
.footer__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:48px; margin-bottom:60px; }
.footer__coltitle{ font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.footer__list{ display:flex; flex-direction:column; gap:12px; font-size:14px; }
.footer__list a{ color:rgba(var(--ink-rgb),.7); text-decoration:none; }
.footer__list span{ color:rgba(var(--ink-rgb),.7); }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid rgba(var(--ink-rgb),.08);
  font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.08em; color:rgba(var(--ink-rgb),.4); }
.footer__bottom a{ color:rgba(var(--ink-rgb),.4); text-decoration:none; }
.footer__legal{ display:flex; gap:22px; }

@media (max-width: 720px){
  .nav__links{ display:none; }
  .flip-panel{ width:min(440px,80vw); }
}

/* ============ MEDALLION CHIP VARIANTS ============ */
/* middle chip (#c2) — gold instead of silver, so it reads as the standout */
#ace-hero #c2 .face{ background:conic-gradient(from 90deg,#8a6f3a,#f6e7b0 9%,#c9a85e 19%,#f3e6b8 31%,#a8853f 43%,#f5e9bd 57%,#c2a155 71%,#f3e6b8 85%,#8a6f3a); }
#ace-hero #c2 .ring{ background:radial-gradient(circle at 38% 30%,#fff7e0,#e8d191 30%,#b9954a 56%,#e3cd8c 74%,#7a5e2a 100%); }
#ace-hero #c2 .center{ background:radial-gradient(circle at 42% 36%,#f6ecc8,#d6b772 45%,#9c7c3c 78%,#7a5e2a 100%); }
#ace-hero #c2 .seg{ background:linear-gradient(to bottom,#5a4824,#d4b86e 22%,#f6e7b0 45%,#c9a85e 60%,#8a6f3a 80%,#4a3a1c); }
#ace-hero #c2 .rule{ background:linear-gradient(90deg,transparent,#7a5e2a,transparent); }
#ace-hero #c2 .msg{ color:#4a3a1c; }

/* chips 2 & 3 — much bigger logo on the face */
#ace-hero #c2 .mark,
#ace-hero #c3 .mark{ width:68%; height:48%; opacity:1; }

/* ============ HERO DOT GRID — a bounded 10x10 grid behind the logo (cheap CSS, no GPU shader) ============ */
/* anchored in the hero (absolute, scrolls away with the page); sits behind #bg (earlier in DOM) so the logo renders over it */
#hero-dots{ position:absolute; z-index:0; pointer-events:none;
  width:min(60vmin,520px); aspect-ratio:1; left:52%; top:46vh; transform:translate(-50%,-50%);
  background-image: radial-gradient(rgba(176,189,202,.30) 1.5px, transparent 2.2px);
  background-size: 10% 10%;                 /* 10 columns x 10 rows = a 10x10 dot grid */
  background-position: center; }

/* ============ HERO AMBIENT GRADIENT — even base + one stronger side that orbits the hero ============ */
#hero-glow{ position:absolute; top:0; left:0; right:0; height:100vh; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(95% 72% at 50% 42%, rgba(42,60,86,.18), transparent 72%),
    linear-gradient(180deg, rgba(26,36,50,.38), transparent 46%); }
#hero-glow::before{ content:""; position:absolute; left:50%; top:46%; width:118vmax; height:118vmax; transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 28%, rgba(58,180,230,.42), rgba(110,80,168,.18) 26%, transparent 46%);
  animation:heroGlowOrbit 15s linear infinite; }
@keyframes heroGlowOrbit{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ============ FLIP SECTION dots — same 10x10 grid as the hero, with the logo showing behind ============ */
.flip-dots{ position:absolute; z-index:0; pointer-events:none;
  width:min(60vmin,520px); aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%);
  background-image: radial-gradient(rgba(176,189,202,.22) 1.5px, transparent 2.2px);
  background-size: 10% 10%; background-position:center; }
.flip__layer{ z-index:1; }

/* ============ JOIN THE TABLE section + medallion wrapper (chips moved out of the hero) ============ */
.medallion{ --logo:url("assets/27d1d83c-2ad5-4e0e-a0fb-6f0ac38dc77e.png"); position:relative; color:#eef2f5;
  display:flex; align-items:center; justify-content:center; }
.table-sec{ position:relative; z-index:2; padding:clamp(80px,13vh,170px) clamp(20px,4vw,56px); background:transparent; }
.table-sec__inner{ max-width:1550px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.table-sec__eyebrow{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.table-sec__title{ margin:0 0 22px; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(40px,6vw,84px); line-height:1.0; letter-spacing:-.02em; }
.table-sec__p{ margin:0 0 30px; max-width:46ch; font-size:16px; line-height:1.65; color:rgba(var(--ink-rgb),.66); }
.table-sec__btn{ display:inline-block; font-family:'Inter',system-ui,sans-serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:#070809; background:var(--grad); padding:16px 30px; border-radius:100px; text-decoration:none; font-weight:500; transition:transform .35s cubic-bezier(.16,1,.3,1); }
@media (max-width:900px){ .table-sec__inner{ grid-template-columns:1fr; } .medallion{ order:1; } .table-sec__copy{ order:2; text-align:center; } }

/* ============ HERO: cycling pull-quote (right) + buttons moved to centre-bottom ============ */
.hero-quote{ position:absolute; right:5%; bottom:20%; z-index:3; display:flex; flex-direction:column; align-items:flex-end; text-align:right; max-width:min(42vw,520px); }
.hero-quote__line{ margin:0; font-family:'Fraunces',Georgia,serif; font-weight:500; font-style:italic;
  font-size:clamp(30px,3.8vw,56px); line-height:1.12; letter-spacing:-.01em; color:#e3e9ef; min-height:2.3em; will-change:transform,opacity; }
.hero-quote__line em{ font-style:italic; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-quote__by{ margin-top:20px; font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--ink-rgb),.45); }
.hero-cta{ position:absolute; left:50%; bottom:clamp(30px,6vh,66px); transform:translateX(-50%); z-index:3;
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
@media (max-width:900px){ .hero-quote{ display:none; } }

/* "As featured in" lifted onto the hero (under the lead) */
.hero-press{ margin-top:2.6rem; display:flex; flex-direction:column; gap:12px; }
.hero-press__label{ font-family:'Inter',system-ui,sans-serif; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:rgba(238,242,245,.4); }
.hero-press__names{ display:flex; flex-wrap:wrap; align-items:baseline; gap:clamp(16px,2vw,28px); }
.hero-press__names b,.hero-press__names i{ font-family:'Fraunces',Georgia,serif; font-weight:400; font-style:italic; font-size:clamp(15px,1.5vw,19px); color:rgba(238,242,245,.5); transition:color .3s ease; }
.hero-press__names i{ font-style:normal; letter-spacing:.14em; }
.hero-press__names b:hover,.hero-press__names i:hover{ color:rgba(238,242,245,.8); }
@media (max-width:900px){ .hero-press{ align-items:center; text-align:center; } .hero-press__names{ justify-content:center; } }

/* ============ "A seat at the table" dots — same 10x10 grid so the section isn't bare ============ */
.table-sec__inner{ position:relative; z-index:1; }
.table-dots{ position:absolute; z-index:0; pointer-events:none;
  width:min(54vmin,460px); aspect-ratio:1; left:72%; top:50%; transform:translate(-50%,-50%);
  background-image: radial-gradient(rgba(176,189,202,.26) 1.5px, transparent 2.2px);
  background-size: 10% 10%; background-position:center;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
@media (max-width:900px){ .table-dots{ display:none; } }

/* ============ Book-a-call: transparent + a gradient border whose angle rotates 0->360 (moving light) ============ */
@property --bd-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.btn-glow{ position:relative; display:inline-flex; align-items:center; justify-content:center; isolation:isolate;
  font-family:'Inter',system-ui,sans-serif; font-size:.92rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:#eef2f5; background:transparent; padding:1rem 2.4rem; border-radius:999px; text-decoration:none;
  transition:transform .25s cubic-bezier(.16,1,.3,1), background-color .35s ease, box-shadow .35s ease; }
/* hover animates the inner span + fill/glow (NOT the <a> transform — the magnetic JS owns that) */
.btn-glow span{ position:relative; z-index:1; transition:transform .35s cubic-bezier(.16,1,.3,1), letter-spacing .35s ease; }
.btn-glow::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.7px;
  background:linear-gradient(var(--bd-angle), var(--blue), #07142a);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:bdSpin 3s linear infinite; transition:background .35s ease; }
.btn-glow:hover{ background-color:rgba(var(--blue-rgb),.16); box-shadow:0 14px 40px -12px rgba(var(--blue-rgb),.6); }
.btn-glow:hover span{ transform:scale(1.05); letter-spacing:.13em; }
.btn-glow:hover::before{ animation-duration:1.1s; background:linear-gradient(var(--bd-angle), var(--blue), #1f6fe0); }
@keyframes bdSpin{ to{ --bd-angle:360deg; } }

/* ============================================================================
   NEW LAYOUT SECTIONS — stats (+ press) · edge bento · the bet pricing
   Premium / slick. Uses the existing token system (--grad, --accent,
   --panel, --ink-rgb, Fraunces / Inter / JetBrains Mono).
   ============================================================================ */

/* ---------- STATS / PROOF BAND (press strip folded in) ---------- */
.stats{ position:relative; z-index:2; padding:clamp(54px,9vh,104px) clamp(20px,4vw,56px);
  border-top:1px solid rgba(var(--ink-rgb),.08); border-bottom:1px solid rgba(var(--ink-rgb),.08); }
.stats__grid{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,52px); }
.stat{ position:relative; padding-left:18px; border-left:1px solid oklch(70% .18 240 / .4); }
.stat__n{ font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:clamp(40px,5vw,76px); line-height:.95; letter-spacing:-.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat__plus{ -webkit-text-fill-color:initial; color:var(--accent); }
.stat__l{ margin-top:14px; font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; line-height:1.55; color:rgba(var(--ink-rgb),.5); }
/* press logos blended into the stats band as a quiet trailing row */
.stats__press{ max-width:1400px; margin:clamp(40px,6vh,68px) auto 0; padding-top:clamp(26px,3.5vh,38px);
  border-top:1px solid rgba(var(--ink-rgb),.07); display:flex; flex-wrap:wrap; align-items:baseline;
  gap:clamp(22px,4vw,56px); justify-content:center; }
.stats__presslabel{ font-family:'Inter',system-ui,sans-serif; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:rgba(var(--ink-rgb),.34); }
.stats__pressname{ font-family:'Fraunces',Georgia,serif; font-weight:400; font-style:italic; font-size:clamp(15px,1.7vw,21px); color:rgba(var(--ink-rgb),.42); letter-spacing:-.01em; transition:color .4s ease; }
.stats__pressname:hover{ color:rgba(var(--ink-rgb),.7); }
.stats__pressname--cbs{ font-style:normal; letter-spacing:.16em; }
@media (max-width:760px){ .stats__grid{ grid-template-columns:repeat(2,1fr); gap:34px 22px; } }
@media (max-width:760px){ .stats__grid{ grid-template-columns:repeat(2,1fr); gap:34px 22px; } }

/* ---------- THE EDGE — full-width connected grid ---------- */
.edge{ position:relative; z-index:2; padding:clamp(70px,11vh,150px) 0; background:var(--bg); }   /* full width + solid bg (no logo bleed-through) */
.edge__head{ margin-bottom:clamp(36px,5vh,60px); padding:0 clamp(20px,4vw,56px); }
.edge__eyebrow{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.edge__title{ margin:0; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(34px,5.2vw,76px); line-height:1.0; letter-spacing:-.035em; max-width:18ch; }
/* connected cells, edge-to-edge: 2 rows — row 1 = 60|40, row 2 = 40|60. Shared 1px lines join them. */
.edge__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border-top:1px solid rgba(var(--ink-rgb),.12); border-bottom:1px solid rgba(var(--ink-rgb),.12); }
/* frosted glass cells — faint blue tint (on-palette, not grey), blurred, joined by 1px lines */
.tile{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(260px,32vh,340px);
  padding:clamp(26px,2.4vw,40px); background:rgba(var(--blue-rgb),.04);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  border-right:1px solid rgba(var(--ink-rgb),.1); border-bottom:1px solid rgba(var(--ink-rgb),.1); transition:background-color .4s ease; }
.tile__icon{ width:54px; height:54px; margin-bottom:auto; color:var(--blue); }
.tile__icon svg{ width:100%; height:100%; display:block; stroke:currentColor; fill:none; stroke-width:1.5; }
.tile:nth-child(1){ grid-column:span 3; }   /* 60 */
.tile:nth-child(2){ grid-column:span 2; }   /* 40 */
.tile:nth-child(3){ grid-column:span 2; }   /* 40 */
.tile:nth-child(4){ grid-column:span 3; }   /* 60 */
.tile:nth-child(2),.tile:nth-child(4){ border-right:0; }   /* right column → no inner right line */
.tile:nth-child(3),.tile:nth-child(4){ border-bottom:0; }  /* bottom row → no bottom line */
.tile:hover{ background:rgba(var(--blue-rgb),.06); }
.tile__h3{ margin:0 0 12px; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(20px,1.9vw,28px); line-height:1.08; letter-spacing:-.02em; }
.tile__p{ margin:0; font-size:14px; line-height:1.62; color:rgba(var(--ink-rgb),.56); max-width:48ch; }
@media (max-width:560px){
  .edge__grid{ grid-template-columns:1fr; }
  .tile{ grid-column:1 / -1 !important; border-right:0; border-bottom:1px solid rgba(var(--ink-rgb),.1); min-height:0; }
  .tile:last-child{ border-bottom:0; }
}

/* ---------- CLASSIC EYEBROWS (site-wide; hero eyebrow keeps its own treatment) ----------
   Muted tone + a short leading rule. No bracket/paren gimmicks. */
.courses__eyebrow,.flip-eyebrow,.deck__eyebrow,.bet__eyebrow,.edge__eyebrow,.footer__eyebrow{
  color:rgba(var(--ink-rgb),.46); display:inline-flex; align-items:center; gap:.65rem; }
.courses__eyebrow::before,.flip-eyebrow::before,.deck__eyebrow::before,.bet__eyebrow::before,.edge__eyebrow::before,.footer__eyebrow::before{
  content:""; width:24px; height:1px; background:rgba(var(--ink-rgb),.32); flex:0 0 auto; }
/* card sub-labels: drop the accent too, keep them quiet */
.cc-kicker,.deck-card__kicker{ color:rgba(var(--ink-rgb),.5); }
.cc-tag{ color:rgba(var(--ink-rgb),.6); }
/* courses CTA sits on the light teal band → keep that eyebrow dark + its rule dark */
.courses .courses__eyebrow{ color:rgba(var(--ink-rgb),.55); justify-content:center; }
.courses .courses__eyebrow::before{ background:rgba(var(--ink-rgb),.3); }
/* highlight word reads light on the dark band */
.courses .courses__title .grad-text{ background:none; -webkit-text-fill-color:#eaf0ff; color:#eaf0ff; }
/* head sits ABOVE the sliding cards now */
.courses__head{ position:relative; z-index:2; text-align:center; max-width:760px; margin:0 auto clamp(38px,6vh,68px); }
.courses__head .courses__title{ font-size:clamp(38px,6.4vw,92px); margin:14px 0 0; }

/* ---------- THE BET — PRICING CTA ---------- */
.bet{ position:relative; z-index:2; text-align:center;
  background:radial-gradient(130% 120% at 50% 130%, rgba(var(--blue-rgb),.22) 0%, var(--bg2) 48%, var(--bg) 100%);
  padding:clamp(90px,14vh,180px) clamp(20px,4vw,56px); }
.bet__eyebrow{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:rgba(var(--ink-rgb),.46); margin-bottom:26px; }
.bet__title{ margin:0 auto 22px; max-width:12ch; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(48px,9vw,140px); line-height:.92; letter-spacing:-.045em; }
.bet__p{ margin:0 auto 12px; max-width:52ch; font-size:16.5px; line-height:1.65; color:rgba(var(--ink-rgb),.62); }
.bet__card{ position:relative; max-width:900px; margin:clamp(34px,5vh,52px) auto 0; text-align:left; overflow:hidden;
  background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid oklch(70% .14 235 / .3); border-radius:24px;
  padding:clamp(28px,3.4vw,48px); box-shadow:0 60px 130px -50px rgba(0,0,0,.85); }
/* 50 / 50 — membership on the left, sign-up form on the right */
.bet__split{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.4vw,48px); align-items:stretch; }
.bet__side--plan{ display:flex; flex-direction:column; }
.bet__side--plan .bet__list{ margin-bottom:auto; }
.bet__side--form{ display:flex; align-items:center; border-left:1px solid rgba(var(--ink-rgb),.1); padding-left:clamp(28px,3.4vw,48px); }
.bet__form{ width:100%; display:flex; flex-direction:column; gap:14px; }
.bet__form .bet__btn{ margin-top:6px; }
.bet__side--plan .bet__note{ text-align:left; margin-top:18px; }
@media (max-width:680px){
  .bet__split{ grid-template-columns:1fr; }
  .bet__side--form{ border-left:0; border-top:1px solid rgba(var(--ink-rgb),.1); padding-left:0; padding-top:clamp(24px,5vw,32px); }
}
.bet__bar{ position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); }
.bet__glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 70% at 85% -10%, rgba(var(--blue-rgb),.22), transparent 60%); }
.bet__cardtop{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.bet__plan{ font-family:'Inter',system-ui,sans-serif; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--ink-rgb),.65); }
.bet__odds{ font-family:'Inter',system-ui,sans-serif; font-size:9.5px; letter-spacing:.12em; color:oklch(72% .2 150);
  border:1px solid oklch(72% .18 150 / .4); border-radius:100px; padding:5px 10px; }
.bet__price{ position:relative; z-index:1; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(60px,9vw,92px); line-height:1; letter-spacing:-.04em; margin-bottom:24px; }
.bet__cur{ font-size:.5em; vertical-align:.45em; color:rgba(var(--ink-rgb),.6); margin-right:2px; }
.bet__per{ font-family:'Inter',system-ui,sans-serif; font-size:14px; font-weight:400; letter-spacing:.06em; color:rgba(var(--ink-rgb),.45); margin-left:6px; }
.bet__list{ position:relative; z-index:1; list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:13px; }
.bet__list li{ position:relative; padding-left:28px; font-size:14.5px; line-height:1.5; color:rgba(var(--ink-rgb),.78); }
.bet__list li::before{ content:"✓"; position:absolute; left:0; top:-1px; color:var(--accent); font-weight:800; }
.bet__btn{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Inter',system-ui,sans-serif; font-size:14px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  color:#070809; background:var(--grad); padding:18px 28px; border-radius:100px; text-decoration:none;
  box-shadow:0 18px 50px -16px rgba(var(--blue-rgb),.7); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, filter .35s ease; }
.bet__btn span{ display:inline-block; transition:transform .35s cubic-bezier(.16,1,.3,1), letter-spacing .35s ease; }
.bet__btn:hover{ box-shadow:0 26px 64px -16px rgba(var(--blue-rgb),.85); filter:brightness(1.08); }
.bet__btn:hover span{ transform:scale(1.04); letter-spacing:.12em; }
.bet__note{ position:relative; z-index:1; margin-top:16px; text-align:center; font-family:'Inter',system-ui,sans-serif; font-size:10.5px; letter-spacing:.06em; color:rgba(var(--ink-rgb),.4); }

/* ---------- COURSES CTA — community people bubbles (sides tuck behind the middle) ---------- */
.orbs{ display:flex; align-items:center; justify-content:center; margin-top:clamp(34px,5vh,56px); }
.orb{ position:relative; width:clamp(76px,9vw,112px); aspect-ratio:1; border-radius:50%; overflow:hidden;
  transform:scale(0); opacity:0; background:#0b1622; border:3px solid rgba(255,255,255,.9);
  box-shadow:0 22px 50px -18px rgba(8,18,22,.7);
  transition:transform .9s cubic-bezier(.34,1.56,.64,1), opacity .55s ease; }
.orb img{ width:100%; height:100%; object-fit:cover; display:block; }
.orb--mid{ width:clamp(110px,13vw,166px); z-index:3; border-color:#fff; box-shadow:0 30px 66px -18px rgba(8,18,22,.82); }
.orb--side{ z-index:1; }
.orbs .orb--side:first-child{ margin-right:-32px; }     /* left bubble slides behind the middle */
.orbs .orb--side:last-child{ margin-left:-32px; }       /* right bubble slides behind the middle */
.orb.is-pop{ transform:scale(1); opacity:1; }
@media (prefers-reduced-motion: reduce){ .orb{ transition:none; } }

/* ---------- FOOTER (redesigned) ---------- */
.footer__inner{ max-width:1400px; margin:0 auto; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1.25fr; gap:clamp(36px,5vw,84px); align-items:start;
  padding-bottom:clamp(40px,6vh,72px); }
.footer__wordmark{ display:inline-block; margin-bottom:18px; font-family:'Fraunces',Georgia,serif; font-weight:500;
  font-size:clamp(28px,3.6vw,44px); letter-spacing:-.03em; color:var(--ink); text-decoration:none; }
.footer__tag{ margin:0 0 26px; max-width:40ch; font-size:14.5px; line-height:1.65; color:rgba(var(--ink-rgb),.5); }
.footer__social{ display:flex; gap:10px; }
.footer__social a{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(var(--ink-rgb),.16); font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.04em;
  color:rgba(var(--ink-rgb),.6); text-decoration:none; transition:border-color .3s, color .3s, background-color .3s, transform .3s; }
.footer__social a:hover{ border-color:rgba(var(--blue-rgb),.6); color:var(--ink); background:rgba(var(--blue-rgb),.1); transform:translateY(-2px); }
.footer__nav{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.footer__navcol{ display:flex; flex-direction:column; gap:13px; }
.footer__navtitle{ margin-bottom:5px; font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--ink-rgb),.4); }
.footer__navcol a{ font-size:14.5px; color:rgba(var(--ink-rgb),.66); text-decoration:none; transition:color .25s ease, padding-left .25s ease; }
.footer__navcol a:hover{ color:var(--ink); padding-left:5px; }
.footer__news .footer__eyebrow{ margin-bottom:12px; }
.footer__news .footer__h3{ margin:0 0 20px; }
.footer__news .signup{ background:rgba(var(--ink-rgb),.025); border:1px solid rgba(var(--ink-rgb),.1); border-radius:16px;
  padding:clamp(18px,2vw,24px); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.form--inline{ display:flex; flex-direction:column; gap:10px; }
.form__label{ font-family:'Inter',system-ui,sans-serif; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--ink-rgb),.5); }
.form__row{ display:flex; gap:8px; }
.form--inline input{ flex:1; min-width:0; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
  background:rgba(var(--ink-rgb),.06); border:0; border-radius:100px; padding:13px 18px; outline:none;
  transition:box-shadow .3s, background-color .3s; }
.form--inline input:focus{ background:rgba(var(--ink-rgb),.09); box-shadow:0 0 0 2px rgba(var(--blue-rgb),.55) inset; }
.form--inline .form__submit{ margin-top:0; white-space:nowrap; padding:13px 22px; cursor:pointer; }
.form__done{ font-family:'Inter',system-ui,sans-serif; font-size:13px; letter-spacing:.04em; color:var(--blue); padding:6px 2px; }
/* oversized brand wordmark — gives the footer presence */
.footer__big{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(56px,15.5vw,232px); line-height:.86;
  letter-spacing:-.04em; white-space:nowrap; text-align:center; user-select:none; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--ink-rgb),.12), rgba(var(--ink-rgb),.02));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:clamp(18px,4vh,46px) 0 clamp(8px,2vh,22px); }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  padding-top:26px; border-top:1px solid rgba(var(--ink-rgb),.08);
  font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.06em; color:rgba(var(--ink-rgb),.4); }
.footer__bottom a{ color:rgba(var(--ink-rgb),.4); text-decoration:none; transition:color .25s ease; }
.footer__bottom a:hover{ color:rgba(var(--ink-rgb),.72); }
.footer__legal{ display:flex; gap:22px; }
@media (max-width:900px){
  .footer__grid{ grid-template-columns:1fr; gap:40px; }
  .footer__nav{ max-width:440px; }
}

/* ============================================================================
   THE PROOF — the shared 3D logo locks into a drawn ring, counters radiate
   ============================================================================ */
.lockup{ position:relative; z-index:2; height:300vh; background:transparent; }
.lockup__pin{ position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }

.lockup__eyebrow{ position:absolute; top:clamp(28px,7vh,66px); left:50%; transform:translateX(-50%);
  font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(var(--ink-rgb),.46); display:inline-flex; align-items:center; gap:.65rem; opacity:0; }
.lockup__eyebrow::before,.lockup__eyebrow::after{ content:""; width:24px; height:1px; background:rgba(var(--ink-rgb),.32); flex:0 0 auto; }

.lockup__lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible; }
.lockup__line{ fill:none; stroke:rgba(var(--blue-rgb),.6); stroke-width:1.4; }
.lockup__line-dot{ fill:#dbe7ff; filter:drop-shadow(0 0 6px rgba(126,149,255,.7)); }

.lockup__center{ position:relative; z-index:2; width:clamp(160px,22vw,280px); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center; pointer-events:none; }
.lockup__ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.lockup__ring-track{ fill:none; stroke:rgba(var(--ink-rgb),.10); stroke-width:2; }
.lockup__ring-draw{ fill:none; stroke:url(#lkRingGrad); stroke-width:2.4; stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(126,149,255,.55)); stroke-dasharray:1; stroke-dashoffset:1; }
.lockup__fallback{ position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58%; aspect-ratio:1; background:linear-gradient(150deg,#eef3ff 0%,#aebeff 36%,#6f86ff 60%,#46556f 100%);
  -webkit-mask:url("logo.svg") center/contain no-repeat; mask:url("logo.svg") center/contain no-repeat;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); opacity:0; transition:opacity .45s ease; pointer-events:none; }

.lockup__nodes{ display:contents; }
.lockup__node{ position:absolute; z-index:3; width:min(26vw,290px); display:flex; flex-direction:column; opacity:0; }
.lockup__node--tl{ left:clamp(20px,7vw,120px);  top:clamp(80px,18vh,190px);    align-items:flex-start; text-align:left; }
.lockup__node--tr{ right:clamp(20px,7vw,120px); top:clamp(80px,18vh,190px);    align-items:flex-end;   text-align:right; }
.lockup__node--bl{ left:clamp(20px,7vw,120px);  bottom:clamp(80px,18vh,190px); align-items:flex-start; text-align:left; }
.lockup__node--br{ right:clamp(20px,7vw,120px); bottom:clamp(80px,18vh,190px); align-items:flex-end;   text-align:right; }
.lockup__idx{ font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.32em; color:var(--accent); margin-bottom:10px; }
.lockup__n{ font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:clamp(40px,5vw,76px); line-height:.95; letter-spacing:-.04em; color:var(--ink); }
.lockup__l{ margin-top:12px; font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; line-height:1.55; color:rgba(var(--ink-rgb),.5); max-width:24ch; }

/* phones: keep the section pinned with the REAL 3D logo centred (aligns with the ring);
   numbers become a 2x2 row pinned to the bottom — no cramped radial corners, no placeholder */
@media (max-width:900px), (max-height:680px){
  .lockup__lines{ display:none; }
  .lockup__eyebrow{ top:clamp(18px,4vh,38px); }
  .lockup__center{ width:min(50vw,210px); }
  .lockup__nodes{ position:absolute; left:50%; bottom:clamp(20px,5vh,46px); transform:translateX(-50%);
    display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2.6vh,24px) clamp(16px,5vw,30px);
    width:min(90vw,440px); }
  .lockup__node{ position:static; width:auto; align-items:center; text-align:center; }
  .lockup__idx{ margin-bottom:5px; }
  .lockup__n{ font-size:clamp(26px,8vw,42px); }
  .lockup__l{ font-size:10px; letter-spacing:.07em; line-height:1.4; max-width:18ch; }
}

/* ============================================================================
   THEME PUSH — carry the table/cards concept into the edge + the buy-in
   ============================================================================ */
/* THE EDGE -> the four suits (echoes the dealt deck) */
.edge--suits .edge__title{ max-width:17ch; }
.suits{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.5vw,22px); padding:0 clamp(20px,4vw,56px); }
.suit{ position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:clamp(280px,34vh,360px);
  padding:clamp(22px,2vw,30px); border:1px solid rgba(var(--ink-rgb),.1); border-radius:16px;
  background:linear-gradient(180deg,rgba(var(--blue-rgb),.05),rgba(var(--blue-rgb),0));
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, background .4s ease; }
.suit:hover{ transform:translateY(-6px); border-color:rgba(var(--blue-rgb),.35);
  background:linear-gradient(180deg,rgba(var(--blue-rgb),.10),rgba(var(--blue-rgb),.02)); }
.suit__pip{ position:absolute; font-size:18px; line-height:1; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.suit__pip--tl{ top:16px; left:18px; }
.suit__pip--br{ bottom:16px; right:18px; transform:rotate(180deg); }
.suit__glyph{ position:absolute; right:-8%; bottom:-12%; font-size:clamp(150px,15vw,230px); line-height:1;
  color:rgba(var(--blue-rgb),.06); pointer-events:none; user-select:none; }
.suit__body{ margin-top:auto; position:relative; z-index:1; }
.suit__kicker{ display:inline-block; font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.suit__h3{ margin:0 0 10px; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(21px,1.7vw,27px);
  line-height:1.08; letter-spacing:-.02em; color:var(--ink); }
.suit__p{ margin:0; font-size:13.5px; line-height:1.6; color:rgba(var(--ink-rgb),.56); }
@media (max-width:1000px){ .suits{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .suits{ grid-template-columns:1fr; } .suit{ min-height:0; } }

/* THE BET -> buy-in framing */
.bet__cardtop{ margin-bottom:14px; }
.bet__odds{ display:inline-flex; align-items:center; gap:.5em; font-family:'Inter',system-ui,sans-serif;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(var(--blue-rgb),.4); border-radius:999px; padding:5px 11px; background:rgba(var(--blue-rgb),.08); }
.bet__odds::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px rgba(var(--blue-rgb),.9); flex:0 0 auto; }
.bet__buylabel{ font-family:'Inter',system-ui,sans-serif; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(var(--ink-rgb),.45); margin-bottom:4px; }
.bet__suit{ position:absolute; right:-2%; bottom:-24%; font-size:clamp(200px,26vw,340px); line-height:1;
  color:rgba(var(--blue-rgb),.05); pointer-events:none; user-select:none; z-index:0; }

/* THEME PUSH 2 — footer dressed like the felt */
.footer{ border-top:1px solid rgba(var(--blue-rgb),.18); }
.footer__suits{ display:flex; justify-content:center; gap:clamp(20px,3.5vw,46px);
  margin:clamp(6px,1.5vh,18px) 0 clamp(2px,1vh,10px); font-size:clamp(18px,2vw,26px); color:rgba(var(--blue-rgb),.45); }

/* MOBILE FIX — the pinned "disciplines" deck used absolute heading + absolute card-stage keyed to vh,
   so on short/narrow screens the wrapping heading and the cards collided. On phones, lay the pin out
   as a flex column (heading -> card stage -> meter) so they can never overlap, whatever the heading wraps to.
   Safe for the deal animation: its JS only reads the section's scroll progress and writes each card's own
   transform (incl. centering), never measuring element positions. */
@media (max-width:900px), (max-height:860px){
  .deck__pin{ display:flex; flex-direction:column; align-items:center;
    padding:clamp(42px,7vh,82px) 5vw clamp(26px,5vh,50px); }
  .deck__head{ position:static; inset:auto; padding:0; max-width:100%; }
  .deck__title{ font-size:clamp(23px,5.6vw,38px); max-width:24ch; }
  .deck__stagewrap{ position:static; inset:auto; flex:1 1 auto; min-height:0; width:100%;
    margin:clamp(50px,9vh,100px) 0 clamp(16px,2.5vh,28px); }
  .deck__stage{ width:min(300px,78vw); height:100%; max-height:min(468px,100%); }
  .deck__meter{ position:static; inset:auto; margin-top:auto; }
}

/* ============================================================================
   TABLE TALK — video reviews (player-card layout; wire via data-video/poster)
   ============================================================================ */
.talk{ position:relative; z-index:2; padding:clamp(70px,11vh,150px) 0; background:var(--bg); }
.talk__head{ margin-bottom:clamp(36px,5vh,60px); padding:0 clamp(20px,4vw,56px); }
.talk__eyebrow{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.talk__title{ margin:0; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(34px,5.2vw,76px); line-height:1.0; letter-spacing:-.035em; max-width:18ch; }
.talk__lede{ margin:18px 0 0; max-width:44ch; font-size:15.5px; line-height:1.6; color:rgba(var(--ink-rgb),.7); }
.talk__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.5vw,22px); padding:0 clamp(20px,4vw,56px); }

.talk-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:16px;
  padding:clamp(16px,1.4vw,20px); border:1px solid rgba(var(--ink-rgb),.1); border-radius:16px;
  background:linear-gradient(180deg,rgba(var(--blue-rgb),.05),rgba(var(--blue-rgb),0));
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, background .4s ease; }
.talk-card:hover{ transform:translateY(-6px); border-color:rgba(var(--blue-rgb),.35);
  background:linear-gradient(180deg,rgba(var(--blue-rgb),.10),rgba(var(--blue-rgb),.02)); }
.talk-card__pip{ position:absolute; top:16px; right:18px; z-index:3; font-size:18px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* media well: card-back pattern shows until a poster/video is wired */
.talk-card__media{ position:relative; aspect-ratio:16/10; border-radius:10px; overflow:hidden; cursor:pointer;
  background:
    radial-gradient(120% 120% at 50% 125%, rgba(var(--blue-rgb),.30), transparent 62%),
    repeating-linear-gradient(45deg, rgba(var(--ink-rgb),.05) 0 2px, transparent 2px 11px),
    var(--panel2);
  border:1px solid rgba(var(--ink-rgb),.08); }
.talk-card__media::before{ content:"\2660"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:clamp(70px,7vw,110px); color:rgba(var(--ink-rgb),.07); pointer-events:none; }
.talk-card--h .talk-card__media::before{ content:"\2665"; }
.talk-card--d .talk-card__media::before{ content:"\2666"; }
.talk-card__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.talk-card__poster.is-set{ display:block; }
.talk-card__media iframe, .talk-card__media video{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }

/* the play button is a poker chip: dashed edge, felt-blue face */
.talk-card__play{ position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; cursor:pointer;
  border:1.5px dashed rgba(255,255,255,.6); outline:6px solid rgba(var(--blue-rgb),.20);
  background:radial-gradient(circle at 32% 30%, rgba(var(--blue-rgb),.95), rgba(16,24,48,.96));
  box-shadow:0 14px 34px -12px rgba(var(--blue-rgb),.7);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.talk-card__play::after{ content:""; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%);
  border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; }
.talk-card:hover .talk-card__play{ transform:translate(-50%,-50%) scale(1.08); box-shadow:0 18px 44px -12px rgba(var(--blue-rgb),.85); }
.talk-card.is-playing .talk-card__play{ display:none; }
.talk-card__play.is-nag{ animation:talk-nag .5s ease; }
@keyframes talk-nag{ 25%{ transform:translate(-50%,-50%) rotate(-7deg); } 75%{ transform:translate(-50%,-50%) rotate(7deg); } }

.talk-card__quote{ margin:0; font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:450;
  font-size:clamp(17px,1.3vw,20px); line-height:1.4; color:rgba(var(--ink-rgb),.92); }
.talk-card__who{ margin-top:auto; display:flex; flex-direction:column; gap:2px; font-family:'Inter',system-ui,sans-serif; }
.talk-card__who b{ font-size:13.5px; font-weight:600; letter-spacing:.02em; }
.talk-card__who span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(var(--ink-rgb),.55); }

@media (max-width:900px){
  .talk__grid{ grid-template-columns:1fr; }
  .talk-card__media{ aspect-ratio:16/9; }
}

/* ============ SUCCESS STORIES — alumni video tiles (structure mirrors the live testimonials page) ============ */
.alum{ position:relative; z-index:2; background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  padding:clamp(90px,13vh,170px) clamp(20px,4vw,56px); }
.alum__head{ text-align:center; max-width:900px; margin:0 auto clamp(40px,6vh,64px); }
.alum__eyebrow{ font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:rgba(var(--ink-rgb),.46); margin-bottom:26px; }
.alum__title{ margin:0 0 18px; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(40px,6.4vw,88px); line-height:.95; letter-spacing:-.04em; }
.alum__lede{ margin:0 auto; max-width:48ch; font-size:16px; line-height:1.65; color:rgba(var(--ink-rgb),.6); }
.alum__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px); max-width:1140px; margin:0 auto; }
@media (max-width:900px){ .alum__grid{ grid-template-columns:1fr; max-width:420px; } }

.alum-tile{ margin:0; text-align:center; }
.alum-tile__media{ position:relative; display:block; width:100%; aspect-ratio:3/4; padding:0; border:1px solid rgba(var(--ink-rgb),.1);
  border-radius:20px; overflow:hidden; cursor:pointer; background:linear-gradient(160deg,#111624,#0a0d13);
  box-shadow:0 40px 90px -44px rgba(0,0,0,.75); transition:border-color .35s ease, box-shadow .5s ease; }
.alum-tile__media:hover{ border-color:rgba(var(--blue-rgb),.45); box-shadow:0 60px 110px -46px rgba(0,0,0,.85); }
.alum-tile__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1); }
.alum-tile__media:hover img{ transform:scale(1.045); }
.alum-tile__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,8,9,0) 55%, rgba(7,8,9,.42)); }
.alum-tile__play{ position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#070809; background:rgba(255,255,255,.92); box-shadow:0 18px 44px -12px rgba(0,0,0,.7);
  opacity:.9; transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; }
.alum-tile__play svg{ margin-left:2px; }
.alum-tile__media:hover .alum-tile__play{ transform:translate(-50%,-50%) scale(1.12); opacity:1; }
.alum-tile__video{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:20px; border:1px solid rgba(var(--ink-rgb),.14); display:block; background:#000; }
.alum-tile__frame{ position:relative; width:100%; aspect-ratio:3/4; border-radius:20px; overflow:hidden; border:1px solid rgba(var(--ink-rgb),.14); background:#000; }
.alum-tile__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.alum-tile__name{ margin-top:14px; font-family:'Inter',system-ui,sans-serif; font-size:15px; font-weight:600; letter-spacing:.01em; color:var(--ink); }
/* empty data-video: nudge + hint so the demo never looks broken */
.alum-tile--todo .alum-tile__media{ animation:alum-nudge .5s ease; }
.alum-tile--todo .alum-tile__name::after{ content:" — paste the clip into data-video"; font-weight:400; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(var(--ink-rgb),.45); }
@keyframes alum-nudge{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
[data-theme="light"] .alum-tile__media{ box-shadow:0 18px 50px -30px rgba(20,22,30,.4); }