:root{
    --ink: #000000;
    --ink-2: #0D0D0D;
    --ink-3: #161616;
    --paper: #FFFFFF;
    --paper-dim: #B8B8B8;
    --muted: #757575;
    --line: rgba(255,255,255,0.14);
    --line-strong: rgba(255,255,255,0.32);
    --accent: #FFFFFF;
    --radius: 4px;
    --display: 'Space Grotesk', sans-serif;
    --body: 'Inter', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --stamp: 'Anton', sans-serif;
    --max: 1180px;
  }
  body[data-theme="light"]{
    --ink:#FFFFFF; --ink-2:#F4F4F4; --ink-3:#E9E9E9;
    --paper:#111111; --paper-dim:#454545; --muted:#747474;
    --line:rgba(0,0,0,.14); --line-strong:rgba(0,0,0,.32); --accent:#111111;
  }
  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }
  body{
    margin:0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  a{ color: inherit; }
  ::selection{ background: var(--paper); color: var(--ink); }
  :focus-visible{ outline: 2px solid var(--paper); outline-offset: 3px; }

  .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }
  .eyebrow{
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--paper-dim);
  }
  .eyebrow::before{ content: "— "; color: var(--accent); }
  h1,h2,h3{ font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
  p{ color: var(--paper-dim); }
  .hairline{ border: none; border-top: 1px solid var(--line); margin: 0; }

  /* Ticker */
  .ticker{
    background: var(--ink); border-bottom: 1px solid var(--line);
    overflow: hidden; white-space: nowrap; position: relative;
  }
  .ticker-track{
    display: inline-flex; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
    color: var(--muted); padding: 9px 0; animation: scroll-left 40s linear infinite;
  }
  .ticker-track span{ padding: 0 26px; white-space: nowrap; }
  .ticker-track span.hi{ color: var(--paper); font-weight: 500; }
  @keyframes scroll-left{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

  /* Nav */
  header.nav{ position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 1px solid var(--line); }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; max-width: var(--max); margin: 0 auto; }
  .logo{ display:flex; align-items:center; gap:10px; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
  .logo svg{ width:22px; height:22px; flex-shrink:0; }
  .logo-mark{ width:36px; height:36px; flex-shrink:0; object-fit:cover; border-radius:50%; border:1px solid var(--line-strong); background:#050505; }
  .logo em{ font-style: normal; opacity: .55; font-weight: 500; }
  .nav-actions{ display:flex; align-items:center; gap:10px; }
  .theme-toggle{ display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line-strong); border-radius:999px; background:transparent; color:var(--paper); font:500 11px var(--mono); cursor:pointer; white-space:nowrap; }
  .theme-toggle:hover{ background:var(--ink-2); }
  nav.links{ display:flex; gap: 28px; font-size: 14px; }
  nav.links a{ text-decoration: none; color: var(--paper-dim); transition: color .15s; }
  nav.links a:hover{ color: var(--paper); }
  .btn{
    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 11px 18px; border-radius: var(--radius); text-decoration: none; display: inline-flex; align-items:center; gap:8px;
    border: 1px solid var(--paper); cursor: pointer;
  }
  .btn-primary{ background: var(--paper); color: var(--ink); font-weight: 600; }
  .btn-primary:hover{ background: transparent; color: var(--paper); }
  .btn-ghost{ border-color: var(--line-strong); color: var(--paper); background: transparent; }
  .btn-ghost:hover{ border-color: var(--paper); }
  .mobile-toggle{ display:none; background:none; border:none; color:var(--paper); font-size:22px; cursor:pointer; }

  /* Hero */
  .hero{ padding: 72px 0 60px; position: relative; }
  .hero-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
  .hero h1{ font-size: clamp(38px, 5.6vw, 60px); line-height: 1.02; margin-top: 14px; }
  .hero h1 .line2{ display:block; color: var(--muted); font-size: 0.42em; font-weight: 500; margin-top: 18px; letter-spacing: 0.02em; }
  .hero p.lede{ font-size: 17px; max-width: 46ch; margin-top: 22px; }
  .hero-ctas{ display:flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
  .hero-counter{ display:inline-flex; align-items:baseline; gap:12px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
  .counter-display{ font-family:var(--display); font-size:clamp(32px,4vw,42px); font-weight:700; line-height:1; color:var(--paper); letter-spacing:-0.02em; }
  .counter-plus{ color:var(--paper-dim); font-family:var(--mono); font-size:0.65em; margin-left:2px; }
  .counter-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
  .proof-stats{ display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--line); background:var(--ink-2); padding:22px 28px; margin-bottom:20px; }
  .proof-stats-left{ display:flex; align-items:baseline; gap:12px; }
  .proof-stats p{ margin:0; font-size:13.5px; color:var(--paper-dim); max-width:44ch; }
  @media (max-width: 700px){
    .proof-stats{ flex-direction:column; align-items:flex-start; gap:10px; padding:18px 20px; }
  }

  /* Brand mark panel — mirrors the real X/YouTube banner */
  .mark-panel{ border: 1px solid var(--line); padding: 34px 24px 26px; text-align:center; background: var(--ink-2); }
  #pulse{ width: 100%; height: 130px; display:block; }
  #pulse path{ fill:none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mark-word{ display:flex; align-items:center; justify-content:center; gap: 14px; margin-top: 6px; }
  .mark-word .rule{ height:1px; width: 34px; background: var(--line-strong); }
  .mark-word span{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.3em; color: var(--paper-dim); }
  .mark-handle{ margin-top: 18px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.06em; }

  /* Sections generic */
  section{ padding: 84px 0; border-bottom: 1px solid var(--line); }
  .section-head{ max-width: 640px; margin-bottom: 48px; }
  .section-head h2{ font-size: clamp(26px, 3.4vw, 38px); margin-top: 10px; }
  .section-head p{ margin-top: 14px; font-size: 16px; }

  /* OPT framework flow */
  .flow{ display:flex; gap: 0; margin-top: 56px; overflow-x: auto; padding-bottom: 8px; }
  .flow-step{ flex: 1 1 0; min-width: 150px; position: relative; padding: 0 18px 0 0; }
  .flow-step .n{ font-family: var(--mono); color: var(--paper); font-size: 12px; opacity:.6; }
  .flow-step h3{ font-size: 16px; margin-top: 10px; }
  .flow-step p{ font-size: 13.5px; margin-top: 8px; }
  .flow-step:not(:last-child)::after{ content: "→"; position: absolute; right: -4px; top: 0; color: var(--line-strong); font-family: var(--mono); }

  /* Framework cards */
  .card-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 8px; }
  .fcard{ background: var(--ink); padding: 26px 22px; min-height: 160px; }
  .fcard .n{ font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .fcard h3{ font-size: 16px; margin-top: 10px; }
  .fcard p{ font-size: 13.5px; margin-top: 8px; }

  /* Video cards — modeled on the real thumbnail style: ribbon title, chart squiggle, folded corners */
  .video-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
  .video-card{ text-decoration:none; display:block; }
  .thumb{
    position: relative; aspect-ratio: 16/10; background: var(--paper); overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    border: 1px solid var(--line);
  }
  .thumb .squiggle{ position:absolute; inset:0; opacity:.55; }
  .thumb .squiggle path{ fill:none; stroke:#111; stroke-width:1.4; }
  .thumb .ribbon{
    position:absolute; left:-10%; top: 30%; width: 120%; transform: rotate(-8deg);
    background: #000; padding: 10px 0 8px; text-align:center;
  }
  .thumb .ribbon h3{
    font-family: var(--stamp); color: #fff; font-size: 21px; line-height:1; letter-spacing: 0.01em;
    text-transform: uppercase; margin:0;
  }
  .thumb .ribbon .ep{ font-family: var(--body); font-size: 10.5px; color: #ddd; margin-top: 4px; letter-spacing: 0.03em; }
  .thumb .brandmark{ position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:6px; }
  .thumb .brandmark .dot{ width:20px;height:20px;border-radius:50%; background:#000; display:flex; align-items:center; justify-content:center; }
  .thumb .brandmark .dot svg{ width:12px; height:12px; }
  .thumb .brandmark span{ font-family: var(--body); font-weight:600; font-size: 10.5px; color:#111; }
  .thumb .dur{ position:absolute; right:8px; bottom:8px; background: rgba(0,0,0,0.85); color:#fff; font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; }
  .video-meta{ padding: 14px 2px 0; }
  .video-meta .k{ font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform:uppercase; letter-spacing: 0.06em; }
  .video-meta p{ font-size: 13px; margin-top: 6px; color: var(--paper-dim); }

  /* Mentorship cards */
  .offer-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .offer-grid-three{ grid-template-columns: repeat(3,minmax(0,1fr)); }
  .offer-card{ border: 1px solid var(--line); padding: 34px 30px; position:relative; }
  .offer-card h3{ font-size:20px; margin-top:12px; }
  .offer-card .offer-description{ font-size:14px; color:var(--paper-dim); margin-top:12px; }
  .offer-card.premium{ border-color: var(--paper); }
  .offer-tag{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
  .offer-tag.gold{ color: var(--paper); }
  .offer-price{ font-family: var(--display); font-size: 44px; margin-top: 12px; }
  .offer-price span{ font-size: 15px; color: var(--muted); font-family: var(--body); }
  .offer-list{ list-style:none; padding:0; margin: 22px 0 28px; display:flex; flex-direction:column; gap: 11px; }
  .offer-list li{ font-size: 14px; color: var(--paper-dim); padding-left: 20px; position:relative; }
  .offer-list li::before{ content:"—"; position:absolute; left:0; color: var(--muted); font-family: var(--mono); }

  /* Comparison table */
  table.compare{ width:100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
  table.compare th, table.compare td{ padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; }
  table.compare th{ font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; }
  table.compare td.center, table.compare th.center{ text-align:center; }
  table.compare td.yes{ color: var(--paper); font-family: var(--mono); }
  table.compare td.no{ color: var(--muted); }
  table.compare tr td:first-child{ color: var(--paper); }

  /* How it works */
  .steps{ display:grid; grid-template-columns: repeat(5,1fr); gap: 18px; margin-top: 8px; }
  .step{ border-top: 1px solid var(--line-strong); padding-top: 16px; }
  .step .n{ font-family: var(--mono); font-size: 22px; color: var(--paper); opacity:.7; }
  .step h3{ font-size: 15px; margin-top: 10px; }
  .step p{ font-size: 13px; margin-top: 6px; }

  /* Proof */
  .proof-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 8px; }
  .proof-card{ border: 1px solid var(--line); padding: 24px; background: var(--ink-2); }
  .proof-card p.quote{ font-size: 14.5px; color: var(--paper); font-style: normal; }
  .proof-card .who{ margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
  .disclaimer-box{ margin-top: 32px; border-left: 2px solid var(--paper); padding: 14px 20px; background: var(--ink-2); font-size: 13px; color: var(--muted); }

  /* Floating student certificates and payout milestones */
  .proof-showcase{ margin-top: 8px; }
  .proof-showcase-head{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:10px; }
  .proof-showcase-head p{ color:var(--paper-dim); font-size:14px; }
  .proof-motion-toggle{ flex:0 0 auto; border:1px solid var(--line-strong); background:transparent; color:var(--paper); padding:9px 12px; font:11px var(--mono); cursor:pointer; }
  .proof-motion-toggle:hover,.proof-motion-toggle:focus-visible{ border-color:var(--paper); }
  .proof-reel{ overflow:hidden; position:relative; mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); }
  .proof-track{ display:flex; align-items:center; gap:0; width:max-content; padding:24px 0 34px; animation:proof-marquee-right 64s linear infinite; }
  .proof-card{ flex:0 0 clamp(280px,30vw,400px); margin:0 22px 0 0; padding:10px; border:1px solid var(--line); background:var(--ink-2); box-shadow:0 18px 42px rgba(0,0,0,.12); animation:proof-float 7s ease-in-out infinite; }
  .proof-card:nth-child(4n+2){ animation-delay:-1.4s; }
  .proof-card:nth-child(4n+3){ animation-delay:-2.8s; }
  .proof-card:nth-child(4n){ animation-delay:-4.2s; }
  .proof-card img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#edf1fa; }
  .proof-card figcaption{ padding:11px 5px 3px; color:var(--paper-dim); font:11px var(--mono); letter-spacing:.03em; }
  @keyframes proof-marquee-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
  @keyframes proof-float{ 0%,100%{ transform:translateY(0) rotate(-.5deg); } 50%{ transform:translateY(-8px) rotate(.5deg); } }
  .proof-showcase.is-paused .proof-track,.proof-showcase.is-paused .proof-card{ animation-play-state:paused; }
  .proof-reel:hover .proof-track{ animation-play-state:paused; }
  @media(max-width:650px){
    .proof-showcase-head{ align-items:flex-start; flex-direction:column; gap:12px; }
    .proof-card{ flex-basis:78vw; }
  }
  @media(prefers-reduced-motion:reduce){
    .proof-reel{ overflow:visible; mask-image:none; }
    .proof-track{ animation:none; transform:none; flex-wrap:wrap; width:auto; justify-content:center; }
    .proof-card{ flex-basis:min(100%,320px); animation:none; }
    .proof-card:nth-child(n+9){ display:none; }
    .proof-motion-toggle{ display:none; }
  }

  /* About / community split */
  .split{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .split h2{ font-size: clamp(24px,3vw,32px); }
  .split p{ margin-top: 14px; font-size: 15px; }
  .split .bioline{ font-family: var(--display); font-size: 17px; color: var(--paper); margin-top: 16px; }
  .portrait{ aspect-ratio: 1/1; max-width: 260px; border: 1px solid var(--line); background: var(--ink-2); border-radius: 50%; display:flex; align-items:center; justify-content:center; margin: 0 auto; }

  /* Footer */
  footer{ padding: 56px 0 40px; }
  .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
  .footer-grid h4{ font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 14px; font-weight:500; }
  .footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px; }
  .footer-grid a{ text-decoration:none; color: var(--paper-dim); font-size: 13.5px; }
  .footer-bottom{ margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display:flex; justify-content:space-between; font-size: 12px; color: var(--muted); font-family: var(--mono); flex-wrap:wrap; gap: 10px; }
  .footer-disclaimer{ margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
  .disclaimer-header{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
  .disclaimer-tag{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); display: inline-flex; align-items: center; gap: 6px; }
  .disclaimer-tag::before{ content: "▲"; font-size: 8px; color: var(--paper); }
  .disclaimer-rule{ flex: 1; height: 1px; background: var(--line); }
  .disclaimer-body{ display: flex; flex-direction: column; gap: 10px; }
  .disclaimer-body p{ font-size: 12px; line-height: 1.65; color: var(--muted); margin: 0; }
  .disclaimer-body strong{ color: var(--paper-dim); font-weight: 500; }

  .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity: 1; transform: translateY(0); }

  @media (max-width: 900px){
    nav.links{ display:none; }
    .mobile-toggle{ display:block; }
    .hero-grid{ grid-template-columns: 1fr; }
    .card-grid{ grid-template-columns: repeat(2,1fr); }
    .video-grid{ grid-template-columns: 1fr; }
    .offer-grid{ grid-template-columns: 1fr; }
    .steps{ grid-template-columns: repeat(2,1fr); }
    .split{ grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr 1fr; }
    table.compare{ font-size: 12.5px; }
    .flow{ flex-direction: column; gap: 22px; }
    .flow-step:not(:last-child)::after{ content: "↓"; right: auto; left: 0; top: auto; bottom: -16px; }
  }
  @media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

  .sticky-cta{ position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--ink); border-top: 1px solid var(--line-strong); padding: 12px 20px; display:none; align-items:center; justify-content:space-between; gap: 12px; }
  @media (max-width: 640px){ .sticky-cta{ display:flex; } body{ padding-bottom: 64px; } }
  .sticky-cta span{ font-family: var(--mono); font-size: 12px; color: var(--muted); }

  /* Starting-point ladder (Level 01 / 02 / 03) */
  .ladder-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 8px; }
  .ladder-card{ border: 1px solid var(--line); padding: 32px 28px; display:flex; flex-direction:column; }
  .ladder-card.featured{ border-color: var(--paper); }
  .ladder-tag{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
  .ladder-tag.gold{ color: var(--paper); }
  .ladder-card h3{ font-size: 20px; margin-top: 12px; }
  .ladder-card p{ font-size: 13.5px; margin-top: 10px; flex: 1; }
  .ladder-price{ font-family: var(--display); font-size: 34px; margin-top: 20px; }
  .ladder-price span{ font-size: 13px; color: var(--muted); font-family: var(--body); }
  .ladder-card .btn{ margin-top: 22px; align-self: flex-start; }

  /* FAQ */
  .faq-list{ border-top: 1px solid var(--line); margin-top: 8px; }
  .faq-item{ border-bottom: 1px solid var(--line); }
  .faq-q{ width: 100%; background: none; border: none; color: var(--paper); font-family: var(--display); font-weight: 600; font-size: 16px; text-align: left; padding: 22px 0; display:flex; align-items:center; justify-content:space-between; gap: 24px; cursor: pointer; }
  .faq-q .icon{ font-family: var(--mono); color: var(--muted); font-size: 20px; line-height: 1; flex-shrink: 0; transition: transform .25s ease; }
  .faq-item.open .faq-q .icon{ transform: rotate(45deg); }
  .faq-a{ max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .faq-item.open .faq-a{ max-height: 300px; }
  .faq-a p{ padding: 0 0 22px; font-size: 14px; max-width: 62ch; }

  /* Product grid (Book / Guides / Workbooks) */
  .product-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 32px; }
  .product-card{ background: var(--ink); padding: 28px 24px; position: relative; min-height: 150px; }
  .product-tag{ position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--line-strong); padding: 3px 8px; }
  .product-card h3{ font-size: 17px; margin-top: 6px; max-width: 20ch; }
  .product-card p{ font-size: 13px; margin-top: 10px; }
  .book-link-pending{ opacity:.58; cursor:not-allowed; }

  /* Final CTA */
  .final-cta{ text-align: center; padding: 100px 0; border-bottom: none; }
  .final-cta h2{ font-size: clamp(28px, 4.6vw, 46px); max-width: 20ch; margin: 16px auto 0; }
  .final-cta .btn{ margin-top: 32px; }

  @media (max-width: 900px){
    .ladder-grid{ grid-template-columns: 1fr; }
    .product-grid{ grid-template-columns: 1fr; }
  }

  #mentorship .offer-grid.offer-grid-three{ grid-template-columns: repeat(3,minmax(0,1fr)); }
  @media (max-width: 640px){
    #mentorship .offer-grid.offer-grid-three{ grid-template-columns: 1fr; }
  }