/* ---- 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{
  /* Ink: layered rather than flat, so surfaces separate without borders */
  --ink:        #080A10;
  --ink-2:      #0B0E16;
  --surface:    #10141E;
  --raised:     #161B27;

  /* Brand metals — kept from the product, refined for print-like contrast */
  --bronze:     #CDB384;
  --bronze-lit: #E8D3A9;
  --bronze-dim: #A78F65;   /* #8A7550 measured 4.47:1 — just under AA */
  --rust:       #BF4E30;
  --steel:      #7487A3;
  --sage:       #6FA88A;

  /* Warm paper white — cold #FFF reads cheap on this ground */
  --paper:      #F3F0E9;
  --paper-2:    rgba(243,240,233,.66);
  /* .42 measured 3.69:1 on --ink — under AA for the 10–11px mono labels that
     use it. Raised until it measured over 4.5:1. */
  --paper-3:    rgba(243,240,233,.58);

  --hair:       rgba(205,179,132,.16);
  --hair-2:     rgba(243,240,233,.07);

  --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:#0A0D14;}

/* 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(205,179,132,.075) 0%, rgba(205,179,132,.028) 38%, transparent 66%);
}

/* ---- 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(8,10,16,.92), rgba(8,10,16,.55) 70%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.site-head.stuck{border-bottom-color:var(--hair);}
.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{
  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(8,10,16,.96);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  display:none; flex-direction:column;
  padding:calc(18px + env(safe-area-inset-top)) var(--gutter)
          calc(34px + env(safe-area-inset-bottom));
}
.sheet.open{display:flex;}
.sheet-top{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:min(9vh,72px);}
.sheet-top img{height:40px; width:auto; display:block;}
.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;}
.sheet nav a{
  font-family:Inter,sans-serif; font-weight:800;
  font-size:clamp(1.9rem,8.6vw,2.8rem); letter-spacing:-.03em; line-height:1.1;
  color:var(--paper); display:flex; align-items:baseline; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--hair-2);
}
.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}
@keyframes sheetin{to{opacity:1; transform:none;}}
.sheet-foot{
  margin-top: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{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:#0A0D14;
  cursor:pointer; position:relative; overflow:hidden;
  transition:background .35s var(--ease), color .35s var(--ease),
             transform .35s var(--ease);
  min-height:44px;                       /* touch target floor */
}
.btn:hover{background:var(--bronze-lit); border-color:var(--bronze-lit); color:#0A0D14;}
.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;}

section{padding-block:clamp(80px, 11vw, 168px);}
.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. */
.js .rise{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.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:5px 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:11px;
  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;}
.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:linear-gradient(168deg,var(--raised),var(--surface));
  border:1px solid var(--hair); border-radius:4px;
  padding:26px 28px;
}
.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;
}
.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(8,10,16,.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;}   /* wide tables scroll, body never does */

