/* ============================================================
   THE PLAN LABS — Deep-blue theme
   Navy/blue gradient · white text · glossy blue · pill nav
   Palette: Oxford / Indigo / Honolulu / Carolina / Capri
   ============================================================ */

:root {
  --oxford:#001337; --indigo:#023F76; --honolulu:#016DA7; --carolina:#0199E0; --capri:#02C0FC; --tint:#DFF7FF;

  /* Deep-blue surfaces */
  --deep:     #04203F;   /* page base */
  --deep-2:   #001328;
  --void:     #001126;   /* footer */
  --surface:  #0B2A4D;   /* cards / panels */
  --elevated: #0E3560;
  --inset:    #071F3A;
  --border:   #1C4C7E;
  --hair:     rgba(255,255,255,.10);

  /* Accents */
  --teal-900:#012a4a; --teal-800:#023F76; --teal-700:#0a5a95;
  --teal-600:#016DA7; --teal-500:#0199E0; --teal-400:#0199E0;
  --teal-300:#35B4EE; --teal-200:#6FD0F5; --teal-100:#A8E6FB;
  --navy:#001337;

  --success:#22C993; --warning:#F5A623; --error:#FF5A67;

  /* Text on deep blue */
  --text:   #FFFFFF;
  --text-2: #B7CEE6;
  --muted:  #7C99BD;
  --text-dense:#cdddef;

  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --s-lg:24px; --s-2xl:64px; --s-3xl:96px;
  --maxw:1180px; --gutter:24px; --ease:cubic-bezier(.22,.61,.36,1);

  --shadow-sm:0 1px 2px rgba(0,10,25,.3), 0 2px 8px rgba(0,10,25,.25);
  --shadow:0 20px 55px rgba(0,10,25,.45), 0 2px 10px rgba(0,10,25,.35);
  --shadow-lg:0 30px 70px rgba(0,8,20,.55), 0 10px 26px rgba(0,10,25,.4);
  --glow-blue:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -8px 14px rgba(2,40,80,.35), 0 12px 28px rgba(1,120,200,.42);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight:500;
  color: var(--text-2);
  background: var(--deep);
  line-height: 1.65; font-size: 16px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--capri); text-decoration: none; transition: color .2s; }
