/* 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;
}

/* Light "marketing chrome" theme — new corporate palette (ServiceNow-adjacent:
   off-white canvas, heavy whitespace) that keeps the brand's lime hue as an
   accent, darkened for AA contrast on white. Only the generic names are
   defined here (light-components.css never reaches for --black/--white/--green
   directly), so this file is the complete color contract for light pages. */
:root{
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --surface-hi:#FFFFFF;
  --ink:#12161C;
  --muted:rgba(18,22,28,.62);
  --muted2:rgba(18,22,28,.38);
  --line:rgba(18,22,28,.10);
  --accent:#5C8A00;
  --dgr-accent:#5C8A00;--dgr-accent-dim:rgba(92,138,0,.45);--dgr-accent-fill:rgba(92,138,0,.09);
  --dgr-ink:#12161C;--dgr-muted:rgba(18,22,28,.6);--dgr-box:transparent;--dgr-line:rgba(18,22,28,.2);
  --accent-dim:rgba(92,138,0,.10);
  --accent-ink:#99cc00;
  --nav-scrolled-bg:rgba(247,248,250,.86);
  --mobile-menu-bg:rgba(247,248,250,.98);
  color-scheme:light;
}

/* 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}
}

/* Light "marketing chrome" components — new, used only by home.html (loaded
   together with tokens-light.css). Card/grid conventions echo the dark
   theme's .card-grid-3 shape (hairline-divided grid) for family resemblance,
   restyled for a corporate, whitespace-heavy reading. */

/* ---------- hero ---------- */
/* #vanta-bg (see base.css) is fixed full-viewport; Vanta.FOG (see common.js) injects its own
   canvas into it, so the hero itself just needs to stay transparent above it. */
