/*
Theme Name: DMM Ace — The Academy
Theme URI: https://theacademy.ai/
Author: Doctor Multimedia
Author URI: https://doctormultimedia.com/
Description: The Academy by Ace Rogers — a one-page, scroll-driven membership site. All copy, imagery and section content is editable through Carbon Fields (Ace Academy in the admin menu). Forms are rendered by Gravity Forms.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dmm-ace
Tags: one-page, custom-colors, custom-menu, full-width-template
*/

/* ============================================================================
   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: 0.8rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #9aa6ac;
  display: inline-flex;
  align-items: center;
  gap: 0.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: -0.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: 0.9rem;
  flex-wrap: wrap;
}
#ace-hero .btn {
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.82rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.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, 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, 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, 0.6),
    inset 0 -3px 9px rgba(0, 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, 0.4),
    inset 0 -2px 3px rgba(255, 255, 255, 0.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, 0.45));
  opacity: 0.9;
}
.medallion .rule {
  width: 46%;
  height: 2px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #82878c, transparent);
  opacity: 0.8;
}
.medallion .msg {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 0.96;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: #34383e;
  padding: 0 2px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 -1px 1px rgba(0, 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: 0.4;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes acad-logo-in {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.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% 0.06 258);
}

/* ============================================================================
   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 ============ */
/* Scroll is frozen while the overlay is up, otherwise the visitor can scroll past the hero and the
   intro animation fires off-screen the moment the overlay lifts. Deliberately NOT overflow:hidden —
   that removes the scrollbar and shifts the whole layout ~15px sideways when the lock releases
   (scrollbar-gutter can't fix it; the gutter is only reserved on a scrollable box). Blocking the
   input instead keeps the scrollbar, so releasing costs zero layout shift. */
html.is-loading {
  touch-action: none;
}
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s;
  /* FAILSAFE — the overlay is fixed + z-9999 and is normally torn down by app.js. If that script ever
     dies before initPreloader() runs, the site would be permanently white-screened. This is pure CSS,
     so it fires with JS broken; the handoff pollers read computed visibility, not just inline style. */
  animation: pre-failsafe 0.01s linear 7s forwards;
}
@keyframes pre-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .preloader {
    animation-delay: 0s;
  }
}
/* 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, 0.07);
  -webkit-mask: url("logo.svg") center/contain no-repeat;
  mask: url("logo.svg") center/contain no-repeat;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.preloader[data-done] .pre-logo {
  transform: scale(1.06);
} /* hands off into the hero instead of just blinking out */
.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% 0.2 230 / 0.5);
}
/* soft leading edge so the rise reads as liquid rather than a hard block sliding up */
.pre-logo__fill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 14px;
  background: linear-gradient(180deg, transparent, oklch(88% 0.12 230 / 0.55));
  filter: blur(5px);
  pointer-events: none;
}

/* ============ FILM GRAIN ============ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.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");
}

/* ============ 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 0.35s ease, padding 0.3s ease, border-color 0.35s ease,
    backdrop-filter 0.35s ease;
}
/* frosted bar once you scroll, so the nav stays legible over every section */
.nav--scrolled {
  background: rgba(8, 11, 16, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.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: 0.6rem 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}
/* icon uses the clean vector mark as a CSS mask (same technique as .pre-logo/.lockup__fallback below) so it
   picks up plain white — logo.svg itself is hardcoded black fill, a mask is how everything else in this
   file recolors it. */
.nav__mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  background: #fff;
  -webkit-mask: url("logo.svg") center/contain no-repeat;
  mask: url("logo.svg") center/contain no-repeat;
}
.nav__links {
  display: flex;
  gap: 30px;
  align-items: center;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.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: 0.1em;
  text-transform: uppercase;
  color: #070809;
  background: var(--grad);
  padding: 12px 20px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.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;
}
/* On a narrow single-column hero the logo sits directly BEHIND the body copy, and polished chrome is
   bright enough to fight the text for it. The three.js side also shrinks the mark on small viewports;
   this drops it the rest of the way to a watermark so the copy always wins. !important because both
   boot scripts write opacity as an inline style once their first frame is up. */
@media (max-width: 760px) {
  #bg {
    opacity: 0.4 !important;
  }
}