@media (max-width:760px){
  .site-head img{height:38px;}
  .site-head .nav{display:none;}       /* the sheet menu takes over */
  .menu-btn{
    display:inline-flex; align-items:center; gap:10px;
    background:none; border:1px solid var(--hair); border-radius:2px;
    color:var(--paper); font-family:"IBM Plex Mono",monospace;
    font-size:11px; font-weight:500; letter-spacing:.16em;
    text-transform:uppercase; padding:0 16px; min-height:44px; cursor:pointer;
  }
  .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,var(--steel-lit),#9DACC0 35%,#CFC5AC 70%,var(--bronze));
  -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(243,240,233,.05) inset;
}
.win-bar{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--hair-2);
  background:rgba(8,10,16,.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(205,179,132,.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(8,10,16,.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(205,179,132,.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(8,10,16,.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(8,10,16,.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:#0A0D14;}
.mini--go:hover{background:var(--bronze-lit); border-color:var(--bronze-lit); color:#0A0D14;}
.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:#05070C; border:1px solid var(--hair-2); 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:var(--bronze);}
.term .out{color:var(--paper-3);}
.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;}
form.demo .capmsg.ok{color:#7FD49A;}
form.demo .capmsg.err{color:#EBA88F;}
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:#0A0D14; font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:4px; transition:top .3s var(--ease);
}
.skip:focus-visible{top:16px; color:#0A0D14;}

/* 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));}
}

/* the header CTA pill: undo .nav a's padding/underline/color overrides */
.nav .btn{padding:11px 22px; color:#0A0D14;}
.nav .btn:hover{color:#0A0D14;}
.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(8,10,16,.5);}

/* goal bar */
.goal{padding:14px 16px 12px; border:1px solid var(--hair-2); border-radius:6px;
  background:rgba(8,10,16,.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(243,240,233,.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(205,179,132,.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) */
:root{
  --steel-lit:#A9BCD4;
  --steel-deep:#5A6C88;
  --ice:#E9EEF5;
}


/* 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:#0B0F18;}
: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(116,135,163,.35);}
.site-head.stuck{border-bottom-color:rgba(116,135,163,.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(116,135,163,.06) 0%, rgba(116,135,163,.02) 38%, transparent 66%);}
.site-head img{height:40px;}
.nav .btn{background:var(--ice); border-color:var(--ice); color:#0B0F18;}
.nav .btn:hover{background:#fff; border-color:#fff; color:#0B0F18;}
.tag{color:var(--steel-lit);}

/* glass — the shared surface */
.glass{background:rgba(20,25,37,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(169,188,212,.13); border-radius:16px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);}
.glass:hover{border-color:rgba(169,188,212,.28);}

/* panels graduate to glass */
.panel{background:rgba(20,25,37,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(169,188,212,.13); border-radius:16px;
  padding:clamp(24px,2.8vw,32px);
  transition:border-color .3s var(--ease), transform .3s var(--ease);}
.panel:hover{border-color:rgba(169,188,212,.3); transform:translateY(-2px);}

/* buttons: glow + glass variants, ice primaries in heroes */
.btn--glow{box-shadow:0 0 0 1px rgba(233,238,245,.15),
  0 8px 40px -6px rgba(169,188,212,.45);}
.btn--glow:hover{box-shadow:0 0 0 1px rgba(233,238,245,.3),
  0 10px 55px -6px rgba(205,179,132,.5);}
.btn--glass{background:rgba(22,27,39,.5); backdrop-filter:blur(10px);
  border-color:rgba(169,188,212,.25); color:var(--paper);}
.hero .btn:not(.btn--ghost),.hero-center .btn:not(.btn--ghost){
  background:var(--ice); border-color:var(--ice); color:#0B0F18;}
.hero .btn:not(.btn--ghost):hover,.hero-center .btn:not(.btn--ghost):hover{
  background:#fff; border-color:#fff; color:#0B0F18;}

/* gradient keyword — the signature type accent */
.grad{font-style:normal; font-weight:inherit;
  background:linear-gradient(105deg,var(--steel-lit) 0%,#9DACC0 32%,#CFC5AC 68%,var(--bronze) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}

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

/* masked line reveals for heroes */
.lm{display:block; overflow:hidden;}
.li{display:block; transform:translateY(112%);}
.js .li{animation:liup .9s var(--ease-out) forwards;}
.js .li1{animation-delay:.08s} .js .li2{animation-delay:.22s}
@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:rgba(22,27,39,.55); border:1px solid rgba(169,188,212,.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:6px; height:6px; background:var(--ice); margin:-3px 0 0 -3px;}
.curing{width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(169,188,212,.45);
  transition:transform .22s var(--ease), border-color .22s var(--ease);}
.curing.hot{transform:scale(1.7); border-color:rgba(169,188,212,.9);}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cur,.curing{display:block;}
  body{cursor:none;}
  a,button,.btn{cursor:none;}
}

/* forms graduate to the glass register */
form.demo input,form.demo select,form.demo textarea{
  background:rgba(20,25,37,.55); border:1px solid rgba(169,188,212,.2);
  border-radius:10px; color-scheme:dark;
  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(116,135,163,.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(169,188,212,.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(205,179,132,.3);}
.panel--hot:hover{border-color:rgba(205,179,132,.5);}
.panel--hot::before{content:""; position:absolute; inset:-1px;
  border-radius:inherit; pointer-events:none; z-index:-1;
  background:linear-gradient(160deg, rgba(205,179,132,.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 */
.sheen{position:relative;}
.sheen::after{content:""; position:absolute; inset:0; z-index:9;
  pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 32%,
    rgba(233,238,245,.05) 45%, rgba(205,179,132,.08) 50%,
    rgba(233,238,245,.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;}
.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(169,188,212,.13); border-radius:14px;
  background:rgba(20,25,37,.45);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);}
.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(169,188,212,.16);}
.legal table.doc td{padding:13px 16px; color:var(--paper-2); line-height:1.55;
  vertical-align:top; border-bottom:1px solid rgba(169,188,212,.08);}
.legal table.doc tr:last-child td{border-bottom:none;}
.legal .scope{border-left:2px solid rgba(205,179,132,.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;}