.hero-light{position:relative;padding-top:calc(168px + var(--promo-h,0px));padding-bottom:96px}
.hero-content{position:relative;z-index:1}
.hero-light-title{
  font-size:clamp(2.6rem,5.6vw,4.4rem);
  line-height:1.04;
  max-width:20ch;
}
.hero-light-sub{color:var(--muted);font-size:18px;line-height:1.7;max-width:56ch;margin-top:26px}
.hero-light-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* Impara/Documentazione hero sits on a #9c0 Vanta.BIRDS background (see common.js) — the
   default dark-green --accent (#5C8A00) is too close to that lime to read cleanly, so accent-
   colored hero elements (eyebrow-line, its dash) go pure black here, same pairing as the dark
   theme's .section-tone-accent. Body text (--ink/--muted) already contrasts fine as-is. */
body[data-page="impara"] #hero{--accent:#000;--accent-ink:#000;--accent-dim:rgba(0,0,0,.08)}
/* The Vanta.BIRDS lime backdrop shows through every section on this page, not just the hero
   (any section without its own opaque background), so the eyebrow-line dash (::before, reads
   --accent-ink) needs to stay black page-wide, not just inside #hero. */
body[data-page="impara"] .eyebrow-line::before{background:#000}
/* Same page, further down: the product cards go solid #9c0 instead of white, matching the
   Vanta.BIRDS backdrop showing through the page everywhere a section has no background of its
   own. Text stays black on every green box (site-wide rule, see .section-tone-accent) — --ink/
   --accent/--muted overridden locally so .product-card-name/-tagline/-icon/-body (which all
   read those tokens directly, no indirection) pick up black automatically. */
body[data-page="impara"] .product-card{
  background:#99cc00;
  --ink:#000;--accent:#000;--muted:rgba(0,0,0,.62);--muted2:rgba(0,0,0,.42);--line:rgba(0,0,0,.18);
}
body[data-page="impara"] .product-card:hover{background:#8ab800}
.btn-primary{
  font-family:var(--disp);font-weight:500;font-size:14.5px;color:#fff;
  background:var(--accent);border:1px solid var(--accent);border-radius:6px;
  padding:14px 24px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  transition:opacity .2s;
}
.btn-primary:hover{opacity:.88}
.btn-secondary{
  font-family:var(--disp);font-weight:500;font-size:14.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:14px 24px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.btn-secondary:hover{border-color:var(--accent)}

/* ---------- eyebrow variant (no "// " terminal prefix on light pages) ---------- */
.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}

/* ---------- product pillar grid ---------- */
.pillar-intro{max-width:60ch}
.pillar-layout{margin-top:52px;display:grid;grid-template-columns:.85fr 1.7fr;gap:32px;align-items:start}
/* Solid #9c0, black text throughout (every green box on the site keeps black text — see
   .section-tone-accent) — the one deliberately "loud" card among the otherwise white/neutral
   pillar grid. */
.pillar-featured{
  background:#99cc00;color:#000;border-radius:14px;padding:32px;
  display:flex;flex-direction:column;height:100%;
}
.pillar-featured-icon{color:#000;margin-bottom:16px}
.pillar-featured-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#000;margin-bottom:14px}
.pillar-featured-title{font-size:1.6rem;font-weight:500;margin-bottom:10px}
.pillar-featured-body{color:rgba(0,0,0,.7);font-size:14px;line-height:1.65;flex:1}
.pillar-featured-modules{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pillar-featured-modules span{
  font-family:var(--mono);font-size:11px;color:#000;
  border:1px solid rgba(0,0,0,.25);border-radius:3px;padding:6px 10px;
}
.pillar-featured-link{margin-top:24px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;font-size:14px;font-weight:600;border-radius:6px;padding:12px 20px;transition:opacity .2s}
.pillar-featured:hover .pillar-featured-link{opacity:.88}

.pillar-groups{display:flex;flex-direction:column}
.pillar-group-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted2);margin-bottom:12px;
}
.pillar-group-label-tools{margin-top:24px}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
/* "La piattaforma" — dark #333, white body/title text with a green accent (tagline/icon,
   which read --accent) for a bit of brand color on the darker of the two groups. */
.pillar-group-label-core + .product-grid .product-card{
  background:#333;
  --ink:#fff;--accent:#99cc00;--muted:rgba(255,255,255,.7);--muted2:rgba(255,255,255,.5);--line:rgba(255,255,255,.15);
}
.pillar-group-label-core + .product-grid .product-card:hover{background:#3d3d3d}
/* "Strumenti dell'ecosistema" — mid gray #666, all white text (no green accent, to read as
   visually one step lighter/quieter than the platform group above it). */
.pillar-group-label-tools + .product-grid .product-card{
  background:#666;
  --ink:#fff;--accent:#fff;--muted:rgba(255,255,255,.75);--muted2:rgba(255,255,255,.55);--line:rgba(255,255,255,.2);
}
.pillar-group-label-tools + .product-grid .product-card:hover{background:#707070}
/* an odd last card spans the full row: avoids an empty cell showing the grid's line background */
.product-grid > *:last-child:nth-child(odd){grid-column:1 / -1}
.product-card{background:var(--surface);padding:26px;transition:background .2s}
.product-card:hover{background:var(--accent-dim)}
.product-card-icon{color:var(--accent);margin-bottom:12px}
/* color:var(--ink) is explicit (not just inherited) so the accent-card overrides below can
   re-resolve it locally — an element with no color declaration of its own would otherwise
   inherit the already-resolved value from higher up the tree and never see a --ink override
   on .product-card itself, the same indirection pitfall --accent had on .section-tone-accent. */
.product-card-name{color:var(--ink);font-size:1.02rem;font-weight:500;margin-bottom:6px}
.product-card-tagline{color:var(--accent);font-family:var(--mono);font-size:11.5px;margin-bottom:10px}
.product-card-body{color:var(--muted);font-size:13.5px;line-height:1.6}

/* ---------- proof / positioning strip ---------- */
.proof-strip{background:var(--ink);border-radius:14px;padding:56px clamp(24px,5vw,64px);text-align:center}
.proof-statement{
  color:#fff;font-family:var(--disp);font-weight:500;
  font-size:clamp(1.4rem,3vw,2rem);line-height:1.4;max-width:56ch;margin-inline:auto;
}
.proof-sub{margin-top:18px;color:rgba(255,255,255,.6);font-family:var(--mono);font-size:12.5px}

/* ---------- teaser row (Soluzioni / Impara / Partner) ---------- */
.teaser-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:52px}
.teaser-card{
  border:1px solid var(--line);border-radius:10px;padding:28px;background:var(--surface);
  display:flex;flex-direction:column;transition:border-color .2s;
}
.teaser-card:hover{border-color:var(--accent)}
.teaser-card-title{font-size:1.05rem;font-weight:500;margin-bottom:10px}
.teaser-card-body{color:var(--muted);font-size:13.5px;line-height:1.6;flex:1}
.teaser-card-link{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--accent)}

/* ---------- module detail blocks (anchored deep-dives on a single consolidated page) ---------- */
.module-detail-list{display:flex;flex-direction:column}
.module-detail{
  padding:40px 0;border-top:1px solid var(--line);
  scroll-margin-top:calc(100px + var(--promo-h,0px));
}
.module-detail:last-child{border-bottom:1px solid var(--line)}
.module-detail-title{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;letter-spacing:-.01em}

/* ---------- lead chat (Contatti / Partner / Demo) — see common.js's lead-chat engine ---------- */
/* Inline trigger card (stays in page flow) — opens the centered modal below. */
.lead-form-trigger-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:clamp(28px,5vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:24px;
}
.lead-form-copy{padding-top:4px}
.lead-chat-open{border:none;cursor:pointer}

/* Centered modal + blurred backdrop — same pattern as pooel_app's #ct-backdrop/#contact-terminal
   (see pooel_app/src/css/contact.css): a fixed full-viewport backdrop that fades/blurs in, and a
   fixed, centered box on top of it. Both live outside the normal page flow (position:fixed), so
   where they sit in the DOM doesn't matter. */
#lead-chat-backdrop{
  position:fixed;inset:0;z-index:250;
  background:transparent;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  opacity:0;pointer-events:none;
  transition:opacity .3s,background .3s,backdrop-filter .3s,-webkit-backdrop-filter .3s;
}
#lead-chat-backdrop.open{
  background:rgba(10,12,16,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:1;pointer-events:auto;
}
.lead-chat-modal{
  position:fixed;top:50%;left:50%;z-index:251;
  width:min(600px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 64px));
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
  padding:clamp(24px,4vw,34px);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,-48%);
  transition:opacity .3s,transform .3s,visibility 0s .3s;
}
.lead-chat-modal.open{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,-50%);
  transition:opacity .3s,transform .3s;
}
.lead-chat-modal-close{
  position:absolute;top:16px;right:18px;background:none;border:none;cursor:pointer;
  font-size:24px;line-height:1;color:var(--muted2);padding:4px 8px;transition:color .15s;
}
.lead-chat-modal-close:hover{color:var(--ink)}
body.lead-chat-modal-open{overflow:hidden}

