/* ---- self-hosted fonts -------------------------------------------------
   Variable woff2, subset latin, served from /brand/fonts/. No third-party
   font requests anywhere on the site. Weight ranges cover every use:
   Inter 100–900 (we use 400/600/700/800), Fraunces full-variable
   (opsz 9–144, wght 100–900, SOFT/WONK), Plex Mono 400/500 static. */
@font-face{
  font-family:"Inter";
  src:url("/brand/fonts/inter-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("/brand/fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/brand/fonts/plex-mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/brand/fonts/plex-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ============================================================
   xyzios.com — redesign 2026-08-01 (Astro build). Base system
   restyled 7/25 to the Popflow estate's language:
   dark #0B0F18-family ground, bronze #CDB384, BOLD Inter display,
   pill CTAs — the same DNA as popflow.com and the product OS.
   IBM Plex Mono survives only as small data readouts.
   No framework. No build step. Every rule here is load-bearing.
   ============================================================ */

/* ---- tokens ---------------------------------------------------------- */
:root{
  /* THE LIGHT ERA (2026-08-23, Bill's ruling: all light). Values are the
     app's own measured light tokens (os.html): a neutral grey ground with
     white content on it — "chrome is the grey, work is the white." Token
     NAMES keep their dark-era spelling so 43 pages restyle without markup
     changes; each var now holds its light-ROLE value. Gold is a midnight
     metal — the accent on light is the app's blue. */
  --ink:        #EEF1F5;   /* page ground (was near-black) */
  --ink-2:      #E7EBF1;   /* deeper ground band */
  --surface:    #FFFFFF;   /* cards — work is the white */
  --raised:     #FBFCFE;

  /* Accent family: the app's blue replaces bronze on light — no gold on white */
  --bronze:     #0040B9;
  --bronze-lit: #0F3E96;   /* "brighter" role = deeper on light */
  --bronze-dim: #26579C;
  --rust:       #B32519;
  --steel:      #4A5E78;
  --sage:       #005929;

  /* Ink text on the light ground */
  --paper:      #1B1C1E;
  --paper-2:    rgba(27,28,30,.74);
  --paper-3:    rgba(27,28,30,.62);

  --hair:       rgba(27,28,30,.15);
  --hair-2:     rgba(27,28,30,.08);

  --measure:    68ch;
  --gutter:     clamp(20px, 5vw, 72px);
  --maxw:       1240px;

  /* One easing for the whole site — motion consistency beats variety */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:Inter,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Grain + a faint plotted grid. This is the "instrument paper" texture —
   fixed so it doesn't parallax, pointer-events:none so it never blocks. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(var(--hair-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair-2) 1px, transparent 1px);
  background-size:88px 88px;
  opacity:.55;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 78%);
}
body::after{
  content:"";position:fixed;inset:-200%;z-index:2;pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer,section{position:relative;z-index:3;}

/* ---- type ------------------------------------------------------------ */
.display,h1,h2,h3{
  font-family:Inter,ui-sans-serif,-apple-system,sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.7rem, 7vw, 5.8rem);}
h2{font-size:clamp(1.9rem, 4vw, 3.2rem); line-height:1.08;}
h3{font-size:clamp(1.15rem, 1.6vw, 1.4rem); line-height:1.24; letter-spacing:-.015em; font-weight:700;}

p{margin:0 0 1.15em; max-width:var(--measure);}

.lede{
  font-size:clamp(1.06rem, 1.5vw, 1.28rem);
  line-height:1.62;
  color:var(--paper-2);
  max-width:56ch;
}

/* The instrument readout: mono, spaced, small. Used for eyebrows, labels,
   figures — anywhere the site should feel like it's reporting, not selling. */
.tag{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--bronze);
}
.tag--dim{color:var(--paper-3);}

.num{
  font-family:Inter,sans-serif;
  font-weight:800;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.04em;
  line-height:.86;
  color:var(--bronze);
}

em.q{
  font-style:normal;
  color:var(--bronze-lit);
}

a{color:var(--bronze); text-decoration:none;}
a:hover{color:var(--bronze-lit);}

/* Accessibility priority 1 — never remove the ring, restyle it. */
:focus-visible{
  outline:2px solid var(--bronze-lit);
  outline-offset:3px;
  border-radius:2px;
}

/* Bronze selection — the details are the design */
::selection{background:var(--bronze); color:#FFFFFF;}

/* Thin instrument scrollbar */
html{scrollbar-width:thin; scrollbar-color:var(--bronze-dim) var(--ink);}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--bronze-dim); border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--bronze);}

/* Cross-page crossfade where the browser supports it; no-op elsewhere */
@view-transition{navigation:auto;}

/* The plotted-progress hairline: a 2px bronze line that draws across the top
   of the viewport as you read. Pure CSS scroll-driven animation — browsers
   without support simply never see it (it stays at scaleX(0)). */
.plot{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:linear-gradient(90deg, var(--bronze-dim), var(--bronze-lit));
  transform-origin:left; transform:scaleX(0); pointer-events:none;
}
@supports (animation-timeline: scroll()){
  .plot{animation:plotline linear both; animation-timeline:scroll(root);}
  @keyframes plotline{to{transform:scaleX(1);}}
}

/* Atmospheric bronze halo — sits above the grid texture, below content */
.halo{
  position:fixed; z-index:2; pointer-events:none;
  left:72%; top:24%; width:min(920px,120vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(0,64,185,.075) 0%, rgba(0,64,185,.028) 38%, transparent 66%);
}
/* ...but not on a phone. A fixed layer this large is re-composited on every
   scroll frame, and again each time the mobile URL bar slides — which reads
   as the page stuttering and jumping while you scroll (Bill, 8/25). It is
   atmosphere at 7% opacity; a phone loses nothing by dropping it. */
@media (max-width:820px){ .halo{display:none;} }

/* ---- shell ----------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
.narrow{max-width:820px;}

.site-head{
  position:sticky; top:0; z-index:40;
  padding:20px 0;
  backdrop-filter:blur(14px);
  background:linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.55) 70%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
/* Once scrolled, the header goes solid to its bottom edge — with the
   gradient-to-transparent, the hero button and body text ghosted through
   it (worst on phones; audit 2026-09-02). */
.site-head.stuck{border-bottom-color:var(--hair); background:rgba(255,255,255,.92);}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.site-head img{height:46px; width:auto; display:block;}

.nav{display:flex; align-items:center; gap:30px;}
.nav a{white-space:nowrap;}
/* iPad landscape / small laptops: tighten instead of wrapping labels */
@media (max-width:1140px){ .nav{gap:16px;} .nav a{font-size:14px;} }
.nav a{
  font-size:14px; font-weight:500; color:var(--paper-2);
  position:relative; padding:4px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--bronze); transition:width .4s var(--ease-out);
}
.nav a:hover{color:var(--paper);}
.nav a:hover::after{width:100%;}
.nav a[aria-current="page"]{color:var(--paper);}
.nav a[aria-current="page"]::after{width:100%; background:var(--bronze-dim);}

/* ---- mobile menu ------------------------------------------------------ */
.menu-btn{display:none;}
.sheet{
  position:fixed; inset:0; z-index:80;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  display:none; flex-direction:column;
  /* the menu is taller than a short phone once the CTAs are in it, so it
     scrolls on its own and keeps the rubber-banding off the page behind */
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:calc(18px + env(safe-area-inset-top)) var(--gutter)
          calc(28px + env(safe-area-inset-bottom));
}
.sheet.open{display:flex;}
.sheet-top{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:min(4.5vh,34px); flex:0 0 auto;}
.sheet-top img{height:40px; width:auto; display:block;}
/* a real tap target around the mark, not just the ink */
.sheet-home{display:inline-flex; align-items:center; padding:4px 6px;
  margin:-4px -6px; min-height:44px; border-radius:4px;}
.sheet-home:focus-visible{outline:2px solid var(--bronze); outline-offset:2px;}
.sheet-close{
  background:none; border:1px solid var(--hair); border-radius:2px;
  color:var(--paper); min-height:44px; min-width:44px;
  display:grid; place-items:center; cursor:pointer;
}
.sheet-close svg{width:16px; height:16px;}
.sheet nav{display:flex; flex-direction:column; flex:0 0 auto;}
/* Sized down 2026-08-25: at the old display size seven items ran past the
   bottom of a phone, and the menu is a list to scan, not a headline. */
