/* =========================================================================
   S.A.M.S. Technologies — shared stylesheet
   Layout concept: "datasheet meets editorial" — a disciplined, hairline-ruled
   grid with mono-set spec labels and tabular stat figures, like a product
   datasheet, laid out with the whitespace and type hierarchy of an
   editorial site. The red/blue/green sensor-channel dot is the one
   recurring signature device, drawn from the SAMS mark.
   ========================================================================= */

/* Google Fonts are linked directly in each page's <head>, not @import'd here. */

:root{
  /* ---- color tokens (light) ---- */
  --ink:        #15191e;
  --ink-soft:   #4c545c;
  --ink-faint:  #868d93;
  --paper:      #eef5fb;
  --paper-raised:#ffffff;
  --paper-sunk: #dde9f3;
  --line:       #cfe1ec;
  --line-soft:  #e2edf5;
  --accent:     #0b6fa8;
  --accent-deep:#084d78;
  --accent-soft:#dcedf8;
  --accent-ink: #ffffff;
  --ch-r:       #d7483f;
  --ch-g:       #2a9458;
  --ch-b:       #1485c4;
  --warn-soft:  #fbe9e4;
  --ok-soft:    #e6f3ea;
  color-scheme: light;

  /* ---- type tokens ---- */
  --f-display: 'Archivo', 'Arial Narrow', sans-serif;
  --f-body:    'IBM Plex Sans', 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', 'Courier New', monospace;
  /* Calibri (the logo's own wordmark face) first, so it renders natively
     wherever installed; Carlito is its metric-compatible, open, Google
     Fonts-hosted match for everyone else. */
  --f-brand:   'Calibri', 'Carlito', 'Segoe UI', sans-serif;

  --maxw: 1160px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:        #eef0f2;
    --ink-soft:   #b7bec4;
    --ink-faint:  #868f97;
    --paper:      #14171a;
    --paper-raised:#1b1f22;
    --paper-sunk: #0f1214;
    --line:       #2a2f33;
    --line-soft:  #23282b;
    --accent:     #4ab0e8;
    --accent-deep:#8fd0f3;
    --accent-soft:#1c3340;
    --accent-ink: #0b1115;
    --ch-r:       #ea6b61;
    --ch-g:       #4fc37f;
    --ch-b:       #4ab0e8;
    --warn-soft:  #3a2522;
    --ok-soft:    #1c3326;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:        #eef0f2;
  --ink-soft:   #b7bec4;
  --ink-faint:  #868f97;
  --paper:      #14171a;
  --paper-raised:#1b1f22;
  --paper-sunk: #0f1214;
  --line:       #2a2f33;
  --line-soft:  #23282b;
  --accent:     #4ab0e8;
  --accent-deep:#8fd0f3;
  --accent-soft:#1c3340;
  --accent-ink: #0b1115;
  --ch-r:       #ea6b61;
  --ch-g:       #4fc37f;
  --ch-b:       #4ab0e8;
  --warn-soft:  #3a2522;
  --ok-soft:    #1c3326;
  color-scheme: dark;
}

