/* AiLucent public marketing site — reproduced verbatim from the approved Home mockup
   (docs: ailucent-home-mockup.html). Loaded ONLY on marketing pages (via MarketingLayout),
   so it never affects the authenticated app shell. */

:root {
  --ink:#0C1222;--ink-2:#111a30;--slate:#5A6884;--slate-2:#5F7290;
  --paper:#F5F8FD;--card:#fff;--line:#E2E8F3;
  /* --blue is DECORATIVE ONLY (wordmark gradient, borders, dark-ink fills like .btn-primary).
     Text on light grounds uses --blue-ink; fills under white text use --blue-fill.
     (Accessibility token map 2026-10-01: #3E9BFF never carries text, never sits under white.) */
  --blue:#3E9BFF;--blue-ink:#1B5FCB;--blue-fill:#1D6FD1;--sky:#8FE0FF;--amber:#FFB63D;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
/* headings inherit their section color (overrides theme-base's global heading color so the dark band stays legible) */
h1,h2,h3,h4,h5,h6{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
/* P-6: links are underlined by default so in-text links are discoverable (B-8).
   Site chrome — nav, footer link lists, buttons, card-links — opts back out below. */
a{color:inherit;text-decoration:underline;text-underline-offset:2px}
nav a,.nav-sheet a,footer a,.btn,.skip-link{text-decoration:none}
/* Skip link (M-24): first tab stop, visible only on focus. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--card);color:var(--ink);
  font-weight:600;padding:10px 16px;border-radius:0 0 10px 0;box-shadow:0 6px 24px rgba(12,18,34,.25)}
.skip-link:focus{left:0}
/* Available to screen readers, removed from the visual layout. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.disp{font-family:"Bahnschrift","Segoe UI Semibold",system-ui,sans-serif;letter-spacing:-.02em}
.wm{font-family:"Bahnschrift","Segoe UI Semibold",system-ui,sans-serif;font-weight:600;letter-spacing:-.02em}
.wm .l{background:linear-gradient(95deg,var(--blue),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.wm sup{font-size:.32em;vertical-align:super;color:var(--slate-2);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;border-radius:100px;padding:13px 24px;font-size:15px;cursor:pointer;border:0}
.btn-primary{background:var(--blue);color:#08132A}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn-dark{background:var(--ink);color:#fff}
/* Eyebrow text: ink blue on light grounds; the brighter brand blue survives (and passes)
   only on the dark hero/band/token surfaces, where it is re-allowed below. */
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-ink);font-weight:700;margin:0}
.hero .eyebrow,.band .eyebrow,.dl-token .eyebrow{color:var(--blue)}

