/* VAYON marketing site — CSS-first, responsive, accessible. No framework, no tracking.
   Redesigned (Sprint 404) for a warm, modern marketing feel — deliberately unlike the admin app. */
:root {
  --navy:#0a1834; --navy2:#12234a; --ink:#141b2b; --muted:#5a6577; --soft:#68758a;
  --cyan:#12c2e9; --cyan2:#087a9f; --violet:#6a5cff; --grad-a:#5b6bff; --grad-b:#12c2e9;
  --line:#e6ebf3; --bg:#f6f8fc; --card:#ffffff; --ok:#0a7d4b; --warn:#b23c17;
  --radius:16px; --wrap:1040px; --shadow:0 18px 46px rgba(16,32,80,.10);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font:17px/1.65 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); }
html[lang="he"] body,
html[lang="he"] button,
html[lang="he"] input,
html[lang="he"] select,
html[lang="he"] textarea { font-family:Arial,"Segoe UI",sans-serif; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 22px; }
a { color:var(--cyan2); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:3px solid var(--violet); outline-offset:2px; border-radius:6px; }
/* skip link hidden ABOVE the viewport (vertical, RTL-safe — never causes horizontal overflow) */
.skip-link { position:absolute; left:8px; top:-48px; background:#fff; padding:10px 14px; z-index:20;
  border-radius:0 0 8px 8px; }
.skip-link:focus { top:0; }
main { padding:0 0 10px; }

/* ── Header ── */
.site-header { position:sticky; top:0; z-index:10; background:rgba(10,24,52,.92);
  backdrop-filter:saturate(1.4) blur(8px); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.06); }
.header-inner { display:flex; align-items:center; gap:18px; padding:14px 22px; flex-wrap:wrap; }
/* Sprint 533 — the VayonAI wordmark lockup (inline-SVG gateway glyph + text). */
.brand { display:inline-flex; align-items:center; }
.brand:hover { text-decoration:none; }
.brand-logo { height:30px; width:auto; display:block; }
/* Primary nav — desktop flex (no JS required), mobile native <details> disclosure (keyboard + SR safe) */
.primary-nav { margin-inline-start:auto; }
.nav-details { position:relative; }
.nav-details > summary { list-style:none; cursor:pointer; color:#fff; font-weight:600; font-size:15px;
  padding:9px 14px; border:1px solid rgba(255,255,255,.30); border-radius:10px; display:inline-flex;
  align-items:center; gap:8px; }
.nav-details > summary::-webkit-details-marker { display:none; }
.nav-details > summary::after { content:"\25be"; font-size:12px; }
.nav-details[open] > summary::after { content:"\25b4"; }  /* open/closed shown by the caret, not colour */
.nav-links { list-style:none; margin:0; padding:8px; display:flex; flex-direction:column; gap:4px;
  position:absolute; right:0; top:calc(100% + 10px); min-width:230px; background:var(--navy2);
  border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:var(--shadow); z-index:12; }
.nav-links a { display:block; color:#c9d7ec; padding:10px 13px; border-radius:9px; font-size:15px;
  font-weight:500; }