a:hover { color: var(--tint); }
button, input, select, textarea { font-family:inherit; }
h1,h2,h3,h4 { font-family:"Montserrat",sans-serif; color:var(--text); line-height:1.06; letter-spacing:-.02em; margin:0 0 .5em; font-weight:500; }
p { margin:0 0 1rem; }
ul { margin:0; padding:0; }
::selection { background: rgba(1,153,224,.35); color:#fff; }

/* ---------- Deep-blue background ---------- */
.bg-field {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(1200px 820px at 12% -8%, rgba(1,109,167,.55), transparent 58%),
    radial-gradient(1000px 760px at 92% 12%, rgba(2,63,118,.55), transparent 60%),
    radial-gradient(1100px 900px at 70% 108%, rgba(1,19,55,.7), transparent 60%),
    linear-gradient(160deg, #083258 0%, #04203F 45%, #001328 100%);
}
.bg-glow {
  position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 38% at 28% 26%, rgba(2,192,252,.16), transparent 70%),
    radial-gradient(42% 42% at 72% 60%, rgba(1,153,224,.14), transparent 70%);
  filter: blur(34px);
  animation: glowShift 26s ease-in-out infinite alternate; will-change: transform, opacity;
}
@keyframes glowShift { 0%{transform:translate3d(-3%,-2%,0) scale(1);opacity:.75;} 50%{transform:translate3d(3%,2%,0) scale(1.08);opacity:1;} 100%{transform:translate3d(-2%,3%,0) scale(1.03);opacity:.85;} }
.bg-hex {
  position: fixed; inset:-8%; z-index:-2; pointer-events:none;
  background-image:url("../img/hexgrid-light.svg"); background-size:320px; opacity:.28;
  animation: hexDrift 46s linear infinite alternate; will-change:transform;
}
@keyframes hexDrift { from{transform:translate3d(0,0,0);} to{transform:translate3d(-34px,-22px,0);} }
.bg-cells { position: fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.bg-cells span {
  position:absolute; width:220px; height:250px;
  border:1px solid rgba(120,170,220,.14);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:linear-gradient(150deg, rgba(20,60,110,.34), rgba(8,30,60,.05));
  animation:cellFloat 30s var(--ease) infinite alternate;
}
.bg-cells span:nth-child(1){ left:5%; top:12%; transform:scale(1.3); animation-delay:-2s;}
.bg-cells span:nth-child(2){ left:72%; top:6%; transform:scale(1.8); animation-delay:-9s; opacity:.7;}
.bg-cells span:nth-child(3){ left:82%; top:60%; transform:scale(1.1); animation-delay:-15s;}
.bg-cells span:nth-child(4){ left:16%; top:68%; transform:scale(1.5); animation-delay:-5s; opacity:.6;}
.bg-cells span:nth-child(n+5){ display:none; }
@keyframes cellFloat { from{transform:translateY(0) rotate(0);} to{transform:translateY(-40px) rotate(5deg);} }
@media (prefers-reduced-motion: reduce){ .bg-glow,.bg-hex,.bg-cells span{animation:none !important;} }

/* ---------- Layout ---------- */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
section { padding:clamp(38px,4.6vw,56px) 0; position:relative; }
/* a page whose first section sits directly under the sticky header needs more headroom */
.first-section{ padding-top:clamp(52px,6.5vw,84px); }
.section-tight { padding:clamp(30px,3.6vw,44px) 0; }
.center { text-align:center; }
.grid { display:grid; gap:var(--s-lg); }
@media (min-width:760px){ .cols-2{grid-template-columns:repeat(2,1fr);} .cols-3{grid-template-columns:repeat(3,1fr);} .cols-4{grid-template-columns:repeat(4,1fr);} }

/* ---------- Type ---------- */
.display { font-family:"Montserrat",sans-serif; font-size:clamp(2.6rem,6vw,4.8rem); font-weight:300; letter-spacing:-.03em; color:#fff; }
h1.section-title, h2.section-title { font-family:"Montserrat",sans-serif; font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:400; letter-spacing:-.02em; color:#fff; }
/* label accents */
.team-card .muted strong, .card .muted strong { font-family:"Montserrat",sans-serif; font-weight:600; font-size:.78em; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:6px; }
/* rotating hero word — matches the heading/subhead font */
.hero .bp-word, #bpWord { font-family:"Montserrat",sans-serif; font-weight:700; }
.lead { font-family:"Montserrat",sans-serif; font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--text-2); max-width:62ch; font-weight:400; letter-spacing:-.005em; }
.muted { color:var(--muted); }
.measure{max-width:64ch;} .measure-center{max-width:64ch;margin-inline:auto;}
.grad-text { background:linear-gradient(100deg,var(--carolina),var(--capri)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-num { color:var(--capri); }
.accent-bar::after { content:none; }
.center .accent-bar::after, .accent-bar.center::after { margin-inline:auto; }

/* ---------- Buttons (glossy blue) ---------- */
.btn { display:inline-flex; align-items:center; gap:10px; font-family:"Montserrat",sans-serif; font-weight:600; font-size:15px; padding:14px 28px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s; white-space:nowrap; }
.btn-primary { background:linear-gradient(180deg,#33A8EA 0%,#0C7FC8 52%,#0A6BB2 100%); color:#fff; border-color:rgba(255,255,255,.18); box-shadow:var(--glow-blue); }
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 16px 34px rgba(1,140,225,.5); }
.btn-ghost { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.24); backdrop-filter:blur(6px); }
.btn-ghost:hover { background:rgba(255,255,255,.12); border-color:var(--carolina); transform:translateY(-2px); color:#fff; }
.btn-arrow::after { content:"→"; font-weight:700; }

/* ---------- Cards ---------- */
.card { background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid var(--hair); border-radius:var(--r-xl); padding:28px; box-shadow:var(--shadow); backdrop-filter:blur(6px); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.card:hover { transform:translateY(-4px); border-color:rgba(1,153,224,.55); box-shadow:var(--shadow-lg); }
.card h3 { font-size:1.2rem; color:#fff; }
.card .icon { width:46px; height:46px; border-radius:var(--r-md); margin-bottom:18px; display:grid; place-items:center; background:linear-gradient(135deg,var(--honolulu),var(--carolina)); color:#fff; font-weight:700; font-size:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.card.railed { border-left:3px solid var(--carolina); }

/* ---------- Header / pill nav ---------- */
.site-header { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(3,22,44,.72); border-bottom:1px solid transparent; transition:background .3s, border-color .3s; }
.site-header.scrolled { background:rgba(2,18,38,.9); border-color:var(--hair); }
.nav { display:flex; align-items:center; justify-content:space-between; height:74px; position:relative; }
.brand { display:flex; align-items:center; gap:11px; font-family:"Montserrat",sans-serif; font-weight:700; font-size:1rem; color:#fff; text-transform:uppercase; letter-spacing:.24em; }
.brand:hover { color:#fff; }
.brand-symbol { width:34px; height:34px; }
.brand-labs { color:var(--capri); font-weight:600; }
.nav-links { display:flex; align-items:center; gap:6px; list-style:none; background:rgba(255,255,255,.05); border:1px solid var(--hair); border-radius:999px; padding:6px; }
.nav-links a { color:#c3d6ec; font-weight:500; font-size:14px; font-family:"Montserrat",sans-serif; padding:9px 18px; border-radius:999px; transition:background .2s, color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { background:rgba(255,255,255,.12); color:#fff; }
.nav-cta { display:none; }
.cta-coin{ display:inline-flex; align-items:center; gap:8px; }
.cta-coin img{ width:22px; height:22px; flex:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.nav-toggle { display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span { width:24px; height:2px; background:#fff; border-radius:2px; transition:.25s; }
.nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:940px){ .nav-cta{display:flex;} .nav-links{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } }
.nav-toggle{ display:none; }
@media (max-width:939px){ .nav-links{ gap:2px; padding:4px; } .nav-links a{ font-size:13px; padding:8px 10px; } }
.mobile-menu { display:none; flex-direction:column; gap:4px; padding:12px var(--gutter) 24px; background:rgba(2,18,38,.98); border-bottom:1px solid var(--hair); backdrop-filter:blur(12px); }
.mobile-menu.show { display:flex; }
.mobile-menu a { padding:12px 6px; font-weight:600; color:var(--text-2); border-bottom:1px solid var(--hair); }
.mobile-menu .btn { margin-top:14px; justify-content:center; }
@media (min-width:940px){ .mobile-menu{ display:none !important; } }

/* ---------- Hero ---------- */
.hero { padding:clamp(76px,12vh,140px) 0 clamp(64px,10vh,116px); }
.hero .display { margin-bottom:20px; }
.hero .lead { margin:0 auto 30px; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

.hero-stage { position:relative; width:min(460px,86vw); height:min(360px,70vw); margin:8px auto; perspective:950px; display:grid; place-items:center; }
.hero-stage .glow-floor { position:absolute; bottom:16%; width:56%; height:80px; background:radial-gradient(50% 50% at 50% 50%, rgba(2,192,252,.38), transparent 72%); filter:blur(16px); }
.cube-wrap { position:absolute; width:clamp(140px,30vw,200px); height:clamp(140px,30vw,200px); transform-style:preserve-3d; animation:cubeOrbit 9s ease-in-out infinite; }
.cube { position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:cubeSpin 18s linear infinite; }
.face { position:absolute; inset:0; border:1px solid rgba(2,192,252,.4); background:linear-gradient(135deg, rgba(2,192,252,.14), rgba(1,109,167,.34)); box-shadow:inset 0 0 40px rgba(2,192,252,.18); backdrop-filter:blur(3px); }
.f1{transform:rotateY(0) translateZ(clamp(70px,15vw,100px));}
.f2{transform:rotateY(90deg) translateZ(clamp(70px,15vw,100px));}
.f3{transform:rotateY(180deg) translateZ(clamp(70px,15vw,100px));}
.f4{transform:rotateY(-90deg) translateZ(clamp(70px,15vw,100px));}
.f5{transform:rotateX(90deg) translateZ(clamp(70px,15vw,100px));}
.f6{transform:rotateX(-90deg) translateZ(clamp(70px,15vw,100px));}
.cube-ring { position:absolute; border-radius:999px; border:1px solid rgba(2,192,252,.24); }
.cube-ring.r1{ width:clamp(260px,42vw,400px); height:clamp(260px,42vw,400px); transform:rotateX(68deg) rotateZ(-18deg); }
.cube-ring.r2{ width:clamp(210px,34vw,320px); height:clamp(210px,34vw,320px); transform:rotateX(72deg) rotateZ(36deg); border-color:rgba(111,208,245,.3); }
@keyframes cubeSpin{ to{transform:rotateX(360deg) rotateY(360deg);} }
@keyframes cubeOrbit{ 0%,100%{transform:translate3d(-16px,8px,0) rotateX(-10deg) rotateY(18deg) scale(.96);} 50%{transform:translate3d(10px,-10px,0) rotateX(8deg) rotateY(-16deg) scale(1.05);} }
.hero-logo { position:absolute; z-index:4; width:min(190px,44vw); animation:logoEmerge 9s ease-in-out infinite; filter:drop-shadow(0 22px 54px rgba(2,192,252,.4)); }
@keyframes logoEmerge{ 0%,100%{transform:translateZ(20px) scale(.92); opacity:.85;} 45%,60%{transform:translateZ(90px) scale(1.05); opacity:1;} }
@media (prefers-reduced-motion: reduce){ .cube-wrap,.cube-ring,.hero-stage .glow-floor{display:none;} .hero-logo{animation:none; opacity:1; transform:none;} }

/* ---------- Stat strip ---------- */
.stat-strip { display:grid; gap:18px; }
@media (min-width:760px){ .stat-strip{grid-template-columns:repeat(3,1fr);} }
.stat-strip.four{grid-template-columns:repeat(2,1fr);}
@media (min-width:760px){ .stat-strip.four{grid-template-columns:repeat(4,1fr);} }
.stat-strip .stat{ text-align:center; padding:26px 14px; }
.stat-strip .num{ font-family:"Montserrat",sans-serif; font-size:clamp(2.3rem,4.4vw,3.3rem); font-weight:300; letter-spacing:-.01em; color:var(--capri); }
.stat-strip .lbl{ font-size:13px; color:var(--text-2); font-weight:500; margin-top:4px; }

/* trailing margins inside a section would stack on top of section padding and make the
   rhythm uneven — spacing between sections should come from the padding alone */
section > .wrap > *:last-child, section > .wrap > *:last-child > *:last-child { margin-bottom:0; }
.section-head { max-width:66ch; margin:0 auto clamp(26px,3.5vw,42px); text-align:center; }

/* ---------- checklists / pillars ---------- */
.is{border-left:3px solid var(--carolina);} .isnot{border-left:3px solid var(--error);}
.checklist{ list-style:none; display:grid; gap:12px; }
.checklist li{ padding-left:26px; position:relative; color:var(--text-2); }
.checklist.yes li::before{ content:"✓"; position:absolute; left:2px; color:var(--success); font-weight:700; }
.checklist.no li::before{ content:"✕"; position:absolute; left:2px; color:var(--error); font-weight:700; }
.pillars{display:grid; gap:16px;} .pillar{display:grid; gap:6px;}
.pillar .pn{ font-family:"Montserrat",sans-serif; color:var(--carolina); font-weight:700; font-size:13px; letter-spacing:.06em; }
.pillar h3{ font-size:1.15rem; margin:0; }

/* ---------- comparison table ---------- */
.compare-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--hair); }
table.compare{ width:100%; border-collapse:collapse; min-width:640px; font-family:"Montserrat",sans-serif; }
table.compare th, table.compare td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--hair); font-size:14px; }
table.compare thead th{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-2); font-weight:700; background:rgba(255,255,255,.04); }
table.compare td:first-child, table.compare th:first-child{ color:#fff; font-weight:600; }
table.compare .tpp-col{ background:rgba(1,153,224,.14); color:#fff; }
table.compare thead .tpp-col{ color:var(--capri); background:rgba(1,153,224,.22); }
table.compare tbody td{ color:var(--text-2); }
.mk-yes{color:var(--success); font-weight:700;} .mk-no{color:var(--error); font-weight:700;} .mk-mid{color:var(--muted); font-weight:700;}

/* ---------- badges / pills ---------- */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid; font-family:"Montserrat",sans-serif; }
.badge-neutral{ color:var(--capri); border-color:rgba(2,192,252,.4); background:rgba(1,153,224,.12); }
.badge-yes{ color:var(--success); border-color:rgba(34,201,147,.4); background:rgba(34,201,147,.1); }
.badge-warn{ color:var(--warning); border-color:rgba(245,166,35,.4); background:rgba(245,166,35,.1); }
.badge-no{ color:var(--error); border-color:rgba(255,90,103,.4); background:rgba(255,90,103,.1); }
.pill{ display:inline-block; padding:6px 13px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(1,153,224,.14); color:var(--capri); border:1px solid rgba(2,192,252,.3); }
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- Team ---------- */
.team-card{ text-align:center; }
.team-card .avatar{ width:92px; height:92px; margin:0 auto 18px; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background:linear-gradient(135deg,var(--honolulu),var(--carolina)); display:grid; place-items:center; color:#fff; font-family:"Montserrat"; font-size:26px; font-weight:700; overflow:hidden; }
.team-card .avatar img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
/* pre-shaped hex portraits (Team Hex set) — already cropped and transparent,
   so no clip-path, no gradient plate, and keep their own portrait ratio */
.team-card .avatar.hex{ width:104px; height:auto; clip-path:none; background:none; overflow:visible; display:block; margin:0 auto 14px; }
.team-card .avatar.hex img{ width:100%; height:auto; object-fit:contain; display:block; }
.team-card .role{ color:var(--capri); font-weight:600; font-size:13px; margin-bottom:8px; }
.hexface{ width:104px; height:104px; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background:linear-gradient(135deg,var(--honolulu),var(--carolina)); display:grid; place-items:center; color:#fff; font-family:"Montserrat"; font-weight:700; font-size:24px; overflow:hidden; }
.hexface img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

/* ---------- Roadmap ---------- */
.roadmap{ display:grid; gap:22px; }
@media (min-width:860px){ .roadmap{grid-template-columns:repeat(3,1fr);} }
.phase .tag{ display:inline-block; font-family:"Montserrat"; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:16px; }
.phase.now .tag{ background:linear-gradient(180deg,#33A8EA,#0C7FC8); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.phase.next .tag{ background:rgba(1,153,224,.14); color:var(--capri); border:1px solid rgba(2,192,252,.3); }
.phase.later .tag{ background:rgba(255,255,255,.05); color:var(--muted); border:1px solid var(--hair); }
.phase ul{ list-style:none; display:grid; gap:10px; }
.phase li{ padding-left:26px; position:relative; color:var(--text-2); }
.phase li::before{ content:"›"; position:absolute; left:6px; color:var(--carolina); font-weight:800; }

/* ---------- Contrast band ---------- */
.band-dark{ background:linear-gradient(150deg, rgba(1,109,167,.22), rgba(0,19,55,.5)); border:1px solid var(--hair); border-radius:var(--r-xl); padding:60px 48px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.band-dark::before{ content:""; position:absolute; inset:0; opacity:.3; background-image:url("../img/hexgrid-light.svg"); background-size:220px; }
.band-dark > *{ position:relative; }
.band-dark h2{ color:#fff; }
.band-dark .lead{ color:#c3d6ec; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:820px; margin-inline:auto; display:grid; gap:12px; }
.faq-item{ background:rgba(255,255,255,.04); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; font-family:"Montserrat",sans-serif; font-weight:600; font-size:1.02rem; color:#fff; padding:20px 24px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq-q .chev{ transition:transform .25s var(--ease); color:var(--carolina); flex:none; }
.faq-item.open .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a p{ padding:0 24px 20px; margin:0; color:var(--text-2); }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-card{ background:linear-gradient(150deg,#016DA7,#0199E0); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-xl); padding:60px 32px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.cta-card::before{ content:""; position:absolute; inset:0; opacity:.28; background-image:url("../img/hexgrid-light.svg"); background-size:200px; }
.cta-card > *{ position:relative; }
.cta-card h2{ color:#fff; }
.cta-card p{ color:#eaf7ff; }
.cta-card .btn-primary{ background:#fff; color:var(--honolulu); box-shadow:0 10px 26px rgba(0,20,45,.35); }
.cta-card .btn-primary:hover{ background:var(--tint); color:var(--honolulu); }
.cta-card .btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.5); }

/* ---------- Forms ---------- */
.form{ display:grid; gap:16px; max-width:480px; margin-inline:auto; text-align:left; }
.form label{ font-weight:600; font-size:13px; color:#fff; font-family:"Montserrat"; }
.form input,.form select,.form textarea{ width:100%; font-family:"Montserrat",sans-serif; font-size:15px; padding:13px 15px; border:1px solid var(--hair); border-radius:var(--r-md); background:rgba(255,255,255,.05); color:#fff; transition:border-color .2s, box-shadow .2s; }
.form input::placeholder,.form textarea::placeholder{ color:var(--muted); }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--carolina); box-shadow:0 0 0 4px rgba(1,153,224,.2); }
.form select option{ color:#000; }
.form .btn{ justify-content:center; }
/* Legal microcopy: 14px floor per 506(c) formatting rules. The top rule and margin are Drew's
   Sep 3 note — "it's not quite breathing there yet, just down two lines, so the legal disclaimer
   starts here." It stays visible (Alice: "from the compliance side it should be visible"); this is
   spacing only. */
.form-note{ font-size:14px; color:var(--text-2); margin-top:22px; padding-top:18px; border-top:1px solid var(--hair); }

/* ---------- Notes ---------- */
.note-box{ background:rgba(255,255,255,.04); border:1px solid var(--hair); border-left:3px solid var(--carolina); padding:14px 18px; border-radius:var(--r-md); font-size:14px; color:var(--text-2); }
.note-box.legal{ border-left-color:var(--warning); }
.placeholder{ outline:1px dashed var(--carolina); outline-offset:2px; border-radius:3px; }
.breadcrumb{ font-size:12px; color:var(--muted); margin-bottom:18px; }
.breadcrumb a{ color:var(--muted); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--void); color:#9fb6cc; padding:clamp(40px,5vw,60px) 0 30px; margin-top:0; border-top:1px solid var(--hair); }
.site-footer a{ color:#c3d4e6; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; gap:36px; }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.site-footer .brand{ color:#fff; margin-bottom:14px; }
.site-footer .brand-labs{ color:var(--capri); }
.site-footer p{ color:#8fa7bf; }
.site-footer h4{ color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:16px; font-family:"Montserrat"; }
.site-footer ul{ list-style:none; display:grid; gap:10px; font-size:14px; }
.footer-bottom{ border-top:1px solid var(--hair); margin-top:48px; padding-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12px; color:#7089a0; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

.page-hero{ padding:clamp(44px,5.5vw,68px) 0 clamp(6px,1.2vw,14px); text-align:center; }
.page-hero .display{ font-size:clamp(2.1rem,4.4vw,3.4rem); }

/* ---------- Press / media marquee ---------- */
.press-strip{ padding:30px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:rgba(255,255,255,.02); overflow:hidden; }
.press-strip .plabel{ text-align:center; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:56px; width:max-content; animation:marquee 34s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
.marquee-track span{ font-family:"Montserrat",sans-serif; font-weight:600; font-size:clamp(15px,2vw,21px); color:#9fb6cc; white-space:nowrap; letter-spacing:.01em; }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; justify-content:center; flex-wrap:wrap; } }

/* ===== Education: program cards (badge art + single CTA) ===== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.program-card{ display:flex; flex-direction:column; }
.program-art{ margin:-28px -28px 18px; border-radius:var(--r-xl) var(--r-xl) 0 0; overflow:hidden; border-bottom:1px solid rgba(2,192,252,.18);
  position:relative; aspect-ratio:360/200; display:flex; align-items:center; justify-content:center; padding:16px 22px;
  background:#071F3A radial-gradient(60% 65% at 50% 55%, rgba(2,192,252,.16), rgba(2,192,252,0) 70%); }
.program-art svg{ display:block; width:100%; height:auto; }
/* the supplied course logos are transparent wordmarks of differing proportions —
   contain keeps each one whole and centred on the banner */
.program-logo{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.program-card .pill{ align-self:flex-start; }
.program-card .btn{ margin-top:auto; width:100%; justify-content:center; }
.program-card p.muted{ margin:12px 0 20px; }

/* Per-card join links (Drew's Sep 4 mockup). Centred plain links pinned to the bottom of the
   card, not buttons — the card already carries a logo and a pill, and four more filled buttons
   turned the row into a wall of blue. `margin-top:auto` keeps them on one line across the row
   however long each description runs. The Bullion Bot has no cart, so it gets the same slot as
   static text instead of a dead link. */
.program-card .card-cta{ margin-top:auto; padding-top:6px; text-align:center; font-weight:600;
  font-size:14.5px; line-height:22px; min-height:22px; color:var(--capri); text-decoration:none;
  transition:color .2s; }
.program-card a.card-cta:hover{ color:var(--tint); text-decoration:underline; }
.program-card .card-cta-soon{ color:var(--muted); font-weight:700; font-size:12px;
  line-height:22px; letter-spacing:.14em; text-transform:uppercase; cursor:default; }
/* Touch: the links were 28px tall on a phone, under the 44px minimum. */
@media (max-width:719px){
  .program-card .card-cta{ padding-top:11px; padding-bottom:11px; min-height:44px; }
}

/* "More" band — deliberately different from the three program cards */
.more-band{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:26px; padding:26px 32px; border-radius:var(--r-xl); border:1px solid rgba(2,192,252,.4); background:linear-gradient(100deg, rgba(1,109,167,.32), rgba(2,192,252,.07) 65%, rgba(1,109,167,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.more-band > div{ flex:1 1 380px; }
.more-band h3{ color:var(--capri); font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }
.more-band p{ margin:0; }
.more-band .btn{ flex:0 0 auto; }

/* Mission */
.mission{ text-align:center; max-width:860px; margin-inline:auto; }
/* The quote block under the statement was removed (Alice, Sep 2), so the statement no longer needs
   a gap beneath it to clear anything. Its .mission-quote / .mission-face rules went with it — the
   two clickfunnels exports that still show a quote carry their own inline copies. */
.mission-solo .mission-statement{ margin-bottom:0; }
.mission-statement{ font-size:clamp(1.15rem, 2.2vw, 1.45rem); line-height:1.6; color:rgba(255,255,255,.92); margin:18px 0 30px; }

/* ===== Animated community line (word-by-word) ===== */
.anim-words .w{ display:inline-block; opacity:0; transform:translateY(14px); filter:blur(4px); transition:opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }
.anim-words.go .w{ opacity:1; transform:none; filter:none; }
.anim-words .ty{ font-style:italic; color:var(--capri); }
.anim-words.go .ty{ animation:ty-glow 2.4s ease 1.5s 1; }
@keyframes ty-glow{ 0%,100%{ text-shadow:none; } 50%{ text-shadow:0 0 18px rgba(2,192,252,.85); } }
@media (prefers-reduced-motion: reduce){ .anim-words .w{ opacity:1 !important; transform:none !important; filter:none !important; transition:none; } .anim-words.go .ty{ animation:none; } }

/* ===== Footer Legal dropdown ===== */
.legal-dd details{ position:relative; }
.legal-dd summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; color:#c3d4e6; }
.legal-dd summary:hover{ color:#fff; }
.legal-dd summary::-webkit-details-marker{ display:none; }
.legal-menu{ position:absolute; bottom:calc(100% + 10px); left:0; min-width:210px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:8px; box-shadow:0 12px 30px rgba(0,10,25,.55); z-index:60; display:grid; gap:2px; }
.legal-menu a{ display:block; padding:8px 12px; border-radius:8px; font-size:13.5px; }
.legal-menu a:hover{ background:rgba(2,192,252,.1); color:var(--capri); }

/* ===== Gloss sweep on stat cards ===== */
.stat-strip .stat{ position:relative; overflow:hidden; }
.stat-strip .stat::after{
  content:""; position:absolute; top:-10%; bottom:-10%; left:-80%;
  width:55%; transform:skewX(-20deg); pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(223,247,255,.15) 45%, rgba(2,192,252,.10) 55%, rgba(255,255,255,0) 100%);
}
.stat-strip.in .stat::after{ animation:gloss-sweep 1.1s ease-out .35s both; }
.stat-strip.in .stat:nth-child(2)::after{ animation-delay:.55s; }
.stat-strip.in .stat:nth-child(3)::after{ animation-delay:.75s; }
.stat-strip .stat:hover::after{ animation:gloss-sweep .9s ease-out both; }
@keyframes gloss-sweep{ from{ left:-80%; } to{ left:135%; } }
@media (prefers-reduced-motion: reduce){ .stat-strip .stat::after{ animation:none !important; opacity:0; } }


/* LinkedIn corner icon on team cards */
.team-card{ position:relative; }
.li-corner{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--capri); background:rgba(1,153,224,.14); border:1px solid rgba(2,192,252,.32); transition:background .2s, color .2s, border-color .2s, transform .2s; z-index:2; }
.li-corner:hover{ background:var(--carolina); color:#fff; border-color:transparent; transform:translateY(-2px); }

/* Investor Brief mini-form */
.brief-form{ display:grid; gap:10px; margin-top:8px; text-align:left; }
.brief-form input{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--hair); background:rgba(255,255,255,.06); color:#fff; font:inherit; font-size:14px; }
.brief-form input::placeholder{ color:var(--muted); }
.brief-form input:focus{ outline:none; border-color:var(--carolina); box-shadow:0 0 0 3px rgba(1,153,224,.2); }
.brief-form .btn{ width:100%; }
.brief-form .form-status{ font-size:13px; min-height:1.2em; margin:0; text-align:center; }

/* ---------- Brand wordmark: always THE PLAN in caps ---------- */
.wl-mark, .pg-mark, .inv-mark { text-transform: uppercase; letter-spacing: .14em; }

/* ===== Rule 506(c) securities legend (counsel-mandated: min 10pt, adequate contrast, never collapsed) ===== */
.sec-legend { max-width:900px; margin:0 auto 22px; text-align:left; }
.sec-legend h5 { font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; letter-spacing:.05em; color:var(--text-2); margin:0 0 12px; }
.sec-legend p { font-size:14px; line-height:1.7; color:var(--text-2); margin:0 0 12px; max-width:none; }
.footer-bottom .sec-legend { border-top:1px solid rgba(183,206,230,.16); padding-top:18px; margin-bottom:18px; }
.legal-persistent { display:block; font-size:14px; color:var(--carolina); margin:0 0 12px; }

/* Trailer / promo video frame */
.video-frame{ position:relative; width:100%; max-width:760px; margin:34px auto 0; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid rgba(2,192,252,.35); background:linear-gradient(160deg,#0B2A4D,#071F3A); box-shadow:0 20px 50px rgba(0,19,55,.5), inset 0 1px 0 rgba(255,255,255,.06); display:grid; place-items:center; }
.video-frame::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, rgba(2,192,252,.14), transparent 60%); }
.video-frame iframe, .video-frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:2; }
.video-frame .vf-play{ position:relative; z-index:1; display:grid; justify-items:center; gap:14px; text-align:center; }
.video-frame .vf-btn{ width:66px; height:66px; border-radius:50%; background:linear-gradient(180deg,#33A8EA,#0A6BB2); display:grid; place-items:center; box-shadow:0 10px 30px rgba(1,140,225,.5), inset 0 1px 0 rgba(255,255,255,.4); transition:transform .25s var(--ease); }
.video-frame:hover .vf-btn{ transform:scale(1.06); }
.video-frame .vf-btn svg{ margin-left:4px; }
.video-frame .vf-cap{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); }

/* ===== Program cards — sleek staggered entrance + premium hover ===== */
.program-card{ transition: transform .38s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); will-change: transform; }
.program-card.reveal.in{ animation: prog-in .7s cubic-bezier(.22,.61,.36,1) backwards; }
@keyframes prog-in{ from{ opacity:0; transform: translateY(36px) scale(.955); } to{ opacity:1; transform:none; } }
#programs .program-card:nth-child(1).in{ animation-delay:.04s; }
#programs .program-card:nth-child(2).in{ animation-delay:.14s; }
#programs .program-card:nth-child(3).in{ animation-delay:.24s; }
#programs .program-card:nth-child(4).in{ animation-delay:.34s; }

/* Hover: lift + glowing ring */
.program-card:hover{ transform: translateY(-8px); border-color: rgba(2,192,252,.6); box-shadow: 0 28px 64px rgba(0,19,55,.55), 0 0 0 1px rgba(2,192,252,.28), 0 0 40px rgba(2,192,252,.16); }

/* Badge: subtle zoom + a light sheen that sweeps across on hover */
.program-art svg, .program-logo{ transition: transform .55s var(--ease); transform-origin: center; }
.program-card:hover .program-art svg, .program-card:hover .program-logo{ transform: scale(1.045); }
.program-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.16) 49%, transparent 66%); transform: translateX(-130%); transition: transform .85s var(--ease); pointer-events:none; }
.program-card:hover .program-art::after{ transform: translateX(130%); }

/* ===== "What is THE PLAN App?" steps — same entrance language as the program
   cards, plus an accent rule that grows out of the step number ===== */
.step-card{ transition: transform .38s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); will-change: transform; }
.step-card.reveal.in{ animation: step-in .72s cubic-bezier(.22,.61,.36,1) backwards; }
@keyframes step-in{ from{ opacity:0; transform: translateY(30px) scale(.97); } to{ opacity:1; transform:none; } }
.step-grid .step-card:nth-child(1).in{ animation-delay:.05s; }
.step-grid .step-card:nth-child(2).in{ animation-delay:.17s; }
.step-grid .step-card:nth-child(3).in{ animation-delay:.29s; }

.step-card .step-n{ position:relative; margin-bottom:14px; transition: opacity .4s var(--ease), text-shadow .4s var(--ease); }
.step-card .step-n::after{ content:""; position:absolute; left:0; bottom:-7px; height:2px; width:0; border-radius:2px;
  background:linear-gradient(90deg, var(--capri), rgba(2,192,252,0)); transition: width .6s var(--ease) .12s; }
.step-card.reveal.in .step-n::after{ width:34px; }

.step-card:hover{ transform: translateY(-6px); border-color: rgba(2,192,252,.5);
  box-shadow: 0 24px 54px rgba(0,19,55,.5), 0 0 0 1px rgba(2,192,252,.22), 0 0 34px rgba(2,192,252,.12); }
.step-card:hover .step-n{ opacity:1; text-shadow:0 0 22px rgba(2,192,252,.45); }
.step-card:hover .step-n::after{ width:64px; }

@media (prefers-reduced-motion: reduce){
  .step-card.reveal.in{ animation:none; }
  .step-card:hover{ transform:none; }
  .step-card .step-n::after{ transition:none; }
}

/* Pill + CTA lift a touch with the card */
.program-card:hover .pill{ border-color: rgba(2,192,252,.55); background: rgba(1,153,224,.2); }

@media (prefers-reduced-motion: reduce){
  .program-card.reveal.in{ animation:none; }
  .program-card:hover{ transform:none; }
  .program-art::after{ display:none; }
  .program-card:hover .program-art svg, .program-card:hover .program-logo{ transform:none; }
}

/* ===== Programs: compact 4-up row ===== */
@media (min-width:760px) and (max-width:1039px){ #programs .grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
#programs .program-card{ padding:20px; }
#programs .program-art{ margin:-20px -20px 14px; }
#programs .program-card .pill{ font-size:11px; padding:5px 11px; }
#programs .program-card p.muted{ font-size:.875rem; line-height:1.5; margin:10px 0 16px; }
#programs .program-card .btn{ padding:11px 15px; font-size:13px; }

/* ===== Cursor-follow text shine ===== */
.cursor-glow{ --cg-base: rgba(228,242,255,.82); --cg-hi:#ffffff;
  background: radial-gradient(circle 230px at var(--cgx,-400px) var(--cgy,50%), var(--cg-hi), var(--cg-base) 62%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.cursor-glow.cg-dim{ --cg-base: var(--text-2); --cg-hi:#EAF7FF; }
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .cursor-glow{ -webkit-text-fill-color:currentColor; color:inherit; background:none; } }

/* ===== Program badge titles: letter-by-letter reveal (left-to-right across the row) ===== */
text.bt .bl{ opacity:0; }
#programs.lettering text.bt .bl{ animation: bl-in .4s cubic-bezier(.22,.61,.36,1) both; animation-delay: var(--bd, 0ms); }
@keyframes bl-in{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ text.bt .bl{ opacity:1; } #programs.lettering text.bt .bl{ animation:none; } }

/* ===== Token page: video frames, token split, tick list (Aug 27 call) ===== */
.token-hero{ padding-top:clamp(40px,5vw,60px); }
.token-hero h1{ margin-bottom:10px; }
.v-frame{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  width:100%; max-width:880px; margin:30px auto 0; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  border:1px solid var(--hair); background:radial-gradient(120% 120% at 50% 0%, rgba(2,192,252,.13), rgba(4,32,63,.92)); }
video.v-frame, iframe.v-frame{ display:block; aspect-ratio:16/9; background:#04203F; border:0; }
.v-frame .play-badge{ width:78px; height:78px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#016DA7,#02C0FC); box-shadow:0 12px 40px rgba(2,192,252,.35); }
.v-frame .play-badge svg{ margin-left:5px; }
.v-frame .v-note{ margin:0; color:var(--text-2); font-size:.95rem; text-align:center; padding:0 18px; }
.doc-cta[aria-disabled="true"]{ opacity:.55; pointer-events:none; }
.doc-soon{ font-size:12px; color:var(--muted); margin-top:8px; }

.token-split{ display:grid; gap:var(--s-lg); align-items:center; }
/* Sep 3 call (Drew): "there's a lot of space here... you'd want the text to start somewhere
   here" — the coin caps at 220px but sat in a .85fr column, so the copy started a third of the
   way across. Roughly a 3/9 split of the 12-column grid now, which pulls the copy left without
   shrinking the coin. */
@media (min-width:860px){ .token-split{ grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr); gap:40px; } }
.token-split-art{ display:flex; justify-content:center; }
.token-coin{ width:min(220px,46vw); height:auto; animation:coinFloat 6s ease-in-out infinite;
  filter:drop-shadow(0 22px 54px rgba(2,192,252,.30)); }
@keyframes coinFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@media (prefers-reduced-motion:reduce){ .token-coin{ animation:none; } }

.tick-list{ list-style:none; padding:0; margin:18px 0 16px; display:grid; gap:11px; }
.tick-list li{ position:relative; padding-left:30px; color:var(--text-2); line-height:1.55; }
.tick-list li::before{ content:""; position:absolute; left:0; top:.45em; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(135deg,#016DA7,#02C0FC);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat; }

.ask-line{ text-align:center; margin-top:22px; color:var(--text-2); }
.ask-line a{ color:var(--capri); font-weight:600; }

/* header wrap: below 720px the nav drops to its own row so brand + CTA + links all stay visible
   (Aug 27 call: nav must not collapse into a hamburger) */
.brand{ white-space:nowrap; }
@media (max-width:719px){
  /* NB: padding must keep the horizontal gutter. This was `padding:12px 0 10px`, whose shorthand
     zeroed .wrap's padding-inline, so below 720px the brand sat flush against the left edge and the
     header CTA against the right. Only became obvious once the CTA label grew to "Early Bird
     Access" and reached the edge. */
  .nav{ flex-wrap:wrap; row-gap:0; height:auto; padding:12px var(--gutter) 10px; }
  /* the flex child is the <nav> wrapper, not the inner <ul> — order must go here */
  .nav > nav[aria-label="Primary"]{ order:3; width:100%; margin:10px 0 2px; }
  .nav-links{ width:100%; justify-content:center; position:static !important; transform:none !important; }
  .nav-cta{ order:2; margin-left:auto; }
  /* Header-only. These were written as bare `.cta-coin` inside this header-layout block, so below
     720px they also shrank the hero's THEPLAN Token button and the journey's Express my interest —
     which is why the hero's two CTAs came out different heights on a phone (50px vs 55px). */
  .nav-cta.cta-coin{ padding-left:10px; padding-right:15px; font-size:12.5px; gap:6px; }
  .nav-cta.cta-coin img{ width:17px; height:17px; }
}
@media (max-width:400px){
  .brand{ font-size:15px; }
  .brand-symbol{ width:28px; height:28px; }
  .nav-cta.cta-coin{ font-size:11.5px; padding-left:9px; padding-right:12px; }  /* header only — see the 719px note */
}

/* ===== Whitepaper-derived messaging sections (Aug 28) ===== */
/* red-x variant of the tick list, for problem statements */
.tick-list.tick-x li::before{
  background:linear-gradient(135deg,#E84855,#ff8a8a);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat; }
.tick-list.tick-x{ margin:0; }

.pull-line{ max-width:22ch; margin:34px auto 0; text-align:center;
  font-family:"Montserrat",sans-serif; font-weight:700; line-height:1.25; letter-spacing:-.01em;
  font-size:clamp(1.25rem,2.6vw,1.75rem);
  background:linear-gradient(100deg,var(--carolina),var(--capri));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

.step-n{ display:block; font-family:"Montserrat",sans-serif; font-size:34px; font-weight:300; line-height:1;
  letter-spacing:-.01em; color:var(--capri); opacity:.85; margin-bottom:8px; }

/* ===== Whitepaper type system (Aug 28): Montserrat only —
   Light 300 for display + fine print, Regular 400 for section heads, Medium 500 for body ===== */
.sec-legend p, .sec-legend, .doc-soon, .muted[style*=".85em"], .muted[style*=".9em"]{ font-weight:300; }
.ff-label{ font-family:"Montserrat",sans-serif !important; font-weight:600 !important; font-size:.78em !important;
  letter-spacing:.12em; text-transform:uppercase; }
.pull-line{ font-weight:300 !important; }

/* ===== Roundtable sits inside the conversion section, under the two actions ===== */
.roundtable-block{ margin-top:44px; padding-top:36px; border-top:1px solid var(--hair); }
.rt-title{ text-align:center; font-family:"Montserrat",sans-serif; font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.1rem); letter-spacing:-.02em; color:#fff; margin:0 0 10px; }
.roundtable-block .v-frame{ margin-top:26px; }
/* Stand-in while the roundtable has not been recorded — a line, not a dead player. */
.rt-soon{ text-align:center; color:var(--text-2); font-size:.95rem; margin:0; }
.doc-pair{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ===== Footer social row ===== */
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; border:1px solid var(--hair); color:#9fb6cc; background:rgba(255,255,255,.04);
  transition:color .2s, border-color .2s, background .2s, transform .2s; }
.social-row a:hover{ color:#fff; border-color:rgba(2,192,252,.55); background:rgba(2,192,252,.14); transform:translateY(-2px); }

/* ============================================================
   Sep 2 call (Drew) — token page restructure + design cleanup
   ============================================================ */

/* Mobile-only line break: kills orphans on small screens without
   forcing a break on desktop. Usage: <br class="br-sm"> */
.br-sm{ display:none; }
@media (max-width:600px){ .br-sm{ display:inline; } }

/* --- Token hero: coin + title on one line --- */
.ea-title{ display:flex; align-items:center; justify-content:center; gap:clamp(12px,2vw,20px); flex-wrap:wrap; }
.ea-title-coin{ width:clamp(46px,6.4vw,72px); height:auto; filter:drop-shadow(0 10px 26px rgba(2,192,252,.42)); }
@media (max-width:520px){ .ea-title{ flex-direction:column; gap:10px; } }

/* --- "Be part of what we're building": the invite panel + the journey rail --- */
.ea-heading{ white-space:nowrap; }          /* Drew: this heading must fit on one line */
@media (max-width:620px){ .ea-heading{ white-space:normal; } }

/* ONE shared measure for the panel and the rail below it. The section used to mix three
   alignment systems — page-centred heading, 900px-centred bird/copy row, page-centred buttons —
   so no edge lined up with any other (Alice: "it's really messy"). */
:root{ --ea-measure:860px; }

/* No border, background or box (Alice: "remove the block border"). The measure is what was doing
   the alignment work, not the panel — keeping it means the bird and copy still line up edge-to-edge
   with the journey rail below, and dropping the horizontal padding actually tightens that: the
   bird's left edge now sits exactly on the rail's left edge. */
.ea-invite{ max-width:var(--ea-measure); margin:0 auto; padding:clamp(4px,0.8vw,10px) 0;
  display:grid; gap:clamp(10px,2vw,26px); align-items:center; justify-items:center; text-align:center; }
@media (min-width:680px){
  /* bird gets only the width it needs; the copy takes the rest and left-aligns to one edge */
  .ea-invite{ grid-template-columns:minmax(0,auto) minmax(0,1fr); text-align:left; justify-items:start; }
}
.ea-art{ display:flex; justify-content:center; }
.ea-bird{ width:clamp(140px,17vw,196px); height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,10,25,.5)) drop-shadow(0 6px 26px rgba(2,192,252,.18));
  animation:birdBob 6.5s ease-in-out infinite; }
@keyframes birdBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@media (prefers-reduced-motion:reduce){ .ea-bird{ animation:none; } }
.ea-copy .lead{ margin:0; }

.countdown{ display:inline-flex; align-items:baseline; gap:8px; margin:14px 0 0; padding:8px 18px; border-radius:999px;
  border:1px solid rgba(2,192,252,.38); background:rgba(1,153,224,.12); font-size:14px; font-weight:500; color:var(--text-2); }
.countdown .cd-num{ font-family:"Montserrat",sans-serif; font-weight:600; font-size:1.4em; line-height:1; color:var(--capri); }

/* --- Your next steps: a rail, learn → learn → act, left to right --- */
.ns-title{ text-align:center; font-family:"Montserrat",sans-serif; font-weight:400; letter-spacing:-.01em;
  font-size:clamp(1.3rem,2.5vw,1.7rem); color:#fff; margin:clamp(30px,4vw,46px) 0 clamp(20px,2.6vw,30px); }

.journey{ list-style:none; padding:0; margin:0 auto; max-width:var(--ea-measure); position:relative;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
/* the rail, drawn between the first and last step's node centres (each column is a third wide,
   so its node sits at 16.66%) */
.journey::before{ content:""; position:absolute; top:18px; left:16.66%; right:16.66%; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(2,192,252,.16), rgba(2,192,252,.42) 55%, rgba(2,192,252,.85));
  pointer-events:none; }

.jstep{ position:relative; display:grid; grid-template-areas:"num" "btn" "fine"; justify-items:center; gap:16px; text-align:center; }
/* Lock the three columns to shared rows so the nodes, the buttons and the fine print each sit on
   one line across the rail. Without this every step is its own grid, and the accent button — taller
   because its coin icon is 22px against the download glyph's 17px — pulled its row out of step. */
@media (min-width:661px){
  .journey{ grid-template-rows:auto auto auto; }
  .jstep{ grid-row:span 3; grid-template-rows:subgrid; grid-template-areas:"num" "btn" "fine"; }
}
.jstep .btn{ min-height:52px; }
.jnum{ grid-area:num; width:37px; height:37px; border-radius:50%; display:grid; place-items:center;
  font-family:"Montserrat",sans-serif; font-weight:600; font-size:14px; color:var(--tint);
  background:var(--deep); border:1.5px solid rgba(2,192,252,.42); position:relative; z-index:1; }
.jstep-act .jnum{ color:#fff; border-color:transparent;
  background:linear-gradient(180deg,#0199E0,#016DA7);
  box-shadow:0 0 0 4px rgba(2,192,252,.13), 0 8px 22px rgba(1,140,225,.38); }
.jstep .btn{ grid-area:btn; width:100%; justify-content:center; }
.jfine{ grid-area:fine; font-size:12px; font-weight:300; line-height:1.5; color:var(--muted); max-width:24ch; margin-top:-4px; }
/* the compliance line carries more contrast than a "coming soon" note */
.jfine-legal{ font-size:12.5px; color:var(--text-2); }

/* Mobile: the rail turns vertical and the steps read number-then-action down the left edge */
@media (max-width:660px){
  .journey{ grid-template-columns:minmax(0,1fr); gap:20px; max-width:420px; }
  /* One rail spanning the container overshot past the last node, because the last step's row is
     its fine print, not its node. Drawn per step instead: each step but the last connects its own
     node down to the next one, so the rail always ends exactly on step 3. */
  .journey::before{ display:none; }
  /* Centre-to-centre, not edge-to-edge: the node is vertically centred in a row as tall as the
     button, so its offset isn't a fixed 37px from the step's top. Centre-to-centre always equals
     (step height + row gap) because every step's node sits at the same offset — so this stays
     exact even if a step's fine print wraps to two lines. The nodes are opaque with z-index:1,
     so the line simply passes behind them. */
  .jstep:not(:last-child)::after{ content:""; position:absolute; left:17.5px; top:27.5px; width:2px;
    height:calc(100% + 20px);
    background:linear-gradient(180deg, rgba(2,192,252,.28), rgba(2,192,252,.6));
    border-radius:2px; pointer-events:none; z-index:0; }
  .jstep{ grid-template-areas:"num btn" ".   fine"; grid-template-columns:37px minmax(0,1fr);
    justify-items:stretch; align-items:center; text-align:left; gap:8px 14px; }
  .jfine{ max-width:none; margin-top:0; }
}

.ns-act{ box-shadow:var(--glow-blue), 0 0 34px rgba(2,192,252,.22); }
.btn-dark{ background:linear-gradient(180deg,#0B2A4D,#071F3A); color:#DFF7FF; border:1px solid rgba(2,192,252,.32); box-shadow:var(--shadow-sm); }
.btn-dark:hover{ color:#fff; border-color:rgba(2,192,252,.62); }
.btn-dl svg{ flex:none; opacity:.85; }

/* --- Drew: knock the sheen sweeps and hover glows back. Subtle reads as premium. --- */
.program-art::after{ background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.045) 50%, transparent 66%); }
/* Alice, Sep 7: "make the shine here a bit less". The knock-back above only ever reset the
   box-shadow — the hovered card still lit a `rgba(2,192,252,.6)` ring from the base rule, which
   is the bright edge that read as shine next to its three unhovered neighbours. Border and glow
   now come down together, and the lift does the work of showing which card you are on. */
.program-card:hover{ border-color:rgba(2,192,252,.3);
  box-shadow:0 18px 40px rgba(0,19,55,.44), 0 0 0 1px rgba(2,192,252,.1), 0 0 14px rgba(2,192,252,.045); }
.program-card:hover .program-art{ border-bottom-color:rgba(2,192,252,.16); }
.step-card:hover{ box-shadow:0 20px 44px rgba(0,19,55,.46), 0 0 0 1px rgba(2,192,252,.15), 0 0 20px rgba(2,192,252,.07); }
.step-card:hover .step-n{ text-shadow:0 0 14px rgba(2,192,252,.3); }

/* The "available soon" deck/white-paper buttons sit on a dark ground, so the generic
   opacity:.55 disabled treatment made them near-invisible. Dashed border + muted text
   reads as "not yet" while staying legible. */
.jstep .doc-cta[aria-disabled="true"]{ opacity:1; color:#8FB0CC; border-style:dashed; border-color:rgba(2,192,252,.3);
  background:linear-gradient(180deg,#0A2645,#06182F); box-shadow:none; }

/* Some section titles need more than the 66ch measure to stay on one line.
   Drew, Sep 2: a heading that wraps to leave one orphaned word looks unfinished —
   let the row run full width instead. The block below the title keeps the measure. */
.section-head.head-wide{ max-width:none; }
.section-head.head-wide > .lead{ max-width:66ch; margin-inline:auto; }

/* Orphan control (Drew, Sep 2: "you don't have orphans"). `balance` evens out heading
   line lengths; `pretty` stops a single word being pushed onto its own last line in body
   copy. Both degrade to normal wrapping where unsupported. */
h1, h2, h3, .display, .section-title, .ns-title, .rt-title{ text-wrap:balance; }
p.lead, .measure-center, .mission-statement, .card p.muted{ text-wrap:pretty; }

/* Slim "more" band: the explanatory paragraph went (Drew, Sep 2 — it said nothing), so the
   band is now just a line and a button. Centre it and drop the uppercase kicker treatment
   the old heading used, which reads as a label rather than a sentence. */
.more-band-slim{ justify-content:center; gap:18px; padding:20px 28px; }
.more-band-slim h3{ margin:0; color:#fff; font-family:"Montserrat",sans-serif; font-weight:400;
  font-size:1.15rem; letter-spacing:-.01em; text-transform:none; }
@media (max-width:560px){ .more-band-slim{ flex-direction:column; text-align:center; } }

/* Anchored sections landed with their heading tucked under the sticky header, which is why
   token.html#how felt like it dropped you "halfway down the page" with no context (Drew, Sep 2). */
section[id]{ scroll-margin-top:96px; }

/* ===== Homepage hero mark — the promo film's title card, rebuilt in CSS =====
   Drew, Sep 2: "just a logo, just that, hovering… it does need some little animation."
   Alice: take the animation from the very beginning of the film and run it nonstop.
   The film's opening beat: the hex mark steady, the inner cube glowing, anamorphic light
   streaks running left and right, a soft bloom behind. It plays as an arrival, then holds.
   Animations only start once .in lands (the reveal observer), so the sequence is seen. */
/* No overflow:hidden here — it would crop the bloom into a band. The streaks are sized in vw
   instead, so both halves together always stay inside the viewport and never cause a scrollbar. */
/* It now sits between the headline and the subline (Alice swapped it below the H1), so it needs
   air on both sides rather than only underneath. */
.hero-mark{ position:relative; display:grid; place-items:center; width:100%;
  padding-block:clamp(10px,1.6vw,20px);
  margin:clamp(6px,1.4vw,16px) auto clamp(8px,1.6vw,18px); }

/* the mark itself */
.hero-mark img{ position:relative; z-index:2; width:clamp(96px,13vw,168px); height:auto;
  filter:drop-shadow(0 0 26px rgba(2,192,252,.34)); }
.hero-mark.in img{
  animation:markArrive 1.05s cubic-bezier(.2,.7,.25,1) both,
            markFloat 7s ease-in-out 1.05s infinite,
            markBreathe 5s ease-in-out 1.05s infinite; }
@keyframes markArrive{
  0%   { opacity:0; transform:scale(.78); }
  60%  { opacity:1; transform:scale(1.05); }
  100% { opacity:1; transform:scale(1); } }
@keyframes markFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-12px) scale(1.012); } }
@keyframes markBreathe{
  0%,100%{ filter:drop-shadow(0 0 26px rgba(2,192,252,.34)); }
  50%    { filter:drop-shadow(0 0 42px rgba(2,192,252,.52)); } }

/* the bloom behind the mark — the film's glow swell */
.hm-bloom{ position:absolute; z-index:1; width:clamp(200px,24vw,340px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(47,192,240,.34), rgba(2,192,252,.12) 42%, rgba(2,192,252,0) 70%);
  opacity:0; pointer-events:none; }
.hero-mark.in .hm-bloom{
  animation:bloomFlash 1.5s cubic-bezier(.2,.7,.25,1) both,
            bloomPulse 5s ease-in-out 1.5s infinite; }
@keyframes bloomFlash{
  0%  { opacity:0; transform:scale(.45); }
  45% { opacity:.85; transform:scale(1.18); }
  100%{ opacity:.42; transform:scale(1); } }
@keyframes bloomPulse{ 0%,100%{ opacity:.42; transform:scale(1); } 50%{ opacity:.62; transform:scale(1.07); } }

/* the anamorphic streaks — two thin horizontal flares off the inner cube, as in the film */
.hm-rays{ position:absolute; z-index:1; inset:0; display:grid; place-items:center; pointer-events:none; }
.hm-rays::before, .hm-rays::after{ content:""; position:absolute; height:1.5px; width:min(520px,40vw);
  border-radius:2px; opacity:0; transform:scaleX(0); }
.hm-rays::before{ transform-origin:right center; right:50%;
  background:linear-gradient(270deg, rgba(160,235,255,.95), rgba(2,192,252,.45) 28%, rgba(2,192,252,0)); }
.hm-rays::after{ transform-origin:left center; left:50%;
  background:linear-gradient(90deg, rgba(160,235,255,.95), rgba(2,192,252,.45) 28%, rgba(2,192,252,0)); }
.hero-mark.in .hm-rays::before, .hero-mark.in .hm-rays::after{
  animation:rayOut 1.35s cubic-bezier(.16,.8,.24,1) .18s both,
            rayShimmer 6s ease-in-out 1.53s infinite; }
@keyframes rayOut{
  0%  { opacity:0;  transform:scaleX(0); }
  55% { opacity:.95; transform:scaleX(1.06); }
  100%{ opacity:.5;  transform:scaleX(1); } }
@keyframes rayShimmer{ 0%,100%{ opacity:.5; } 50%{ opacity:.72; } }

/* A second, shorter pair sitting tight to the cube — the bright core of the flare. */
.hero-mark::before, .hero-mark::after{ content:""; position:absolute; top:50%; z-index:1;
  height:1px; width:clamp(70px,10vw,130px); opacity:0; transform:translateY(-50%) scaleX(0); }
.hero-mark::before{ right:50%; transform-origin:right center;
  background:linear-gradient(270deg, rgba(234,251,255,1), rgba(160,235,255,0)); }
.hero-mark::after{ left:50%; transform-origin:left center;
  background:linear-gradient(90deg, rgba(234,251,255,1), rgba(160,235,255,0)); }
.hero-mark.in::before, .hero-mark.in::after{
  animation:rayOut 1s cubic-bezier(.16,.8,.24,1) .1s both,
            rayShimmer 4.5s ease-in-out 1.1s infinite; }

@media (prefers-reduced-motion:reduce){
  .hero-mark.in img, .hero-mark.in .hm-bloom,
  .hero-mark.in .hm-rays::before, .hero-mark.in .hm-rays::after,
  .hero-mark.in::before, .hero-mark.in::after{ animation:none; }
  .hero-mark.in .hm-bloom{ opacity:.42; }
  .hero-mark.in .hm-rays::before, .hero-mark.in .hm-rays::after,
  .hero-mark.in::before, .hero-mark.in::after{ opacity:.5; transform:scaleX(1); }
  .hero-mark.in::before, .hero-mark.in::after{ transform:translateY(-50%) scaleX(1); } }

/* ===== Header CTA visibility — make the intent explicit =====
   `.nav-cta{display:none}` + a `min-width:940px` override was written to keep the CTA on desktop
   only, but adding the coin icon (`.cta-coin{display:inline-flex}`, declared later at equal
   specificity) silently overrode it, so the button has in fact been showing at every width. That
   accident is why Drew saw it eating space on mobile (Sep 2).
   Resolution: it stays visible at all widths — Alice wants a call to action in the header, Drew
   de-escalated ("it's not the big problem at the moment"), his real objection was that it dropped
   cold traffic into the form, and it now points at token.html instead. Below 720px the header
   wraps to two rows (brand + CTA, then the nav pills) so nothing is cramped, and the button is
   already shrunk. Declared here so it reads as a decision rather than a leftover. */
/* `.nav-cta` (not `.nav-cta.cta-coin`) so this covers education.html too — its header CTA is
   "Join THE PLAN" with no coin icon, so it was missing the class and silently disappearing below
   940px while every other page kept its button. */
.nav-cta{ display:inline-flex; }

/* Header CTA sized to the nav (Alice, Sep 3: "you should make this button smaller"). It was
   inheriting `.btn`'s full 15px / 14px-28px pill and standing 55px tall next to a 40px nav-pill row
   in a 74px bar — it read as a page CTA that had wandered into the header. Now it matches the pill
   row's height, so brand / nav / CTA sit on one visual line. The .cta-coin padding override still
   applies underneath; only the sizing is restated here. */
.nav-cta{ font-size:13.5px; padding:10px 18px 10px 12px; gap:8px; }
.nav-cta img{ width:18px; height:18px; }
@media (max-width:939px){ .nav-cta{ font-size:12.5px; padding:9px 15px 9px 10px; gap:7px; }
  .nav-cta img{ width:17px; height:17px; } }

/* At the narrow end the header row is brand + "Early Bird Access", and that label is long.
   Tighten the button (not the label — Alice asked for those exact words) so the two stay on one
   row down to ~360px instead of the CTA wrapping onto a line of its own. */
@media (max-width:430px){
  .nav-cta{ font-size:11.5px; padding:10px 13px; gap:5px; letter-spacing:0; }
  .nav-cta img{ width:17px; height:17px; }
}
@media (max-width:360px){
  .brand{ font-size:13.5px; letter-spacing:.16em; gap:8px; }
  .nav-cta{ font-size:11px; padding:9px 11px; }
}

/* ===== Team cards — shared by team.html and token.html =====
   The portrait, name, role and LinkedIn icon stay put; only the lower text panel changes —
   professional bio → personal "Did you know". Sep 2 call (Drew): the whole card used to rotate on
   hover, which made the LinkedIn icon impossible to click. Nothing moves above the text now.
   These rules lived in a <style> block inside team.html. They are here because Alice asked for the
   token page to carry the same descriptions as the team page (Sep 2), and one copy is the only way
   the two stay identical. */
.flip-card{ position:relative; background:none; border:0; box-shadow:none; padding:0; backdrop-filter:none; outline:none; }
.flip-card:hover{ transform:none; box-shadow:none; border-color:transparent; }
/* sized to the tallest front face across breakpoints (measured max 482px) + buffer */
.flip-inner{ position:relative; width:100%; min-height:500px; }
/* NB: no backdrop-filter inside these panels — near-solid backgrounds instead. */
.flip-face{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:26px 24px; border-radius:var(--r-xl); border:1px solid var(--hair);
  background:linear-gradient(180deg, #0c2a4c, #071d38);
  box-shadow:var(--shadow); overflow:hidden;
  transition:border-color .25s, box-shadow .25s; }
.flip-card:hover .flip-face{ border-color:rgba(1,153,224,.55); box-shadow:var(--shadow-lg); }
.flip-face .muted{ font-size:.94rem; line-height:1.55; }
.flip-front .flip-hint{ margin-top:auto; padding-top:14px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); opacity:.75; display:inline-flex; align-items:center; gap:6px; transition:opacity .25s; }
.flip-front .flip-hint svg{ width:13px; height:13px; }
.flip-card:hover .flip-hint{ opacity:0; }
/* the bio text is the only thing that swaps — fade it as the panel comes up, so you never
   see a half-covered sentence behind the panel */
.flip-front p.muted{ transition:opacity .55s var(--ease); }
.flip-card:hover .flip-front p.muted,
.flip-card:focus-visible .flip-front p.muted,
.flip-card.is-flipped .flip-front p.muted{ opacity:0; }

/* The back panel covers only the lower half of the card, so the portrait, the name, the role
   and — the point of the change — the LinkedIn icon in the top corner stay visible and clickable. */
.flip-back{ inset:auto 0 0 0; min-height:47%; justify-content:center; gap:6px;
  border-radius:0 0 var(--r-xl) var(--r-xl);
  background:linear-gradient(180deg, rgba(15,58,99,.98), rgba(8,36,63,.99));
  border-color:rgba(2,192,252,.28); border-top-width:1px;
  box-shadow:0 -14px 30px rgba(0,10,25,.45);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.flip-card:hover .flip-back,
.flip-card:focus-visible .flip-back,
.flip-card.is-flipped .flip-back{ opacity:1; transform:none; }
.flip-back h3{ display:none; }        /* the name is already on the front, unmoved */
.flip-back .ff-label{ display:block; font-family:"Montserrat",sans-serif; font-weight:700; font-size:1.5em; color:var(--capri); line-height:1; margin-bottom:6px; }
@media (prefers-reduced-motion: reduce){ .flip-back{ transition:none; } }

/* The "More of the team" card has no personal fact, so it stays a plain card — but it sits in the
   same row as two flip cards, so it matches their height and centres its content instead of
   leaving a tall empty gap underneath. */
.team-card-more{ min-height:500px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.team-card-more .avatar{ margin-bottom:18px; }

/* ===== Buttons with a leading icon: balance the padding =====
   `.btn` is padding:14px 28px, which is right for a text-only pill but wrong once an icon leads:
   the icon ended up 28px from the left edge with only an 8px gap to its label, so it read as
   floating in dead space rather than belonging to the text. Tighter on the icon side, and a slightly
   wider icon→label gap, puts the optical weight back in balance. */
.cta-coin{ padding-left:16px; padding-right:24px; gap:10px; }

/* ===== Homepage hero: both CTAs the same size =====
   An inline grid with equal auto columns sizes both tracks to the wider button's content, so
   "THEPLAN Token" and "Courses" match instead of hugging their own labels. */
.page-hero .hero-cta{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:14px; justify-items:stretch; }
.page-hero .hero-cta .btn{ width:100%; justify-content:center; }
@media (max-width:420px){
  .page-hero .hero-cta{ display:grid; grid-auto-flow:row; grid-auto-columns:auto; }
}

/* The Did-you-know panel briefly carried an injected "Back" control. Removed at Alice's request,
   and the `.is-closed` flag went with it — it existed only so Back could beat `:hover`. The panel
   is back to plain hover / tap / focus, and closes when the pointer leaves the card. */

/* A short row in a fixed-column grid (two mentors in a three-up) sits off to one side with an
   empty slot beside it. Centring the row keeps the cards their normal width but puts them under
   the middle of the heading. */
@media (min-width:760px){
  .grid.grid-centred{ justify-content:center; }
  .grid.cols-3.grid-centred{ grid-template-columns:repeat(2, minmax(0, 340px)); }
}

/* ===== "What is THE PLAN App?" — the product screen, rebuilt =====
   Alice asked for the app prototype out of "PRESALE The Plan Protocol.key" in place of the three
   step cards. That deck holds exactly one app screen — New Plan — and it carries four things this
   page cannot: 60/40/20/0% fee-discount tiers, a 53-token deposit, an $800 capital figure and a
   HISTORICAL APR readout. Compliance rules 3 and 4 keep fee percentages, minimums and yield
   figures out of public copy, and this page carries the 506(c) offering — so the screen is rebuilt
   with the mechanics intact and the numbers out. Palette sampled from the original:
   #F8FAFB page, #275CE0 accent, #111724 ink, #DEE4ED hairline, #0F141E footer. */
.app-row{ display:grid; gap:clamp(28px,4vw,56px); align-items:center; justify-items:center;
  max-width:940px; margin:0 auto; }
@media (min-width:860px){
  /* content-sized columns + justify-content:center, so the phone and the copy sit centred as a
     pair under the heading. With a 1fr second track the copy's own max-width left the pair
     sitting left of the page centre. */
  .app-row{ grid-template-columns:auto minmax(0,46ch); justify-content:center; justify-items:start; }
}

.app-device{ width:min(310px,84vw); flex:none; padding:9px; border-radius:40px;
  background:linear-gradient(160deg,#1d3f63,#091a2d);
  border:1px solid rgba(2,192,252,.26);
  box-shadow:0 30px 68px rgba(0,10,25,.6), 0 0 46px rgba(2,192,252,.13), inset 0 1px 0 rgba(255,255,255,.14); }
.app-screen{ border-radius:32px; overflow:hidden; background:#F8FAFB; color:#111724;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:12px;
  line-height:1.42; text-align:left; font-weight:500; }

.ap-bar{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:14px 14px 12px; background:#fff; border-bottom:1px solid #EDF1F5; }
.ap-back{ font-size:16px; line-height:1; color:#111724; }
.ap-title{ font-weight:700; font-size:13.5px; letter-spacing:-.01em; }
.ap-demo{ display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:700;
  letter-spacing:.07em; color:#275CE0; background:#EAF0FE; border-radius:999px; padding:4px 8px; }
.ap-demo::before{ content:""; width:5px; height:5px; border-radius:50%; background:#275CE0; }
.ap-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:3px; padding:11px 14px 0; }
.ap-steps span{ height:4px; border-radius:2px; background:#E4E9F0; }
.ap-steps span:first-child{ background:#275CE0; }
.ap-body{ padding:14px; display:grid; gap:13px; }
.ap-h{ font-size:14px; font-weight:700; margin:0; letter-spacing:-.01em; }
.ap-sub{ font-size:10.5px; color:#7C8794; margin:3px 0 0; line-height:1.45; font-weight:500; }
.ap-tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.ap-tier{ border:1px solid #DEE4ED; border-radius:12px; background:#fff; text-align:center;
  padding:13px 0; font-weight:700; font-size:17px; color:#111724; }
.ap-tier.is-on{ background:#275CE0; border-color:#275CE0; color:#fff;
  box-shadow:0 6px 15px rgba(39,92,224,.32); }
.ap-deposit{ text-align:center; font-size:11.5px; margin:0; }
.ap-deposit b{ font-weight:700; }
.ap-deposit small{ display:block; color:#98A2B0; font-size:9.5px; margin-top:2px; }
.ap-field{ border:1px solid #DEE4ED; border-radius:12px; background:#fff; padding:12px; font-size:12px; }
.ap-fine{ text-align:center; font-size:9.5px; color:#98A2B0; margin:0; }
.ap-foot{ background:#0F141E; padding:12px; }
.ap-cta{ display:block; text-align:center; border-radius:13px; background:#275CE0; color:#fff;
  font-weight:700; font-size:12.5px; padding:13px; }

.app-copy{ max-width:46ch; }
.app-copy-h{ font-family:"Montserrat",sans-serif; font-weight:400; letter-spacing:-.01em;
  font-size:clamp(1.25rem,2.3vw,1.6rem); color:#fff; margin:0 0 6px; }
.app-copy .tick-list{ margin-top:14px; }
.app-note{ font-size:12px; font-weight:300; color:var(--muted); margin:18px 0 0; }
@media (max-width:859px){ .app-copy{ text-align:center; max-width:60ch; }
  .app-copy .tick-list li{ text-align:left; } }

/* ============================================================
   MOBILE: team sections (Alice, Sep 3 — "on mobile the team section is too big…
   we need to probably make the card swipes. Also on mobile I can't open Did you know?")
   ============================================================
   Measured before this: the core-team grid was 5216px tall on a 375px viewport — ten cards
   stacked at a fixed 500px each — and the whole team page ran to 8067px.

   Two changes, both below 760px only. Desktop keeps the hover panel Drew signed off on.

   1. The rows become horizontal snap carousels. Cards sit at 82% of the viewport so the next one
      peeks in as the affordance, and the row bleeds to the screen edges.
   2. The "Did you know?" stops being a hover-revealed overlay and becomes an inline disclosure.
      On a phone the overlay model has two failure modes that match what Alice hit: the panel
      covers the bottom 47% of a 500px card, so on a tall card it can open below the fold and look
      like nothing happened — and iOS sticky :hover fights the tap toggle. Inline, the fact simply
      appears under the bio and pushes the card taller, driven only by the class the tap sets. */
@media (max-width:759px){

  /* --- the rows swipe --- */
  .core-grid,
  .grid.cols-3.grid-centred,
  #team .grid.cols-3{
    display:flex; gap:14px;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    padding-block:2px 8px;
  }
  .core-grid::-webkit-scrollbar,
  .grid.cols-3.grid-centred::-webkit-scrollbar,
  #team .grid.cols-3::-webkit-scrollbar{ display:none; }
  .core-grid > *,
  .grid.cols-3.grid-centred > *,
  #team .grid.cols-3 > *{ flex:0 0 82%; scroll-snap-align:center; }

  /* --- cards size to their content, not to a fixed 500px --- */
  /* height:100% matters: the flex row stretches the outer .flip-card, but on mobile it is
     .flip-inner that carries the visible border and background, and it was sizing to its own
     content — so the boxes ranged 430–567px in one row (Alice, Sep 3: "the team's cards blocks
     on the mobile should have similar size"). Filling the card makes every visible box match, and
     the column layout lets the front face grow so the "Did you know?" pill lines up across them. */
  .flip-inner{ min-height:0; height:100%; display:flex; flex-direction:column;
    border-radius:var(--r-xl); border:1px solid var(--hair);
    background:linear-gradient(180deg,#0c2a4c,#071d38);
    box-shadow:var(--shadow); overflow:hidden; }
  .team-card-more{ min-height:0; }

  /* the two faces stack in flow inside that card instead of overlaying it */
  .flip-face{ position:relative; inset:auto; background:none; border:0;
    box-shadow:none; border-radius:0; padding:24px 20px; }
  .flip-front{ flex:1 1 auto; }

  /* --- "Did you know?" as an inline disclosure --- */
  .flip-front .flip-hint{ margin-top:auto; padding:8px 15px; opacity:1;
    border:1px solid rgba(2,192,252,.32); border-radius:999px;
    background:rgba(1,153,224,.13); color:var(--capri);
    font-size:11px; letter-spacing:.07em; }
  .flip-card.is-flipped .flip-front .flip-hint{ opacity:.4; }

  /* the bio stays put — nothing is covered, so nothing needs hiding */
  .flip-card:hover .flip-front p.muted,
  .flip-card:focus-visible .flip-front p.muted,
  .flip-card.is-flipped .flip-front p.muted{ opacity:1; }
  .flip-card:hover .flip-hint{ opacity:1; }

  /* the fact appears under the bio, driven only by the tap — no :hover in the selector, so
     iOS sticky hover cannot open or jam it */
  .flip-back{ position:relative; inset:auto; display:none;
    opacity:1; transform:none; pointer-events:auto;
    min-height:0; border-radius:0; box-shadow:none;
    border-top:1px solid rgba(2,192,252,.26);
    background:linear-gradient(180deg, rgba(15,58,99,.55), rgba(8,36,63,.55));
    transition:none; }
  .flip-card.is-flipped .flip-back{ display:flex; }
  .flip-card:hover .flip-back{ display:none; }
  .flip-card.is-flipped:hover .flip-back{ display:flex; }
}

/* The four per-course buttons are gone — one CTA sits under the row instead (Alice, Sep 3) — so
   the description no longer has to clear a button beneath it. */
#programs .program-card p.muted{ margin-bottom:2px; }

/* The single CTA under the course row, with no panel around it (Alice, Sep 3: "remove this block
   and keep just the text and CTA"). Replaces the bordered .more-band-slim that briefly sat here. */
.row-cta{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  margin-top:26px; }
.row-cta-line{ margin:0; font-family:"Montserrat",sans-serif; font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.2rem); color:var(--text-2); }
@media (max-width:520px){ .row-cta{ flex-direction:column; gap:12px; } }

/* ===== Community band with the team graphic (education.html) =====
   The graphic carries its own faces and caption, so the copy sits beside it rather than centred
   over it. Stacks with the art first on narrow screens — it is the thing that stops the scroll. */
.cta-card-split{ padding:clamp(30px,4vw,48px) clamp(22px,3vw,44px); text-align:left; }
.cta-card-split{ display:grid; gap:clamp(20px,3vw,40px); align-items:center; }
@media (min-width:880px){
  .cta-card-split{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
}
.cta-art{ display:flex; justify-content:center; }
.cta-art img{ width:100%; max-width:520px; height:auto;
  filter:drop-shadow(0 22px 44px rgba(0,20,45,.4)); }
.cta-card-split .cta-copy .lead{ margin-inline:0; }
.cta-card-split .hero-cta{ justify-content:flex-start; }
@media (max-width:879px){
  .cta-card-split{ text-align:center; }
  .cta-card-split .cta-copy .lead{ margin-inline:auto; }
  .cta-card-split .hero-cta{ justify-content:center; }
}

/* Footer entries that are named but not yet published — Privacy Policy and Terms (Alice, Sep 3:
   "keep empty for now"). The old links pointed at the education company's policies, which are not
   Plan Labs' own. Shown as inert text so the footer still lists what is coming, with nothing
   misleading to click. Swap each <span class="link-pending"> back to an <a href> when the real
   policies exist. */
.link-pending{ color:var(--muted); cursor:default; }

/* App-section points: a bold lead-in per line so the three read as scannable points rather than
   a paragraph in a list. Deliberately not the uppercase `.card .muted strong` label treatment —
   these are sentence openers, not headings. */
.app-points strong{ color:#fff; font-weight:600; }
.app-points li{ line-height:1.5; }