/* nav */
nav{position:sticky;top:0;z-index:20;background:rgba(12,18,34,.82);backdrop-filter:blur(10px);border-bottom:1px solid #0a0f1d}
nav .wrap{display:flex;align-items:center;gap:28px;height:66px}
nav .brand{display:flex;align-items:center;gap:11px;color:#fff}
nav .brand svg{width:32px;height:32px}
nav .brand .wm{font-size:23px}
nav .links{display:flex;gap:24px;margin-left:8px}
nav .links a{color:#C4D3EC;font-size:14.5px}
nav .links a:hover{color:#fff}
nav .spacer{flex:1}
nav .signin{color:#C4D3EC;font-size:14.5px;font-weight:600}
nav .signin:hover{color:#fff}
/* mobile hamburger + light popout side nav (B-1: real <button aria-expanded>, toggled by ui.js) */
.nav-burger{display:none;width:40px;height:40px;border-radius:9px;align-items:center;justify-content:center;cursor:pointer;color:#fff;margin-left:8px;background:none;border:0;padding:0}
.nav-burger:hover{background:rgba(255,255,255,.1)}
.nav-burger:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{content:"";display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.nav-burger span{position:relative}
.nav-burger span::before{position:absolute;top:-6px}
.nav-burger span::after{position:absolute;top:6px}
.nav-scrim{display:none;position:fixed;inset:0;background:rgba(12,18,34,.5);z-index:50;opacity:0;pointer-events:none;transition:opacity .25s}
/* M-5: visibility:hidden keeps the closed sheet's links out of the tab order at every width. */
.nav-sheet{position:fixed;top:0;right:0;height:100%;width:min(300px,84vw);z-index:60;background:#fff;box-shadow:-10px 0 40px rgba(12,18,34,.25);transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility .3s;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.nav-sheet a:not(.btn){display:block;padding:12px;border-radius:9px;color:var(--ink);font-weight:600;font-size:15px}
.nav-sheet a:not(.btn):hover{background:#EAF2FE}
.nav-sheet .btn{margin-top:12px;justify-content:center}
/* Open state: ui.js sets .nav-open on <html> from the burger button (B-1). */
:root.nav-open .nav-scrim{opacity:1;pointer-events:auto}
:root.nav-open .nav-sheet{transform:translateX(0);visibility:visible}
@media(prefers-reduced-motion:reduce){.nav-scrim,.nav-sheet{transition:none}}
@media(max-width:760px){
  nav .links{display:none}
  nav .signin{display:none}
  .nav-burger{display:inline-flex}
  .nav-scrim{display:block}
}

/* founders offer — dark pill on the body strip */
.founders-strip{display:flex;justify-content:center;padding:12px 16px;background:var(--paper)}
.founders-pill{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;text-align:center;background:#141D33;color:#AEC0DE;border:1px solid #2A3550;border-radius:999px;padding:8px 20px;font-size:13.5px}
.founders-pill b{color:#fff}
.founders-pill a{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.founders-pill a:hover{text-decoration:underline}
.founders-pill a.founders-learn{color:#8FE0FF;font-weight:600}

/* /plus — Free vs Plus comparison (Hub twin of the Agent's plus.html) */
.plus-page .lead{max-width:62ch}
.plus-compare{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:34px}
.plus-compare h2{font-size:18px;margin:0;padding:18px 22px;border-bottom:1px solid var(--line)}
.plus-compare table{width:100%;border-collapse:collapse}
.plus-compare th,.plus-compare td{text-align:left;padding:13px 22px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.plus-compare th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);font-weight:700}
.plus-compare td.feat-c{color:var(--ink);font-weight:600}
.plus-compare td.free-c{color:var(--slate)}
.plus-compare td.plus-c{color:#067647;font-weight:600}
.plus-compare tr:last-child td{border-bottom:none}
.plus-compare .col-plus{background:#F7FBFF}

/* hero */
.hero{background:radial-gradient(52% 90% at 82% 12%,rgba(62,155,255,.30),transparent 60%),radial-gradient(60% 70% at 8% 120%,rgba(143,224,255,.10),transparent 60%),var(--ink);color:#fff;border-bottom:1px solid #0a0f1d;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center;padding:78px 26px 84px}
/* The headline must never wrap (Terry, 2026-10-08) — "for AI" orphaned on its own line looked
   broken. Non-breaking spaces were the obvious fix and the wrong one: they stop the wrap, but the
   line then OVERFLOWS its column and spills over the mark or forces a sideways scroll. The font
   has to shrink instead, so the size follows the COLUMN via container query units: 1cqi is 1% of
   the text column, which is 62.5% of the page on desktop and the full width once the grid
   collapses at 820px — one rule covering both, where a vw-based size could only suit one.
   8.4cqi is MEASURED, not guessed. Rendered in Edge, the headline is this wide per 100px of
   font: Bahnschrift 1033, Segoe UI Semibold 1066, Arial 1092, system-ui 1114. Against a 645px
   column the widest of those allows 57px, so 8.4cqi (≈54px on desktop) keeps roughly 6% in hand
   for the macOS faces that cannot be measured from here. Bahnschrift is Windows-only, so sizing
   for the WIDEST fallback is what makes one line safe everywhere rather than just on Windows.
   If the copy changes length, re-measure — the coefficient is tied to this exact string. */
.hero .wrap>div:first-child{container-type:inline-size}
.hero h1{font-size:clamp(23px,8.4cqi,60px);line-height:1.02;margin:16px 0 0;white-space:nowrap}
.hero h1 .hi{color:var(--sky)}
.hero p.sub{color:#AEC0DE;font-size:19px;max-width:52ch;margin:20px 0 0}
/* The rotating hero call to action. Brighter than .sub and tighter to the buttons beneath it,
   so it reads as the line that hands off to them rather than as another body sentence. */
.hero p.sub.hero-cta{color:#fff;margin-top:16px}
.hero p.sub.hero-cta strong{color:var(--sky);font-weight:700}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.trust{margin-top:26px;color:#7f93b6;font-size:13.5px;letter-spacing:.01em}
.hero .mk{display:flex;justify-content:center}
.hero .mk svg{width:min(320px,74vw);filter:drop-shadow(0 0 40px rgba(62,155,255,.45))}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero .mk{display:none}}
/* Glowing hero mark: HeroAperture's beam (.glowcore) breathes; wrapper stays out of layout. */
.mkt-heromark{display:contents}
.glowcore{animation:ail-pulse 3.2s ease-in-out infinite}
@keyframes ail-pulse{0%,100%{opacity:.4}50%{opacity:1}}
/* Reduced motion: the pulse is an opacity fade (no positional motion), so it stays;
   it slows and shallows instead of stopping. Windows "Animation effects: off" lands here. */
@media(prefers-reduced-motion:reduce){.glowcore{animation:ail-pulse-soft 6s ease-in-out infinite}}
@keyframes ail-pulse-soft{0%,100%{opacity:.7}50%{opacity:1}}

/* sections */
section{padding:74px 0}
.lead{max-width:60ch;color:var(--slate);font-size:17px;margin:.6rem 0 0}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.08;margin:0;text-wrap:balance}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:800px){.grid3{grid-template-columns:1fr}}
.feat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;color:var(--ink)}
.feat .ic{width:44px;height:44px;border-radius:10px;background:#EAF2FE;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feat h3{font-size:19px;margin:0 0 8px}
.feat p{color:var(--slate);font-size:15px;margin:0}
.feat .fine{color:var(--slate-2);font-size:12.5px;margin-top:12px}

/* record band (dark) */
.band{background:var(--ink-2);color:#fff}
.band .lead{color:#AEC0DE}
.band .code{margin-top:34px;background:#0a1122;border:1px solid #1c2740;border-radius:14px;overflow:hidden;font-family:ui-monospace,Consolas,monospace;font-size:13.5px}
.band .code .bar{display:flex;gap:7px;padding:12px 16px;border-bottom:1px solid #1c2740}
.band .code .bar i{width:11px;height:11px;border-radius:50%;background:#26324f;display:block}
.band .code pre{margin:0;padding:18px 20px;color:#c6d3ee;overflow-x:auto}
.band .code .k{color:var(--sky)} .band .code .g{color:#6ee7a8} .band .code .r{color:#ff9a9a} .band .code .m{color:#8195b5}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:880px){.price-grid{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column}
.plan.feature{border-color:var(--blue);box-shadow:0 12px 40px rgba(62,155,255,.14)}
.plan .pn{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:700}
.plan .pp{font-size:38px;font-weight:700;margin:12px 0 2px;font-family:"Bahnschrift",system-ui}
.plan .pp small{font-size:16px;color:var(--slate);font-weight:600}
.plan .pd{color:var(--slate);font-size:14.5px;min-height:44px}
.plan ul{list-style:none;padding:0;margin:18px 0 24px;display:flex;flex-direction:column;gap:10px}
.plan li{font-size:14.5px;padding-left:26px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;background:#EAF2FE;
  background-image:radial-gradient(circle at 50% 50%,var(--blue) 0 3px,transparent 3px)}
.plan .btn{width:100%;justify-content:center;margin-top:auto}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink);background:#EAF2FE;border-radius:100px;padding:4px 10px;margin-left:8px}
.soon{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
@media(max-width:880px){.soon{grid-template-columns:1fr}}
.soon .plan{opacity:.9}
.note{margin-top:22px;color:var(--slate);font-size:13px}

/* founding banner + billing toggle */
.founding{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center;
  width:max-content;max-width:100%;margin:26px auto 0;padding:10px 20px;
  background:#EAF2FE;border:1px solid var(--blue);color:var(--ink);border-radius:100px;font-size:14px;font-weight:600}
.founding b{color:var(--blue-ink)}
/* The approved founder wording compares against the regular price — "(reg $15/mo)" — struck
   through on the pricing pages only. The <s> is emitted by OfferBannerText.razor from split
   text nodes, never from data-as-markup; in the cross-application strip the same figure stays
   plain text, unstruck, per the approval note (review-queue §F, 2026-10-10). */
.founding .offer-banner-text{display:inline}
.founding s.price-reg,.ladder s.price-reg{text-decoration-line:line-through;text-decoration-thickness:1.5px;color:var(--slate)}

/* The founder pricing ladder (review-queue §F, W-6 revision): the whole schedule at a glance,
   rising on fixed dates, rendered from the price-schedule table so it turns over by itself.
   Closed rungs stay visible — struck and muted — because a price that visibly rose and closed IS
   the urgency. Every rung also states its state in words (Closed / Current price / Coming up);
   the styling reinforces, never replaces, the words. */
.ladder-section{margin-top:34px;text-align:left}
.ladder-section h3{font-size:18px;margin:0 0 4px}
.ladder-intro{color:var(--slate);font-size:14px;margin:0 0 14px}
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ladder-rung{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  border:1px solid var(--line);border-radius:14px;padding:14px 18px;background:var(--card)}
.ladder-rung .ladder-name{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--slate)}
.ladder-rung .ladder-tag{font-size:12px;font-weight:700;border-radius:100px;padding:2px 10px;
  border:1px solid var(--line);color:var(--slate)}
.ladder-rung .ladder-price{font-size:20px;font-weight:700;font-family:"Bahnschrift",system-ui;color:var(--ink)}
.ladder-rung .ladder-price small{font-size:13px;font-weight:600;color:var(--slate)}
.ladder-rung .ladder-when{font-size:13px;color:var(--slate);flex-basis:100%}
.ladder-current{border-color:var(--blue);background:#EAF2FE;box-shadow:0 8px 28px rgba(62,155,255,.12)}
.ladder-current .ladder-tag{border-color:var(--blue);color:var(--blue-ink);background:#fff}
.ladder-current .ladder-when{color:var(--ink);font-weight:600}
.ladder-closed{opacity:.62}
.pricing-switch > input[type=radio]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* B-6: visible keyboard focus for the CSS-only radio controls (billing toggle + tier tabs). */
#bill-annual:focus-visible ~ .billing-toggle label[for="bill-annual"],
#bill-monthly:focus-visible ~ .billing-toggle label[for="bill-monthly"],
#tier-agent:focus-visible ~ .tier-bar label[for="tier-agent"],
#tier-team:focus-visible ~ .tier-bar label[for="tier-team"],
#tier-enterprise:focus-visible ~ .tier-bar label[for="tier-enterprise"]{outline:2px solid var(--ink);outline-offset:2px}
.billing-toggle{display:flex;gap:4px;width:max-content;max-width:100%;margin:22px auto 4px;padding:5px;background:#EAF2FE;border-radius:100px}
.billing-toggle label{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:100px;font-size:14px;font-weight:600;color:var(--slate);cursor:pointer}
#bill-annual:checked ~ .billing-toggle label[for="bill-annual"],
#bill-monthly:checked ~ .billing-toggle label[for="bill-monthly"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(12,18,34,.12)}
.billing-toggle .save{font-size:11px;font-weight:700;color:#fff;background:var(--blue-fill);border-radius:100px;padding:2px 8px}
.price-monthly{display:none}
#bill-monthly:checked ~ .price-grid .price-annual{display:none}
#bill-monthly:checked ~ .price-grid .price-monthly{display:inline}

/* tier tabs — Agent / Team (CSS-only, same radio pattern as billing).
   Classic tab shape: big button-prominent tabs seated on a baseline, active tab
   filled blue and visually attached to the panel below. */
.tier-tabs > input[type=radio]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tier-bar{display:flex;gap:10px;width:100%;margin:0 0 38px;border-bottom:3px solid var(--blue-fill)}
.tier-bar label{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 14px 15px;
  background:#EAF2FE;border:1px solid var(--line);border-bottom:none;border-radius:14px 14px 0 0;
  cursor:pointer;text-align:center;transition:background .15s,border-color .15s}
.tier-bar label:hover{border-color:var(--blue)}
.tier-bar .tn{font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.tier-bar .ts{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
#tier-agent:checked ~ .tier-bar label[for="tier-agent"],
#tier-team:checked ~ .tier-bar label[for="tier-team"],
#tier-enterprise:checked ~ .tier-bar label[for="tier-enterprise"]{
  background:var(--blue-fill);border-color:var(--blue-fill)}
#tier-agent:checked ~ .tier-bar label[for="tier-agent"] .tn,
#tier-team:checked ~ .tier-bar label[for="tier-team"] .tn,
#tier-enterprise:checked ~ .tier-bar label[for="tier-enterprise"] .tn,
#tier-agent:checked ~ .tier-bar label[for="tier-agent"] .ts,
#tier-team:checked ~ .tier-bar label[for="tier-team"] .ts,
#tier-enterprise:checked ~ .tier-bar label[for="tier-enterprise"] .ts{color:#fff}
@media(max-width:760px){.tier-bar label{padding:13px 8px 11px}.tier-bar .tn{font-size:16px}.tier-bar .ts{font-size:10px}}
.tier-panel{display:none}
#tier-agent:checked ~ .tier-panel-agent,
#tier-team:checked ~ .tier-panel-team,
#tier-enterprise:checked ~ .tier-panel-enterprise{display:block}
.price-grid.duo{grid-template-columns:repeat(2,1fr);max-width:800px;margin-left:auto;margin-right:auto}
@media(max-width:880px){.price-grid.duo{grid-template-columns:1fr}}
.price-grid.solo{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
.soon.single{grid-template-columns:1fr;max-width:800px;margin-left:auto;margin-right:auto}

/* honest */
.honest{background:#EEF3FB;border:1px solid var(--line);border-radius:16px;padding:28px 30px;color:var(--ink)}
.honest h2,.honest h3{margin:0 0 10px;font-size:18px}
.honest p{color:var(--slate);font-size:14.5px;margin:0;max-width:80ch}

/* auth pages (login/register card on the marketing palette, no nav shell) */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--paper);padding:24px}
.auth-card{width:100%;max-width:430px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:40px 38px;box-shadow:0 18px 60px rgba(12,18,34,.10)}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 4px;text-decoration:none}
.auth-brand svg{width:38px;height:38px}
.auth-brand .wm{font-size:23px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.auth-sub{text-align:center;color:var(--slate);font-size:14.5px;margin:0 0 26px}
.auth-field{margin-bottom:16px}
.auth-field label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:0 0 6px}
.auth-card input[type=email],.auth-card input[type=password],.auth-card input[type=text]{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;background:#fff;color:var(--ink);box-sizing:border-box}
.auth-card input:focus{outline:none;border-color:var(--blue-fill);box-shadow:0 0 0 3px rgba(62,155,255,.18)}
.auth-error{background:#FDECEC;border:1px solid #E5A0A4;color:#B3261E;border-radius:10px;padding:11px 14px;font-size:14px;margin:0 0 16px}
.auth-card .validation-message{display:block;color:#B3261E;font-size:12.5px;margin-top:5px}
.auth-btn{width:100%;justify-content:center;padding:13px 18px;font-size:15.5px;margin-top:4px}
.auth-foot{text-align:center;color:var(--slate);font-size:14px;margin:20px 0 0}
.auth-foot a{color:var(--blue-ink);font-weight:600}
.auth-home{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--slate);text-decoration:none}
.auth-home:hover{color:var(--ink)}

/* what-we-store */
.wws .feat ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px}
.wws .feat li{font-size:14px;padding-left:24px;position:relative;color:var(--ink)}
.wws .feat li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:50%;background:#EAF2FE;
  background-image:radial-gradient(circle at 50% 50%,var(--blue) 0 3px,transparent 3px)}
.wws code{background:#EAF2FE;border-radius:6px;padding:2px 7px;font-size:13px;color:var(--ink)}
.wws-caption{font-weight:700;color:var(--ink);margin:22px 0 0}
.pattern-chips{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.pattern-chips li{background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 14px;font-size:13.5px;color:var(--slate)}
.pattern-chips li code{background:none;padding:0;font-size:13px}
.wws .honest ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:8px}
.wws .honest li{color:var(--slate);font-size:14.5px;padding-left:22px;position:relative}
.wws .honest li::before{content:"—";position:absolute;left:0;color:var(--blue);font-weight:700}
.wws-questions{margin-top:22px;color:var(--slate);font-size:14.5px}
.wws-questions a{color:var(--blue-ink);font-weight:600}

/* B-8: Privacy in-text links — underlined and color-distinct from body text. */
.privacy p a,.privacy li a{text-decoration:underline;color:var(--blue-ink)}

/* footer */
footer{background:var(--ink);color:#9fb0cf;padding:56px 0 46px}
footer .top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
footer .brand{display:flex;align-items:center;gap:11px;color:#fff}
footer .brand svg{width:34px;height:34px}
footer .brand .wm{font-size:26px}
/* Pronunciation first and tight to the mark, because it explains the NAME and wants to be read
   while the eye is still on the word. The tagline then takes the wider gap, so the two read as
   two things rather than one stacked block — the spacing is what tells them apart now that the
   order puts the smaller, quieter line on top. */
footer .pron{margin-top:6px;color:#6F82A3;font-size:12.5px}
/* The footer carries the SAME line as the hero, so it carries the same two rules: it never
   wraps, and "light" is lit. nowrap is safe at this size — the string is about 160px at 14px,
   narrower than the smallest column this footer is ever given. The .hi rule has to be repeated
   because the hero's version is scoped to `.hero h1 .hi` and does not reach here. */
footer .tag{margin-top:14px;color:#7f93b6;font-size:14px;white-space:nowrap}
footer .tag .hi{color:var(--sky)}
footer .cols{display:flex;gap:56px;flex-wrap:wrap}
/* N-1: footer column headings are h2s restyled as labels (h4 kept for any stragglers). */
footer h2,footer h4{color:#c4d3ec;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
footer a{display:block;color:#9fb0cf;font-size:14px;margin-bottom:9px}
footer a:hover{color:#fff}
footer .rule{border-top:1px solid #1c2740;margin:36px 0 20px}
footer .fine{font-size:12.5px;color:#6F82A3}

/* Enrollment forms (Download / GetInstallToken): visible label above the email field (N-19). */
.dl-gate .dl-label{flex:1 1 100%;display:block;font-size:13px;font-weight:700;color:var(--ink);margin:0}

/* Signed-out login menu (multi-hub entry) — CSS-only <details> dropdown; the layout is
   static SSR so there is no scripted menu. Hidden on mobile with .signin (the nav sheet
   carries the same entries as flat links). */
nav .login-menu{position:relative}
nav .login-menu summary{list-style:none;cursor:pointer;user-select:none}
nav .login-menu summary::-webkit-details-marker{display:none}
nav .login-menu summary::after{content:" \25BE";font-size:11px} /* ▾ as an escape — survives any re-encoding */
nav .login-menu .login-menu-list{position:absolute;right:0;top:calc(100% + 10px);min-width:180px;background:#0C1222;border:1px solid rgba(196,211,236,.22);border-radius:10px;padding:6px;display:flex;flex-direction:column;box-shadow:0 12px 30px rgba(0,0,0,.45)}
nav .login-menu .login-menu-list a{color:#C4D3EC;font-size:14px;font-weight:600;padding:8px 12px;border-radius:7px;text-decoration:none;white-space:nowrap}
nav .login-menu .login-menu-list a:hover{background:rgba(255,255,255,.07);color:#fff}
@media(max-width:760px){
  nav .login-menu{display:none}
}

/* ── Learning page (/learning) ─────────────────────────────────────────────── */
.learning .jump-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:30px}
.learning a.jump-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;display:flex;flex-direction:column;gap:4px;box-shadow:0 1px 3px rgba(12,18,34,.06);transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.learning a.jump-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 10px 28px rgba(62,155,255,.16)}
.learning a.jump-card .t{color:var(--ink);font-weight:700;font-size:14.5px}
.learning a.jump-card .d{color:var(--slate);font-size:12.5px;line-height:1.45}
.learning .feat{scroll-margin-top:96px}
.learning .feat p+p{margin-top:10px}
.learning .feat code{background:#EAF2FE;border-radius:6px;padding:2px 7px;font-size:13px;color:var(--ink)}
.learning .plus-badge{display:inline-block;background:var(--sky);color:#08243b;font-weight:700;font-size:11px;padding:2px 9px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;margin-left:6px}

/* ── Pre-checkout renewal disclosure (/upgrade) ─────────────────────────────
   Deliberately plain and unstyled-looking: no accent colour, no icon, no card
   shadow. This is the block a regulator or a buyer reads to learn what they are
   about to be charged, and anything that makes it look like a promotional
   callout invites it to be skimmed as one. Left rule and tinted ground only, to
   set it apart from the feature list above without competing with the buttons
   below. Text colour is the body ink, NOT the muted slate used for fine print —
   a required disclosure must not be the least legible thing on the page. */
.renewal-disclosure{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--slate);border-radius:10px;padding:14px 16px;margin:18px 0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.renewal-disclosure p{margin:0 0 8px}
.renewal-disclosure ul{margin:0;padding-left:18px}
.renewal-disclosure li{margin-bottom:6px}
.renewal-disclosure li:last-child{margin-bottom:0}