/* ==========================================================================
   Evidence website - SHARED CHROME (base + nav + footer + subpage hero).
   Linked by every page; the nav/footer markup is injected by site.js.
   Tokens from brand/elevate-tokens.css. Spacing on the 4px grid per the brand rule.
   ========================================================================== */
:root{--dur:.18s;}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font-body);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;line-height:1.5;font-variant-numeric:tabular-nums;}
a{color:inherit;text-decoration:none;}
/* site-wide overflow guard: pre-reveal translates and fixed layers must
   never widen the viewport. overflow-x:hidden is NOT enough on iOS - Safari
   still lets you PAN/drag to the overflow (Aaron could drag the page
   sideways) - 'clip' forbids horizontal document scrolling entirely.
   Set on html too: iOS pans the root scroller, and page stylesheets
   re-declare body overflow without knowing about clip. */
html{overflow-x:clip;}
body{overflow-x:hidden;overflow-x:clip;}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--space-md);width:100%;}

/* ---------- line wrapping: sensible breaks site-wide ----------
   balance headline lines (no lonely last words, even line lengths) and avoid body-copy
   orphans - automatic and fully responsive at every width. For an INTENTIONAL break at a
   specific point, use <br class="brk"> in the markup: it only breaks on desktop (>880px)
   so mobile keeps its natural, width-appropriate wrap. */
h1,h2,h3{text-wrap:balance;}
p,li{text-wrap:pretty;}
br.brk{display:none;}
@media(min-width:881px){br.brk{display:inline;}}

/* ---------- deck pages: flow at content height; full-screen is opt-in ----------
   Sections sit at their own (content) height with their own padding, so static sections are
   close together - no screenful of empty space between them. A section that hosts a full-screen
   moment (hero, big canvas/interactive, a deliberately isolated statement) adds .deck-full to
   fill the viewport. Arrow / Page keys still step section-to-section; data-stops sections
   (scroll takeovers) keep their own height. */
body.deck main > section.deck-full{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;}

/* ---------- page closer: room before the pre-footer separator ----------
   Every page's last <main> child is its closer section (verified across all
   pages 2026-07); give it a uniform 120px bottom. This (0,1,2) selector
   outranks the page-level closer rules (all <= (0,1,1)), so it also
   normalizes the product pages' generic 128px section bottoms to 120px. */
