@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

  /* ---- Design tokens -----------------------------------------------
     Palette: warm "ledger" dark ground, blue gradient as the primary
     accent (action / premium), brass as the secondary accent (trust /
     free tier). Blue + brass reads premium without leaning on cliche
     gold-on-black "guru" branding.
  ------------------------------------------------------------------- */
  :root{
    --ink:        #0F0D0A;
    --ink-2:      #17140F;
    --ink-3:      #201B14;
    --paper:      #F6F1E7;
    --paper-dim:  #C9C2B2;
    --blue-light: #4C8DFF;
    --blue:       #3E74F2;
    --blue-dark:  #1B3FAE;
    --brass:      #C89B3C;
    --brass-dim:  #A9822F;
    --line:       rgba(246,241,231,0.12);
    --line-strong:rgba(246,241,231,0.22);

    --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

    --wrap: 1160px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

  h1,h2,h3{ font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
  p{ margin: 0; }
  a{ color: inherit; }
  ::selection{ background: var(--blue); color: var(--paper); }

  .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--brass); border: 1px solid var(--line-strong); border-radius: 999px;
    padding: 6px 14px; background: rgba(200,155,60,0.08);
  }
  .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--blue-light); flex: none; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family: var(--font-body); font-weight:600; font-size: 15px;
    padding: 14px 26px; border-radius: 8px; border: 1px solid transparent;
    cursor:pointer; text-decoration:none; transition: transform .15s ease, filter .15s ease, border-color .15s ease;
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn-blue{ background: linear-gradient(135deg, var(--blue-light), var(--blue-dark)); color: #F9FBFF; }
  .btn-blue:hover{ filter: brightness(1.1); }
  .btn-ghost{ background: transparent; color: var(--paper); border-color: var(--line-strong); }
  .btn-ghost:hover{ border-color: var(--blue-light); color: var(--blue-light); }
  .btn-block{ width:100%; }

  /* ---- Nav ---------------------------------------------------------- */
  header{
    position: sticky; top:0; z-index: 50;
    background: rgba(15,13,10,0.85); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  nav.wrap{ display:flex; align-items:center; justify-content:space-between; height: 76px; }
  .logo{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:800; font-size: 18px; letter-spacing: 0.02em; }
  .logo-mark{ width:34px; height:34px; border-radius:8px; background: linear-gradient(155deg, var(--blue-light), var(--blue-dark)); display:flex; align-items:center; justify-content:center; color: #F9FBFF; font-family: var(--font-mono); font-weight:600; font-size:15px; flex:none; }
  .nav-links{ display:flex; align-items:center; gap:32px; font-size: 14px; color: var(--paper-dim); }
  .nav-links a{ text-decoration:none; transition: color .15s ease; }
  .nav-links a:hover{ color: var(--paper); }
  .nav-cta{ display:flex; align-items:center; gap:14px; }
  .nav-toggle{ display:none; background:none; border:1px solid var(--line-strong); border-radius:8px; width:40px; height:40px; color: var(--paper); font-size: 18px; cursor:pointer; }

  @media (max-width: 860px){
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; align-items:center; justify-content:center; }
    .nav-cta .btn-ghost{ display:none; }
  }

  /* ---- Hero ---------------------------------------------------------- */
  .hero{ padding: 88px 0 60px; position: relative; overflow: hidden; }
  .hero::before{
    content:""; position:absolute; inset: -20% -10% auto -10%; height: 520px;
    background: radial-gradient(60% 60% at 30% 20%, rgba(76,141,255,0.18), transparent 70%),
                radial-gradient(50% 50% at 80% 10%, rgba(200,155,60,0.12), transparent 70%);
    pointer-events:none;
  }
  .hero-grid{ position: relative; max-width: 720px; }

  .hero h1{ font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.06; margin: 20px 0 20px; }
  .hero h1 .accent{ background: linear-gradient(100deg, var(--blue-light), #8DB4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hero-sub{ font-size: 18px; color: var(--paper-dim); max-width: 46ch; margin-bottom: 32px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 40px; }

  .ledger{ display:flex; gap: 0; border-top: 1px solid var(--line); }
  .ledger-item{ flex:1; padding: 18px 20px 0; border-right: 1px solid var(--line); }
  .ledger-item:last-child{ border-right:none; }
  .ledger-num{ font-family: var(--font-mono); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight:600; color: var(--paper); }
  .ledger-label{ font-size: 12px; letter-spacing:0.06em; text-transform:uppercase; color: var(--paper-dim); margin-top:4px; }

  /* ---- Section shell -------------------------------------------------- */
  section{ padding: 92px 0; border-top: 1px solid var(--line); }
  .section-head{ max-width: 640px; margin-bottom: 52px; }
  .section-head h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top:14px; }
  .section-head p{ color: var(--paper-dim); margin-top: 14px; font-size: 16px; }

  /* ---- Method ---------------------------------------------------------- */
  .method-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow:hidden; }
  @media (max-width: 900px){ .method-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .method-grid{ grid-template-columns: 1fr; } }
  .method-item{ background: var(--ink-2); padding: 30px 24px; }
  .method-num{ font-family: var(--font-mono); color: var(--blue-light); font-size: 13px; letter-spacing: 0.08em; }
  .method-item h3{ font-size: 18px; margin: 14px 0 10px; }
  .method-item p{ color: var(--paper-dim); font-size: 14.5px; }

  /* ---- Process marquee ---------------------------------------------------- */
  .process-section{ padding-top: 92px; padding-bottom: 0; overflow: hidden; }
  .process-section .section-head{ text-align: center; margin-left: auto; margin-right: auto; }
  .process-marquee{
    position: relative; height: 380px; margin-top: 24px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
  }
  .process-track{ display: flex; flex-direction: column; align-items: center; animation: process-scroll 20s linear infinite; }
  .process-glow-mask{
    position: absolute; inset: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 42%, black 47%, black 53%, transparent 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 42%, black 47%, black 53%, transparent 58%, transparent 100%);
  }
  .process-track-glow{ display: flex; flex-direction: column; align-items: center; animation: process-scroll 20s linear infinite; }
  .process-item{
    font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em;
    font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1; padding: 22px 0;
    color: var(--paper-dim); opacity: .45; white-space: nowrap;
  }
  .process-track-glow .process-item{ color: var(--blue-light); opacity: 1; }
  @keyframes process-scroll{ from{ transform: translateY(0); } to{ transform: translateY(-50%); } }
  @media (prefers-reduced-motion: reduce){
    .process-track, .process-track-glow{ animation: none; }
  }

  /* ---- Programs ---------------------------------------------------------- */
  .programs{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  @media (max-width: 860px){ .programs{ grid-template-columns: 1fr; } }
  .plan{ border-radius: 16px; padding: 34px; background: var(--ink-2); border: 1px solid var(--line-strong); display:flex; flex-direction:column; }
  .plan.featured{ border-color: var(--blue); background: linear-gradient(165deg, rgba(76,141,255,0.14), var(--ink-2) 55%); position:relative; }
  .plan-tag{ position:absolute; top:-13px; left:34px; background: linear-gradient(135deg, var(--blue-light), var(--blue-dark)); color: #F9FBFF; font-family: var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding: 5px 12px; border-radius: 999px; }
  .plan-kicker{ font-family: var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color: var(--brass); }
  .plan.featured .plan-kicker{ color: var(--blue-light); }
  .plan h3{ font-size: 26px; margin: 12px 0 6px; }
  .plan-price{ font-family: var(--font-mono); font-size: 15px; color: var(--paper-dim); margin-bottom: 22px; }
  .plan ul{ list-style:none; margin: 0 0 28px; padding:0; display:flex; flex-direction:column; gap:13px; flex:1; }
  .plan li{ display:flex; gap:10px; font-size: 14.5px; color: var(--paper); }
  .plan li::before{ content:"✓"; color: var(--brass); font-weight:600; flex:none; }
  .plan.featured li::before{ color: var(--blue-light); }

  /* ---- Proof -------------------------------------------------------------- */
  .results-stats{ display:flex; gap:0; border:1px solid var(--line); border-radius: 14px; overflow:hidden; margin-bottom: 40px; }
  .results-stats .ledger-item{ padding: 22px 24px; border-right:1px solid var(--line); }
  .results-stats .ledger-item:last-child{ border-right:none; }

  .proof-quote{ border:1px solid var(--line-strong); border-radius: 16px; padding: 40px; background: linear-gradient(165deg, rgba(76,141,255,0.10), var(--ink-2) 60%); display:flex; flex-wrap:wrap; align-items:baseline; gap: 18px 28px; }
  .proof-quote-num{ font-family: var(--font-mono); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight:600; color: var(--paper); }
  .proof-quote-label{ font-size: 15px; color: var(--paper-dim); max-width: 44ch; }
  .proof-quote-label b{ color: var(--blue-light); font-weight:600; }
  .proof-note{ font-size: 11px; color: var(--brass); font-family: var(--font-mono); margin-top: 18px; }

  .results-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
  @media (max-width: 700px){ .results-grid{ grid-template-columns: 1fr; } }
  .results-grid img{ width:100%; display:block; border-radius: 12px; border: 1px solid var(--line-strong); }

  /* ---- About / instructor -------------------------------------------------- */
  .about{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items:start; }
  @media (max-width: 900px){ .about{ grid-template-columns: 1fr; } }
  .about-card{ border:1px solid var(--line-strong); border-radius: 16px; padding: 20px; background: var(--ink-2); }
  .about-photos{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .about-photos img{ width:100%; aspect-ratio: 1/1; border-radius: 12px; object-fit: cover; display:block; border: 1px solid var(--line); }
  .about-photos img:first-child{ object-position: center 20%; }
  .about-photos img:last-child{ object-position: center 25%; }
  .about-stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
  .about-stat b{ display:block; font-family: var(--font-mono); font-size: 20px; color: var(--blue-light); }
  .about-stat span{ font-size: 12px; color: var(--paper-dim); }
  .about-body p{ color: var(--paper-dim); margin-bottom: 16px; font-size: 15.5px; }
  .about-body p:first-child{ color: var(--paper); font-size: 18px; font-family: var(--font-display); font-weight:600; line-height:1.4; }
  .text-link{ display:inline-flex; align-items:center; gap:6px; color: var(--blue-light); text-decoration:none; font-weight:600; font-size: 14.5px; margin-top: 6px; }
  .text-link:hover{ text-decoration: underline; }

  /* ---- FAQ -------------------------------------------------------------- */
  .faq{ max-width: 760px; }
  .faq-item{ border-bottom: 1px solid var(--line); }
  .faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap: 20px; background:none; border:none; color: var(--paper); font-family: var(--font-display); font-size: 16.5px; font-weight:600; text-align:left; padding: 22px 0; cursor:pointer; }
  .faq-q .plus{ font-family: var(--font-mono); color: var(--blue-light); font-size: 20px; transition: transform .2s ease; flex:none; }
  .faq-item[open] .plus{ transform: rotate(45deg); }
  .faq-a{ padding: 0 0 22px; color: var(--paper-dim); font-size: 14.5px; max-width: 62ch; }
  .faq-item summary{ list-style:none; }
  .faq-item summary::-webkit-details-marker{ display:none; }

  /* ---- Final CTA ---------------------------------------------------------- */
  .cta-band{ text-align:center; }
  .cta-band h2{ font-size: clamp(1.9rem, 3.6vw, 2.8rem); max-width: 20ch; margin: 0 auto 18px; }
  .cta-band p{ color: var(--paper-dim); max-width: 52ch; margin: 0 auto 34px; }
  .cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

  /* ---- Modals (free course gate + mentorship application) ------------------ */
  .modal-overlay{ position:fixed; inset:0; background: rgba(6,5,3,0.75); backdrop-filter: blur(4px); display:none; align-items:center; justify-content:center; padding: 24px; z-index: 200; }
  .modal-overlay.is-open{ display:flex; }
  .modal{ width:100%; max-width: 480px; max-height: 88vh; overflow-y:auto; background: var(--ink-2); border:1px solid var(--line-strong); border-radius:18px; padding: 36px; position:relative; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6); text-align:left; }
  .modal.modal-wide{ max-width: 560px; }
  .modal-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--paper); cursor:pointer; font-size:15px; line-height:1; }
  .modal-close:hover{ border-color: var(--blue-light); color: var(--blue-light); }
  .modal h3{ font-size: 22px; margin: 14px 0 10px; }
  .modal-sub{ font-size: 14px; color: var(--paper-dim); margin-bottom: 22px; line-height:1.6; }
  .modal-sub strong{ color: var(--paper); }
  .modal form{ display:flex; flex-direction:column; gap:12px; }
  .modal input, .modal select, .modal textarea{ width:100%; background: var(--ink); border:1px solid var(--line-strong); border-radius:8px; padding:13px 14px; color:var(--paper); font-family: var(--font-body); font-size:14.5px; }
  .modal select{ color: var(--paper); }
  .modal select:invalid{ color: var(--paper-dim); }
  .modal textarea{ resize: vertical; min-height: 76px; font-family: var(--font-body); }
  .modal input::placeholder, .modal textarea::placeholder{ color: var(--paper-dim); }
  .modal input:focus, .modal select:focus, .modal textarea:focus{ outline:none; border-color: var(--blue-light); }
  .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
  @media (max-width: 480px){ .form-row{ grid-template-columns: 1fr; } }
  .modal-success{ text-align:center; padding: 12px 0 4px; }
  .modal-success p{ font-size:16px; color: var(--paper); line-height:1.6; }
  .plan-hours{ font-family: var(--font-mono); font-size: 12px; color: var(--blue-light); margin: -14px 0 22px; }
  .plan.featured .plan-hours{ color: var(--blue-light); }
  .plan:not(.featured) .plan-hours{ color: var(--brass); }

  /* ---- Contact -------------------------------------------------------------- */
  .contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items:start; }
  @media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }
  .contact-info h2{ margin-top: 16px; }
  .contact-info p{ color: var(--paper-dim); font-size: 15.5px; margin-top: 16px; max-width: 40ch; }
  .contact-links{ display:flex; flex-direction:column; gap: 16px; margin-top: 32px; }
  .contact-links a{ display:flex; flex-direction:column; gap:2px; text-decoration:none; color: var(--paper); font-size:15px; }
  .contact-links a:hover{ color: var(--blue-light); }
  .contact-links a span{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color: var(--paper-dim); }
  .contact-form{ background: var(--ink-2); border:1px solid var(--line-strong); border-radius:16px; padding: 34px; }
  .contact-form form{ display:flex; flex-direction:column; gap:14px; }
  .contact-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:520px){ .contact-form .form-row{ grid-template-columns:1fr; } }
  .contact-form input, .contact-form select, .contact-form textarea{
    width:100%; background: var(--ink); border:1px solid var(--line-strong); border-radius:8px;
    padding:13px 14px; color:var(--paper); font-family: var(--font-body); font-size:14.5px;
  }
  .contact-form select{ color: var(--paper); }
  .contact-form select:invalid{ color: var(--paper-dim); }
  .contact-form textarea{ resize:vertical; min-height:110px; font-family: var(--font-body); }
  .contact-form input::placeholder, .contact-form textarea::placeholder{ color: var(--paper-dim); }
  .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:none; border-color: var(--blue-light); }
  .contact-success{ text-align:center; padding: 30px 0; }
  .contact-success p{ font-size:16px; color: var(--paper); line-height:1.6; }

  /* ---- Footer -------------------------------------------------------------- */
  footer{ border-top: 1px solid var(--line); padding: 56px 0 32px; }
  .footer-grid{ display:flex; justify-content:space-between; gap: 40px; flex-wrap:wrap; margin-bottom: 40px; }
  .footer-cols{ display:flex; gap: 64px; flex-wrap:wrap; }
  .footer-col h4{ font-family: var(--font-mono); font-size: 12px; text-transform:uppercase; letter-spacing:0.08em; color: var(--paper-dim); margin-bottom: 14px; }
  .footer-col a{ display:block; text-decoration:none; color: var(--paper); font-size: 14px; margin-bottom: 10px; opacity:.85; }
  .footer-col a:hover{ opacity:1; color: var(--blue-light); }
  .footer-bottom{ border-top:1px solid var(--line); padding-top: 24px; display:flex; justify-content:space-between; gap: 16px; flex-wrap:wrap; font-size: 12.5px; color: var(--paper-dim); }
  .disclaimer{ font-size: 12px; color: var(--paper-dim); opacity:.75; max-width: 900px; margin-top: 18px; line-height:1.6; }


  /* ---- Founding offer --------------------------------------------------- */
  .price-row{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom: 6px; }
  .price-now{ font-family: var(--font-display); font-size: 40px; font-weight:800; color: var(--paper); line-height:1; }
  .price-was{ font-family: var(--font-mono); font-size: 16px; color: var(--paper-dim); text-decoration: line-through; }
  .price-plan{ font-family: var(--font-mono); font-size: 13px; color: var(--paper-dim); margin-bottom: 18px; }
  .seats{ margin: 0 0 24px; }
  .seats-top{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size: 12px; color: var(--paper-dim); margin-bottom: 8px; }
  .seats-top b{ color: var(--blue-light); font-weight:600; }
  .seats-track{ height:6px; border-radius:999px; background: var(--line); overflow:hidden; }
  .seats-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg, var(--blue-light), var(--brass)); }
  .pay-note{ font-size: 12.5px; color: var(--paper-dim); text-align:center; margin-top: 12px; }

  /* ---- Roadmap ------------------------------------------------------------ */
  .roadmap{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
  .phase{ background: var(--ink-2); border:1px solid var(--line-strong); border-radius: 14px; padding: 24px; display:flex; flex-direction:column; gap:10px; }
  .phase-weeks{ font-family: var(--font-mono); font-size: 12px; letter-spacing:0.08em; text-transform:uppercase; color: var(--blue-light); }
  .phase h3{ font-size: 18px; }
  .phase p{ color: var(--paper-dim); font-size: 14.5px; }
  .phase-goal{ margin-top:auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--paper); }
  .phase-goal span{ color: var(--brass); font-family: var(--font-mono); font-size: 11px; text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:2px; }
  .phase.milestone{ border-color: var(--blue); background: linear-gradient(165deg, rgba(76,141,255,0.12), var(--ink-2) 60%); }
  .roadmap-note{ margin-top: 28px; border:1px dashed var(--line-strong); border-radius: 12px; padding: 18px 22px; color: var(--paper-dim); font-size: 14.5px; max-width: 760px; }
  .roadmap-note b{ color: var(--paper); }

  /* ---- Form bits ----------------------------------------------------------- */
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
  .form-error{ font-size: 13px; color: #FF8A7A; }
  .modal-success p strong{ font-family: var(--font-display); font-size: 20px; }
  button[disabled]{ opacity:.6; cursor: progress; }

  /* ---- Mobile nav ----------------------------------------------------------- */
  @media (max-width: 860px){
    .nav-links.is-open{ display:flex; flex-direction:column; gap:18px; position:absolute; top:76px; left:0; right:0; background: var(--ink); border-bottom:1px solid var(--line); padding: 22px 24px; }
  }
  @media (max-width: 560px){
    .ledger-item{ padding: 16px 12px 0; }
    .plan, .contact-form, .proof-quote{ padding: 26px 20px; }
    .modal{ padding: 30px 20px; }
    .hero{ padding-top: 60px; }
  }

  .ph-note{ font-size: 11px; color: var(--brass); font-family: var(--font-mono); }

  @media (max-width: 560px){
    nav.wrap{ padding: 0 16px; }
    .nav-cta{ gap:10px; }
    .nav-cta .btn-blue{ padding: 10px 14px; font-size: 13.5px; white-space: nowrap; }
    .logo{ font-size: 16px; }
    .ledger-num{ font-size: 1.2rem; }
    .ledger-label{ font-size: 10.5px; }
    .wrap{ padding: 0 16px; }
  }

/* ---- VSL (vertical video, filled from CONFIG.vsl) ------------------------ */
.vsl{ position:relative; width:100%; max-width: 340px; aspect-ratio: 9/16; border-radius: 18px; overflow:hidden; background: var(--ink-3); border:1px solid var(--line-strong); box-shadow: 0 30px 70px -25px rgba(76,141,255,0.35); }
.vsl video, .vsl iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit: cover; background:#000; }
.vsl-empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding: 24px; color: var(--paper-dim); font-family: var(--font-mono); font-size: 12px; letter-spacing:0.06em; text-transform:uppercase; background: repeating-linear-gradient(135deg, rgba(246,241,231,0.03) 0 12px, transparent 12px 24px); }
.vsl-empty b{ font-family: var(--font-display); font-size: 20px; color: var(--paper); text-transform:none; letter-spacing:0; }
.vsl-play{ width:64px; height:64px; border-radius:50%; background: linear-gradient(135deg, var(--blue-light), var(--blue-dark)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; }
.vsl-unmute{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:2; }

.hero-split{ position:relative; display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items:center; }
.hero-split .hero-media{ display:flex; justify-content:center; }
@media (max-width: 900px){
  .hero-split{ grid-template-columns: 1fr; gap: 36px; }
}

/* ---- Free-course funnel page ----------------------------------------------- */
.funnel-hero{ padding: 64px 0 40px; text-align:center; position:relative; overflow:hidden; }
.funnel-hero::before{ content:""; position:absolute; inset:-30% -10% auto; height: 560px; background: radial-gradient(50% 50% at 50% 30%, rgba(76,141,255,0.20), transparent 70%); pointer-events:none; }
.funnel-hero .wrap{ position:relative; display:flex; flex-direction:column; align-items:center; }
.funnel-hero h1{ font-size: clamp(2rem, 4.4vw, 3.3rem); line-height:1.08; max-width: 18ch; margin: 18px 0 14px; }
.funnel-hero h1 .accent{ background: linear-gradient(100deg, var(--blue-light), #8DB4FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.funnel-sub{ color: var(--paper-dim); font-size: 17px; margin-bottom: 18px; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom: 28px; }
.chip{ font-size: 13px; font-weight:600; padding: 6px 12px; border-radius:999px; background: rgba(76,141,255,0.12); border:1px solid rgba(76,141,255,0.35); color: var(--paper); }
.chip::before{ content:"✓ "; color: var(--blue-light); }
.funnel-cta{ margin-top: 28px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.funnel-cta small{ color: var(--paper-dim); font-size: 12.5px; }

.stack{ max-width: 620px; margin: 0 auto; border:1px solid var(--line-strong); border-radius: 18px; background: var(--ink-2); overflow:hidden; }
.stack-row{ display:flex; justify-content:space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); font-size: 15px; }
.stack-row span:last-child{ font-family: var(--font-mono); font-size: 12px; color: var(--blue-light); text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap; align-self:center; }
.stack-total{ padding: 22px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; background: linear-gradient(165deg, rgba(76,141,255,0.12), var(--ink-2) 70%); }
.stack-total .was{ font-family: var(--font-mono); color: var(--paper-dim); font-size: 13px; }
.stack-total .was s{ color: var(--paper-dim); }
.stack-total .now{ font-family: var(--font-display); font-weight:800; font-size: 34px; }

.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px){ .steps{ grid-template-columns: 1fr; } }
.step{ background: var(--ink-2); border:1px solid var(--line-strong); border-radius: 14px; padding: 26px; }
.step-num{ width:36px; height:36px; border-radius:50%; background: linear-gradient(135deg, var(--blue-light), var(--blue-dark)); display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:600; margin-bottom: 14px; }
.step h3{ font-size: 18px; margin-bottom: 8px; }
.step p{ color: var(--paper-dim); font-size: 14.5px; }

.center-head{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---- Two tracks (beginners vs. already selling) ------------------------------ */
.tracks{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
@media (max-width: 800px){ .tracks{ grid-template-columns: 1fr; } }
.track{ border:1px solid var(--line-strong); border-radius: 16px; padding: 28px; background: var(--ink-2); }
.track h3{ font-size: 20px; margin: 10px 0 8px; }
.track p{ color: var(--paper-dim); font-size: 14.5px; margin-bottom: 14px; }
.track ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.track li{ display:flex; gap:10px; font-size: 14.5px; }
.track li::before{ content:"→"; color: var(--blue-light); flex:none; }
.track-path{ font-family: var(--font-mono); font-size: 12px; color: var(--brass); letter-spacing:0.06em; text-transform:uppercase; }

/* ---- Light theme (html[data-theme="light"]) ------------------------------ */
html[data-theme="light"]{
  --ink:        #FAF8F3;
  --ink-2:      #FFFFFF;
  --ink-3:      #F1EDE4;
  --paper:      #15130F;
  --paper-dim:  #5F594D;
  --brass:      #9A7322;
  --brass-dim:  #7E5E1C;
  --line:       rgba(21,19,15,0.10);
  --line-strong:rgba(21,19,15,0.18);
}
html[data-theme="light"] header{ background: rgba(250,248,243,0.88); }
html[data-theme="light"] .plan, html[data-theme="light"] .phase, html[data-theme="light"] .step,
html[data-theme="light"] .track, html[data-theme="light"] .stack, html[data-theme="light"] .contact-form,
html[data-theme="light"] .about-card, html[data-theme="light"] .modal{ box-shadow: 0 10px 30px -18px rgba(21,19,15,0.25); }
html[data-theme="light"] .vsl{ box-shadow: 0 30px 70px -30px rgba(27,63,174,0.45); }
html[data-theme="light"] .vsl-empty{ background: repeating-linear-gradient(135deg, rgba(21,19,15,0.04) 0 12px, transparent 12px 24px); }
html[data-theme="light"] .hero h1 .accent, html[data-theme="light"] .funnel-hero h1 .accent{ background: linear-gradient(100deg, var(--blue), var(--blue-dark)); -webkit-background-clip:text; background-clip:text; }
html[data-theme="light"] .modal-overlay{ background: rgba(21,19,15,0.45); }
html[data-theme="light"] .modal input, html[data-theme="light"] .modal select, html[data-theme="light"] .modal textarea,
html[data-theme="light"] .contact-form input, html[data-theme="light"] .contact-form select, html[data-theme="light"] .contact-form textarea{ background: var(--ink); }

/* ---- Horizontal VSL (16:9) ---------------------------------------------------- */
.vsl.vsl-wide{ max-width: 780px; aspect-ratio: 16/9; }
.hero-split:has(.vsl-wide){ grid-template-columns: 1fr 1fr; }
@media (max-width: 900px){ .hero-split:has(.vsl-wide){ grid-template-columns: 1fr; } }

/* Header without a logo: keep the CTA on the right. */
nav.wrap .nav-cta{ margin-left:auto; }
@media (max-width: 860px){ nav.wrap .nav-links[style*="display:flex"]{ font-size: 14px; } }