/* ---- reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
img{ max-width:100%; display:block; }
[hidden]{ display:none!important; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; margin:0; text-wrap:balance; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }
::selection{ background:var(--accent); color:var(--accent-ink); }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important; scroll-behavior:auto!important; }
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---- layout helpers ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:4px; }
.band{ padding-block:clamp(56px,8vw,96px); }
.band-tight{ padding-block:clamp(36px,5vw,56px); }
.band-ink{ background:var(--ink); color:var(--paper); }
.band-raised{ background:var(--paper-raised); border-block:1px solid var(--line); }
.band-sunk{ background:var(--paper-sunk); }
.grid{ display:grid; gap:28px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.g6{ grid-template-columns:repeat(6,1fr); }
@media (max-width:900px){
  .g3,.g4{ grid-template-columns:repeat(2,1fr); }
  .g6{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .g2,.g3,.g4,.g6{ grid-template-columns:1fr; }
}
.min0{ min-width:0; }
.hairline{ border:none; border-top:1px solid var(--line); margin:0; }
.vhairline{ border-left:1px solid var(--line); }

/* ---- type scale ---- */
.display-xl{ font-size:clamp(2.4rem,5.2vw,4.1rem); line-height:1.02; letter-spacing:-0.02em; }
.display-l{ font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.07; }
.display-m{ font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.15; }
.display-s{ font-size:clamp(1.2rem,1.6vw,1.45rem); line-height:1.25; }
.lede{ font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.55; color:var(--ink-soft); max-width:62ch; }
.body-l{ font-size:1.08rem; line-height:1.65; color:var(--ink-soft); max-width:66ch; }
.fine{ font-size:0.82rem; color:var(--ink-faint); }
.mono{ font-family:var(--f-mono); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:0.76rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
}
.chip-dot{ display:inline-flex; gap:3px; flex:none; }
.chip-dot i{ width:6px; height:6px; border-radius:50%; display:block; }
.chip-dot i:nth-child(1){ background:var(--ch-r); }
.chip-dot i:nth-child(2){ background:var(--ch-b); }
.chip-dot i:nth-child(3){ background:var(--ch-g); }

.section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:40px; }
.section-head .display-l{ max-width:34ch; }

/* ---- nav ---- */
.site-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px; max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:1 1 auto; min-width:0; }
.brand img{ width:30px; height:30px; flex:none; }
.brand-word{
  font-family:var(--f-brand); font-weight:700; font-size:1.1rem; letter-spacing:0; color:var(--ink); line-height:1.1;
  /* lets the company name shrink gracefully (ellipsis) on narrow phones instead of forcing
     the header row to overflow horizontally and push the menu button off-screen */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  text-decoration:none; font-size:0.92rem; font-weight:500; color:var(--ink-soft);
  padding:9px 13px; border-radius:7px; transition:color .15s ease, background .15s ease;
  white-space:nowrap;
}
.nav-links a:hover{ color:var(--ink); background:var(--paper-sunk); }
.nav-links a.active{ color:var(--accent); font-weight:600; }
.nav-cta{ display:flex; align-items:center; gap:10px; flex:none; }
.cta-short{ display:none; }
.nav-toggle{
  display:none; flex:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper-raised); align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle svg{ width:18px; height:18px; }
@media (max-width:900px){
  .nav-links{
    position:fixed; top:var(--hdr-h,62px); left:0; right:0; z-index:49;
    /* explicit height (not inset's bottom:0) so this never collapses: a fixed element's
       height-via-bottom resolves against its CSS containing block, and .site-header's
       backdrop-filter makes it that containing block instead of the viewport. vh/dvh are
       viewport-relative regardless, so they sidestep that entirely. */
    height:calc(100vh - var(--hdr-h,62px));
    height:calc(100dvh - var(--hdr-h,62px));
    background:var(--paper); flex-direction:column; align-items:stretch;
    padding:14px max(16px,env(safe-area-inset-left,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right,0px));
    gap:2px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
    border-bottom:1px solid var(--line); overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ padding:13px 10px; font-size:1.02rem; border-bottom:1px solid var(--line-soft); border-radius:0; }
  .nav-toggle{ display:inline-flex; }
}
@media (max-width:480px){
  .cta-full{ display:none; }
  .cta-short{ display:inline; }
  .brand-word{ font-size:0.96rem; }
}
@media (max-width:360px){
  .brand-word{ font-size:0.86rem; }
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-body); font-weight:600; font-size:0.94rem;
  padding:12px 20px; border-radius:8px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; line-height:1.2; transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:var(--accent-deep); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost{ background:transparent; color:var(--ink); padding-left:4px; padding-right:4px; gap:6px; }