.lead-chat{display:flex;flex-direction:column;min-height:360px;margin-top:18px}
.lead-chat-log{
  flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:420px;
  padding-right:4px;scroll-behavior:smooth;
}
.chat-bubble{max-width:82%;padding:11px 15px;border-radius:12px;font-size:14px;line-height:1.55;animation:chat-in .25s ease}
@keyframes chat-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.chat-bubble-bot{align-self:flex-start;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:3px}
.chat-bubble-user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:3px}
.chat-bubble-user a{color:#fff;text-decoration:underline}
.chat-bubble-error{align-self:flex-start;background:rgba(200,60,60,.08);border:1px solid rgba(200,60,60,.28);color:#a83a3a}
.chat-typing{align-self:flex-start;display:flex;gap:4px;padding:13px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted2);animation:chat-typing 1.1s infinite ease-in-out}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes chat-typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
.chat-chip{
  font-family:var(--disp);font-size:13px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:20px;padding:8px 16px;cursor:pointer;transition:border-color .15s,background .15s;
}
.chat-chip:hover{border-color:var(--accent);background:var(--accent-dim)}

.chat-consent{display:flex;flex-direction:column;gap:10px;align-self:flex-start;max-width:88%}
.chat-consent-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--muted);line-height:1.5;cursor:pointer}
.chat-consent-check input{margin-top:3px;flex-shrink:0}
.chat-consent-check a{color:var(--accent)}
.chat-consent-submit{align-self:flex-start;border:none;cursor:pointer}

