/* Theme-agnostic primitives shared by both the light marketing chrome and the
   dark product deep-dives — type/scale only, no color (color lives in
   tokens-dark.css / tokens-light.css so a page picks one set of these same
   custom-property names). */
:root{
  --maxw:1180px;
  --disp:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* set by common.js once the promo banner's real height is measured (0 until then, and
     after it's dismissed) — nav/mega-panel/hero offsets all read this single variable */
  --promo-h:0px;
}

/* Dark "terminal deep-dive" theme — verbatim from the original single-page
   index.css :root, plus a generic alias layer (--bg/--ink/--accent*) so the
   shared nav.css/base.css (which don't know about --black/--white/--green)
   render correctly on dark pages too. dark-components.css keeps using the
   legacy names directly, unchanged. */
:root{
  --black:#000000;
  --surface:rgba(255,255,255,.045);
  --surface-hi:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.13);
  --white:#ffffff;
  --muted:rgba(255,255,255,.64);
  --muted2:rgba(255,255,255,.38);
  --green:#99cc00;
  --dgr-accent:#99cc00;--dgr-accent-dim:rgba(153,204,0,.4);--dgr-accent-fill:rgba(153,204,0,.10);
  --dgr-ink:#F2F4F5;--dgr-muted:rgba(255,255,255,.58);--dgr-box:transparent;--dgr-line:rgba(255,255,255,.18);
  --green-dim:rgba(153,204,0,.14);
  --nav-scrolled-bg:rgba(0,0,0,.72);
  --mobile-menu-bg:rgba(0,0,0,.98);
  color-scheme:dark;

  /* generic aliases consumed by base.css / nav.css / light-components.css's shared shapes */
  --bg:var(--black);
  --ink:var(--white);
  --accent:var(--green);
  --accent-dim:var(--green-dim);
  --accent-ink:var(--green);
}

/* Theme-agnostic reset + typography + generic button/reveal primitives.
   Ported from the original index.css, with --black/--white/--green swapped
   for the generic --bg/--ink/--accent* names so this file renders correctly
   on both tokens-dark.css and tokens-light.css. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--disp);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--accent-ink);color:#000}

/* #vanta-bg (pages with a Vanta.js background, see common.js) is a fixed full-viewport element —
   negative z-index keeps it pinned behind every in-flow section while the whole body scrolls
   over it, instead of the effect being confined to the hero's own height. Shared by both themes
   since it's used by the light Home (FOG) and the dark product pages (WAVES) alike. */
#vanta-bg{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Scroll progress bar — same pattern as pooel_app's #progress (src/css/background.css +
   src/js/frame.js), simplified: plain window.scrollY ratio instead of that page's "deck"
   scroll-hijacking math, since pwas_site scrolls natively. Sits above absolutely everything
   (promo banner, nav, cookie banner, the lead-chat modal) as a thin always-on-top accent line. */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:400;
  background:#99cc00;box-shadow:0 0 10px rgba(153,204,0,.6);
  transition:width .1s linear;pointer-events:none;
}

a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block;max-width:100%}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-block;
  margin-bottom:18px;
}
/* the "// " terminal prefix is a dark-theme-only affordance */
body[data-theme="dark"] .eyebrow::before{content:"// ";color:var(--muted2)}

h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.accent{color:var(--accent)}
/* Title-only accent emphasis (the <em class="accent"> word inside an h1/h2) goes full lime
   (--accent-ink) rather than the AA-safe darkened --accent used for smaller/body text — on
   dark pages --accent-ink already equals --green (no visible change), so this only brightens
   the light-theme "whiter" pages, where it was previously the same darkened green as body text. */
em.accent{font-style:normal;color:var(--accent-ink)}

.section-title{
  font-size:clamp(2rem,4.2vw,3.15rem);
  line-height:1.04;
}
.section-body{
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  max-width:62ch;
}

section{padding-block:clamp(72px,11vw,128px);position:relative}

