/* =========================================================
   SPOTBRO LANDING PAGE STYLES
   Loaded only for the marketing landing page.
   Design: tech/brutalist with lime (#CCFF00) accents.
   ========================================================= */

/* ── Google Fonts ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;600;700;900&family=Barlow:wght@300;400;500;600&family=Share+Tech+Mono&display=swap');

/* ── Landing-specific tokens ──────────────────────────────
   Aliased to the app design tokens in css/base.css so the
   marketing pages and the app share ONE palette (light-mode
   contrast fixes propagate automatically). Fallbacks keep the
   landing safe if base.css ever fails to load. */
:root {
    --lime: var(--accent, #CCFF00);
    /* Accent used as TEXT. #CCFF00 is a fill colour — against the light
       theme's page it lands at 1.57:1, far under the 3:1 floor even for
       display type, which made the whole landing page unreadable in light
       mode. base.css already defines --accent-ink (#5C7A00, 4.5:1+) for
       exactly this; it is undefined in dark mode, so the fallback chain
       leaves dark rendering byte-identical. Fills keep --lime. */
    --lime-ink: var(--accent-ink, var(--accent, #CCFF00));
    --lime-dark: var(--accent-hover, #AADD00);
    --lime-glow: var(--accent-glow, rgba(204,255,0,0.4));
    --spd: 0.4s;
}

[data-theme="dark"] {
    --l-bg:     var(--bg-dark, #07090A);
    --l-bg2:    #0A0D10;
    --l-bg3:    #0D1115;
    --l-card:   var(--bg-card, #0F1419);
    --l-br:     var(--border, rgba(255,255,255,0.065));
    --l-br2:    rgba(255,255,255,0.12);
    --l-text:   var(--text-light, #F0F4F1);
    --l-t2:     rgba(240,244,241,0.72);
    --l-t3:     rgba(240,244,241,0.45);
    --l-shad:   0 30px 80px rgba(0,0,0,0.65);
    --l-phone-bg: #04080A;
    --l-phone-screen: #050D05;
    --l-nop: 0.4;
}

[data-theme="light"] {
    --l-bg:     var(--bg-dark, #FFFFFF);
    --l-bg2:    var(--bg-medium, #F5F5F5);
    --l-bg3:    #EBEBEB;
    --l-card:   var(--bg-card, #FFFFFF);
    --l-br:     var(--border, rgba(0,0,0,0.09));
    --l-br2:    rgba(0,0,0,0.16);
    --l-text:   var(--text-light, #0A0C0A);
    --l-t2:     rgba(10,12,10,0.72);
    --l-t3:     rgba(10,12,10,0.55);
    --l-shad:   0 30px 80px rgba(0,0,0,0.12);
    --l-phone-bg: #111;
    --l-phone-screen: #050D05;
    --l-nop: 0.0;
}

/* ── Landing screen container ─────────────────────────── */
#landing-screen {
    position: fixed;
    inset: 0;
    z-index: 30;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--l-bg);
    color: var(--l-text);
    font-family: 'Barlow', sans-serif;
    transition: background var(--spd), color var(--spd);
}

#landing-screen::after {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:9000;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: var(--l-nop); mix-blend-mode: overlay; transition: opacity var(--spd);
}

/* ── Theme toggle ─────────────────────────────────────── */
.l-tbtn {
    width:54px; height:28px; background:var(--l-bg3); border:1px solid var(--l-br2);
    border-radius:28px; cursor:pointer; display:flex; align-items:center; padding:3px;
    transition:background .4s, border-color .4s; flex-shrink:0;
}
.l-tthumb {
    width:20px; height:20px; background:var(--lime); border-radius:50%;
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    display:flex; align-items:center; justify-content:center; font-size:11px;
}
[data-theme="light"] .l-tthumb { transform:translateX(26px); }

/* ── NAV ──────────────────────────────────────────────── */
/* Same shell as the app top bar (#desktop-sidebar in desktop.css):
   identical height, surface, and typography — marketing and app are one. */
.l-nav {
    position:sticky; top:0; left:0; right:0; z-index:800;
    height:var(--topbar-height, 64px); padding:0 24px;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:nowrap; overflow:hidden; gap:16px;
    background:var(--bg-medium);
    border-bottom:1px solid var(--bg-light);
}
.l-nav.scrolled {
    backdrop-filter:blur(20px);
}
.l-nlinks { display:flex; gap:4px; list-style:none; flex-shrink:1; min-width:0; }
.l-nlinks a { font-family:var(--font-family); font-weight:600; font-size:0.88rem; color:var(--text-dim); text-decoration:none; transition:color .2s, background .2s; cursor:pointer; white-space:nowrap; padding:10px 14px; border-radius:var(--radius-sm); }
.l-nlinks a:hover { color:var(--text-muted); background:rgba(255,255,255,0.04); }
[data-theme="light"] .l-nlinks a:hover { background:rgba(0,0,0,0.04); }
.l-nright { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.l-ncta { background:none; color:var(--text-muted); font-family:var(--font-family); font-weight:600; font-size:0.88rem; padding:9px 16px; border:1px solid var(--border, rgba(255,255,255,0.12)); border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; display:inline-block; transition:color .2s, border-color .2s; }
.l-ncta:hover { color:var(--text-light); border-color:var(--accent); }
.l-ncta-alt { font-family:var(--font-family); font-weight:700; font-size:0.88rem; padding:9px 18px; border-radius:var(--radius-sm); }
.l-nav-avatar { width:38px; height:38px; border-radius:50%; border:2px solid var(--lime); display:inline-flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; transition:box-shadow .2s; flex-shrink:0; }
.l-nav-avatar:hover { box-shadow:0 0 16px var(--lime-glow); }

/* ── HERO ─────────────────────────────────────────────── */
.l-hero {
    min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
    align-items:center; padding:110px 52px 70px; position:relative; overflow:hidden; gap:40px;
}
.l-hmesh {
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse 55% 65% at 85% 48%, rgba(204,255,0,0.08) 0%,transparent 65%),
        radial-gradient(ellipse 35% 40% at 12% 78%, rgba(204,255,0,0.04) 0%,transparent 58%);
    animation:l-mpulse 8s ease-in-out infinite alternate;
}
@keyframes l-mpulse { from{opacity:.7} to{opacity:1} }
.l-hgrid {
    position:absolute; inset:0;
    background-image: linear-gradient(var(--l-br) 1px,transparent 1px), linear-gradient(90deg,var(--l-br) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 70% 80% at 72% 50%,black 20%,transparent 80%);
}
.l-hleft { position:relative; z-index:2; }
.l-eyebrow {
    display:inline-flex; align-items:center; gap:9px;
    border:1px solid rgba(204,255,0,0.25); background:rgba(204,255,0,0.07);
    padding:7px 17px; font-family:'Share Tech Mono',monospace;
    font-size:10px; letter-spacing:3.5px; color:var(--lime-ink); text-transform:uppercase;
    margin-bottom:28px; animation:l-fup .7s ease both;
}
.l-edot { width:6px; height:6px; background:var(--lime); border-radius:50%; animation:l-eblink 1.5s infinite; }
@keyframes l-eblink { 0%,100%{opacity:1} 50%{opacity:.15} }
.l-h1 {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(96px,11vw,160px); line-height:.86; letter-spacing:1px;
    margin-bottom:14px; animation:l-fup .7s .1s ease both;
}
.l-h1 em { font-style:normal; color:var(--lime-ink); text-shadow:0 0 50px var(--lime-glow); }
.l-htag { font-family:'Barlow Condensed',sans-serif; font-size:clamp(14px,1.8vw,21px); font-weight:700; letter-spacing:6px; color:var(--l-t3); text-transform:uppercase; margin-bottom:26px; animation:l-fup .7s .2s ease both; }
.l-hbody { font-size:17px; font-weight:300; line-height:1.78; color:var(--l-t2); max-width:460px; margin-bottom:44px; animation:l-fup .7s .3s ease both; }
.l-hbtns { display:flex; gap:13px; align-items:center; flex-wrap:wrap; animation:l-fup .7s .4s ease both; }
.l-blime { background:var(--lime); color:#07090A; border-radius:var(--radius-sm); font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:15px; letter-spacing:4px; text-transform:uppercase; padding:17px 48px; border:none; cursor:pointer; text-decoration:none; display:inline-block; position:relative; overflow:hidden; transition:box-shadow .25s; }
.l-blime::before { content:''; position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.l-blime:hover { box-shadow:0 0 40px var(--lime-glow); }
.l-blime:hover::before { transform:scaleX(1); }
.l-blime span { position:relative; z-index:1; }
.l-bghost { background:none; border:1.5px solid var(--l-br2); color:var(--l-t2); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; letter-spacing:3px; text-transform:uppercase; padding:15px 30px; cursor:pointer; text-decoration:none; display:inline-block; transition:border-color .2s, color .2s, background .2s; }
.l-bghost:hover { border-color:var(--lime); color:var(--lime-ink); background:rgba(204,255,0,0.06); }
.l-hkpis { display:flex; gap:44px; margin-top:54px; padding-top:34px; border-top:1px solid var(--l-br); animation:l-fup .7s .5s ease both; }
.l-kv { font-family:'Bebas Neue',sans-serif; font-size:48px; color:var(--lime-ink); line-height:1; transition:color .4s; }
.l-kl { font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:2.5px; color:var(--l-t3); text-transform:uppercase; margin-top:3px; }
@keyframes l-fup { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }

/* ── PHONE MOCKUP ─────────────────────────────────────── */
.l-hright { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; animation:l-fup .9s .15s ease both; }
.l-pscene { position:relative; width:min(270px, 85vw); }
.l-fchip { position:absolute; background:var(--l-card); border:1px solid var(--l-br2); padding:10px 14px; font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--lime-ink); white-space:nowrap; backdrop-filter:blur(12px); box-shadow:var(--l-shad); transition:background .4s, border-color .4s; }
/* was 8px at --l-t3, which composites to #74797a on the card: 4.19:1, under
   the 4.5:1 these need at this size. Lighter, and large enough to read. */
.l-fchip small { display:block; font-size:11px; letter-spacing:2px; color:rgba(240,244,241,0.72); margin-bottom:2px; font-family:'Barlow Condensed',sans-serif; font-weight:600; }
[data-theme="light"] .l-fchip small { color:rgba(10,12,10,0.72); }
.l-fc1 { top:25px; right:-148px; animation:l-fa 3s ease-in-out infinite; }
.l-fc2 { bottom:120px; left:-160px; animation:l-fb 3.5s ease-in-out infinite; }
.l-fc3 { bottom:25px; right:-134px; animation:l-fc_ 4s ease-in-out infinite; }
@keyframes l-fa{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes l-fb{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes l-fc_{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.l-phone {
    background: var(--l-phone-bg);
    border-radius: 44px; border: 1.5px solid rgba(204,255,0,0.15);
    padding: 14px 10px 10px;
    box-shadow: 0 0 0 1px rgba(204,255,0,0.06), 0 50px 100px rgba(0,0,0,.7), 0 0 80px rgba(204,255,0,0.08), inset 0 1px 0 rgba(255,255,255,.04);
    animation: l-pfloat 5s ease-in-out infinite; position:relative;
}
@keyframes l-pfloat { 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-18px) rotate(-1.5deg)} }
.l-ppill { width:88px; height:26px; background:#0C0F0C; border-radius:0 0 18px 18px; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; gap:6px; }
.l-pcam { width:8px; height:8px; background:#181e18; border-radius:50%; border:1px solid #202620; }
.l-pbar_ { width:44px; height:5px; background:#181e18; border-radius:4px; }
.l-pscreen {
    border-radius:28px; overflow:hidden; aspect-ratio:9/19.5;
    background: var(--l-phone-screen); position:relative; display:flex; flex-direction:column;
}
.l-phud { padding:10px 12px; display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:6; }
.l-pchip { border:1px solid var(--lime); color:var(--lime-ink); font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:1.5px; padding:4px 8px; background:rgba(204,255,0,0.05); font-weight:700; }
.l-pscan { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--lime),transparent); box-shadow:0 0 10px var(--lime); z-index:10; animation:l-psweep 2.5s ease-in-out infinite; }
@keyframes l-psweep { 0%{top:5%;opacity:0} 8%{opacity:1} 88%{opacity:1} 100%{top:92%;opacity:0} }
.l-pcorner { position:absolute; width:16px; height:16px; border-color:var(--lime); border-style:solid; z-index:5; opacity:.75; }
.l-pcorner.tl { top:8px; left:8px; border-width:1.5px 0 0 1.5px; }
.l-pcorner.tr { top:8px; right:8px; border-width:1.5px 1.5px 0 0; }
.l-pcorner.bl { bottom:50px; left:8px; border-width:0 0 1.5px 1.5px; }
.l-pcorner.br { bottom:50px; right:8px; border-width:0 1.5px 1.5px 0; }
.l-pbody { flex:1; display:flex; align-items:center; justify-content:center; position:relative; }
/* Hero phone now plays a real AI-generated demo (skeleton + counter baked in). */
.l-pvid { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#07090A; z-index:0; }
.l-pscreen .l-phud { display:none; }  /* the video carries its own AI overlays */
.l-skel-line { stroke:#CCFF00; stroke-width:2; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(204,255,0,0.8)); }
.l-skel-dot  { fill:rgba(204,255,0,0.25); stroke:#CCFF00; stroke-width:1.5; filter:drop-shadow(0 0 5px rgba(204,255,0,0.9)); }
.l-skel-head { fill:none; stroke:#CCFF00; stroke-width:2; filter:drop-shadow(0 0 6px rgba(204,255,0,0.8)); }
.l-pbot { padding:9px 12px; background:rgba(204,255,0,0.04); border-top:1px solid rgba(204,255,0,0.12); display:flex; justify-content:space-between; align-items:center; position:relative; z-index:6; }
.l-pmet-label { font-family:'Share Tech Mono',monospace; font-size:7px; letter-spacing:2px; color:rgba(204,255,0,0.45); display:block; margin-bottom:1px; }
.l-pmet-val { font-family:'Bebas Neue',sans-serif; font-size:24px; color:var(--lime-ink); line-height:1; }
.l-pform-badge { background:var(--lime); color:#07090A; font-family:'Share Tech Mono',monospace; font-size:8px; font-weight:700; letter-spacing:1.5px; padding:5px 9px; }

/* ── TICKER ───────────────────────────────────────────── */
.l-ticker { background:var(--lime); overflow:hidden; padding:12px 0; }
.l-ttrack { display:flex; animation:l-tickmv 22s linear infinite; white-space:nowrap; }
.l-titem { font-family:'Bebas Neue',sans-serif; font-size:17px; letter-spacing:5px; color:#07090A; padding:0 28px; display:flex; align-items:center; gap:20px; }
.l-titem::after { content:'\25C6'; font-size:8px; opacity:.4; }
@keyframes l-tickmv { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SHARED section styles ────────────────────────────── */
.l-stag { font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:4px; color:var(--lime-ink); text-transform:uppercase; margin-bottom:14px; opacity:.85; transition:color .4s; }
.l-sh { font-family:'Bebas Neue',sans-serif; font-size:clamp(52px,6.5vw,96px); line-height:.9; letter-spacing:1px; }
.l-sh em { font-style:normal; color:var(--lime-ink); }

/* ── HOW IT WORKS ─────────────────────────────────────── */
.l-how { padding:120px 52px; background:var(--l-bg2); border-top:1px solid var(--l-br); transition:background .4s, border-color .4s; }
.l-how-top { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:72px; }
.l-how-desc { font-size:17px; line-height:1.77; color:var(--l-t2); max-width:420px; }
.l-steps { display:grid; grid-template-columns:repeat(3,1fr); background:var(--l-br); gap:1px; }
.l-step { background:var(--l-card); padding:50px 38px; position:relative; overflow:hidden; transition:background .3s; cursor:pointer; }
.l-step:hover { background:var(--l-bg3); }
.l-step::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.l-step:hover::after { transform:scaleX(1); }
.l-snum { font-family:'Bebas Neue',sans-serif; font-size:88px; color:var(--l-br); line-height:1; position:absolute; top:10px; right:18px; pointer-events:none; }
.l-sico { width:52px; height:52px; background:rgba(204,255,0,0.08); border:1px solid rgba(204,255,0,0.18); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:26px; transition:background .3s; }
.l-step:hover .l-sico { background:rgba(204,255,0,0.16); }
.l-stitle { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:900; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.l-stxt { font-size:14px; color:var(--l-t2); line-height:1.65; }

/* ── FEATURES ─────────────────────────────────────────── */
.l-features { padding:120px 52px; }
.l-ftop { text-align:center; margin-bottom:78px; }
.l-fsub { font-size:17px; color:var(--l-t2); max-width:520px; margin:16px auto 0; line-height:1.75; }
.l-fgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--l-br); max-width:1150px; margin:0 auto; }
.l-fcard { background:var(--l-card); padding:50px 42px; position:relative; overflow:hidden; transition:background .3s; cursor:pointer; display:block; text-decoration:none; color:inherit; }
.l-fcard:hover { background:var(--l-bg3); }
.l-fcard.lime { background:var(--lime)!important; }
.l-fcard.lime .l-fct { color:#07090A; }
.l-fcard.lime .l-fcd { color:rgba(7,9,10,0.6); }
.l-fcard.lime .l-ftag { background:rgba(7,9,10,0.1); border-color:rgba(7,9,10,0.2); color:#07090A; }
.l-fcard.lime:hover { background:#D6FF0A!important; }
.l-fco { font-size:34px; margin-bottom:22px; display:block; }
.l-fct { font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; margin-bottom:11px; color:var(--l-text); }
.l-fcd { font-size:14px; color:var(--l-t2); line-height:1.7; }
.l-ftag { display:inline-block; margin-top:20px; background:rgba(204,255,0,0.08); border:1px solid rgba(204,255,0,0.18); color:var(--lime-ink); font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2.5px; padding:4px 10px; }

/* ── EXERCISES ────────────────────────────────────────── */
.l-exs { padding:120px 52px; background:var(--l-bg2); border-top:1px solid var(--l-br); transition:background .4s; }
.l-exhd { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:58px; flex-wrap:wrap; gap:22px; }
.l-exnote { font-size:14px; color:var(--l-t2); line-height:1.65; max-width:280px; }
/* Fixed column counts (all divisors of 36) so the showcase is ALWAYS full
   rows at every width — no ragged last line. */
.l-exgrid { display:grid; grid-template-columns:repeat(12,1fr); gap:1px; background:var(--l-br); }
@media (max-width:1180px){ .l-exgrid { grid-template-columns:repeat(6,1fr); } }
@media (max-width:760px){ .l-exgrid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:520px){ .l-exgrid { grid-template-columns:repeat(3,1fr); } }
.l-excard { background:var(--l-card); padding:28px 18px; text-align:center; cursor:pointer; transition:background .25s; position:relative; overflow:hidden; }
.l-excard::after { content:''; position:absolute; bottom:0; left:0; right:0; height:0; background:var(--lime); transition:height .3s; }
.l-excard:hover::after { height:3px; }
.l-excard:hover { background:rgba(204,255,0,0.07); }
.l-xem { font-size:26px; display:block; margin-bottom:9px; transition:transform .3s; }
.l-excard:hover .l-xem { transform:scale(1.18) rotate(-4deg); }
.l-excard { text-decoration:none; color:inherit; display:block; }
.l-xic { width:56px; height:56px; display:block; margin:0 auto 9px; object-fit:contain; transition:transform .3s; }
.l-excard:hover .l-xic { transform:scale(1.14) rotate(-3deg); }
.l-xnm { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--l-text); }
.l-xmu { font-size:9px; color:var(--l-t3); margin-top:4px; font-family:'Share Tech Mono',monospace; letter-spacing:1.5px; }
.l-exall { display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:14px 26px; font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--l-bg); background:var(--lime); border-radius:2px; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.l-exall:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(204,255,0,0.25); }

/* ── DEMO ─────────────────────────────────────────────── */
/* ── LIVE DEMO ───────────────────────────────────────── */
.l-demo { padding:100px 52px 120px; border-top:1px solid var(--l-br); position:relative; overflow:hidden; }
.l-demo::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:800px; height:800px; background:radial-gradient(circle, rgba(204,255,0,0.04) 0%, transparent 70%); pointer-events:none; }
.l-demo-head { text-align:center; margin-bottom:56px; position:relative; z-index:1; }
.l-demo-sub { font-size:19px; color:var(--l-t2); line-height:1.7; max-width:580px; margin:16px auto 0; }
.l-di { max-width:1100px; margin:0 auto; position:relative; z-index:1; }
.l-exlist { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.l-xrow { background:var(--l-card); border:1px solid var(--l-br); border-radius:40px; padding:10px 20px; display:flex; align-items:center; gap:10px; cursor:pointer; transition:all .2s; }
.l-xrow:hover { background:var(--l-bg3); border-color:rgba(204,255,0,0.2); transform:translateY(-2px); }
.l-xrow.sel { background:rgba(204,255,0,0.07); border-color:rgba(204,255,0,0.3); box-shadow:0 0 20px rgba(204,255,0,0.06); }
.l-xrow.sel .l-xrnm { color:var(--lime-ink); }
.l-xrico { font-size:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.l-xrinfo { display:flex; align-items:center; gap:8px; }
.l-xrnm { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--l-text); transition:color .2s; }
.l-xrdesc { display:none; }
.l-xrst { font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--l-t3); letter-spacing:1.5px; flex-shrink:0; display:none; }
.l-xrow.sel .l-xrst { color:var(--lime-ink); }
.l-exhint { font-size:14px; color:var(--l-t2); text-align:center; margin-top:18px; letter-spacing:0.5px; }

/* Camera mockup */
.l-camwrap { position:relative; }
.l-camwrap::before { content:''; position:absolute; inset:-20px; background:radial-gradient(ellipse at center, rgba(204,255,0,0.06) 0%, transparent 70%); border-radius:28px; pointer-events:none; z-index:0; }
.l-cambox { background:#050D05; border:1px solid rgba(204,255,0,0.15); border-radius:20px; aspect-ratio:4/3; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; z-index:1; box-shadow:0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(204,255,0,0.04); }
.l-cbg { position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(204,255,0,0.05) 0%,transparent 70%); }
.l-cdc { position:absolute; width:24px; height:24px; border-color:var(--lime); border-style:solid; opacity:.38; }
.l-cdc.tl{top:16px;left:16px;border-width:2px 0 0 2px;border-radius:3px 0 0 0}
.l-cdc.tr{top:16px;right:16px;border-width:2px 2px 0 0;border-radius:0 3px 0 0}
.l-cdc.bl{bottom:16px;left:16px;border-width:0 0 2px 2px;border-radius:0 0 0 3px}
.l-cdc.br{bottom:16px;right:16px;border-width:0 2px 2px 0;border-radius:0 0 3px 0}
.l-cscan { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--lime),transparent); box-shadow:0 0 12px var(--lime); animation:l-psweep 2.8s ease-in-out infinite; opacity:0; transition:opacity .3s; border-radius:1px; }
.l-cambox.active .l-cscan { opacity:1; }
.l-chudtl { position:absolute; top:16px; left:16px; z-index:5; }
.l-cxlbl { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px; color:rgba(204,255,0,0.6); }
.l-crep { font-family:'Bebas Neue',sans-serif; font-size:64px; color:var(--lime-ink); line-height:1; text-shadow:0 0 28px var(--lime-glow); }
.l-cfst { font-family:'Share Tech Mono',monospace; font-size:10px; color:rgba(204,255,0,0.45); letter-spacing:2px; }
/* Demo skeleton SVG */
.l-dskel { position:relative; z-index:1; width:120px; height:auto; opacity:0.6; filter:drop-shadow(0 0 12px rgba(204,255,0,0.2)); transition:opacity .4s, filter .4s; }
.l-cambox.active .l-dskel { opacity:1; filter:drop-shadow(0 0 20px rgba(204,255,0,0.35)); }

/* HUD corners & overlays */
.l-fprog { position:absolute; bottom:16px; left:16px; right:16px; z-index:5; }
.l-fpbar { height:4px; background:rgba(204,255,0,0.1); border-radius:3px; overflow:hidden; margin-bottom:6px; }
.l-fpfill { height:100%; background:var(--lime); border-radius:3px; transition:width .4s; box-shadow:0 0 8px var(--lime); width:0%; }
.l-fplbl { font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--lime-ink); letter-spacing:2px; display:flex; justify-content:space-between; }
.l-chudtr { position:absolute; top:16px; right:16px; z-index:5; font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; color:rgba(204,255,0,0.3); display:flex; align-items:center; gap:6px; transition:color .3s; }
.l-clive-dot { width:6px; height:6px; border-radius:50%; background:rgba(204,255,0,0.3); display:inline-block; transition:background .3s, box-shadow .3s; }
.l-cambox.active .l-chudtr { color:var(--lime-ink); }
.l-cambox.active .l-clive-dot { background:var(--lime); box-shadow:0 0 8px var(--lime); animation:l-livepulse 1.5s ease-in-out infinite; }
@keyframes l-livepulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.l-chudbl { position:absolute; bottom:42px; left:16px; z-index:5; display:flex; gap:8px; }
.l-chud-tag { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:1.5px; color:rgba(204,255,0,0.3); background:rgba(204,255,0,0.04); border:1px solid rgba(204,255,0,0.08); border-radius:4px; padding:3px 7px; transition:all .3s; }
.l-cambox.active .l-chud-tag { color:rgba(204,255,0,0.7); border-color:rgba(204,255,0,0.15); background:rgba(204,255,0,0.06); }

/* Controls & stats */
.l-dctrls { display:flex; gap:10px; margin-top:14px; }
.l-dbtn { flex:1; background:var(--lime); color:#07090A; font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:15px; letter-spacing:3px; text-transform:uppercase; padding:16px; border:none; border-radius:12px; cursor:pointer; transition:all .2s; }
.l-dbtn:hover { background:#fff; box-shadow:0 0 32px var(--lime-glow); transform:translateY(-1px); }
.l-dbtn.stop { background:var(--l-bg2); color:var(--l-t2); border:1px solid var(--l-br2); box-shadow:none!important; border-radius:12px; }
.l-dbtn.stop:hover { border-color:var(--lime); color:var(--lime-ink); background:rgba(204,255,0,0.06); transform:translateY(-1px); }
.l-dstats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.l-dscard { background:var(--l-card); border:1px solid var(--l-br); border-radius:12px; padding:18px 16px; text-align:center; transition:all .4s; }
.l-dscard:hover { border-color:rgba(204,255,0,0.15); }
.l-dsval { font-family:'Bebas Neue',sans-serif; font-size:36px; color:var(--lime-ink); line-height:1; transition:color .4s; }
.l-dslbl { font-family:'Share Tech Mono',monospace; font-size:8px; color:var(--l-t3); letter-spacing:2px; margin-top:4px; }

/* ── LEADERBOARD ──────────────────────────────────────── */
.l-lb { padding:120px 52px; background:var(--l-bg2); border-top:1px solid var(--l-br); display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; transition:background .4s; }
.l-lbtable { border:1px solid var(--l-br); overflow:hidden; }
.l-lbth { display:grid; grid-template-columns:50px 1fr 90px 80px; padding:13px 22px; background:rgba(204,255,0,0.04); border-bottom:1px solid var(--l-br); }
.l-lbth span { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2.5px; color:var(--l-t3); text-transform:uppercase; }
.l-lbrow { display:grid; grid-template-columns:50px 1fr 90px 80px; padding:16px 22px; border-bottom:1px solid var(--l-br); align-items:center; transition:background .2s; cursor:pointer; }
.l-lbrow:last-child { border-bottom:none; }
.l-lbrow:hover { background:rgba(204,255,0,0.04); }
.l-lbrow-cta { cursor:pointer !important; }
.l-lbrow-cta:hover { background:rgba(204,255,0,0.1) !important; }
.l-lbrow.g1 { background:rgba(204,255,0,0.06); }
.l-lbrow.g1 .l-lbnm { color:var(--lime-ink); }
.l-lbrank { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--l-t3); }
.l-lbrank.top { color:var(--lime-ink); }
.l-lbuser { display:flex; align-items:center; gap:12px; }
.l-lbav { width:34px; height:34px; border-radius:50%; background:rgba(204,255,0,0.09); display:flex; align-items:center; justify-content:center; font-size:15px; }
.l-lbnm { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700; color:var(--l-text); }
.l-lbxp { font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--lime-ink); text-align:right; }
.l-lbstr { font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--l-t3); text-align:right; }

/* ── AI WORKOUT PLANNER ──────────────────────────────── */
.l-planner { padding:120px 52px; border-top:1px solid var(--l-br); position:relative; overflow:hidden; }
.l-pl-grid-bg { position:absolute; inset:0; background-image:linear-gradient(var(--l-br) 1px,transparent 1px),linear-gradient(90deg,var(--l-br) 1px,transparent 1px); background-size:48px 48px; opacity:0.3; }
.l-pl-content { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; max-width:1150px; margin:0 auto; }
.l-pl-left { }
.l-pl-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(48px,6vw,80px); line-height:.92; margin:20px 0 24px; }
.l-pl-title em { font-style:normal; color:var(--lime-ink); }
.l-pl-desc { font-size:17px; color:var(--l-t2); line-height:1.77; margin-bottom:28px; max-width:480px; }
.l-pl-perks { list-style:none; padding:0; margin:0 0 36px; display:flex; flex-direction:column; gap:14px; }
.l-pl-perks li { display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--l-t2); line-height:1.5; }
.l-pl-check { color:var(--lime-ink); font-weight:700; font-size:14px; flex-shrink:0; width:22px; height:22px; border-radius:50%; background:rgba(204,255,0,0.1); display:flex; align-items:center; justify-content:center; }
.l-pl-ctas { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.l-pl-cta { font-size:16px; padding:18px 44px; }
.l-pl-note { font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--l-t3); letter-spacing:2px; }

/* ── Planner mockup card ─────────────────────────────── */
.l-pl-mock { background:var(--l-card); border:1px solid var(--l-br); border-radius:16px; overflow:hidden; box-shadow:0 8px 48px rgba(0,0,0,0.3), 0 0 60px rgba(204,255,0,0.04); }
.l-pl-mock-hdr { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--l-br); }
.l-pl-mock-title { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--l-t1); }
.l-pl-mock-badge { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; color:#07090A; background:var(--lime); padding:3px 10px; border-radius:4px; }
.l-pl-days { padding:8px 0; }
.l-pl-day { display:grid; grid-template-columns:48px 1fr 60px 32px; align-items:center; padding:12px 22px; border-bottom:1px solid rgba(255,255,255,0.04); transition:background 0.2s; }
.l-pl-day:last-child { border-bottom:none; }
.l-pl-dn { font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:1.5px; color:var(--l-t3); }
.l-pl-dex { font-size:14px; color:var(--l-t2); font-weight:500; }
.l-pl-dd { font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--l-t3); text-align:right; }
.l-pl-di { font-size:13px; color:var(--l-t3); text-align:center; }
.l-pl-done .l-pl-dn { color:var(--lime-ink); }
.l-pl-done .l-pl-dex { color:var(--l-t1); }
.l-pl-done .l-pl-di { color:var(--lime-ink); }
.l-pl-active { background:rgba(204,255,0,0.06); border-left:3px solid var(--lime); }
.l-pl-active .l-pl-dn { color:var(--lime-ink); font-weight:700; }
.l-pl-active .l-pl-dex { color:var(--lime-ink); font-weight:700; }
.l-pl-active .l-pl-di { color:var(--lime-ink); font-weight:700; }
.l-pl-rest .l-pl-dex { color:var(--l-t3); font-style:italic; }
.l-pl-mock-foot { padding:14px 22px; border-top:1px solid var(--l-br); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.l-pl-mock-stat { font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--l-t3); letter-spacing:1px; white-space:nowrap; }
.l-pl-mock-bar { flex:1; height:6px; background:var(--l-br); border-radius:3px; overflow:hidden; }
.l-pl-mock-fill { height:100%; background:var(--lime); border-radius:3px; box-shadow:0 0 8px var(--lime-glow); transition:width 1.5s ease; }

/* ── SOCIAL PROOF ─────────────────────────────────────── */
.l-proof { padding:120px 52px; background:var(--l-bg2); border-top:1px solid var(--l-br); transition:background .4s; }
.l-proof-top { text-align:center; margin-bottom:64px; }
.l-revgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--l-br); max-width:1150px; margin:0 auto; }
.l-rcard { background:var(--l-card); padding:44px 40px; transition:background .3s; cursor:pointer; }
.l-rcard:hover { background:var(--l-bg3); }
.l-rstars { color:var(--lime-ink); font-size:14px; letter-spacing:3px; margin-bottom:18px; }
.l-rtxt { font-size:15px; line-height:1.78; color:var(--l-t2); margin-bottom:24px; font-style:italic; }
.l-rmeta { display:flex; align-items:center; gap:12px; }
.l-rav { width:38px; height:38px; border-radius:50%; background:rgba(204,255,0,0.1); display:flex; align-items:center; justify-content:center; font-size:18px; }
.l-rnm { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.l-rsince { font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--l-t3); letter-spacing:2px; }

/* ── CTA ──────────────────────────────────────────────── */
.l-cta { padding:160px 52px; text-align:center; position:relative; overflow:hidden; }
.l-ctabg { position:absolute; inset:0; background:radial-gradient(ellipse 70% 65% at 50% 50%,rgba(204,255,0,0.08) 0%,transparent 70%); }
.l-ctagrid { position:absolute; inset:0; background-image:linear-gradient(var(--l-br) 1px,transparent 1px),linear-gradient(90deg,var(--l-br) 1px,transparent 1px); background-size:48px 48px; }
.l-ctat { font-family:'Bebas Neue',sans-serif; font-size:clamp(64px,9vw,132px); line-height:.9; position:relative; z-index:1; }
.l-ctat em { font-style:normal; color:var(--lime-ink); }
.l-ctasub { font-family:'Barlow Condensed',sans-serif; font-size:18px; letter-spacing:6px; color:var(--l-t3); text-transform:uppercase; margin:20px 0 52px; position:relative; z-index:1; }
.l-ctabtns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
.l-ctanote { font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--l-t3); letter-spacing:3px; margin-top:22px; position:relative; z-index:1; }

/* ── FOOTER ───────────────────────────────────────────── */
.l-footer { border-top:1px solid var(--l-br); padding:36px 52px; display:flex; align-items:center; justify-content:space-between; transition:border-color .4s; }
.l-flogo { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:6px; color:var(--lime-ink); transition:color .4s; }
.l-fcopy { font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--l-t3); letter-spacing:2px; }
.l-flinks { display:flex; gap:24px; list-style:none; }
.l-flinks a { font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--l-t3); text-decoration:none; letter-spacing:2px; transition:color .2s; cursor:pointer; }
.l-flinks a:hover { color:var(--lime-ink); }

/* ── LIGHT MODE overrides ─────────────────────────────── */
[data-theme="light"] .l-h1 em        { color:var(--l-text); text-shadow:none; }
[data-theme="light"] .l-sh em        { color:var(--l-text); }
[data-theme="light"] .l-ctat em      { color:var(--l-text); }
[data-theme="light"] .l-kv           { color:var(--l-text); }
[data-theme="light"] .l-stag         { color:var(--l-t2); }
[data-theme="light"] .l-eyebrow      { color:var(--l-text); background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.12); }
[data-theme="light"] .l-edot         { background:var(--l-text); }
[data-theme="light"] .l-fchip        { color:var(--l-text); }
[data-theme="light"] .l-lbrank.top   { color:var(--l-text); }
[data-theme="light"] .l-lbrow.g1 .l-lbnm { color:var(--l-text); }
[data-theme="light"] .l-lbxp         { color:var(--l-text); }
[data-theme="light"] .l-dsval        { color:var(--l-text); }
[data-theme="light"] .l-sbig         { color:var(--l-text); text-shadow:none; }
[data-theme="light"] .l-rstars       { color:var(--l-text); }
[data-theme="light"] .l-crep         { color:var(--l-text); text-shadow:none; }
[data-theme="light"] .l-fplbl        { color:var(--l-text); }
[data-theme="light"] .l-flogo        { color:var(--l-text); }
[data-theme="light"] .l-xrow.sel .l-xrnm { color:var(--l-text); }
[data-theme="light"] .l-xrow.sel .l-xrst { color:var(--l-text); }
[data-theme="light"] .l-cambox { background:#0a120a; box-shadow:0 20px 60px rgba(0,0,0,0.15); }
[data-theme="light"] .l-lbrow.g1     { background:rgba(0,0,0,0.04); }
[data-theme="light"] .l-hmesh {
    background:
        radial-gradient(ellipse 55% 65% at 85% 48%, rgba(204,255,0,0.3) 0%,transparent 65%),
        radial-gradient(ellipse 35% 40% at 12% 78%, rgba(204,255,0,0.15) 0%,transparent 58%);
}

/* ── EXIT-INTENT MODAL ───────────────────────────────── */
.exit-modal { position:fixed; inset:0; z-index:200000; display:flex; align-items:center; justify-content:center; padding:20px; }
.exit-modal.hidden { display:none; }
.exit-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .3s; }
.exit-modal-visible .exit-modal-backdrop { background:rgba(0,0,0,0.75); backdrop-filter:blur(6px); }
.exit-modal-card {
    position:relative; z-index:1; background:var(--l-card); border:1px solid var(--l-br);
    border-radius:24px; padding:48px 40px 40px; max-width:420px; width:100%; text-align:center;
    transform:scale(0.85) translateY(30px); opacity:0; transition:transform .4s cubic-bezier(.2,.9,.3,1.2), opacity .3s;
    box-shadow:0 24px 80px rgba(0,0,0,0.5), 0 0 80px rgba(204,255,0,0.05);
}
[data-theme="light"] .exit-modal-card { box-shadow:0 24px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06); }
.exit-modal-visible .exit-modal-card { transform:scale(1) translateY(0); opacity:1; }
.exit-modal-close {
    position:absolute; top:16px; right:16px; background:none; border:none;
    color:var(--l-t3); font-size:28px; cursor:pointer; line-height:1;
    width:36px; height:36px; border-radius:50%; transition:background .2s, color .2s;
}
.exit-modal-close:hover { background:rgba(255,255,255,0.08); color:#fff; }
[data-theme="light"] .exit-modal-close:hover { background:rgba(0,0,0,0.06); color:#111; }
.exit-modal-emoji { font-size:56px; margin-bottom:16px; }
.exit-modal-title {
    font-family:'Bebas Neue',sans-serif; font-size:clamp(28px,5vw,36px); line-height:1.1;
    color:var(--l-text); margin:0 0 12px; letter-spacing:0.5px;
}
.exit-modal-desc { font-size:15px; color:var(--l-t2); line-height:1.7; margin:0 0 24px; }
.exit-modal-stats {
    display:flex; justify-content:center; gap:28px; margin-bottom:28px;
    padding:16px 0; border-top:1px solid var(--l-br); border-bottom:1px solid var(--l-br);
}
.exit-modal-stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.exit-modal-num { font-family:'Bebas Neue',sans-serif; font-size:24px; color:var(--lime,#CCFF00); }
[data-theme="light"] .exit-modal-num { color:#1A8C00; }
.exit-modal-lbl { font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--l-t3); letter-spacing:2px; text-transform:uppercase; }
.exit-modal-cta {
    width:100%; padding:16px; border:none; border-radius:14px; cursor:pointer;
    background:var(--lime,#CCFF00); color:#07090A; font-family:'Barlow Condensed',sans-serif;
    font-weight:900; font-size:16px; letter-spacing:3px; text-transform:uppercase;
    transition:box-shadow .2s, transform .15s;
}
.exit-modal-cta:hover { box-shadow:0 0 24px rgba(204,255,0,0.3); }
.exit-modal-cta:active { transform:scale(0.97); }
.exit-modal-note { font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--l-t3); letter-spacing:1.5px; margin-top:12px; }

/* ── SCROLL REVEAL ────────────────────────────────────── */
.l-rv { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.l-rv.in { opacity:1; transform:none; }
.l-rvd1{transition-delay:.1s} .l-rvd2{transition-delay:.2s} .l-rvd3{transition-delay:.3s}

/* ── ANIMATIONS ───────────────────────────────────────── */
@keyframes l-reppop { 0%{transform:scale(.6) translateY(8px);opacity:0} 65%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
.l-reppop { animation:l-reppop .28s cubic-bezier(.4,0,.2,1) both; }
@keyframes l-xpflash { 0%{color:var(--lime-ink)} 50%{color:#fff;text-shadow:0 0 20px #fff} 100%{color:var(--lime-ink)} }
.l-xpfl { animation:l-xpflash .4s ease both; }

/* ── RESPONSIVE ───────────────────────────────────────── */
/* This block used to make the links BIGGER as the window got narrower — gap
   4px to 16px, font 14.08px to 15px — so nine links plus the brand plus three
   controls stopped fitting somewhere around 1280, the commonest laptop width.
   .l-nav has overflow:hidden, so instead of wrapping they were clipped and
   painted straight over the buttons: "Sign In" and "For Coaches" rendered on
   top of each other as one illegible word. Now it tightens, and the two links
   the footer already carries step aside before anything can collide. */
@media(max-width:1439px) and (min-width:1001px){
    .l-nav{padding:0 16px;}
    .l-nlinks{gap:0;}
    .l-nlinks a{font-size:13.5px;padding:10px 7px;}
    .l-ncta,.l-ncta-alt{font-size:13.5px;padding:7px 12px;}
    .l-nav-extra{display:none;}
}
/* a backstop at every width: a link that does not fit is clipped at the list's
   own edge, never over what comes after it */
.l-nlinks{overflow:hidden;}
@media(max-width:1000px){
    .l-nav{padding:0 22px;} .l-nlinks{display:none;}
    .l-hero{grid-template-columns:1fr;padding:100px 22px 60px;gap:50px;}
    /* The phone mockup used to be order:-1 here. Its screen is aspect-ratio
       9/19.5, so on a 390px viewport it renders ~750px tall and pushed the
       headline, the tagline AND both CTAs entirely below the fold — a phone
       visitor landed on a picture with no proposition and nothing to tap.
       Text first, visual after, and cap the height so it can't swallow the
       viewport on the way down either. */
    .l-hright{margin-bottom:20px;} .l-fchip{display:none;}
    .l-phone{max-width:300px;margin:0 auto;}
    .l-how-top{grid-template-columns:1fr;} .l-steps{grid-template-columns:1fr;}
    .l-fgrid{grid-template-columns:1fr;} .l-di{grid-template-columns:1fr;}
    .l-lb{grid-template-columns:1fr;padding:80px 22px;} .l-revgrid{grid-template-columns:1fr;}
    .l-how,.l-exs,.l-features,.l-demo,.l-proof,.l-planner,.l-cta{padding-left:22px;padding-right:22px;}
    .l-pl-content{grid-template-columns:1fr;gap:40px;} .l-pl-title{font-size:clamp(40px,8vw,60px);}
    .l-footer{flex-direction:column;gap:18px;text-align:center;padding:26px 22px;}
    .l-ctabtns{flex-direction:column;align-items:center;} .l-hkpis{gap:22px;}
    #landing-cursor-dot, #landing-cursor-ring { display:none; }
    #landing-screen { cursor:auto; }
}

/* Hide cursor on touch devices */
@media(pointer: coarse){
    #landing-cursor-dot, #landing-cursor-ring { display:none; }
    #landing-screen { cursor:auto; }
}

/* ── Utility classes (moved from inline styles) ──────────────────────── */
.l-particles-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.l-kv-inf { font-size: clamp(24px, 3vw, 40px); }
.l-cta-bottom-btn { font-size: 16px; padding: 19px 56px; }
.l-cta-bottom-link { font-size: 16px; padding: 18px 40px; }
.l-lbth-right { text-align: right; }
.l-lbrow-dashed { border-top: 2px dashed rgba(204, 255, 0, 0.15); cursor: pointer; }
.l-lbav-dim { opacity: 0.5; }
.l-lbnm-accent { color: var(--lime, var(--accent)); }
.l-lbval-dim { color: var(--l-t3); }
.l-sh-mb { margin-bottom: 22px; }
.l-lb-desc { font-size: 16px; color: var(--l-t2); line-height: 1.77; max-width: 420px; }
.l-pl-mock-fill-80 { width: 80%; }

/* Mobile hero CTAs: stack full-width, lead with the no-signup trial (lower
   friction → higher downstream signup on phones). */
@media (max-width: 560px) {
    .l-hbtns { flex-direction: column; align-items: stretch; gap: 10px; }
    .l-hbtns .l-blime, .l-hbtns .l-bghost { width: 100%; text-align: center; padding-left: 0; padding-right: 0; }
    .l-hbtns .l-try-btn { order: -1; border-color: var(--lime); color:var(--lime-ink); }
}

/* ── Partner / referral program section ─────────────────────────────── */
.l-refer { max-width: 900px; margin: 0 auto; padding: 88px 24px; text-align: center; }
.l-refer-sub { font-size: 18px; color: var(--txt-dim, #9a9aa2); max-width: 560px; margin: 0 auto 40px; line-height: 1.5; }
.l-refer-sub em { font-style: normal; color:var(--lime-ink); }
.l-refer-tiers { display: flex; align-items: stretch; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.l-rt {
    flex: 0 1 240px; padding: 28px 22px; border-radius: 20px;
    background: linear-gradient(160deg, rgba(204,255,0,0.10), rgba(204,255,0,0.02));
    border: 1px solid rgba(204,255,0,0.28);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.l-rt-2 { background: linear-gradient(160deg, rgba(120,180,255,0.10), rgba(120,180,255,0.02)); border-color: rgba(120,180,255,0.28); }
.l-rt-badge { font-family:'Share Tech Mono',monospace; font-size: 11px; letter-spacing: 3px; color: var(--txt-dim, #9a9aa2); }
.l-rt-rate { font-family:'Bebas Neue',sans-serif; font-size: 68px; line-height: .85; color:var(--lime-ink); }
.l-rt-2 .l-rt-rate { color: #8FB8FF; }
.l-rt-lbl { font-size: 14px; color: var(--txt-dim, #9a9aa2); }
.l-rt-lbl em { font-style: normal; color: #fff; }
.l-rt-plus { align-self: center; font-family:'Bebas Neue',sans-serif; font-size: 44px; color: var(--txt-dim, #9a9aa2); }
.l-refer-note { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--txt-dim, #9a9aa2); margin-bottom: 30px; }
@media (max-width: 560px) { .l-refer-tiers { flex-direction: column; align-items: center; } .l-rt-plus { transform: rotate(90deg); } }

/* Challenge / free-month guarantee line on the closing CTA */
.l-cta-guarantee {
    position: relative; z-index: 1;
    max-width: 600px; margin: 0 auto 26px;
    font-size: 16px; line-height: 1.5; font-weight: 600;
    color: #16200a;                       /* dark text — readable on the lime card in any theme */
    background: rgba(204,255,0,0.9); border: 1px solid #9bcc00;
    border-radius: 14px; padding: 15px 22px;
}
.l-cta-guarantee strong { color: #07090A; font-weight: 900; }
.l-cta-guarantee em { font-style: normal; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ── Before you start ───────────────────────────────────────────────────────
   Four answers that already shipped as FAQPage structured data while appearing
   on no page, which is markup for content that does not exist. They read as
   objections, so they sit right before the last call to action. Collapsed by
   default: a wall of prose between the referral tiers and "Ready to become a
   legend?" would just be something to scroll past. */
.l-faq { max-width: 780px; margin: 0 auto; padding: 88px 24px; }
.l-faq .l-proof-top { margin-bottom: 40px; }
.l-faq-list { display: flex; flex-direction: column; gap: 12px; }
.l-faq-item {
    background: var(--l-card, #101216);
    border: 1px solid var(--l-br, rgba(255,255,255,0.08));
    border-radius: 14px;
    overflow: hidden;
}
.l-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 52px 20px 22px;
    position: relative;
    font-size: 17px;
    font-weight: 700;
    color: var(--l-t1, #f0f0f5);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.l-faq-item summary::-webkit-details-marker { display: none; }
.l-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    font-size: 22px;
    font-weight: 400;
    color: var(--lime-ink, #ccff00);
    transition: transform .18s;
}
.l-faq-item[open] summary::after { content: '\2212'; }
.l-faq-item summary:focus-visible { outline: 2px solid var(--lime-ink, #ccff00); outline-offset: -2px; }
.l-faq-item:hover { border-color: rgba(204,255,0,0.28); }
.l-faq-item p {
    margin: 0;
    padding: 0 22px 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--l-t2, #b6b6c0);
}
@media (max-width: 600px) {
    .l-faq { padding: 64px 20px; }
    .l-faq-item summary { font-size: 16px; padding: 18px 48px 18px 18px; }
    .l-faq-item p { padding: 0 18px 18px; font-size: 14.5px; }
}