/* Shared styling for the PUBLIC marketing pages (landing, /l7).
   Extracted from landing.html so a second public page cannot drift from the
   first: two copies of this would diverge the moment either is touched, and
   these pages are the product's front door.
   Colours come from themes.css design tokens, never hardcoded, so both light
   and dark themes keep working. Page-SPECIFIC rules stay inline in the page
   that needs them. */
*{box-sizing:border-box;}
    body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
         background:var(--bg);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased;}
    a{color:inherit;text-decoration:none;}
    .wrap{max-width:1120px;margin:0 auto;padding:0 22px;}
    /* nav */
    .nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
         background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--border);}
    .nav__in{display:flex;align-items:center;gap:18px;height:64px;}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em;}
    .brand img{width:30px;height:30px;}
    .brand span b{color:var(--accent);}
    .nav__links{display:flex;gap:22px;margin-left:14px;}
    .nav__links a{font-size:14px;color:var(--fg-dim);}
    .nav__links a:hover{color:var(--fg);}
    .nav__right{margin-left:auto;display:flex;align-items:center;gap:12px;}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;
         border-radius:10px;font-weight:600;font-size:14.5px;cursor:pointer;border:1px solid transparent;transition:.15s;white-space:nowrap;}
    .btn--primary{background:var(--primary);color:var(--primary-fg);}
    .btn--primary:hover{background:var(--primary-hov);transform:translateY(-1px);}
    .btn--ghost{border-color:var(--border-strong);color:var(--fg);}
    .btn--ghost:hover{background:var(--bg-hover);}
    .btn--lg{height:50px;padding:0 26px;font-size:15.5px;}
    .tgl{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;
         border:1px solid var(--border-strong);background:transparent;color:var(--fg);cursor:pointer;}
    .tgl:hover{background:var(--bg-hover);}
    /* Keep nav links reachable on phones (no hamburger on the marketing pages):
       wrap them tighter instead of hiding outright until there's truly no room. */
    @media(max-width:820px){.nav__links{gap:14px;font-size:13px;flex-wrap:wrap;}}
    @media(max-width:520px){.nav__links{display:none;}}
    /* hero */
    .hero{padding:86px 0 60px;text-align:center;position:relative;overflow:hidden;}
    .hero::before{content:"";position:absolute;inset:-40% 50% auto;width:900px;height:520px;transform:translateX(-50%);
         background:radial-gradient(closest-side,color-mix(in srgb,var(--primary) 16%,transparent),transparent);
         pointer-events:none;z-index:-1;}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
         text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
         background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;padding:6px 14px;margin-bottom:22px;}
    .hero h1{font-size:clamp(34px,6vw,62px);line-height:1.05;letter-spacing:-.03em;font-weight:850;margin:0 0 20px;}
    .hero h1 .grad{background:linear-gradient(120deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
    .hero p{font-size:clamp(16px,2vw,19px);color:var(--fg-muted);max-width:660px;margin:0 auto 32px;}
    .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
    .hero__note{margin-top:18px;font-size:13px;color:var(--fg-dim);}
    /* stat band */
    .band{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--border);
          border:1px solid var(--border);border-radius:16px;overflow:hidden;margin:44px 0 0;}
    .band > div{background:var(--surface);padding:22px 18px;text-align:center;}
    .band .n{font-family:'Fira Code',ui-monospace,monospace;font-size:26px;font-weight:700;letter-spacing:-.02em;}
    .band .l{font-size:12.5px;color:var(--fg-dim);margin-top:4px;}
    /* sections */
    .sec{padding:76px 0;border-top:1px solid var(--border);}
    .sec__eyebrow{text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:10px;}
    .sec h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;margin:0 0 10px;text-align:center;font-weight:800;}
    .sec .lead{text-align:center;color:var(--fg-muted);max-width:620px;margin:0 auto 42px;font-size:16px;}
    .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
    .feat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px;transition:.18s;}
    .feat:hover{border-color:var(--border-strong);box-shadow:var(--shadow);transform:translateY(-2px);}
    .feat__ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
         background:color-mix(in srgb,var(--primary) 13%,transparent);color:var(--primary);}
    .feat:nth-child(even) .feat__ico{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);}
    .feat__ico svg{width:21px;height:21px;}
    .feat h3{margin:0 0 8px;font-size:17px;font-weight:700;}
    .feat p{margin:0;color:var(--fg-muted);font-size:14.5px;}
    /* flow */
    .flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:stretch;}
    .hop{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:20px 18px;position:relative;}
    .hop .k{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:6px;}
    .hop .t{font-weight:700;font-size:15.5px;margin-bottom:4px;}
    .hop .d{font-size:13.5px;color:var(--fg-muted);}
    .hop--hidden{border-style:dashed;background:transparent;}
    .hop--hidden .t{color:var(--accent);}
    /* faq */
    .faq details{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:11px;}
    .faq details[open]{border-color:var(--border-strong);}
    .faq summary{cursor:pointer;font-weight:650;font-size:15.5px;list-style:none;display:flex;align-items:center;gap:10px;}
    .faq summary::-webkit-details-marker{display:none;}
    .faq summary::before{content:"+";color:var(--primary);font-weight:700;font-size:18px;line-height:1;}
    .faq details[open] summary::before{content:"–";}
    .faq p{color:var(--fg-muted);margin:12px 0 0;font-size:14.5px;padding-left:24px;}
    /* final cta */
    .final{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:54px 26px;margin:0 0 70px;}
    .final h2{font-size:clamp(23px,3vw,30px);margin:0 0 10px;letter-spacing:-.02em;font-weight:800;}
    .final p{color:var(--fg-muted);margin:0 auto 26px;max-width:520px;}
    footer{border-top:1px solid var(--border);padding:32px 0;color:var(--fg-dim);font-size:13.5px;}
    .foot__in{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
    .foot__in a{color:var(--fg-muted);}
    .foot__in a:hover{color:var(--fg);}
    @media(max-width:640px){.hero{padding:56px 0 40px;}.sec{padding:52px 0;}}