.mono-tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ---------- buttons / CTAs ---------- */
.term-btn{
  font-family:var(--mono);font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:13px 18px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.term-btn:hover{border-color:var(--accent);background:var(--accent-dim)}
.term-btn .arrow{color:var(--accent)}
.term-btn .caret{
  display:inline-block;width:8px;background:var(--accent);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.term-btn .caret{animation:none}}
.hero-link{font-family:var(--mono);font-size:12px;color:var(--muted2)}
.hero-link:hover{color:var(--accent)}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===========================================================================
   Shared content components (SEO/content pass).
   Everything below is written against the generic token layer only
   (--bg/--surface/--ink/--muted/--line/--accent…), so the same rules render
   correctly on the light marketing chrome and the dark product deep-dives.
   =========================================================================== */

/* ---------- eyebrow-line (was light-only; now shared, dark pages use it too) ---------- */
.eyebrow-line{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.eyebrow-line::before{content:'';width:18px;height:2px;background:var(--accent-ink);border-radius:2px}

/* ---------- breadcrumb ---------- */
.breadcrumb-nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--muted2);margin-bottom:22px;
}
.breadcrumb-nav a{color:var(--muted);transition:color .2s}
.breadcrumb-nav a:hover{color:var(--accent)}
.breadcrumb-sep{color:var(--muted2)}
.breadcrumb-current{color:var(--ink);opacity:.8}

/* ---------- story (business scenario) ---------- */
.story-layout{margin-top:44px;display:grid;grid-template-columns:.7fr 1.5fr;gap:40px;align-items:start}
.story-profile{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px;
  position:sticky;top:110px;
}
.story-profile-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.story-profile-row{padding-block:11px;border-top:1px solid var(--line)}
.story-profile-row:first-child{border-top:0;padding-top:0}
.story-profile-row dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:3px}
.story-profile-row dd{font-size:14.5px;color:var(--ink);line-height:1.5}
.story-body{color:var(--muted);font-size:17px;line-height:1.75;max-width:68ch}
.story-body p{margin-bottom:20px}
.story-body p:last-child{margin-bottom:0}
.story-body h3{font-size:1.25rem;color:var(--ink);margin:32px 0 12px}
.story-body strong{color:var(--ink);font-weight:500}
.story-body ul{margin:0 0 20px;padding-left:0}
.story-body li{position:relative;padding-left:20px;margin-bottom:9px}
.story-body li::before{content:'';position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.story-body em{font-style:normal;color:var(--ink);background:var(--accent-dim);padding:1px 5px;border-radius:3px}

/* ---------- before / after ---------- */
.ba-grid{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ba-col{border:1px solid var(--line);border-radius:12px;padding:30px;background:var(--surface)}
.ba-after{border-color:var(--accent);background:var(--accent-dim)}
.ba-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted2);margin-bottom:12px;
}
.ba-after .ba-label{color:var(--accent)}
.ba-title{font-size:1.2rem;line-height:1.3;margin-bottom:20px;color:var(--ink)}
.ba-list li{
  position:relative;padding-left:26px;margin-bottom:13px;
  color:var(--muted);font-size:15px;line-height:1.6;
}
.ba-list li:last-child{margin-bottom:0}
.ba-before .ba-list li::before{
  content:'×';position:absolute;left:4px;top:-1px;
  font-family:var(--mono);color:var(--muted2);font-size:15px;
}
.ba-after .ba-list li::before{
  content:'✓';position:absolute;left:2px;top:0;
  font-family:var(--mono);color:var(--accent);font-size:13px;
}

/* ---------- numbered steps ---------- */
.steps-list{margin-top:44px;counter-reset:step}
.step-row{
  display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start;
  padding-block:28px;border-top:1px solid var(--line);
}
.step-row:first-child{border-top:0;padding-top:0}
.step-num{
  font-family:var(--mono);font-size:13px;background:var(--accent);
  border:1px solid var(--line);border-radius:8px;
  height:44px;display:flex;align-items:center;justify-content:center;
  color:var(--surface);
}
.step-title{font-size:1.15rem;color:var(--ink);margin-bottom:8px}
.step-body{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:70ch}

/* ---------- metrics ---------- */
.metric-grid{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px}
.metric-card{border:1px solid var(--line);border-radius:12px;padding:26px;background:var(--surface)}
.metric-num{font-family:var(--disp);font-size:2.4rem;font-weight:500;line-height:1.05;color:var(--accent);letter-spacing:-.03em}
.metric-label{font-size:15px;color:var(--ink);margin-top:10px;font-weight:500}
.metric-note{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:8px}
.metric-disclaimer{margin-top:22px;font-family:var(--mono);font-size:11.5px;color:var(--muted2);line-height:1.6;max-width:80ch}