/* ============ PRESS STRIP ============ */
.press {
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.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: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}
.press__name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(16px, 1.9vw, 23px);
  color: rgba(var(--ink-rgb), 0.62);
  letter-spacing: -0.01em;
}
.press__name--nyp {
  font-weight: 700;
}
.press__name--cbs {
  letter-spacing: 0.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, 0.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, 0.3), transparent 9%),
    linear-gradient(0deg, rgba(7, 8, 9, 0.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: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.courses__title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(40px, 7vw, 104px);
  line-height: 0.92;
  color: var(--ink);
  letter-spacing: -0.04em;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease 0.08s,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.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), 0.7);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease 0.16s,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.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(0.16, 1, 0.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, 0.08);
  border-radius: 26px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 44px 90px -30px rgba(0, 0, 0, 0.72),
    0 8px 22px -8px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 120%;
  will-change: transform;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.3, 1), opacity 0.9s ease,
    filter 0.9s ease, box-shadow 0.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(0.92);
  opacity: 0.9;
  filter: brightness(0.58) saturate(0.85);
  z-index: 20;
}
.course-card[data-pos="2"] {
  transform: translateX(-13%) translateY(3.5%) rotate(-8deg) scale(0.92);
  opacity: 0.9;
  filter: brightness(0.58) saturate(0.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(0.78) saturate(0.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, 0.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), 0.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, 0.14);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 17px 34px;
  border-radius: 100px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease, background-color 0.35s ease;
}
.courses__btn span {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 0.35s ease;
}
.courses__btn:hover {
  background-color: #10243f;
  box-shadow: 0 24px 56px -18px rgba(var(--blue-rgb), 0.55),
    inset 0 0 0 1px rgba(var(--blue-rgb), 0.5);
}
.courses__btn:hover span {
  transform: scale(1.05);
  letter-spacing: 0.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, 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% 0.08 258);
}
.course-card--2 {
  --cg: oklch(60% 0.08 272);
}
.course-card--3 {
  --cg: oklch(62% 0.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: 0.5;
  transition: opacity 0.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 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 1s cubic-bezier(0.16, 1, 0.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% 0.17 200 / 0.55),
      transparent 60%
    ),
    radial-gradient(
      80% 75% at 8% 115%,
      oklch(52% 0.2 250 / 0.5),
      transparent 58%
    ),
    linear-gradient(158deg, #0f1928, var(--panel));
}
.course-card--2 .cc-img {
  background: radial-gradient(
      75% 60% at 18% 8%,
      oklch(66% 0.24 290 / 0.55),
      transparent 60%
    ),
    radial-gradient(
      80% 75% at 95% 115%,
      oklch(54% 0.22 250 / 0.45),
      transparent 58%
    ),
    linear-gradient(158deg, #161033, var(--panel));
}
.course-card--3 .cc-img {
  background: radial-gradient(
      75% 60% at 82% 8%,
      oklch(66% 0.26 322 / 0.55),
      transparent 60%
    ),
    radial-gradient(
      80% 75% at 8% 115%,
      oklch(58% 0.2 350 / 0.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, 0.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: 0.7;
  pointer-events: none;
}
.cc-num {
  position: absolute;
  top: -0.28em;
  right: 0.04em;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(150px, 17vw, 210px);
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.07);
  pointer-events: none;
}
.cc-tag {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(var(--ink-rgb), 0.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: 0.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;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.cc-p {
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.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: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.7);
  border: 1px solid rgba(var(--ink-rgb), 0.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: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
.cc-arrow {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: auto;
}

/* ============ FLIP / FOUNDER (stepped scroll-lock) ============ */
.flip {
  position: relative;
  z-index: 2;
  height: 145vh;
  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: 0.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: -0.035em;
}
.flip-p {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.7);
}
.flip-cta {
  display: inline-block;
  margin-top: 26px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #070809;
  background: var(--grad);
  padding: 15px 26px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.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, 0.85),
    0 0 60px -20px oklch(62% 0.23 230 / 0.5);
}
/* back face: NO rotateY(180) — some renderers cull by the face's own transform. The plane stays
   forward and the img is pre-mirrored instead; the parent's 180° turn un-mirrors it, and app.js
   swaps face visibility at the 90° edge. Correct + visible in every renderer. */
.flip-card__face--back {
  box-shadow: 0 40px 100px -24px rgba(0, 0, 0, 0.85),
    0 0 60px -20px oklch(60% 0.26 300 / 0.5);
}
.flip-card__face img {
  position: absolute;
  inset: 0;
  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: 290vh;
  background: transparent;
}
/* frosted glass: the fixed metallic logo stays visible (blurred) behind the deck as you scroll */
/* flex column (heading -> stage -> meter) at EVERY size — the old absolute layers keyed to vh
   collided with the heading whenever the active card (scale 1.07 about the deep fan pivot) climbed
   ~120px above its stage on mid-height screens. In flex the stage shrinks instead; overlap impossible. */
.deck__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: rgba(8, 11, 16, 0.5);
  -webkit-backdrop-filter: blur(34px) saturate(1.05);
  backdrop-filter: blur(34px) saturate(1.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(64px, 11vh, 104px) 5vw clamp(26px, 5vh, 56px);
}
.deck__head {
  position: relative;
  text-align: center;
  max-width: 100%;
  z-index: 50;
  pointer-events: none;
}
.deck__eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.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;
  letter-spacing: -0.03em;
}
/* top margin = headroom for the active card's rise above the stage (~120px on the deep desktop pivot) */
.deck__stagewrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(90px, 13vh, 150px) 0 clamp(16px, 3vh, 32px);
}
.deck__stage {
  position: relative;
  width: min(378px, 82vw);
  height: 100%;
  max-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% 0.14 235 / 0.35);
  border-radius: 20px;
  box-shadow: 0 40px 90px -28px rgba(0, 0, 0, 0.9),
    0 0 70px -36px oklch(62% 0.23 270 / 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.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: 0.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% 0.2 255 / 0.06);
  pointer-events: none;
  user-select: none;
}
.deck-card--joker .deck-card__rank {
  font-size: 19px;
  letter-spacing: 0.06em;
}
.deck-card--joker .deck-card__suit {
  font-size: 22px;
}
.deck-card--joker .deck-card__watermark {
  right: -2%;
  bottom: -4%;
  font-size: clamp(150px, 34vw, 250px);
  color: oklch(78% 0.17 95 / 0.09);
}
.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: 0.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;
  letter-spacing: -0.025em;
}
.deck-card__p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.62);
}
.deck__meter {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 300;
  pointer-events: none;
} /* above the fanned card bottoms (cards go up to z~260) */
.deck__count {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb), 0.5);
}
.deck__count b {
  color: var(--ink);
  font-weight: 400;
}
.deck__bartrack {
  width: 64px;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.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: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}

