/* Conduxe marketing site — shared stylesheet.
   Base: the Clear Case concept (design-artifacts/marketing-clearcase--a6a1b9bb.html).
   Fonts and figures are served from assets/ so both pages share one cache entry. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display:swap;
  src: url(fonts/archivo-variable.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display:swap;
  src: url(fonts/ibm-plex-mono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display:swap;
  src: url(fonts/ibm-plex-mono-600.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display:swap;
  src: url(fonts/ibm-plex-sans-variable.woff2) format('woff2');
}

/* tokens */
:root{
  --paper:#FFFFFF;
  --panel:#F7F4EE;
  --panel-2:#EFEAE0;
  --ink:#17140F;
  --ink-2:#4C463C;
  --ink-3:#7C7466;
  --rule:#E6E0D4;
  --rule-2:#D6CFC0;
  --rust:#A8461F;
  --rust-hi:#C0592F;
  --rust-wash:#FBEDE6;
  --band:#17140F;
  --band-panel:#221E18;
  --band-ink:#F6F2EA;
  --band-ink-2:#A9A093;
  --band-rule:#332D25;
  --band-rust:#E8825C;
  --shadow-1:0 1px 2px rgba(23,20,15,.05), 0 8px 24px -12px rgba(23,20,15,.14);
  --shadow-2:0 2px 4px rgba(23,20,15,.06), 0 28px 60px -28px rgba(23,20,15,.28);
  --shadow-3:0 40px 90px -40px rgba(23,20,15,.42), 0 4px 12px rgba(23,20,15,.08);
  --max:1220px;
  --gut:clamp(20px,5vw,64px);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#131110; --panel:#1C1916; --panel-2:#252017;
    --ink:#F6F2EA; --ink-2:#C3BCAF; --ink-3:#8E8677;
    --rule:#2E2922; --rule-2:#3D372E;
    --rust:#E8825C; --rust-hi:#F0A184; --rust-wash:#2C1B13;
    --band:#0B0A09; --band-panel:#171512; --band-rule:#2A251F;
    --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-2:0 2px 4px rgba(0,0,0,.5), 0 28px 60px -28px rgba(0,0,0,.8);
    --shadow-3:0 40px 90px -40px rgba(0,0,0,.9), 0 4px 12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#131110; --panel:#1C1916; --panel-2:#252017;
  --ink:#F6F2EA; --ink-2:#C3BCAF; --ink-3:#8E8677;
  --rule:#2E2922; --rule-2:#3D372E;
  --rust:#E8825C; --rust-hi:#F0A184; --rust-wash:#2C1B13;
  --band:#0B0A09; --band-panel:#171512; --band-rule:#2A251F;
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-2:0 2px 4px rgba(0,0,0,.5), 0 28px 60px -28px rgba(0,0,0,.8);
  --shadow-3:0 40px 90px -40px rgba(0,0,0,.9), 0 4px 12px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --paper:#FFFFFF; --panel:#F7F4EE; --panel-2:#EFEAE0;
  --ink:#17140F; --ink-2:#4C463C; --ink-3:#7C7466;
  --rule:#E6E0D4; --rule-2:#D6CFC0;
  --rust:#A8461F; --rust-hi:#C0592F; --rust-wash:#FBEDE6;
  --band:#17140F; --band-panel:#221E18; --band-rule:#332D25;
  --shadow-1:0 1px 2px rgba(23,20,15,.05), 0 8px 24px -12px rgba(23,20,15,.14);
  --shadow-2:0 2px 4px rgba(23,20,15,.06), 0 28px 60px -28px rgba(23,20,15,.28);
  --shadow-3:0 40px 90px -40px rgba(23,20,15,.42), 0 4px 12px rgba(23,20,15,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
::selection{background:var(--rust); color:#fff}

/* scrollbars — thin, token-keyed, accent stays off them */
html{scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent}
.ledger-body,.rail,.limits,.stats,.form,pre,textarea{scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule-2); border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
::-webkit-scrollbar-corner{background:transparent}
/* inverted sections keep their own muted thumb in either theme */
.band,.ledger-body{scrollbar-color:color-mix(in srgb,var(--band-ink-2) 34%,transparent) transparent}
.band ::-webkit-scrollbar-thumb,.ledger-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--band-ink-2) 34%,transparent)}
.band ::-webkit-scrollbar-thumb:hover,.ledger-body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--band-ink-2) 58%,transparent)}