/* ---------- rich text blocks ---------- */
.rich-blocks{margin-top:44px;display:grid;gap:8px}
.rich-block{padding-block:30px;border-top:1px solid var(--line)}
.rich-block:first-child{border-top:0;padding-top:0}
.rich-block-title{font-size:1.35rem;color:var(--ink);margin-bottom:14px;max-width:34ch}
.rich-block-body{color:var(--muted);font-size:16px;line-height:1.75;max-width:74ch}
.rich-block-body p{margin-bottom:16px}
.rich-block-body p:last-child{margin-bottom:0}
.rich-block-body strong{color:var(--ink);font-weight:500}
.rich-block-body ul{margin:0 0 16px}
.rich-block-body li{position:relative;padding-left:20px;margin-bottom:8px}
.rich-block-body li::before{content:'';position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.rich-block-body code{font-family:var(--mono);font-size:.88em;background:var(--accent-dim);color:var(--ink);padding:2px 6px;border-radius:3px}

/* ---------- feature table ---------- */
.feature-table-wrap{margin-top:40px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.feature-table{width:100%;border-collapse:collapse;min-width:620px}
.feature-table th,.feature-table td{
  text-align:left;padding:15px 20px;font-size:14.5px;line-height:1.6;
  border-bottom:1px solid var(--line);
}
.feature-table th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);font-weight:400;background:var(--surface-hi);
}
.feature-table td{color:var(--muted)}
.feature-table td:first-child{color:var(--ink);font-weight:500}
.feature-table tr:last-child td{border-bottom:0}

/* ---------- fit check ---------- */
.fit-grid{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fit-col{border:1px solid var(--line);border-radius:12px;padding:30px;background:var(--surface)}
.fit-yes{border-color:var(--accent)}
.fit-label{font-size:1.1rem;color:var(--ink);margin-bottom:18px}
.fit-list li{position:relative;padding-left:26px;margin-bottom:13px;color:var(--muted);font-size:15px;line-height:1.6}
.fit-list li:last-child{margin-bottom:0}
.fit-yes .fit-list li::before{content:'✓';position:absolute;left:2px;top:0;font-family:var(--mono);color:var(--accent);font-size:13px}
.fit-no .fit-list li::before{content:'—';position:absolute;left:2px;top:0;font-family:var(--mono);color:var(--muted2);font-size:13px}

/* ---------- FAQ ---------- */
.faq-list{margin-top:40px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  cursor:pointer;list-style:none;padding-block:22px;padding-right:40px;position:relative;
  font-family:var(--disp);font-size:17px;font-weight:500;color:var(--ink);line-height:1.5;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{
  content:'+';position:absolute;right:6px;top:20px;
  font-family:var(--mono);font-size:19px;color:var(--accent);transition:transform .2s;
}
.faq-item[open] .faq-q::after{content:'–'}
.faq-q:hover{color:var(--accent)}
.faq-a{color:var(--muted);font-size:15.5px;line-height:1.75;padding-bottom:24px;max-width:78ch}
.faq-a p{margin-bottom:14px}
.faq-a p:last-child{margin-bottom:0}
.faq-a strong{color:var(--ink);font-weight:500}
.faq-a code{font-family:var(--mono);font-size:.88em;background:var(--accent-dim);color:var(--ink);padding:2px 6px;border-radius:3px}

/* ---------- related links ---------- */
.related-grid{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.related-card{
  position:relative;border:1px solid var(--line);border-radius:12px;padding:26px 26px 44px;
  background:var(--surface);transition:border-color .2s,background .2s;display:block;
}
.related-card:hover{border-color:var(--accent);background:var(--accent-dim)}
.related-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.related-title{font-size:1.05rem;font-weight:500;color:var(--ink);margin-bottom:8px;line-height:1.35}
.related-body{font-size:14px;color:var(--muted);line-height:1.6}
.related-arrow{position:absolute;left:26px;bottom:22px;color:var(--accent);font-size:15px}

/* ---------- cookie consent banner (see partials/cookie-banner.html + common.js) ---------- */
/* z-index above the lead-chat modal/backdrop (light-components.css, 250/251) — the cookie
   notice must stay visible and clickable even while that modal is open. */
.cb-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:260;
  background:#0a0a0a;border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(0);opacity:1;
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s;
}
.cb-bar.cb-hidden{transform:translateY(110%);opacity:0;pointer-events:none}
.cb-inner{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:var(--maxw,1280px);margin:0 auto;padding:16px clamp(20px,4vw,48px);
}
.cb-text{flex:1;min-width:220px;font-size:12.5px;color:rgba(255,255,255,.66);line-height:1.6}
.cb-policy-link{color:var(--accent-ink,var(--accent));text-decoration:underline;text-underline-offset:2px}
.cb-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}
.cb-btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  padding:9px 18px;cursor:pointer;border:1px solid;border-radius:3px;
  transition:background .15s,color .15s,border-color .15s;white-space:nowrap;
}
.cb-accept{background:var(--accent-ink,var(--accent));color:#000;border-color:var(--accent-ink,var(--accent))}
.cb-accept:hover{opacity:.88}
.cb-reject{background:transparent;color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.18)}
.cb-reject:hover{color:#fff;border-color:rgba(255,255,255,.4)}
@media(max-width:600px){
  .cb-inner{padding:14px 20px}
  .cb-actions{width:100%;justify-content:flex-end}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .story-layout{grid-template-columns:1fr;gap:28px}
  .story-profile{position:static}
  .ba-grid,.fit-grid{grid-template-columns:1fr}
  .step-row{grid-template-columns:48px 1fr;gap:16px}
  .step-num{height:38px;font-size:12px}
  .metric-num{font-size:2rem}
}

/* Shared nav + mega-menu + mobile-menu + footer — must render correctly on
   both the light Home and the dark product pages, so every color here comes
   from the generic tokens (--bg/--surface/--ink/--muted/--line/--accent*),
   never the dark-only --black/--white/--green legacy names. */

/* ---------- promo banner ---------- */
/* --promo-h defaults to 0 (see base.css :root) so pages render correctly before JS measures
   the banner's real height; nav/mega-panel/hero offsets all read this one variable so the
   whole chrome shifts down together when the banner is present, and back to 0 when dismissed. */
#promo-banner{
  position:fixed;top:0;left:0;right:0;z-index:220;
  background:#99cc00;color:#0a0a0a;
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding:10px clamp(20px,4vw,48px);
  font-size:13px;
}
.promo-inner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;max-width:calc(var(--maxw) - 60px)}
.promo-text{font-weight:500}
.promo-cta{font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
#promo-dismiss{
  position:absolute;right:clamp(12px,3vw,32px);top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:#0a0a0a;opacity:.6;padding:4px;line-height:0;
}
#promo-dismiss:hover{opacity:1}
#promo-banner[hidden]{display:none}

