/* ═══════════════════════════════════════════════════════════════
   BLUECORE AUTOMATION — "OPERATIONS CONSOLE" DESIGN SYSTEM
   ---------------------------------------------------------------
   Concept: the site is a technical instrument, not a brochure.
   Visible structural grid, hard edges, monospace data, tabular
   numerals, one saturated blue carrying every signal.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. FONTS — self-hosted ────────────────────────────────
   Previously two serial third-party round trips blocked first
   paint: googleapis for the stylesheet, then gstatic for the
   files. Same-origin now, latin + latin-ext only (the browser
   fetches a subset just when the page actually uses it), and
   font-display:swap so text never waits on a download. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url('/assets/fonts/archivo-400_900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url('/assets/fonts/archivo-400_900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibmplexmono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibmplexmono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibmplexmono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibmplexmono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibmplexmono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibmplexmono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url('/assets/fonts/ibmplexsans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url('/assets/fonts/ibmplexsans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url('/assets/fonts/ibmplexsans-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url('/assets/fonts/ibmplexsans-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url('/assets/fonts/ibmplexsans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url('/assets/fonts/ibmplexsans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root{
  /* Ground — near-black, biased blue. Never pure #000. */
  --ink:        #05070E;
  --ink-raised: #0B0F1C;
  --ink-panel:  #10162A;

  /* Paper — cool off-white, biased blue. Never pure #fff. */
  --paper:      #F4F5F8;
  --paper-deep: #E7EAF1;

  /* Brand — unchanged */
  --blue:       #0052FF;
  --blue-lift:  #2E70FF;
  --indigo:     #6366F1;
  --violet:     #8B5CF6;

  /* Green — the second pole. Green marks what's free,
     blue marks what's booked. Deep enough that white body text
     clears WCAG AA on it (6.6:1); a brighter emerald does not. */
  --green:      #076A47;
  --green-lift: #0A8459;
  --green-deep: #04372A;

  /* Neutrals, hue-biased toward the accent */
  --slate:      #8B96AD;   /* body text on ink */
  --slate-dim:  #5C6780;   /* captions — this value is for PAPER */
  --dim-ink:    #7C88A2;   /* captions on ink; #5C6780 only hits 3.5:1 there */
  --graphite:   #454F66;   /* body text on paper */
  --headline:   #0A1020;   /* headings on paper */

  /* Semantic — status only, never used as accent.
     Tuned to stay legible on both paper and ink. */
  --live:       #0FB981;
  --warn:       #FBBF24;
  --dead:       #EF5E5E;

  /* Rules */
  --rule-ink:   rgba(255,255,255,.055);
  --rule-paper: rgba(5,7,14,.075);
  --edge-ink:   rgba(255,255,255,.11);
  --edge-paper: rgba(5,7,14,.14);

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Metrics */
  --maxw: 1240px;
  --pad: 48px;
  --nav-h: 68px;
  --r: 3px;               /* the only radius. hard edges by default. */
}

@media(max-width:900px){ :root{ --pad:24px; --nav-h:60px } }
@media(max-width:560px){ :root{ --pad:18px } }

/* ── 2. RESET & BASE ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  font-size:17px;line-height:1.62;
  background:var(--paper);color:var(--graphite);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
ul,ol{list-style:none}

::selection{background:var(--blue);color:#fff}

:focus-visible{
  outline:2px solid var(--blue-lift);
  outline-offset:3px;
}

/* ── 3. BANDS & THE VISIBLE GRID ───────────────────────────
   Every section is a "band". Bands carry their own hairline
   column rules, drawn inside the content measure — the page
   reads like a technical drawing rather than floating cards. */
.band{position:relative;overflow:hidden}
/* Column marks are TICKS at the band's top and bottom edges, never
   full-height rules — a full-height rule runs straight through body
   copy and reads as a rendering fault. Four layers: the repeating
   ticks at 0/25/50/75% top and bottom, plus the closing 100% tick. */
.band::before{
  content:'';position:absolute;top:0;bottom:0;left:0;right:0;
  width:min(100% - var(--pad)*2, var(--maxw));
  margin-inline:auto;
  pointer-events:none;z-index:0;
  --tick:30px;
  background-image:
    repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 25%),
    linear-gradient(var(--rule),var(--rule));
  background-size:100% var(--tick),1px var(--tick);
  background-position:0 0,100% 0;
  background-repeat:no-repeat;
}
@media(max-width:900px){ .band::before{display:none} }