.sheet nav a{
  font-family:Inter,sans-serif; font-weight:800;
  font-size:clamp(1.28rem,5.4vw,1.7rem); letter-spacing:-.02em; line-height:1.15;
  color:var(--paper); display:flex; align-items:baseline; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--hair-2);
}
.sheet-cta{display:grid; gap:10px; margin-top:20px; flex:0 0 auto;}
.sheet-cta .btn{width:100%; justify-content:center; text-align:center;
  font-size:15px; padding:14px 18px;}
.sheet nav a .idx{
  font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; color:var(--bronze-dim);
}
.sheet.open nav a{opacity:0; transform:translateY(16px);
  animation:sheetin .6s var(--ease-out) forwards;}
.sheet.open nav a:nth-child(1){animation-delay:.05s}
.sheet.open nav a:nth-child(2){animation-delay:.11s}
.sheet.open nav a:nth-child(3){animation-delay:.17s}
.sheet.open nav a:nth-child(4){animation-delay:.23s}
.sheet.open nav a:nth-child(5){animation-delay:.29s}
.sheet.open nav a:nth-child(6){animation-delay:.35s}
.sheet.open nav a:nth-child(7){animation-delay:.41s}
.sheet.open .sheet-cta{opacity:0; animation:sheetin .6s var(--ease-out) .47s forwards;}
@keyframes sheetin{to{opacity:1; transform:none;}}
.sheet-foot{
  margin-top:auto; padding-top:22px; flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--paper-3);
}
.sheet-foot a{color:var(--paper-2);}
@media (prefers-reduced-motion:reduce){
  .sheet.open nav a,.sheet.open .sheet-cta{opacity:1; transform:none; animation:none;}
}

/* ---- buttons --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:Inter,sans-serif; font-size:14.5px; font-weight:600;
  letter-spacing:.005em;
  padding:14px 28px; border-radius:100px; border:1px solid var(--bronze);
  background:var(--bronze); color:#FFFFFF;
  cursor:pointer; position:relative; overflow:hidden;
  white-space:nowrap;                    /* labels never wrap to two rows */
  transition:background .35s var(--ease), color .35s var(--ease),
             transform .35s var(--ease);
  min-height:44px;                       /* touch target floor */
}
@media (max-width:420px){
  .btn{font-size:13.5px; padding:13px 22px; gap:8px;}
}
.btn:hover{background:var(--bronze-lit); border-color:var(--bronze-lit); color:#FFFFFF;}
.btn:active{transform:translateY(1px);}
.btn--ghost{background:transparent; color:var(--paper); border-color:var(--hair);}
.btn--ghost:hover{background:transparent; border-color:var(--bronze); color:var(--bronze-lit);}
.btn svg{width:15px; height:15px; transition:transform .35s var(--ease-out);}
.btn:hover svg{transform:translateX(4px);}

/* ---- rules & sections ------------------------------------------------ */
.rule{height:1px; background:var(--hair); border:0; margin:0;}

/* 2026-09-03: was clamp(80px,11vw,168px) — 158px each side at 1440, so every
   seam stacked to 317–395px of empty ground; 80+80 on phones. */
section{padding-block:clamp(56px, 7vw, 112px);}
@media (max-width:760px){
  section{padding-block:52px;}
  .rule + section{padding-top:36px;}
}
.hero{padding-block:clamp(56px,9vw,116px) clamp(40px,6vw,72px);}
.hero h1{margin-bottom:26px;}
.hero .tag{display:block; margin-bottom:18px;}
.sec-head{margin-bottom:clamp(40px, 5vw, 76px);}
.sec-head .tag{display:block; margin-bottom:20px;}

/* ---- reveal-on-scroll ------------------------------------------------
   Gated behind .js, which an inline script in <head> adds. Without it the
   content is simply VISIBLE. This matters: if the observer never runs — JS
   error, unsupported browser, a script blocked by an extension — an
   ungated `opacity:0` renders the entire page blank. A marketing site that
   fails to invisible is worse than one with no animation at all. */
/* THE REVEAL FADE IS RETIRED (Bill, 8/23: "the scrolling animations on all
   the pages are not good — remove them or make them much better"). Removal
   is the excellent option: sections are simply VISIBLE, and motion lives
   only INSIDE the product frames — charts drawing, numbers counting, beams
   travelling — all still gated on the .in class this observer keeps adding. */
.js .rise{opacity:1; transform:none;}
.js .rise.in{opacity:1; transform:none;}

/* Draw a hairline in, left to right — the "plotting" motif */
.js .draw{transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease-out);}
.js .draw.in{transform:scaleX(1);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .rise{opacity:1; transform:none; transition:none;}
  .js .draw{transform:none; transition:none;}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ---- footer -----------------------------------------------------------
   The editorial close: link columns, then the wordmark at full measure —
   the site signs its name — then a mono meta line. */
.site-foot{
  border-top:1px solid var(--hair);
  padding:0 0 30px; color:var(--paper-3); font-size:13.5px;
  overflow:hidden;
}
.site-foot a:hover{color:var(--bronze-lit);}
.foot-grid{
  display:grid; gap:44px 32px;
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.55fr));
  padding-block:clamp(48px,7vw,88px) clamp(40px,5vw,68px);
}
.foot-brand .tag--dim{display:block; margin-bottom:16px;}
.foot-line{color:var(--paper-2); font-size:14.5px; line-height:1.6;
  max-width:34ch; margin:0 0 20px;}
.foot-mail{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  letter-spacing:.08em; color:var(--bronze);
  border-bottom:1px solid var(--hair); padding-bottom:3px;
}
.foot-col{display:flex; flex-direction:column; align-items:flex-start;}
.foot-col .tag--dim{margin-bottom:14px;}
.foot-col a{color:var(--paper-2); font-size:14.5px; padding:10px 0;}
.foot-markwrap{padding-block:8px clamp(24px,4vw,40px);}
.foot-mark{display:block; width:min(100%,560px); height:auto; opacity:.92;
  transition:opacity .5s var(--ease);}
.foot-markwrap:hover .foot-mark{opacity:1;}
.foot-meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper-3);
  border-top:1px solid var(--hair-2); padding-top:22px;
}
.foot-meta .push{flex:1 1 auto;}
/* Trademark attribution. Deliberately quiet — it is a legal notice, not a
   claim, and it must not read as a badge. */
.foot-tm{
  margin:18px 0 0; max-width:76ch;
  font-size:12px; line-height:1.55; color:var(--paper-3); opacity:.72;
}
.foot-grid--doc{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);}
/* minimal one-line footer — legal pages + anywhere the wordmark would shout */
.foot-min{
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center;
  padding-block:32px 4px;
  font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper-3);
}
.foot-min a{color:var(--paper-2); font-size:11px;}
.foot-min .push{flex:1 1 auto;}
@media (max-width:860px){
  .foot-grid,.foot-grid--doc{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 24px;}
}

/* ---- draft banner ---------------------------------------------------- */
.draftbar{
  position:relative; z-index:50;
  background:rgba(191,78,48,.13);
  border-bottom:1px solid rgba(191,78,48,.34);
  color:#EBA88F;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:9px 0; text-align:center;
}

/* ---- panels & column grids ------------------------------------------- */
.panel{
  background:#FFFFFF;
  border:1px solid rgba(27,28,30,.10); border-radius:14px;
  padding:26px 28px;
  box-shadow:0 10px 30px rgba(27,28,30,.06);
}
.panel h3{margin-top:0;}
.panel > p:last-child{margin-bottom:0;}
.cols{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  margin:30px 0;
}
/* at two-across widths a trio strands its third card — let the last odd
   card take the full row instead (at one-across this is a no-op) */
@media (max-width:960px){
  .cols > :last-child:nth-child(odd){grid-column:1/-1;}
}
.cols .panel{margin:0;}

/* Forms — used by the demo request draft */
form.demo{max-width:560px;}
form.demo label{
  display:block; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bronze);
  margin:22px 0 8px;
}
form.demo input,form.demo select,form.demo textarea{
  width:100%; background:rgba(255,255,255,.6); border:1px solid var(--hair);
  border-radius:3px; color:var(--paper); padding:13px 15px;
  font-size:16px;                     /* 16px avoids iOS zoom-on-focus */
  font-family:inherit; min-height:48px;
}
form.demo textarea{min-height:104px; resize:vertical;}
form.demo input:focus,form.demo select:focus,form.demo textarea:focus{
  outline:none; border-color:var(--bronze);
}