/* ---------- nav ---------- */
nav{
  position:fixed;top:var(--promo-h,0px);left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,48px);
  background:rgba(0,0,0,0);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(0px);
  transition:background .3s,border-color .3s,backdrop-filter .3s,padding .3s,top .2s;
}
nav.scrolled{
  background:var(--nav-scrolled-bg);
  border-bottom-color:var(--line);
  backdrop-filter:blur(10px);
  padding-block:12px;
}
.nav-brand{display:flex;align-items:center;gap:12px}
.brand-mark{display:flex;align-items:center}
.brand-logo{height:30px;width:auto;display:block}
.nav-tagline{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted2);white-space:nowrap;
  border-left:1px solid var(--line);padding-left:12px;
}
#nav-links{display:flex;align-items:center;gap:28px}
#nav-links>li{position:relative}
#nav-links a,#nav-links .mega-trigger{font-size:13px;color:var(--muted);transition:color .2s}
#nav-links a:hover,#nav-links .mega-trigger:hover,#nav-links .mega-trigger[aria-expanded="true"]{color:var(--ink)}
.nav-domain{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted2);
  border:1px solid var(--line);border-radius:3px;padding:5px 10px;
}
#hamburger{
  display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;width:28px;
}
#hamburger span{display:block;height:1px;background:var(--ink);transition:transform .3s,opacity .3s}
#hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#hamburger.open span:nth-child(2){opacity:0}
#hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
#mobile-menu{
  display:none;position:fixed;inset:0;z-index:190;background:var(--mobile-menu-bg);
  flex-direction:column;justify-content:center;gap:24px;padding:100px 40px 40px;overflow-y:auto;
}
#mobile-menu.open{display:flex}
#mobile-menu a{font-size:22px;font-weight:500}
#mobile-menu .mobile-submenu{display:flex;flex-direction:column;gap:14px;padding-left:16px;margin-top:-10px}
#mobile-menu .mobile-submenu a{font-size:14.5px;font-weight:400;color:var(--muted)}
#mobile-domain{margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--muted2)}