/* type */
h1,h2,h3,h4,.dsp{
  font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;
  font-stretch:118%;
  font-weight:800;
  letter-spacing:-.028em;
  line-height:.98;
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(2.85rem,7.6vw,5.9rem); font-weight:900; letter-spacing:-.036em}
h2{font-size:clamp(2.1rem,4.9vw,3.6rem)}
h3{font-size:clamp(1.28rem,2.1vw,1.6rem); letter-spacing:-.018em; line-height:1.1}
p{margin:0}
a{color:inherit}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.7rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--rust); display:flex; align-items:center; gap:.62em;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--rust); flex:none; border-radius:2px}
.lede{font-size:clamp(1.08rem,1.55vw,1.31rem); line-height:1.55; color:var(--ink-2); max-width:56ch}
.body{color:var(--ink-2); max-width:62ch}
.body + .body{margin-top:1em}
strong{font-weight:600; color:var(--ink)}

/* layout */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
section{position:relative}
.sec{padding-block:clamp(76px,10vw,148px)}
.hairline{height:1px; background:var(--rule); border:0; margin:0}

/* the annotation rail — signature device */
.railed{display:grid; grid-template-columns:minmax(0,1fr) 232px; gap:clamp(28px,5vw,72px); align-items:start}
@media (max-width:900px){.railed{grid-template-columns:minmax(0,1fr)}}
.rail{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.735rem; line-height:1.65; color:var(--ink-3);
  border-top:2px solid var(--ink); padding-top:12px;
  display:flex; flex-direction:column; gap:14px;
}
.rail b{display:block; color:var(--ink); font-weight:600; letter-spacing:.02em}
.rail i{font-style:normal; color:var(--rust)}
@media (max-width:900px){.rail{border-top-width:1px; padding-top:10px}}

/* nav */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.nav.stuck{border-bottom-color:var(--rule)}
.nav-in{display:flex; align-items:center; gap:20px; height:66px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.nav-links{display:flex; gap:26px; align-items:center}
@media (max-width:820px){.nav-links{display:none}}
.nav-links a{
  text-decoration:none; font-size:.885rem; font-weight:500; color:var(--ink-2);
  transition:color .18s; position:relative; padding-block:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--rust); transition:right .28s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:.95rem;
  padding:13px 22px; border-radius:7px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), background .18s, box-shadow .22s, border-color .18s, color .18s;
}
.btn-p{background:var(--rust); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 8px 20px -10px var(--rust)}
.btn-p:hover{background:var(--rust-hi); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.24) inset, 0 14px 28px -12px var(--rust)}
:root[data-theme="dark"] .btn-p, :root:not([data-theme="light"]) .btn-p{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-p{background:var(--rust); color:#1A100B}}
:root[data-theme="dark"] .btn-p{background:var(--rust); color:#1A100B}
:root[data-theme="light"] .btn-p{background:var(--rust); color:#fff}
.btn-s{background:transparent; color:var(--ink); border-color:var(--rule-2)}
.btn-s:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn-sm{padding:9px 16px; font-size:.86rem; border-radius:6px}
.btn:active{transform:translateY(0)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2.5px solid var(--rust); outline-offset:3px; border-radius:4px;
}

/* hero */
.hero{position:relative; overflow:hidden; padding-top:clamp(44px,6vw,78px); padding-bottom:clamp(52px,7vw,96px)}
.hero-bg{position:absolute; inset:0; pointer-events:none; z-index:0}
.hero-grid{
  position:absolute; inset:-2px;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(115% 82% at 76% 8%,#000 0%,transparent 72%);
  mask-image:radial-gradient(115% 82% at 76% 8%,#000 0%,transparent 72%);
  opacity:.72;
}
@media (max-width:900px){.hero-grid{opacity:.34; background-size:48px 48px}}
.hero-glow{
  position:absolute; width:78vw; height:78vw; max-width:1000px; max-height:1000px;
  right:-16vw; top:-30vw; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--rust) 15%,transparent) 0%,transparent 62%);
  filter:blur(12px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-glow{opacity:.45}}
:root[data-theme="dark"] .hero-glow{opacity:.45}
:root[data-theme="light"] .hero-glow{opacity:1}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(30px,5vw,64px); align-items:center}
@media (max-width:960px){.hero-in{grid-template-columns:minmax(0,1fr); gap:44px}}
.hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:clamp(18px,2.2vw,26px)}
h1 .l1{display:block}
h1 .l2{display:block; color:var(--rust)}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.hero-note{font-size:.83rem; color:var(--ink-3); display:flex; align-items:center; gap:8px}
.dot-live{width:7px; height:7px; border-radius:50%; background:var(--rust); flex:none; position:relative}
.dot-live::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--rust); opacity:0}

