/* ============================================================================
   TenEightOne OP — Enterprise Operational Intelligence Design System
   Single shared stylesheet. All marketing pages import this.
   Token-driven: every color flows through a CSS variable so a future "lifted
   surface" mode (DEC6) is a small override block, not a rewrite.
   Idiom: Bloomberg Terminal / Palantir Gotham / Datadog. No glassmorphism,
   no gradients, no glows, no oversized cards. Functional over decorative.
   ============================================================================ */

:root{
  /* Surfaces — deep charcoal → slate, layered for depth without glow */
  --bg-0:#0B0F17;   /* shell / deepest */
  --bg-1:#111827;   /* primary panel */
  --bg-2:#1F2937;   /* raised panel / row hover */
  --bg-3:#273141;   /* header strips, input wells */
  --line:#2D3748;   /* hairline border */
  --line-2:#3A4658; /* stronger divider */

  /* Text */
  --ink-0:#F3F6FB;  /* primary */
  --ink-1:#AEB9C9;  /* secondary */
  --ink-2:#6B7689;  /* tertiary / labels */
  --ink-3:#4A5365;  /* faint */

  /* Accent — cyan, only for active states + intelligence indicators */
  --cyan:#22D3EE;
  --cyan-ink:#06222B;            /* text on cyan */
  --cyan-dim:rgba(34,211,238,0.12);
  --cyan-line:rgba(34,211,238,0.35);

  /* Semantic severity */
  --ok:#2DD4A7;     --ok-dim:rgba(45,212,167,0.12);   --ok-line:rgba(45,212,167,0.40);
  --warn:#F2B33D;   --warn-dim:rgba(242,179,61,0.12); --warn-line:rgba(242,179,61,0.40);
  --crit:#F2553D;   --crit-dim:rgba(242,85,61,0.12);  --crit-line:rgba(242,85,61,0.40);
  --info:#5B8DEF;   --info-dim:rgba(91,141,239,0.12); --info-line:rgba(91,141,239,0.40);

  --r:3px; --r-2:5px;
  --maxw:1180px;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{background:var(--bg-0);color:var(--ink-0);font-family:var(--font-sans);font-size:14px;line-height:1.5;}
a{color:inherit;text-decoration:none;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

/* Skip link (accessibility — retained from prior work) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--cyan);color:var(--cyan-ink);padding:10px 18px;border-radius:0 0 var(--r) 0;font-weight:600;font-size:13px;}
.skip-link:focus{left:0;}

/* ── Command bar (header) ── */
.cmdbar{position:sticky;top:0;z-index:50;background:var(--bg-1);border-bottom:1px solid var(--line);}
.cmdbar .inner{display:flex;align-items:center;gap:22px;height:52px;max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.cmdbar .logo-img{height:26px;width:auto;max-width:210px;object-fit:contain;display:block;}
.cmdbar .logo-txt{font-weight:700;font-size:15px;letter-spacing:-0.01em;color:var(--ink-0);}
.cmdbar .logo-txt em{font-style:normal;color:var(--cyan);}
.cmdbar .env{font-family:var(--font-mono);font-size:10px;color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r);padding:2px 7px;letter-spacing:0.06em;}
.cmdbar .spacer{flex:1;}
.cmdbar nav{display:flex;gap:20px;align-items:center;}
.cmdbar nav a{color:var(--ink-1);font-size:13px;transition:color .12s;}
.cmdbar nav a:hover,.cmdbar nav a.active{color:var(--ink-0);}
.cmdbar .cta{font-size:12px;font-weight:600;padding:7px 15px;background:var(--cyan);color:var(--cyan-ink);border-radius:var(--r);}
.cmdbar .cta:hover{background:#3ddef0;}
@media(max-width:780px){.cmdbar nav a.hide-sm{display:none;}.cmdbar .env{display:none;}}

/* ── Eyebrow / section labels ── */
.eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cyan);display:block;}
.section-label{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:20px;}
.section-label::after{content:"";flex:1;height:1px;background:var(--line);}
.section-label .idx{color:var(--ink-3);}

/* ── Typography scale ── */
h1,h2,h3,h4{font-weight:600;letter-spacing:-0.01em;color:var(--ink-0);line-height:1.15;}
.display{font-size:clamp(30px,4.6vw,46px);font-weight:600;letter-spacing:-0.025em;line-height:1.05;}
.h1{font-size:clamp(24px,3.4vw,34px);}
.h2{font-size:clamp(19px,2.4vw,24px);}
.lede{font-size:16px;color:var(--ink-1);line-height:1.65;}
.label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);}
.data{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* ── Sections ── */
section{padding:64px 0;border-bottom:1px solid var(--line);}
section.tight{padding:40px 0;}

/* ── Panels ── */
.panel{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-2);}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-bottom:1px solid var(--line);}
.panel-head h3{font-size:13px;font-weight:600;}
.panel-head .meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-2);letter-spacing:0.04em;}
.panel-body{padding:15px;}

/* ── KPI strip ── */
.kpi-strip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;}
.kpi{background:var(--bg-1);padding:14px 16px;}
.kpi .k-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-2);}
.kpi .k-val{font-family:var(--font-mono);font-size:23px;font-weight:600;margin-top:7px;letter-spacing:-0.01em;color:var(--ink-0);}
.kpi .k-delta{font-family:var(--font-mono);font-size:11px;margin-top:4px;}
.k-delta.up{color:var(--ok);} .k-delta.down{color:var(--crit);} .k-delta.flat{color:var(--ink-2);}
.kpi.active{box-shadow:inset 2px 0 0 var(--cyan);}
.kpi.active .k-label{color:var(--cyan);}