main > section:last-child{padding-bottom:120px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-size:15px;font-weight:600;padding:12px 20px;border:0;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:background var(--dur) ease, transform .15s ease;}
.btn--primary{background:var(--slate-950);color:#fff;}
.btn--primary:hover{background:var(--slate-800);}
.btn--tertiary{background:transparent;color:var(--ink);}
.btn--tertiary:hover{background:var(--fill-2);}
.btn--lg{font-size:17px;padding:16px 28px;}

/* ---------- foil link underline (site-wide; injected by site.js) ----------
   The gallery's "Link · Foil underline" specimen (.cg-link), shipped: text
   keeps its own color, a 2px foil rule (.hl--rule, silver at rest) hangs 3px
   below the text box and wipes in on hover/focus. The wipe is a CURTAIN -
   the overflow-hidden reel translates -100%->0 while the rule inside
   counter-translates +100%->0 with the same easing, so the rule holds its
   natural full-size box the whole time (never scaled, never resized, never
   re-rastered) and the foil sweeps in left-to-right. Rest state is opacity 0
   on the wrapper: the engine parks hidden rules (no animation-budget cost).
   .fl__t wraps pure-text links (rule = exact text width, anchor padding
   stays outside); .fl-host marks tight icon rows ("Explore Scan ->"). */
.fl__t{position:relative;display:inline-block;}
/* the rule must always be exactly as long as the link's content, never the
   row's stretched box (Aaron, 2026-07-21): a go-row that is a flex child
   stretches to the card's width by default - hug it instead. align-self is
   inert outside flex parents; fit-content hugs in block flow too. */
.fl-host{position:relative;align-self:flex-start;width:fit-content;}
.fl__rulew{position:absolute;left:0;right:0;bottom:-3px;height:2px;opacity:0;pointer-events:none;transition:opacity .22s cubic-bezier(.45,0,.25,1);}
.fl__reel{display:block;height:100%;overflow:hidden;transform:translateX(-100%);transition:transform .3s cubic-bezier(.45,0,.25,1);}
.fl__reel .hl.fl__rule,
.fl__reel .hl.fl__rule.hl-gl{display:block;width:100%;height:100%;transform:translateX(100%);transition:transform .3s cubic-bezier(.45,0,.25,1);}
.fl-scope:hover .fl__rulew,
.fl-scope:focus-visible .fl__rulew{opacity:1;}
.fl-scope:hover .fl__reel,
.fl-scope:focus-visible .fl__reel{transform:translateX(0);}
.fl-scope:hover .fl__reel .hl.fl__rule,
.fl-scope:focus-visible .fl__reel .hl.fl__rule{transform:translateX(0);}
/* reduced motion: no wipe - the underline appears instantly */
@media(prefers-reduced-motion:reduce){
  .fl__rulew,.fl__reel,.fl__reel .hl.fl__rule{transition:none;}
}
/* legacy link chrome steps aside - the foil wipe is THE hover effect.
   (a.fl-scope:hover = (0,2,1): outranks .stub-link / .stub-cta__link /
   .warr-closer__link underline+hover rules regardless of file order) */
a.fl-scope,a.fl-scope:hover{text-decoration:none;}
.fl-scope .home-link,.fl-scope .home-link:hover,
a.home-link.fl-scope,a.home-link.fl-scope:hover{border-bottom-color:transparent;}
.stub-link.fl-scope:hover{color:var(--slate-950);}

/* ---------- nav ---------- */
/* ---------- adaptive nav: NO bar - the chrome recolors to the surface beneath it ----------
   site.js watches the [data-navtheme] surface under the bar each frame and sets
   data-navtone here. MONOCHROME: the tone system reduces to exactly TWO treatments -
   ink chrome on light surfaces (the defaults below) and light chrome on dark surfaces.
   The attribute API is unchanged: every legacy tone value keeps working - "forest" and
   any "*-dark" value maps to the dark treatment; every other value (lime, lemon,
   blueberry, tangerine, grapefruit, ...) falls through to the ink defaults. */
/* the bar rides ABOVE everything (fixed heroes, globe layers, ribbons) and
   stays fully transparent - the page shows through between the items */
.nav{position:sticky;top:0;z-index:900;background:transparent;transition:transform .3s var(--ease-silk);
  --nav-ink:var(--slate-950);--nav-logo:var(--slate-950);--nav-soft:var(--fill-2);--nav-btn-bg:var(--slate-950);--nav-btn-ink:#fff;--nav-btn-bg-hover:var(--slate-800);}
/* the slight nav background: always the color of the surface it sits on
   (site.js samples it into --nav-bg each frame), fading 100% -> 0% so the
   bar never has a hard bottom edge. Painted by a ::before that runs 150%
   of the bar's height, so the fade tail extends past the content. */
.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:150%;
  background:linear-gradient(to bottom,var(--nav-bg,transparent) 0%,transparent 100%);
  pointer-events:none;z-index:-1;
}
.nav[data-navtone="forest"],
.nav[data-navtone$="-dark"]{--nav-ink:#fff;--nav-logo:#fff;--nav-soft:rgba(255,255,255,0.14);--nav-btn-bg:#fff;--nav-btn-ink:var(--slate-950);--nav-btn-bg-hover:var(--slate-100);}
.nav--hidden{transform:translateY(-100%);}
.nav__in{max-width:1280px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:28px;background:transparent;}
.nav__logo{position:relative;display:flex;align-items:center;color:var(--nav-logo);transition:color .25s ease;}
.nav__logo-mark{display:flex;transition:opacity .25s var(--ease-silk),transform .25s var(--ease-silk);}
.nav__logo-mark svg{height:26px;width:auto;display:block;}
/* away from home, hovering the BAR morphs the mark into a house - "this takes you home" */
.nav__logo-home{position:absolute;left:50%;top:50%;width:24px;height:24px;opacity:0;transform:translate(-50%,-50%) scale(0.6);transition:opacity .25s var(--ease-silk),transform .25s var(--ease-silk);}
.nav--away:hover .nav__logo-mark{opacity:0;transform:scale(0.6);}
.nav--away:hover .nav__logo-home{opacity:1;transform:translate(-50%,-50%) scale(1);}
@media(prefers-reduced-motion:reduce){.nav__logo-mark,.nav__logo-home{transition:none;}}
.nav__menu{display:flex;align-items:center;gap:8px;}
.nav__item{position:relative;}
.nav__link{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--nav-ink);padding:8px 16px;border-radius:var(--radius-pill);cursor:pointer;transition:color .25s ease,background .25s ease;}
.nav__link:hover{background:var(--nav-soft);}
/* nav ANCHORS (Warranty, Log in) trade the pill-fill hover for the foil
   underline; the dropdown BUTTONS (Products/Solutions/Resources) keep it */
a.nav__link:hover{background:transparent;}
.nav__chev{width:15px;height:15px;display:inline-flex;transition:transform var(--dur) ease;}
.nav__chev svg{width:15px;height:15px;}
.nav__item.is-open .nav__chev{transform:rotate(180deg);}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.nav__login{font-size:15px;font-weight:600;color:var(--nav-ink);padding:8px 16px;border-radius:var(--radius-pill);transition:color .25s ease,background .25s ease;}
/* (no fill on hover - the foil underline is the hover effect) */
.nav .btn--primary{background:var(--nav-btn-bg);color:var(--nav-btn-ink);transition:background .25s ease,color .25s ease,transform .15s ease;}
/* the tone rule above outranks the global .btn--primary:hover, so the nav button carries its
   own hover step; tones without a token hover pairing fall back to their resting fill */
.nav .btn--primary:hover{background:var(--nav-btn-bg-hover,var(--nav-btn-bg));}

/* mega-menus */
.mega{position:absolute;top:calc(100% + 12px);left:0;background:#fff;border-radius:var(--radius-card);padding:16px;box-shadow:0 18px 50px rgba(15,23,42,0.13);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--dur) ease, transform var(--dur) ease, visibility var(--dur);z-index:60;}
.nav__item.is-open .mega{opacity:1;visibility:visible;transform:none;}
.mega--products{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:620px;}
.ptile{display:flex;gap:16px;align-items:flex-start;padding:16px;border-radius:var(--radius-input);transition:background var(--dur) ease;}
.ptile:hover{background:var(--fill-1);}
/* MONOCHROME: all product icon chips share the one slate treatment - the legacy
   .ptile__ic--a/--b/--c/--d classes (injected by site.js) remain in the markup
   but no longer carry per-product colors. */
.ptile__ic{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--slate-100);color:var(--slate-950);}
.ptile__ic svg{width:16px;height:16px;}
.ptile__b{display:flex;flex-direction:column;gap:4px;}
.ptile__t{font-size:16px;font-weight:700;color:var(--ink);font-family:var(--font-display);letter-spacing:-.01em;}
.ptile__d{font-size:14px;color:var(--ink);line-height:1.4;}
.mega--res,.mega--sol{display:flex;flex-direction:column;gap:4px;width:380px;}
.rrow{display:flex;gap:16px;align-items:flex-start;padding:16px;border-radius:var(--radius-input);transition:background var(--dur) ease;}
.rrow:hover{background:var(--fill-1);}
.rrow__ic{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--slate-100);color:var(--slate-950);}   /* matches .ptile__ic (Aaron: fit to the new icon style, no holo) */
.rrow__ic svg{width:28px;height:28px;}   /* optically matches the 28px foil icons in the product tiles */
.rrow__b{display:flex;flex-direction:column;gap:4px;}
.rrow__t{font-size:15px;font-weight:700;color:var(--ink);}
.rrow__d{font-size:14px;color:var(--ink);line-height:1.4;}
/* ---------- mobile navigation (<=880px) ----------
   The bar collapses to logo + burger (Log in and the recurring Free demo
   pill both live in the drawer - Aaron 2026-07-23). The drawer slides in
   from the right on the silky curve with a dimming backdrop; it hides via
   transform+visibility (never display:none) so the foil product icons
   inside keep their layout and boot per the anti-flash law. */