.band--ink{--rule:var(--rule-ink);--edge:var(--edge-ink);background:var(--ink);color:var(--slate)}
.band--raised{--rule:var(--rule-ink);--edge:var(--edge-ink);background:var(--ink-raised);color:var(--slate)}
.band--paper{--rule:var(--rule-paper);--edge:var(--edge-paper);background:var(--paper);color:var(--graphite)}
.band--blue{--rule:rgba(255,255,255,.14);--edge:rgba(255,255,255,.28);background:var(--blue);color:rgba(255,255,255,.88)}
.band--green{--rule:rgba(255,255,255,.16);--edge:rgba(255,255,255,.30);background:var(--green);color:rgba(255,255,255,.9)}

.band > *{position:relative;z-index:1}

/* Any dark surface re-points --slate-dim at its legible variant, so
   every existing var(--slate-dim) reference adapts to its ground
   instead of needing a per-rule override. */
.band--ink,.band--raised,.on-ink,.foot,
.console,.callstrip,.flagship-l,.demo,.reel{--slate-dim:var(--dim-ink)}

.wrap{
  width:min(100% - var(--pad)*2, var(--maxw));
  margin-inline:auto;
}
.band--pad{padding-block:104px}
@media(max-width:900px){ .band--pad{padding-block:72px} }
@media(max-width:560px){ .band--pad{padding-block:56px} }

/* Full-bleed hairline that terminates a band */
.hr{height:1px;background:var(--edge);border:0}

/* ── 4. TYPE SCALE ─────────────────────────────────────────── */
.h1{
  font-family:var(--display);
  font-weight:800;font-stretch:112%;
  font-size:clamp(38px,6.1vw,82px);
  line-height:.96;letter-spacing:-.035em;
  text-wrap:balance;
}
.h2{
  font-family:var(--display);
  font-weight:800;font-stretch:108%;
  font-size:clamp(29px,4vw,52px);
  line-height:1.02;letter-spacing:-.03em;
  text-wrap:balance;
}
.h3{
  font-family:var(--display);
  font-weight:700;font-stretch:104%;
  font-size:clamp(21px,2.2vw,28px);
  line-height:1.12;letter-spacing:-.02em;
}
.h4{
  font-family:var(--display);
  font-weight:700;font-stretch:100%;
  font-size:19px;line-height:1.25;letter-spacing:-.012em;
}
.lede{
  font-size:clamp(17px,1.5vw,19.5px);
  line-height:1.62;max-width:56ch;
}
.fine{font-size:14.5px;line-height:1.6;color:var(--slate-dim)}