/* ---- legal / long-form ----------------------------------------------- */
.legal{max-width:74ch;}
.legal h2{font-size:clamp(1.35rem,2.1vw,1.72rem); margin:56px 0 14px;}
.legal h3{font-size:1.08rem; margin:32px 0 8px; color:var(--bronze-lit);}
.legal p,.legal li{font-size:16px; color:var(--paper-2); max-width:74ch;}
.legal ul{padding-left:20px;} .legal li{margin:8px 0;}
.legal .note{
  display:block; color:var(--paper-3); font-size:13.5px; line-height:1.6;
  border-left:1px solid var(--hair); padding-left:14px; margin-top:38px;
}
.legal .updated{
  font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.1em; color:var(--paper-3); margin-bottom:44px;
}
table.doc{width:100%; border-collapse:collapse; margin:22px 0; font-size:15px;}
table.doc th,table.doc td{
  text-align:left; padding:12px 14px;
  border-bottom:1px solid var(--hair-2); vertical-align:top; color:var(--paper-2);
}
table.doc th{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bronze); font-weight:500; white-space:nowrap;
}
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}   /* wide tables scroll, body never does */
/* on phones a wide table needs a cue that it scrolls: a fade at the right
   edge and a one-line hint above (QA 9/03: compare tables were cut mid-word) */
@media (max-width:640px){
  .tablewrap{mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);}
  .tablewrap::before{content:"Swipe sideways to see the whole table \2192"; display:block;
    font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--paper-3); padding:0 0 8px;}
}

/* The sheet takes over at 1023px, not 760: with six links, Log in and the
   demo pill the bar ran past the right edge anywhere under ~1000px, which
   was the tablet-width horizontal scroll on every page. Above this the row
   has real room; below it the menu button is the better control anyway. */
@media (max-width:1023px){
  /* logo size lives in the redesign layer (56px desktop / 48px mobile) */
  .site-head .nav{display:none;}       /* the sheet menu takes over */
  .menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--hair); border-radius:2px;
    color:var(--paper); width:44px; min-height:44px; padding:0;
    cursor:pointer;
  }
  .menu-btn svg{width:20px; height:20px; display:block;}
  .menu-btn:hover{border-color:var(--bronze); color:var(--bronze-lit);}
  .nav--doc{display:none;}             /* legal pages: footer carries these */
}

/* ============================================================
   Redesign component layer — appended 2026-08-01.
   Everything below extends the base system; no base rule is
   overridden except where commented. Same tokens, same easing.
   ============================================================ */

/* ---- section grammar: eyebrow → headline → mandate ------------------- */
.mandate{
  font-weight:300; color:var(--paper-2);
  font-size:clamp(1.02rem,1.5vw,1.22rem); line-height:1.62;
  max-width:44rem; margin:18px 0 0;
}
.mandate b{color:var(--paper); font-weight:600;}

/* Fraunces — the money serif. Figures and pull-statements ONLY. */
.money{
  font-family:Fraunces,serif;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  color:var(--bronze);
}
.statement{
  font-family:Inter,sans-serif; font-weight:700;
  font-variation-settings:normal;
  font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.16;
  letter-spacing:-.025em; max-width:24ch; margin:0; text-wrap:balance;
}
.statement .b{
  color:transparent;
  background:linear-gradient(105deg,#4A5E78,#26579C 45%,#0040B9);
  -webkit-background-clip:text; background-clip:text;
}

/* ---- app-window chrome (all product recreations live inside this) ---- */
.win{
  background:linear-gradient(172deg,var(--raised),var(--surface));
  border:1px solid var(--hair); border-radius:8px; overflow:hidden;
  box-shadow:0 50px 110px -46px rgba(0,0,0,.95),
             0 1px 0 rgba(27,28,30,.05) inset;
}
.win-bar{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--hair-2);
  background:rgba(255,255,255,.5);
}
.win-dots{display:flex; gap:6px;}
.win-dots i{width:9px; height:9px; border-radius:50%; background:var(--hair);}
.win-bar .t{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--paper-3);
}
.win-bar .chip{
  margin-left:auto; white-space:nowrap;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em;
  color:var(--bronze); border:1px solid var(--hair); border-radius:20px;
  padding:3px 10px;
}
.recap{  /* the honesty caption under every recreation */
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-3); margin-top:14px;
}

/* ---- the convergence hero -------------------------------------------- */
.hero-conv{padding-block:clamp(48px,7vw,96px) clamp(56px,7vw,104px); overflow:visible;}
.conv-grid{
  display:grid; gap:clamp(44px,5.5vw,84px);
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  align-items:center;
}
.hero-conv h1{font-size:clamp(2.6rem,5.6vw,4.9rem); margin:18px 0 0;}
.hero-conv h1 .b{color:var(--bronze);}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:34px 0 30px;}
.hero-fact{
  display:flex; flex-wrap:wrap; gap:8px 24px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-3);
}
.hero-fact b{color:var(--bronze-dim); font-weight:500;}

/* The scene: scattered system chips converge into the command surface. */
.conv-scene{position:relative; min-height:540px;}
.conv-scene::before{
  content:""; position:absolute; inset:-10% -14%;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,
    rgba(0,64,185,.10), transparent 68%);
  pointer-events:none;
}
.chips{position:absolute; inset:0; pointer-events:none; z-index:2;}
.chip{
  position:absolute; display:inline-flex; align-items:center; gap:8px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  color:var(--paper-2); background:rgba(16,20,30,.88);
  border:1px solid var(--hair); border-radius:20px; padding:8px 14px;
  backdrop-filter:blur(4px);
}
.chip i{width:5px; height:5px; border-radius:50%; background:var(--bronze-dim); flex:none;}
/* Each chip starts scattered (--sx/--sy/--sr) and converges to its docked
   row position. Final state is the DEFAULT (progressive enhancement):
   the animation only runs under .js, driven from the start keyframe. */
.js .chip{animation:converge 1.6s var(--ease-out) both; animation-delay:var(--cd,0s);}
@keyframes converge{
  from{transform:translate(var(--sx),var(--sy)) rotate(var(--sr)); opacity:0;}
  30%{opacity:1;}
  to{transform:none; opacity:1;}
}
/* Docked chip row above the board */
.chip-row{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:14px;
}
.chip-row .chip{position:static;}
/* hairlines that plot from the chips down into the board */
.conv-lines{
  height:34px; margin:0 8% 14px; position:relative; z-index:1;
  background:
    linear-gradient(var(--hair) 0 0) left  12%/1px 100% no-repeat,
    linear-gradient(var(--hair) 0 0) left  38%/1px 100% no-repeat,
    linear-gradient(var(--hair) 0 0) left  63%/1px 100% no-repeat,
    linear-gradient(var(--hair) 0 0) left  88%/1px 100% no-repeat;
}
.js .conv-lines{transform-origin:top; animation:linedrop .8s var(--ease-out) 1.1s both;}
@keyframes linedrop{from{transform:scaleY(0);} to{transform:scaleY(1);}}
.js .conv-board{opacity:0; transform:translateY(22px); animation:boardup .9s var(--ease-out) 1.35s both;}
@keyframes boardup{to{opacity:1; transform:none;}}

/* ---- KPI board (the owner's board) ----------------------------------- */
.kgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px;}
.kpi{
  background:rgba(255,255,255,.46); border:1px solid var(--hair-2);
  border-radius:6px; padding:15px 16px 13px; position:relative; overflow:hidden;
}
.kpi .klbl{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--paper-3); display:block; margin-bottom:9px;
}
.kpi .kval{
  font-family:Inter,sans-serif; font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.35rem,2vw,1.7rem); line-height:1; color:var(--paper);
  font-feature-settings:"tnum" 1;
}
.kpi .kval .money{font-family:Fraunces,serif; font-weight:560; font-size:1.06em;}
.kpi .ksub{font-size:12px; color:var(--paper-2); margin:8px 0 0; max-width:none;}
.kpi--flag::after{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px;
  background:linear-gradient(var(--bronze),transparent);
}
.kpi .up{color:var(--sage);} .kpi .dn{color:#E0A48F;}

/* ---- the AI employee roster (baseball cards) ------------------------- */
.roster{
  display:grid; gap:1px; background:var(--hair-2);
  border:1px solid var(--hair-2); border-radius:6px; overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.emp{background:var(--ink-2); padding:24px 24px 22px; position:relative;
  transition:background .4s var(--ease);}
.emp:hover{background:var(--surface);}
.emp .callsign{
  display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
}
.emp .callsign b{
  font-family:Inter,sans-serif; font-weight:700; font-size:1.04rem;
  letter-spacing:-.015em; color:var(--paper);
}
.emp .callsign span{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--bronze-dim);
}
.emp p{font-size:14px; line-height:1.6; color:var(--paper-2); margin:0 0 12px; max-width:none;}
.emp .res{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.08em;
  color:var(--sage); border-top:1px solid var(--hair-2); padding-top:11px;
  display:block;
}

/* ---- weekly brief artifact ------------------------------------------- */
.brief{
  background:linear-gradient(174deg,var(--raised),var(--surface));
  border:1px solid var(--hair); border-radius:6px;
  padding:clamp(26px,4vw,44px) clamp(24px,4vw,48px);
  position:relative; overflow:hidden;
}
.brief::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--bronze), rgba(0,64,185,.1));
}
.brief .bhead{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bronze); margin-bottom:20px;
  display:flex; flex-wrap:wrap; gap:8px 20px;
}
.brief .bhead .dim{color:var(--paper-3);}
.brief h3{font-size:1.15rem; margin-bottom:14px;}
.brief p{font-size:15px; color:var(--paper-2); line-height:1.7;}
.brief .sig{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-3); margin-top:22px;
}