@media(max-width:880px){
  .nav__menu{display:none;}
  .nav__right .nav__login,
  .nav__right .btn{display:none;}
}
/* while the drawer is open (html.nav-drawer-lock) the burger is GONE -
   the drawer's X is the one and only control, so the old double-X /
   bounce choreography is impossible at every point of the transition */
html.nav-drawer-lock .nav__burger{opacity:0;pointer-events:none;}
.nav__burger{
  display:none;position:relative;width:44px;height:44px;
  transition:opacity .18s ease;
  border:0;background:transparent;border-radius:var(--radius-pill);
  cursor:pointer;padding:0;
}
@media(max-width:880px){.nav__burger{display:inline-block;}}
.nav__burger span{
  position:absolute;left:11px;right:11px;height:2px;border-radius:2px;
  background:var(--nav-ink,var(--ink));
  transition:transform .38s cubic-bezier(.16,1,.3,1),
             top .38s cubic-bezier(.16,1,.3,1),opacity .22s ease;
}
.nav__burger span:nth-child(1){top:15px;}
.nav__burger span:nth-child(2){top:21px;}
.nav__burger span:nth-child(3){top:27px;}
/* the burger never morphs to an X anymore - it hides while the drawer
   is open and the drawer's X is the single control (Aaron) */

/* z 950 puts the drawer above the sticky nav (z 900) - the bar's gradient
   and the morphed burger sit UNDER the open panel, so there is exactly one
   X on screen; overflow:hidden clips the parked panel so iOS never expands
   the layout viewport for the off-screen 103% translate (Aaron's phone:
   the whole site rendered narrow). */