/* ---------- "Prodotti" mega-menu ---------- */
.mega-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:none;font:inherit;color:inherit;padding:0}
.mega-caret{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-top:-3px}
.mega-trigger[aria-expanded="true"] .mega-caret{transform:rotate(225deg);margin-top:3px}
.mega-panel{
  position:fixed;top:var(--promo-h,0px);left:0;right:0;z-index:150;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:104px clamp(20px,4vw,48px) 40px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  box-shadow:0 24px 48px rgba(0,0,0,.14);
}
.mega-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:.85fr 1.7fr;gap:48px}
/* Plain surface background (back to normal) — just a #9c0 border + #9c0 text for the
   featured-product card, not a filled block. */
.mega-featured{background:var(--surface);border:1px solid #99cc00;border-radius:8px;padding:28px}
.mega-featured-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#99cc00;margin-bottom:10px}
.mega-featured-title{display:block;font-size:1.32rem;font-weight:500;margin-bottom:8px;color:#99cc00}
.mega-featured-title:hover{opacity:.8}
.mega-featured-body{color:var(--muted);font-size:13.5px;line-height:1.6;margin-bottom:18px}
.mega-featured-modules{display:flex;flex-wrap:wrap;gap:8px}
.mega-featured-modules a{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  border:1px solid var(--line);border-radius:3px;padding:6px 10px;
  transition:border-color .2s,color .2s;
}
.mega-featured-modules a:hover{border-color:#99cc00;color:var(--ink)}
.mega-featured-cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;background:#99cc00;color:#12161C;font-weight:600;font-size:13.5px;border-radius:6px;padding:11px 18px;transition:opacity .2s}
.mega-featured-cta:hover{opacity:.88}
.mega-product-col{display:flex;flex-direction:column}
.mega-group-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted2);margin-bottom:10px;
}
.mega-group-label-tools{margin-top:22px}
.mega-products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.mega-products-core{grid-template-columns:repeat(2,1fr)}
.mega-product{background:var(--bg);padding:18px 20px;transition:background .2s}
.mega-product:hover{background:var(--surface)}
.mega-product-icon{color:var(--accent);margin-bottom:8px}
.mega-product-name{color:var(--ink);font-size:.95rem;font-weight:500;margin-bottom:4px}
.mega-product-tagline{color:var(--muted2);font-size:12px;line-height:1.5}
.mega-foot{
  max-width:var(--maxw);margin:24px auto 0;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px;
}
.mega-foot a{font-family:var(--mono);font-size:12px;color:var(--muted)}
.mega-foot a:hover{color:var(--accent)}
.mega-foot .mega-cta{color:var(--accent);font-weight:700}

/* ---------- nav actions: search / language / get started ---------- */
.nav-actions{display:flex;align-items:center;gap:14px}
.icon{display:block}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;background:none;border:none;cursor:pointer;
  color:var(--muted);border-radius:6px;transition:color .2s,background .2s;
}
.icon-btn:hover{color:var(--ink);background:var(--surface)}

