/* ============================================================
   SYMIA — shared design backbone
   Sovereign digital infrastructure. IBM Carbon language:
   square corners, IBM blue, Plex type. Deep-navy sovereign base.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:wght@300;400;500&display=swap');

:root{
  --ink:#070d1c;          /* deep navy base            */
  --ink-1:#0a1226;        /* raised surface            */
  --ink-2:#0e1730;        /* card surface              */
  --ink-3:#13203f;        /* hover surface             */
  --line:#1d2a4a;         /* hairline on dark          */
  --line-2:#27365c;       /* stronger hairline         */
  --blue:#0f62fe;         /* IBM blue                  */
  --blue-h:#0353e9;       /* IBM blue hover            */
  --blue-2:#4589ff;       /* lighter blue              */
  --blue-3:#78a9ff;       /* light accent              */
  --blue-4:#a6c8ff;       /* faint accent              */
  --white:#ffffff;
  --paper:#f4f4f4;        /* Carbon gray-10 light bg   */
  --paper-2:#e8eaed;
  --paper-line:#d6d9de;
  --text:#f4f5f9;         /* primary on dark           */
  --dim:#9aa6c2;          /* muted on dark             */
  --dim-2:#7a86a3;        /* secondary muted on dark   */
  --dim-3:#5e6b8a;        /* faint on dark             */
  --ink-on-light:#0a1226; /* text on light             */
  --dim-on-light:#525a6b; /* muted on light            */
  --line-on-light:#d6d9de;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'IBM Plex Serif',Georgia,serif;
  --wrap:1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);
  font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--blue);color:#fff}

/* ---- layout ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;width:100%}
.section{padding:104px 0}
.section-sm{padding:72px 0}
.sec-dark{background:var(--ink);color:var(--text)}
.sec-ink1{background:var(--ink-1);color:var(--text)}
.sec-blue{background:var(--blue);color:#fff}
.sec-light{background:var(--white);color:var(--ink-on-light)}
.sec-paper{background:var(--paper);color:var(--ink-on-light)}
.divline{border-top:1px solid var(--line)}
.divline-l{border-top:1px solid var(--line-on-light)}

/* ---- type ---- */
.eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-3);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--blue);flex:none}
.eyebrow.on-light{color:var(--blue)}
.eyebrow.plain::before{display:none}
.display{font-weight:800;font-size:clamp(46px,6.6vw,90px);line-height:1.0;letter-spacing:-.025em;margin:0}
.h1{font-weight:700;font-size:clamp(36px,4.6vw,60px);line-height:1.04;letter-spacing:-.02em;margin:0}
.h2{font-weight:700;font-size:clamp(28px,3.2vw,44px);line-height:1.08;letter-spacing:-.015em;margin:0}
.h3{font-weight:600;font-size:clamp(21px,2vw,27px);line-height:1.15;letter-spacing:-.01em;margin:0}
.h4{font-weight:600;font-size:19px;line-height:1.25;margin:0}
.lead{font-weight:300;font-size:clamp(19px,1.55vw,23px);line-height:1.5;color:var(--dim)}
.lead.on-light{color:var(--dim-on-light)}
.body{font-size:17.5px;line-height:1.62;color:var(--dim)}
.body.on-light{color:var(--dim-on-light)}
.small{font-size:14.5px;line-height:1.6;color:var(--dim)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-3)}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif)}
.tnum{font-variant-numeric:tabular-nums}
.maxw-xl{max-width:1040px}.maxw-l{max-width:880px}.maxw-m{max-width:680px}.maxw-s{max-width:540px}
.dimspan{color:var(--dim-3)}              /* the Intercom 2-tone headline trick */
.dimspan-l{color:#a0a6b2}

/* ---- buttons (Carbon: square, icon-right) ---- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;
  font-family:var(--sans);font-size:16px;font-weight:400;line-height:1;cursor:pointer;
  padding:15px 16px;min-width:188px;border:1px solid transparent;border-radius:0;
  transition:background .12s ease,border-color .12s ease,color .12s ease;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-h)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--blue-2);color:#fff}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:var(--paper-2);border-color:var(--paper-2)}
.btn-ghost-l{background:transparent;color:var(--ink-on-light);border-color:var(--line-on-light)}
.btn-ghost-l:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{min-width:0;gap:14px;padding:11px 14px;font-size:14.5px}
.btn-sm svg{width:15px;height:15px}
.btnrow{display:flex;gap:1px;flex-wrap:wrap}

/* ---- small parts ---- */
.sq{width:10px;height:10px;background:var(--blue);display:inline-block;flex:none}
.sq-o{width:10px;height:10px;border:1.5px solid var(--blue);display:inline-block;flex:none}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:7px 12px}
.tag.on-light{color:var(--dim-on-light);border-color:var(--line-on-light)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.alink{display:inline-flex;align-items:center;gap:9px;color:var(--blue-3);font-size:15.5px;font-weight:500;
  border-bottom:1px solid transparent;transition:gap .15s ease,border-color .15s ease;padding-bottom:2px}
.alink:hover{gap:13px;border-color:var(--blue-3)}
.alink.on-light{color:var(--blue)}
.alink.on-light:hover{border-color:var(--blue)}

/* ---- trust strip ---- */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.trust-item{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.trust-item::before{content:"";width:7px;height:7px;background:var(--blue-2);flex:none}

/* ---- corner ticks (Intercom blue squares motif) ---- */
.ticks{position:relative}
.ticks::before,.ticks::after{content:"";position:absolute;top:0;width:9px;height:9px;background:var(--blue)}
.ticks::before{left:0}.ticks::after{right:0}

/* ---- cinematic full-bleed image band ---- */
.band{position:relative;min-height:480px;display:flex;align-items:flex-end;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band img.bandimg,.band video.bandimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.03);z-index:0}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,13,28,.94) 0%,rgba(7,13,28,.74) 38%,rgba(7,13,28,.34) 100%);z-index:1}
.band .band-in{position:relative;z-index:2;width:100%;padding:64px 0}
.band .band-ticks{position:absolute;top:18px;left:40px;right:40px;display:flex;justify-content:space-between;z-index:2}
.band .band-ticks span{width:9px;height:9px;background:var(--blue)}
@media(max-width:900px){.band{min-height:380px}.band .band-ticks{left:22px;right:22px}}