.on-ink   .h1,.on-ink   .h2,.on-ink   .h3,.on-ink   .h4{color:#fff}
.band--ink .h1,.band--ink .h2,.band--ink .h3,.band--ink .h4,
.band--raised .h1,.band--raised .h2,.band--raised .h3,.band--raised .h4{color:#fff}
.band--paper .h1,.band--paper .h2,.band--paper .h3,.band--paper .h4{color:var(--headline)}
.band--blue .h1,.band--blue .h2,.band--blue .h3,
.band--green .h1,.band--green .h2,.band--green .h3,.band--green .h4{color:#fff}

/* Dark instrument panels sitting on a paper band — the console, the
   demo, the flagship card. They opt back into light-on-dark type. */
.on-ink .h1,.on-ink .h2,.on-ink .h3,.on-ink .h4{color:#fff}
.on-ink .tag{color:#5A90FF}
.on-ink .lede,.on-ink p{color:var(--slate)}

/* The accent is a hard rule under the word, not a gradient fill. */
.mark{
  color:var(--blue);position:relative;white-space:nowrap;
}
.band--ink .mark,.band--raised .mark{color:#4C86FF}
/* The rule is drawn by default and the animation only holds it back,
   so if the animation never runs the underline is still there. */
.mark::after{
  content:'';position:absolute;left:0;right:0;bottom:.02em;
  height:.085em;background:currentColor;transform-origin:left;
  animation:rule-in .7s cubic-bezier(.22,1,.36,1) .55s backwards;
}
@keyframes rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── 5. MONO UTILITIES — labels, data, markers ─────────────── */
.tag{
  font-family:var(--mono);
  font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);
  display:inline-flex;align-items:center;gap:10px;
}
.band--ink .tag,.band--raised .tag{color:#5A90FF}
.band--blue .tag,.band--green .tag{color:rgba(255,255,255,.8)}
.tag::before{
  content:'';width:22px;height:1px;background:currentColor;flex-shrink:0;
}
.tag--bare::before{display:none}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.mono{font-family:var(--mono)}

/* Section header block — flush left, never centered */
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:64ch;margin-bottom:56px}
.sec-head .lede{color:inherit;opacity:.82}
@media(max-width:560px){ .sec-head{margin-bottom:38px;gap:14px} }

/* ── 6. BUTTONS — hard-edged, offset block shadow ──────────── */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:17px 26px;border-radius:var(--r);
  border:1px solid transparent;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1),background .2s;
  will-change:transform;
}
.btn:hover{transform:translate(-2px,-2px)}
.btn:active{transform:translate(0,0)}

.btn--primary{background:var(--blue);color:#fff;box-shadow:5px 5px 0 rgba(0,82,255,.30)}
.btn--primary:hover{background:var(--blue-lift);box-shadow:8px 8px 0 rgba(0,82,255,.34)}

.btn--ghost{border-color:var(--edge);color:inherit}
.band--paper .btn--ghost{color:var(--headline)}
.band--ink .btn--ghost,.band--raised .btn--ghost,.on-ink .btn--ghost{color:#fff}
.on-ink .btn--ghost{border-color:var(--edge-ink)}
.on-ink .btn--ghost:hover{color:#6D9DFF}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);box-shadow:4px 4px 0 rgba(0,82,255,.18)}
.band--ink .btn--ghost:hover,.band--raised .btn--ghost:hover{color:#6D9DFF}

.btn--invert{background:#fff;color:var(--blue);box-shadow:5px 5px 0 rgba(5,7,14,.28)}
.btn--invert:hover{box-shadow:8px 8px 0 rgba(5,7,14,.34)}

.btn--block{width:100%;justify-content:center}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ── 7. NAVIGATION ─────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:120;height:var(--nav-h);
  background:rgba(244,245,248,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--edge-paper);
}
.nav-inner{
  width:min(100% - var(--pad)*2, var(--maxw));margin-inline:auto;
  height:100%;display:flex;align-items:center;gap:32px;
}
.nav-logo{flex-shrink:0}
.nav-logo img{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav-links a{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--graphite);position:relative;padding-block:6px;
  transition:color .2s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:right;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover{color:var(--headline)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav-cta{
  flex-shrink:0;
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--blue);color:#fff;
  padding:12px 18px;border-radius:var(--r);
  transition:background .2s,box-shadow .2s;
  box-shadow:3px 3px 0 rgba(0,82,255,.3);
}
.nav-cta:hover{background:var(--blue-lift);box-shadow:5px 5px 0 rgba(0,82,255,.34)}

.nav-burger{
  display:none;width:40px;height:40px;flex-shrink:0;
  align-items:center;justify-content:center;
  border:1px solid var(--edge-paper);border-radius:var(--r);
}
.nav-burger span{
  display:block;width:16px;height:1.5px;background:var(--headline);position:relative;
  transition:background .2s;
}
.nav-burger span::before,.nav-burger span::after{
  content:'';position:absolute;left:0;width:16px;height:1.5px;background:var(--headline);
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.nav-burger span::before{top:-5px}
.nav-burger span::after{top:5px}
.nav-burger[aria-expanded="true"] span{background:transparent}
.nav-burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}

.nav-drawer{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:119;
  background:var(--paper);border-bottom:1px solid var(--edge-paper);
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1);
}
.nav-drawer[data-open="true"]{grid-template-rows:1fr}
.nav-drawer-inner{overflow:hidden}
.nav-drawer nav{
  width:min(100% - var(--pad)*2,var(--maxw));margin-inline:auto;
  padding-block:12px 26px;display:flex;flex-direction:column;
}
.nav-drawer a{
  font-family:var(--mono);font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--graphite);padding:15px 0;border-bottom:1px solid var(--edge-paper);
  display:flex;justify-content:space-between;align-items:center;
}
.nav-drawer a:hover{color:var(--headline)}
.nav-drawer a::after{content:'→';color:var(--blue);opacity:.6}
.nav-drawer .btn{margin-top:22px;justify-content:center}
.nav-drawer .btn::after{content:none}

@media(max-width:1000px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-inner{gap:14px}
  .nav-cta{margin-left:auto}
}
@media(max-width:560px){
  .nav-cta{display:none}
  .nav-burger{margin-left:auto}
  .nav-logo img{height:26px}
}

/* ── 7b. SKIP LINK ─────────────────────────────────────────
   Keyboard and screen-reader users had to tab through seven nav
   items and a CTA before reaching content, on every page. Off
   screen until focused, then it lands over the nav. */
.skip{
  position:fixed;top:0;left:0;z-index:300;
  transform:translateY(-120%);
  background:var(--blue);color:#fff;
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  padding:14px 22px;border-radius:0 0 var(--r) 0;
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}
.skip:focus{transform:translateY(0)}
/* The target is focused programmatically, so it must never draw a ring */
#main:focus{outline:none}

/* ── 8. SCROLL PROGRESS ────────────────────────────────────── */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
}

/* ── 9. READOUT — ruled data strip, replaces stat cards ────── */
.readout{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--edge);
}
.readout > div{
  padding:26px 28px 26px 0;
  border-left:1px solid var(--edge);
  padding-left:28px;
}
.readout > div:first-child{border-left:0;padding-left:0}
.readout-k{
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate-dim);
  display:block;margin-bottom:12px;
}
.readout-v{
  font-family:var(--display);font-weight:800;font-stretch:110%;
  font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:-.03em;
  color:#fff;font-variant-numeric:tabular-nums;display:block;margin-bottom:9px;
}
.band--paper .readout-v{color:var(--headline)}
.readout-d{font-size:13.5px;line-height:1.5;color:var(--slate-dim)}
@media(max-width:760px){
  .readout{grid-template-columns:1fr}
  .readout > div{border-left:0;padding-left:0;border-top:1px solid var(--rule-ink);padding-block:20px}
  .readout > div:first-child{border-top:0}
}

/* ── 10. STATUS DOT ────────────────────────────────────────── */
.dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--live);box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 22%,transparent);
  animation:beat 2.4s ease-in-out infinite;
}
@keyframes beat{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 22%,transparent)}
  50%    {box-shadow:0 0 0 7px color-mix(in srgb,var(--live) 0%,transparent)}
}