/* ============ MARQUEE ============ */
.marquee {
  overflow: hidden;
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.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), 0.9);
  padding-right: 40px;
  letter-spacing: -0.02em;
}
.marquee__star {
  color: oklch(70% 0.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: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.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;
  letter-spacing: -0.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% 0.18 240 / 0.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: -0.02em;
}
.why-item__p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.6);
}

/* ============ FINAL CTA ============ */
.cta-final {
  background: radial-gradient(
    130% 120% at 50% 130%,
    oklch(55% 0.22 285 / 0.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: 0.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: 0.92;
  letter-spacing: -0.045em;
}
.cta-final__p {
  margin: 0 auto 40px;
  max-width: 50ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.62);
}
.cta-final__btn {
  display: inline-block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #070809;
  background: var(--grad);
  padding: 19px 40px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.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), 0.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: -0.03em;
  margin-bottom: 20px;
}
.footer__brandp {
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.55);
}
.footer__eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.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: -0.03em;
  max-width: 16ch;
}
.signup {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid oklch(70% 0.14 235 / 0.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), 0.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% 0.18 200 / 0.4);
  border-radius: 16px;
  background: oklch(62% 0.2 230 / 0.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: -0.02em;
}
.signup__successp {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.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: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.55);
}
.field input {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: rgba(var(--ink-rgb), 0.06);
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  outline: none;
  transition: box-shadow 0.3s, background 0.3s;
}
.field input::placeholder {
  color: rgba(var(--ink-rgb), 0.4);
}
.field input:focus {
  background: rgba(var(--ink-rgb), 0.09);
  box-shadow: 0 0 0 2px rgba(var(--blue-rgb), 0.55) inset;
}
.form__submit {
  margin-top: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: #070809;
  background: var(--grad);
  border: none;
  cursor: pointer;
  padding: 16px 28px;
  border-radius: 100px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 40px -12px oklch(62% 0.23 250 / 0.7);
}
.form__note {
  margin: 2px 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.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: 0.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), 0.7);
  text-decoration: none;
}
.footer__list span {
  color: rgba(var(--ink-rgb), 0.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), 0.08);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.4);
}
.footer__bottom a {
  color: rgba(var(--ink-rgb), 0.4);
  text-decoration: none;
}
.footer__legal {
  display: flex;
  gap: 22px;
}