.lead-chat-row{display:flex;gap:10px;align-items:center;margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.lead-chat-input{
  flex:1;font-family:var(--disp);font-size:14px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;
}
.lead-chat-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.lead-chat-input:disabled{opacity:.55}
.lead-chat-skip{
  font-family:var(--mono);font-size:11.5px;color:var(--muted2);background:none;border:none;
  cursor:pointer;white-space:nowrap;text-decoration:underline;text-underline-offset:2px;
}
.lead-chat-skip:hover{color:var(--accent)}
.lead-chat-send{
  flex-shrink:0;width:42px;height:42px;border-radius:8px;border:none;cursor:pointer;
  background:var(--accent);color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;
}
.lead-chat-send:disabled{opacity:.5;cursor:default}
#turnstile-widget{position:absolute;width:0;height:0;overflow:hidden}

.lead-form-success,.lead-form-error{display:none}
.lead-chat-modal.lead-submitted .lead-chat{display:none}
.lead-chat-modal.lead-submitted .lead-form-success{display:block;padding-top:4px}
.lead-form-success-title{font-size:1.15rem;font-weight:500;margin-bottom:8px}
.lead-chat-modal.lead-errored .lead-chat{display:none}
.lead-chat-modal.lead-errored .lead-form-error{display:block;padding-top:4px}
.lead-form-error .btn-secondary{margin-top:14px}

/* ---------- demo CTA band ---------- */
.demo-cta{
  background:var(--accent-dim);border:1px solid var(--line);border-radius:14px;
  padding:56px clamp(24px,5vw,64px);text-align:center;
}
.demo-cta-title{font-size:clamp(1.6rem,3vw,2.2rem)}
.demo-cta-body{color:var(--muted);font-size:15px;max-width:52ch;margin:16px auto 0}
.demo-cta-actions{margin-top:28px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ---------- sitemap (mappa del sito) ---------- */
.sitemap-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.sitemap-group-title{font-size:1rem;font-weight:500;margin-bottom:16px}
.sitemap-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.sitemap-links a{color:var(--muted);font-size:14px;text-decoration:none}
.sitemap-links a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------- legal document (Privacy & Cookie Policy) ---------- */
.legal-doc{max-width:74ch}
.legal-doc h2{font-size:1.3rem;font-weight:500;margin:44px 0 14px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{font-size:1rem;font-weight:500;margin:26px 0 10px;color:var(--ink)}
.legal-doc p{color:var(--muted);font-size:14.5px;line-height:1.75;margin-bottom:14px}
.legal-doc ul{margin:0 0 14px;padding-left:20px;color:var(--muted);font-size:14.5px;line-height:1.75}
.legal-doc li{margin-bottom:6px}
.legal-doc a{color:var(--accent)}
.legal-doc strong{color:var(--ink);font-weight:500}
.legal-doc code{font-family:var(--mono);font-size:.9em;background:var(--surface-hi);border-radius:3px;padding:1px 5px}
.legal-doc .legal-meta{
  border:1px solid var(--line);border-radius:8px;padding:18px 22px;margin:16px 0 24px;background:var(--surface);
}
.legal-doc .legal-meta .row{display:flex;gap:8px;font-size:13.5px;line-height:1.8;flex-wrap:wrap}
.legal-doc .legal-meta .key{color:var(--muted2);min-width:140px}
.legal-doc .legal-meta .val{color:var(--ink)}
.legal-doc table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:13.5px}
.legal-doc th,.legal-doc td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.legal-doc th{color:var(--muted2);font-weight:500;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.legal-doc td{color:var(--muted)}
.legal-doc .section-number{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.08em}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .pillar-layout{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .teaser-row{grid-template-columns:1fr}
  .sitemap-groups{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .sitemap-groups{grid-template-columns:1fr}
}

/* ---------- symbolic pipeline diagram (inline SVG, transparent) ---------- */
.diagram-visual,.diagram-visual-2{margin:44px 0 0;padding:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.diagram-visual svg.pwas-diagram,.diagram-visual-2 svg.pwas-diagram{display:block;width:100%;height:auto;min-width:680px}
.diagram-visual-2 svg.pwas-diagram{min-width:0;max-width:600px;margin-inline:auto}
.diagram-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.diagram-split .diagram-visual{margin:0;overflow:visible}
.diagram-visual.is-vertical svg.pwas-diagram{min-width:0;max-width:620px;margin-inline:auto}
@media (max-width:900px){.diagram-split{grid-template-columns:1fr;gap:32px}.diagram-split .diagram-visual{margin-top:8px}}