.btn-ghost:hover{ color:var(--accent); }
.btn-ghost svg{ transition:transform .15s ease; }
.btn-ghost:hover svg{ transform:translateX(3px); }
.btn-sm{ padding:9px 15px; font-size:0.86rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:0.55; cursor:not-allowed; }

/* ---- cards ---- */
.card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:14px;
  padding:26px; display:flex; flex-direction:column; gap:12px;
  transition:transform .22s cubic-bezier(.22,.7,.32,1), box-shadow .22s ease, border-color .22s ease;
}
@media (hover:hover){
  .card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -18px rgba(8,20,20,.28); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
}
.card-icon{
  width:50px; height:50px; border-radius:12px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.card-icon svg{ width:25px; height:25px; }
.card h3{ font-size:1.08rem; }
.card p{ color:var(--ink-soft); font-size:0.95rem; line-height:1.55; }
.card-link{ margin-top:auto; }

/* ---- reveal-card: icon + heading only by default, detail reveals on hover / tap ---- */
.reveal-card{ cursor:pointer; }
.reveal-card h3 ~ p, .reveal-card h3 ~ ul, .reveal-card h2 ~ p{
  max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height .38s cubic-bezier(.22,.7,.32,1), opacity .25s ease, margin-top .3s ease;
}
.reveal-card:hover h3 ~ p, .reveal-card:hover h3 ~ ul, .reveal-card:hover h2 ~ p,
.reveal-card.is-open h3 ~ p, .reveal-card.is-open h3 ~ ul, .reveal-card.is-open h2 ~ p{
  max-height:320px; opacity:1; margin-top:8px;
}

/* ---- reveal-wrap: a generic "show on hover/tap" wrapper for one explicit block ---- */
.reveal-wrap{ cursor:pointer; }
.reveal-wrap .more-detail{
  max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height .4s cubic-bezier(.22,.7,.32,1), opacity .25s ease, margin-top .3s ease;
}
.reveal-wrap:hover .more-detail, .reveal-wrap.is-open .more-detail{
  max-height:420px; opacity:1; margin-top:12px;
}
.reveal-hint{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--accent);
}
.reveal-wrap.is-open .reveal-hint, .reveal-wrap:hover .reveal-hint{ opacity:0.6; }
.reveal-hint svg{ width:13px; height:13px; transition:transform .25s ease; }
.reveal-wrap:hover .reveal-hint svg, .reveal-wrap.is-open .reveal-hint svg{ transform:rotate(180deg); }

/* ---- stat tiles ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.stat-tile{ background:var(--paper-raised); padding:26px 22px; display:flex; flex-direction:column; gap:8px; }
.stat-num{ font-family:var(--f-mono); font-weight:600; font-size:clamp(1.7rem,2.6vw,2.3rem); color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.stat-label{ font-size:0.86rem; color:var(--ink-soft); line-height:1.4; }
@media (max-width:900px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .stat-grid{ grid-template-columns:1fr; } }

/* ---- growth chart ---- */
.growth-chart{ max-width:46rem; }
.growth-bars{ display:flex; align-items:flex-end; gap:10px; height:120px; }
.growth-bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.growth-bar-fill{ width:100%; max-width:36px; height:var(--h); background:linear-gradient(180deg, var(--accent), var(--accent-deep)); border-radius:4px 4px 0 0; }
.growth-bar.is-end .growth-bar-fill{ background:linear-gradient(180deg, var(--ch-g), var(--accent-deep)); }
.growth-bar-tag{ font-family:var(--f-mono); font-size:0.72rem; font-weight:600; color:var(--ch-g); margin-bottom:6px; }
.growth-year-row{ display:flex; gap:10px; margin-top:8px; }
.growth-year{ flex:1; max-width:36px; margin-inline:auto; text-align:center; font-family:var(--f-mono); font-size:0.68rem; color:var(--ink-faint); }
@media (max-width:640px){ .growth-bars{ height:90px; } }