@media (max-width: 720px) {
  .nav__links {
    display: none;
  }

  /* hero copy sits over the 3D logo on phones — shadow it back to legible */
  #ace-hero h1 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 6px 28px rgba(0, 0, 0, 0.8);
  }
  #ace-hero .lead {
    color: #cfd8de;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 16px rgba(0, 0, 0, 0.85),
      0 0 34px rgba(0, 0, 0, 0.7);
  }
  #ace-hero .eyebrow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  }

  /* fanned course deck: tighten the splay + dim the back cards to silhouettes,
     so their rotated corners stop reading as cropped text slivers at the screen edges */
  .courses__deck {
    width: min(400px, 88vw);
  }
  .course-card[data-pos="1"] {
    transform: translateX(4%) translateY(2%) rotate(2.5deg) scale(0.95);
    opacity: 0.8;
    filter: brightness(0.22) saturate(0.4);
  }
  .course-card[data-pos="2"] {
    transform: translateX(-4%) translateY(2%) rotate(-2.5deg) scale(0.95);
    opacity: 0.8;
    filter: brightness(0.22) saturate(0.4);
  }

  /* FLIP: desktop puts panels left/right of the card — on phones the photo card sits
     top-center and the text panels swap underneath it (app.js switches its inline
     transforms to match at this same 720px breakpoint).
     The copy zone is bottom-anchored and its height varies per stage (B is the tall one),
     so app.js measures the TALLEST panel into --flip-copy; the card then eats every pixel
     between the nav and that zone instead of floating small in the middle of the pin. */
  .flip__pin {
    --flip-nav: 84px;
  }
  .flip-card {
    width: min(
      88vw,
      340px,
      calc((100vh - var(--flip-nav) - var(--flip-copy, 330px) - 20px) * 0.667)
    );
    top: calc(
      var(--flip-nav) + (100vh - var(--flip-nav) - var(--flip-copy, 330px)) / 2
    );
  }
  /* every panel fills the same reserved zone and centres its own copy inside it, so the short
     stages (A, C) don't leave the card hanging over a band of empty space */
  .flip-panel {
    width: min(480px, 88vw);
    left: 50%;
    top: auto;
    bottom: 0;
    height: var(--flip-copy, 330px);
    padding-bottom: clamp(14px, 3vh, 32px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .flip-h2 {
    font-size: clamp(24px, 6.6vw, 34px);
    margin-bottom: 10px;
  }
  .flip-p {
    font-size: 14px;
    line-height: 1.5;
  }
  .flip-eyebrow {
    margin-bottom: 10px;
    font-size: 11px;
  }
  .flip-cta {
    margin-top: 18px;
  }
  /* dot grid tracked the pin centre — follow the card up so it stays behind the photo */
  .flip-dots {
    width: min(72vmin, 420px);
    top: calc(
      var(--flip-nav) + (100vh - var(--flip-nav) - var(--flip-copy, 330px)) / 2
    );
  }
}

/* ============ 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, 0.3) 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, 0.18),
      transparent 72%
    ),
    linear-gradient(180deg, rgba(26, 36, 50, 0.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, 0.42),
    rgba(110, 80, 168, 0.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, 0.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: 0.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;
  letter-spacing: -0.02em;
}
.table-sec__p {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.66);
}
.table-sec__btn {
  display: inline-block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #070809;
  background: var(--grad);
  padding: 16px 30px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.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: -0.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: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.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: 0.26em;
  text-transform: uppercase;
  color: rgba(238, 242, 245, 0.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, 0.5);
  transition: color 0.3s ease;
}
.hero-press__names i {
  font-style: normal;
  letter-spacing: 0.14em;
}
.hero-press__names b:hover,
.hero-press__names i:hover {
  color: rgba(238, 242, 245, 0.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, 0.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: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #eef2f5;
  background: transparent;
  padding: 1rem 2.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.35s ease, box-shadow 0.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 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 0.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 0.35s ease;
}
.btn-glow:hover {
  background-color: rgba(var(--blue-rgb), 0.16);
  box-shadow: 0 14px 40px -12px rgba(var(--blue-rgb), 0.6);
}
.btn-glow:hover span {
  transform: scale(1.05);
  letter-spacing: 0.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), 0.08);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.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% 0.18 240 / 0.4);
}
.stat__n {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.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: 0.1em;
  text-transform: uppercase;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.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), 0.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: 0.26em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.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), 0.42);
  letter-spacing: -0.01em;
  transition: color 0.4s ease;
}
.stats__pressname:hover {
  color: rgba(var(--ink-rgb), 0.7);
}
.stats__pressname--cbs {
  font-style: normal;
  letter-spacing: 0.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: 0.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;
  letter-spacing: -0.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), 0.12);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.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), 0.04);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  transition: background-color 0.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), 0.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: -0.02em;
}
.tile__p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: rgba(var(--ink-rgb), 0.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), 0.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), 0.46);
  display: inline-flex;
  align-items: center;
  gap: 0.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), 0.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), 0.5);
}
.cc-tag {
  color: rgba(var(--ink-rgb), 0.6);
}
/* courses CTA sits on the light teal band → keep that eyebrow dark + its rule dark */
.courses .courses__eyebrow {
  color: rgba(var(--ink-rgb), 0.55);
  justify-content: center;
}
.courses .courses__eyebrow::before {
  background: rgba(var(--ink-rgb), 0.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), 0.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: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.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: 0.92;
  letter-spacing: -0.045em;
}
.bet__p {
  margin: 0 auto 12px;
  max-width: 52ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.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% 0.14 235 / 0.3);
  border-radius: 24px;
  padding: clamp(28px, 3.4vw, 48px);
  box-shadow: 0 60px 130px -50px rgba(0, 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), 0.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), 0.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), 0.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: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.65);
}
.bet__odds {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: oklch(72% 0.2 150);
  border: 1px solid oklch(72% 0.18 150 / 0.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: -0.04em;
  margin-bottom: 24px;
}
.bet__cur {
  font-size: 0.5em;
  vertical-align: 0.45em;
  color: rgba(var(--ink-rgb), 0.6);
  margin-right: 2px;
}
.bet__per {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.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), 0.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: 0.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), 0.7);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease, filter 0.35s ease;
}
.bet__btn span {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 0.35s ease;
}
.bet__btn:hover {
  box-shadow: 0 26px 64px -16px rgba(var(--blue-rgb), 0.85);
  filter: brightness(1.08);
}
.bet__btn:hover span {
  transform: scale(1.04);
  letter-spacing: 0.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: 0.06em;
  color: rgba(var(--ink-rgb), 0.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, 0.9);
  box-shadow: 0 22px 50px -18px rgba(8, 18, 22, 0.7);
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.55s ease;
}
.orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
} /* portrait headshots: keep the face in the circle */
.orb--mid {
  width: clamp(110px, 13vw, 166px);
  z-index: 3;
  border-color: #fff;
  box-shadow: 0 30px 66px -18px rgba(8, 18, 22, 0.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: -0.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), 0.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), 0.16);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(var(--ink-rgb), 0.6);
  text-decoration: none;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s,
    transform 0.3s;
}
.footer__social a:hover {
  border-color: rgba(var(--blue-rgb), 0.6);
  color: var(--ink);
  background: rgba(var(--blue-rgb), 0.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: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.4);
}
.footer__navcol a {
  font-size: 14.5px;
  color: rgba(var(--ink-rgb), 0.66);
  text-decoration: none;
  transition: color 0.25s ease, padding-left 0.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), 0.025);
  border: 1px solid rgba(var(--ink-rgb), 0.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: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.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), 0.06);
  border: 0;
  border-radius: 100px;
  padding: 13px 18px;
  outline: none;
  transition: box-shadow 0.3s, background-color 0.3s;
}
.form--inline input:focus {
  background: rgba(var(--ink-rgb), 0.09);
  box-shadow: 0 0 0 2px rgba(var(--blue-rgb), 0.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: 0.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: 0.86;
  letter-spacing: -0.04em;
  white-space: nowrap;
  text-align: center;
  user-select: none;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(var(--ink-rgb), 0.12),
    rgba(var(--ink-rgb), 0.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), 0.08);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.4);
}
.footer__bottom a {
  color: rgba(var(--ink-rgb), 0.4);
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer__bottom a:hover {
  color: rgba(var(--ink-rgb), 0.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
   ============================================================================ */
/* 300vh meant ~2 full screens of dead scroll for four numbers — the section read as a void you had to
   wade through. 200vh still leaves a full 100vh of travel to scrub the ring + reveals against. */
.lockup {
  position: relative;
  z-index: 2;
  height: 150vh;
  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: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.46);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  opacity: 0;
}
.lockup__eyebrow::before,
.lockup__eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: rgba(var(--ink-rgb), 0.32);
  flex: 0 0 auto;
}

.lockup__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
/* the connectors were faint enough to read as rendering artifacts rather than as deliberate structure */
.lockup__line {
  fill: none;
  stroke: rgba(var(--blue-rgb), 0.85);
  stroke-width: 1.7;
  filter: drop-shadow(0 0 5px rgba(126, 149, 255, 0.35));
}
.lockup__line-dot {
  fill: #dbe7ff;
  filter: drop-shadow(0 0 6px rgba(126, 149, 255, 0.7));
}

.lockup__center {
  position: relative;
  z-index: 2;
  width: clamp(180px, 25vw, 330px);
  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), 0.1);
  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, 0.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, 0.5));
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.lockup__nodes {
  display: contents;
}
/* Pulled well in from the edges. Previously the boxes sat ~120px off the viewport edge while the ring
   was only 280px wide in the middle, leaving a dead gulf between them — four stats scattered to the
   corners of an empty screen rather than one constellation that reads as a single composition. */