/* ---- approvals card + ledger (trust closer) -------------------------- */
.appr{border:1px solid var(--hair-2); border-radius:6px;
  background:rgba(255,255,255,.42); padding:18px 18px 16px; position:relative;}
.appr::before{content:""; position:absolute; left:0; top:14px; bottom:14px;
  width:2px; background:linear-gradient(var(--bronze),transparent);}
.appr-top{display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:13px;}
.who{display:flex; align-items:center; gap:10px;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--rust); flex:none;
  box-shadow:0 0 0 4px rgba(191,78,48,.14); animation:pulse 2.6s var(--ease) infinite;}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(191,78,48,0);}}
.appr h3{font-size:14.5px; font-weight:600; letter-spacing:0; margin:0;}
.why{font-size:13px; line-height:1.55; color:var(--paper-2);
  border-left:1px solid var(--hair); padding-left:12px; margin:0 0 13px; max-width:none;}
.why b{color:var(--paper); font-weight:600;}
.msg{background:rgba(255,255,255,.6); border:1px solid var(--hair-2); border-radius:4px;
  padding:13px 14px; font-size:13.5px; line-height:1.55; color:var(--paper);
  margin-bottom:14px; max-width:none;}
.acts{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.mini{font-family:Inter,sans-serif; font-size:12.5px; font-weight:600;
  padding:10px 15px; border-radius:3px; cursor:pointer; min-height:44px;
  border:1px solid var(--hair); background:transparent; color:var(--paper-2);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);}
