/* LICENA — landing dark theme + sales sections (index.html ONLY).
   2026-08 redesign: faithful port of the owner-approved synthesis mockup
   (scratchpad synth-landing.html built from the Lovable samples).
   Loaded after styles.css. Strategy: flip the LAYOUT tokens to dark — most of
   styles.css follows along — then re-fix the components that must stay light
   (auth modal internals, support panel) and style the mockup sections.
   app.html / course.html do not load this file and keep the light theme. */

:root{
  /* Palette = the owner-picked Lovable sample (licena-insights src/styles.css,
     oklch converted to hex): indigo night bg, heat-gradient accents. */
  --paper:#090C27;                    /* page background */
  --navy:#0E1233;                     /* banded sections */
  --card:#14193B;                     /* panels (sample surface) */
  --card2:#202750;                    /* sample surface-2 */
  --line:rgba(255,255,255,.16);
  --steel:#B2B9D5;                    /* secondary text (sample muted-fg) */
  --ok:#4AEA7D; --bad:#FF4E51;
  --gold:#FFC100;                     /* sample primary, overrides styles.css */
  --electric:#00E3E4;
  --heat:linear-gradient(115deg,#FCDF00,#FFB300 45%,#FF4E51);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.4);
  /* --ink stays as in styles.css (dark navy) — it is only used as a bg/text
     for deliberately light components here (auth modal, offer-vs card). */
}

body{color:#F4F7FA}
h1,h2{text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.gold{background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent}
/* announce + logo mark pick up the heat gradient (sample look) */
.announce{background:var(--heat);color:#090C27;font-weight:700}
.brand .mk{background:var(--heat);color:#090C27}

/* section chrome */
.land-sec{padding:64px 0 8px}
.land-sec .eyebrow,.cover>.eyebrow,.faq>.eyebrow,.testi>.eyebrow{color:var(--gold)}
.land-sec h2,.cover h2,.faq>h2,.testi>h2{font-size:clamp(26px,4.5vw,34px);font-weight:900;max-width:640px;margin:12px 0 0}
.land-sub{color:var(--steel);max-width:560px;margin:14px 0 0;font-size:16px}
.cover h2,.faq>h2,.testi>h2,.cover-lead{color:inherit}

/* nav → mockup look */
.top{background:rgba(9,12,39,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-nav a{color:var(--steel);white-space:nowrap}
.top-nav a:hover{color:#fff}
.top-login-ic{display:inline-flex;align-items:center;justify-content:center;padding:7px;
  border:1px solid var(--line);border-radius:9px}
.top-login-ic:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.top-login-ic svg{display:block}

/* ── hero (photo + float card) ──────────────────────────────────────────── */
.hero-dark{background:linear-gradient(180deg,#090C27,#19123D);padding:56px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(34px,5vw,56px);margin:14px 0 18px}
.hero .sub{font-size:18px;color:var(--steel);max-width:520px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(0,227,228,.3);
  background:rgba(0,227,228,.1);color:var(--electric);border-radius:999px;padding:5px 12px;
  font-size:13px;font-weight:600;margin:10px 0 0}
.hero-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--electric);flex:0 0 auto}
.hero-mini{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--steel);padding:0;list-style:none;margin:18px 0 0}
.hero-mini li::before{content:"✓ ";color:var(--ok)}
.hero-mini li{background:none;border:none;padding:0}
.hero-fine{font-size:12px;color:var(--steel);margin-top:10px;opacity:.8}
.hero-photo{position:relative}
.hero-photo img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);display:block}
.float-card{position:absolute;left:-26px;bottom:-24px;width:250px;background:var(--card);color:#F4F7FA;
  border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.float-card .fc-label{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel)}
.float-card .fc-big{font-family:'Archivo';font-size:24px;font-weight:900;margin-top:4px}
.float-card p{font-size:12.5px;margin-top:6px;color:var(--steel)}

/* heat-gradient CTAs (sample btn-heat) */
.btn-gold,.top-cta{background:var(--heat);color:#090C27;box-shadow:0 8px 24px rgba(255,179,0,.35)}

/* ── trades strip (clickable marquee) ───────────────────────────────────── */
.tick-block{margin-top:0}
.tick-head{text-align:center;padding-top:18px;padding-bottom:2px}
.tick-head b{display:block;font-family:'Archivo';font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.tick-head span{display:block;font-size:12.5px;color:var(--steel);margin-top:4px}
/* bouncing pointer at the strip below — calm attention cue, no blinking */
.tick-arrow{color:var(--gold);margin-top:6px;line-height:0}
.tick-arrow svg{display:inline-block;animation:tick-point 1.6s ease-in-out infinite}
@keyframes tick-point{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (prefers-reduced-motion: reduce){.tick-arrow svg{animation:none}}

.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--navy);padding:12px 0;overflow:hidden;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel)}
.ticker b{color:var(--gold);font-weight:600}
.ticker a{color:inherit;text-decoration:none}
.ticker a:hover,.ticker a:focus{color:var(--gold)}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-track{display:inline-flex;white-space:nowrap;will-change:transform;
  animation:ticker-move 90s linear infinite}
.ticker-seq{display:inline-block;padding-right:.6em}
@keyframes ticker-move{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none}}
@media (max-width:760px){
  /* no runaway marquee on touch: static strip, swipe to scroll, one copy,
     and taller tap targets for the links */
  .ticker{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ticker-track{animation:none}
  .ticker-seq[aria-hidden]{display:none}
  .ticker a{display:inline-block;padding:10px 2px}
}

/* ── grids & cards (mockup .scard) ──────────────────────────────────────── */
.land-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.land-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.land-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.land-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.land-card h3{font-family:'Archivo';font-size:15px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;margin:10px 0 8px;color:#fff}
.land-card p{font-size:13.5px;color:var(--steel);line-height:1.5}
.pillar-ic{width:34px;height:34px;border-radius:9px;background:rgba(224,161,22,.15);
  display:grid;place-items:center;font-size:16px;color:var(--gold);font-family:'Archivo';font-weight:900}

/* banded sections (mockup .numbers / .calc): full-bleed background while the
   markup stays inside the main .wrap — margins pull to the viewport edges,
   paddings push content back to the wrap's line. body gets overflow-x:clip
   so the 100vw pull never creates a horizontal scrollbar. */
body{overflow-x:clip}
.band-sec{background:var(--navy);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:64px calc(50vw - 50%);margin:56px calc(50% - 50vw) 0}
.band-sec+.land-sec,.land-sec:first-child{padding-top:56px}
.band-sec h2{font-size:clamp(26px,4.5vw,34px);font-weight:900;margin:0 0 8px}

/* numbers cards */
.num-card b{font-family:'Archivo';font-size:40px;font-weight:900;color:var(--gold);display:block;line-height:1}
.num-card span{display:block;margin-top:8px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;font-family:'Archivo';font-weight:700}
.num-card em{display:block;font-style:normal;font-size:12px;color:var(--steel);margin-top:6px}
.num-note{font-size:12.5px;color:var(--steel);margin-top:14px}

/* pain */
.pain-bad{color:var(--steel);text-decoration:line-through;text-decoration-color:rgba(229,96,79,.7);font-size:14.5px}
.pain-bad::before{content:"✕ ";color:var(--bad);text-decoration:none}
.pain-good{margin-top:10px;font-weight:600;font-size:14.5px}
.pain-good::before{content:"✓ ";color:var(--ok)}
.land-card p.pain-good{color:#F4F7FA}

/* ── calculator ─────────────────────────────────────────────────────────── */
.gc-cols{display:grid;grid-template-columns:.95fr 1.05fr;gap:18px;margin-top:30px}
.gc-label{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel)}
.gc-big{font-family:'Archivo';font-size:32px;font-weight:900;margin:2px 0 8px;color:#fff}
.gc-big .un{font-size:15px;color:var(--steel);font-weight:600}
.gc-cols input[type=range]{width:100%;accent-color:var(--gold);margin:4px 0 18px}
.gc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gc-chip{border:1px solid var(--line);background:transparent;color:var(--steel);border-radius:9px;
  padding:7px 11px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.gc-chip.on{background:var(--gold);color:#090C27;border-color:transparent}
.gc-note{font-size:12.5px;color:var(--steel);margin-top:14px}
.gc-years{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gc-years .gy-gold{color:var(--gold)}
.gc-years .gc-big{margin-bottom:0}
.gc-delta{border:1px solid var(--line);background:rgba(9,12,39,.6);border-radius:14px;
  padding:18px;margin-top:18px}
.gc-delta-num{font-family:'Archivo';font-size:44px;font-weight:900;color:var(--gold);line-height:1.1}
.gc-delta-num .un{font-size:20px;color:var(--steel)}
.gc-cta-row{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.gc-cta-row .gc-note{margin-top:0}

/* ── live question ──────────────────────────────────────────────────────── */
.lq-cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;margin-top:30px}
.lq-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.lq-url{font-family:'IBM Plex Mono';font-size:11px;color:var(--steel)}
#lq-text{font-size:17px;font-weight:600;margin:12px 0 0}
.lq-opt{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;
  border:1px solid var(--line);background:transparent;color:#F4F7FA;border-radius:12px;
  padding:12px 14px;margin-top:8px;font-size:15px;font-family:inherit;cursor:pointer}
.lq-opt:hover{background:var(--card2)}
.lq-opt.ok{border-color:var(--ok);background:rgba(76,195,138,.12)}
.lq-opt.no{border-color:var(--bad);background:rgba(229,96,79,.12)}
.lq-letter{font-family:'IBM Plex Mono';font-size:11px;color:var(--steel);text-transform:uppercase}
#lq-expl{margin-top:14px;border:1px solid var(--line);background:var(--card2);border-radius:12px;
  padding:14px;font-size:14px;color:var(--steel);line-height:1.55}
#lq-expl b{color:#fff}
#lq-expl a{color:var(--gold)}
.lq-sw{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:3px;margin-top:16px}
.lq-sw button{border:none;background:transparent;color:var(--steel);font-weight:700;
  padding:6px 14px;border-radius:8px;cursor:pointer;font-family:inherit}
.lq-sw button.on{background:var(--gold);color:#090C27}

/* compare cost */
.cmp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px}
.cmp-price{font-family:'Archivo';font-size:22px;font-weight:800;color:var(--steel)}
.cmp-price.cmp-cross{text-decoration:line-through;text-decoration-color:rgba(229,96,79,.6)}
.cmp-us{border-color:rgba(224,161,22,.5);background:rgba(224,161,22,.08)}
.cmp-us .cmp-price{color:var(--gold);font-size:26px;font-weight:900}
.cmp-note{font-size:13px;color:var(--steel)}

/* steps */
.step-n{font-family:'Archivo';font-size:38px;font-weight:900;color:var(--gold)}

/* exam catalog on dark: first screen shows 8 cards until "View all" */
#examGrid.cover-cut li:nth-child(n+9){display:none}
.cover-more{margin-top:14px}

/* exam catalog on dark */
.exam-card{background:var(--card);color:#F4F7FA;border:1px solid var(--line)}
.exam-card:hover{border-color:var(--gold)}
.exam-name{color:#F4F7FA}
.cover-note{color:var(--steel)}
.cover .btn-primary,.cta-band .btn-primary{background:var(--heat);color:#090C27}

/* reviews (js/reviews.js renders .tcard) */
.testi-card,.tcard{background:var(--card);border:1px solid var(--line);border-radius:16px;color:#F4F7FA}
.tcard-body{color:#F4F7FA}
.tcard-meta{color:var(--steel)}

/* offer */
.offer-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px;align-items:start}
.offer-price{font-family:'Archivo';font-size:52px;font-weight:900;color:var(--gold);line-height:1}
.offer-per{font-size:17px;color:var(--steel);font-weight:600}
.offer-list{list-style:none;padding:0;margin:14px 0 0}
.offer-list li{margin:8px 0;font-size:14.5px}
.offer-list li::before{content:"✓ ";color:var(--ok)}
.offer-vs{background:#E8EBEC;color:#15273D;border-radius:16px;padding:26px}
.offer-vs .gc-label{color:#5E6E7E}
.offer-vs h3{font-family:'Archivo';font-size:44px;font-weight:900;text-transform:uppercase;margin:6px 0 8px;line-height:1}
.offer-vs p{color:#41546B;font-size:14px;margin-top:8px}
.offer-cta{display:block;text-align:center;margin-top:18px;text-decoration:none}
.offer-fine{text-align:center;font-size:12.5px;color:var(--steel);margin-top:8px}
.offer-table{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;font-size:13.5px}
.offer-table>div{display:flex;justify-content:space-between;margin-top:6px}
.offer-table .ot-cross{text-decoration:line-through;text-decoration-color:rgba(229,96,79,.7)}
.offer-table .ot-us{font-weight:700;color:var(--ok)}
.offer-table span{color:var(--steel)}
.offer-table .ot-us span{color:var(--ok)}

/* faq accordion → mockup look */
.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:16px 18px;margin-top:12px}
.faq-q{cursor:pointer;font-weight:700;font-size:16px;list-style:none;color:#F4F7FA}
.faq-q::before{content:"＋ ";color:var(--gold)}
.faq-q::marker{content:""}
.faq-a{margin-top:10px;color:var(--steel);font-size:14.5px}

/* disclaimer + final band */
.disc{background:var(--card);color:#F4F7FA;border:1px solid var(--line)}
.disc p{color:var(--steel)}
.cta-band{background:linear-gradient(180deg,var(--paper),var(--navy));border-top:1px solid var(--line);text-align:center;padding:90px 0}
.cta-band-inner{display:block}
.cta-band h2{font-size:clamp(30px,4.5vw,44px);font-weight:900;color:#F4F7FA}
.cta-band .band-sub{color:var(--steel);max-width:520px;margin:18px auto 0}
.cta-band .btn-primary{margin-top:26px;font-size:17px;padding:16px 34px;display:inline-block}
.band-fine{font-size:13px;color:var(--steel);margin-top:12px}

/* footer follows the indigo palette (styles.css paints it var(--ink)) */
footer{background:var(--navy)}

/* story pills reused on dark */
.pill{border-color:var(--line);color:#DCE6F0}

/* auth modal stays LIGHT (white card on dark backdrop) — re-pin the pieces
   that read flipped tokens */
.authcard{color:#15273D}
.authcard .field label{color:#15273D}
.authcard .consent{background:#F1F3F5;border-color:#D4DADE}
.authcard .consent span{color:#15273D}
.authcard .field input,.authcard .field select,.authcard .pwwrap input{border-color:#D4DADE}
.authcard .autherr{color:#B23A2E}
.auth-modal .tabs button{color:#5E6E7E}
.auth-modal .tabs button:hover{color:#15273D}
.authcard .pwhint,.authcard p{color:#5E6E7E}

/* support panel stays light */
.sup-panel{color:#15273D}

@media(max-width:860px){
  .land-grid4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .land-grid2,.land-grid3,.land-grid4,.gc-cols,.lq-cols,.offer-cols,.hero-grid{grid-template-columns:1fr}
  .float-card{left:8px}
  .land-sec{padding:48px 0 4px}
  .band-sec{padding:48px calc(50vw - 50%);margin:44px calc(50% - 50vw) 0}
}