.lockup__node {
  position: absolute;
  z-index: 3;
  width: min(24vw, 280px);
  display: flex;
  flex-direction: column;
  opacity: 0;
}
.lockup__node--tl {
  left: clamp(24px, 10vw, 195px);
  top: clamp(74px, 15vh, 150px);
  align-items: flex-start;
  text-align: left;
}
.lockup__node--tr {
  right: clamp(24px, 10vw, 195px);
  top: clamp(74px, 15vh, 150px);
  align-items: flex-end;
  text-align: right;
}
.lockup__node--bl {
  left: clamp(24px, 10vw, 195px);
  bottom: clamp(74px, 15vh, 150px);
  align-items: flex-start;
  text-align: left;
}
.lockup__node--br {
  right: clamp(24px, 10vw, 195px);
  bottom: clamp(74px, 15vh, 150px);
  align-items: flex-end;
  text-align: right;
}
.lockup__idx {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin-bottom: 10px;
}
/* the figures are the point of the section — they were sized like captions */
.lockup__n {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(46px, 7vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}
.lockup__l {
  position: relative;
  margin-top: 20px;
  padding-top: 15px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(var(--ink-rgb), 0.62);
  max-width: 21ch;
}
/* hairline tying each figure to its label, so a corner reads as one designed unit instead of two stacked bits of text */
.lockup__l::before {
  content: "";
  position: absolute;
  top: 0;
  width: 30px;
  height: 1px;
  background: var(--accent, rgba(var(--blue-rgb), 0.85));
  opacity: 0.85;
}
.lockup__node--tl .lockup__l::before,
.lockup__node--bl .lockup__l::before {
  left: 0;
}
.lockup__node--tr .lockup__l::before,
.lockup__node--br .lockup__l::before {
  right: 0;
}

/* 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(88px, 12vh, 112px);
  } /* clear of the fixed nav, not tucked under its edge */
  /* Ring + numbers are ONE centred stack here, not a viewport-centred ring with the grid nailed to the
     bottom edge — that layout left a dead band under the eyebrow and pushed the numbers off the screen's
     bottom. The three.js logo follows the ring via __bg.offsetY, so the ring is free to move. */
  .lockup__pin {
    flex-direction: column;
    justify-content: center;
    padding: calc(clamp(88px, 12vh, 112px) + 42px) 18px clamp(26px, 5vh, 52px);
    gap: clamp(18px, 3.4vh, 34px);
  }
  .lockup__center {
    flex: 0 0 auto;
    width: min(70vw, 320px, 32vh);
  }
  .lockup__nodes {
    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(24px, 7.2vw, 38px);
    text-shadow: none;
  }
  .lockup__l {
    font-size: 10px;
    letter-spacing: 0.07em;
    line-height: 1.4;
    max-width: 18ch;
    margin-top: 8px;
    padding-top: 9px;
  }
  /* stacked 2x2 and centre-aligned here, so the hairline centres too instead of hugging an edge */
  .lockup__l::before {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 22px;
  }
}

