/* ═══════════════════════════════════════════════════════════════════════════
   ESCARGO OS — landing design system
   Structure modelled on keyloop.com/dms (section rhythm, type scale, card
   grids, stats band, mega-nav, deep footer) rendered in the Escargo brand
   (forest #073b24 / lime #80bf20 from the official logo pack).

   Keyloop role            →  Escargo token
   ─────────────────────────────────────────
   Carbon Black  #11181c   →  --eo-carbon      #073b24  forest
   Deep Graphite #162228   →  --eo-carbon-deep #052c1b
   Tech Slate    #2e4758   →  --eo-slate       #17513a
   Website Grey  #f1f1f3   →  --eo-grey        #f2f4f0
   UI Border     #d9e0e4   →  --eo-line        #dee5d9
   Signal Blue   #3da5ff   →  --eo-accent      #80bf20  lime
   Pulse Green   #18e0a4   →  --eo-pulse       #18e0a4  (live/success, kept)
   Energy Coral  #ff6b57   →  --eo-coral       #ff6b57  (attention, kept)

   Scoped under `.eo` so the existing site.css pages are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted type (CSP: font-src 'self') ─────────────────────────────── */
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/plus-jakarta-sans-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

.eo{
  --eo-carbon:#073b24;
  --eo-carbon-deep:#052c1b;
  --eo-slate:#17513a;
  --eo-grey:#f2f4f0;
  --eo-grey-2:#e9ede6;
  --eo-line:#dee5d9;
  --eo-line-dark:rgba(255,255,255,.16);
  --eo-accent:#80bf20;
  --eo-accent-hi:#95d62f;
  --eo-accent-lo:#507a12;
  --eo-pulse:#18e0a4;
  --eo-coral:#ff6b57;
  --eo-amber:#ffb800;
  --eo-ink:#11201a;
  --eo-body:#43514a;
  --eo-muted:#616e67;
  --eo-muted-dark:#a9bdb1;
  --eo-white:#fff;

  --eo-display:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --eo-text:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  /* geometry contract (visual correction pass, 2026-07-22) */
  --page-max:1440px;
  --content-max:1280px;
  --gutter:clamp(24px,5vw,72px);
  --section-y:clamp(72px,7vw,112px);
  --border:rgba(217,224,228,.18);
  --radius-card:8px;
  --radius-media:10px;

  --eo-r:8px;       /* card radius   */
  --eo-r-sm:6px;    /* control radius*/
  --eo-r-lg:10px;   /* frame radius  */
  --eo-max:1280px;
  --eo-shadow:0 1px 2px rgba(7,59,36,.05),0 10px 30px rgba(7,59,36,.07);
  --eo-shadow-lg:0 24px 70px rgba(5,44,27,.22);

  font-family:var(--eo-text);
  color:var(--eo-body);
  background:var(--eo-white);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.eo *,.eo *::before,.eo *::after{box-sizing:border-box}
.eo img,.eo svg{max-width:100%;display:block}

/* ── Type scale (Keyloop: H1 48/300 · H2 42/700 · H3 18/600) ─────────────── */
.eo h1,.eo h2,.eo h3,.eo h4{font-family:var(--eo-display);color:var(--eo-ink);margin:0}
.eo h1{font-size:clamp(2.35rem,4.6vw,3.25rem);font-weight:300;line-height:1.14;letter-spacing:-.022em}
.eo h1 b,.eo h1 strong{font-weight:700}
.eo h2{font-size:clamp(1.85rem,3.5vw,2.625rem);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.eo h3{font-size:1.125rem;font-weight:600;line-height:1.45;letter-spacing:-.005em}
.eo h4{font-size:.95rem;font-weight:600}
.eo p{margin:0}
.eo a{color:inherit}

.eo-wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter);width:100%}
.eo-sec{padding:var(--section-y) 0}
.eo-sec-sm{padding:72px 0}
.eo-grey{background:var(--eo-grey)}
.eo-dark{background:var(--eo-carbon);color:#d7e3da}
.eo-dark h1,.eo-dark h2,.eo-dark h3,.eo-dark h4{color:#fff}
.eo-deep{background:var(--eo-carbon-deep);color:#d7e3da}
.eo-deep h2,.eo-deep h3{color:#fff}

.eo-eyebrow{display:block;font-family:var(--eo-text);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--eo-accent-lo);margin-bottom:16px}
.eo-dark .eo-eyebrow,.eo-deep .eo-eyebrow{color:var(--eo-accent)}
.eo-lead{font-size:1.175rem;line-height:1.6;color:var(--eo-body);max-width:62ch}
.eo-dark .eo-lead,.eo-deep .eo-lead{color:#bccfc2}
.eo-head{max-width:760px}
.eo-head-c{max-width:760px;margin:0 auto;text-align:center}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.eo-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:13px 28px;border-radius:var(--eo-r-sm);font-family:var(--eo-text);font-size:.975rem;font-weight:600;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s;white-space:nowrap}
.eo-btn svg{width:17px;height:17px;flex-shrink:0}
.eo-btn-primary{background:var(--eo-accent);color:var(--eo-carbon-deep);border-color:var(--eo-accent)}
.eo-btn-primary:hover{background:var(--eo-accent-hi);border-color:var(--eo-accent-hi)}
.eo-btn-primary:active{background:var(--eo-accent-lo);border-color:var(--eo-accent-lo)}
.eo-btn-dark{background:var(--eo-carbon);color:#fff;border-color:var(--eo-carbon)}
.eo-btn-dark:hover{background:var(--eo-slate);border-color:var(--eo-slate)}
.eo-btn-outline{background:transparent;color:var(--eo-ink);border-color:#c3cfc0}
.eo-btn-outline:hover{border-color:var(--eo-carbon);background:var(--eo-grey)}
.eo-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.eo-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.eo-btn-sm{min-height:42px;padding:9px 18px;font-size:.9rem}
.eo-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--eo-carbon);text-decoration:none;border-bottom:1.5px solid var(--eo-accent);padding-bottom:2px;transition:gap .16s}
.eo-link:hover{gap:11px}
.eo-dark .eo-link,.eo-deep .eo-link{color:#fff}
.eo a:focus-visible,.eo button:focus-visible,.eo summary:focus-visible,.eo input:focus-visible,.eo select:focus-visible{outline:3px solid var(--eo-accent);outline-offset:2px;border-radius:3px}

/* ── Announcement bar (compact, 36px) ────────────────────────────────────── */
.eo-anno{background:#041e13;color:#a8c2b2;font-size:.795rem;border-bottom:1px solid var(--border)}
.eo-anno .eo-wrap{display:flex;align-items:center;justify-content:center;gap:14px;height:36px}
.eo-anno a{color:#fff;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.eo-anno a:hover{color:var(--eo-accent)}
.eo-anno a svg{width:12px;height:12px}
.eo-anno span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Header + mega nav (dark, 70px) ──────────────────────────────────────── */
.eo-hdr{position:sticky;top:0;z-index:80;background:rgba(6,32,21,.93);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--border)}
.eo-hdr .eo-wrap{display:flex;align-items:center;gap:30px;height:70px}
.eo-logo{display:flex;align-items:center;flex-shrink:0}
.eo-logo img{width:150px;height:auto}
.eo-navwrap{display:flex;align-items:center;min-width:0}
.eo-nav{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.eo-nav>li{position:relative}
/* `.eo a{color:inherit}` is (0,1,1) and out-specifies a bare `.eo-navbtn`, which
   greyed out the anchor-based nav items. Scoping under .eo restores the colour. */
.eo .eo-navbtn{display:inline-flex;align-items:center;gap:5px;height:44px;padding:0;background:none;border:0;font-family:var(--eo-text);font-size:.905rem;font-weight:500;color:#d3e2d8;text-decoration:none;cursor:pointer;transition:color .15s}
.eo .eo-navbtn:hover{color:#fff}
.eo-navbtn .eo-caret{width:10px;height:10px;transition:transform .2s;opacity:.6}
.eo-nav>li[data-open="true"] .eo-navbtn{color:#fff}
.eo-nav>li[data-open="true"] .eo-caret{transform:rotate(180deg)}

.eo-mega{position:absolute;top:calc(100% + 14px);left:-20px;min-width:640px;background:#08281a;border:1px solid var(--border);border-radius:var(--eo-r);box-shadow:var(--eo-shadow-lg);padding:24px;display:none;grid-template-columns:1fr 1fr;gap:24px}
.eo-nav>li[data-open="true"] .eo-mega{display:grid}
.eo-mega-wide{min-width:740px;grid-template-columns:1fr 1fr 1fr}
.eo-mega-col h4{font-size:.69rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#8ba197;margin-bottom:11px;font-family:var(--eo-text)}
.eo-mega-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.eo-mega a{display:block;padding:9px 11px;border-radius:var(--eo-r-sm);text-decoration:none;transition:background .14s}
.eo-mega a:hover{background:rgba(255,255,255,.06)}
.eo-mega a b{display:block;font-family:var(--eo-display);font-size:.9rem;font-weight:600;color:#fff;line-height:1.35}
.eo-mega a span{display:block;font-size:.79rem;color:#9db5a6;line-height:1.45;margin-top:2px}
.eo-mega-soon{display:block;padding:9px 11px;border-radius:var(--eo-r-sm);cursor:default}
.eo-mega-soon b{display:block;font-family:var(--eo-display);font-size:.9rem;font-weight:600;color:#8ba197;line-height:1.35}
.eo-mega-soon span{display:block;font-size:.79rem;color:#7b9285;line-height:1.45;margin-top:2px}
.eo-hdr-cta{margin-left:auto;display:flex;align-items:center;gap:18px;flex-shrink:0}
.eo-hdr-cta .login{display:inline-flex;align-items:center;height:44px;font-size:.905rem;font-weight:500;color:#d3e2d8;text-decoration:none}
.eo-hdr-cta .login:hover{color:#fff}
.eo-hdr-cta .eo-btn{min-width:138px;height:42px;min-height:42px;padding:0 20px;font-size:.895rem}
.eo-burger{display:none;margin-left:auto;background:none;border:1px solid var(--border);border-radius:var(--eo-r-sm);min-height:44px;min-width:46px;align-items:center;justify-content:center;cursor:pointer;color:#d3e2d8}
.eo-burger svg{width:20px;height:20px}

.eo-pill{display:inline-flex;align-items:center;font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:var(--eo-grey-2);color:var(--eo-muted);border:1px solid var(--eo-line);padding:3px 8px;border-radius:999px;white-space:nowrap;margin-left:8px}
.eo-pill-live{background:rgba(24,224,164,.14);color:#0a6b4d;border-color:rgba(24,224,164,.4)}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.eo-hero{background:var(--eo-carbon);color:#c9dbd0;position:relative;overflow:hidden;padding:96px 0 104px}
.eo-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(760px 420px at 76% 24%,rgba(128,191,32,.17),transparent 62%),
  radial-gradient(560px 380px at 12% 88%,rgba(24,224,164,.09),transparent 66%);
  pointer-events:none}
.eo-hero .eo-wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.eo-hero h1{color:#fff;max-width:14ch}
.eo-hero .eo-lead{margin:26px 0 34px;color:#b6cbbe;max-width:48ch;font-size:1.2rem}
.eo-hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.eo-hero-note{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.885rem;color:#9db5a6;font-weight:500}
.eo-hero-note span{display:inline-flex;align-items:center;gap:8px}
.eo-hero-note svg{width:15px;height:15px;color:var(--eo-accent);flex-shrink:0}

/* ── Cinematic video hero — full-bleed, copy left ~40%, media weighted right ─ */
/* `padding:0` neutralises site.css's bare `section{padding:96px 0}`, which
   otherwise eats 192px out of the fixed hero height. */
.eo-hero-v{position:relative;height:clamp(560px,64vh,700px);display:flex;align-items:center;overflow:hidden;background:var(--eo-carbon);padding:0}
.eo-hero-v .eo-hero-bg{position:absolute;inset:0;z-index:0}
.eo-hero-v .eo-hero-bg video,.eo-hero-v .eo-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:68% 50%;display:block}
/* darkest at the left so every copy pixel is readable; stays cinematic on the right */
.eo-hero-v .eo-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,26,16,.94) 0%,rgba(4,26,16,.86) 26%,rgba(4,26,16,.58) 48%,rgba(4,26,16,.20) 72%,rgba(4,26,16,.10) 100%)}
.eo-hero-v .eo-wrap{position:relative;z-index:2;display:block}
.eo-hero-copy{max-width:540px}
.eo-hero-v .eo-eyebrow{margin-bottom:18px}
/* NB: the geometry contract asks for clamp(48px,4.4vw,72px) AND a maximum of three
   lines. Escargo's headline is longer than the reference's, so 4.4vw produced five
   lines at 1440. Capped so the three-line rule wins — verified by screenshot. */
.eo-hero-v h1{color:#fff;font-size:clamp(34px,3.35vw,48px);font-weight:300;line-height:1.13;letter-spacing:-.035em}
.eo-hero-lead{margin-top:20px;font-family:var(--eo-display);font-size:21px;font-weight:400;line-height:1.45;color:#e4efe8}
.eo-hero-v .eo-hero-body{margin-top:14px;font-size:16px;line-height:1.55;color:#b3c8ba;max-width:500px}
.eo-hero-ctas{margin-top:30px}
.eo-hero-v .eo-btn{height:48px;min-height:48px}
.eo-hero-promise{margin-top:26px;font-size:14px;font-weight:500;color:#8fae9c;letter-spacing:.01em}

/* ── Trust strip — attached to the hero by a single 1px border ───────────── */
/* `padding:0` is load-bearing: site.css carries a bare `section{padding:96px 0}`
   which otherwise inflates this strip from 116px to 309px. */
.eo-trust-strip{background:var(--eo-carbon-deep);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:0}
.eo-trust-strip .eo-wrap{height:116px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.eo-trust-label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#7b9285}
.eo-trust-row{display:flex;align-items:center;gap:clamp(28px,5vw,68px);flex-wrap:wrap}
.eo-trust-row span{display:inline-flex;align-items:center;gap:9px;font-family:var(--eo-display);font-size:17px;font-weight:600;color:#93ab9c;letter-spacing:-.01em}
.eo-trust-row svg{width:17px;height:17px;opacity:.75}

/* ── Audience row — five equal cards, one line ───────────────────────────── */
.eo-aud{background:var(--eo-carbon);padding:64px 0 80px}
.eo-aud-head{text-align:center;max-width:680px;margin:0 auto}
.eo-aud-head h2{font-size:clamp(30px,3vw,40px);font-weight:400;letter-spacing:-.022em;color:#fff;line-height:1.15}
.eo-aud-head p{margin-top:10px;font-size:16px;color:#93ab9c}
.eo-aud-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:30px}
.eo-aud-card{display:flex;flex-direction:column;min-height:238px;padding:24px 22px;background:rgba(255,255,255,.032);border:1px solid var(--border);border-radius:var(--radius-card);transition:border-color .18s,background .18s}
.eo-aud-card:hover{background:rgba(255,255,255,.055);border-color:rgba(128,191,32,.42)}
.eo-aud-ico{width:42px;height:42px;border-radius:6px;background:rgba(128,191,32,.13);color:var(--eo-accent);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.eo-aud-ico svg{width:21px;height:21px}
.eo-aud-card h3{font-size:19px;font-weight:600;color:#fff;letter-spacing:-.012em;line-height:1.25}
.eo-aud-card p{margin-top:9px;font-size:14px;line-height:1.5;color:#93ab9c}
.eo-aud-card a{margin-top:auto;padding-top:16px;min-height:44px;display:inline-flex;align-items:flex-end;gap:7px;font-size:14px;font-weight:600;color:var(--eo-accent);text-decoration:none;transition:gap .16s}
.eo-aud-card a:hover{gap:11px}
.eo-aud-card a svg{width:13px;height:13px}

/* ── Product intelligence — 55/45, dashboard left, copy right ────────────── */
.eo-dash{background:var(--eo-carbon-deep);padding:var(--section-y) 0;border-top:1px solid var(--border)}
.eo-dash-grid{display:grid;grid-template-columns:55fr 45fr;gap:clamp(36px,4.5vw,72px);align-items:center}
.eo-dash-media{border:1px solid var(--border);border-radius:var(--radius-media);overflow:hidden;background:#062015;box-shadow:var(--eo-shadow-lg)}
.eo-dash-media img{width:100%;height:auto;display:block}
.eo-dash h2{font-size:clamp(28px,2.8vw,38px);font-weight:400;line-height:1.2;letter-spacing:-.022em;color:#fff}
.eo-dash p.eo-lead{margin-top:18px;font-size:16px;line-height:1.55;color:#b3c8ba;max-width:500px}

/* hero operations overlay card (sample interface data — labelled as such) */
.eo-ops{background:rgba(6,32,21,.82);backdrop-filter:blur(14px) saturate(150%);border:1px solid rgba(255,255,255,.17);border-radius:var(--eo-r-lg);padding:22px;box-shadow:var(--eo-shadow-lg)}
.eo-ops-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.eo-ops-h b{font-family:var(--eo-display);font-size:1.02rem;font-weight:700;color:#fff}
.eo-ops-h .eo-tag{margin-left:auto}
.eo-ops-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
.eo-ops-grid div{background:rgba(255,255,255,.05);border:1px solid var(--eo-line-dark);border-radius:var(--eo-r-sm);padding:12px 13px}
.eo-ops-grid b{display:block;font-family:var(--eo-display);font-size:1.5rem;font-weight:700;color:#fff;line-height:1}
.eo-ops-grid span{display:block;font-size:.775rem;color:#9db5a6;margin-top:6px}
.eo-ops-feed{border-top:1px solid var(--eo-line-dark);padding-top:13px;display:flex;flex-direction:column;gap:9px}
.eo-ops-feed div{display:flex;align-items:center;gap:9px;font-size:.815rem;color:#bccfc2}
.eo-ops-feed i{width:6px;height:6px;border-radius:50%;background:var(--eo-pulse);flex-shrink:0}
.eo-sample{display:block;margin-top:14px;font-size:.715rem;color:#8ba197;letter-spacing:.02em}

/* ── Connected workflow stepper ──────────────────────────────────────────── */
.eo-flow{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.eo-flow button{display:inline-flex;align-items:center;gap:9px;min-height:44px;background:#fff;border:1px solid var(--eo-line);border-radius:999px;padding:10px 17px;font-family:var(--eo-text);font-size:.865rem;font-weight:600;color:var(--eo-body);cursor:pointer;transition:all .18s}
.eo-flow button:hover{border-color:var(--eo-carbon);color:var(--eo-ink)}
.eo-flow button[aria-selected="true"]{background:var(--eo-carbon);border-color:var(--eo-carbon);color:#fff}
.eo-flow button i{width:22px;height:22px;border-radius:50%;background:var(--eo-grey-2);color:var(--eo-muted);font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-style:normal;flex-shrink:0}
.eo-flow button[aria-selected="true"] i{background:var(--eo-accent);color:var(--eo-carbon-deep)}
.eo-flow-panel{margin-top:28px;background:#fff;border:1px solid var(--eo-line);border-radius:var(--eo-r);padding:26px}
.eo-flow-panel h3{margin-bottom:8px}
.eo-flow-panel p{color:var(--eo-muted);font-size:.965rem;max-width:70ch}

/* ── Business-type cards (horizontal snap rail on mobile) ────────────────── */
.eo-biz{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.eo-biz .eo-card{display:flex;flex-direction:column}
.eo-biz .eo-card p{flex:1}
.eo-biz .eo-link{margin-top:18px;align-self:flex-start}

/* ── Driver navigation panel ─────────────────────────────────────────────── */
.eo-nav-map{position:relative}
.eo-nav-banner{position:absolute;top:11px;left:11px;right:11px;z-index:2;display:flex;align-items:center;gap:11px;background:rgba(6,32,21,.94);border:1px solid rgba(128,191,32,.4);border-radius:var(--eo-r-sm);padding:10px 13px;backdrop-filter:blur(6px)}
.eo-nav-banner svg{width:24px;height:24px;color:var(--eo-accent);flex-shrink:0}
.eo-nav-banner b{display:block;font-family:var(--eo-display);font-size:.885rem;font-weight:700;color:#fff;line-height:1.3}
.eo-nav-banner span{display:block;font-size:.73rem;color:#8ba394;margin-top:2px}

/* ── Media frame: EVERY landing visual sits on the same 16:10 canvas ─────── */
.eo-frame{position:relative;aspect-ratio:16/10;border-radius:var(--eo-r-lg);overflow:hidden;background:var(--eo-grey);border:1px solid var(--eo-line);box-shadow:var(--eo-shadow)}
.eo-frame>img,.eo-frame>svg{width:100%;height:100%;object-fit:cover;display:block}
.eo-dark .eo-frame,.eo-deep .eo-frame,.eo-hero .eo-frame{border-color:rgba(255,255,255,.15);box-shadow:var(--eo-shadow-lg)}
.eo-frame-tall{aspect-ratio:4/5}
.eo-cap{margin-top:12px;font-size:.8rem;color:var(--eo-muted);line-height:1.5}
.eo-dark .eo-cap,.eo-deep .eo-cap,.eo-hero .eo-cap{color:#8ba394}

/* ── Card grids ──────────────────────────────────────────────────────────── */
.eo-grid{display:grid;gap:20px;margin-top:52px}
.eo-g2{grid-template-columns:repeat(2,1fr)}
.eo-g3{grid-template-columns:repeat(3,1fr)}
.eo-g4{grid-template-columns:repeat(4,1fr)}
.eo-g5{grid-template-columns:repeat(5,1fr)}

.eo-card{background:#fff;border:1px solid var(--eo-line);border-radius:var(--eo-r);padding:28px;transition:border-color .18s,box-shadow .18s,transform .18s}
.eo-card:hover{border-color:#c2d2bb;box-shadow:var(--eo-shadow);transform:translateY(-2px)}
.eo-grey .eo-card{background:#fff}
.eo-card h3{margin:16px 0 8px}
.eo-card p{font-size:.94rem;color:var(--eo-muted);line-height:1.6}
.eo-ico{width:46px;height:46px;border-radius:var(--eo-r-sm);background:var(--eo-carbon);color:var(--eo-accent);display:flex;align-items:center;justify-content:center}
.eo-ico svg{width:23px;height:23px}
.eo-dark .eo-card,.eo-deep .eo-card{background:rgba(255,255,255,.045);border-color:var(--eo-line-dark)}
.eo-dark .eo-card:hover,.eo-deep .eo-card:hover{border-color:rgba(128,191,32,.4);box-shadow:none}
.eo-dark .eo-card p,.eo-deep .eo-card p{color:#a9bdb1}
.eo-dark .eo-ico,.eo-deep .eo-ico{background:rgba(128,191,32,.14)}

/* capability grid — Keyloop's dense 12-up */
.eo-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:52px;background:var(--eo-line);border:1px solid var(--eo-line);border-radius:var(--eo-r);overflow:hidden}
.eo-cap-item{background:#fff;padding:26px 24px}
.eo-cap-item h3{font-size:1rem;margin-bottom:7px}
.eo-cap-item p{font-size:.875rem;color:var(--eo-muted);line-height:1.55}
.eo-cap-item svg{width:21px;height:21px;color:var(--eo-accent-lo);margin-bottom:13px}

/* ── Split editorial rows ────────────────────────────────────────────────── */
.eo-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.eo-split-rev .eo-split-media{order:-1}
.eo-checks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.eo-checks li{position:relative;padding-left:30px;font-size:.965rem;line-height:1.55}
.eo-checks li::before{content:"";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;background:var(--eo-accent);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12"/></svg>') center/contain no-repeat}
.eo-checks li::after{content:"";position:absolute;left:4px;top:9px;width:11px;height:6px;border-left:2.2px solid var(--eo-carbon-deep);border-bottom:2.2px solid var(--eo-carbon-deep);transform:rotate(-45deg)}

/* ── Stats band ──────────────────────────────────────────────────────────── */
.eo-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:56px}
.eo-stat{padding:26px 20px;border-left:2px solid rgba(128,191,32,.42)}
.eo-stat b{display:block;font-family:var(--eo-display);font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;line-height:1;color:#fff;letter-spacing:-.03em}
.eo-stat span{display:block;margin-top:11px;font-size:.87rem;color:#a9bdb1;line-height:1.5}

/* ── Trust strip ─────────────────────────────────────────────────────────── */
.eo-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:40px}
.eo-trust-item{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--eo-line);border-radius:999px;padding:11px 20px;font-size:.895rem;font-weight:600;color:var(--eo-ink)}
.eo-trust-item svg{width:17px;height:17px;color:var(--eo-accent-lo)}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.eo-cta{background:var(--eo-carbon-deep);position:relative;overflow:hidden}
.eo-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 50% 0%,rgba(128,191,32,.16),transparent 66%)}
.eo-cta .eo-wrap{position:relative;text-align:center}
.eo-cta h2{color:#fff;max-width:20ch;margin:0 auto}
.eo-cta .eo-lead{margin:22px auto 34px;color:#b6cbbe;text-align:center}
.eo-cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.eo-faq{max-width:840px;margin:48px auto 0}
.eo-faq details{border-bottom:1px solid var(--eo-line)}
.eo-faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-family:var(--eo-display);font-size:1.06rem;font-weight:600;color:var(--eo-ink)}
.eo-faq summary::-webkit-details-marker{display:none}
.eo-faq summary::after{content:"";position:absolute;right:8px;top:29px;width:11px;height:11px;border-right:2px solid var(--eo-muted);border-bottom:2px solid var(--eo-muted);transform:rotate(45deg);transition:transform .2s}
.eo-faq details[open] summary::after{transform:rotate(-135deg)}
.eo-faq details p{padding:0 44px 24px 0;color:var(--eo-body);font-size:.985rem}

/* ── Signup forms ────────────────────────────────────────────────────────── */
.eo-forms{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.eo-form{background:#fff;border:1px solid var(--eo-line);border-radius:var(--eo-r);padding:30px}
.eo-form h3{margin-bottom:20px;font-size:1.2rem}
.eo-field{margin-bottom:15px}
.eo-field label{display:block;font-size:.855rem;font-weight:600;color:var(--eo-ink);margin-bottom:6px}
.eo-field input,.eo-field select{width:100%;min-height:47px;padding:11px 14px;border:1.5px solid var(--eo-line);border-radius:var(--eo-r-sm);font-family:var(--eo-text);font-size:.965rem;color:var(--eo-ink);background:#fff}
.eo-field input:focus,.eo-field select:focus{border-color:var(--eo-accent);outline:none;box-shadow:0 0 0 3px rgba(128,191,32,.18)}
.eo-form .eo-btn{width:100%;margin-top:8px}
.eo-note{margin-top:12px;font-size:.85rem;color:var(--eo-muted);min-height:1.2em}
.eo-note[data-state="ok"]{color:#2b6b1b;font-weight:600}
.eo-note[data-state="err"]{color:#a8321f;font-weight:600}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.eo-foot{background:var(--eo-carbon);color:#9db5a6;padding:76px 0 34px;font-size:.9rem}
.eo-foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:48px;border-bottom:1px solid var(--eo-line-dark)}
.eo-foot-brand img{width:172px;margin-bottom:20px}
.eo-foot-brand p{font-size:.885rem;line-height:1.62;color:#8ba394;max-width:30ch}
.eo-foot h3{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-family:var(--eo-text)}
.eo-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.eo-foot a{color:#9db5a6;text-decoration:none}
.eo-foot a:hover{color:#fff}
.eo-social{display:flex;gap:9px;margin-top:22px}
.eo-social a{width:36px;height:36px;border:1px solid var(--eo-line-dark);border-radius:var(--eo-r-sm);display:flex;align-items:center;justify-content:center;color:#9db5a6;transition:border-color .16s,color .16s}
.eo-social a:hover{border-color:var(--eo-accent);color:var(--eo-accent)}
.eo-social svg{width:16px;height:16px}
.eo-foot-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding-top:26px;font-size:.82rem;color:#8ba197}
.eo-foot-legal{display:flex;flex-wrap:wrap;gap:14px 20px;margin-left:auto}

/* ═══ INTERACTIVE DEMO ════════════════════════════════════════════════════ */
.eo-demo{background:var(--eo-carbon-deep);position:relative;overflow:hidden}
.eo-demo::before{content:"";position:absolute;inset:0;background:radial-gradient(820px 460px at 50% 12%,rgba(128,191,32,.11),transparent 64%);pointer-events:none}
.eo-demo .eo-wrap{position:relative}

.eo-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:40px 0 30px}
.eo-tab{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;background:rgba(255,255,255,.045);border:1px solid var(--eo-line-dark);border-radius:999px;padding:11px 20px;font-family:var(--eo-text);font-size:.885rem;font-weight:600;color:#a9bdb1;cursor:pointer;transition:all .18s}
.eo-tab:hover{color:#fff;border-color:rgba(255,255,255,.32)}
.eo-tab svg{width:16px;height:16px}
.eo-tab[aria-selected="true"]{background:rgba(128,191,32,.15);border-color:rgba(128,191,32,.55);color:var(--eo-accent)}

.eo-win{border:1px solid var(--eo-line-dark);border-radius:var(--eo-r-lg);overflow:hidden;background:#0a2a1c;box-shadow:var(--eo-shadow-lg)}
.eo-win-bar{display:flex;align-items:center;gap:11px;padding:11px 16px;background:rgba(255,255,255,.035);border-bottom:1px solid var(--eo-line-dark)}
.eo-dots{display:flex;gap:6px}
.eo-dots i{width:10px;height:10px;border-radius:50%;display:block}
.eo-dots i:nth-child(1){background:#ff5f57}
.eo-dots i:nth-child(2){background:#febc2e}
.eo-dots i:nth-child(3){background:#28c840}
.eo-win-app{font-size:.8rem;font-weight:600;color:#c9dbd0}
.eo-win-trig{font-size:.8rem;color:#8ba197;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eo-win-status{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:.755rem;font-weight:600;color:#8ba394;flex-shrink:0}
.eo-dot{width:7px;height:7px;border-radius:50%;background:var(--eo-accent);flex-shrink:0}
.eo-win[data-gate="true"] .eo-dot{background:var(--eo-amber)}
.eo-win[data-gate="true"] .eo-win-status{color:var(--eo-amber)}
@media (prefers-reduced-motion:no-preference){
  .eo-win:not([data-gate="true"]) .eo-dot{animation:eo-glow 2.2s ease-in-out infinite}
}
@keyframes eo-glow{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(128,191,32,.55)}50%{opacity:.7;box-shadow:0 0 0 5px rgba(128,191,32,0)}}

.eo-prog{height:3px;background:rgba(255,255,255,.07)}
.eo-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--eo-accent-lo),var(--eo-accent));transition:width .5s ease;border-radius:0 3px 3px 0}

.eo-win-body{display:grid;grid-template-columns:186px minmax(0,1fr) 290px;min-height:462px}
.eo-side{border-right:1px solid var(--eo-line-dark);padding:15px 11px;display:flex;flex-direction:column;gap:2px;transition:opacity .3s,filter .3s}
.eo-side-h{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7b9285;padding:8px 10px 6px}
.eo-side-i{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--eo-r-sm);font-size:.845rem;font-weight:500;color:#9db5a6;transition:background .16s,color .16s}
.eo-side-i svg{width:15px;height:15px;flex-shrink:0;opacity:.8}
.eo-side-i[data-active="true"]{background:rgba(128,191,32,.13);color:var(--eo-accent)}
.eo-side-i b{margin-left:auto;font-size:.68rem;font-weight:700;background:var(--eo-accent);color:var(--eo-carbon-deep);border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}

.eo-stage{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--eo-line-dark)}
.eo-say{display:flex;align-items:flex-start;gap:10px;padding:12px 20px;border-bottom:1px solid var(--eo-line-dark);background:rgba(255,255,255,.02)}
.eo-say .eo-dot{margin-top:6px}
.eo-say p{font-size:.855rem;line-height:1.5;color:#bccfc2}
.eo-panel{flex:1;padding:20px;overflow:hidden;min-height:300px}
@media (prefers-reduced-motion:no-preference){
  .eo-panel>*{animation:eo-in .26s cubic-bezier(.21,.65,.36,1) both}
}
@keyframes eo-in{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}

.eo-ctrls{display:flex;align-items:center;gap:9px;padding:13px 20px;border-top:1px solid var(--eo-line-dark)}
.eo-cbtn{background:transparent;border:1px solid var(--eo-line-dark);border-radius:var(--eo-r-sm);min-height:40px;padding:10px 16px;font-family:var(--eo-text);font-size:.815rem;font-weight:600;color:#c9dbd0;cursor:pointer;transition:border-color .16s,color .16s}
.eo-cbtn:hover:not(:disabled){border-color:rgba(128,191,32,.5);color:#fff}
.eo-cbtn:disabled{opacity:.35;cursor:not-allowed}
.eo-cbtn-go{background:var(--eo-accent);border-color:var(--eo-accent);color:var(--eo-carbon-deep)}
.eo-cbtn-go:hover:not(:disabled){background:var(--eo-accent-hi);border-color:var(--eo-accent-hi);color:var(--eo-carbon-deep)}
.eo-count{margin-left:auto;font-size:.755rem;color:#8ba197;font-variant-numeric:tabular-nums;letter-spacing:.04em}

.eo-rail{padding:13px;display:flex;flex-direction:column;gap:11px;overflow:hidden;transition:opacity .3s,filter .3s}
.eo-rcard{background:rgba(255,255,255,.035);border:1px solid var(--eo-line-dark);border-radius:var(--eo-r-sm);padding:13px}
.eo-rcard h4{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7b9285;margin:0 0 10px;font-family:var(--eo-text)}
.eo-rrow{display:flex;align-items:center;gap:9px;font-size:.79rem;color:#9db5a6;padding:5px 0}
.eo-rrow i{width:6px;height:6px;border-radius:50%;background:#3c5b4b;flex-shrink:0}
.eo-rrow[data-on="true"]{color:#d7e3da}
.eo-rrow[data-on="true"] i{background:var(--eo-pulse)}
.eo-rcard-gate{border-color:rgba(255,184,0,.45);background:rgba(255,184,0,.07)}
.eo-rcard-gate h4{color:var(--eo-amber)}
.eo-rcard p{font-size:.8rem;line-height:1.5;color:#bccfc2}

/* dim everything except the stage while an approval is pending */
.eo-win[data-gate="true"] .eo-side,
.eo-win[data-gate="true"] .eo-rail,
.eo-win[data-gate="true"] .eo-feed{opacity:.36;filter:blur(2.5px);pointer-events:none}

.eo-feed{border-top:1px solid var(--eo-line-dark);padding:11px 16px;display:flex;flex-direction:column;gap:6px;max-height:112px;overflow:hidden;transition:opacity .3s,filter .3s}
.eo-fline{display:flex;align-items:center;gap:11px;font-size:.775rem;color:#8ba394}
.eo-fline time{font-variant-numeric:tabular-nums;color:#7b9285;flex-shrink:0}
.eo-fline b{color:var(--eo-accent);font-weight:600;flex-shrink:0;min-width:52px}
.eo-fline span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eo-outs{border-top:1px solid var(--eo-line-dark);padding:11px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:44px}
.eo-out{display:inline-flex;align-items:center;gap:6px;background:rgba(24,224,164,.11);border:1px solid rgba(24,224,164,.3);color:var(--eo-pulse);border-radius:999px;padding:4px 12px;font-size:.75rem;font-weight:600}
.eo-out svg{width:11px;height:11px}
.eo-outs-none{font-size:.75rem;color:#7b9285}

/* ── Demo panel primitives ───────────────────────────────────────────────── */
.eo-p-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.eo-p-h h3{font-size:.955rem;color:#fff;font-family:var(--eo-display)}
.eo-p-h .eo-tag{margin-left:auto;font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.07);color:#9db5a6;border:1px solid var(--eo-line-dark)}
.eo-tag-ok{background:rgba(24,224,164,.13)!important;color:var(--eo-pulse)!important;border-color:rgba(24,224,164,.32)!important}
.eo-tag-warn{background:rgba(255,184,0,.13)!important;color:var(--eo-amber)!important;border-color:rgba(255,184,0,.34)!important}

.eo-rows{display:flex;flex-direction:column;gap:1px;background:var(--eo-line-dark);border:1px solid var(--eo-line-dark);border-radius:var(--eo-r-sm);overflow:hidden}
.eo-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:#0c3122;font-size:.845rem;color:#c9dbd0}
.eo-row b{font-weight:600;color:#fff}
.eo-row .eo-reg{font-family:var(--eo-display);font-weight:700;color:#fff;letter-spacing:.03em;background:rgba(255,255,255,.08);border-radius:4px;padding:2px 8px;font-size:.8rem}
.eo-row .eo-r-r{margin-left:auto;flex-shrink:0;font-variant-numeric:tabular-nums}
.eo-row-hi{background:rgba(128,191,32,.1)}

.eo-kv{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.eo-kv div{background:rgba(255,255,255,.035);border:1px solid var(--eo-line-dark);border-radius:var(--eo-r-sm);padding:11px 13px}
.eo-kv span{display:block;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7b9285;margin-bottom:5px}
.eo-kv b{display:block;font-family:var(--eo-display);font-size:1.02rem;font-weight:700;color:#fff}

.eo-quote{border:1px solid var(--eo-line-dark);border-radius:var(--eo-r-sm);overflow:hidden}
.eo-qline{display:flex;align-items:center;gap:12px;padding:10px 14px;font-size:.845rem;color:#c9dbd0;border-bottom:1px solid var(--eo-line-dark)}
.eo-qline span:last-child{margin-left:auto;font-variant-numeric:tabular-nums;color:#fff;font-weight:600}
.eo-qtot{display:flex;align-items:center;padding:12px 14px;background:rgba(128,191,32,.11);font-family:var(--eo-display);font-weight:700;color:#fff}
.eo-qtot span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}

.eo-phone{width:210px;margin:0 auto;border:8px solid #16241d;border-radius:26px;background:#0c3122;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.4)}
.eo-phone-top{height:22px;background:#16241d;display:flex;align-items:center;justify-content:center}
.eo-phone-top i{width:52px;height:4px;border-radius:99px;background:#2c4238;display:block}
.eo-phone-in{padding:13px}
.eo-steps{display:flex;flex-direction:column;gap:0;margin:4px 0}
.eo-step{display:flex;gap:11px;align-items:flex-start;position:relative;padding-bottom:15px}
.eo-step::before{content:"";position:absolute;left:8px;top:18px;bottom:0;width:1.5px;background:var(--eo-line-dark)}
.eo-step:last-child{padding-bottom:0}
.eo-step:last-child::before{display:none}
.eo-step i{width:17px;height:17px;border-radius:50%;border:2px solid #3c5b4b;background:#0c3122;flex-shrink:0;z-index:1;display:flex;align-items:center;justify-content:center}
.eo-step[data-done="true"] i{background:var(--eo-accent);border-color:var(--eo-accent)}
.eo-step[data-now="true"] i{border-color:var(--eo-accent);box-shadow:0 0 0 3px rgba(128,191,32,.2)}
.eo-step div b{display:block;font-size:.79rem;font-weight:600;color:#8ba394;line-height:1.35}
.eo-step[data-done="true"] div b,.eo-step[data-now="true"] div b{color:#fff}
.eo-step div span{display:block;font-size:.71rem;color:#7b9285;margin-top:2px}

.eo-map{position:relative;border:1px solid var(--eo-line-dark);border-radius:var(--eo-r-sm);overflow:hidden;background:#0a2418}
.eo-map svg{width:100%;height:auto;display:block}
.eo-map-hud{position:absolute;left:11px;right:11px;bottom:11px;display:flex;align-items:center;gap:11px;background:rgba(6,32,21,.93);border:1px solid var(--eo-line-dark);border-radius:var(--eo-r-sm);padding:9px 12px;backdrop-filter:blur(6px)}
.eo-map-hud b{font-size:.8rem;color:#fff;font-weight:600}
.eo-map-hud span{font-size:.72rem;color:#8ba394}
.eo-map-eta{margin-left:auto;text-align:right;flex-shrink:0}
.eo-map-eta b{display:block;font-family:var(--eo-display);color:var(--eo-accent);font-size:.95rem}
@media (prefers-reduced-motion:no-preference){
  .eo-truck{animation:eo-drive 7s linear infinite}
  .eo-route-live{stroke-dasharray:8 10;animation:eo-dash 1.5s linear infinite}
  .eo-ping{animation:eo-ping 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes eo-dash{to{stroke-dashoffset:-36}}
@keyframes eo-ping{0%{opacity:.6;transform:scale(.7)}70%,100%{opacity:0;transform:scale(2.1)}}

.eo-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.eo-photo{aspect-ratio:4/3;border-radius:6px;overflow:hidden;border:1px solid var(--eo-line-dark);background:#0c3122;position:relative}
.eo-photo svg{width:100%;height:100%}
.eo-photo b{position:absolute;left:5px;bottom:5px;font-size:.63rem;font-weight:600;color:#fff;background:rgba(6,32,21,.82);padding:2px 6px;border-radius:4px}

.eo-gate{border:1px solid rgba(255,184,0,.45);background:rgba(255,184,0,.06);border-radius:var(--eo-r-sm);padding:15px;text-align:center}
.eo-gate h4{font-family:var(--eo-display);font-size:.95rem;color:#fff;margin-bottom:7px}
.eo-gate p{font-size:.83rem;color:#bccfc2;line-height:1.5;max-width:38ch;margin:0 auto}

.eo-bars{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.eo-bar b{display:flex;font-size:.79rem;color:#c9dbd0;font-weight:500;margin-bottom:6px}
.eo-bar b span{margin-left:auto;color:#fff;font-variant-numeric:tabular-nums}
.eo-bar i{display:block;height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.eo-bar i em{display:block;height:100%;background:var(--eo-accent);border-radius:99px;transition:width .6s ease}

.eo-demo-foot{margin-top:26px;text-align:center;font-size:.875rem;color:#8ba394;max-width:64ch;margin-left:auto;margin-right:auto}
.eo-demo-foot b{color:var(--eo-accent);font-weight:600}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* ── Audience row + hero: responsive layers ──────────────────────────────── */
@media (max-width:1180px){
  .eo-aud-grid{grid-template-columns:repeat(3,1fr)}
  /* 3.35vw bottoms out around 34px here; hold the headline nearer the desktop scale */
  .eo-hero-v h1{font-size:42px}
}
@media (max-width:768px){
  /* Hero: copy sits toward the bottom over the media, on a vertical scrim so
     contrast never depends on which video frame is showing. */
  .eo-hero-v{height:700px;align-items:flex-end}
  .eo-hero-v .eo-hero-bg video,.eo-hero-v .eo-hero-bg img{object-position:62% 50%}
  .eo-hero-v .eo-hero-scrim{background:linear-gradient(180deg,rgba(4,26,16,.34) 0%,rgba(4,26,16,.72) 40%,rgba(4,26,16,.95) 74%,rgba(4,26,16,.98) 100%)}
  .eo-hero-v .eo-wrap{padding-bottom:44px}
  .eo-hero-copy{max-width:100%}
  .eo-hero-v h1{font-size:44px}
  .eo-hero-lead{font-size:19px;margin-top:16px}
  .eo-hero-v .eo-hero-body{margin-top:12px}
  .eo-hero-ctas{margin-top:24px}
  .eo-trust-strip .eo-wrap{height:auto;padding-top:24px;padding-bottom:24px}
  .eo-trust-row{gap:18px 26px}
  .eo-trust-row span{font-size:15px}
  /* audience cards become a snap rail that shows part of the next card */
  .eo-aud{padding:56px 0 64px}
  .eo-aud-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
    padding:4px var(--gutter) 14px;scrollbar-width:thin;overscroll-behavior-x:contain}
  .eo-aud-grid>*{scroll-snap-align:start}
  .eo-aud-card{min-height:0}
  /* touch layouts: the card link must reach a 44px target */
  .eo-aud-card a{min-height:44px;align-items:center}
}
@media (max-width:430px){
  .eo{--gutter:20px}
  .eo-hero-v{height:680px}
  .eo-hero-v h1{font-size:38px}
  .eo-aud-grid{grid-auto-columns:78%}
}
@media (max-width:340px){
  .eo{--gutter:16px}
  .eo-hero-v{height:660px}
  .eo-hero-v h1{font-size:35px}
  /* only at 320 do the hero CTAs stack */
  .eo-hero-ctas{flex-direction:column}
  .eo-hero-ctas .eo-btn{width:100%}
}

/* Dark sections: .eo-checks inherits the light-theme body colour, which is
   unreadable on the carbon surfaces. */
.eo-dark .eo-checks li,.eo-deep .eo-checks li,.eo-dash .eo-checks li{color:#b3c8ba}
.eo-dark .eo-checks li::after,.eo-deep .eo-checks li::after,.eo-dash .eo-checks li::after{border-color:var(--eo-carbon-deep)}

@media (max-width:1080px){
  .eo-win-body{grid-template-columns:1fr 268px}
  .eo-side{display:none}
  .eo-g5,.eo-g4{grid-template-columns:repeat(2,1fr)}
  .eo-caps{grid-template-columns:repeat(2,1fr)}
  .eo-stats{grid-template-columns:repeat(3,1fr)}
  .eo-foot-top{grid-template-columns:1fr 1fr 1fr;gap:32px}
}
@media (max-width:900px){
  .eo-nav,.eo-hdr-cta .login{display:none}
  .eo-burger{display:inline-flex}
  .eo-hdr.eo-open .eo-nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--eo-line);padding:12px;gap:2px;max-height:74vh;overflow-y:auto;box-shadow:var(--eo-shadow-lg)}
  .eo-hdr.eo-open .eo-navbtn{width:100%;justify-content:space-between}
  .eo-mega{position:static;min-width:0;box-shadow:none;border:0;padding:4px 0 12px;grid-template-columns:1fr!important;gap:14px}
  .eo-hero .eo-wrap,.eo-split{grid-template-columns:1fr;gap:40px}
  .eo-biz{grid-template-columns:1fr 1fr}
  .eo-dash-grid{grid-template-columns:1fr;gap:36px}
  .eo-dash-media{order:-1}
  .eo-split-rev .eo-split-media{order:0}
  .eo-sec{padding:76px 0}
  .eo-win-body{grid-template-columns:1fr;min-height:0}
  .eo-stage{border-right:0}
  .eo-rail{display:none}
  .eo-forms{grid-template-columns:1fr}
}
@media (max-width:660px){
  .eo{font-size:16px}
  .eo-g3,.eo-g2,.eo-g4,.eo-g5,.eo-caps{grid-template-columns:1fr}
  .eo-stats{grid-template-columns:1fr 1fr}
  .eo-foot-top{grid-template-columns:1fr 1fr;gap:28px}
  .eo-util .eo-wrap{gap:14px;font-size:.75rem}
  .eo-util-r{gap:14px}
  .eo-sec{padding:60px 0}
  .eo-hero{padding:64px 0 72px}
  /* full-width buttons ONLY where they stack — never in the header row, which
     must stay on one line beside the logo and the burger. The hero CTAs stay
     side by side down to 340px (see below), so they are excluded here. */
  .eo-cta-row .eo-btn,.eo-form .eo-btn{width:100%}
  .eo-cta-row{flex-direction:column}
  .eo-logo img{width:142px}
  .eo-hdr .eo-wrap{gap:6px;padding:0 16px;min-height:66px}
  .eo-hdr-cta{gap:4px}
  .eo-hdr-cta .eo-btn{padding:8px 14px;font-size:.875rem}
  .eo-tab{font-size:.82rem;padding:9px 15px}
  .eo-panel{padding:15px}
  .eo-feed{max-height:84px}
  .eo-cbtn{padding:11px 16px}
}
/* very small phones (≤400px): the header row and the demo rows are the two
   places that can still push past the viewport edge. */
@media (max-width:400px){
  .eo-logo img{width:118px}
  .eo-hdr .eo-wrap{padding:0 12px}
  /* min-width:138px on the header CTA overflows a 320px viewport — release it */
  .eo-hdr-cta .eo-btn{min-width:0;padding:8px 11px;font-size:.8rem}
  .eo-burger{min-width:42px}
  .eo-row{flex-wrap:wrap;row-gap:4px}
  .eo-row b{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .eo-row .eo-r-r{margin-left:0}
  .eo-tab{width:100%}
}
@media (max-width:660px){
  /* five/six audience cards become a horizontal snap rail rather than a long stack */
  .eo-biz{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin-left:-16px;margin-right:-16px;padding:4px 16px 14px;
    scrollbar-width:thin;overscroll-behavior-x:contain}
  .eo-biz>*{scroll-snap-align:start}
  .eo-ops-grid{grid-template-columns:1fr 1fr}
  .eo-flow{gap:6px}
  .eo-flow button{font-size:.8rem;padding:9px 13px}
}
@media (prefers-reduced-motion:reduce){
  .eo *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}