/* ---- timeline / process ---- */
.steps{ display:grid; gap:0; }
.step{ display:grid; grid-template-columns:52px 1fr; gap:18px; padding-block:22px; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step-num{ font-family:var(--f-mono); font-weight:600; color:var(--accent); font-size:1rem; }
.step h4{ font-size:1.02rem; margin-bottom:6px; }
.step p{ color:var(--ink-soft); font-size:0.95rem; max-width:60ch; }

/* ---- badges / pills ---- */
.pill{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:99px; border:1px solid var(--line); font-size:0.82rem; font-weight:500; color:var(--ink-soft); background:var(--paper-raised); }
.pill strong{ color:var(--ink); font-weight:700; }
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:4px 9px; border-radius:5px; font-weight:600; }

/* ---- image frame ---- */
.frame{ border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--paper-sunk); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.figure-caption{ display:flex; align-items:center; gap:8px; font-size:0.84rem; color:var(--ink-faint); margin-top:10px; }

/* ---- compare ---- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.compare figure{ margin:0; }
.compare figcaption{ font-size:0.84rem; color:var(--ink-faint); margin-top:9px; text-align:center; }
@media (max-width:640px){ .compare{ grid-template-columns:1fr; } }

/* ---- footer ---- */
.site-footer{ background:var(--ink); color:var(--paper); }
.site-footer a{ text-decoration:none; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; padding-block:56px 40px; }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ width:28px; height:28px; }
.footer-brand span{ font-family:var(--f-brand); font-weight:700; font-size:1.1rem; color:var(--paper); }
.footer-col h5{ font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; color:#8e96a0; margin-bottom:14px; font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:#c7ccd2; font-size:0.92rem; }
.footer-col a:hover{ color:var(--paper); }
.footer-bottom{ border-top:1px solid #2a2f35; padding-block:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:0.8rem; color:#848c95; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---- forms ---- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:0.85rem; font-weight:600; color:var(--ink); }
.field .req{ color:var(--ch-r); }
.field input, .field select, .field textarea{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:9px; padding:12px 13px;
  color:var(--ink); width:100%; font-size:0.96rem;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.field textarea{ resize:vertical; min-height:110px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.form-note{ font-size:0.84rem; color:var(--ink-faint); }
.form-status{ font-size:0.9rem; padding:11px 14px; border-radius:9px; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:var(--ok-soft); color:var(--ch-g); }
.form-status.err{ background:var(--warn-soft); color:var(--ch-r); }

/* ---- reveal ---- */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.in{ opacity:1; transform:none; }

  /* staggered card entrance inside any revealed grid/list */
  .reveal.in > .card, .reveal.in > a.card{ animation:cardRise .55s cubic-bezier(.22,.7,.32,1) backwards; }
  .reveal.in > .card:nth-child(1), .reveal.in > a.card:nth-child(1){ animation-delay:.02s; }
  .reveal.in > .card:nth-child(2), .reveal.in > a.card:nth-child(2){ animation-delay:.08s; }
  .reveal.in > .card:nth-child(3), .reveal.in > a.card:nth-child(3){ animation-delay:.14s; }
  .reveal.in > .card:nth-child(4), .reveal.in > a.card:nth-child(4){ animation-delay:.20s; }
  .reveal.in > .card:nth-child(5), .reveal.in > a.card:nth-child(5){ animation-delay:.26s; }
  .reveal.in > .card:nth-child(6), .reveal.in > a.card:nth-child(6){ animation-delay:.32s; }
}
@keyframes cardRise{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

/* ---- full-bleed hero image (homepage) — image only, text lives below, never over it ----
   aspect-ratio (not a vh-based min-height) so the same proportion of the photo is always
   shown — no matter the screen size or browser — instead of a different vh-driven slice
   being cropped in on short/mobile viewports vs tall/desktop ones. The ratio matches
   hero-main.jpg's own dimensions almost exactly, so there is effectively no cropping. */
.hero-full{ position:relative; width:100%; overflow:hidden; aspect-ratio:1672/941; }
.hero-full-media{ position:absolute; inset:0; z-index:0; }
.hero-full-media img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block; }
.hero-scan{
  position:absolute; left:0; right:0; height:2px; top:6%; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.9), var(--accent), transparent);
  box-shadow:0 0 18px 2px color-mix(in srgb, var(--accent) 55%, transparent);
  opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .hero-scan{ animation:heroScan 4.2s ease-in-out infinite; }
}
@keyframes heroScan{
  0%{ top:6%; opacity:0; } 8%{ opacity:.85; } 50%{ top:94%; opacity:.85; } 58%{ opacity:0; } 100%{ top:94%; opacity:0; }
}

/* ---- before/after compare slider (full-bleed, like the hero) ---- */
.compare-slider{
  position:relative; width:100%; aspect-ratio:83/35; max-height:82vh; overflow:hidden;
  background:#05070a; cursor:ew-resize; touch-action:pan-y;
}
.compare-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; pointer-events:none; -webkit-user-select:none; user-select:none;
}
.compare-before{ clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); }
.compare-tag{
  position:absolute; bottom:18px; z-index:2; pointer-events:none;
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  color:#fff; background:rgba(8,12,16,0.55); backdrop-filter:blur(4px);
  padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.18);
}
.compare-tag-left{ left:18px; }
.compare-tag-right{ right:18px; }
.compare-handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); z-index:3; pointer-events:none;
  width:0; transform:translateX(-50%);
}
.compare-handle::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
  background:rgba(255,255,255,0.85); box-shadow:0 0 10px rgba(0,0,0,0.35);
}
.compare-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(0,0,0,0.3);
}
.compare-grip svg{ width:20px; height:20px; }
.compare-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; z-index:4;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent;
}
.compare-range::-webkit-slider-thumb{ -webkit-appearance:none; width:100%; height:100%; background:transparent; }
.compare-range::-moz-range-thumb{ width:100%; height:100%; background:transparent; border:none; }
.compare-range::-moz-range-track{ background:transparent; border:none; }
@media (max-width:700px){
  .compare-grip{ width:36px; height:36px; }
}