/* ============================================================================
   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), 0.1);
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(var(--blue-rgb), 0.05),
    rgba(var(--blue-rgb), 0)
  );
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease, background 0.4s ease;
}
.suit:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--blue-rgb), 0.35);
  background: linear-gradient(
    180deg,
    rgba(var(--blue-rgb), 0.1),
    rgba(var(--blue-rgb), 0.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), 0.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: 0.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: -0.02em;
  color: var(--ink);
}
.suit__p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.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;
    padding-top: 48px;
  }
} /* padding-top clears the corner pip */

/* THE BET -> buy-in framing */
.bet__cardtop {
  margin-bottom: 14px;
}
.bet__odds {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(var(--blue-rgb), 0.4);
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(var(--blue-rgb), 0.08);
}
.bet__odds::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.9);
  flex: 0 0 auto;
}
.bet__buylabel {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.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), 0.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), 0.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), 0.45);
}

/* small screens: the flex-column pin layout above applies everywhere now — only sizes shrink here.
   (JS switches the fan pivot from 235% to 128% at these same thresholds, so the active card rises
   less and the stage headroom can be smaller.) */
@media (max-width: 900px), (max-height: 860px) {
  .deck__title {
    font-size: clamp(23px, 5.6vw, 38px);
    max-width: 24ch;
  }
  .deck__stagewrap {
    margin-top: clamp(50px, 9vh, 100px);
  }
  .deck__stage {
    width: min(300px, 78vw);
    max-height: min(468px, 100%);
  }
}

/* ============================================================================
   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: 0.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;
  letter-spacing: -0.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), 0.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), 0.1);
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(var(--blue-rgb), 0.05),
    rgba(var(--blue-rgb), 0)
  );
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease, background 0.4s ease;
}
.talk-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--blue-rgb), 0.35);
  background: linear-gradient(
    180deg,
    rgba(var(--blue-rgb), 0.1),
    rgba(var(--blue-rgb), 0.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), 0.3),
      transparent 62%
    ),
    repeating-linear-gradient(
      45deg,
      rgba(var(--ink-rgb), 0.05) 0 2px,
      transparent 2px 11px
    ),
    var(--panel2);
  border: 1px solid rgba(var(--ink-rgb), 0.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), 0.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, 0.6);
  outline: 6px solid rgba(var(--blue-rgb), 0.2);
  background: radial-gradient(
    circle at 32% 30%,
    rgba(var(--blue-rgb), 0.95),
    rgba(16, 24, 48, 0.96)
  );
  box-shadow: 0 14px 34px -12px rgba(var(--blue-rgb), 0.7);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.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), 0.85);
}
.talk-card.is-playing .talk-card__play {
  display: none;
}
.talk-card__play.is-nag {
  animation: talk-nag 0.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), 0.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: 0.02em;
}
.talk-card__who span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.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: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.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: 0.95;
  letter-spacing: -0.04em;
}
.alum__lede {
  margin: 0 auto;
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.6);
}
.alum__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  max-width: 1460px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .alum__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}

.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), 0.1);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(160deg, #111624, #0a0d13);
  box-shadow: 0 40px 90px -44px rgba(0, 0, 0, 0.75);
  transition: border-color 0.35s ease, box-shadow 0.5s ease;
}
.alum-tile__media:hover {
  border-color: rgba(var(--blue-rgb), 0.45);
  box-shadow: 0 60px 110px -46px rgba(0, 0, 0, 0.85);
}
.alum-tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.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, 0.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, 0.92);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.7);
  opacity: 0.9;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.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), 0.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), 0.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: 0.01em;
  color: var(--ink);
}
/* empty data-video: nudge + hint so the demo never looks broken */
.alum-tile--todo .alum-tile__media {
  animation: alum-nudge 0.5s ease;
}
.alum-tile--todo .alum-tile__name::after {
  content: " — paste the clip into data-video";
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.45);
}
@keyframes alum-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* ---- video lightbox (shared modal; opened by the alumni tiles) ---- */
.vlight {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.vlight[hidden] {
  display: none;
} /* author display:flex beats the UA [hidden] rule — without this the invisible overlay eats every click on the page */
.vlight.is-open {
  opacity: 1;
}
.vlight__back {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  cursor: pointer;
}
.vlight__box {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.vlight.is-open .vlight__box {
  transform: none;
}
/* portrait clips: height-capped, width follows the video's own ratio */
.vlight__media {
  display: flex;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 60px 140px -40px rgba(0, 0, 0, 0.9),
    0 0 80px -30px rgba(var(--blue-rgb), 0.5);
}
.vlight__media video {
  display: block;
  max-height: min(80vh, 860px);
  max-width: 92vw;
}
.vlight__media iframe {
  display: block;
  border: 0;
  width: min(92vw, 480px);
  aspect-ratio: 9/16;
  max-height: 80vh;
  background: #000;
}
.vlight__name {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.vlight__x {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #0a0d13;
  background: #eef2f5;
  border: 0;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.8);
  transition: transform 0.25s ease;
}
.vlight__x:hover {
  transform: scale(1.1) rotate(90deg);
}
@media (max-width: 560px) {
  .vlight__x {
    top: 8px;
    right: 8px;
  }
}

/* ============ THE SHOWDOWN — scroll-scrubbed logo-mask video reveal ============ */
.vreveal {
  position: relative;
  z-index: 2;
  height: 250vh;
  background: var(--bg);
}
.vreveal__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vh, 24px);
  padding: clamp(84px, 12vh, 110px) clamp(20px, 4vw, 56px)
    clamp(12px, 2.5vh, 24px);
  overflow: hidden;
}
.vreveal__head {
  text-align: center;
  max-width: 64ch;
}
.vreveal__eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.vreveal__title {
  margin: 0 0 14px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.vreveal__p {
  margin: 0 auto;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(var(--ink-rgb), 0.65);
}
.vreveal__stage {
  position: relative;
  flex: none;
  width: min(1240px, 96vw);
  height: clamp(280px, 46vh, 600px);
  border-radius: 22px;
  overflow: hidden;
  will-change: transform;
}
/* frame line that only appears once the video is fully revealed (a border during the mask phase would betray the rectangle) */
.vreveal__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  opacity: var(--vr-edge, 0);
}
.vreveal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
}
/* the cover is the page background with the logo punched OUT of it (mask-composite: exclude),
   so the video only shows through the mark; JS scales --vr-s until the punch-out swallows the frame */
