@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;src:url('../fonts/inter.woff2?v=2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:300 700;font-display:swap;src:url('../fonts/space-grotesk.woff2?v=2') format('woff2')}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img,picture,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---- tokens: dark is default ---- */
:root,[data-theme="dark"]{
  --bg:#1c1c1e; --surface:#252528; --border:#333; --border-strong:#6e6e73; --text:#fff;
  --muted:rgba(255,255,255,.70); --accent:#cddc39; --accent-fill:#cddc39;
  --accent-on-fill:#1c1c1e; --brand-teal:#14b8a6; --brand-teal-text:#14b8a6;
  --band:linear-gradient(135deg,#0d9488 0%,#0f766e 55%,#115e59 100%);
  --contact-bg:#101012;
  --btn-on-band:#cddc39; --btn-on-band-text:#1c1c1e;
  --diagram-emph:#7fe9d8; --diagram-emph-bg:#2b3a37;
  --focus:#14b8a6;
  --flag:#fca5a5; --flag-bg:rgba(248,113,113,.14);
  --suggest-bg:rgba(251,146,60,.15); --suggest-bg-h:rgba(251,146,60,.27); --suggest-bd:rgba(251,146,60,.55);
  --mesh-dot:#cddc39; --mesh-link:#14b8a6;
  --shadow-card:none;
  --shadow-photo:0 0 0 1px var(--border);
}
[data-theme="light"]{
  --bg:#f2f2ef; --surface:#fff; --border:#e5e5e0; --border-strong:#8c8c8c; --text:#1c1c1e;
  --muted:rgba(28,28,30,.65); --accent:#4a7c22; --accent-fill:#cddc39;
  --accent-on-fill:#1c1c1e; --brand-teal:#14b8a6; --brand-teal-text:#0f766e;
  --band:linear-gradient(135deg,#0d9488 0%,#0f766e 55%,#115e59 100%);
  --contact-bg:#101012;
  --btn-on-band:#cddc39; --btn-on-band-text:#1c1c1e;
  --diagram-emph:#0f766e; --diagram-emph-bg:#d9f1ec;
  --focus:#0f766e;
  --flag:#b42318; --flag-bg:rgba(217,45,32,.10);
  --mesh-dot:#4a7c22; --mesh-link:#0f766e;
  --shadow-card:0 1px 2px rgba(24,24,27,.04),0 12px 32px -16px rgba(24,24,27,.14);
  --shadow-photo:0 10px 26px rgba(0,0,0,.14);
}
/* The Solutions page runs an orange accent ("demos world"); home/about stay lime.
   Tabs, chart highlights, toggles, kickers, links and buttons all reference
   --accent / --accent-fill, so overriding those two tokens recolours the page.
   Theme-aware so orange text/fills stay WCAG-AA legible in light mode. */
html[data-page="solutions"]{--accent:#fb923c; --accent-fill:#fb923c; --accent-on-fill:#1c1c1e; --btn-on-band:#fb923c}
html[data-page="solutions"][data-theme="light"]{--accent:#c2410c; --accent-fill:#c2410c; --accent-on-fill:#fff}

/* ---- base ---- */
body{background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.6;
  transition:background .25s ease,color .25s ease}
h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif;line-height:1.1;letter-spacing:-.02em;font-weight:700}
.muted{color:var(--muted)}

/* ---- layout + nav + buttons + footer ---- */
.container{width:min(1120px,92vw);margin-inline:auto}
@supports(padding:max(0px)){.site-nav .row,.site-footer .container{padding-inline:max(0px,env(safe-area-inset-left)) max(0px,env(safe-area-inset-right))}}
.site-nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-nav .row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.01em}
.nav-links{display:flex;gap:22px;align-items:center;font-size:.9rem}
.nav-links a:hover{color:var(--accent)}
.nav-links a[aria-current="page"]{color:var(--accent)}
.nav-tools{display:flex;gap:12px;align-items:center}
.btn{display:inline-block;background:var(--accent-fill);color:var(--accent-on-fill);
  font-weight:700;padding:10px 20px;border-radius:30px;font-size:.9rem;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-outline{display:inline-block;padding:10px 20px;border:1px solid var(--border-strong);border-radius:30px;font-weight:600;font-size:.9rem;color:var(--text);transition:border-color .15s,transform .15s}
.btn-outline:hover{border-color:var(--brand-teal);transform:translateY(-1px)}
.btn-outline:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* homepage "try it" hook: hub icon -> three branching clickable options.
   Deliberately a dark, distinct panel (not the white "what we build" cards). */
.hub{margin-top:26px;display:grid;grid-template-columns:auto 92px 1fr;align-items:stretch;gap:clamp(12px,3vw,30px);
  background:#fdba74;border:1px solid #f6a861;border-radius:18px;padding:clamp(22px,4vw,38px);color:#1c1c1e}
.hub-core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-width:118px}
.hub-ico{display:flex;width:56px;height:56px;border-radius:16px;background:#1c1c1e;color:#fb923c;align-items:center;justify-content:center}
.hub-label{font-size:.84rem;color:rgba(28,28,30,.78);max-width:120px;line-height:1.3}
.hub-wires{width:100%;height:100%;align-self:stretch}
.hub-wire{fill:none;stroke:rgba(28,28,30,.4);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:stroke .18s,stroke-width .18s}
.hub-wire.on{stroke:#1c1c1e;stroke-width:2.5}
.hub-options{display:flex;flex-direction:column;gap:10px;justify-content:space-between}
.hub-opt{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid rgba(28,28,30,.22);border-radius:12px;background:rgba(28,28,30,.04);transition:border-color .18s,background .18s,transform .18s}
.hub-opt:hover,.hub-opt:focus-visible{border-color:#1c1c1e;background:rgba(28,28,30,.10);transform:translateX(3px)}
.hub-opt:focus-visible{outline:2px solid #1c1c1e;outline-offset:2px}
.hub-dot{width:9px;height:9px;border-radius:50%;background:#1c1c1e;flex:0 0 auto;transition:background .18s}
.hub-opt-body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.hub-opt-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:#1c1c1e;line-height:1.2}
.hub-opt-sub{font-size:.82rem;color:rgba(28,28,30,.72);line-height:1.35;max-height:0;opacity:0;overflow:hidden;transition:max-height .2s ease,opacity .2s ease,margin-top .2s ease}
.hub-opt:hover .hub-opt-sub,.hub-opt:focus-visible .hub-opt-sub{max-height:44px;opacity:1;margin-top:3px}
.hub-tag{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#1c1c1e;border:1px solid rgba(28,28,30,.42);border-radius:20px;padding:3px 9px;flex:0 0 auto}
@media(max-width:760px){.hub{grid-template-columns:1fr}.hub-wires{display:none}.hub-core{flex-direction:row;justify-content:flex-start;gap:14px}.hub-label{max-width:none}.hub-opt-sub{max-height:none;opacity:1;margin-top:3px}}
#theme-toggle,#lang-toggle{font-size:.85rem;color:var(--muted);padding:6px 8px;border-radius:8px}
#lang-toggle .on{color:var(--text);font-weight:700}
#lang-toggle:hover,#theme-toggle:hover{background:var(--surface)}
.nav-toggle{display:none;font-size:1.5rem;line-height:1;color:var(--text);padding:2px 8px;border-radius:8px}
#theme-toggle:focus-visible,#lang-toggle:focus-visible,#nav-toggle:focus-visible,.nav-links a:focus-visible,.btn:focus-visible,.btn-ghost:focus-visible,.brand:focus-visible,.site-footer a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.site-footer{border-top:1px solid var(--border);padding:48px 0 28px;color:var(--muted);font-size:.9rem}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:18px}
.foot-brand{display:flex;flex-direction:column;gap:6px}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem}
.foot-nav a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.85rem}
@media(max-width:720px){
  .nav-toggle{display:inline-flex}
  .site-nav .row{gap:10px}
  .brand{font-size:.95rem;white-space:nowrap}
  .nav-tools{gap:6px;flex-wrap:nowrap;white-space:nowrap}
  .nav-tools .btn{padding:8px 12px;font-size:.78rem}
  #theme-toggle,#lang-toggle{padding:6px 4px;font-size:.78rem}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--border);padding:6px 0;display:none}
  .site-nav.open .nav-links{display:flex}
  .nav-links a{padding:12px 4vw}
  .nav-links a:hover{background:var(--surface);color:var(--text)}
}
@media(max-width:374px){
  .brand{font-size:.85rem}
  .nav-tools .btn{padding:7px 9px;font-size:.74rem}
  #theme-toggle,#lang-toggle{font-size:.72rem;padding:6px 2px}
}

/* ---- blocks + layers ---- */
.block{padding:60px 0}
.block h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:18px}
.layers{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.layer{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:var(--shadow-card)}
.layer h3{font-size:1.15rem;margin-bottom:8px}
.layer .why{margin-top:10px;color:var(--accent);font-size:.92rem;font-weight:500}
.layer-link{grid-column:1 / -1;display:block;text-decoration:none;border-color:color-mix(in srgb,var(--accent) 32%,var(--border));transition:border-color .15s ease,transform .15s ease}
.layer-link:hover{border-color:var(--accent);transform:translateY(-1px)}
.layer-go::after{content:' \2192';font-weight:700}
@media(max-width:720px){.layers{grid-template-columns:1fr}}

/* ---- band + stats ---- */
.band{background:var(--band);color:#fff;padding:56px 0}
.band .kicker.on-band{color:#eafff9}
.on-band{color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px}
.stats .num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.2rem,3.4vw,2.9rem);letter-spacing:-.02em;display:block}
.stats small{opacity:.9;font-size:.85rem}
.stats-method{font-size:.78rem;opacity:.85;margin-top:16px;max-width:70ch}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---- cross-industry cards + principles ---- */
.cross{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
.x-card{border-left:3px solid var(--brand-teal);padding:6px 0 6px 16px}
.x-card h3{font-size:1.05rem;margin-bottom:6px}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.pr-n{font-family:'Space Grotesk',sans-serif;color:var(--accent);font-weight:700}
.pr h3{font-size:1.1rem;margin:8px 0 6px}
@media(max-width:720px){.cross,.principles{grid-template-columns:1fr}}

/* ---- hero ---- */
.hero{padding:80px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
h2.kicker{font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:.8rem;line-height:1.6;margin-bottom:16px}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.hero .lead{color:color-mix(in srgb,var(--text) 82%,transparent)}
.lead{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.55;margin:18px 0 26px;max-width:46ch}
.hero-copy{min-width:0}
.hero-mesh{width:100%;min-width:0;height:320px}
@media(max-width:720px){.hero-grid{grid-template-columns:1fr}.hero-mesh{height:220px}}

/* ---- contact band + footer ---- */
.band-dark{background:var(--contact-bg);border-top:1px solid rgba(255,255,255,.06)}
.band-dark .btn{background:var(--btn-on-band);color:var(--btn-on-band-text)}
.contact-inner{text-align:center}
.contact-sub{opacity:.85;margin:10px 0 22px}
.btn-ghost{display:inline-block;margin-left:12px;padding:10px 20px;border:1px solid rgba(255,255,255,.4);border-radius:30px;color:#fff;font-weight:500;transition:opacity .15s,border-color .15s}
.btn-ghost:hover{opacity:.8;border-color:rgba(255,255,255,.7)}
.band-dark + .site-footer{margin-top:0;border-top-color:rgba(255,255,255,.08)}

/* ---- about page ---- */
.about h1{font-size:clamp(2rem,4.5vw,2.9rem);margin-bottom:10px}
/* auto-fit so the grid holds 2 cards (About) or 3 (About + Glenn) cleanly;
   min(100%,300px) keeps a single readable column on narrow screens. */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;margin-top:26px;align-items:stretch}
.person{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:clamp(20px,2.4vw,30px);box-shadow:var(--shadow-card)}
.ppic{width:clamp(132px,18vw,168px);aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:center;box-shadow:var(--shadow-photo);margin-bottom:16px}
.person h2{font-size:clamp(1.5rem,2.5vw,1.95rem);margin:0 0 3px}
.person > p{color:var(--muted)}
.person > p + p{margin-top:14px}
.role{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0}
.tags{margin-top:auto;padding-top:22px}
.tags-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 10px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:var(--bg);border:1px solid var(--border);border-radius:30px;padding:7px 13px;font-size:.8rem}
@media(max-width:720px){.people{grid-template-columns:1fr}}

/* ---- a11y + performance ---- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;position:fixed;background:var(--accent-fill);color:var(--accent-on-fill);padding:8px 14px;border-radius:8px;z-index:100}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- scroll reveal (JS adds .reveal-on only when motion is allowed; no JS or reduced motion = fully visible) ---- */
.reveal-on .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal-on .reveal.in{opacity:1;transform:none}

/* ---- build: icon badge + detail modal ---- */
.layer{position:relative;text-align:left;width:100%;cursor:pointer}
.layer:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.layer-ico{display:flex;width:34px;height:34px;border-radius:9px;background:rgba(20,184,166,.14);color:var(--brand-teal);align-items:center;justify-content:center;margin-bottom:12px}
.layer-more{position:absolute;top:16px;right:16px;font-size:.7rem;color:var(--diagram-emph);border:1px solid rgba(20,184,166,.4);border-radius:20px;padding:2px 8px}
button.layer-more:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.6)}
.modal-overlay[hidden]{display:none}
.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:min(980px,92vw);max-height:min(92vh,calc(100dvh - 40px));overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.modal-bar{display:flex;align-items:center;gap:12px;padding:18px clamp(20px,3vw,34px);border-bottom:1px solid var(--border)}
.modal-bar .modal-ico{width:38px;height:38px;border-radius:10px;background:rgba(20,184,166,.16);color:var(--brand-teal);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.modal-bar h3{font-size:clamp(1.2rem,2.4vw,1.6rem);margin:0}
.modal-x{margin-left:auto;color:var(--muted);font-size:1.1rem;padding:4px 8px;border-radius:8px}
.modal-x:hover{color:var(--text)}.modal-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.modal-body{padding:clamp(20px,3vw,34px)}
.modal-lbl{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.modal-what{color:var(--muted);font-size:clamp(.95rem,1.4vw,1.1rem);line-height:1.6;margin-bottom:22px;max-width:74ch}
.modal-diagram{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:clamp(14px,2.5vw,28px);margin-bottom:22px}
.modal-diagram svg{width:100%;height:auto;display:block}
.modal-why{margin-bottom:0;font-size:clamp(.92rem,1.3vw,1.05rem);max-width:74ch}
.modal-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
@media (prefers-reduced-motion:no-preference){.modal-card{animation:modalIn .2s ease}}
@keyframes modalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- how we work: horizontal rail + panel ---- */
.hww-rail{position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin:22px 0 26px}
.hww-rail .rail-line{position:absolute;top:11px;left:16.66%;right:16.66%;height:2px;background:var(--border);z-index:0}
.hww-rail .rail-arrow{position:absolute;top:7px;z-index:0;width:0;height:0;border-left:7px solid var(--brand-teal);border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translateX(-50%)}
.hww-node{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:none;cursor:pointer;padding:0 6px}
.hww-node .d{width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--border);transition:box-shadow .2s,background .2s}
.hww-node .nn{font-weight:700;color:var(--muted);font-size:.78rem}
.hww-node .nt{font-size:.9rem;line-height:1.2;color:var(--muted)}
.hww-node[aria-pressed="true"] .d{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent)}
.hww-node[aria-pressed="true"] .nn{color:var(--accent)}
.hww-node[aria-pressed="true"] .nt{color:var(--text)}
.hww-node:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:10px}
.hww-panel{display:flex;gap:26px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:clamp(18px,3vw,30px)}
.hww-panel .hww-diagram{flex:1 1 56%;min-width:0;max-width:480px}
.hww-panel .hww-diagram svg{width:100%;height:auto;display:block}
.hww-panel .hww-text{flex:1 1 40%;min-width:200px}
.hww-panel .lbl{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.hww-panel .cap{font-size:clamp(.95rem,1.4vw,1.1rem);color:var(--muted);line-height:1.6}
@media(max-width:640px){
  .hww-panel{flex-direction:column;align-items:stretch;gap:18px}
  .hww-panel .hww-diagram{max-width:none}
  .hww-node .nt{font-size:.8rem}
}

/* ---- cross-industry carousel ---- */
.carousel-head{display:flex;justify-content:flex-end;margin-bottom:14px}
.carousel-arrows{display:flex;gap:8px}
.carousel-arrows button{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1rem;display:flex;align-items:center;justify-content:center}
.carousel-arrows button:hover{border-color:var(--brand-teal);color:var(--diagram-emph)}
.carousel-arrows button:disabled{opacity:.35;cursor:default}
.carousel-arrows button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.carousel-viewport{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
.carousel-viewport::-webkit-scrollbar{display:none}
.carousel-viewport:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.carousel-track{display:flex;gap:16px}
.car-slide{flex:0 0 300px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--brand-teal);border-radius:14px;padding:20px;box-shadow:var(--shadow-card)}
.car-slide.is-new{border-left-color:var(--accent)}
.car-slide .car-ico{width:34px;height:34px;border-radius:9px;background:rgba(20,184,166,.14);color:var(--brand-teal);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.car-slide.is-new .car-ico{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.car-slide .badge{display:inline-block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:20px;padding:2px 8px;margin-bottom:10px}
.car-slide h3{font-size:1.05rem;margin:0 0 8px}
.car-slide p{color:var(--muted);font-size:.86rem;margin:0;line-height:1.5}
.carousel-dots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.carousel-dots button{width:24px;height:24px;border-radius:50%;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center}
.carousel-dots button::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--border);transition:width .15s,border-radius .15s,background .15s}
.carousel-dots button[aria-current="true"]::after{background:var(--accent);width:20px;border-radius:4px}
.carousel-dots button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ======================================================================
   DEMOS SUBPAGE (demos.html)
   ====================================================================== */
.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}

/* shared focus ring for all interactive demo controls */
.demo-tab:focus-visible,.demo-stage button:focus-visible,.demo-stage a:focus-visible,
.demo-stage input:focus-visible,.demo-stage select:focus-visible,.seg-opt:focus-visible,
details.proof>summary:focus-visible,.demo-panel-title:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}

/* ---- demos hero ---- */
.hero-note{font-size:.78rem;margin-top:14px}
#demo-hero .hero-grid{grid-template-columns:1fr}
/* Lean Solutions hero: trim the old tall-hero padding + the gap to the tabs */
#demo-hero{padding:clamp(28px,7vw,52px) 0 0}
#scenarios{padding-top:clamp(16px,4vw,28px)}

/* ---- segmented toggle (role=radiogroup), reused by all three demos ---- */
.seg{display:inline-flex;gap:2px;border:1px solid var(--border-strong);border-radius:30px;padding:3px;background:var(--surface)}
.seg-opt{padding:6px 16px;border-radius:30px;font-size:.85rem;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
.seg-opt[aria-checked="true"]{background:var(--accent-fill);color:var(--accent-on-fill);font-weight:600}
.seg-label{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* ---- scenario tablist ---- */
.demo-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 26px}
.demo-tab{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;cursor:pointer;transition:border-color .15s,transform .15s;box-shadow:var(--shadow-card)}
.demo-tab:hover{border-color:var(--brand-teal);transform:translateY(-1px)}
.demo-tab[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.demo-tab-ico{display:flex;width:34px;height:34px;border-radius:9px;background:rgba(20,184,166,.14);color:var(--brand-teal);align-items:center;justify-content:center}
.demo-tab[aria-selected="true"] .demo-tab-ico{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.demo-tab-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.2}
.demo-tab-pain{font-size:.84rem;line-height:1.45}
@media(max-width:760px){.demo-tabs{grid-template-columns:1fr}}

/* ---- demo panels ---- */
.demo-panel[hidden]{display:none}
.demo-panel{scroll-margin-top:72px}
.demo-panel-title{font-size:clamp(1.3rem,2.6vw,1.8rem);margin:0 0 18px;max-width:30ch;outline:none}
.demo-stage{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:clamp(16px,2.6vw,26px);box-shadow:var(--shadow-card);min-height:320px}

/* scoped teal stat band inside a panel */
.demo-stats-wrap{margin-top:22px}
.demo-stats{border-radius:14px;padding:26px clamp(18px,3vw,30px);background:#fdba74;color:#1c1c1e}
.demo-stats .stats{margin-top:0}
.demo-stats .num{color:#1c1c1e}
.demo-stats small{color:#1c1c1e;opacity:.78}
.demo-stats-method{font-size:.78rem;margin-top:16px;max-width:80ch}
.demo-stats .demo-stats-method{color:rgba(28,28,30,.72);opacity:1}

/* proof accordion */
.proof{margin-top:16px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);display:flex;flex-direction:column;gap:5px}
.proof-k{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.proof-out{margin:0;font-size:.92rem;line-height:1.5;color:var(--text);max-width:74ch}
.proof-layer{font-size:.8rem;color:var(--accent);font-weight:600}
.demo-tabs-note{font-size:.82rem;margin:-6px 0 24px;max-width:58ch}

/* ---- demo 1: Ask Your Data ---- */
.ayd-controls{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-end;margin-bottom:16px}
.ayd-form-wrap{position:relative;flex:1 1 360px;min-width:0}
.ayd-form{display:flex;gap:10px}
.ayd-input{flex:1 1 auto;min-width:0;background:var(--bg);border:1px solid var(--border-strong);border-radius:10px;
  padding:11px 14px;color:var(--text);font:inherit;font-size:1rem}
.ayd-input::placeholder{color:var(--muted)}
.ayd-run{flex:0 0 auto;background:var(--accent-fill);color:var(--accent-on-fill);font-weight:700;border-radius:10px;padding:0 18px}
.ayd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ayd-suggest{margin-bottom:18px}
.ayd-suggest>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:4px 0;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ayd-suggest>summary::-webkit-details-marker{display:none}
.ayd-suggest>summary::after{content:'\25BE';color:var(--accent);font-size:.85rem}
.ayd-suggest[open]>summary::after{content:'\25B4'}
.ayd-suggest>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.ayd-suggest .ayd-chips{margin:10px 0 0}
.ayd-chip{background:var(--suggest-bg);border:1px solid var(--suggest-bd);border-radius:30px;padding:8px 14px;font-size:.82rem;color:var(--text);text-align:left;line-height:1.3;transition:background .15s}
.ayd-chip:hover{background:var(--suggest-bg-h)}
.ayd-listbox{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;list-style:none;margin:0;padding:5px;background:var(--surface);border:1px solid var(--border);border-radius:12px;max-height:300px;overflow-y:auto;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.ayd-listbox[hidden]{display:none}
.ayd-opt{padding:9px 12px;border-radius:8px;font-size:.88rem;color:var(--text);cursor:pointer;line-height:1.35}
.ayd-opt[aria-selected="true"],.ayd-opt:hover{background:var(--suggest-bg)}
.ayd-opt mark{background:transparent;color:var(--accent);font-weight:700}
.ayd-chart-cap{font-size:.78rem;color:var(--muted);margin:0 0 6px}
.ayd-result{border-top:1px solid var(--border);padding-top:18px;min-height:120px}
.ayd-empty{color:var(--muted);font-size:.95rem;padding:24px 0;text-align:center}
.ayd-answer{margin-bottom:18px}
.ayd-answer-head{font-size:1.05rem;font-weight:600;line-height:1.5;color:var(--text);margin:0}
.ayd-answer-detail{margin:8px 0 0;color:var(--muted);font-size:.95rem;line-height:1.6;max-width:72ch}
.ayd-thinking{display:flex;align-items:center;gap:10px;padding:20px 0;color:var(--muted)}
.ayd-think-dots{display:inline-flex;gap:5px}
.ayd-think-dots span{width:7px;height:7px;border-radius:50%;background:var(--diagram-emph);display:inline-block}
@media(prefers-reduced-motion:no-preference){.ayd-think-dots span{animation:aydThink 1.2s infinite}.ayd-think-dots span:nth-child(2){animation-delay:.2s}.ayd-think-dots span:nth-child(3){animation-delay:.4s}}
@keyframes aydThink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ayd-think-label{font-size:.92rem}
.ayd-cursor{display:inline-block;width:2px;height:1em;background:var(--text);margin-left:1px;vertical-align:text-bottom}
@media(prefers-reduced-motion:no-preference){.ayd-cursor{animation:aydBlink 1s steps(2) infinite}}
@keyframes aydBlink{50%{opacity:0}}
.ayd-chart{margin:0 0 16px}
.ayd-chart svg{width:100%;height:auto;display:block}
.ayd-skeleton{height:140px;border-radius:10px;background:var(--border);opacity:.5}
@media(prefers-reduced-motion:no-preference){.ayd-skeleton{animation:aydPulse 1s ease-in-out infinite}}
@keyframes aydPulse{0%,100%{opacity:.35}50%{opacity:.6}}
.ayd-table{width:100%;border-collapse:collapse;font-size:.86rem}
.ayd-table th{text-align:left;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--border)}
.ayd-table td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--text)}
.ayd-table tr:last-child td{border-bottom:0}

/* ---- demo 2: WhatsApp assistant ---- */
.wa-frame{max-width:440px;margin-inline:auto;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--bg)}
.wa-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.wa-head .wa-av{width:34px;height:34px;border-radius:50%;background:rgba(20,184,166,.16);color:var(--brand-teal);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.wa-head .wa-name{font-weight:600;font-size:.92rem}
.wa-head .wa-status{font-size:.72rem;color:var(--diagram-emph);display:flex;align-items:center;gap:5px}
.wa-status-dot{width:7px;height:7px;border-radius:50%;background:var(--diagram-emph);display:inline-block}
.wa-thread{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:96px;max-height:460px;overflow-y:auto}
.wa-thread:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.wa-bubble{max-width:84%;padding:10px 13px;border-radius:14px;font-size:.9rem;line-height:1.45;word-wrap:break-word}
.wa-bubble.in{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.wa-bubble.out{align-self:flex-end;background:color-mix(in srgb,var(--brand-teal) 18%,var(--surface));border:1px solid color-mix(in srgb,var(--brand-teal) 28%,var(--border));color:var(--text);border-bottom-right-radius:4px}
.wa-time{display:block;font-size:.66rem;color:var(--muted);margin-top:5px;text-align:right}
.wa-card{margin-top:8px;border-left:3px solid var(--brand-teal);background:var(--bg);border-radius:8px;padding:10px 12px}
.wa-card-title{font-weight:600;font-size:.85rem;margin-bottom:6px}
.wa-card-row{display:flex;justify-content:space-between;gap:14px;font-size:.84rem;padding:3px 0}
.wa-card-row.strong{font-weight:700;border-top:1px solid var(--border);margin-top:4px;padding-top:6px}
.wa-card-foot{font-size:.74rem;color:var(--muted);margin-top:6px}
.wa-file{display:inline-flex;align-items:center;gap:8px;margin-top:8px;color:var(--diagram-emph);font-size:.84rem;font-weight:600;border:1px solid var(--border);border-radius:8px;padding:8px 12px}
.wa-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.wa-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);display:inline-block}
@media(prefers-reduced-motion:no-preference){.wa-typing span{animation:waDot 1.2s infinite}.wa-typing span:nth-child(2){animation-delay:.2s}.wa-typing span:nth-child(3){animation-delay:.4s}}
@keyframes waDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.wa-cursor{display:inline-block;width:2px;height:1em;background:var(--text);margin-left:1px;vertical-align:text-bottom}
@media(prefers-reduced-motion:no-preference){.wa-cursor{animation:waBlink 1s steps(2) infinite}}
@keyframes waBlink{50%{opacity:0}}
.wa-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px}
.wa-chip{background:var(--suggest-bg);border:1px solid var(--suggest-bd);border-radius:30px;padding:7px 13px;font-size:.8rem;color:var(--text);text-align:left;line-height:1.3}
.wa-chip:hover{background:var(--suggest-bg-h);border-color:var(--suggest-bd)}
.wa-controls{display:flex;gap:14px;align-items:center;margin-top:14px}
.wa-controls .wa-replay{border:1px solid var(--border-strong);border-radius:30px;padding:8px 16px;font-size:.84rem;color:var(--text)}
.wa-controls .wa-replay:hover{border-color:var(--brand-teal)}
.wa-controls .wa-pause{color:var(--muted);font-size:.82rem;text-decoration:underline}

/* ---- demo 3: Compliance validator ---- */
.val-toolbar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-end;margin-bottom:16px}
.val-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:760px){.val-grid{grid-template-columns:1fr}}
.val-doc{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px}
.val-doc-head{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.9rem;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.val-doc-field{padding:7px 0;border-bottom:1px dashed var(--border);font-size:.84rem}
.val-doc-field:last-child{border-bottom:0}
.val-doc-field .k{display:block;color:var(--muted);font-size:.72rem}
.val-doc-field .v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}
.val-fields{display:flex;flex-direction:column}
.val-row{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
.val-row:last-of-type{border-bottom:0}
.val-row .vr-name{font-size:.8rem;color:var(--muted)}
.val-row .vr-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;color:var(--text)}
.val-status{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;white-space:nowrap}
.val-status.ok{color:var(--diagram-emph)}
.val-status.flag{color:var(--flag)}
.val-status.checking{color:var(--muted);font-weight:400}
.val-row.is-flag{background:var(--flag-bg);border-radius:8px;padding-left:10px;padding-right:10px}
.val-fix{grid-column:1 / -1;border-top:1px dashed var(--border);margin-top:6px;padding-top:10px;display:grid;gap:8px}
.val-fix-msg{font-size:.82rem;color:var(--flag)}
.val-fix-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.val-fix select{background:var(--bg);border:1px solid var(--border-strong);border-radius:8px;padding:7px 10px;color:var(--text);font:inherit;font-size:1rem}
.val-fix .val-apply{background:var(--accent-fill);color:var(--accent-on-fill);font-weight:700;border-radius:8px;padding:7px 14px;font-size:.84rem}
.val-summary{margin-top:14px;font-size:.92rem;font-weight:600}
.val-summary.needs{color:var(--flag)}
.val-summary.ok{color:var(--diagram-emph)}
.val-actions{margin-top:14px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.val-send{background:var(--accent-fill);color:var(--accent-on-fill);font-weight:700;border-radius:30px;padding:10px 22px}
.val-send:disabled{opacity:.4;cursor:not-allowed}
.val-toast{font-size:.88rem;color:var(--diagram-emph);font-weight:600}
.val-toolbar .ayd-run{padding:10px 18px}
.val-status .vr-ico{font-weight:700;font-size:.9rem}
.wa-toolbar{display:flex;justify-content:flex-end;margin-bottom:14px}
@media(prefers-reduced-motion:no-preference){.val-row{transition:background .2s}}
@media(max-width:720px){.car-slide{flex-basis:82%}}
@media(prefers-reduced-motion:no-preference){.carousel-viewport{scroll-behavior:smooth}}
@media(pointer:coarse){
  .carousel-arrows button{width:44px;height:44px}
  #lang-toggle,#theme-toggle,.seg-opt,.wa-chip,.ayd-chip,.wa-controls .wa-pause{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-toggle{min-height:44px;align-items:center;justify-content:center}
  .val-row .val-status{padding:10px 0}
}

/* ======================================================================
   MOBILE TUNING for the demos (keep panels usable + uncluttered on phones)
   ====================================================================== */
@media(max-width:760px){
  .block{padding:42px 0}
  .demo-panel-title{font-size:1.2rem;margin-bottom:14px;max-width:none}
  .demo-stage{padding:15px}
  /* Ask Your Data: stack the input above the dataset toggle; collapsed
     suggestions read as a tappable orange bar */
  .ayd-controls{flex-direction:column;align-items:stretch;gap:12px}
  .ayd-form-wrap{flex:1 1 auto}
  .ayd-suggest>summary{justify-content:space-between;width:100%;padding:11px 14px;border:1px solid var(--suggest-bd);border-radius:10px;background:var(--suggest-bg);color:var(--text);text-transform:none;letter-spacing:0;font-size:.85rem}
  .ayd-listbox{max-height:240px}
  .ayd-answer-head{font-size:1rem}
  .ayd-chart-cap{font-size:.74rem}
  /* stat bands: smaller numbers so long values (35-40%, ~200-300%) fit 2 cols */
  .demo-stats{padding:20px 16px}
  .demo-stats .stats{gap:14px}
  .demo-stats .num{font-size:1.5rem}
  .demo-stats small{font-size:.8rem}
  .demo-stats-method{font-size:.74rem}
  /* scenario tabs: tighter */
  .demo-tabs{gap:10px;margin:18px 0 22px}
  .demo-tab{padding:14px}
  .demo-tab-name{font-size:.98rem}
  .demo-tab-pain{font-size:.82rem}
  /* Validator: compact document paper + extraction rows */
  .val-grid{gap:14px}
  .val-doc{padding:12px}
  .val-doc-head{font-size:.84rem}
  .val-doc-field{padding:6px 0;font-size:.8rem}
  .val-row{padding:8px 0}
  .val-row .vr-name{font-size:.78rem}
  .val-row .vr-val{font-size:.8rem}
  /* WhatsApp: use the full panel width */
  .wa-frame{max-width:none}
  .wa-thread{padding:14px}
  /* proof + order spacing */
  .proof-body{gap:6px}
}

/* ======================================================================
   AI ENABLEMENT SUBPAGE (ai-enablement.html)
   Every rule scoped under html[data-page="ai-enablement"] so other pages
   cannot regress. Inherits lime --accent; uses --brand-teal for structure.
   ====================================================================== */

/* --- hero: light decorative climb motif --- */
html[data-page="ai-enablement"] .ae-hero{padding:72px 0 56px}
html[data-page="ai-enablement"] .ae-hero .lead{max-width:52ch}
html[data-page="ai-enablement"] .hero-note{color:var(--muted);margin-top:14px;max-width:46ch}
html[data-page="ai-enablement"] .ae-climb-wrap{display:flex;justify-content:center;align-items:center}
html[data-page="ai-enablement"] .ae-climb-svg{width:100%;max-width:360px;height:auto}
html[data-page="ai-enablement"] .ae-climb-line{fill:none;stroke:url(#ae-climb-grad);stroke-width:3;stroke-linecap:round;opacity:.85}
html[data-page="ai-enablement"] .ae-climb-node{fill:var(--accent);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 70%,transparent))}
html[data-page="ai-enablement"] .ae-climb-node:nth-of-type(4){fill:var(--brand-teal)}
@media(prefers-reduced-motion:no-preference){
  html[data-page="ai-enablement"] .ae-climb-line{stroke-dasharray:760;stroke-dashoffset:760;animation:ae-draw 1.3s ease forwards}
  html[data-page="ai-enablement"] .ae-climb-node{opacity:0;animation:ae-pop .4s ease forwards}
  html[data-page="ai-enablement"] .ae-climb-node:nth-of-type(1){animation-delay:.25s}
  html[data-page="ai-enablement"] .ae-climb-node:nth-of-type(2){animation-delay:.55s}
  html[data-page="ai-enablement"] .ae-climb-node:nth-of-type(3){animation-delay:.85s}
  html[data-page="ai-enablement"] .ae-climb-node:nth-of-type(4){animation-delay:1.15s}
}
@keyframes ae-draw{to{stroke-dashoffset:0}}
@keyframes ae-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@media(max-width:720px){html[data-page="ai-enablement"] .ae-climb-wrap{margin-top:22px}}

/* --- pairing: 3rd-level heading styled like the .person h2 --- */
html[data-page="ai-enablement"] .ae-people{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
html[data-page="ai-enablement"] .ae-people .person h4{font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(1.5rem,2.5vw,1.95rem);margin:0 0 3px;letter-spacing:-.02em;line-height:1.1}
html[data-page="ai-enablement"] .ae-people .person>p:not(.role){color:var(--muted);margin-top:12px}

/* ===================================================================
   TABBED "WHAT WE DO" (APG tablist desktop -> accordion <=640px)
   =================================================================== */
html[data-page="ai-enablement"] .ae-tablist{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:28px;flex-wrap:wrap}
html[data-page="ai-enablement"] .ae-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1rem;padding:12px 16px;margin-bottom:-1px;cursor:pointer;line-height:1.2}
html[data-page="ai-enablement"] .ae-tab:hover{color:var(--text)}
html[data-page="ai-enablement"] .ae-tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
html[data-page="ai-enablement"] .ae-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
html[data-page="ai-enablement"] .ae-panel{outline:none}
html[data-page="ai-enablement"] .ae-panel:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:10px}
html[data-page="ai-enablement"] .ae-panel-h{margin:6px 0 12px;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;max-width:24ch}
@media(prefers-reduced-motion:no-preference){
  html[data-page="ai-enablement"] .ae-panel.is-active{animation:ae-fade .25s ease}
}
@keyframes ae-fade{from{opacity:0}to{opacity:1}}

/* AI Spectrum note/spine (shared by framework panel) */
html[data-page="ai-enablement"] .ae-note{margin-top:20px;color:var(--accent);font-weight:500;font-size:.95rem;max-width:62ch}
html[data-page="ai-enablement"] .ae-spine{margin-top:8px;color:var(--muted);font-size:.9rem;max-width:62ch}

/* --- Ascending Ridge-Line (AI Spectrum) --- */
html[data-page="ai-enablement"] .ae-ridge{position:relative;margin-top:24px}
html[data-page="ai-enablement"] .ae-ridge-svg{display:block;width:100%;height:auto;overflow:visible}
html[data-page="ai-enablement"] .ae-ridge-line{stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
html[data-page="ai-enablement"] .ae-ridge-node circle{fill:var(--accent);stroke:var(--bg);stroke-width:3;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 70%,transparent));cursor:pointer;transition:r .15s ease}
html[data-page="ai-enablement"] .ae-ridge-node[data-l="4"] circle{fill:var(--brand-teal);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--brand-teal) 70%,transparent))}
html[data-page="ai-enablement"] .ae-ridge-node:hover circle,
html[data-page="ai-enablement"] .ae-ridge-node[aria-expanded="true"] circle{r:14}
html[data-page="ai-enablement"] .ae-ridge-node:focus-visible{outline:none}
html[data-page="ai-enablement"] .ae-ridge-node:focus-visible circle{stroke:var(--focus);stroke-width:3.5;r:14}
@media(prefers-reduced-motion:no-preference){
  html[data-page="ai-enablement"] .ae-ridge-node[aria-expanded="true"] circle{animation:ae-pulse 1.4s ease-in-out infinite}
}
@keyframes ae-pulse{0%,100%{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 60%,transparent))}50%{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 90%,transparent))}}
html[data-page="ai-enablement"] .ae-ridge-cards{position:absolute;inset:0;pointer-events:none}
html[data-page="ai-enablement"] .ae-ridge-card{position:absolute;left:0;top:0;width:max-content;max-width:min(320px,72%);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:14px 16px;display:none;box-shadow:0 8px 24px rgba(0,0,0,.28);z-index:2}
html[data-page="ai-enablement"] .ae-ridge-card.is-open{display:block}
html[data-page="ai-enablement"] .ae-ridge-card-n{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.06em;color:var(--brand-teal-text)}
html[data-page="ai-enablement"] .ae-ridge-card strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.05rem;margin:2px 0 6px}
html[data-page="ai-enablement"] .ae-ridge-card-d{display:block;color:var(--muted);font-size:.9rem;line-height:1.5}
html[data-page="ai-enablement"] .ae-ridge-card-ex{display:block;margin-top:8px;font-size:.85rem;line-height:1.5;color:var(--brand-teal-text)}
/* Source-of-truth list: visually hidden on desktop, shown on mobile fallback */
html[data-page="ai-enablement"] .ae-ridge-list{list-style:none;margin:0;padding:0;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[data-page="ai-enablement"] .ae-ridge-list h4{display:inline}

/* --- Engagement Ladder (What we offer) --- */
html[data-page="ai-enablement"] .ae-ladder2{position:relative;margin-top:26px}
html[data-page="ai-enablement"] .ae-ladder-rail{position:absolute;inset:0 0 56px;width:100%;height:calc(100% - 56px);pointer-events:none;z-index:0}
html[data-page="ai-enablement"] .ae-ladder-poly{stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.8;vector-effect:non-scaling-stroke}
html[data-page="ai-enablement"] .ae-ladder-dot{fill:var(--accent);vector-effect:non-scaling-stroke}
html[data-page="ai-enablement"] .ae-ladder-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative;z-index:1;align-items:end}
html[data-page="ai-enablement"] .ae-rung2{background:var(--surface);border:1px solid var(--border);border-top:3px solid color-mix(in srgb,var(--brand-teal) calc(var(--lift) * 22% + 20%),var(--accent));border-radius:14px;padding:18px 16px;transform:translateY(calc(var(--lift) * -1.4rem))}
html[data-page="ai-enablement"] .ae-rung-n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:var(--brand-teal-text)}
html[data-page="ai-enablement"] .ae-rung-ico{display:block;color:var(--accent);margin:8px 0 4px}
html[data-page="ai-enablement"] .ae-rung-ico svg{width:24px;height:24px}
html[data-page="ai-enablement"] .ae-rung2 h4{font-size:1.02rem;margin:6px 0 6px;line-height:1.25}
html[data-page="ai-enablement"] .ae-rung-tag{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 8px}
html[data-page="ai-enablement"] .ae-rung-toggle{appearance:none;background:none;border:0;padding:12px;margin:-12px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;color:var(--brand-teal-text);display:none;align-items:center;gap:6px}
html[data-page="ai-enablement"] .ae-rung-toggle::before{content:'+';font-size:1.05rem;line-height:1;width:1em;text-align:center}
html[data-page="ai-enablement"] .ae-rung-toggle[aria-expanded="true"]::before{content:'\2212'}
html[data-page="ai-enablement"] .ae-rung-toggle .ae-rung-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[data-page="ai-enablement"] .ae-rung-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
html[data-page="ai-enablement"] .ae-rung-d{font-size:.88rem;line-height:1.5;margin:10px 0 0}
/* progressive enhancement: descriptions visible by default (no JS); when JS adds toggles, collapse them */
html[data-page="ai-enablement"] .ae-ladder2.js-reveal .ae-rung-toggle{display:inline-flex}
/* hover (mouse) / focus-within (keyboard) / click (.is-open, touch) all expand the description */
html[data-page="ai-enablement"] .ae-ladder2.js-reveal .ae-rung-d{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .22s ease,opacity .22s ease,margin-top .22s ease}
html[data-page="ai-enablement"] .ae-ladder2.js-reveal .ae-rung2:hover .ae-rung-d,
html[data-page="ai-enablement"] .ae-ladder2.js-reveal .ae-rung2:focus-within .ae-rung-d,
html[data-page="ai-enablement"] .ae-ladder2.js-reveal .ae-rung-d.is-open{max-height:12rem;opacity:1;margin-top:10px}
html[data-page="ai-enablement"] .ae-ladder-axis{display:flex;justify-content:space-between;margin-top:18px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
@media(prefers-reduced-motion:no-preference){
  html.reveal-on[data-page="ai-enablement"] .ae-rung2{transition:transform .18s ease,box-shadow .18s ease}
  html[data-page="ai-enablement"] .ae-rung2:hover,
  html[data-page="ai-enablement"] .ae-rung2:focus-within{box-shadow:0 8px 22px rgba(0,0,0,.25)}
}

/* --- "In a session" cards (former experience block) --- */
html[data-page="ai-enablement"] .ae-exp{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px;grid-auto-rows:1fr}
html[data-page="ai-enablement"] .ae-exp-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:var(--shadow-card)}
html[data-page="ai-enablement"] .ae-exp-card h4{font-size:1.1rem;margin-bottom:8px}
html[data-page="ai-enablement"] .ae-exp-card p{font-size:.92rem;line-height:1.55;max-width:64ch}
html[data-page="ai-enablement"] .ae-exp-feature{border-left:3px solid var(--brand-teal)}
html[data-page="ai-enablement"] .ae-exp-ico{display:flex;width:42px;height:42px;border-radius:11px;background:color-mix(in srgb,var(--brand-teal) 14%,transparent);color:var(--brand-teal-text);align-items:center;justify-content:center;margin-bottom:14px}
html[data-page="ai-enablement"] .ae-exp-ico svg{width:22px;height:22px}
html[data-page="ai-enablement"] .ae-exp-feature .ae-exp-ico{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
html[data-page="ai-enablement"] .ae-exp-card{transition:transform .18s ease,border-color .18s ease}
html[data-page="ai-enablement"] .ae-exp-card:hover{border-color:color-mix(in srgb,var(--brand-teal) 45%,var(--border))}
@media(prefers-reduced-motion:no-preference){html[data-page="ai-enablement"] .ae-exp-card:hover{transform:translateY(-2px)}}
@media(max-width:640px){html[data-page="ai-enablement"] .ae-exp{grid-template-columns:1fr;grid-auto-rows:auto}}

/* === RESPONSIVE: ridge -> mobile climb list; ladder -> vertical timeline; tabs -> accordion === */
@media(max-width:720px){
  html[data-page="ai-enablement"] .ae-ridge-svg,
  html[data-page="ai-enablement"] .ae-ridge-cards{display:none}
  html[data-page="ai-enablement"] .ae-ridge-list{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:grid;gap:12px}
  html[data-page="ai-enablement"] .ae-rl-item{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:16px;margin-left:calc((var(--l, 1) - 1) * 0px)}
  html[data-page="ai-enablement"] .ae-ridge-list .ae-rl-item[data-l="1"]{margin-left:0}
  html[data-page="ai-enablement"] .ae-ridge-list .ae-rl-item[data-l="2"]{margin-left:14px}
  html[data-page="ai-enablement"] .ae-ridge-list .ae-rl-item[data-l="3"]{margin-left:28px}
  html[data-page="ai-enablement"] .ae-ridge-list .ae-rl-item[data-l="4"]{margin-left:42px}
  html[data-page="ai-enablement"] .ae-rl-n{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.06em;color:var(--brand-teal-text)}
  html[data-page="ai-enablement"] .ae-rl-item h4{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.05rem;margin:4px 0 6px}
  html[data-page="ai-enablement"] .ae-rl-d{font-size:.9rem;line-height:1.5;margin:0}
  html[data-page="ai-enablement"] .ae-rl-ex{font-size:.85rem;line-height:1.5;margin:8px 0 0;color:var(--brand-teal-text)}
}
@media(max-width:719px){
  /* ladder -> vertical timeline */
  html[data-page="ai-enablement"] .ae-ladder-rail{display:none}
  html[data-page="ai-enablement"] .ae-ladder-list{grid-template-columns:1fr;align-items:stretch;border-left:2px solid color-mix(in srgb,var(--accent) 60%,var(--border));margin-left:6px;padding-left:18px}
  html[data-page="ai-enablement"] .ae-rung2{transform:none;position:relative}
  html[data-page="ai-enablement"] .ae-rung2::before{content:'';position:absolute;left:-25px;top:22px;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
  html[data-page="ai-enablement"] .ae-rung2[style*="--lift:4"]::before{background:var(--brand-teal)}
  html[data-page="ai-enablement"] .ae-ladder2.js-reveal .ae-rung-d{max-height:12rem;opacity:1;margin-top:10px}
  /* descriptions are always open here, so the +/- toggle would be a no-op */
  html[data-page="ai-enablement"] .ae-ladder2.js-reveal .ae-rung-toggle{display:none}
}
@media(max-width:640px){
  html[data-page="ai-enablement"] .ae-exp{grid-template-columns:1fr;grid-auto-rows:auto}
  /* tablist -> stacked accordion: each tab header sits directly above its panel */
  html[data-page="ai-enablement"] .ae-tabbed .container{display:flex;flex-direction:column}
  html[data-page="ai-enablement"] .ae-tablist{display:contents}
  html[data-page="ai-enablement"] .ae-tab{order:0;display:block;width:100%;text-align:left;min-height:44px;border:1px solid var(--border);border-radius:10px;margin:0 0 0;padding:12px 16px;background:var(--surface)}
  html[data-page="ai-enablement"] .ae-tab[aria-selected="true"]{border-color:var(--accent);border-bottom-width:1px;border-left:3px solid var(--accent)}
  html[data-page="ai-enablement"] .ae-tab::after{content:'+';float:right;color:var(--accent);font-size:1.2rem;line-height:1}
  html[data-page="ai-enablement"] .ae-tab[aria-expanded="true"]::after{content:'\2212'}
  html[data-page="ai-enablement"] #ae-tab-pair{order:1}
  html[data-page="ai-enablement"] #ae-panel-pair{order:2;margin-bottom:10px}
  html[data-page="ai-enablement"] #ae-tab-fw{order:3}
  html[data-page="ai-enablement"] #ae-panel-fw{order:4;margin-bottom:10px}
  html[data-page="ai-enablement"] #ae-tab-off{order:5}
  html[data-page="ai-enablement"] #ae-panel-off{order:6;margin-bottom:10px}
  html[data-page="ai-enablement"] #ae-tab-ses{order:7}
  html[data-page="ai-enablement"] #ae-panel-ses{order:8}
  html[data-page="ai-enablement"] .ae-panel{padding-top:6px}
}

/* --- case study --- */
html[data-page="ai-enablement"] .ae-snapshot{margin-top:24px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-card)}
html[data-page="ai-enablement"] .ae-snap-label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:16px}
html[data-page="ai-enablement"] .ae-snap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0}
html[data-page="ai-enablement"] .ae-snap-grid dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
html[data-page="ai-enablement"] .ae-snap-grid dd{margin:0;font-size:.95rem;line-height:1.45;color:var(--text)}
@media(max-width:640px){html[data-page="ai-enablement"] .ae-snap-grid{grid-template-columns:1fr;gap:16px}}
html[data-page="ai-enablement"] .ae-case-body{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
html[data-page="ai-enablement"] .ae-case-h{font-size:1.05rem;margin-bottom:10px}
html[data-page="ai-enablement"] .ae-case-block p{font-size:.95rem;line-height:1.6;max-width:60ch}
@media(max-width:640px){html[data-page="ai-enablement"] .ae-case-body{grid-template-columns:1fr;gap:18px}}
html[data-page="ai-enablement"] .ae-results{margin-top:28px;border-top:1px solid var(--border);padding-top:24px}
html[data-page="ai-enablement"] .ae-result-list{list-style:none;display:grid;gap:12px;margin:12px 0 0}
html[data-page="ai-enablement"] .ae-result-list li{position:relative;padding-left:26px;font-size:.96rem;line-height:1.55;max-width:70ch}
html[data-page="ai-enablement"] .ae-result-list li::before{content:'';position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:3px;background:var(--brand-teal)}
html[data-page="ai-enablement"] .ae-result-base{margin-top:14px;font-size:.82rem}
html[data-page="ai-enablement"] .ae-quotes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
html[data-page="ai-enablement"] .ae-quote{margin:0;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:14px;padding:22px}
html[data-page="ai-enablement"] .ae-quote blockquote{margin:0;font-size:1.02rem;line-height:1.55;color:var(--text)}
html[data-page="ai-enablement"] .ae-quote blockquote::before{content:'\201C'}
html[data-page="ai-enablement"] .ae-quote blockquote::after{content:'\201D'}
html[data-page="ai-enablement"] .ae-quote figcaption{margin-top:12px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
@media(max-width:640px){html[data-page="ai-enablement"] .ae-quotes{grid-template-columns:1fr}}
html[data-page="ai-enablement"] .ae-case-cta{margin-top:28px}

/* --- what this isn't --- */
html[data-page="ai-enablement"] .ae-nots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
html[data-page="ai-enablement"] .ae-not{padding:6px 0 6px 16px;border-left:3px solid var(--border)}
html[data-page="ai-enablement"] .ae-not h3{font-size:1.05rem;margin-bottom:8px}
html[data-page="ai-enablement"] .ae-not p{font-size:.9rem;line-height:1.55;color:var(--muted);max-width:42ch}
@media(max-width:760px){html[data-page="ai-enablement"] .ae-nots{grid-template-columns:1fr}}

/* --- FAQ accordion (native details/summary) --- */
html[data-page="ai-enablement"] .ae-faq{margin-top:24px;display:grid;gap:12px;max-width:780px}
html[data-page="ai-enablement"] .ae-q{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px 20px;box-shadow:var(--shadow-card)}
html[data-page="ai-enablement"] .ae-q>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.3}
html[data-page="ai-enablement"] .ae-q>summary::-webkit-details-marker{display:none}
html[data-page="ai-enablement"] .ae-q>summary::after{content:'+';color:var(--accent);font-size:1.4rem;line-height:1;flex:0 0 auto}
html[data-page="ai-enablement"] .ae-q[open]>summary::after{content:'\2212'}
html[data-page="ai-enablement"] .ae-q>summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
html[data-page="ai-enablement"] .ae-q>p{margin:0 0 18px;font-size:.95rem;line-height:1.6;max-width:70ch}

/* --- anchor jumps (e.g. "See the results" -> #case-study) clear the sticky header --- */
html[data-page="ai-enablement"] main>section[id]{scroll-margin-top:80px}