.nav-drawer{position:fixed;inset:0;z-index:950;pointer-events:none;overflow:hidden;}
.nav-drawer__backdrop{
  position:absolute;inset:0;background:rgba(2,6,23,0.42);
  opacity:0;transition:opacity .4s ease;
}
/* the ANIMATED panel is never the SCROLLER: iOS composites a transforming
   scrollable at the wrong position and snaps it at animation end (Aaron's
   overshoot-then-jump). The panel is a clean will-changed layer; the inner
   .nav-drawer__scroll owns the scrolling and the column layout. */
.nav-drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(400px,88vw);
  background:#fff;overflow:hidden;will-change:transform;
  transform:translateX(103%);visibility:hidden;
  transition:transform .44s cubic-bezier(.22,.85,.3,1),visibility .44s;
}
.nav-drawer__scroll{
  height:100%;overflow-y:auto;display:flex;flex-direction:column;
  padding:14px 18px calc(20px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;
}
.nav-drawer.open{pointer-events:auto;}
.nav-drawer.open .nav-drawer__backdrop{opacity:1;}
.nav-drawer.open .nav-drawer__panel{transform:none;visibility:visible;}
html.nav-drawer-lock{overflow:hidden;}
.nav-drawer__head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px;}
.nav-drawer__mark svg{width:30px;height:25px;color:var(--ink);display:block;}
.nav-drawer__close{
  width:44px;height:44px;border:0;background:transparent;border-radius:var(--radius-pill);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);
}
.nav-drawer__close svg{width:24px;height:24px;}
.nav-drawer__lab{font-size:13px;font-weight:700;color:var(--slate-500,#64748b);margin:16px 6px 4px;}
.nav-drawer__foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:24px;}
.nav-drawer__login{text-align:center;}
.nav-drawer__demo{width:100%;text-align:center;}
/* cascade: items rise in one after another as the drawer lands */
.nav-drawer__panel .ptile,
.nav-drawer__panel .rrow,
.nav-drawer__lab,
.nav-drawer__foot{
  opacity:0;transform:translateY(14px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.nav-drawer.open .nav-drawer__panel .ptile,
.nav-drawer.open .nav-drawer__panel .rrow,
.nav-drawer.open .nav-drawer__lab,
.nav-drawer.open .nav-drawer__foot{
  opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * 26ms + 120ms);
}
@media(prefers-reduced-motion:reduce){
  .nav__burger span,.nav-drawer__backdrop,.nav-drawer__panel,
  .nav-drawer__panel .ptile,.nav-drawer__panel .rrow,
  .nav-drawer__lab,.nav-drawer__foot{transition:none;}
  .nav-drawer__panel .ptile,.nav-drawer__panel .rrow,
  .nav-drawer__lab,.nav-drawer__foot{opacity:1;transform:none;}
}

/* ---------- footer ---------- */
/* the applied stripe (injected by site.js immediately before #site-foot;
   foil styling lives in holo-fallback.css) sits FLUSH between the page's last
   section and the footer - no white gap on either side (Aaron) */
.holo-hr{margin-top:0;}
.holo-hr + .foot{margin-top:0;}
/* the laminate separator's pattern sheets, re-tiled for a page-wide 16px
   stripe (ported from the gallery's .cg-lam-stripe rules; the .hl-gl compound
   keeps the same-specificity tie after the engine upgrade). Guilloché far
   below native scale = banknote fine print; microtext at native tile scale
   (center/cover on a 90:1 box would crop one giant glyph slice). */
.holo-hr .hl--pat-guilloche,
.holo-hr .hl--pat-guilloche.hl-gl{
  -webkit-mask-size:180px auto;mask-size:180px auto;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:center;mask-position:center;
}
.holo-hr .hl--pat-micro,
.holo-hr .hl--pat-micro.hl-gl{
  -webkit-mask-size:200px auto;mask-size:200px auto;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:center;mask-position:center;
}
.foot{background:var(--slate-950);color:#fff;padding:var(--space-2xl) 0 var(--space-lg);margin-top:var(--space-2xl);position:relative;z-index:1;}
.foot__in{max-width:1200px;margin:0 auto;padding:0 var(--space-md);display:grid;grid-template-columns:1.2fr 2.4fr;gap:var(--space-xl);align-items:start;}
@media(max-width:880px){.foot__in{grid-template-columns:1fr;gap:var(--space-lg);}}
.foot__mark{display:block;color:#fff;margin-bottom:16px;}
.foot__mark svg{height:38px;width:auto;display:block;}
/* the three-word signature: plain white stacked display lines, landing one
   by one (site.js). The steel foil treatment was retired 2026-07-21 (Aaron);
   width:fit-content keeps each line's box hugging its text, flush-left with
   the logo, exactly where the steel lines sat. */
.foot__tag{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.45;color:#fff;margin:0;letter-spacing:-0.01em;}
.foot__tag span{display:block;width:fit-content;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-silk),transform .6s var(--ease-silk);}
.foot__tag span.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.foot__tag span{opacity:1;transform:none;transition:none;}}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:680px){.foot__cols{grid-template-columns:repeat(2,1fr);}}
/* footer copy: pure white on the dark chrome (no grey copy anywhere -
   Aaron, 2026-07-21); borders keep their translucent values */
.foot__col h4{font-size:14px;font-weight:700;color:#fff;margin:0 0 16px;}
.foot__col a{display:block;font-size:15px;color:#fff;padding:8px 0;}
.foot__legal{max-width:1200px;margin:var(--space-xl) auto 0;padding:var(--space-md) var(--space-md) 0;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,0.12);font-size:14px;color:#fff;}

/* ---------- fab tooltips (palette brush + comment bubble) ---------- */
[data-fab-tip]{position:relative;}
[data-fab-tip]::after{content:attr(data-fab-tip);position:absolute;right:56px;top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;font-family:var(--font-body);font-size:14px;font-weight:600;padding:4px 12px;border-radius:var(--radius-pill);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;}
[data-fab-tip]:hover::after{opacity:1;}

/* ---------- deck-scroll: the deck's thin progress line (injected by deck-scroll.js) ----------
   MONOCHROME: ink on light shells, white on dark shells - it follows the concept
   system automatically by reading the page's own ink (--page-ink, concepts.css). */
.scroll-progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--page-ink,var(--slate-950));z-index:60;pointer-events:none;}

/* ---------- subpage hero scaffold (build each page out in its own [slug].css) ---------- */
.sub{min-height:72vh;display:flex;align-items:center;}
.sub__hero{max-width:1200px;margin:0 auto;padding:96px 24px;text-align:center;}
.sub__h{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,7vw,88px);line-height:1.04;letter-spacing:-0.03em;color:var(--ink);margin:0;}
.sub__lead{font-size:22px;line-height:1.5;color:var(--ink);max-width:42ch;margin:24px auto 32px;}

/* ---------- the arrow-reveal closer ----------
   The gallery's "CTA · Arrow reveal + stretch", shipped site-wide as every
   page's closing Request-a-demo (2026-07-21, Aaron). Solid pill, no border,
   nothing at rest; hover stretches the RIGHT side open and the foil-line
   arrow (the nav product-icon treatment, icon-arrow mask) rides out with the
   opening edge. Anti-flash contract: the foil icon keeps a FIXED 22px box
   from page load - absolutely positioned, never display:none - so its canvas
   boots once; the reveal is clip (overflow) + opacity on the slot wrapper
   only, and the slot width is the single stretched thing. All current
   closers sit on dark bands -> the --paper twin; --ink is the light-band
   twin. data-no-underline on the anchors keeps the link-underline decorator
   away. */
.btn-arrow{gap:0;font-size:17px;font-weight:600;line-height:1;padding:18px 36px;}   /* gap:0 - the gallery bakes its 12px label-arrow gap INSIDE the slot; .btn's flex gap would add a phantom 8px on top */
.btn-arrow--ink{background:var(--slate-900);color:#fff;}
.btn-arrow--paper{background:#fff;color:var(--slate-900);}
.btn-arrow__slot{
  position:relative;display:inline-block;
  height:22px;width:0;overflow:hidden;opacity:0;
  transition:width .38s cubic-bezier(.45,0,.25,1),opacity .3s cubic-bezier(.45,0,.25,1);
}
.btn-arrow:hover .btn-arrow__slot,
.btn-arrow:focus-visible .btn-arrow__slot{width:34px;opacity:1;}
.hl.btn-arrow__i,
.hl.btn-arrow__i.hl-gl{position:absolute;right:0;top:0;width:22px;height:22px;}
@media(prefers-reduced-motion:reduce){
  .btn-arrow .btn-arrow__slot{width:34px;opacity:1;transition:none;}
}

/* lucide line icons site-wide: 1.5 stroke (2026-07-22, Aaron - the stock
   2 looked puffy next to the thinned foil icon masks) */
svg.lucide{stroke-width:1.5;}

/* ---------- the LANDING ENTRANCE (site-wide) ----------
   Every page arrives from blurred-invisible to sharp-full: the nav fades
   in AS ONE (the per-item cascade was lovely once but too much on every
   navigation - Aaron), and each page's hero takes the same long breath
   as the home hero. backwards fill holds things hidden through the
   delays; reduced motion skips the show. */
@keyframes introBlur{
  from{opacity:0;filter:blur(14px);}
  to{opacity:1;filter:blur(0);}
}
/* HOMEPAGE ONLY (Aaron 2026-07-24): the entrance stays the front door's
   moment; every other page renders instantly. */
[data-holo-page="home"] .nav__in{animation:introBlur .6s var(--ease-silk) .08s backwards;}
[data-holo-page="home"] .home-hero__copy{animation:introBlur 1.16s var(--ease-silk) .08s backwards;}
@media(prefers-reduced-motion:reduce){
  [data-holo-page="home"] .nav__in,
  [data-holo-page="home"] .home-hero__copy{animation:none;}
}

/* ---------- FIRE in-context help ---------- */
.fire-term{
  text-decoration:underline dotted;
  text-decoration-thickness:from-font;
  text-decoration-color:color-mix(in srgb,currentColor 50%,transparent);
  text-underline-offset:0.16em;
  cursor:help;
}
.fire-pop{
  position:fixed;z-index:1200;max-width:320px;
  background:var(--slate-950);color:#fff;
  border:1px solid color-mix(in srgb,#fff 18%,transparent);   /* keeps its edge on dark bands */
  font-family:var(--font-body);font-size:13.5px;font-weight:400;line-height:1.55;
  letter-spacing:0;text-align:left;white-space:normal;text-transform:none;
  padding:14px 16px;border-radius:12px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease-silk),visibility .18s;
}
.fire-pop.on{opacity:1;visibility:visible;}
@media(prefers-reduced-motion:reduce){.fire-pop{transition:none;}}

/* EV-FOOTER-GRID */
@media(min-width:981px){.foot__in{grid-template-columns:1fr 3.1fr;}}
.foot__cols{grid-template-columns:repeat(5,minmax(0,1fr));}
@media(max-width:980px){.foot__cols{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:680px){.foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));}}
.foot__legal{justify-content:flex-start;}

/* EV-PRODUCT-GLYPHS */
.hl--icon-ev-surface{-webkit-mask:url('/assets/glyphs/surface.svg') center/contain no-repeat;mask:url('/assets/glyphs/surface.svg') center/contain no-repeat;}
.hl--icon-ev-scan{-webkit-mask:url('/assets/glyphs/scan.svg') center/contain no-repeat;mask:url('/assets/glyphs/scan.svg') center/contain no-repeat;}
.hl--icon-ev-reporting{-webkit-mask:url('/assets/glyphs/reporting.svg') center/contain no-repeat;mask:url('/assets/glyphs/reporting.svg') center/contain no-repeat;}
.hl--icon-ev-warranty{-webkit-mask:url('/assets/glyphs/warranty.svg') center/contain no-repeat;mask:url('/assets/glyphs/warranty.svg') center/contain no-repeat;}
.hl--icon-ev-platform{-webkit-mask:url('/assets/glyphs/platform-1.svg') center/contain no-repeat;mask:url('/assets/glyphs/platform-1.svg') center/contain no-repeat;}
/* EV-NAV-TYPE */
.nav__link{font-size:clamp(0.875rem,0.4vw + 0.75rem,1rem);font-weight:500;line-height:1;}
.mega .rrow{gap:0;}
.ptile__t,.rrow__t{line-height:1.2;}
.ptile__b,.rrow__b{gap:1px;}
.nav::before{display:none !important;background:none !important;}
#site-nav,.nav{--nav-bg:transparent !important;background:transparent !important;}
/* EV-PRODUCTS-MEGA */
.mega--products{display:block;width:640px;}
.ptile-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ptile--plat{padding:14px 16px;}
.mega__rule{height:1px;background:var(--hairline,#E2E8F0);margin:6px 12px 8px;}
.mega--products .ptile__ic{background:none;border-radius:0;}
.nav-drawer .ptile__ic{background:none;border-radius:0;}
.ptile-plate{background:linear-gradient(180deg,#F8FAFC,#F1F5F9);border-radius:14px;padding:2px;}
.mega--products .pglyph,.nav-drawer .pglyph{display:block;width:28px;height:28px;background:currentColor;}
.mega--products .hl.ev-foiltext,.nav-drawer .hl.ev-foiltext{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;display:inline-block;}
.mega--products .hl.ev-foiltext:not(.hl-gl),.nav-drawer .hl.ev-foiltext:not(.hl-gl){color:inherit;}
/* EV-MEGA-HOVER */
.mega::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px;}
#site-nav,#site-nav *,.nav,.nav__in,.nav__menu,.nav__right{cursor:pointer;}
.mega,.mega *,.mega::before{cursor:pointer;}
.nav-drawer__panel,.nav-drawer__panel *{cursor:pointer;}
/* EV-PRODUCT-SHOTS */
.ev-hasshot{position:relative;overflow:hidden;}
.ev-hasshot>.ev-prodshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;z-index:2;}
.ev-hasshot>:not(.ev-prodshot){visibility:hidden;}
.ev-hasshot--open{overflow:visible;background:transparent !important;border:none !important;box-shadow:none !important;}
.ev-hasshot--open>.ev-prodshot{border-radius:10px;box-shadow:0 18px 44px rgba(2,6,23,0.20),0 3px 10px rgba(2,6,23,0.10);}
.ev-hasshot>.ev-prodshot.ev-prodshot--contain{object-fit:contain;object-position:center;}
.ev-hasshot--open>.ev-prodshot--contain{border-radius:0;box-shadow:none;filter:drop-shadow(0 16px 32px rgba(2,6,23,0.20)) drop-shadow(0 3px 8px rgba(2,6,23,0.10));}
.ev-shot-none{display:none !important;}
[class*="__grid"]:has(>.ev-shot-none),[class*="__grid"]:has(.ev-shot-none){grid-template-columns:1fr !important;}
.sfstory__in:has(.ev-shot-none){grid-template-columns:1fr !important;}
article:has(.ev-row-gone),[class*="__card"]:has(.ev-row-gone){display:none !important;}
section:has(.ev-sec-gone){display:none !important;}
.ev-shot-logos{position:relative;background:transparent !important;border:none !important;box-shadow:none !important;}
.ev-shot-logos>:not(.ev-prodlogos){visibility:hidden;}
.ev-prodlogos{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:64px;flex-wrap:wrap;}
.ev-prodlogos span{display:flex;align-items:center;gap:13px;}
.ev-prodlogos img{width:auto !important;max-width:none !important;display:block;}
.ev-logo-splunk img{height:40px !important;}
.ev-logo-grafana img{height:54px !important;}
.ev-prodlogos em{font-style:normal;font-weight:600;font-size:30px;letter-spacing:-0.02em;color:#0F172A;}
.ev-shot-sym{position:relative;background:transparent !important;border:none !important;box-shadow:none !important;}
.ev-shot-sym>:not(.ev-prodsym){visibility:hidden;}
.ev-shot-sym>.ev-prodsym{visibility:visible;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display,Inter);font-weight:700;font-size:clamp(110px,11vw,190px) !important;line-height:1;color:#E6EDF5;}
/* EV-LAMINATE-WORDS */
.holo-hr:not(.sfmap__hr) .hl--pat-micro,
.holo-hr:not(.sfmap__hr) .hl--pat-micro.hl-gl{
  -webkit-mask-position:center -1px;mask-position:center -1px;
}