.vreveal__cover {
  position: absolute;
  inset: -2px;
  background: var(--bg);
  --vr-s: 34vmin;
  -webkit-mask-image: linear-gradient(#fff 0 0),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjExMzQiIGhlaWdodD0iMTE1MyIgdmlld0JveD0iMCAwIDExMzQgMTE1MyI+PHBhdGggZD0iTTU2NyA0OCBMODEyIDU2MyBMMzIyIDU2MyBaIiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTI3MyA2NjYgTDg2MSA2NjYgTDk0NiA4NDUgQzg3MCA5MDAgNzEwIDg4MCA1OTggODE1IEM2NDAgOTMwIDcwMCAxMDEwIDc4NCAxMDYyIEwzNTAgMTA2MiBDNDM0IDEwMTAgNDk0IDkzMCA1MzYgODE1IEM0MjQgODgwIDI2NCA5MDAgMTg4IDg0NSBaIiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTM0MCAyNTMgTDExNCA3NjQgQzg0IDcwNiA3NCA2NDAgODIgNTgwIEM5MiA0NzAgMTYwIDMzMCAzNDAgMjUzIFoiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNNzk0IDI1MyBMMTAyMCA3NjQgQzEwNTAgNzA2IDEwNjAgNjQwIDEwNTIgNTgwIEMxMDQyIDQ3MCA5NzQgMzMwIDc5NCAyNTMgWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==");
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-size: 100% 100%, var(--vr-s) auto;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#fff 0 0),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjExMzQiIGhlaWdodD0iMTE1MyIgdmlld0JveD0iMCAwIDExMzQgMTE1MyI+PHBhdGggZD0iTTU2NyA0OCBMODEyIDU2MyBMMzIyIDU2MyBaIiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTI3MyA2NjYgTDg2MSA2NjYgTDk0NiA4NDUgQzg3MCA5MDAgNzEwIDg4MCA1OTggODE1IEM2NDAgOTMwIDcwMCAxMDEwIDc4NCAxMDYyIEwzNTAgMTA2MiBDNDM0IDEwMTAgNDk0IDkzMCA1MzYgODE1IEM0MjQgODgwIDI2NCA5MDAgMTg4IDg0NSBaIiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTM0MCAyNTMgTDExNCA3NjQgQzg0IDcwNiA3NCA2NDAgODIgNTgwIEM5MiA0NzAgMTYwIDMzMCAzNDAgMjUzIFoiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNNzk0IDI1MyBMMTAyMCA3NjQgQzEwNTAgNzA2IDEwNjAgNjQwIDEwNTIgNTgwIEMxMDQyIDQ3MCA5NzQgMzMwIDc5NCAyNTMgWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==");
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, center;
  mask-size: 100% 100%, var(--vr-s) auto;
  mask-composite: exclude;
}
/* in flow, right under the stage; just fades in once the video is fully revealed */
.vreveal__after {
  margin: 0 auto;
  max-width: 58ch;
  text-align: center;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.75);
  opacity: 0;
}
@media (max-width: 760px) {
  .vreveal {
    height: 210vh;
  }
  .vreveal__stage {
    height: clamp(200px, 34vh, 400px);
  }
  .vreveal__cover {
    --vr-s: 52vmin;
  }
}
span.orb.orb--side img {
  opacity: 0;
}

span.orb.orb--side {
  background: #fff;
  -webkit-mask: url(logo.svg) center / contain no-repeat;
  mask: url(logo.svg) center / contain no-repeat;
}

/* ---------- GRAVITY FORMS — the buy-in card and the footer signup ---------- */
.ace-gf {
  position: relative;
  z-index: 2;
  width: 100%;
}
.ace-gf .gform_wrapper,
.ace-gf .gform_wrapper.gravity-theme {
  margin: 0;
}
.ace-gf .gform_wrapper form {
  margin: 0;
}
.ace-gf .gform_heading,
.ace-gf .gform_required_legend,
.ace-gf .gfield_required {
  display: none;
}

.ace-gf .gform_wrapper .gform_fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  grid-template-columns: none;
}
.ace-gf .gform_wrapper .gfield {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}
.ace-gf .gform_wrapper .gfield_label,
.ace-gf .gform_wrapper .gform-field-label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(var(--ink-rgb), 0.55);
  margin: 0;
  padding: 0;
}
.ace-gf .gform_wrapper .ginput_container {
  margin: 0;
}