/* ── 11. SCROLL REVEAL ─────────────────────────────────────
   Gated on .js so a script failure can never leave the page
   blank — without JS everything is simply visible. */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.js .rise.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}

/* ── 12. SHARED SUBPAGE COMPONENTS (blog, about, legal) ────── */
.doc{
  background:var(--paper);color:var(--graphite);
  --rule:var(--rule-paper);--edge:var(--edge-paper);
}
.doc-inner{
  width:min(100% - var(--pad)*2, 760px);margin-inline:auto;
  padding-block:80px 72px;
}
.doc h1{
  font-family:var(--display);font-weight:800;font-stretch:110%;
  font-size:clamp(31px,4.6vw,50px);line-height:1.02;letter-spacing:-.032em;
  color:var(--headline);margin-bottom:22px;text-wrap:balance;
}
.doc h2{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(22px,2.4vw,28px);line-height:1.14;letter-spacing:-.02em;
  color:var(--headline);margin:52px 0 16px;
}
.doc h3{
  font-family:var(--display);font-weight:700;font-size:19px;
  color:var(--headline);margin:34px 0 12px;letter-spacing:-.012em;
}
.doc p{font-size:17.5px;line-height:1.72;margin-bottom:20px}
.doc p strong{color:var(--headline);font-weight:600}
.doc a{color:var(--blue);font-weight:500;border-bottom:1px solid rgba(0,82,255,.28)}
.doc a:hover{border-bottom-color:var(--blue)}
.doc ul,.doc ol{display:flex;flex-direction:column;gap:11px;margin:0 0 22px;font-size:17.5px;line-height:1.7}
.doc ul li{padding-left:26px;position:relative}
.doc ul li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:9px;height:1px;background:var(--blue);
}
.doc ol{counter-reset:o}
.doc ol li{padding-left:34px;position:relative;counter-increment:o}
.doc ol li::before{
  content:counter(o,decimal-leading-zero);position:absolute;left:0;top:.16em;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--blue);
}
.doc .standfirst{
  font-size:20px;line-height:1.6;color:var(--graphite);
  margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid var(--edge-paper);
  max-width:60ch;
}
.doc .meta{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--blue);
  margin-bottom:20px;display:flex;align-items:center;gap:10px;
}
.doc .meta::before{content:'';width:22px;height:1px;background:currentColor}
.doc blockquote{
  border-left:2px solid var(--blue);padding:4px 0 4px 24px;margin:0 0 24px;
  font-size:19px;line-height:1.6;color:var(--headline);
}
.doc figure{margin:0 0 28px}
.doc figcaption{font-family:var(--mono);font-size:12px;color:var(--slate-dim);margin-top:10px;letter-spacing:.04em}
.doc .callout{
  background:#fff;border:1px solid var(--edge-paper);border-left:2px solid var(--blue);
  border-radius:var(--r);padding:24px 26px;margin:32px 0;
}
.doc .callout p:last-child{margin-bottom:0}
.doc table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:15.5px}
.doc th,.doc td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--edge-paper);vertical-align:top}
.doc th{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate-dim);
}
.doc td{font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.doc-photo{
  border:1px solid var(--edge-paper);border-radius:var(--r);overflow:hidden;
  margin-bottom:14px;
}
.doc-photo img{width:100%;height:auto}

@media(max-width:560px){
  .doc-inner{padding-block:52px 48px}
  .doc p,.doc ul,.doc ol{font-size:16.5px}
  .doc .standfirst{font-size:18px}
}

/* Blog index cards — ruled rows, not floating cards */
.entry-list{display:flex;flex-direction:column;border-top:1px solid var(--edge-paper)}
.entry{
  display:block;padding:32px 0;border-bottom:1px solid var(--edge-paper);
  transition:padding-left .3s cubic-bezier(.22,1,.36,1);position:relative;
}
.entry::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleX(0);
  transform-origin:left;width:20px;height:1px;background:var(--blue);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.entry:hover{padding-left:34px}
.entry:hover::before{transform:translateY(-50%) scaleX(1)}
.entry-meta{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate-dim);margin-bottom:10px;
}
.entry h2{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(19px,2.1vw,25px);line-height:1.18;letter-spacing:-.022em;
  color:var(--headline);margin:0 0 10px;
}
.entry:hover h2{color:var(--blue)}
.entry p{font-size:16px;line-height:1.6;margin:0 0 12px;max-width:70ch}
.entry .more{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);
}