.nav-links a:hover { background:rgba(255,255,255,.10); color:#fff; text-decoration:none; }
.nav-links a.active { background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 3px 0 0 var(--cyan); }
.nav-links .nav-cta { background:linear-gradient(120deg,var(--grad-a),var(--grad-b)); color:#fff;
  font-weight:700; }
.nav-links .nav-portal { border:1px solid rgba(143,230,255,.55); color:#8fe6ff; font-weight:700; }
@media (min-width:880px) {
  .nav-details > summary { display:none; }
  /* Desktop shows the links inline without toggling the disclosure. A CLOSED <details> otherwise keeps its
     content hidden (modern Chromium wraps it in ::details-content with content-visibility:hidden), which made
     the whole nav vanish on desktop — force the content visible here. */
  .nav-details::details-content { content-visibility:visible; }
  .nav-details .nav-links { position:static; flex-direction:row; align-items:center; gap:3px;
    min-width:0; padding:0; background:none; border:0; box-shadow:none; }
  .nav-links a { display:inline-block; }
  .nav-links a.active { box-shadow:none; }
}

/* ── Buttons ── */
.btn { display:inline-block; background:linear-gradient(120deg,var(--grad-a),var(--grad-b)); color:#fff;
  border:0; border-radius:12px; padding:14px 26px; font-weight:700; font-size:16px; cursor:pointer;
  box-shadow:0 12px 26px rgba(91,107,255,.30); transition:transform .12s ease, box-shadow .12s ease; }
.btn:hover { text-decoration:none; transform:translateY(-2px); box-shadow:0 16px 34px rgba(91,107,255,.42); }
.btn.secondary { background:#fff; color:var(--navy); border:1px solid var(--line); box-shadow:none; }
.btn.secondary:hover { border-color:#c8d3e6; box-shadow:0 8px 20px rgba(16,32,80,.08); }
.btn.ghost { background:rgba(255,255,255,.12); color:#fff; box-shadow:none; }
.cta { display:flex; gap:14px; flex-wrap:wrap; margin:22px 0; }

/* ── Hero ── */
.hero { position:relative; color:#fff; text-align:center; overflow:hidden;
  background:radial-gradient(1200px 500px at 50% -10%, #1d3f7e 0%, var(--navy) 55%, #070f22 100%);
  margin:0 -22px; padding:78px 22px 90px; border-radius:0 0 34px 34px; }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 300px at 85% 20%, rgba(18,194,233,.18), transparent 70%),
             radial-gradient(500px 260px at 12% 30%, rgba(106,92,255,.20), transparent 70%); }
.hero > * { position:relative; z-index:1; }
.eyebrow { display:inline-block; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:#8fe6ff; background:rgba(18,194,233,.12); border:1px solid rgba(18,194,233,.3);
  padding:6px 14px; border-radius:999px; margin-bottom:18px; }
.hero h1 { font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.08; margin:0 auto 16px; max-width:16ch;
  font-weight:800; letter-spacing:-.5px; }
.hero h1 .accent { background:linear-gradient(120deg,#8fe6ff,#b7aaff); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.hero .lead { font-size:clamp(1.05rem,2.2vw,1.3rem); color:#c7d4ea; max-width:60ch; margin:0 auto 8px; }
.hero .cta { justify-content:center; margin-top:26px; }
.hero .trust-line { margin-top:22px; color:#9fb0cc; font-size:14px; }
.hero.compact { padding:52px 22px 60px; border-radius:0 0 30px 30px; }
.hero.compact h1 { font-size:clamp(1.9rem,4.4vw,2.7rem); max-width:22ch; }

/* ── Sections ── */
section.band { padding:64px 0; }
.section-head { text-align:center; max-width:64ch; margin:0 auto 34px; }
.section-head .kicker { color:var(--violet); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:13px; }
h2 { font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.15; margin:8px 0 12px; font-weight:800;
  letter-spacing:-.3px; }
.lead { font-size:1.12rem; color:var(--muted); }
.muted { color:var(--muted); }

/* Editorial feature grid — line icons, no boxy cards, generous air (commercial B2B pattern) */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:42px 56px; }
.feature { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.feature .ic { color:var(--violet); display:block; margin-top:2px; }
.feature .ic svg { width:26px; height:26px; display:block; fill:none; stroke:currentColor; stroke-width:1.55;
  stroke-linecap:round; stroke-linejoin:round; }
.feature h3 { margin:1px 0 7px; font-size:1.15rem; letter-spacing:-.2px; }
.feature p { margin:0; color:var(--muted); }
.feature.warn .ic { color:#c05a3a; }

/* Steps — big gradient numerals, no boxes */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:42px 48px; }
.step .num { font-size:2.7rem; font-weight:800; line-height:1; letter-spacing:-1.5px; display:block;
  background:linear-gradient(120deg,var(--grad-a),var(--grad-b)); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.step h3 { margin:14px 0 8px; font-size:1.14rem; letter-spacing:-.2px; }
.step p { margin:0; color:var(--muted); }

/* Outcomes — clean hairline list, no boxes */
ul.checks { list-style:none; padding:0; margin:6px auto 0; max-width:780px; }
ul.checks li { position:relative; padding:19px 0 19px 42px; border-top:1px solid var(--line); font-size:1.06rem; }
ul.checks li:first-child { border-top:0; }
ul.checks li::before { content:""; position:absolute; left:8px; top:22px; width:17px; height:9px;
  border-left:2.5px solid var(--cyan2); border-bottom:2.5px solid var(--cyan2); transform:rotate(-45deg); }

/* Generic content panel (info boxes, placeholders) */
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 24px;
  box-shadow:0 8px 22px rgba(16,32,80,.05); max-width:680px; margin:8px 0; }
.card h3 { margin:0 0 8px; }

/* CTA band */
.cta-band { color:#fff; text-align:center; border-radius:26px; padding:52px 24px; margin:8px 0;
  background:radial-gradient(900px 400px at 50% -30%, #1d3f7e, var(--navy) 60%, #070f22);
  box-shadow:var(--shadow); }
.cta-band h2 { color:#fff; }
.cta-band p { color:#c7d4ea; max-width:56ch; margin:0 auto; }
.cta-band .cta { justify-content:center; }

/* Trust strip */
.trust { display:flex; gap:26px; flex-wrap:wrap; justify-content:center; color:var(--soft);
  font-size:14px; margin-top:18px; }
.trust b { color:var(--ink); }

/* ── Forms (demo / contact) ── */
form.lead-form { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; max-width:660px; box-shadow:var(--shadow); }
label { display:block; font-weight:600; font-size:14px; margin:14px 0 4px; }
input, select, textarea { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  font:inherit; background:#fff; }
input:focus, select:focus, textarea:focus { border-color:var(--violet); }
textarea { min-height:120px; resize:vertical; }
.req { color:var(--warn); }
.consent { display:flex; gap:10px; align-items:flex-start; margin-top:14px; }
.consent input { width:auto; margin-top:4px; }
.hint { color:var(--muted); font-size:13px; margin-top:4px; }
/* honeypot: visually hidden via clip (no off-screen positioning → RTL-safe, no horizontal overflow) */
.hp { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; margin:-1px; padding:0; border:0; }
.error { background:#fdecea; border:1px solid #f5c6c0; color:var(--warn); padding:12px 14px;
  border-radius:10px; margin:14px 0; }
.notice { background:#eaf7f0; border:1px solid #b8e2cd; color:var(--ok); padding:12px 14px;
  border-radius:10px; margin:14px 0; }

/* ── Footer ── */
.site-footer { border-top:1px solid var(--line); background:#0a1834; color:#c9d7ec; padding:34px 0;
  margin-top:40px; }
.site-footer a { color:#8fe6ff; }
.site-footer p { margin:5px 0; }
.site-footer .muted { color:#8494ad; }

/* ── Content pages (Sprint 526): full-bleed main; sections carry their own .wrap ── */
.site-main.fullbleed { padding-bottom:10px; }
img, picture, svg { max-width:100%; }

/* Split hero — text + primary diagram, editorial and spacious (not a card wall) */
.split-hero { color:#fff; overflow:hidden;
  background:radial-gradient(1100px 480px at 78% -10%, #1d3f7e 0%, var(--navy) 58%, #070f22 100%); }
.split-hero .hero-inner { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center;
  padding:70px 22px 78px; }
.split-hero .hero-copy { max-width:60ch; }
.split-hero h1 { font-size:clamp(2rem,4.4vw,3.15rem); line-height:1.08; margin:12px 0 16px;
  font-weight:800; letter-spacing:-.5px; }
.split-hero .lead { font-size:clamp(1.05rem,2.1vw,1.28rem); color:#c7d4ea; }
.split-hero .cta { margin-top:24px; }
.split-hero .trust-line { margin-top:20px; color:#9fb0cc; font-size:14px; letter-spacing:.06em; }
.split-hero .hero-visual { min-width:0; }
.split-hero.hero-light { color:var(--ink); background:linear-gradient(180deg,#eef3fb,var(--bg)); }
.split-hero.hero-light .eyebrow { color:#087a9f; background:#e7f7fc; border-color:#79cfe7; }
.split-hero.hero-light .lead { color:var(--muted); }
.split-hero.hero-light .btn.ghost { background:#fff; color:var(--navy); border:1px solid var(--line); }
.split-hero.hero-light .trust-line { color:var(--soft); }
/* Text-led hero (Solutions/Security have no hero image) — single column, copy given full breathing room */
.split-hero.hero-textonly .hero-inner { grid-template-columns:1fr; gap:0; }
.split-hero.hero-textonly .hero-copy { max-width:74ch; }
.split-hero.hero-textonly h1 { font-size:clamp(2.1rem,4.8vw,3.35rem); }
.split-hero.hero-textonly .lead { max-width:66ch; }

/* Editorial alternating sections — copy + a single supporting visual, generous air */
section.band.editorial { padding:60px 0; }
section.band.editorial.alt { background:#fff; }
/* Text-only editorial section: container spans the wrap (same left edge as image sections); only the copy
   measure is constrained, left-aligned — no centered narrow block that breaks the editorial left rhythm. */
.sec-inner { display:block; }
.sec-inner:not(.has-visual) .sec-copy { max-width:70ch; }
.sec-inner.has-visual { display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center;
  max-width:none; }
section.band.editorial:nth-of-type(even) .sec-inner.has-visual { grid-template-columns:1.1fr 1fr; }
section.band.editorial:nth-of-type(even) .sec-inner.has-visual .sec-copy { order:2; }
.sec-copy h2 { margin:0 0 12px; }
.sec-copy .lead { color:var(--muted); }

/* Diagram + screenshot frames */
.asset-fig { margin:0; }
.asset-fig img { display:block; width:100%; height:auto; border-radius:14px; }
.sec-visual { display:grid; gap:24px; }
.sec-visual .asset-fig.frame-screenshot { padding:12px; border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(145deg,#f4f7fb,#e8eef7); box-shadow:0 18px 46px rgba(16,32,80,.11); }
.sec-visual .asset-fig.frame-screenshot::before { content:""; display:block; width:42px; height:7px; margin:0 0 10px 6px;
  border-radius:999px; background:linear-gradient(90deg,#ff8f70 0 25%,#f3c75d 25% 55%,#54c99b 55%); opacity:.75; }
.asset-fig.frame-screenshot img { border:1px solid var(--line); box-shadow:0 8px 24px rgba(16,32,80,.08); }
.sec-visual .asset-fig.frame-diagram { max-width:720px; padding:16px; border:1px solid var(--line); border-radius:18px;
  background:#fff; box-shadow:0 14px 36px rgba(16,32,80,.07); }
.asset-fig.frame-diagram img { border:1px solid var(--line); background:#fff; }
.asset-fig.is-hero img { box-shadow:0 24px 60px rgba(7,15,34,.45); }
.split-hero.hero-light .asset-fig.is-hero img { box-shadow:0 18px 48px rgba(16,32,80,.18); }
.asset-fig figcaption { margin-top:12px; font-size:14px; color:var(--muted); }
.asset-fig figcaption .cap { display:block; font-weight:600; color:var(--ink); }
.split-hero .asset-fig figcaption .cap { color:#e7eefb; }
.split-hero .asset-fig figcaption { color:#a9bad8; }
.asset-fig figcaption .qual { display:block; margin-top:3px; font-size:13px; color:var(--soft); }
.split-hero .asset-fig figcaption .qual { color:#8ba0c4; }

/* Footer columns */
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px 40px; }
.footer-grid .brand-logo { height:26px; }
.foot-col h2 { font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:#8fa3c4; margin:0 0 12px; }
.foot-col ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.foot-col a { color:#c9d7ec; font-size:15px; }
.foot-brand .muted { color:#8ba0c4; max-width:46ch; margin-top:10px; font-size:14px; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important;
  scroll-behavior:auto !important; } }
@media (max-width:880px) {
  .split-hero .hero-inner { grid-template-columns:1fr; gap:30px; padding:52px 20px 58px; }
  .sec-inner.has-visual, section.band.editorial:nth-of-type(even) .sec-inner.has-visual {
    grid-template-columns:1fr; gap:26px; }
  section.band.editorial:nth-of-type(even) .sec-inner.has-visual .sec-copy { order:0; }
  .footer-grid { grid-template-columns:1fr; gap:26px; }
}
@media (max-width:640px) { .hero { padding:56px 18px 64px; } section.band { padding:44px 0; } }

/* ── Sprint 528: final navigation, localization, resources, forms, legal, consent, RTL ── */
/* Footer now has four columns (brand + Product + Company + Legal) */
.footer-grid { grid-template-columns:1.6fr 1fr 1fr 1fr; }
.linkish { background:none; border:0; padding:0; color:#c9d7ec; font:inherit; font-size:15px; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; }
.linkish:hover { color:#fff; }

/* Homepage / editorial scannable bullets (Sprint 530) */
.sec-points { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; max-width:60ch; }
.sec-points li { position:relative; padding-inline-start:26px; color:var(--muted); font-size:1.02rem; }
.sec-points li::before { content:""; position:absolute; inset-inline-start:2px; top:9px; width:12px; height:7px;
  border-inline-start:2.5px solid var(--cyan2); border-bottom:2.5px solid var(--cyan2); transform:rotate(-45deg); }
[dir="rtl"] .sec-points li::before { transform:scaleX(-1) rotate(-45deg); }

/* Compact language switcher (Sprint 530) — native <details>, shows only the current locale */
.nav-lang { margin-inline-start:6px; }
.lang-details { position:relative; }
.lang-details > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-size:14px; padding:8px 12px; border-radius:9px; color:inherit; }
.lang-details > summary::-webkit-details-marker { display:none; }
.lang-details > summary::after { content:"\25be"; font-size:11px; opacity:.75; }
.lang-details[open] > summary::after { content:"\25b4"; }
.lang-menu { list-style:none; margin:0; padding:6px; position:absolute; inset-inline-end:0; top:calc(100% + 8px);
  min-width:140px; background:var(--navy2); border:1px solid rgba(255,255,255,.14); border-radius:10px;
  box-shadow:var(--shadow); z-index:14; display:grid; gap:2px; }
.lang-opt { display:block; padding:8px 11px; border-radius:7px; font-size:14px; color:#c9d7ec; }
.lang-opt:hover { background:rgba(255,255,255,.10); color:#fff; text-decoration:none; }
.lang-opt.is-current { color:#fff; font-weight:700; background:rgba(18,194,233,.16); }
[dir="rtl"] .lang-opt[lang="en"], [dir="rtl"] .lang-opt[lang="de"], [dir="rtl"] .lang-opt[lang="fr"] { direction:ltr; text-align:start; }
@media (max-width:879px) { .lang-menu { position:static; inset-inline-end:auto; box-shadow:none; background:transparent; border:0; padding:4px 0; } }

/* Analytics consent banner */
.consent-bar { position:fixed; inset-inline:0; bottom:0; z-index:50; background:#0a1834; color:#e7eefb;
  border-top:1px solid rgba(255,255,255,.14); box-shadow:0 -10px 30px rgba(7,15,34,.4); }
.consent-inner { display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 22px; flex-wrap:wrap; }
.consent-copy { margin:0; font-size:14px; max-width:70ch; color:#c7d4ea; }
.consent-actions { display:flex; gap:10px; flex-shrink:0; }

/* Resources grid */
.resource-grid { list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:20px; }
.resource-card { border:1px solid var(--line); border-radius:14px; padding:22px; background:#fff;
  display:flex; flex-direction:column; gap:10px; }
.resource-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.resource-head h2 { margin:0; font-size:1.12rem; }
.resource-card .muted { flex:1; margin:0; }
.resource-link { font-weight:600; color:var(--navy); }
.resource-note { font-size:12px; color:var(--soft); }
.avail { font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px;
  font-weight:600; }
.avail-available_now { background:#e2f7ee; color:#0a7a4f; }
.avail-product_overview, .avail-repo_reference { background:#e7eefb; color:#28407e; }
.avail-portal { background:#fff4e0; color:#8a5a12; }
.avail-planned { background:#f0eef6; color:#5a5470; }

/* Form pages: intro + panel two-column */
.form-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:start; }
.form-intro .intro-block { margin-bottom:22px; }
.form-intro h2 { margin:0 0 8px; font-size:1.15rem; }
/* MKT-S592: demo-journey bullets fit the narrow intro column (shared .sec-points check marks) */
.form-intro .sec-points { margin-top:10px; gap:8px; }
.form-intro .sec-points li { font-size:.95rem; }
.legal-inline a { color:var(--navy); font-weight:600; }
.form-panel { border:1px solid var(--line); border-radius:16px; padding:26px; background:#fff;
  box-shadow:0 16px 40px rgba(16,32,80,.08); }
.form-panel fieldset { border:0; margin:0; padding:0; }
.form-panel legend { font-weight:800; font-size:1.15rem; margin-bottom:6px; }
.consent-label { margin:0; font-weight:400; font-size:14px; }
.consent-label a { color:var(--navy); text-decoration:underline; }
.form-submit { margin-top:16px; }

/* Legal pages */
.legal-body { max-width:74ch; }
.legal-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.legal-section { margin:22px 0; }
.legal-section h2 { font-size:1.15rem; margin:0 0 8px; }
.draft-banner { background:#fff4e0; border:1px solid #f0d9a8; color:#7a5512; padding:14px 16px;
  border-radius:12px; margin-bottom:22px; }

/* RTL: keep technical tokens/latin runs LTR inside an RTL document */
[dir="rtl"] .brand, [dir="rtl"] code, [dir="rtl"] .hint { direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] .nav-lang-opt[lang="en"], [dir="rtl"] .nav-lang-opt[lang="de"],
[dir="rtl"] .nav-lang-opt[lang="fr"] { direction:ltr; }

@media (max-width:880px) {
  .form-layout { grid-template-columns:1fr; gap:26px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .consent-inner { justify-content:flex-start; }
}
@media (max-width:560px) { .footer-grid { grid-template-columns:1fr; } }

/* ══ Sprint 531 (FEAT-032) — interactive "how a request flows" routing experience (Home only) ══════════
   Progressive enhancement: the static markup (D02 fallback + both scenario panels + summary) is styled for
   the no-JS state; `.re-root[data-enhanced]` (added by routing-experience.js) reveals the animated diagram +
   controls and hides the fallback. Motion is transform/opacity only and is fully removed under
   prefers-reduced-motion. RTL-safe via logical properties. */
.re-lead { max-width:64ch; }
.re-root { margin-top:22px; padding:clamp(18px,3vw,30px); background:var(--navy); color:#eaf1fb;
  border:1px solid rgba(143,230,255,.18); border-radius:var(--radius); box-shadow:var(--shadow); }
.re-note { margin:0 0 8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan); }
.re-thesis { margin:0 0 18px; max-width:72ch; font-size:clamp(15px,1.7vw,18px); line-height:1.55; color:#cfe0f5; }

/* controls — revealed only when enhanced (inert without JS) */
.re-controls { display:none; }
.re-root[data-enhanced] .re-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; }
.re-scn-group { display:inline-flex; gap:6px; padding:4px; background:rgba(255,255,255,.05); border-radius:12px; }
.re-scn { appearance:none; border:1px solid transparent; background:transparent; color:#b9c8de; cursor:pointer;
  font:inherit; font-weight:600; font-size:14px; padding:8px 14px; border-radius:9px; }
.re-scn:hover { color:#fff; }
.re-scn[aria-pressed="true"] { background:rgba(18,194,233,.16); color:#fff; border-color:rgba(143,230,255,.5); }
.re-scn:focus-visible, .re-toggle:focus-visible, .re-why summary:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.re-toggle { margin-inline-start:auto; width:40px; height:40px; display:inline-flex; align-items:center;
  justify-content:center; appearance:none; cursor:pointer; color:#fff; background:rgba(255,255,255,.04);
  border:1px solid rgba(143,230,255,.4); border-radius:10px; }
.re-toggle-glyph { display:block; }
.re-toggle[data-re-state="playing"] .re-toggle-glyph { width:10px; height:12px;
  border-inline-start:3px solid currentColor; border-inline-end:3px solid currentColor; }
.re-toggle[data-re-state="paused"] .re-toggle-glyph { width:0; height:0; border-block:6px solid transparent;
  border-inline-start:10px solid currentColor; }

/* figure: fallback (D02) by default; diagram + record chips when enhanced */
.re-figure { position:relative; }
.re-diagram, .re-record { display:none; }
.re-root[data-enhanced] .re-diagram { display:grid; }
.re-root[data-enhanced] .re-record { display:flex; }
.re-root[data-enhanced] .re-fallback { display:none; }
.re-fallback img { max-width:100%; height:auto; border-radius:12px; }

.re-diagram { position:relative; grid-template-columns:1fr 1.35fr 1fr; gap:clamp(10px,2vw,22px);
  align-items:center; min-height:230px; }
.re-lane { display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; }
.re-cap { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--soft); }
.re-node { display:block; width:100%; padding:12px 14px; border-radius:12px; font-weight:600; font-size:14px;
  color:#dbe7f7; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.re-gateway { background:linear-gradient(160deg,rgba(91,107,255,.18),rgba(18,194,233,.12));
  border-color:rgba(143,230,255,.4); }
.re-gw-title { display:block; margin-bottom:8px; font-weight:700; color:#fff; }
.re-gates { list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.re-gate { padding:5px 8px; border-radius:7px; font-size:12.5px; font-weight:500; color:#8ea3c2;
  background:rgba(255,255,255,.03); transition:color .3s, background .3s; }
.re-gate[data-lit] { color:#eaf6ff; background:rgba(18,194,233,.16); }
.re-internal, .re-cloud { transition:border-color .35s, box-shadow .35s, background .35s, color .35s; }
.re-diagram[data-re-route="internal"] .re-internal,
.re-diagram[data-re-route="cloud"] .re-cloud { color:#fff; background:rgba(18,194,233,.1);
  border-color:var(--cyan); box-shadow:0 0 0 1px rgba(18,194,233,.4),0 6px 20px rgba(18,194,233,.16); }

/* the travelling request packet — full-width across the diagram, logical inset so RTL flips it */
.re-packet { position:absolute; inset-block-start:50%; inset-inline-start:8%; width:12px; height:12px;
  margin-block-start:-6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan);
  opacity:0; transition:inset-inline-start .6s ease, opacity .4s ease; }
.re-diagram[data-re-stage="0"] .re-packet { inset-inline-start:8%; opacity:1; }
.re-diagram[data-re-stage="1"] .re-packet, .re-diagram[data-re-stage="2"] .re-packet,
.re-diagram[data-re-stage="3"] .re-packet, .re-diagram[data-re-stage="4"] .re-packet,
.re-diagram[data-re-stage="5"] .re-packet { inset-inline-start:50%; opacity:1; }
.re-diagram[data-re-stage="6"] .re-packet { inset-inline-start:90%; opacity:1; }
.re-diagram[data-re-stage="7"] .re-packet { inset-inline-start:50%; opacity:1; }
.re-diagram[data-re-stage="8"] .re-packet { inset-inline-start:50%; opacity:.35; }

.re-record { gap:10px; margin-top:14px; justify-content:center; flex-wrap:wrap; }
.re-chip { padding:6px 12px; font-size:12.5px; font-weight:600; color:#b9c8de; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); transition:color .3s, border-color .3s; }
.re-diagram[data-re-stage="8"] ~ .re-record .re-chip { color:#fff; border-color:var(--cyan); }

/* scenario panels — both visible without JS; JS shows one at a time */
.re-panels { display:grid; gap:16px; margin-top:22px; }
.re-panel[hidden] { display:none; }
.re-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px; margin:0; }
.re-fact { display:flex; flex-direction:column; gap:2px; }
.re-fact dt { margin:0; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--soft); }
.re-fact dd { margin:0; font-size:14px; font-weight:500; color:#dbe7f7; }
.re-fact-route dd { font-weight:700; color:#fff; }
.re-state-eligible { color:#7fe6b0; }
.re-state-eligible::before { content:"\2713\00a0"; }        /* ✓ — meaning is not colour-only */
.re-state-ineligible { color:#f0a58a; }
.re-state-ineligible::before { content:"\2715\00a0"; }      /* ✕ */
.re-route::before { content:"\2192\00a0"; color:var(--cyan); }
.re-why { margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.1); }
.re-why summary { cursor:pointer; font-weight:600; color:var(--cyan); }
.re-reasons { margin:8px 0 0; padding-inline-start:18px; color:#b9c8de; font-size:13.5px; }
.re-why-copy { margin:8px 0 0; color:#cfe0f5; font-size:14px; }
.re-summary, .re-surfaces { margin:16px 0 0; max-width:78ch; color:var(--soft); font-size:13px; }

@media (max-width:720px) {
  .re-diagram { grid-template-columns:1fr; }
  .re-facts { grid-template-columns:1fr; }
  .re-packet { display:none; }               /* the horizontal packet has no meaning in the vertical stack */
  .re-toggle { margin-inline-start:0; }
}

/* Reduced motion — no autoplay (JS), and here we remove every transition/animation + the packet. The static
   complete route (all gates lit, target highlighted) remains fully legible. */
@media (prefers-reduced-motion: reduce) {
  .re-gate, .re-internal, .re-cloud, .re-chip, .re-packet { transition:none !important; }
  .re-packet { display:none !important; }
}
.re-root[data-reduced] .re-packet { display:none; }

/* ══ Sprint 532 (FEAT-032) — product-understanding / buyer-orientation components ═════════════════════
   Light editorial cards that match the content pages (not the dark routing panel). Shared toggle pattern:
   `[data-toggle-group]` panels are all shown without JS (stacked); toggle-panels.js sets data-enhanced to
   reveal the tabs and show one panel at a time. Motion is minimal; RTL via logical properties. */
.orient-section .wrap { max-width:var(--wrap); }
.orient-lead { max-width:64ch; }

/* shared tab toggle */
.orient-tabs { display:none; gap:6px; padding:4px; margin:20px 0 18px; background:#eef2f9;
  border:1px solid var(--line); border-radius:12px; }
[data-toggle-group][data-enhanced] .orient-tabs { display:inline-flex; flex-wrap:wrap; }
.orient-tab { appearance:none; border:1px solid transparent; background:transparent; color:var(--muted);
  cursor:pointer; font:inherit; font-weight:600; font-size:14px; padding:8px 16px; border-radius:9px; }
.orient-tab:hover { color:var(--navy); }
.orient-tab[aria-pressed="true"] { background:#fff; color:var(--navy); border-color:var(--line);
  box-shadow:0 4px 12px rgba(16,32,80,.08); }
.orient-tab:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
.orient-panel[hidden] { display:none; }

/* Before / With VAYON */
.orient-bw-panels { display:grid; gap:20px; grid-template-columns:repeat(2,minmax(0,1fr)); }
[data-toggle-group][data-enhanced] .orient-bw-panels { grid-template-columns:1fr; }
.orient-bw-panel { padding:22px 24px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); }
.orient-bw-panel h3 { margin:0 0 6px; font-size:1.15rem; letter-spacing:-.2px; }
.orient-bw-panel.is-before { border-inline-start:4px solid #c9944a; }
.orient-bw-panel.is-after { border-inline-start:4px solid var(--cyan); }
.orient-list { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; }
.orient-list li { position:relative; padding-inline-start:26px; color:var(--ink); font-size:15px; }
.orient-list li::before { position:absolute; inset-inline-start:0; top:1px; font-weight:700; }
.orient-list-before li::before { content:"\2715"; color:#b06a2c; }        /* ✕ scattered */
.orient-list-after li::before { content:"\2713"; color:var(--ok); }        /* ✓ governed */
.orient-bw-message { margin:20px 0 0; font-size:1.15rem; font-weight:700; color:var(--navy); }

/* Request-trace annotations */
.orient-trace { display:grid; grid-template-columns:1.1fr 1fr; gap:34px; align-items:start; margin-top:22px; }
.orient-trace-figure img { max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }
.orient-trace-notes h3 { margin:0 0 6px; font-size:1.25rem; letter-spacing:-.2px; }
.orient-annotations { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:11px; }
.orient-annotations li { position:relative; padding-inline-start:28px; color:var(--ink); font-size:15px; }
.orient-annotations li::before { content:"\2713"; position:absolute; inset-inline-start:0; top:0;
  color:var(--cyan2); font-weight:700; }
.orient-caption { margin:16px 0 0; color:var(--soft); font-size:12.5px; }

@media (max-width:760px) {
  .orient-bw-panels { grid-template-columns:1fr; }
  .orient-trace { grid-template-columns:1fr; }
}

/* Sprint 532 — component headings for component-only sections + the remaining orientation components */
.orient-h { font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.15; margin:0 0 12px; font-weight:800;
  letter-spacing:-.3px; }
.orient-roles .lead, .orient-journey .lead { max-width:64ch; }

/* Where VAYON sits — reference architecture */
.orient-pos { margin-top:20px; }
.orient-pos-msg { font-size:1.15rem; font-weight:600; color:var(--navy); max-width:60ch; margin:0 0 20px; }
.orient-pos-grid { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:clamp(12px,2vw,26px); align-items:center; }
.orient-cap { display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft);
  margin-bottom:8px; }
.orient-pos-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.orient-pos-list li { padding:11px 14px; background:var(--card); border:1px solid var(--line); border-radius:11px;
  font-weight:600; font-size:14px; color:var(--ink); }
.orient-pos-gw { padding:16px; border-radius:14px; background:linear-gradient(160deg,#eef1ff,#e6f7fb);
  border:1px solid rgba(18,194,233,.4); }
.orient-pos-gw-title { display:block; font-weight:800; color:var(--navy); text-align:center; margin-bottom:10px; }
.orient-pos-gates { list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.orient-pos-gates li { padding:7px 10px; background:rgba(255,255,255,.7); border:1px solid var(--line);
  border-radius:8px; font-size:12.5px; font-weight:600; color:var(--navy); text-align:center; }
.orient-pos-targets li { border-color:rgba(18,194,233,.45); }

/* What VAYON is / is not */
.orient-isnot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:8px; }
.orient-isnot-card { padding:22px 24px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); }
.orient-isnot-card h3 { margin:0 0 8px; font-size:1.15rem; }
.orient-isnot-card.is-yes { border-inline-start:4px solid var(--ok); }
.orient-isnot-card.is-no { border-inline-start:4px solid var(--soft); }
.orient-list-is li::before { content:"\2713"; color:var(--ok); }
.orient-list-isnot li::before { content:"\2013"; color:var(--soft); }   /* – : not X (neutral, not an attack) */

/* Governed failover micro-flow */
.orient-flow { margin-top:16px; }
.orient-flow-steps { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; counter-reset:none; }
.orient-flow-steps li { display:flex; align-items:flex-start; gap:12px; padding:12px 16px; background:var(--card);
  border:1px solid var(--line); border-radius:11px; font-size:14.5px; color:var(--ink); }
.orient-flow-n { flex:none; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(120deg,var(--grad-a),var(--grad-b)); color:#fff; border-radius:50%; font-weight:700;
  font-size:13px; }
.orient-flow-msg { margin:18px 0 0; font-size:1.15rem; font-weight:700; color:var(--navy); }

/* Buyer-role selector (uses the shared .orient-tabs / .orient-panel toggle) */
.orient-roles-tabs { margin-top:18px; }
.orient-roles-panels { margin-top:20px; display:grid; gap:18px; }
.orient-role-panel { padding:24px 26px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); }
.orient-role-panel h3 { margin:0 0 12px; font-size:1.2rem; }
.orient-role-facts { display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; margin:0; }
.orient-role-facts > div { display:flex; flex-direction:column; gap:3px; }
.orient-role-facts dt { margin:0; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--soft); }
.orient-role-facts dd { margin:0; font-size:14.5px; color:var(--ink); }
.orient-role-link { display:inline-block; margin-top:16px; font-weight:700; color:var(--cyan2); }

/* Deployment runtime boundary */
.orient-boundary { margin-top:16px; }
.orient-boundary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:10px; }
.orient-boundary-card { padding:20px 22px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); }
.orient-boundary-card.is-runtime { border:2px solid var(--cyan); }
.orient-boundary-card h3 { margin:0 0 10px; font-size:1.08rem; }
.orient-boundary-list { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.orient-boundary-list li { padding-inline-start:16px; position:relative; font-size:13.5px; color:var(--ink); }
.orient-boundary-list li::before { content:"\2022"; position:absolute; inset-inline-start:0; color:var(--cyan2); }
.orient-boundary-note { margin:12px 0 0; font-size:12.5px; font-weight:600; color:var(--warn); }
.orient-boundary-rules { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:9px; }
.orient-boundary-rules li { position:relative; padding-inline-start:26px; font-size:14.5px; color:var(--navy);
  font-weight:600; }
.orient-boundary-rules li::before { content:"\2713"; position:absolute; inset-inline-start:0; color:var(--ok);
  font-weight:700; }

/* Adoption journey */
.orient-journey-steps { list-style:none; margin:20px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; counter-reset:none; }
.orient-journey-step { padding:20px 22px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); }
.orient-journey-n { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center;
  background:linear-gradient(120deg,var(--grad-a),var(--grad-b)); color:#fff; border-radius:50%; font-weight:800;
  margin-bottom:10px; }
.orient-journey-step h3 { margin:0 0 8px; font-size:1.1rem; }
.orient-journey-points { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.orient-journey-points li { position:relative; padding-inline-start:16px; font-size:13.5px; color:var(--ink); }
.orient-journey-points li::before { content:"\2022"; position:absolute; inset-inline-start:0; color:var(--cyan2); }

@media (max-width:900px) {
  .orient-pos-grid { grid-template-columns:1fr; }
  .orient-boundary-grid { grid-template-columns:1fr; }
  .orient-journey-steps { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) {
  .orient-isnot-grid { grid-template-columns:1fr; }
  .orient-role-facts { grid-template-columns:1fr; }
  .orient-journey-steps { grid-template-columns:1fr; }
}

/* Sprint 532 — supporting figures kept inside enhanced sections (D05 / D01 / D04) */
.orient-bw-figure, .orient-pos-figure, .orient-boundary-figure { margin:16px 0; }
.orient-bw-figure img, .orient-pos-figure img, .orient-boundary-figure img { max-width:100%; height:auto;
  border-radius:12px; border:1px solid var(--line); }
.orient-pos-figure { max-width:640px; }
.orient-flow-figure { margin:14px 0; max-width:520px; }
.orient-flow-figure img { max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }

/* ══ Sprint 533 (FEAT-032) — governed-gateway HERO animation (Home) ═══════════════════════════════════
   Progressive enhancement: the static hero image + an accessible summary show without JS; hero-gateway.js
   sets data-enhanced to reveal this CSS-driven animation and hide the image. Motion is transform/opacity via
   keyframes, paused off-screen (data-paused) and fully removed under prefers-reduced-motion. RTL via logical
   properties. Requests always flow source → gateway → destination (no bypass drawn). */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hero-gw { position:relative; }
.hero-gw-stage { display:none; }
.hero-gw[data-enhanced] .hero-gw-stage { display:grid; }
.hero-gw[data-enhanced] .hero-gw-fallback { display:none; }
.hero-gw-fallback img { max-width:100%; height:auto; border-radius:16px; }

.hero-gw-stage { position:relative; grid-template-columns:1fr 1.25fr 1fr; gap:14px; align-items:center;
  padding:20px; min-height:290px; border-radius:18px;
  background:linear-gradient(160deg, rgba(29,63,126,.38), rgba(7,15,34,.52));
  border:1px solid rgba(143,230,255,.20); box-shadow:inset 0 0 60px rgba(18,194,233,.06); }
.hero-gw-col { display:flex; flex-direction:column; gap:9px; }
.hero-gw-targets { text-align:end; }
.hero-gw-cap { font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:#8fa6c9; }
.hero-gw-src, .hero-gw-tgt { padding:9px 11px; border-radius:10px; font-size:12.5px; font-weight:600;
  color:#dbe7f7; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.hero-gw-tgt-internal { border-color:rgba(18,194,233,.55); }
.hero-gw-tgt-cloud { border-color:rgba(106,92,255,.55); }
.hero-gw-tgt-blocked { border-color:rgba(178,60,23,.5); color:#f0b3a2; }
.hero-gw-core { text-align:center; padding:16px 12px; border-radius:14px;
  background:linear-gradient(160deg, rgba(91,107,255,.28), rgba(18,194,233,.18));
  border:1px solid rgba(143,230,255,.55); box-shadow:0 0 44px rgba(18,194,233,.16); }
.hero-gw-title { display:block; font-weight:800; color:#fff; font-size:13.5px; margin-bottom:10px; }
.hero-gw-scans { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.hero-gw-scan { font-size:11px; font-weight:600; color:#9fb2cd; padding:5px 6px; border-radius:7px;
  background:rgba(255,255,255,.05); transition:color .3s, background .3s; }
.hero-gw-audit { display:block; margin:14px auto 0; width:max-content; font-size:11px; font-weight:600;
  color:#b9c8de; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); grid-column:1 / -1; }
.hero-gw-caption { margin:12px 0 0; font-size:12px; color:#9fb0cc; }

/* pulsing scan chips + flowing packets (only when enhanced and motion is allowed) */
.hero-gw[data-enhanced]:not([data-reduced]) .hero-gw-scan { animation:heroScan 4s infinite; }
.hero-gw-scan[data-hero-scan="identity"] { animation-delay:0s; }
.hero-gw-scan[data-hero-scan="sensitivity"] { animation-delay:.35s; }
.hero-gw-scan[data-hero-scan="policy"] { animation-delay:.7s; }
.hero-gw-scan[data-hero-scan="eligibility"] { animation-delay:1.05s; }
@keyframes heroScan { 0%,55%,100% { color:#9fb2cd; background:rgba(255,255,255,.05); }
  14%,38% { color:#eaf6ff; background:rgba(18,194,233,.22); } }
.hero-gw-packet { position:absolute; width:9px; height:9px; border-radius:50%; opacity:0;
  box-shadow:0 0 12px currentColor; }
.hero-gw[data-enhanced]:not([data-reduced]) .hero-gw-p1 { animation:heroFlow 4s infinite; }
.hero-gw[data-enhanced]:not([data-reduced]) .hero-gw-p2 { animation:heroFlow 4s infinite 1.3s; }
.hero-gw[data-enhanced]:not([data-reduced]) .hero-gw-p3 { animation:heroFlowBlocked 4s infinite 2.6s; }
.hero-gw-p1 { color:var(--cyan); background:var(--cyan); top:34%; }
.hero-gw-p2 { color:var(--violet); background:var(--violet); top:50%; }
.hero-gw-p3 { color:#e08a6a; background:#e08a6a; top:66%; }
@keyframes heroFlow { 0% { inset-inline-start:15%; opacity:0; } 12% { opacity:1; }
  45%,55% { inset-inline-start:47%; opacity:1; } 88% { inset-inline-start:82%; opacity:1; }
  100% { inset-inline-start:82%; opacity:0; } }
@keyframes heroFlowBlocked { 0% { inset-inline-start:15%; opacity:0; } 12% { opacity:1; }
  45% { inset-inline-start:47%; opacity:1; } 62% { inset-inline-start:47%; opacity:.15; }
  100% { inset-inline-start:47%; opacity:0; } }
.hero-gw[data-paused] .hero-gw-scan, .hero-gw[data-paused] .hero-gw-packet { animation-play-state:paused; }

@media (prefers-reduced-motion: reduce) {
  .hero-gw-packet { display:none !important; }
  .hero-gw-scan { animation:none !important; }
}
.hero-gw[data-reduced] .hero-gw-packet { display:none; }
@media (max-width:900px) {
  .hero-gw-stage { grid-template-columns:1fr; gap:10px; min-height:0; }
  .hero-gw-targets { text-align:start; }
  .hero-gw-packet { display:none; }
}

/* Add-on catalog: CSS-only, responsive, and based on logical properties for RTL/LTR. */
.addons-intro { max-width:820px; margin-bottom:28px; }
.addons-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.addon-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow); }
.addon-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.addon-card .eyebrow { color:#087a9f; background:#e7f7fc; border-color:#79cfe7; }
.addon-card h3 { margin:12px 0 8px; }
.addon-status { display:inline-flex; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:800;
  background:rgba(18,194,233,.12); color:var(--cyan2); border:1px solid rgba(18,194,233,.32); }
.addon-status[data-status="planned"] { background:rgba(141,153,174,.12); color:var(--muted);
  border-color:var(--line); }
.addon-planned { border-style:dashed; }
.addon-facts { margin:18px 0; display:grid; gap:7px; }
.addon-facts dt { font-weight:800; font-size:13px; margin-top:6px; }
.addon-facts dd { margin:0; color:var(--muted); }
.text-link { color:#087a9f; font-weight:800; text-decoration-thickness:2px; text-underline-offset:3px; }
.text-link:hover { text-decoration:underline; }
@media (max-width:760px) { .addons-grid { grid-template-columns:1fr; } }

/* Commercial catalog details: a bounded reading measure, semantic definition lists, and clear paired actions. */
.card-actions { display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; margin-top:auto; }
.addon-request-link { margin-inline-start:14px; }
.offering-detail-wrap { max-width:900px; }
.offering-detail-list { display:grid; gap:16px; margin:0; }
.offering-detail-list > div { padding:20px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); }
.offering-detail-list dt { font-weight:850; font-size:18px; color:var(--ink); }
.offering-detail-list dd { margin:8px 0 0; color:var(--muted); line-height:1.7; }
.offering-detail-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
@media (max-width:760px) {
  .addon-request-link { margin-inline-start:0; }
  .offering-detail-list > div { padding:16px; }
}

/* Product-first home: a concise buyer story with two restrained visual moments. */
.home-page .split-hero .hero-inner { grid-template-columns:1fr; gap:0; padding-block:64px; }
.home-page .split-hero .hero-copy { max-width:850px; }
.home-page .split-hero h1 { max-width:820px; }
.home-page .split-hero .hero-visual { display:none; }
.home-page .hero-gw-stage { min-height:238px; padding:16px; }
.home-page .hero-gw-caption { display:none; }
.home-section-head { display:grid; grid-template-columns:150px minmax(0,760px); gap:28px; align-items:start; margin-bottom:28px; }
.home-section-head h2, .home-statement h2, .home-proof-copy h2 { margin-top:0; }
.home-section-head .lead, .home-statement .lead, .home-proof-copy .lead { margin-bottom:0; }
.home-kicker { display:inline-flex; align-items:center; justify-content:center; width:max-content; max-width:150px; min-height:38px;
  padding:8px 13px; border-radius:999px; background:rgba(18,194,233,.11); border:1px solid rgba(18,194,233,.28);
  color:var(--cyan2); font-weight:800; font-size:12px; line-height:1.25; text-align:center; }
.home-card-grid { display:grid; gap:18px; }
.home-card-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.home-card-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.home-card { min-height:145px; padding:22px; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.home-card p { margin:14px 0 0; color:var(--ink); font-weight:650; line-height:1.55; }
.home-card-mark { color:var(--soft); font-size:12px; font-weight:800; }
.home-check { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:rgba(20,160,108,.12); color:var(--ok); font-weight:900; }
.home-statement { display:grid; grid-template-columns:150px minmax(0,760px) auto; gap:28px; align-items:start; }
.home-inline-link { align-self:center; white-space:nowrap; }
.home-solution-context { max-width:980px; margin-top:28px; padding:22px; border:1px solid var(--line); border-radius:18px;
  background:var(--card); box-shadow:0 16px 42px rgba(9,24,55,.07); }
.home-solution-context .orient-bw-figure { display:none; }
.home-solution-context .orient-bw-message { margin-bottom:0; }
.home-flow-steps { list-style:none; margin-top:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.home-flow-steps li { position:relative; min-height:150px; padding:20px 16px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.home-flow-steps li:not(:last-child)::after { content:""; position:absolute; inset-inline-end:-11px; top:34px; width:10px; border-top:1px solid var(--cyan); }
.home-flow-number { display:inline-flex; align-items:center; justify-content:center; width:29px; height:29px; border-radius:50%;
  background:linear-gradient(120deg,var(--grad-a),var(--grad-b)); color:#fff; font-size:12px; font-weight:800; }
.home-flow-steps p { margin:14px 0 0; font-size:14px; line-height:1.55; color:var(--ink); }
.home-flow-context { max-width:920px; margin-top:28px; padding:18px; border:1px solid var(--line); border-radius:18px;
  background:var(--card); box-shadow:0 16px 42px rgba(9,24,55,.08); overflow:hidden; }
.home-flow-context .re-root { margin:0; }
.home-flow-context .re-figure { display:none; }
.home-proof-grid { display:grid; grid-template-columns:minmax(320px,1.1fr) minmax(300px,.9fr); gap:52px; align-items:center; }
.home-proof-copy .home-kicker { margin-bottom:18px; }
.home-proof-copy .orient-trace-notes { margin-top:24px; }
.home-proof-copy .orient-trace-notes h3 { margin-bottom:8px; }
.home-proof-copy .btn { margin-top:14px; }
.home-proof-media { max-width:560px; justify-self:end; }
.home-proof-media { padding:12px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#f4f7fb,#e8eef7);
  box-shadow:0 20px 50px rgba(9,24,55,.12); }
.home-proof-media::before { content:""; display:block; width:42px; height:7px; margin:0 0 10px 6px; border-radius:999px;
  background:linear-gradient(90deg,#ff8f70 0 25%,#f3c75d 25% 55%,#54c99b 55%); opacity:.75; }
.home-proof-media .asset-fig { margin:0; border-radius:12px; overflow:hidden; background:#fff; }
.home-proof-media .asset-fig.frame-screenshot { padding:0; border:0; box-shadow:none; }
.home-proof-media .asset-fig.frame-screenshot::before { display:none; }
.home-proof-media img { display:block; width:100%; height:auto; max-height:430px; object-fit:cover; object-position:top; }
.home-close .cta-band { max-width:980px; margin-inline:auto; }
@media (max-width:980px) {
  .home-page .split-hero .hero-inner, .home-proof-grid { grid-template-columns:1fr; }
  .home-page .hero-visual { max-width:680px; }
  .home-card-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-flow-steps { grid-template-columns:1fr; }
  .home-flow-steps li { min-height:0; display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; }
  .home-flow-steps li:not(:last-child)::after { display:none; }
  .home-flow-steps p { margin:3px 0 0; }
  .home-proof-media { justify-self:stretch; }
}
@media (max-width:700px) {
  .home-page .split-hero .hero-inner { padding-block:42px; }
  .home-section-head, .home-statement { grid-template-columns:1fr; gap:14px; }
  .home-card-grid-3, .home-card-grid-4 { grid-template-columns:1fr; }
  .home-card { min-height:0; }
  .home-inline-link { justify-self:start; }
}