.ace-gf .gform_wrapper input[type="text"],
.ace-gf .gform_wrapper input[type="email"],
.ace-gf .gform_wrapper input[type="tel"],
.ace-gf .gform_wrapper input[type="url"],
.ace-gf .gform_wrapper input[type="number"],
.ace-gf .gform_wrapper select,
.ace-gf .gform_wrapper textarea {
  width: 100%;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: rgba(var(--ink-rgb), 0.06);
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  outline: none;
  transition: box-shadow 0.3s, background 0.3s;
}
.ace-gf .gform_wrapper textarea {
  min-height: 120px;
  resize: vertical;
}
.ace-gf .gform_wrapper input::placeholder,
.ace-gf .gform_wrapper textarea::placeholder {
  color: rgba(var(--ink-rgb), 0.4);
}
.ace-gf .gform_wrapper input:focus,
.ace-gf .gform_wrapper select:focus,
.ace-gf .gform_wrapper textarea:focus {
  background: rgba(var(--ink-rgb), 0.09);
  box-shadow: 0 0 0 2px rgba(var(--blue-rgb), 0.55) inset;
}
.ace-gf .gform_wrapper .gfield_description {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.4);
  padding: 0;
}

.ace-gf .gform_wrapper .gform_footer {
  margin: 6px 0 0;
  padding: 0;
}
.ace-gf .gform_wrapper .gform_button {
  width: 100%;
  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: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: #070809;
  background: var(--grad);
  border: none;
  cursor: pointer;
  padding: 18px 28px;
  border-radius: 100px;
  box-shadow: 0 18px 50px -16px rgba(var(--blue-rgb), 0.7);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease, filter 0.35s ease, letter-spacing 0.35s ease;
}
.ace-gf .gform_wrapper .gform_button:hover {
  box-shadow: 0 26px 64px -16px rgba(var(--blue-rgb), 0.85);
  filter: brightness(1.08);
  letter-spacing: 0.12em;
}
.ace-gf .gform_wrapper .gform_ajax_spinner {
  filter: invert(1);
  margin-left: 10px;
}

.ace-gf .gform_wrapper .gform_validation_errors {
  background: oklch(62% 0.2 25 / 0.12);
  border: 1px solid oklch(65% 0.2 25 / 0.45);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 14px;
  box-shadow: none;
}
.ace-gf .gform_wrapper .gform_validation_errors h2 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
  padding: 0;
}
.ace-gf .gform_wrapper .validation_message {
  background: none;
  border: 0;
  padding: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: oklch(72% 0.19 25);
}
.ace-gf .gform_wrapper .gfield_error input,
.ace-gf .gform_wrapper .gfield_error textarea {
  box-shadow: 0 0 0 2px oklch(65% 0.2 25 / 0.6) inset;
}

.ace-gf .gform_confirmation_message {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--blue);
  padding: 6px 2px;
}

.ace-gf--inline .gform_wrapper .gform_fields {
  gap: 10px;
}
.ace-gf--inline .gform_wrapper .gfield_label,
.ace-gf--inline .gform_wrapper .gform-field-label {
  color: rgba(var(--ink-rgb), 0.5);
}
.ace-gf--inline .gform_wrapper input[type="email"] {
  font-size: 14px;
  padding: 13px 16px;
}
.ace-gf--inline .gform_wrapper .gform_footer {
  margin-top: 0;
}
.ace-gf--inline .gform_wrapper .gform_button {
  font-size: 13px;
  padding: 13px 22px;
  white-space: nowrap;
  box-shadow: 0 12px 40px -12px oklch(62% 0.23 250 / 0.7);
}
@media (min-width: 520px) {
  .ace-gf--inline .gform_wrapper form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
  }
  .ace-gf--inline .gform_wrapper .gform-body {
    flex: 1;
    min-width: 0;
  }
  .ace-gf--inline .gform_wrapper .gform_footer {
    width: auto;
  }
  .ace-gf--inline .gform_wrapper .gform_button {
    width: auto;
  }
}

/* ---------- INNER PAGES (posts, pages, 404) ---------- */
.page {
  position: relative;
  z-index: 2;
  padding: calc(clamp(90px, 14vh, 150px) + 60px) 0 clamp(80px, 12vh, 140px);
}
body.home {
    padding: 0px;
}
.page__inner {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.page__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-optical-sizing: auto;
  margin: 0 0 24px;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.page__content {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(var(--ink-rgb), 0.78);
}
.page__content a {
  color: var(--blue);
}
.page__content h2,
.page__content h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  color: var(--ink);
  margin: 38px 0 14px;
  letter-spacing: -0.01em;
}
.page__content img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}
.page__article + .page__article {
  margin-top: 64px;
}

.ace-gf.ace-gf--join.bet__form button {
  background: var(--pColor);
  border-radius: 50px !important;
}

.ace-gf.ace-gf--join.bet__form input[type="submit"] {
  background: var(--grad) !important;
  border-radius: 50px !important;
  margin-top: 10px !important;
}

.bet__side--form {
  flex-wrap: wrap;
}

.signup input[type="submit"] {
    background: var(--grad) !important;
    border-radius: 50px !important;
}

body:not(home) .page {
    padding: 0px;
}

.tacad-price p {
    font-size: 14px;
    padding-top: 10px;
}