/* ============================================================
   LearnWithOliver - logged-out / landing stylesheet
   "DRAFTING TABLE" edition - after spaceplanner.co.
   Clean product-tool look: white sheet, slate ink, one
   blueprint blue, graph-paper grid and dimension-line marks.
   Dark mode = cyanotype (white lines on blueprint navy).
   Drop-in replacement: all original class names preserved.
   Requires in <head>: Geist + Geist Mono (Google Fonts) and
   Font Awesome 6 (icons).
   NOTE: .d-lang-panel deliberately carries no transform /
   filter / backdrop-filter (stacking-context constraint).
   ============================================================ */

/* ================= design tokens ================= */
:root{
    color-scheme:light;

    /* surfaces */
    --bg:#F7F8FA;
    --bg-2:#EEF1F5;
    --surface:#FFFFFF;

    /* ink (slate) */
    --ink:#0F172A;
    --ink-2:#475569;
    --ink-3:#64748B;
    --line:#E2E8F0;
    --line-strong:#CBD5E1;

    /* brand - one blueprint blue */
    --accent:#1D4ED8;
    --accent-hover:#1E40AF;
    --accent-2:#3B82F6;
    --accent-3:#F59E0B;
    --accent-soft:#EEF3FF;
    --accent-text:#1D4ED8;
    --amber:#F59E0B;
    --teal:#0EA5E9;
    --forest:#0B2250;
    --navy:#0B2250;

    /* drafting marks */
    --dim:color-mix(in srgb, var(--accent) 55%, transparent);
    --grid-minor:rgba(29,78,216,.055);
    --grid-major:rgba(29,78,216,.11);

    /* semantics */
    --text:var(--ink); --text-2:var(--ink-2); --text-3:var(--ink-3);
    --border:var(--line);

    /* legacy gradient tokens (kept for inline styles / old templates) */
    --grad-brand:linear-gradient(180deg,#2563EB,#1D4ED8);
    --grad-text:linear-gradient(90deg,#1D4ED8,#1D4ED8);
    --grad-teal:linear-gradient(135deg,#0B2250,#1D4ED8);

    /* legacy aliases */
    --cream:var(--bg); --cream-2:var(--bg-2); --ink-soft:var(--ink-2);

    --radius:16px; --radius-sm:10px;
    --shadow:0 1px 2px rgba(15,23,42,.06);
    --shadow-lg:0 14px 34px -14px rgba(15,23,42,.22);
    --glow:0 10px 26px -10px rgba(29,78,216,.5);
    --transition:.2s cubic-bezier(.4,0,.2,1);
    --ease-spring:cubic-bezier(.2,.8,.2,1);

    --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
html[data-theme="dark"]{
    color-scheme:dark;
    --bg:#081630;
    --bg-2:#0C1E3E;
    --surface:#0F2447;
    --ink:#E8EEF9;
    --ink-2:#A9BAD6;
    --ink-3:#7F93B5;
    --line:rgba(190,212,255,.13);
    --line-strong:rgba(190,212,255,.24);
    --accent:#5B8CFF;
    --accent-hover:#7AA2FF;
    --accent-2:#8AB0FF;
    --accent-soft:rgba(91,140,255,.14);
    --accent-text:#9DBBFF;
    --amber:#FBBF24;
    --navy:#061127;
    --grid-minor:rgba(190,212,255,.05);
    --grid-major:rgba(190,212,255,.1);
    --grad-brand:linear-gradient(180deg,#3B6DF0,#2F5FE0);
    --grad-text:linear-gradient(90deg,#8AB0FF,#8AB0FF);
    --shadow:0 1px 2px rgba(0,0,0,.35);
    --shadow-lg:0 18px 40px -16px rgba(0,0,0,.6);
    --glow:0 10px 28px -10px rgba(91,140,255,.55);
}

/* ================= base ================= */
*, *::before, *::after{ box-sizing:border-box; }
html{
    scroll-behavior:smooth;
    scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
::selection{ background:var(--accent); color:#fff; }

body{
    margin:0;
    font-family:var(--font);
    font-size:16px;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    font-feature-settings:"ss01","cv11";
}

h1,h2,h3,h4{ font-family:var(--font); color:var(--text); }
h1,h2{ letter-spacing:-0.03em; font-weight:650; }
h1,h2,h3,h4,p,ul{ margin:0 0 0.6em; }
.d-hero-title, .d-section-head h2, .d-cta-final h2, .d-landing-hero h1{ text-wrap:balance; }
p{ text-wrap:pretty; }

a{
    color:var(--accent-text);
    text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent);
    text-underline-offset:3px;
    transition:color .2s, text-decoration-color .2s;
}
a:hover{ text-decoration-color:currentColor; }
img{ max-width:100%; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* generic form elements (contact / login / password pages) */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], select, textarea{
    width:100%; padding:11px 13px; border-radius:var(--radius-sm);
    border:1px solid var(--line-strong); background:var(--surface); color:var(--text);
    font-family:inherit; font-size:15px;
    box-shadow:var(--shadow);
    transition:border-color .2s, box-shadow .2s;
}
input:hover, select:hover, textarea:hover{ border-color:color-mix(in srgb, var(--ink) 30%, transparent); }
input:focus, select:focus, textarea:focus{
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
::placeholder{ color:var(--text-3); opacity:.85; }
input[type="checkbox"], input[type="radio"]{ width:auto; accent-color:var(--accent); box-shadow:none; }
label{ font-size:13.5px; font-weight:550; color:var(--text-2); }

/* ================= layout ================= */
.d-container{ max-width:1200px; margin:0 auto; padding:0 24px 24px; }
.d-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:28px;
    margin:24px 0;
    transition:border-color .25s;
}
.d-card:hover{ border-color:var(--line-strong); }

/* ================= buttons ================= */
.d-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 18px; border-radius:var(--radius-sm);
    border:1px solid var(--line-strong);
    background:var(--surface);
    color:var(--text);
    font-family:inherit; font-size:14.5px; font-weight:550;
    text-decoration:none; cursor:pointer;
    box-shadow:var(--shadow);
    transition:border-color var(--transition), color var(--transition), background var(--transition), box-shadow var(--transition);
}
.d-btn:hover{
    border-color:var(--accent); color:var(--accent-text);
    background:var(--accent-soft); text-decoration:none;
}
.d-btn:active{ transform:translateY(1px); }
.d-btn-sm{ padding:8px 14px; font-size:14px; }
.d-btn-primary{
    background:var(--accent); border-color:var(--accent); color:#fff;
    box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -8px rgba(29,78,216,.6);
}
.d-btn-primary:hover{
    background:var(--accent-hover); border-color:var(--accent-hover); color:#fff;
    box-shadow:0 1px 0 rgba(255,255,255,.18) inset, var(--glow);
}
.d-btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.d-btn-block{ width:100%; justify-content:center; }

/* big CTA button (hero + forms) */
.d-btn-hero{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    background:var(--accent); color:#fff;
    padding:15px 26px; border-radius:12px;
    text-decoration:none; font-weight:600; font-size:16px; letter-spacing:-0.005em;
    border:1px solid var(--accent); cursor:pointer;
    box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 10px 24px -10px rgba(29,78,216,.65);
    transition:background .2s, box-shadow .2s, transform .15s;
}
.d-btn-hero::after{ content:none; }
.d-btn-hero:hover{
    background:var(--accent-hover); border-color:var(--accent-hover);
    color:#fff; text-decoration:none;
    box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 16px 32px -12px rgba(29,78,216,.7);
}
.d-btn-hero:active{ transform:translateY(1px); }
.d-btn-hero i{ transition:transform .2s var(--ease-spring); }
.d-btn-hero:hover i{ transform:translateX(3px); }

/* ================= topbar ================= */
.topbar{
    position:sticky; top:0; z-index:500;
    background:color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
    border-bottom:1px solid var(--line);
}
.topbar::after{ content:none; }
.topbar-inner{
    max-width:1200px; margin:0 auto; padding:12px 24px;
    display:flex; align-items:center; gap:8px;
}
.topbar-inner .spacer{ flex:1; }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand:hover{ text-decoration:none; }
.brand .logo{ width:38px; height:38px; flex-shrink:0; }
.brand .logo img{ width:38px; height:auto; display:block; }
.brand .logo .logo-dark{ display:none; }
html[data-theme="dark"] .brand .logo .logo-light{ display:none; }
html[data-theme="dark"] .brand .logo .logo-dark{ display:block; }
.brand-name{ font-family:var(--font); font-weight:650; font-size:19px; letter-spacing:-0.025em; color:var(--text); }
.brand-name em{ font-style:normal; color:var(--accent-text); }

.d-nav{ display:none; gap:2px; align-items:center; }
@media (min-width:880px){ .d-nav{ display:flex; } }

.d-nav-link{
    position:relative;
    padding:8px 13px; border-radius:8px;
    font-size:14.5px; font-weight:500;
    color:var(--text-2); text-decoration:none;
    transition:color var(--transition), background var(--transition);
}
.d-nav-link::after{ content:none; }
.d-nav-link:hover{ color:var(--text); background:var(--bg-2); text-decoration:none; }
.d-nav-link.d-nav-active{ color:var(--accent-text); background:var(--accent-soft); }
.topbar .d-btn.d-nav-active{ border-color:var(--accent); color:var(--accent-text); }

/* hamburger -> X morph */
.menu-switch{
    display:grid; place-items:center; align-content:center; gap:5px;
    width:42px; height:42px; border-radius:10px;
    border:1px solid var(--line-strong);
    background:var(--surface);
    padding:10px; cursor:pointer;
    transition:border-color var(--transition);
}
.menu-switch span{
    display:block; width:18px; height:2px;
    background:var(--text); border-radius:2px;
    transition:transform .3s var(--ease-spring), opacity .2s;
}
body.nav-active .menu-switch{ border-color:var(--accent); }
body.nav-active .menu-switch span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-active .menu-switch span:nth-child(2){ opacity:0; }
body.nav-active .menu-switch span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:880px){ .menu-switch{ display:none; } }

.d-nav-mobile{
    display:none; flex-direction:column; gap:2px;
    padding:10px 20px 16px;
    border-top:1px solid var(--line);
    background:var(--surface);
}
body.nav-active .d-nav-mobile{ display:flex; animation:d-menu .25s ease-out; }
@keyframes d-menu{ from{ opacity:0; transform:translateY(-6px) } }
.d-nav-mobile .d-nav-link{ text-align:left; padding:12px 14px; font-size:16px; }

/* on mobile the header buttons live in the drawer, not the bar */
@media (max-width:879px){
    .topbar-inner > .d-btn{ display:none; }
}

/* ================= theme toggle ================= */
.d-theme-btn{
    position:fixed; right:18px; bottom:18px; z-index:600;
    width:44px; height:44px; border-radius:12px;
    border:1px solid var(--line-strong);
    background:var(--surface);
    font-size:19px; cursor:pointer;
    box-shadow:var(--shadow-lg);
    transition:border-color .2s, box-shadow .2s;
}
.d-theme-btn:hover{ border-color:var(--accent); box-shadow:var(--glow); }

/* ================= index hero ================= */
.d-hero{
    position:relative; overflow:hidden;
    margin:0 calc(50% - 50vw);
    padding:84px 32px 72px;
    border-bottom:1px solid var(--line);
}
.d-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* soft light from the top of the sheet */
.d-hero-bg::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:
            radial-gradient(900px 460px at 72% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
            radial-gradient(700px 400px at 10% 110%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 70%);
}
/* graph paper: 24px minor / 120px major */
.d-hero-bg::after{
    content:""; position:absolute; inset:0; z-index:1;
    background-image:
            linear-gradient(var(--grid-major) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
            linear-gradient(var(--grid-minor) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
    background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px;
    background-position:center -1px;
    -webkit-mask-image:radial-gradient(ellipse 80% 75% at 55% 40%, #000 35%, transparent 80%);
    mask-image:radial-gradient(ellipse 80% 75% at 55% 40%, #000 35%, transparent 80%);
}

/* aurora blobs are retired in this edition */
.d-blob{ display:none; }

.d-hero-inner{
    max-width:1200px; margin:0 auto; position:relative; z-index:2;
    display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center;
}

/* soft per-language photo behind the hero
   (set --hero-photo inline on the .d-hero element) */
.d-hero-photo::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:var(--hero-photo) no-repeat center; background-size:cover;
    opacity:.28;
}
.d-hero-photo::after{
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 72%, transparent), var(--bg) 94%);
}
html[data-theme="dark"] .d-hero-photo::before{ opacity:.16; }

/* pill above the headline - sentence case, like a status chip */
.d-eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    font-size:13.5px; font-weight:500; letter-spacing:0; text-transform:none;
    color:var(--text-2);
    background:var(--surface);
    border:1px solid var(--line-strong);
    box-shadow:var(--shadow);
    padding:6px 14px 6px 11px; border-radius:999px;
    margin-bottom:24px;
}
.d-eyebrow .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.d-hero-title{
    font-family:var(--font);
    font-size:clamp(42px,6.2vw,76px);
    line-height:1.02; letter-spacing:-0.045em; font-weight:700;
    color:var(--text); margin-bottom:22px;
}
.d-hero-title .ital{ font-style:normal; font-weight:inherit; color:var(--accent-text); }
.d-hero-lead{ font-size:18.5px; line-height:1.55; color:var(--text-2); max-width:540px; margin-bottom:32px; }

/* one-line feature list (main-site hero) */
.d-hero-feats{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin-bottom:36px; }
.d-hf{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--text-2); font-weight:500; line-height:1.45; }
.d-hf-icon{
    flex-shrink:0; width:24px; height:24px; border-radius:7px;
    display:grid; place-items:center; font-size:11px;
    background:var(--accent); color:#fff;
}
.d-hf:nth-child(even) .d-hf-icon{
    background:var(--accent-soft); color:var(--accent-text);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* pitch list with titles (per-language hero) */
.d-pitch{ list-style:none; display:flex; flex-direction:column; gap:18px; margin:0 0 34px; padding:0; }
.d-pitch li{ display:flex; gap:14px; align-items:flex-start; }
.d-pitch-icon{
    flex-shrink:0; width:38px; height:38px; border-radius:10px;
    display:grid; place-items:center;
    background:var(--surface); color:var(--accent-text); font-size:15px;
    border:1px solid var(--line-strong); box-shadow:var(--shadow);
}
.d-pitch-title{ font-size:16.5px; font-weight:600; letter-spacing:-0.01em; color:var(--text); margin-bottom:2px; }
.d-pitch-copy{ font-size:14.5px; color:var(--text-2); line-height:1.55; }
.d-pitch-copy a{ color:var(--accent-text); }

.d-hero-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:26px; }

.d-hero-trust{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--text-2); flex-wrap:wrap; }
.d-hero-trust .stars{ color:var(--amber); font-size:14px; letter-spacing:2px; }
.d-hero-trust b{ color:var(--text); font-weight:600; }
.d-hero-trust a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; }
.d-hero-trust a:hover{ text-decoration-color:var(--accent); }

/* ================= drawing sheet (language grid / signup form) =================
   dimension lines sit on the pseudo-elements; the panel itself
   gets no transform / filter / backdrop-filter. */
.d-lang-panel{
    position:relative; z-index:0;
    background:var(--surface);
    border:1px solid var(--line-strong);
    border-radius:20px; padding:28px;
    box-shadow:0 1px 2px rgba(15,23,42,.05), 0 30px 60px -30px rgba(15,23,42,.28);
}
html[data-theme="dark"] .d-lang-panel{ box-shadow:0 1px 2px rgba(0,0,0,.4), 0 30px 60px -28px rgba(0,0,0,.7); }
/* width dimension, above the sheet */
.d-lang-panel::before{
    content:""; position:absolute; left:0; right:0; top:-22px; height:11px;
    pointer-events:none;
    background:
            linear-gradient(var(--dim), var(--dim)) 0 50% / 100% 1px no-repeat,
            linear-gradient(var(--dim), var(--dim)) 0 0 / 1px 100% no-repeat,
            linear-gradient(var(--dim), var(--dim)) 100% 0 / 1px 100% no-repeat;
}
/* height dimension, right of the sheet */
.d-lang-panel::after{
    content:""; position:absolute; top:0; bottom:0; right:-22px; width:11px;
    pointer-events:none;
    background:
            linear-gradient(var(--dim), var(--dim)) 50% 0 / 1px 100% no-repeat,
            linear-gradient(var(--dim), var(--dim)) 0 0 / 100% 1px no-repeat,
            linear-gradient(var(--dim), var(--dim)) 0 100% / 100% 1px no-repeat;
}

.d-lang-panel-label{
    font-size:14px; font-weight:550; color:var(--text-2);
    margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.d-lang-panel-label::before{ content:""; width:18px; height:2px; border-radius:2px; background:var(--accent); }

.d-langs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.d-lang-card{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:14px 8px; border-radius:12px;
    text-decoration:none; color:var(--text);
    background:var(--bg);
    border:1px solid var(--line);
    transition:border-color .2s, background .2s, color .2s, box-shadow .2s;
    position:relative;
}
.d-lang-card::before{ content:none; }
.d-lang-card:hover{
    border-color:var(--accent); background:var(--accent-soft);
    color:var(--accent-text); text-decoration:none;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.d-lang-flag{ font-size:24px; line-height:1; }
.d-lang-name{ font-size:12.5px; font-weight:550; }
.d-lang-card-more{ background:var(--accent); color:#fff; border-color:var(--accent); }
.d-lang-card-more:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }
.d-lang-panel-foot{
    margin-top:18px; padding-top:16px; border-top:1px dashed var(--line-strong);
    display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
    font-size:13px; color:var(--text-2);
}
.d-lang-panel-foot b{ color:var(--text); font-weight:600; }

/* signup / login form inside the panel */
.d-signup-panel label{ display:block; margin-bottom:12px; font-size:13.5px; font-weight:550; color:var(--text-2); }
.d-signup-panel label span{ display:block; margin-bottom:6px; }
.d-signup-panel .d-btn-hero{ margin-top:4px; }
.d-signup-panel .d-form-sub{ margin-bottom:16px; }

/* ================= marquee (navy strip in both themes) ================= */
.d-marquee{
    margin:0 calc(50% - 50vw);
    background:var(--navy);
    color:#DCE6FB;
    padding:14px 0; overflow:hidden;
    border-bottom:1px solid rgba(190,212,255,.12);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.d-marquee-track{
    display:flex; gap:56px; white-space:nowrap;
    animation:d-scroll 42s linear infinite;
    font-size:17px; font-weight:500; letter-spacing:-0.01em;
}
.d-marquee-track span{ display:inline-flex; align-items:center; gap:16px; }
.d-marquee-track em{ font-style:normal; color:#8AB0FF; }
.d-marquee-track i{ color:#5B8CFF; font-size:12px; font-style:normal; }
@keyframes d-scroll{ to{ transform:translateX(-50%) } }

/* ================= section heads ================= */
.d-section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
    margin:96px 0 44px; flex-wrap:wrap;
}
.d-section-head h2{
    font-size:clamp(32px,4.4vw,52px);
    font-weight:650; line-height:1.05; letter-spacing:-0.04em;
    max-width:720px; margin:0;
}
.d-section-head h2 em{ font-style:normal; color:var(--accent-text); }
.d-section-head p{ max-width:360px; color:var(--text-2); font-size:16px; margin:0; }

/* ================= bento feature cards ================= */
.d-fc-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-bottom:16px; }
.d-fc{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px;
    position:relative; overflow:hidden;
    box-shadow:var(--shadow);
    transition:border-color .25s;
}
.d-fc::before{ content:none; }
.d-fc:hover{ border-color:var(--line-strong); }

/* 1 - blueprint sheet */
.d-fc-1{
    grid-column:span 5;
    background-color:#0B2250;
    background-image:
            linear-gradient(rgba(190,212,255,.07) 1px, transparent 1px),
            linear-gradient(90deg, rgba(190,212,255,.07) 1px, transparent 1px);
    background-size:24px 24px;
    color:#E6EEFF; border-color:transparent;
}
/* 2 - solid brand blue */
.d-fc-2{ grid-column:span 4; background:#1D4ED8; color:#fff; border-color:transparent; }
html[data-theme="dark"] .d-fc-2{ background:#2F5FE0; }
.d-fc-3{ grid-column:span 3; }
.d-fc-4{ grid-column:span 4; }
/* 5 - tinted sheet */
.d-fc-5{
    grid-column:span 4;
    background:color-mix(in srgb, var(--accent) 8%, var(--surface));
    border-color:color-mix(in srgb, var(--accent) 22%, transparent);
    color:var(--text);
}
.d-fc-6{ grid-column:span 4; }

.d-fc-num{ font-family:var(--mono); font-size:12.5px; opacity:.6; margin-bottom:16px; }
.d-fc-icon{
    width:44px; height:44px; border-radius:12px;
    display:grid; place-items:center; font-size:18px;
    background:rgba(255,255,255,.14); margin-bottom:18px;
}
.d-fc-3 .d-fc-icon, .d-fc-4 .d-fc-icon, .d-fc-6 .d-fc-icon, .d-fc-5 .d-fc-icon{
    background:var(--accent-soft); color:var(--accent-text);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.d-fc-1 .d-fc-icon{ background:rgba(190,212,255,.1); color:#8AB0FF; box-shadow:inset 0 0 0 1px rgba(190,212,255,.18); }
.d-fc h3{ font-size:22px; font-weight:650; line-height:1.2; margin-bottom:8px; letter-spacing:-0.025em; color:inherit; }
.d-fc p{ font-size:14.5px; opacity:.85; line-height:1.6; margin-bottom:0; }
.d-fc img{ width:100%; height:auto; border-radius:10px; margin-bottom:16px; display:block; border:1px solid var(--line); }
.d-fc a{ color:inherit; }
.d-fc p a{ text-decoration:underline; text-underline-offset:2px; }
/* big outlined figure, like a drawing number */
.d-fc-deco{
    position:absolute; right:-10px; bottom:-26px;
    font-family:var(--mono); font-size:150px; font-weight:500; line-height:1;
    color:transparent;
    -webkit-text-stroke:1px color-mix(in srgb, currentColor 22%, transparent);
    pointer-events:none;
}

/* ================= process steps (a real sequence) ================= */
.d-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; margin-bottom:30px; }
/* dimension line joining the steps */
.d-steps::before{
    content:""; position:absolute; top:26px; left:26px; right:26px; height:9px; margin-top:-4px;
    background:
            linear-gradient(var(--dim), var(--dim)) 0 50% / 100% 1px no-repeat,
            linear-gradient(var(--dim), var(--dim)) 0 0 / 1px 100% no-repeat,
            linear-gradient(var(--dim), var(--dim)) 100% 0 / 1px 100% no-repeat;
    opacity:.7;
}
.d-step{ position:relative; }
.d-step-num{
    width:52px; height:52px; border-radius:12px;
    background:var(--surface); border:1px solid var(--line-strong);
    box-shadow:var(--shadow);
    display:grid; place-items:center;
    font-family:var(--mono); font-size:17px; font-weight:500; color:var(--accent-text);
    margin-bottom:18px; position:relative; z-index:1;
    transition:background .2s, color .2s, border-color .2s;
}
.d-step:hover .d-step-num{ background:var(--accent); border-color:var(--accent); color:#fff; }
.d-step h4{ font-size:18px; font-weight:600; letter-spacing:-0.02em; margin-bottom:6px; }
.d-step p{ font-size:14.5px; color:var(--text-2); }

/* ================= about / stats row ================= */
.d-about{ display:grid; gap:24px; grid-template-columns:1fr; align-items:center; margin-top:70px; }
.d-card > .d-about:first-child{ margin-top:0; padding-top:0; border-top:0; }
.d-card > .d-card:only-child{ margin:0; padding:0; background:none; border:0; box-shadow:none; }
@media (min-width:720px){ .d-about{ grid-template-columns:1fr auto; } }
.d-about-copy{
    font-size:clamp(21px,2.6vw,28px); font-weight:550;
    line-height:1.35; letter-spacing:-0.025em; max-width:660px;
}
.d-about-copy strong{ font-weight:inherit; color:var(--accent-text); }
.d-about-note{ font-size:14px; color:var(--text-2); margin-top:14px; font-weight:550; display:flex; align-items:center; gap:8px; }
.d-about-note img{ height:26px; }
.d-about-video{ display:grid; place-items:center; }

/* ================= final CTA band (blueprint in both themes) ================= */
.d-cta-final{
    background-color:#1D4ED8;
    background-image:
            radial-gradient(700px 360px at 85% -20%, rgba(255,255,255,.18), transparent 65%),
            linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size:auto, 24px 24px, 24px 24px;
    border-radius:24px; padding:56px 52px;
    color:#fff; position:relative; overflow:hidden;
    display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
    margin:80px 0 20px;
}
html[data-theme="dark"] .d-cta-final{ background-color:#1A45C4; box-shadow:0 0 0 1px rgba(190,212,255,.18); }
.d-cta-final::before{ content:none; }
.d-cta-final h2{
    font-size:clamp(28px,3.6vw,44px);
    font-weight:650; line-height:1.08; letter-spacing:-0.035em;
    max-width:640px; position:relative; z-index:1; margin:0; color:#fff;
}
.d-cta-final h2 em{ font-style:normal; color:#C7D8FF; }
.d-cta-final p{ position:relative; z-index:1; font-size:16px; color:rgba(255,255,255,.82); margin:10px 0 0; max-width:540px; }
.d-cta-final-btn{
    background:#fff; color:#1D4ED8;
    padding:16px 28px; border-radius:12px; text-decoration:none;
    font-weight:600; font-size:16px; display:inline-flex; gap:10px; align-items:center;
    box-shadow:0 12px 30px -12px rgba(8,22,48,.6);
    transition:box-shadow .2s, background .2s;
    position:relative; z-index:1;
}
.d-cta-final-btn:hover{
    background:#F1F5FF; color:#1E40AF; text-decoration:none;
    box-shadow:0 18px 40px -14px rgba(8,22,48,.7), 0 0 0 4px rgba(255,255,255,.22);
}

/* ================= reveal on scroll ================= */
.reveal{
    opacity:0; transform:translateY(14px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.16,.8,.3,1);
}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .d-marquee-track{ animation:none !important; }
    body.nav-active .d-nav-mobile{ animation:none; }
}

/* ================= other logged-out pages (forms etc.) ================= */
.d-landing-hero{ position:relative; text-align:center; padding:48px 26px 40px; }
/* a patch of graph paper behind the bird */
.d-landing-hero::before{
    content:""; position:absolute; top:-10px; left:50%; margin-left:-240px;
    width:480px; height:320px; pointer-events:none;
    background-image:
            linear-gradient(var(--grid-major) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
    background-size:24px 24px;
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 40%, #000 20%, transparent 75%);
    mask-image:radial-gradient(ellipse 50% 50% at 50% 40%, #000 20%, transparent 75%);
}
.d-hero-bird{ display:block; margin-bottom:16px; position:relative; }
.d-hero-bird img{ width:92px; height:auto; display:inline-block; }
.d-hero-bird .logo-dark{ display:none; }
html[data-theme="dark"] .d-hero-bird .logo-light{ display:none; }
html[data-theme="dark"] .d-hero-bird .logo-dark{ display:inline-block; }
.d-landing-hero h1{
    font-size:42px; font-weight:700; letter-spacing:-.04em; line-height:1.1;
    margin-bottom:12px; position:relative;
}
.d-landing-hero .d-sub{ font-size:17.5px; color:var(--text-2); max-width:560px; margin:0 auto 22px; position:relative; }
.d-landing-hero .d-btn-row{ justify-content:center; position:relative; }

.d-trust{
    display:flex; align-items:center; justify-content:center; gap:12px;
    flex-wrap:wrap; margin-top:24px; font-size:14px; color:var(--text-2);
}
.d-trust img{ height:26px; }

.d-features{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); margin-bottom:20px; }
.d-feature{
    display:flex; gap:14px; align-items:flex-start;
    padding:20px; border-radius:var(--radius-sm);
    background:var(--surface); border:1px solid var(--line);
    box-shadow:var(--shadow);
    transition:border-color var(--transition);
}
.d-feature:hover{ border-color:var(--line-strong); }
.d-feature .d-emoji{ font-size:22px; line-height:1; }
.d-feature h3{ font-size:15px; font-weight:600; letter-spacing:-0.01em; color:var(--text); margin-bottom:4px; }
.d-feature p{ font-size:14px; color:var(--text-2); line-height:1.5; }

.d-lang-grid{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); margin-bottom:20px; }
.d-lang{
    display:flex; align-items:center; gap:10px;
    padding:11px 14px; border-radius:var(--radius-sm);
    background:var(--surface); border:1px solid var(--line);
    font-weight:550; font-size:14.5px; color:var(--text);
    text-decoration:none; box-shadow:var(--shadow);
    transition:border-color var(--transition), background var(--transition), color var(--transition);
}
.d-lang:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text); text-decoration:none; }
.d-lang .d-flag{ font-size:20px; }

.d-cta{
    text-align:center;
    background:color-mix(in srgb, var(--accent) 6%, var(--surface));
    border-color:color-mix(in srgb, var(--accent) 22%, transparent);
}
.d-cta h2{ font-size:22px; font-weight:650; letter-spacing:-0.025em; margin-bottom:8px; }
.d-cta p{ font-size:15.5px; color:var(--text-2); margin-bottom:18px; }
.d-cta .d-btn-row{ justify-content:center; margin-top:0; }

.d-signup-card{ margin-bottom:0; }
.d-form-title{ font-size:21px; font-weight:650; letter-spacing:-.025em; color:var(--text); }
.d-form-sub{ font-size:14.5px; color:var(--text-2); margin-top:4px; margin-bottom:6px; }
.d-form-alt{ font-size:14px; color:var(--text-2); margin-top:14px; text-align:center; }
.d-disclaimer{
    font-size:12.5px; color:var(--text-3); line-height:1.55;
    margin-top:14px; padding-top:14px;
    border-top:1px dashed var(--line-strong);
}
.d-asterisk{ color:var(--amber); font-weight:700; }

.d-oauth{ margin-top:20px; text-align:center; }
.d-oauth-divider{
    display:block; position:relative;
    font-size:13px; font-weight:500; color:var(--text-3); margin-bottom:16px;
}
.d-oauth-divider::before,
.d-oauth-divider::after{ content:""; position:absolute; top:50%; width:calc(50% - 26px); height:1px; background:var(--line); }
.d-oauth-divider::before{ left:0; }
.d-oauth-divider::after{ right:0; }
.d-oauth-btn{ display:inline-block; transition:opacity var(--transition); }
.d-oauth-btn:hover{ opacity:.88; }
.d-oauth-btn img{ max-width:220px; height:auto; }

/* ================= footer ================= */
.d-footer{
    text-align:center; margin-top:72px; padding-top:36px;
    border-top:1px solid var(--line);
    font-size:13.5px; color:var(--text-3);
}
.d-footer a{ color:var(--text-2); }
.d-footer a:hover{ color:var(--accent-text); }
.d-social{ display:flex; justify-content:center; gap:8px; margin-bottom:18px; }
.d-social a{
    width:40px; height:40px; border-radius:10px;
    display:grid; place-items:center;
    background:var(--surface); border:1px solid var(--line-strong);
    color:var(--text-2); font-size:16px; text-decoration:none;
    transition:border-color .2s, color .2s, background .2s;
}
.d-social a:hover{ border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft); }

/* ================= responsive ================= */
@media (max-width:980px){
    .d-hero-inner{ grid-template-columns:1fr; gap:56px; }
    .d-hero-feats{ grid-template-columns:1fr; }
    .d-fc-1,.d-fc-2,.d-fc-3,.d-fc-4,.d-fc-5,.d-fc-6{ grid-column:span 12; }
    .d-steps{ grid-template-columns:repeat(2,1fr); gap:30px; }
    .d-steps::before{ display:none; }
    .d-cta-final{ padding:44px 28px; flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){
    .d-langs{ grid-template-columns:repeat(2,1fr); }
    .d-hero{ padding:48px 20px 44px; }
    .d-hero-title{ font-size:clamp(38px,11vw,52px); }
    .d-lang-panel{ padding:22px 18px; }
    .d-lang-panel::after{ display:none; }
    .d-lang-panel::before{ top:-16px; height:9px; }
    .d-section-head{ margin:64px 0 32px; }
    .d-landing-hero h1{ font-size:31px; }
    .d-landing-hero .d-sub{ font-size:16px; }
    .d-landing-hero::before{ width:320px; margin-left:-160px; }
    .d-steps{ grid-template-columns:1fr; }
}

/* ================= font-size utilities ================= */
.fs60 {font-size:60px}
.fs50 {font-size:50px}
.fs40 {font-size:40px}
.fs30 {font-size:30px}
.fs28 {font-size:28px}
.fs26 {font-size:26px}
.fs25 {font-size:25px}
.fs22 {font-size:22px}
.fs20 {font-size:20px}
.fs18 {font-size:18px}
.fs17 {font-size:17px}
.fs16 {font-size:16px}
.fs15 {font-size:15px}
.fs14 {font-size:14px}

/* ================= pagination ================= */
.pages{
    clear:left;
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    margin:24px 0; padding:0;
    font-size:14px;
}
.pages a,
.pages span.current,
.pages span.dots{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:38px; height:38px; padding:0 12px;
    border-radius:var(--radius-sm);
    font-weight:550; line-height:1;
    font-variant-numeric:tabular-nums;
    text-decoration:none;
}
.pages a{
    background:var(--surface);
    border:1px solid var(--line-strong);
    color:var(--text);
    box-shadow:var(--shadow);
    transition:border-color var(--transition), color var(--transition), background var(--transition);
}
.pages a:hover{ border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft); text-decoration:none; }
.pages span.current{ background:var(--accent); border:1px solid var(--accent); color:#fff; }
.pages span.dots{ background:transparent; border:1px solid transparent; color:var(--text-3); }