.lang-switch{position:relative}
.lang-trigger{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);padding:6px 4px;
  transition:color .2s;
}
.lang-trigger:hover,.lang-trigger[aria-expanded="true"]{color:var(--ink)}
.lang-panel{
  position:absolute;top:calc(100% + 10px);right:0;min-width:140px;z-index:210;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.lang-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.lang-panel a{display:block;padding:8px 10px;border-radius:5px;font-size:13px;color:var(--muted);transition:background .15s,color .15s}
.lang-panel a:hover{background:var(--accent-dim);color:var(--ink)}
.lang-panel a.active{color:var(--accent);font-weight:700}

.btn-get-started{
  font-family:var(--disp);font-weight:500;font-size:13.5px;color:#fff;
  background:var(--accent);border-radius:6px;padding:10px 18px;
  white-space:nowrap;transition:opacity .2s;
}
.btn-get-started:hover{opacity:.88}

/* ---------- search overlay ---------- */
#search-overlay{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.5);
  padding:12vh 20px 20px;
}
#search-overlay.open{display:block}
.search-panel{
  max-width:640px;margin-inline:auto;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.3);overflow:hidden;
}
.search-input-row{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);color:var(--muted2)}
#search-input{
  flex:1;border:none;background:none;outline:none;font-family:var(--disp);font-size:16px;color:var(--ink);
}
#search-input::placeholder{color:var(--muted2)}
#search-close{background:none;border:none;cursor:pointer;color:var(--muted2);padding:4px;transition:color .15s}
#search-close:hover{color:var(--ink)}
.search-results{max-height:52vh;overflow-y:auto;padding:8px}
.search-result{
  display:block;padding:12px 14px;border-radius:8px;transition:background .15s;
}
.search-result:hover,.search-result.active{background:var(--accent-dim)}
.search-result-title{font-size:14px;font-weight:500;color:var(--ink)}
.search-result-excerpt{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.search-empty,.search-hint{padding:24px 14px;text-align:center;color:var(--muted2);font-size:13px}

/* ---------- mobile-only additions ---------- */
.mobile-get-started{
  display:inline-block;margin-top:8px;padding:12px 22px;border-radius:8px;
  background:var(--accent);color:#fff !important;font-size:16px !important;font-weight:500 !important;
}
.mobile-lang-row{display:flex;gap:10px;margin-top:8px}
.mobile-lang-row a{
  font-family:var(--mono);font-size:13px !important;font-weight:400 !important;color:var(--muted);
  border:1px solid var(--line);border-radius:5px;padding:7px 12px;
}
.mobile-lang-row a.active{color:var(--accent);border-color:var(--accent)}
.mobile-search-trigger{
  display:flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;
  font-family:var(--disp);font-size:22px;font-weight:500;color:var(--ink);padding:0;
}
.mobile-search-trigger .icon{color:var(--muted)}

/* ---------- footer ---------- */
/* Footer is always gray #666 with white text, on every page — light or dark theme — instead of
   following the page's own background/ink tokens. Every descendant rule below reads --ink/
   --muted/--muted2/--line/--accent directly (not through another custom prop), so overriding
   them here is enough for the whole footer to flip, regardless of which theme's tokens.css is
   loaded on that page. */
footer{
  padding:56px clamp(20px,4vw,48px) 32px;
  background:#666;border-top:1px solid rgba(255,255,255,.18);
  --ink:#fff;--muted:rgba(255,255,255,.75);--muted2:rgba(255,255,255,.55);--line:rgba(255,255,255,.2);--accent:#99cc00;
}
.footer-cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  max-width:var(--maxw,1280px);margin:0 auto;padding-bottom:40px;
}
.footer-col-title{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:16px}
.footer-col-links{list-style:none;display:flex;flex-direction:column;gap:0px}
.footer-col-links a{color:var(--muted);font-size:13.5px;text-decoration:none}
.footer-col-links a:hover{color:var(--accent,var(--green))}
.footer-bottom{
  max-width:var(--maxw,1280px);margin:0 auto;padding-top:28px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.footer-brand{font-family:var(--mono);font-size:12px;color:var(--muted2)}
.footer-powered{font-family:var(--mono);font-size:12px;color:var(--muted2);display:flex;align-items:center;gap:6px}
.footer-powered b{color:var(--muted);font-weight:400}
.footer-legal{
  max-width:var(--maxw,1280px);margin:14px auto 0;font-family:var(--mono);font-size:11px;
  color:var(--muted2);opacity:.75;line-height:1.6;
}
@media(max-width:820px){
  .footer-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .footer-cols{grid-template-columns:1fr}
}

@media(max-width:980px){
  #nav-links{display:none}
  #hamburger{display:flex}
  .mega-panel{display:none}
  #search-trigger,.lang-switch,.btn-get-started{display:none}
}
@media(max-width:600px){
  .nav-tagline{display:none}
  .promo-cta{display:block}
  #promo-dismiss{position:static;transform:none;margin-left:8px}
}

/* Dark "terminal deep-dive" components — ported from the original index.css,
   used only by product-dark.html (loaded together with tokens-dark.css, so
   the legacy --black/--white/--green names below resolve correctly). Only
   rules actually used by product-dark.html's sections are kept — dead
   selectors from the old single-page markup (.card-grid, .stack-grid,
   .chips, .docs-teaser, .stepper) were dropped rather than carried forward. */

/* ---------- hero ---------- */
#hero{
  min-height:100svh;display:flex;align-items:center;padding-top:calc(120px + var(--promo-h,0px));
  position:relative;
}
#hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end}
.hero-title{
  font-size:clamp(2.6rem,6.2vw,5.4rem);
  line-height:.98;
}
.hero-sub{color:var(--muted);font-size:17px;line-height:1.7;max-width:46ch;margin-top:22px}
.hero-cta{margin-top:34px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* ---------- overview / manifesto ---------- */
.manifesto-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
/* Sits inside the body-text column (see product-dark.html) so it inherits that column's exact
   width and left edge — same block width as the text above it, not the full section width. */
/* No background/border — the diagram sits directly on the page, not in a panel. min-width on
   the svg keeps the desktop diagram readable (its own overflow-x scrolls if the viewport is
   narrower); on mobile that min-width is dropped below so it actually shrinks to 100% instead
   of forcing a horizontal scroll (see the responsive block). */
.overview-visual{margin:64px 0 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.overview-visual svg.pwas-diagram{display:block;width:100%;height:auto;min-width:680px}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:36px}
.stat-num{
  font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,4vw,3.2rem);
  color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.stat-label{color:var(--muted2);font-size:13px;line-height:1.5;margin-top:6px;max-width:24ch}

/* ---------- paradigm-compare diagram (optional, Framework only) ---------- */
.paradigm-compare{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px}
.paradigm-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);margin-bottom:22px}
.paradigm-label.accent{color:var(--green)}
.paradigm-chain{display:flex;flex-direction:column}
.paradigm-node{
  position:relative;padding:13px 18px;border:1px solid var(--line);border-radius:4px;
  font-size:13px;color:var(--muted);margin-bottom:26px;background:var(--surface);
}
.paradigm-node:not(:last-child)::after{content:'';position:absolute;left:24px;bottom:-26px;width:1px;height:26px;background:var(--line)}
.paradigm-node.accent-node{border-color:rgba(153,204,0,.4);color:var(--white)}
.paradigm-node.accent-node:not(:last-child)::after{background:rgba(153,204,0,.4)}
.paradigm-fork{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.paradigm-chip{font-family:var(--mono);font-size:10.5px;color:var(--muted2);border:1px solid var(--line);border-radius:3px;padding:5px 10px}
.paradigm-spine{
  margin-top:16px;text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--green);
  border-top:1px dashed rgba(153,204,0,.4);padding-top:12px;letter-spacing:.07em;text-transform:uppercase;
}