/* Compact CTA band used at the foot of subpages */
.tail-cta{background:var(--ink);color:var(--slate);border-top:1px solid var(--edge-ink)}
.tail-cta .wrap{padding-block:76px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.tail-cta h2{
  font-family:var(--display);font-weight:800;font-stretch:108%;
  font-size:clamp(27px,3.6vw,42px);line-height:1.03;letter-spacing:-.03em;color:#fff;
  max-width:22ch;
}
.tail-cta p{max-width:56ch;font-size:17px}

/* Minimal footer for subpages */
.foot-min{
  background:var(--ink);border-top:1px solid var(--edge-ink);
  padding-block:34px;
}
.foot-min .wrap{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate-dim);
}
.foot-min a{color:var(--slate)}
.foot-min a:hover{color:#fff}

/* ── 12b. THE PLAY LAYER ───────────────────────────────────
   The grid is deliberately rigid. These are the only things
   allowed to break it — a handful of rotated labels and a
   few springy hovers. Because everything else holds its line,
   a 2° tilt reads as confidence rather than sloppiness.
   Used sparingly: no more than one stamp per screenful. */
.stamp{
  display:inline-block;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  padding:8px 13px;border:1.5px solid currentColor;border-radius:2px;
  transform:rotate(-2.4deg);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.stamp:hover{transform:rotate(1.6deg) scale(1.045)}
/* Alternate lean, so two stamps on one screen never look stamped twice. */
.stamp--r{transform:rotate(2.2deg)}
.stamp--r:hover{transform:rotate(-1.5deg) scale(1.045)}

.stamp--blue {color:var(--blue); background:rgba(0,82,255,.07)}
.stamp--green{color:var(--green);background:rgba(7,106,71,.08)}
.stamp--ink  {color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.34)}
/* Solid white, not a wash: at 14% alpha over the green band this
   label only reached ~2.5:1 against its own ink. */
.stamp--paper{color:var(--green-deep);background:#fff;border-color:#fff}

/* Every arrow on the site leans forward when you reach for it. */
.btn span[aria-hidden],.svc a span[aria-hidden]{
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.btn:hover span[aria-hidden],.svc a:hover span[aria-hidden]{transform:translateX(4px)}

/* ── 13. MOTION PREFERENCES ────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .rise{opacity:1;transform:none}
  .mark::after{transform:scaleX(1)}
}

/* ── 14. PRINT ─────────────────────────────────────────────── */
@media print{
  .nav,.nav-drawer,.progress,.tail-cta,#bc-chat-btn,#bc-chat-window{display:none !important}
  body{background:#fff;color:#000}
  .doc{background:#fff}
}