/* ---- live detection box overlay, on top of the compare slider ----
   Each side of the slider gets its own clipped copy, sized to where the
   car actually sits in THAT photo, so the box only ever appears over
   whichever image (infrared or colour) is currently visible there.
   The infrared side renders in white/grey only — no colour, to match a
   true monochrome feed; the colour side uses the on-device-AI blue. ---- */
.detect-clip{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.detect-clip-before{ clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); --dc:rgba(255,255,255,0.95); }
.detect-clip-after{ clip-path:inset(0 0 0 var(--pos,50%)); --dc:#3fb7ff; }
.detect-box{
  position:absolute;
  left:var(--db-l); top:var(--db-t); width:var(--db-w); height:var(--db-h);
  border:1.5px solid var(--dc);
}
@media (prefers-reduced-motion: no-preference){
  .detect-box{ animation:detectPulse 2.4s ease-in-out infinite; }
}
@keyframes detectPulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--dc) 55%, transparent); }
  50%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--dc) 0%, transparent); }
}
.detect-label{
  position:absolute; left:-1.5px; top:-25px; z-index:1;
  font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase;
  color:#06141c; background:var(--dc); padding:3px 8px; border-radius:3px; white-space:nowrap;
}
.detect-corner{ position:absolute; width:12px; height:12px; border-color:var(--dc); }
.detect-corner.tl{ top:-1.5px; left:-1.5px; border-top:2px solid; border-left:2px solid; }
.detect-corner.tr{ top:-1.5px; right:-1.5px; border-top:2px solid; border-right:2px solid; }
.detect-corner.bl{ bottom:-1.5px; left:-1.5px; border-bottom:2px solid; border-left:2px solid; }
.detect-corner.br{ bottom:-1.5px; right:-1.5px; border-bottom:2px solid; border-right:2px solid; }
@media (max-width:700px){
  .detect-label{ font-size:0.56rem; padding:2px 6px; top:-21px; }
}