/* ---------- feature grid (3-col cards) ---------- */
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:52px;border:1px solid var(--line)}
.card-grid-3 .card{background:var(--black);padding:32px}
.card-icon{color:var(--green);margin-bottom:18px}
.card-num{font-family:var(--mono);color:var(--green);font-size:13px;margin-bottom:16px}
.card-title{font-size:1.28rem;font-weight:500;margin-bottom:12px}
.card-body{color:var(--muted);font-size:14.5px;line-height:1.65}

/* ---------- generated folder structure (Registry Builder) ---------- */
.folder-tree{
  margin-top:48px;border:1px solid var(--line);border-radius:8px;background:#050505;
  padding:28px 32px;font-family:var(--mono);font-size:13px;white-space:pre;
}
.folder-tree-row{display:flex;align-items:center;gap:10px;padding:3px 0;color:var(--muted)}
.folder-tree-row .icon{color:var(--green);flex-shrink:0}

/* ---------- flow / primitives (arch-list rows) ---------- */
.arch-list{margin-top:52px;display:flex;flex-direction:column}
.arch-row{
  display:grid;grid-template-columns:190px 1fr;gap:32px;padding:26px 0;
  border-top:1px solid var(--line);
}
.arch-row:last-child{border-bottom:1px solid var(--line)}
.arch-pattern{font-family:var(--mono);font-size:13px;color:var(--green);padding-top:2px}
.arch-title{font-size:1.05rem;font-weight:500;margin-bottom:8px}
.arch-body{color:var(--muted);font-size:14.5px;line-height:1.65;max-width:58ch}