.mini:hover{border-color:var(--bronze); color:var(--bronze-lit);}
.mini--go{background:var(--bronze); border-color:var(--bronze); color:#FFFFFF;}
.mini--go:hover{background:var(--bronze-lit); border-color:var(--bronze-lit); color:#FFFFFF;}
.appr-done{display:none; text-align:center; padding:16px 0 10px;}
.appr-done .tick{width:34px; height:34px; margin:0 auto 12px; border-radius:50%;
  border:1px solid var(--sage); display:grid; place-items:center;}
.appr-done .tick svg{width:16px; height:16px; stroke:var(--sage); fill:none;}
.appr-done p{color:var(--paper-2); font-size:13.5px; margin:0; max-width:none;}
.appr.sent .appr-body2{display:none;}
.appr.sent .appr-done{display:block; animation:pop .55s var(--ease-out);}
@keyframes pop{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

.ledger-amt{
  font-family:Fraunces,serif; font-weight:560;
  font-variation-settings:"opsz" 144;
  font-size:clamp(3rem,7vw,5.4rem); line-height:.9; letter-spacing:-.03em;
  color:var(--bronze); font-variant-numeric:tabular-nums;
}
.lrow{display:flex; justify-content:space-between; gap:12px; font-size:13px;
  color:var(--paper-2); padding-block:11px;
  border-top:1px solid var(--hair-2);}
.lrow .a{font-family:"IBM Plex Mono",monospace; color:var(--sage); font-size:11.5px; white-space:nowrap;}
.marginal{  /* the auditor's margin note */
  border-left:1px solid var(--hair); padding-left:16px;
  font-size:13.5px; line-height:1.65; color:var(--paper-3); max-width:38ch;
}
.marginal b{color:var(--paper-2); font-weight:600;}

/* ---- numbered steps (how it works) ----------------------------------- */
.step{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,4vw,52px); padding:clamp(34px,5vw,58px) 0;
  border-bottom:1px solid var(--hair-2);
}
.step:first-of-type{border-top:1px solid var(--hair-2);}
.step .n{
  font-family:Fraunces,serif; font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144;
  font-size:clamp(2.4rem,5vw,4rem); line-height:.8; color:var(--bronze-dim);
  letter-spacing:-.04em; font-weight:400;
}
.step h2{font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0 0 14px;}
.step p{color:var(--paper-2);}
.step .lede{margin-bottom:0;}

/* ---- roles ------------------------------------------------------------ */
.roles{display:grid; gap:1px; background:var(--hair-2); border:1px solid var(--hair-2);
  border-radius:6px; overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.role{background:var(--ink-2); padding:22px 24px;}
.role .who{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--bronze); display:block; margin-bottom:10px;
}
.role p{font-size:14px; color:var(--paper-2); margin:0; max-width:none; line-height:1.6;}

/* ---- numbers strip ----------------------------------------------------- */
.numstrip{border-block:1px solid var(--hair-2); padding-block:clamp(34px,5vw,58px);}
.numstrip .wrap{display:grid; gap:26px 20px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.nb .nval{
  font-family:Inter,sans-serif; font-weight:800; letter-spacing:-.04em;
  font-size:clamp(1.7rem,3vw,2.5rem); line-height:1; color:var(--bronze);
  font-feature-settings:"tnum" 1;
}
.nb .nlbl{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--paper-3); margin-top:9px; display:block;
}
.numnote{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-3); margin-top:26px;
}

/* ---- endpoint manifests / doc register (platforms) -------------------- */
.term{
  background:#0B0F18; border:1px solid rgba(205,179,132,.20); border-radius:6px;
  padding:20px 22px; font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  line-height:1.75; color:var(--paper-2); overflow-x:auto;
}
.term .cmd{color:#CDB384;}
.term .out{color:rgba(247,248,249,.58);}
.term .ok{color:var(--sage);}

/* ---- forms ------------------------------------------------------------ */
form.demo{max-width:600px;}
form.demo .frow{display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:640px){form.demo .frow{grid-template-columns:minmax(0,1fr);}}
form.demo .capmsg{font-size:13.5px; margin:14px 0 0; min-height:1.2em; color:var(--paper-3); max-width:none;}
/* status colours are the light-theme tokens — the dark-era pastels
   measured 1.8:1 / 2.0:1 on white (audit 2026-09-02) */
form.demo .capmsg.ok{color:var(--sage);}
form.demo .capmsg.err{color:var(--rust);}
form.demo .btn{margin-top:26px;}

/* ---- CTA band ---------------------------------------------------------- */
.cta-band{text-align:left; border-top:1px solid var(--hair);}
.cta-band .statement{max-width:26ch;}
.cta-band .hero-cta{margin-top:34px;}

/* ---- page-level responsive -------------------------------------------- */
@media (max-width:980px){
  .conv-grid{grid-template-columns:minmax(0,1fr);}
  .conv-scene{min-height:0; margin-top:6px;}
}
@media (max-width:640px){
  .kgrid{grid-template-columns:minmax(0,1fr);}
  .step{grid-template-columns:minmax(0,1fr); gap:14px;}
  .step .n{font-size:2rem;}
}
@media (prefers-reduced-motion:reduce){
  .js .chip,.js .conv-lines,.js .conv-board{animation:none; opacity:1; transform:none;}
  .dot{animation:none;}
}

/* ---- skip link --------------------------------------------------------- */
.skip{
  position:fixed; left:16px; top:-60px; z-index:100;
  background:var(--bronze); color:#FFFFFF; font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:4px; transition:top .3s var(--ease);
}
.skip:focus-visible{top:16px; color:#FFFFFF;}

/* two-up card grid where auto-fit would orphan a fourth card */
@media (min-width:641px){
  .cols--2{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Log in: a plain sibling of the nav links, set slightly stronger so a
   returning owner finds it without it competing with Book a demo. */
.nav .nav-in{color:var(--paper); font-weight:600;}
.nav .nav-in::after{background:var(--bronze-dim);}

/* Get started · $99: the offer reads as an action inside the link row —
   accent-coloured with a standing underline, one step below the pill. */
.nav .nav-start{color:var(--bronze); font-weight:600; white-space:nowrap;}
.nav .nav-start::after{width:100%; background:var(--bronze-dim); opacity:.55;}
.nav .nav-start:hover{color:var(--bronze-lit);}
.nav .nav-start:hover::after{opacity:1; background:var(--bronze);}

/* the header CTA pill: undo .nav a's padding/underline/color overrides */
.nav .btn{padding:11px 22px; color:#FFFFFF;}
.nav .btn:hover{color:#FFFFFF;}
.nav .btn::after{display:none;}

/* ============================================================
   Ecosystem repositioning layer — 2026-08-01 evening.
   ============================================================ */

/* board tabs across the command-center window */
.btabs{display:flex; gap:6px; padding:10px 14px 0; flex-wrap:wrap;}
.btab{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--paper-3);
  border:1px solid var(--hair-2); border-bottom:none;
  border-radius:5px 5px 0 0; padding:6px 11px; white-space:nowrap;
}
.btab--on{color:var(--bronze); border-color:var(--hair); background:rgba(255,255,255,.5);}

/* goal bar */
.goal{padding:14px 16px 12px; border:1px solid var(--hair-2); border-radius:6px;
  background:rgba(255,255,255,.46);}
.goal .glbl{display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-3); margin-bottom:10px;}
.goal .glbl b{color:var(--bronze); font-weight:500;}
.gbar{height:6px; border-radius:3px; background:rgba(27,28,30,.08); overflow:hidden;}
.gbar i{display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--bronze-dim),var(--bronze));
  width:var(--gp,50%);}
.js .gbar i{transform-origin:left; animation:gfill 1.2s var(--ease-out) .3s both;}
@keyframes gfill{from{transform:scaleX(0);} to{transform:scaleX(1);}}
.goal .gsub{display:flex; justify-content:space-between; gap:10px;
  font-size:12px; color:var(--paper-2); margin:9px 0 0;}
.goal .gsub .on{color:var(--sage);}

/* action rows — insight that ends in a to-do */
.actrow{display:flex; align-items:baseline; gap:14px; padding:15px 4px;
  border-top:1px solid var(--hair-2); font-size:14.5px; color:var(--paper-2);}
.actrow:last-of-type{border-bottom:1px solid var(--hair-2);}
.actrow .rank{font-family:Fraunces,serif; font-variation-settings:"opsz" 144;
  color:var(--bronze-dim); font-size:1.25rem; line-height:1; flex:none; width:1.6em;}
.actrow b{color:var(--paper); font-weight:600;}
.actrow .push{flex:1 1 auto;}
.actrow .why2{font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--paper-3); white-space:nowrap;}

/* boards gallery */
.bgal{display:grid; gap:1px; background:var(--hair-2); border:1px solid var(--hair-2);
  border-radius:6px; overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
.bg{background:var(--ink-2); padding:19px 20px 17px; transition:background .4s var(--ease);}
.bg:hover{background:var(--surface);}
.bg .bname{font-family:Inter,sans-serif; font-weight:700; font-size:.98rem;
  letter-spacing:-.01em; color:var(--paper); display:block; margin-bottom:6px;}
.bg p{font-size:13px; line-height:1.55; color:var(--paper-2); margin:0; max-width:none;}

/* compact trust band */
.trustband{border-block:1px solid var(--hair-2); padding-block:clamp(26px,4vw,40px);}
.trustband .wrap{display:grid; gap:18px 40px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.tb{display:flex; gap:13px; align-items:flex-start; font-size:14px;
  color:var(--paper-2); line-height:1.55;}
.tb b{color:var(--paper); font-weight:600;}
.tb svg{width:17px; height:17px; flex:none; margin-top:2px; stroke:var(--bronze); fill:none;}

/* ============================================================
   v3 — "less is more" pass (Linear/Mercury register).
   Centered hero, alternating feature rows, board chip cloud.
   ============================================================ */
.hero-center{text-align:center; padding-block:clamp(64px,9vw,128px) clamp(28px,4vw,48px);}
.hero-center .tag{display:block; margin-bottom:20px;}
.hero-center h1{font-size:clamp(2.9rem,6.4vw,5.4rem); margin:0 auto 22px; max-width:17ch;}
.hero-center .sub{
  font-size:clamp(1.06rem,1.6vw,1.3rem); line-height:1.6; font-weight:300;
  color:var(--paper-2); max-width:52ch; margin:0 auto 34px;
}
.hero-center .sub b{color:var(--paper); font-weight:600;}
.hero-center .hero-cta{justify-content:center; margin:0 0 10px;}

.conv-hero{max-width:960px; margin:clamp(36px,5vw,64px) auto 0; position:relative;}
.conv-hero::before{
  content:""; position:absolute; inset:-14% -18%; z-index:0;
  background:radial-gradient(ellipse 60% 55% at 50% 45%,
    rgba(0,64,185,.10), transparent 68%);
  pointer-events:none;
}
.conv-hero .chip-row{justify-content:center; position:relative; z-index:2;}
.conv-hero .conv-lines{margin-inline:18%;}
.conv-hero .win{position:relative; z-index:2;}
.conv-hero .recap{text-align:center;}

/* alternating feature rows — one eyebrow, one line, one sentence, one visual */
.feature{
  display:grid; gap:clamp(40px,6vw,96px);
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  align-items:center;
}
.feature--rev{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);}
.feature--rev .f-copy{order:2;}
.feature--rev .f-vis{order:1;}
.feature h2{font-size:clamp(1.9rem,3.6vw,2.9rem); margin:16px 0 16px;}
.feature .f-line{
  font-size:clamp(1.02rem,1.4vw,1.18rem); font-weight:300; line-height:1.6;
  color:var(--paper-2); max-width:42ch; margin:0;
}
.feature .f-line b{color:var(--paper); font-weight:600;}
.feature .f-more{margin-top:22px;}
@media (max-width:900px){
  .feature,.feature--rev{grid-template-columns:minmax(0,1fr);}
  .feature--rev .f-copy{order:1;} .feature--rev .f-vis{order:2;}
}

/* board chip cloud — breadth without weeds */
.chipcloud{display:flex; flex-wrap:wrap; gap:9px; justify-content:center;
  max-width:820px; margin:clamp(30px,4vw,44px) auto 0;}
.chipcloud span{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--paper-2);
  border:1px solid var(--hair-2); border-radius:20px; padding:8px 15px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.chipcloud span:hover{border-color:var(--bronze); color:var(--bronze-lit);}

/* centered statement band */
.stmt-band{text-align:center;}
.stmt-band .statement{margin-inline:auto; max-width:26ch;}
.stmt-band .f-line{max-width:46ch; margin:20px auto 0;
  font-size:clamp(1rem,1.4vw,1.16rem); font-weight:300; line-height:1.6;
  color:var(--paper-2);}
.stmt-band .f-line b{color:var(--paper); font-weight:600;}

/* steel colorway extensions (from the Xyzios mark).
   THIS BLOCK LOADS LAST AND WINS — light-role values, same names:
   "lit" = the more-visible steel (darker on light), "deep" = the quieter
   one; --ice was the near-white primary-button surface, and on light the
   primary becomes the accent. */
:root{
  --steel-lit:#344E69;
  --steel-deep:#7C8CA3;
  --ice:#0040B9;
}


/* header secondary action */
.navdemo{font-size:14px; font-weight:500; color:var(--paper-2);}
.navdemo:hover{color:var(--paper);}

/* ============================================================
   SITEWIDE ELEVATION — the landing page's design system,
   promoted to every page. 2026-08-02.
   ============================================================ */

/* steel chrome everywhere */
.nav a::after{background:var(--steel);}
.nav a[aria-current="page"]::after{background:var(--steel-deep);}
.plot{background:linear-gradient(90deg,var(--steel-deep),var(--steel-lit));}
::selection{background:var(--steel); color:#FFFFFF;}
:focus-visible{outline-color:var(--steel-lit);}
.site-foot a:hover,.foot-col a:hover{color:var(--steel-lit);}
.foot-mail{color:var(--steel-lit); border-bottom-color:rgba(74,94,120,.35); display:inline-block; padding:10px 0;}
.site-head.stuck{border-bottom-color:rgba(74,94,120,.18);}
a{color:var(--steel-lit);}
a:hover{color:var(--ice);}
.btn--ghost:hover{border-color:var(--steel); color:var(--ice);}
.halo{background:radial-gradient(circle,
  rgba(74,94,120,.06) 0%, rgba(74,94,120,.02) 38%, transparent 66%);}
.site-head img{height:56px;}
@media (max-width:760px){ .site-head img{height:48px;} }
.nav .btn{background:var(--ice); border-color:var(--ice); color:#FFFFFF;}
.nav .btn:hover{background:var(--bronze-lit); border-color:var(--bronze-lit); color:#FFFFFF;}
.tag{color:var(--steel-lit);}

/* glass — the shared surface */
.glass{background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(27,28,30,.10); border-radius:16px;
  box-shadow:0 12px 32px rgba(27,28,30,.06);
  transition:border-color .3s var(--ease), transform .3s var(--ease);}
.glass:hover{border-color:rgba(27,28,30,.20);}

/* panels graduate to glass */
.panel{background:#FFFFFF;
  border:1px solid rgba(27,28,30,.10); border-radius:16px;
  padding:clamp(24px,2.8vw,32px);
  box-shadow:0 12px 32px rgba(27,28,30,.06);
  transition:border-color .3s var(--ease), transform .3s var(--ease),
    box-shadow .3s var(--ease);}
.panel:hover{border-color:rgba(27,28,30,.20); transform:translateY(-2px);
  box-shadow:0 18px 44px rgba(27,28,30,.10);}

/* buttons: glow + glass variants, ice primaries in heroes */
.btn--glow{box-shadow:0 0 0 1px rgba(0,64,185,.15),
  0 8px 40px -6px rgba(52,78,105,.45);}
.btn--glow:hover{box-shadow:0 0 0 1px rgba(0,64,185,.3),
  0 10px 55px -6px rgba(0,64,185,.5);}
.btn--glass{background:rgba(255,255,255,.65); backdrop-filter:blur(10px);
  border-color:rgba(27,28,30,.14); color:var(--paper);}
.hero .btn:not(.btn--ghost),.hero-center .btn:not(.btn--ghost){
  background:var(--ice); border-color:var(--ice); color:#FFFFFF;}
.hero .btn:not(.btn--ghost):hover,.hero-center .btn:not(.btn--ghost):hover{
  background:var(--bronze-lit); border-color:var(--bronze-lit); color:#FFFFFF;}
/* the closing CTA bands and the mobile sticky bar match the nav/hero ice
   treatment, so "Book a demo" reads as one button sitewide */
.cta-band .hero-cta .btn:not(.btn--ghost),.mcta .btn{
  background:var(--ice); border-color:var(--ice); color:#FFFFFF;}
.cta-band .hero-cta .btn:not(.btn--ghost):hover,.mcta .btn:hover{
  background:var(--bronze-lit); border-color:var(--bronze-lit); color:#FFFFFF;}

/* gradient keyword — the signature type accent */
/* background-clip:text paints the glyphs THROUGH the element's background
   box, so any ink outside that box simply is not painted. On an inline run
   the box stops around the baseline, which sliced the tail off every
   descender in a gradient heading — the g in "growth engine.", the p in
   "up close.", the y in "Zero new payroll." Vertical padding on an inline
   element grows the background box without touching line layout, which is
   exactly the lever needed. Proven by rendering with background-clip
   switched off: the descender sat visibly below the painted box. */
.grad{font-style:normal; font-weight:inherit;
  background:linear-gradient(105deg,#4A5E78 0%,#26579C 42%,#0040B9 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:.18em;}

/* tri-color value accent */
.au{color:var(--bronze); font-weight:600;}

/* masked line reveals for heroes */
/* The reveal mask clips at the LINE BOX, and these headings run a 1.04
   line-height — tighter than the font's descender. That is the SECOND of the
   two things that were cutting the g (see .grad above for the first). Padding
   gives the clip box room; the equal negative margin keeps line spacing
   exactly where it was. The start offset has to clear the taller mask too, or
   the line peeks out of the padding before it animates. */
/* The mask has to clear the LINE's descender AND the .grad padding-bottom
   that background-clip:text needs in order to paint descenders at all.
   At .28em it was 60px short of its own content at hero size, which chopped
   the bottom off "AI growth engine." — measured, not guessed. Deliberately
   over-padded: the negative margin cancels it in layout, so there is no cost
   to being generous and every cost to being 30px short. */
.lm{display:block; overflow:hidden; padding-bottom:.9em; margin-bottom:-.9em;}
/* calc, not a tuned percentage: the line must clear its OWN height plus the
   mask's padding, and a bare percentage only resolves against the line box —
   so it under-shoots wherever the line-height differs (the home hero peeked
   by 14px at 145%). 100% + a hair more than the padding is exact everywhere. */
.li{display:block; transform:translateY(calc(100% + .32em));}
.js .li{animation:liup .9s var(--ease-out) forwards;}
.js .li1{animation-delay:.08s} .js .li2{animation-delay:.22s} .js .li3{animation-delay:.36s}
@keyframes liup{to{transform:none;}}
@media (prefers-reduced-motion:reduce){
  .li{transform:none;} .js .li{animation:none;}
}

/* hero eyebrow pill */
.pillb{display:inline-flex; align-items:center; gap:9px;
  font-family:Inter,sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--steel-lit);
  background:#FFFFFF; border:1px solid rgba(52,78,105,.2);
  border-radius:30px; padding:9px 18px; margin-bottom:26px;
  backdrop-filter:blur(10px);}
.pillb i{width:6px; height:6px; border-radius:50%; background:var(--bronze);}

/* selling-point strip */
.derisk{display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center;
  margin:18px 0 0; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--paper-3); max-width:none;}
.derisk i{font-style:normal; color:var(--steel);}

/* custom pointer — dot + trailing ring (fine pointers only) */
.cur,.curing{position:fixed; left:0; top:0; pointer-events:none; z-index:200;
  border-radius:50%; display:none;}
.cur{width:12px; height:12px; background:#0040B9; margin:-6px 0 0 -6px;
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 2px 8px rgba(27,28,30,.25);
  transition:width .18s var(--ease), height .18s var(--ease),
    margin .18s var(--ease), box-shadow .18s var(--ease);}
.cur.hot{width:19px; height:19px; margin:-9.5px 0 0 -9.5px;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 8px rgba(0,64,185,.14),
    0 2px 10px rgba(27,28,30,.25);}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* gated on .js: the replacement cursor only moves via script, so the
     native cursor is hidden only when the script actually runs */
  .js .cur{display:block;}
  /* The dot replaces the native cursor only over interactives — hiding it
     over paragraphs and inputs made text look unselectable, and it vanished
     over the Turnstile/Cal iframes anyway (audit 2026-09-02). */
  .js a,.js button,.js .btn,.js summary,.js label{cursor:none;}
  .js .cur{opacity:0; transition:opacity .2s;}
  .js .cur.hot{opacity:1;}
}

/* forms graduate to the glass register */
form.demo input,form.demo select,form.demo textarea{
  background:#FFFFFF; border:1px solid rgba(27,28,30,.16);
  border-radius:10px; color-scheme:light;
  transition:border-color .3s var(--ease);}
form.demo input:focus,form.demo select:focus,form.demo textarea:focus{
  outline:none; border-color:var(--steel-lit);}
form.demo .btn{border-radius:100px;}

/* editorial step rows — steel numbers, quiet hover */
.step .n{color:var(--steel);}
.step{transition:background .3s var(--ease);}
.step:hover{background:rgba(74,94,120,.03);}
.step .n{font-family:"IBM Plex Mono",monospace; font-weight:500;
  font-variation-settings:normal; font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:.1em;}

/* ============================================================
   DEPTH PASS — spotlight cards, marquee, emphasis, draw-on-reveal.
   ============================================================ */

/* cursor spotlight on cards (mercury cue) — driven from Base */
.panel,.modcard{position:relative;}
.panel::after,.modcard::after{content:""; position:absolute; inset:0;
  border-radius:inherit; opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
  background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),
    rgba(52,78,105,.09), transparent 65%);}
@media (pointer:fine){
  .panel:hover::after,.modcard:hover::after{opacity:1;}
}

/* emphasized card — the one the eye should land on */
.panel--hot{border-color:rgba(0,64,185,.3);}
.panel--hot:hover{border-color:rgba(0,64,185,.5);}
.panel--hot::before{content:""; position:absolute; inset:-1px;
  border-radius:inherit; pointer-events:none; z-index:-1;
  background:linear-gradient(160deg, rgba(0,64,185,.12), transparent 55%);}

/* board-name marquee — promoted from the landing page */
.marq{overflow:hidden; padding-block:clamp(20px,3vw,34px);
  border-block:1px solid var(--hair-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marq-track{display:flex; gap:26px; align-items:center; width:max-content;
  animation:marq 46s linear infinite;}
.marq-track span{font-family:Inter,sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper-3);
  white-space:nowrap;}
.marq-track span:hover{color:var(--steel-lit);}
.marq-track i{color:var(--steel); font-style:normal;}
@keyframes marq{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .marq-track{animation:none; flex-wrap:wrap; width:auto;}
}

/* specular sheen for recreation frames */
/* overflow:hidden is load-bearing: the sheen parks OUTSIDE its card for 82%
   of its loop, and on /product/ that widened the page to 2,084px (QA 9/03) */
.sheen{position:relative; overflow:hidden;}
.sheen::after{content:""; position:absolute; inset:0; z-index:9;
  pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 32%,
    rgba(0,64,185,.05) 45%, rgba(0,64,185,.08) 50%,
    rgba(0,64,185,.05) 55%, transparent 68%);
  transform:translateX(-130%);}
.js .sheen.in::after{animation:sheenx 10s var(--ease) 1.2s infinite;}
@keyframes sheenx{0%{transform:translateX(-130%);} 18%{transform:translateX(130%);}
  100%{transform:translateX(130%);}}
@media (prefers-reduced-motion:reduce){ .js .sheen.in::after{animation:none;} }

/* ============================================================
   LEGAL REFRESH — compliance docs on the new theme.
   Content markup unchanged (.legal, .updated, table.doc, .scope);
   this layer restyles it to the steel/bronze system.
   ============================================================ */
.legal{max-width:74ch; margin-inline:auto;}
.legal .updated{font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--paper-3);
  margin:14px 0 0;}
.legal h2{font-family:Inter,sans-serif; font-size:clamp(1.2rem,1.8vw,1.45rem);
  font-weight:700; letter-spacing:-.015em; color:var(--paper);
  margin:clamp(36px,5vh,52px) 0 12px;}
.legal h3{font-size:1.04rem; font-weight:700; color:var(--steel-lit);
  margin:28px 0 10px;}
.legal p,.legal li{font-size:15.5px; line-height:1.72; color:var(--paper-2);}
.legal p{margin:0 0 14px;}

/* Symmetry (Bill, 9/03): a two-column card row with exactly three cards
   stranded the third on its own line at desktop widths. Three cards go
   three across; the ≤960 rule below still spans an odd last card. */
@media (min-width:961px){
  .cols:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* Measure: FAQ answers, pricing and use-case prose ran 93–98ch at 14.5px
   (audit 2026-09-02); 68ch is the ceiling for running text. Headings and
   cards are unaffected. */
.fq p,.faq p,.mandate,.lede,.f-line,.bp,.legal p,.legal li{max-width:68ch;}
.sec-head--c .mandate,.sec-head--c .lede{margin-left:auto; margin-right:auto;}

/* Forms: 16px inputs stop iOS zooming on focus; the invalid state marks the
   field, not just the status line. */
form.demo input,form.demo select,form.demo textarea,.nl-form input,.subcap input{font-size:16px;}
form.demo .is-err,form.demo [aria-invalid="true"]{border-color:var(--rust) !important; box-shadow:0 0 0 3px rgba(179,37,25,.12);}
form.demo input:focus-visible,form.demo select:focus-visible,form.demo textarea:focus-visible{outline:2px solid var(--bronze); outline-offset:2px;}
.legal b{color:var(--paper); font-weight:600;}
.legal a{color:var(--steel-lit); font-weight:600; text-decoration:none;}
.legal a:hover{color:var(--ice);}
.legal .tablewrap{overflow-x:auto; margin:18px 0 24px;
  border:1px solid rgba(27,28,30,.10); border-radius:14px;
  background:#FFFFFF;}
.legal .tablewrap table.doc{margin:0; border:none;}
.legal table.doc{font-size:14px;}
.legal table.doc th{font-family:Inter,sans-serif; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--steel-lit);
  text-align:left; padding:14px 16px; background:none;
  border-bottom:1px solid rgba(52,78,105,.16);}
.legal table.doc td{padding:13px 16px; color:var(--paper-2); line-height:1.55;
  vertical-align:top; border-bottom:1px solid rgba(52,78,105,.08);}
.legal table.doc tr:last-child td{border-bottom:none;}
.legal .scope{border-left:2px solid rgba(0,64,185,.4);
  padding:2px 0 2px 16px; margin:0 0 18px;}
.legal .scope code{display:block; font-family:"IBM Plex Mono",monospace;
  font-size:13px; color:var(--bronze); margin-bottom:6px; word-break:break-all;}
.legal .scope p{margin:0; font-size:15px;}
.legal .operator{font-size:15px; color:var(--paper-3); margin:0 0 26px;}

/* Turnstile slot — invisible until the widget actually renders */
.ts-slot{margin:2px 0 14px;}
.ts-slot:empty{display:none;}

/* visually hidden (a11y) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* calculator fine print — the estimator disclaimer */
.calc-fine{margin:16px 0 0; font-size:11.5px; line-height:1.6;
  color:var(--paper-3); max-width:none;}

/* newsletter band — the white plate above the footer */
.nlband{padding:clamp(44px,6vw,96px) 0 clamp(10px,2vw,24px);}
.nl{position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,64px); align-items:center;
  background:#FFFFFF;
  border:1px solid rgba(0,64,185,.22); border-radius:22px;
  padding:clamp(32px,5vw,64px);
  box-shadow:0 30px 80px -30px rgba(27,28,30,.25);}
.nl::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 85% 140% at 100% 0%,
      rgba(0,64,185,.10), transparent 55%),
    radial-gradient(ellipse 60% 120% at 0% 100%,
      rgba(74,94,120,.07), transparent 60%);}
.nl > *{position:relative;}
.nl-h{margin:14px 0 14px;
  font-size:clamp(1.75rem,3.4vw,2.7rem); line-height:1.06;}
.nl-p{font-size:14.5px; line-height:1.68; color:var(--paper-2);
  margin:0; max-width:44ch;}
.nl-row{display:flex; gap:10px; flex-wrap:wrap;}
.nl-row input{flex:1; min-width:210px; font-family:Inter,sans-serif;
  font-size:15px; color:var(--paper);
  background:rgba(27,28,30,.045);
  border:1px solid rgba(52,78,105,.22); border-radius:999px;
  padding:14px 22px; transition:border-color .3s var(--ease),
  background .3s var(--ease);}
.nl-row input:focus{outline:none; border-color:var(--bronze);
  background:rgba(27,28,30,.07);}
.nl-row input::placeholder{color:var(--paper-3);}
.nl-fine{margin:14px 0 0; font-family:"IBM Plex Mono",monospace;
  font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--paper-3); max-width:none;}
.foot-submsg{font-size:12.5px; color:var(--paper-3); margin:10px 0 0;
  min-height:1.2em; max-width:none;}
.foot-submsg.err{color:var(--rust);}
@media (max-width:860px){
  .nl{grid-template-columns:minmax(0,1fr);
    padding:clamp(26px,6vw,40px); gap:22px;}
}

/* Section rhythm — appended 2026-08-15. Long pages read as chapters:
   selected sections carry .band (a slightly lifted ground + hairlines)
   so the scroll alternates instead of one continuous dark field. */
section.band{
  background:var(--ink-2);
  border-top:1px solid var(--hair-2);
  border-bottom:1px solid var(--hair-2);
}

/* Centred section heads — appended 2026-08-19.
   .mandate is max-width:44rem with zero side margins, so inside a centred
   head the TEXT centred while the paragraph BLOCK stayed flush left. That
   read as a misalignment against the heading above it. */
.sec-head--c{text-align:center;}
.sec-head--c .mandate{margin-inline:auto;}

/* Footer social — appended 2026-08-19. Sits under the contact email in the
   brand column; 40px hit targets, steel at rest and bronze on hover like
   every other footer link. */
.foot-social{display:flex; gap:10px; margin-top:20px;}
.foot-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--hair); color:var(--steel-lit);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.foot-social a:hover{color:var(--bronze); border-color:var(--bronze);}
.foot-social svg{width:19px; height:19px; display:block;}


/* Uneven wraps were the complaint: fifteen paragraphs on the homepage ended
   on a last line under 30% of the longest, some at 8%. text-wrap:pretty is
   built for exactly that — it costs nothing and degrades to normal. */
p,li,figcaption{text-wrap:pretty;}
h1,h2,h3,h4,.statement{text-wrap:balance;}

/* pretty only rescues the LAST line; these blocks needed every line evened,
   which is what balance does. Scoped to the short blocks the audit named —
   balance is capped at a handful of lines and would do nothing for long
   body copy anyway, so applying it everywhere would be noise. */
.f-line,.mandate,.stand,.qans,.shot-cap,.anchor-line,.calc-fine,.nl-fine,
.bp,.qfoot,.tp-cap,.fade-cap,.recap,.lever p,.whatdef,.ledger-line,
.apmsg p,.grow-head p,.calc-head .f-line,
.qcard p,.fnote p,.fnote-sec p,.vs-col span,
.v4sub,.calc-fine,.mb-kd{text-wrap:balance;}


/* ambient auras — the light era's atmosphere, shared by hero sections */
.aura{position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  filter:blur(60px); opacity:.55;}
.aura--a{width:min(46vw,620px); aspect-ratio:1; left:-8%; top:4%;
  background:radial-gradient(circle at 40% 40%, rgba(0,64,185,.10), rgba(0,64,185,0) 70%);
}
.aura--b{width:min(38vw,520px); aspect-ratio:1; right:-6%; top:16%;
  background:radial-gradient(circle at 60% 40%, rgba(74,94,120,.10), rgba(74,94,120,0) 70%);
}
@keyframes adrift{from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(4vw,3vh,0) scale(1.12);}}
.hero{position:relative; overflow:hidden;}
@media (prefers-reduced-motion:reduce){ .aura{animation:none;} }

/* header wordmark: inlined so the mark draws itself once on load */
.site-head .lg-svg{height:56px; width:auto; display:block;}
@media (max-width:760px){ .site-head .lg-svg{height:48px;} }
.lg-mark,.lg-diag{stroke-dasharray:1; stroke-dashoffset:1;}
.lg-mark{animation:lgdraw .8s var(--ease-out) .15s forwards;}
.lg-diag{animation:lgdraw .55s var(--ease-out) .7s forwards;}
@keyframes lgdraw{to{stroke-dashoffset:0;}}
/* the mark redraws itself on hover — same strokes, alias keyframes so the
   animation property actually changes and restarts */
.site-head a:hover .lg-mark,.site-head a:focus-visible .lg-mark{
  animation:lgdraw2 .7s var(--ease-out) 0s forwards;}
.site-head a:hover .lg-diag,.site-head a:focus-visible .lg-diag{
  animation:lgdraw2 .45s var(--ease-out) .5s forwards;}
@keyframes lgdraw2{from{stroke-dashoffset:1;} to{stroke-dashoffset:0;}}
html.settled .site-head a:hover .lg-mark,
html.settled .site-head a:hover .lg-diag,
html.settled .site-head a:focus-visible .lg-mark,
html.settled .site-head a:focus-visible .lg-diag{
  animation-duration:.7s !important;}
html.settled .site-head a:hover .lg-diag,
html.settled .site-head a:focus-visible .lg-diag{
  animation-duration:.45s !important; animation-delay:.5s !important;}
@media (prefers-reduced-motion:reduce){
  .lg-mark,.lg-diag{animation:none; stroke-dashoffset:0;}
}

/* settle fallback: 1.5s after load, every load-orchestration animation is
   forced to its END state — a stalled clock (slow device, odd browser,
   headless capture) can never leave the hero invisible. Looping ambience
   in the stage goes static after settle, which suits the no-fluff rule. */
html.settled .lm .li, html.settled .v4sub, html.settled .mdeck,
html.settled .hero-cta, html.settled .derisk, html.settled .sat,
html.settled .satcard, html.settled .dash *, html.settled .lg-mark,
html.settled .lg-diag, html.settled .pillb{
  animation-duration:0s !important; animation-delay:0s !important;
}


/* ---- the board grammar, distilled from the product's own screens:
   mono-blue card titles, status dots, colored sublines, hairline tables,
   risk rails, state chips. One kit, every page's product frames. ---- */
.bd{background:#FFFFFF; border:1px solid rgba(27,28,30,.11);
  border-radius:12px; padding:14px 16px 10px;
  box-shadow:0 10px 26px rgba(27,28,30,.07); text-align:left;}
.bd--mini{padding:12px 14px 10px; margin-top:4px;}
.bd-krow{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.bd-k{border:1px solid rgba(27,28,30,.08); border-radius:10px; padding:10px 12px;}
.bd-kl{display:flex; align-items:center; gap:6px;
  font-family:"IBM Plex Mono",monospace; font-size:8.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#0040B9;}
.bd-dot{width:6px; height:6px; border-radius:50%; background:#2E7D5B;
  margin-left:auto;}
.bd-dot--a{background:#B15400;}
.bd-kv{display:block; font-family:Inter,sans-serif; font-weight:800;
  font-size:1.35rem; letter-spacing:-.02em; color:#1B1C1E; margin:4px 0 2px;
  font-variant-numeric:tabular-nums;}
.bd-ks{display:block; font-style:normal; font-size:10.5px;
  color:rgba(27,28,30,.55);}
.bd-ks.up{color:#005929; font-weight:600;}
.bd-line{display:flex; gap:8px; align-items:center; padding:9px 2px;
  border-top:1px dashed rgba(27,28,30,.10); margin-top:10px; font-size:12px;
  color:rgba(27,28,30,.75);}
.bd--mini .bd-line{border-top:0; margin-top:0; padding-top:2px;}
.bd-line--dim{color:rgba(27,28,30,.45); font-size:11px; padding-top:0;
  border-top:0; margin-top:0;}
.bd-flag{font-style:normal; font-weight:600; color:#B15400; margin-left:auto;
  font-size:11.5px;}
.bd-ok{font-style:normal; font-weight:600; color:#005929; margin-left:auto;
  font-size:11.5px;}
.bd-th,.bd-tr{display:grid; grid-template-columns:1.4fr 1fr .8fr 1.1fr;
  gap:8px; align-items:baseline; padding:7px 2px;}
.bd-th{font-family:"IBM Plex Mono",monospace; font-size:8.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(27,28,30,.45);
  border-bottom:1px solid rgba(27,28,30,.10);}
.bd-tr{font-size:12.5px; color:rgba(27,28,30,.75);
  border-bottom:1px solid rgba(27,28,30,.06);
  font-variant-numeric:tabular-nums;}
.bd-tr b{font-weight:700; color:#1B1C1E;}
.bd-tr--sum{border-bottom:0; color:rgba(27,28,30,.5);}
.bd-good{color:#005929 !important;}
.bd-bad{color:#B32519 !important;}
.bd-risk{display:flex; gap:10px; align-items:center; padding:2px 0 10px;
  font-size:12.5px; color:rgba(27,28,30,.7);}
.bd-risk b{display:block; color:#1B1C1E; font-weight:700; font-size:13px;}
.bd-risk span{font-size:11px;}
.rk-rail{width:3.5px; align-self:stretch; border-radius:2px;
  background:#B32519; flex:0 0 auto;}
.bd-chip{font-style:normal; font-family:"IBM Plex Mono",monospace;
  font-size:8.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; border-radius:6px; padding:4px 8px;
  white-space:nowrap;}
.bd-chip--k{background:rgba(0,64,185,.10); color:#0040B9; margin-left:auto;}
.bd-chip--r{background:rgba(179,37,25,.10); color:#B32519;}
.bd-chip--g{background:rgba(0,89,41,.10); color:#005929;}
.bd-arrow{color:rgba(27,28,30,.35);}

/* ---- note figures: simulated board fragments inside blog posts ---- */
.nfig{margin:clamp(26px,3.5vw,38px) 0;}
.nfig .bd{max-width:640px; margin:0 auto;}
.nfig-cap{display:block; text-align:center; margin-top:10px;
  font-style:normal;
  font-family:"IBM Plex Mono",monospace; font-size:9px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(27,28,30,.45);}
.nf-strike{font-style:normal; font-weight:700; margin-left:auto;
  color:rgba(27,28,30,.45); text-decoration:line-through;
  text-decoration-color:rgba(179,37,25,.55); font-variant-numeric:tabular-nums;}
.nf-bar{display:flex; align-items:center; gap:10px; padding:7px 0;
  font-size:12.5px; color:rgba(27,28,30,.7);}
.nf-bar > span:first-child{flex:0 0 118px;}
.nf-bar i{flex:1; height:9px; border-radius:5px; background:rgba(27,28,30,.06);
  overflow:hidden; position:relative;}
.nf-bar i::after{content:""; position:absolute; inset:0; width:var(--w,50%);
  border-radius:5px; background:var(--c,#0040B9);}
.nf-bar b{flex:0 0 auto; font-weight:700; color:#1B1C1E; min-width:44px;
  text-align:right; font-variant-numeric:tabular-nums;}
.nf-heat{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px;
  margin:6px 0 4px;}
.nf-heat i{display:block; height:22px; border-radius:4px;
  background:rgba(0,120,60,calc(var(--a,.3)*.5));
  border:1px solid rgba(0,89,41,calc(var(--a,.3)*.25));}
.nf-x{display:flex; justify-content:space-between;
  font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(27,28,30,.4);}
.nf-chips{display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 2px;}
.nf-kgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;}

/* mobile tap areas: visually identical, hit target >=38px */
.foot-tm a{display:inline-block; padding:12px 6px; margin:-12px -6px;}