/* ── Badges + severity ── */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r);border:1px solid;}
.badge .bdot{width:6px;height:6px;border-radius:50%;}
.badge.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-dim);} .badge.ok .bdot{background:var(--ok);}
.badge.warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-dim);} .badge.warn .bdot{background:var(--warn);}
.badge.crit{color:var(--crit);border-color:var(--crit-line);background:var(--crit-dim);} .badge.crit .bdot{background:var(--crit);}
.badge.info{color:var(--info);border-color:var(--info-line);background:var(--info-dim);} .badge.info .bdot{background:var(--info);}
.badge.cyan{color:var(--cyan);border-color:var(--cyan-line);background:var(--cyan-dim);} .badge.cyan .bdot{background:var(--cyan);}
.badge.neutral{color:var(--ink-1);border-color:var(--line-2);background:var(--bg-2);} .badge.neutral .bdot{background:var(--ink-2);}
.sev{display:inline-block;width:3px;align-self:stretch;border-radius:2px;flex-shrink:0;}
.sev.crit{background:var(--crit);} .sev.warn{background:var(--warn);} .sev.ok{background:var(--ok);} .sev.info{background:var(--info);}

/* ── Buttons ── */
.btn{font-family:var(--font-sans);font-size:13px;font-weight:500;padding:9px 18px;border-radius:var(--r);cursor:pointer;border:1px solid transparent;display:inline-block;transition:background .12s,border-color .12s;}
.btn-primary{background:var(--cyan);color:var(--cyan-ink);font-weight:600;}
.btn-primary:hover{background:#3ddef0;}
.btn-secondary{background:var(--bg-2);color:var(--ink-0);border-color:var(--line-2);}
.btn-secondary:hover{border-color:var(--ink-2);}
.btn-ghost{background:transparent;color:var(--ink-1);border-color:var(--line-2);}
.btn-ghost:hover{color:var(--ink-0);border-color:var(--ink-2);}

/* ── Data table ── */
table.grid{width:100%;border-collapse:collapse;font-size:13px;}
table.grid thead th{text-align:left;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-2);font-weight:500;padding:9px 14px;border-bottom:1px solid var(--line-2);}
table.grid thead th.num{text-align:right;}
table.grid tbody td{padding:9px 14px;border-bottom:1px solid var(--line);color:var(--ink-1);}
table.grid tbody td.num{text-align:right;font-family:var(--font-mono);color:var(--ink-0);font-variant-numeric:tabular-nums;}
table.grid tbody tr:hover td{background:var(--bg-2);}
table.grid tbody tr:last-child td{border-bottom:none;}
table.grid strong{color:var(--ink-0);font-weight:600;}

/* ── Feature/spec cells (replaces decorative cards — flat, bordered, dense) ── */
.cellgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;}
.cell{background:var(--bg-1);padding:20px;}
.cell .c-ico{color:var(--cyan);margin-bottom:12px;display:block;}
.cell h3{font-size:14px;font-weight:600;margin-bottom:6px;}
.cell p{font-size:13px;color:var(--ink-2);line-height:1.6;}

/* ── Steps (when content is a true sequence) ── */
.steps{border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;}
.step{display:flex;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--bg-1);}
.step:last-child{border-bottom:none;}
.step .s-idx{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--cyan);width:28px;flex-shrink:0;}
.step h4{font-size:14px;font-weight:600;margin-bottom:2px;}
.step p{font-size:13px;color:var(--ink-2);}

/* ── Footer ── */
footer{background:var(--bg-1);border-top:1px solid var(--line);padding:40px 0 28px;}
footer .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:26px;}
footer .col h4{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;}
footer .col a{display:block;color:var(--ink-1);font-size:13px;margin-bottom:8px;}
footer .col a:hover{color:var(--ink-0);}
footer .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:30px;padding-top:18px;border-top:1px solid var(--line);}
footer .foot-bottom .copy{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);letter-spacing:0.04em;}
footer .social{display:flex;gap:12px;}
footer .social a{color:var(--ink-2);display:inline-flex;}
footer .social a:hover{color:var(--cyan);}

/* ── Forms ── */
label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px;}
input,select,textarea{width:100%;padding:10px 12px;background:var(--bg-0);border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink-0);font-family:var(--font-sans);font-size:14px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);}
textarea{resize:vertical;min-height:90px;}

/* ── Legal/doc prose ── */
.doc{padding:56px 0 80px;}
.doc h1{font-size:clamp(26px,3.6vw,36px);margin-bottom:10px;}
.doc .updated{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-bottom:22px;letter-spacing:0.04em;}
.doc .intro{font-size:15px;color:var(--ink-1);padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:8px;line-height:1.7;}
.doc h2{font-size:18px;margin:34px 0 12px;}
.doc h3{font-size:15px;margin:22px 0 8px;}
.doc p{margin-bottom:14px;color:var(--ink-1);line-height:1.7;}
.doc ul{margin:0 0 16px;padding-left:1.3rem;color:var(--ink-1);}
.doc li{margin-bottom:7px;}
.doc a{color:var(--cyan);}.doc a:hover{text-decoration:underline;}
.doc strong{color:var(--ink-0);font-weight:600;}
.doc .legal-note{background:var(--cyan-dim);border:1px solid var(--cyan-line);border-radius:var(--r);padding:15px 17px;font-size:13px;color:var(--ink-1);margin:22px 0;}
.doc .callout{background:var(--bg-1);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:var(--r);padding:15px 17px;margin:18px 0;}

/* reduced motion */
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}