/* ---- cards ---- */
.card{background:var(--ink-2);border:1px solid var(--line);padding:36px}
.card-l{background:#fff;border:1px solid var(--line-on-light);padding:36px}
.grid{display:grid;gap:1px;background:var(--line)}
.grid > .cell{background:var(--ink);padding:38px}
.grid-l{display:grid;gap:1px;background:var(--line-on-light)}
.grid-l > .cell{background:#fff;padding:38px}

/* ---- responsive ---- */
@media(max-width:900px){
  .wrap{padding:0 22px}
  .section{padding:72px 0}
  .btn{min-width:0;flex:1 1 auto}
}

/* ============================================================
   LIGHT THEME — html.light flips the core tokens to a light
   theme (near-black text on white), plus targeted overrides for
   elements that hardcode #fff or rely on the dark base. Dark
   "telemetry" demo panels, the intro splash, and cinematic image
   bands intentionally stay dark.
   ============================================================ */
html.light{
  --ink:#ffffff;
  --ink-1:#f4f5f7;
  --ink-2:#ffffff;
  --ink-3:#eceef2;
  --line:#e3e6eb;
  --line-2:#cdd2da;
  --text:#0a1226;
  --dim:#4f5667;
  --dim-2:#5c6577;
  --dim-3:#8b93a3;
  --blue:#0a1226;
  --blue-h:#000000;
  --blue-2:#0a1226;
  --blue-3:#0a1226;
  --blue-4:#0a1226;
}
html.light body{background:var(--ink);color:var(--text)}
/* emphasis text that hardcodes #fff -> near-black on light */
html.light .logo,html.light .foot-brand .logo,
html.light .carname,html.light .cartab .tname,html.light .chap b,
html.light .tncell .tnn,html.light .badge .bt,html.light .drow b,
html.light .fnode .ft,html.light .pt .pname,html.light .hstat .n,
html.light .tcard .tn,html.light .proof .pn,html.light .megaitem .mt,
html.light .mlink,html.light .poweredby b,
html.light .fct,html.light .rtt,html.light .rtpills [class^="p"],html.light .rtpills [class*=" p"],
html.light .fcta .fct,html.light .rtcta .rtt,
html.light .elogo,html.light .crow.hit .cl,html.light .ecolname,html.light .ecoltot b,
html.light .mcell .mq,html.light .tier .trange,html.light .fun .fh,
html.light .segtab:hover,html.light .segtab.on,
html.light .gcrow b,html.light .oct,html.light .inflabel,html.light .ofinfo-t{color:var(--ink-on-light)}
/* hover / active states that turn text white */
html.light .rtpill:hover,html.light .enavlinks a:hover,html.light .enavact .gov:hover,
html.light .efoot .efcol a:hover,html.light .secchip:hover{color:var(--ink-on-light)}
/* hover / active states that turn text white */
html.light .navlink:hover,html.light .navlink.on,html.light .navtext:hover,
html.light .foot-col a:hover,html.light .topbar a:hover,
html.light .topx:hover,html.light .mlink.on{color:var(--ink-on-light)}
html.light .btn-ghost:hover{color:var(--blue);border-color:var(--blue)}
/* logos: white mark -> black; mono compliance marks -> dark */
html.light .logo img,html.light .foot-brand .logo img{filter:brightness(0)}
html.light .logomark{filter:brightness(0)}
/* neural hero mark: light gradient would vanish on white */
html.light .nstar{fill:#0a1226}
/* cinematic image bands stay dark — keep their text light */
html.light .band .display,html.light .band .h1,html.light .band .h2,
html.light .band .h3,html.light .band .lead,html.light .band .body{color:#fff}
html.light .band .eyebrow{color:#e3e6eb}
html.light .band .eyebrow::before{background:#e3e6eb}
/* form fields */
html.light .field input,html.light .field select,html.light .field textarea{color:var(--ink-on-light)}

/* ---- theme toggle button (footer) ---- */
.themebtn{width:40px;height:40px;border:1px solid var(--line-2);background:none;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--dim);border-radius:50%;transition:border-color .14s ease,color .14s ease}
.themebtn:hover{border-color:var(--blue-2);color:var(--text)}
.themebtn svg{width:18px;height:18px;display:block}
.themebtn .sun{display:none}
html.light .themebtn .moon{display:none}
html.light .themebtn .sun{display:block}