/* ---- credibility strip: substantial credential cards, not a thin footnote line ---- */
.trust-row{ display:flex; flex-wrap:wrap; align-items:stretch; gap:16px; }
.trust-plain{
  display:flex; align-items:flex-start; gap:14px; position:relative; padding:16px 18px; border-radius:14px;
  background:var(--paper-raised); border:1px solid var(--line); flex:1 1 260px; min-width:220px;
}
.trust-plain strong{ display:block; font-size:1.05rem; font-weight:700; color:var(--ink); line-height:1.3; }
.trust-plain span{ display:block; font-size:0.88rem; color:var(--ink-soft); line-height:1.4; margin-top:3px; }
.trust-icon{
  position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  color:var(--accent); border-radius:10px; background:color-mix(in srgb, currentColor 12%, transparent);
}
.trust-icon svg{ width:24px; height:24px; }
.trust-icon-r{ color:var(--ch-r); }
.trust-icon-b{ color:var(--ch-b); }
.trust-icon-g{ color:var(--ch-g); }
.trust-divider{ display:none; }
.pulse-badge::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:var(--accent-soft); opacity:0;
}
.pulse-badge{ z-index:0; }
.pulse-badge > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion: no-preference){
  .pulse-badge::before{ animation:trustBadgePulse 3.2s ease-in-out infinite; }
  .trust-row .trust-plain:nth-of-type(2)::before{ animation-delay:.35s; }
  .trust-row .trust-plain:nth-of-type(3)::before{ animation-delay:.7s; }
}
@keyframes trustBadgePulse{
  0%, 100%{ opacity:0; }
  50%{ opacity:0.65; }
}

/* ---- misc ---- */
.flex{ display:flex; }
.center{ align-items:center; }
.between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.wsep{ display:flex; flex-wrap:wrap; gap:10px 26px; }
.icon-row{ display:flex; align-items:center; gap:12px; }
.icon-row svg{ width:20px; height:20px; color:var(--accent); flex:none; }
.list-check{ display:flex; flex-direction:column; gap:12px; }
.list-check li{ display:flex; gap:11px; align-items:flex-start; font-size:0.97rem; color:var(--ink-soft); }
.list-check svg{ width:18px; height:18px; color:var(--ch-g); flex:none; margin-top:2px; }
.hero-cols{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; }
@media (max-width:900px){ .hero-cols{ grid-template-columns:1fr; } }
.backlink{ display:inline-flex; align-items:center; gap:7px; font-size:0.9rem; color:var(--ink-soft); text-decoration:none; }
.backlink:hover{ color:var(--accent); }
.article-body{ max-width:68ch; display:flex; flex-direction:column; gap:20px; font-size:1.04rem; line-height:1.75; color:var(--ink-soft); }
.article-body h2{ color:var(--ink); font-size:1.35rem; margin-top:10px; }
.article-body h3{ color:var(--ink); font-size:1.12rem; }
.article-body strong{ color:var(--ink); }
.article-meta{ display:flex; gap:16px; flex-wrap:wrap; color:var(--ink-faint); font-size:0.86rem; align-items:center; }
.insight-card{ display:flex; flex-direction:column; gap:12px; }
.insight-card .tag{ align-self:flex-start; }

/* ---- form dump (fallback copy-paste block) ---- */
.form-dump{ margin-top:14px; padding:14px; background:var(--paper-sunk); border:1px solid var(--line); border-radius:9px; font-family:var(--f-mono); font-size:0.82rem; white-space:pre-wrap; }

/* ---- capability / icon grid variants ---- */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cap-grid{ grid-template-columns:1fr; } }
.model-card{ display:flex; flex-direction:column; gap:14px; }
.model-card .best-for{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft); font-size:0.86rem; color:var(--ink-faint); }