/* ---------- code panels ---------- */
.code-panel{
  border:1px solid var(--line);border-radius:6px;background:#050505;overflow:hidden;
}
.code-panel .code-bar{
  display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--muted2);
}
.code-panel .dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.code-panel pre{
  margin:0;padding:20px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:#d6d6d6;
  white-space:pre-wrap;word-break:break-word;
}
.code-panel .k{color:var(--green)}
.code-panel .s{color:#9fd0ff}
.code-panel .c{color:var(--muted2)}
.code-samples{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}

/* ---------- positioning (optional) ---------- */
.positioning-list{margin-top:52px;display:flex;flex-direction:column}
.positioning-row{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:22px 0;border-top:1px solid var(--line)}
.positioning-row:last-child{border-bottom:1px solid var(--line)}
.positioning-name{font-family:var(--mono);font-size:13px;color:var(--muted2);padding-top:2px}
.positioning-body{color:var(--muted);font-size:14.5px;line-height:1.65;max-width:64ch}

.compare-wrap{overflow-x:auto;margin-top:48px;border:1px solid var(--line);border-radius:4px}
.compare-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.compare-table thead th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface);white-space:nowrap;
}
.compare-table tbody td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top;line-height:1.55}
.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table tbody td:first-child{color:var(--white);font-weight:500;white-space:nowrap}
.compare-table tbody td:last-child{color:var(--green)}

.positioning-statement{margin-top:48px;border-left:2px solid var(--green);background:var(--green-dim);border-radius:0 6px 6px 0;padding:28px 32px}
.positioning-statement p{font-family:var(--disp);font-size:clamp(1.1rem,2vw,1.4rem);font-weight:500;line-height:1.5;letter-spacing:-.01em;max-width:56ch}
.positioning-statement .sub{margin-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--muted2)}

/* ---------- contact ---------- */
#contact .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
#contact .section-body{max-width:46ch}
.contact-meta{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.contact-meta span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2)}
#contact .hero-cta{align-items:center;margin-top:34px}

/* ---------- section tone rotation (generic replacement for the old
   fixed-ID #interpreters/#registry/#applications rules — product-dark.html
   applies these as classes directly, since which sections exist/appear
   varies per product) ---------- */
.section-tone-accent{
  background:#99cc00;color:#000;
  --white:#000;--muted:rgba(0,0,0,.62);--muted2:rgba(0,0,0,.42);
  --line:rgba(0,0,0,.18);--surface:rgba(0,0,0,.05);--surface-hi:rgba(0,0,0,.09);
  --green:#000;--green-dim:rgba(0,0,0,.08);
  /* --accent* is set once at :root as var(--green) — that resolves to the inherited value at
     declaration time, not a live pointer, so overriding --green alone above does NOT change
     --accent here: anything using var(--accent) directly (.eyebrow, .accent, .eyebrow-line…)
     would still read the original green and become invisible text-on-green. Override it too. */
  --accent:#000;--accent-dim:rgba(0,0,0,.08);--accent-ink:#000;
}
.section-tone-accent .card{background:#000}
.section-tone-accent .card-icon{color:#99cc00}
.section-tone-accent .card-title{color:#fff}
.section-tone-accent .card-body{color:rgba(255,255,255,.66)}
.section-tone-accent .card-num{color:#99cc00}

.section-tone-invert{
  background:#fff;color:#0a0a0a;
  --white:#0a0a0a;--muted:rgba(0,0,0,.62);--muted2:rgba(0,0,0,.42);
  --line:rgba(0,0,0,.14);--surface:rgba(0,0,0,.035);--surface-hi:rgba(0,0,0,.06);
  --green:#5c7a00;--green-dim:rgba(92,122,0,.12);
}

.section-tone-dim{
  background:#666;color:#fff;
  --white:#fff;--muted:rgba(255,255,255,.8);--muted2:rgba(255,255,255,.56);
  --line:rgba(255,255,255,.22);--surface:rgba(255,255,255,.08);--surface-hi:rgba(255,255,255,.13);
  --green:#c9e85a;--green-dim:rgba(201,232,90,.16);
}

#orchestrator-flow,.tone-flow-gradient{background:linear-gradient(180deg,rgba(153,204,0,.05),transparent 40%)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .manifesto-grid{grid-template-columns:1fr}
  .card-grid-3{grid-template-columns:1fr}
  .arch-row{grid-template-columns:1fr}
  .code-samples{grid-template-columns:1fr}
  .positioning-row{grid-template-columns:1fr;gap:8px}
  .compare-table{min-width:560px}
  .paradigm-compare{grid-template-columns:1fr;gap:40px}
}
@media(max-width:640px){
  .overview-visual svg.pwas-diagram{min-width:0;width:100%}
}