/* ticker */
.ticker{background:var(--rust); color:#fff; overflow:hidden; padding-block:11px; position:relative}
:root[data-theme="dark"] .ticker{color:#1A100B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ticker{color:#1A100B}}
:root[data-theme="light"] .ticker{color:#fff}
.ticker-track{display:flex; width:max-content; gap:0}
.ticker-seq{display:flex; gap:0; flex:none; padding-right:0}
.ticker span{
  font-family:'IBM Plex Mono',monospace; font-size:.755rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  padding-inline:26px; display:flex; align-items:center; gap:26px;
}
.ticker span::after{content:"\25C6"; font-size:.48rem; opacity:.6}

/* phone */
.phone-stage{position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; perspective:1400px}
.phone{
  width:min(322px,80vw); flex:none; position:relative;
  border-radius:38px; padding:9px;
  background:linear-gradient(158deg,#3A342C,#151310 42%,#2A251E);
  box-shadow:var(--shadow-3);
  transform:rotateY(-9deg) rotateX(3deg) rotateZ(-1deg);
  transform-style:preserve-3d;
}
.phone-screen{
  border-radius:30px; overflow:hidden; background:#131110; color:#F6F2EA;
  aspect-ratio:322/650; display:flex; flex-direction:column;
  font-size:12px; line-height:1.4; position:relative;
}
.notch{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:82px; height:20px; background:#0B0A09; border-radius:12px; z-index:5}
.ph-status{display:flex; justify-content:space-between; align-items:center; padding:11px 18px 4px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#8E8677; letter-spacing:.04em}
.sig{display:flex; gap:2.5px; align-items:flex-end}
.sig i{display:block; width:2.5px; background:#8E8677; border-radius:1px}
.sig i:nth-child(1){height:4px}.sig i:nth-child(2){height:6px}.sig i:nth-child(3){height:8px}.sig i:nth-child(4){height:10px; background:#3A352D}
.ph-head{padding:12px 18px 11px; border-bottom:1px solid #262119}
.ph-org{font-family:'IBM Plex Mono',monospace; font-size:8.6px; letter-spacing:.15em; text-transform:uppercase; color:#8E8677}
.ph-site{font-family:'Archivo',sans-serif; font-stretch:112%; font-weight:700; font-size:17px; letter-spacing:-.02em; margin-top:3px; display:flex; align-items:center; gap:7px}
.ph-badge{font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:600; letter-spacing:.08em; padding:2.5px 6px; border-radius:4px; background:#2C1B13; color:#E8825C; text-transform:uppercase}
.ph-meta{display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:8px}
.ph-age{font-family:'IBM Plex Mono',monospace; font-size:9px; color:#8E8677}
.ph-refresh{
  font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:500;
  border:1px solid #3A352D; border-radius:5px; padding:4.5px 8px; color:#C3BCAF;
  display:flex; align-items:center; gap:5px; white-space:nowrap;
}
.ph-refresh b{color:#E8825C; font-weight:600}
.ph-list{flex:1; overflow:hidden; padding:5px 0 0; display:flex; flex-direction:column}
.ph-row{display:flex; gap:10px; padding:10px 18px; border-bottom:1px solid #1E1A15; align-items:flex-start}
.ph-thumb{width:52px; height:38px; border-radius:4px; flex:none; position:relative; overflow:hidden; background:#221E18; border:1px solid #2E2922}
.ph-thumb .sky{position:absolute; inset:0 0 46% 0; background:linear-gradient(#2A2620,#201C17)}
.ph-thumb .gnd{position:absolute; inset:54% 0 0 0; background:#191612}
.ph-thumb .box{position:absolute; border:1.4px solid #E8825C; border-radius:1.5px}
.ph-txt{min-width:0; flex:1}
.ph-what{font-weight:600; font-size:11.5px; letter-spacing:-.005em; display:flex; align-items:center; gap:6px}
.ph-cam{font-family:'IBM Plex Mono',monospace; font-size:9px; color:#8E8677; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ph-seen{font-family:'IBM Plex Mono',monospace; font-size:8.4px; color:#6D6659; margin-top:4px; display:flex; align-items:center; gap:4px}
.ph-seen::before{content:""; width:4px; height:4px; border-radius:50%; background:#4C463C; flex:none}
.ph-time{font-family:'IBM Plex Mono',monospace; font-size:9px; color:#8E8677; flex:none; padding-top:1px}
.ph-end{font-family:'IBM Plex Mono',monospace; font-size:8.6px; letter-spacing:.06em; color:#5E574B; padding:11px 18px}
.ph-tabs{display:flex; border-top:1px solid #262119; padding:9px 0 15px; background:#0F0D0B; margin-top:auto}
.ph-tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-family:'IBM Plex Mono',monospace; font-size:7.6px; letter-spacing:.09em; text-transform:uppercase; color:#6D6659}
.ph-tab.on{color:#E8825C}
.ph-tab svg{width:17px; height:17px}
.ph-caption{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.68rem; line-height:1.5;
  color:var(--ink-3); max-width:min(322px,80vw); text-align:left;
  display:flex; gap:9px; align-items:baseline;
}
.ph-caption b{color:var(--rust); font-weight:600; letter-spacing:.09em; text-transform:uppercase; font-size:.62rem; flex:none}
.ph-caption i{font-style:normal; color:var(--ink-2); font-weight:600}

/* stat tiles */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:12px; overflow:hidden}
.stat{background:var(--paper); padding:clamp(20px,2.4vw,30px)}
.stat-n{
  font-family:'Archivo',sans-serif; font-stretch:100%; font-weight:800;
  font-size:clamp(2.5rem,5.2vw,3.85rem); line-height:.9; letter-spacing:-.045em;
  color:var(--rust); font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:.06em;
}
.stat-u{font-size:.34em; font-weight:700; letter-spacing:-.01em; color:var(--ink-3); font-stretch:110%}
.stat-d{font-size:.68em; font-weight:600; color:var(--ink-3); margin-inline:.02em}
.stat-l{margin-top:12px; font-size:.9rem; line-height:1.42; color:var(--ink-2)}
.stat-l b{color:var(--ink); font-weight:600}
.stat-src{margin-top:9px; font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--ink-3); letter-spacing:.03em}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px); margin-top:clamp(34px,4.5vw,60px); position:relative}
@media (max-width:880px){.steps{grid-template-columns:minmax(0,1fr); gap:34px}}
.step{position:relative; display:flex; flex-direction:column; gap:14px}
.step-top{display:flex; align-items:center; gap:14px}
.step-n{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.76rem; letter-spacing:.06em;
  width:34px; height:34px; flex:none; border-radius:50%;
  border:1.5px solid var(--rust); color:var(--rust);
  display:grid; place-items:center; background:var(--paper); position:relative; z-index:2;
}
.step-line{flex:1; height:1.5px; background:var(--rule-2); position:relative; overflow:hidden}
.step-line::after{content:""; position:absolute; inset:0; background:var(--rust); transform:scaleX(0); transform-origin:left}
.step:last-child .step-line{background:transparent}
.step-art{
  border:1px solid var(--rule); border-radius:11px; background:var(--panel);
  aspect-ratio:16/10; overflow:hidden; position:relative;
}
.step-art svg{width:100%; height:100%; display:block}
.step-body{font-size:.95rem; color:var(--ink-2); line-height:1.55}
.step-tag{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:2px}

/* dark band */
.band{background:var(--band); color:var(--band-ink); position:relative; overflow:hidden}
.band h2,.band h3{color:var(--band-ink)}
.band .lede,.band .body{color:var(--band-ink-2)}
.band .body strong,.band .lede strong{color:var(--band-ink)}
.band .eyebrow{color:var(--band-rust)}
.band .eyebrow::before{background:var(--band-rust)}
.band .rail{color:var(--band-ink-2); border-top-color:var(--band-rust)}
.band .rail b{color:var(--band-ink)}
.band .rail i{color:var(--band-rust)}
.band-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--band-rule) 1px,transparent 1px),linear-gradient(90deg,var(--band-rule) 1px,transparent 1px);
  background-size:56px 56px; opacity:.55;
  -webkit-mask-image:radial-gradient(100% 70% at 20% 100%,#000,transparent 70%);
  mask-image:radial-gradient(100% 70% at 20% 100%,#000,transparent 70%);
}
.band-in{position:relative; z-index:1}
.ledger{
  border:1px solid var(--band-rule); border-radius:11px; background:var(--band-panel);
  overflow:hidden; box-shadow:var(--shadow-2);
}
.ledger-head{
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--band-rule); background:rgba(255,255,255,.02);
}
.ledger-head .t{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--band-ink-2)}
.ledger-head .s{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--band-rust); display:flex; align-items:center; gap:6px}
.ledger-head .s::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--band-rust)}
.ledger-body{overflow-x:auto}
.ledger table{border-collapse:collapse; width:100%; min-width:640px; font-family:'IBM Plex Mono',monospace; font-size:.735rem; font-variant-numeric:tabular-nums}
.ledger th{
  text-align:left; font-weight:600; padding:9px 16px; color:var(--band-ink-2);
  border-bottom:1px solid var(--band-rule); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}
.ledger td{padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.045); color:var(--band-ink-2); white-space:nowrap}
.ledger tr:last-child td{border-bottom:0}
.ledger td.who{color:var(--band-ink); font-weight:500}
.ledger td.hash{color:var(--band-rust)}
.ledger .chain{color:#5F5749}
.ledger-foot{padding:11px 16px; border-top:1px solid var(--band-rule); font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:#6D6659}

/* cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:clamp(14px,1.8vw,22px)}
.card{
  border:1px solid var(--rule); border-radius:12px; padding:clamp(20px,2.3vw,28px);
  background:var(--paper); display:flex; flex-direction:column; gap:11px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-1); border-color:var(--rule-2)}
.card-k{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--rust)}
.card p{font-size:.93rem; color:var(--ink-2); line-height:1.55}
.band .card{background:var(--band-panel); border-color:var(--band-rule)}
.band .card p{color:var(--band-ink-2)}
.band .card-k{color:var(--band-rust)}
.band .card:hover{border-color:#42392F}

/* cost chips */
.chips{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.chip{
  font-family:'IBM Plex Mono',monospace; font-size:.82rem; font-weight:500;
  border:1px solid var(--rule-2); border-radius:7px; padding:9px 14px;
  display:flex; align-items:center; gap:9px; background:var(--paper); color:var(--ink-2);
  transition:border-color .2s, transform .2s;
}
.chip:hover{border-color:var(--rust); transform:translateY(-2px)}
.chip b{color:var(--rust); font-weight:600}
.chip svg{width:14px; height:14px; flex:none; color:var(--ink-3)}

/* illustration plates — figures printed on paper, light in both themes */
.plate{
  border:1px solid var(--rule-2); border-radius:13px; overflow:hidden;
  background:#F7F4EE; box-shadow:var(--shadow-1);
}
.plate img{width:100%; height:auto; display:block}
.plate figcaption{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.68rem; line-height:1.5;
  color:#7C7466; padding:11px 15px; border-top:1px solid #E2DCD0; background:#F1EDE4;
  display:flex; gap:9px; align-items:baseline;
}
.plate figcaption b{color:#A8461F; font-weight:600; letter-spacing:.09em; text-transform:uppercase; font-size:.62rem; flex:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .plate{filter:brightness(.87) saturate(1.03); border-color:var(--rule)}}
:root[data-theme="dark"] .plate{filter:brightness(.87) saturate(1.03); border-color:var(--rule)}
:root[data-theme="light"] .plate{filter:none; border-color:var(--rule-2)}
.intro-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(28px,5vw,66px); align-items:center}
@media (max-width:900px){.intro-split{grid-template-columns:minmax(0,1fr); gap:34px}}

/* limits list */
.limits{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:12px; overflow:hidden}
.limit{background:var(--paper); padding:20px clamp(18px,2.2vw,26px); display:grid; grid-template-columns:106px minmax(0,1fr); gap:clamp(14px,2.4vw,30px); align-items:start}
@media (max-width:640px){.limit{grid-template-columns:minmax(0,1fr); gap:8px}}
.limit-k{font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding-top:4px}
.limit-k.yes{color:var(--rust)}
.limit-k.no{color:var(--ink-3)}
.limit p{font-size:.95rem; color:var(--ink-2); line-height:1.55}
.limit p b{color:var(--ink); font-weight:600}

/* form */
.form{
  background:var(--panel); border:1px solid var(--rule); border-radius:14px;
  padding:clamp(22px,3vw,36px); box-shadow:var(--shadow-1); position:relative; overflow:hidden;
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.field label{font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.field input,.field select{
  font-family:'IBM Plex Sans',sans-serif; font-size:.95rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule-2); border-radius:7px;
  padding:11px 13px; width:100%; transition:border-color .18s, box-shadow .18s;
  appearance:none; -webkit-appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px; color:var(--ink);
}
.field input::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus{outline:none; border-color:var(--rust); box-shadow:0 0 0 3px var(--rust-wash)}
.field input:focus-visible,.field select:focus-visible{outline:none}
.err{font-size:.78rem; color:var(--rust); font-weight:500; min-height:0; display:none}
.field.bad input,.field.bad select{border-color:var(--rust)}
.field.bad .err{display:block}
.form-foot{margin-top:20px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.form-note{font-size:.79rem; color:var(--ink-3); line-height:1.45; max-width:38ch}

/* sticky cta */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:color-mix(in srgb,var(--band) 96%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--band-rule); color:var(--band-ink);
  transform:translateY(103%); transition:transform .42s cubic-bezier(.2,.8,.2,1);
}
.sticky.show{transform:translateY(0)}
.sticky-in{display:flex; align-items:center; gap:16px; padding-block:12px}
.sticky-t{font-family:'Archivo',sans-serif; font-stretch:112%; font-weight:700; font-size:1rem; letter-spacing:-.02em; margin-right:auto}
.sticky-s{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--band-ink-2); display:none}
@media (min-width:720px){.sticky-s{display:block; margin-right:auto}.sticky-t{margin-right:0}}
.sticky .btn-p{padding:10px 18px; font-size:.9rem}
@media (max-width:559px){
  .sticky-t{display:none}
  .sticky .btn-p{flex:1; justify-content:center}
}
@media (max-width:430px){
  .nav-in{gap:10px}
  .nav .btn-sm{padding:8px 12px; font-size:.8rem}
  .logo{gap:8px}
}

/* footer */
footer{border-top:1px solid var(--rule); padding-block:clamp(40px,5vw,64px) 120px; background:var(--panel)}
.foot-in{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,54px)}
@media (max-width:760px){.foot-in{grid-template-columns:minmax(0,1fr); gap:30px}}
.foot-col h4{font-family:'IBM Plex Mono',monospace; font-stretch:normal; font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.foot-col a{text-decoration:none; font-size:.9rem; color:var(--ink-2); transition:color .18s}
.foot-col a:hover{color:var(--rust)}
.foot-line{font-family:'Archivo',sans-serif; font-stretch:112%; font-weight:700; font-size:1.24rem; letter-spacing:-.026em; line-height:1.15; margin-top:14px; max-width:22ch}
.foot-line span{color:var(--rust)}
.foot-small{margin-top:16px; font-size:.79rem; color:var(--ink-3); line-height:1.5; max-width:44ch}
.foot-bar{margin-top:clamp(32px,4vw,52px); padding-top:20px; border-top:1px solid var(--rule-2); display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:.71rem; color:var(--ink-3)}
.foot-bar .sep{margin-left:auto}

.theme-btn{
  border:1px solid var(--rule-2); background:transparent; color:var(--ink-2);
  width:34px; height:34px; border-radius:7px; display:grid; place-items:center; cursor:pointer;
  transition:border-color .18s,color .18s;
}
.theme-btn:hover{border-color:var(--ink); color:var(--ink)}
.theme-btn svg{width:16px; height:16px}

/* motion */
/* nothing hides unless JS is alive to un-hide it */
.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; transform:translateY(22px); transition:opacity .74s cubic-bezier(.16,1,.3,1), transform .74s cubic-bezier(.16,1,.3,1)}
  .js .reveal.in{opacity:1; transform:none}
  .step.in .step-line::after{transform:scaleX(1); transition:transform .9s cubic-bezier(.16,1,.3,1) .18s}
  .hero-copy > *{opacity:0; transform:translateY(26px); animation:rise .95s cubic-bezier(.16,1,.3,1) forwards}
  .hero-copy > *:nth-child(1){animation-delay:.05s}
  .hero-copy > *:nth-child(2){animation-delay:.15s}
  .hero-copy > *:nth-child(3){animation-delay:.25s}
  .hero-copy > *:nth-child(4){animation-delay:.35s}
  .hero-copy > *:nth-child(5){animation-delay:.45s}
  .phone-stage{opacity:0; animation:phoneIn 1.25s cubic-bezier(.16,1,.3,1) .3s forwards}
  .ticker-track{animation:march 46s linear infinite}
  .dot-live::after{animation:ping 2.4s ease-out infinite}
  .ph-row{opacity:0; animation:rowIn .7s cubic-bezier(.16,1,.3,1) forwards}
  .ph-row:nth-child(1){animation-delay:1.05s}
  .ph-row:nth-child(2){animation-delay:1.2s}
  .ph-row:nth-child(3){animation-delay:1.35s}
  .ph-row:nth-child(4){animation-delay:1.5s}
  .ph-thumb .box{opacity:0; animation:boxIn .5s ease-out forwards 1.75s}
  .js .ledger tbody tr{opacity:0; transform:translateY(8px)}
  .js .ledger.in tbody tr{opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1)}
  .ledger.in tbody tr:nth-child(1){transition-delay:.05s}
  .ledger.in tbody tr:nth-child(2){transition-delay:.14s}
  .ledger.in tbody tr:nth-child(3){transition-delay:.23s}
  .ledger.in tbody tr:nth-child(4){transition-delay:.32s}
  .ledger.in tbody tr:nth-child(5){transition-delay:.41s}
  .ledger.in tbody tr:nth-child(6){transition-delay:.50s}
  .scan{animation:scan 5.5s ease-in-out infinite}
  .beam{stroke-dasharray:3 5; animation:dash 2.4s linear infinite}
}
@keyframes rise{to{opacity:1; transform:none}}
@keyframes phoneIn{from{opacity:0; transform:translateY(38px) rotateY(-16deg) scale(.96)} to{opacity:1; transform:none}}
@keyframes rowIn{to{opacity:1}}
@keyframes boxIn{from{opacity:0; transform:scale(1.25)} to{opacity:1; transform:none}}
@keyframes ping{0%{opacity:.9; transform:scale(.7)} 70%,100%{opacity:0; transform:scale(2.1)}}
@keyframes march{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes scan{0%,100%{transform:translateY(0)} 50%{transform:translateY(58px)}}
@keyframes dash{to{stroke-dashoffset:-16}}

/* ==========================================================================
   Expansion beyond the one-pager: things the concept did not need when the
   whole site was a single scroll.
   ========================================================================== */

/* skip link */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--rust); color:#fff; padding:10px 16px; border-radius:0 0 7px 0;
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:.9rem; text-decoration:none;
}
.skip:focus{left:0}

/* front-page call to action into /request-access/ */
.cta{background:var(--panel); border-top:1px solid var(--rule)}
.cta-in{display:flex; flex-direction:column; align-items:flex-start; gap:20px; max-width:64ch}
.cta .chips{margin-top:2px}

/* ---------- request-access page ---------- */
.ra-head{padding-block:clamp(44px,6vw,80px) clamp(26px,3vw,38px)}
.ra-head .lede{margin-top:20px}
.ra-body{padding-bottom:clamp(60px,8vw,110px)}
.ra-split{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(30px,5vw,70px); align-items:start}
@media (max-width:900px){.ra-split{grid-template-columns:minmax(0,1fr); gap:36px}}

/* radio group for org_type */
.radios{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:420px){.radios{grid-template-columns:1fr}}
.radio{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  border:1px solid var(--rule-2); border-radius:7px; background:var(--paper);
  padding:11px 13px; font-size:.95rem; color:var(--ink);
  transition:border-color .18s, box-shadow .18s;
}
.radio input{
  appearance:none; -webkit-appearance:none; margin:0; flex:none;
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--rule-2); background:var(--paper);
  transition:border-color .18s, box-shadow .18s;
}
.radio input:checked{border-color:var(--rust); box-shadow:inset 0 0 0 3.5px var(--paper), inset 0 0 0 9px var(--rust)}
.radio:hover{border-color:var(--ink-3)}
.radio:has(input:checked){border-color:var(--rust); box-shadow:0 0 0 3px var(--rust-wash)}
.radio input:focus-visible{outline:2.5px solid var(--rust); outline-offset:3px}
.field .hint{font-family:'IBM Plex Sans',sans-serif; font-size:.78rem; color:var(--ink-3); letter-spacing:0; text-transform:none; font-weight:400; white-space:nowrap}
/* keep a one-line label from pushing its input out of line with the one beside it */
.field label{min-height:1.05rem}

/* An unanswered radio group marks its boxes, never the dots — a rust ring on an
   empty radio reads as "chosen", which is the opposite of what the error says. */
.field.bad .radio{border-color:var(--rust)}
.field.bad .radio input{border-color:var(--rule-2)}
.field.bad .radio input:checked{border-color:var(--rust)}

/* the honeypot: off-screen, never announced, never tab-reachable */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* form-level banner: 429, network trouble, anything not field-specific */
.banner{
  display:none; gap:10px; align-items:flex-start;
  border:1px solid var(--rust); border-left-width:3px; border-radius:7px;
  background:var(--rust-wash); color:var(--ink);
  padding:13px 15px; font-size:.9rem; line-height:1.5; margin-bottom:20px;
}
.banner.show{display:flex}
.banner b{font-weight:600; display:block; margin-bottom:2px}
.banner a{color:var(--rust); font-weight:600}

/* the acknowledgement replaces the form outright — nothing left to press twice */
.ack{
  display:none; flex-direction:column; align-items:flex-start; gap:14px;
  background:var(--panel); border:1px solid var(--rule); border-radius:14px;
  padding:clamp(24px,3vw,38px); box-shadow:var(--shadow-1);
}
.ack.show{display:flex}
.ack .tick{width:42px; height:42px; border-radius:50%; background:var(--rust); display:grid; place-items:center; color:#fff}
:root[data-theme="dark"] .ack .tick{color:#1A100B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ack .tick{color:#1A100B}}
:root[data-theme="light"] .ack .tick{color:#fff}
.ack .tick svg{width:22px; height:22px}
.ack p{font-size:.97rem; color:var(--ink-2); line-height:1.55; max-width:52ch}
.ack .echo{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.76rem; line-height:1.6;
  background:var(--paper); border:1px solid var(--rule); border-radius:6px;
  padding:11px 13px; color:var(--ink-2); display:block; width:100%; word-break:break-word;
}
.ack:focus{outline:none}

/* the aside beside the form */
.ra-aside{display:flex; flex-direction:column; gap:clamp(20px,2.6vw,30px)}
.notes{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:12px; overflow:hidden}
.note{background:var(--paper); padding:18px clamp(18px,2.2vw,24px)}
.note h3{font-size:1.02rem; letter-spacing:-.012em}
.note p{margin-top:8px; font-size:.92rem; color:var(--ink-2); line-height:1.55}
.note p b{color:var(--ink); font-weight:600}

/* buttons in a disabled/in-flight state */
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55; cursor:default; transform:none; box-shadow:none}
.btn[disabled]:hover{transform:none}

/* ---------- minimal footer ---------- */
.foot-in.foot-min{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:760px){.foot-in.foot-min{grid-template-columns:minmax(0,1fr)}}
.foot-col address{font-style:normal; margin-top:12px; font-size:.9rem; color:var(--ink-2)}
.foot-col address a{color:var(--rust); font-weight:600}
footer.no-sticky{padding-bottom:clamp(40px,5vw,64px)}

/* The real lockup replaces the drawn placeholder mark (owner ruling, 8 Aug):
   ink lockup on the light ground, paper on the dark one.

   The ground is set by two independent signals — the OS preference and the
   header's own toggle, which writes :root[data-theme]. Both have to pick the
   variant. Keying on prefers-color-scheme alone leaves the ink wordmark on a
   dark ground the moment anyone touches the toggle, and it all but disappears.

   The lockup is wider than the mark-plus-text it replaced, so a narrow nav row
   can run out of room; object-fit holds it on its own aspect ratio and lets it
   scale down in place rather than be squashed by the flex squeeze. */
.logo-img { height: 26px; width: auto; max-width: 100%; object-fit: contain; display: block }
.logo-img-dark { display: none }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-img-light { display: none }
  :root:not([data-theme="light"]) .logo-img-dark { display: block }
}
:root[data-theme="dark"] .logo-img-light { display: none }
:root[data-theme="dark"] .logo-img-dark { display: block }