/* ==========================================================================
   melihkan.com
   Direction: European motorway signage, read as an instrument panel.
   Fonts: Archivo (display, drawn wide like a sign panel) + Overpass /
   Overpass Mono (Overpass descends from highway signage lettering).
   ========================================================================== */

/* ---------- fonts, self-hosted ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;
  src:url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;
  src:url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Overpass';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/overpass-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Overpass';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/overpass-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Overpass Mono';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/overpass-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Overpass Mono';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/overpass-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  --concrete:#E7E9E7;
  --concrete-hi:#F3F4F1;
  --concrete-lo:#DBDEDA;
  --asphalt:#14181B;
  --asphalt-2:#1C2227;
  --asphalt-3:#2A3339;
  --ink:#14181B;
  --ink-2:#4E5A5E;
  --ink-3:#5A6669;
  --sign-blue:#0E4C93;
  --sign-blue-dk:#0A3A72;
  --sign-green:#0A6047;
  --amber:#E5A034;
  --amber-lo:#8A6216;
  --stop:#B23A22;
  --go:#2FA36B;
  --paint:#F6F7F4;
  --rail:#C2C7C3;

  --f-display:'Archivo',system-ui,-apple-system,sans-serif;
  --f-body:'Overpass',system-ui,-apple-system,sans-serif;
  --f-mono:'Overpass Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --shell:1340px;
  --gutter:clamp(1.25rem,4vw,3rem);
  /* Full-bleed elements (top bar, footer) pad themselves out to the shell so
     their contents line up with the columns below instead of hugging the edge. */
  --bleed-pad:max(var(--gutter), calc(50% - var(--shell) / 2 + var(--gutter)));
  --radius:10px;
  --ease:cubic-bezier(.2,.7,.3,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--concrete);color:var(--ink);
  font-family:var(--f-body);font-size:clamp(1rem,.97rem + .16vw,1.075rem);
  font-weight:380;line-height:1.62;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:750;line-height:1.04;letter-spacing:-.02em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--sign-blue);text-decoration-thickness:1px;text-underline-offset:3px}
b,strong{font-weight:650}
code{font-family:var(--f-mono);font-size:.9em}
:focus-visible{outline:2.5px solid var(--sign-blue);outline-offset:3px;border-radius:3px}
.band--dark :focus-visible,.trace :focus-visible,.phone :focus-visible{outline-color:var(--amber)}
/* `all:unset` wipes outline-style, and it out-specifies the bare rule above —
   these two need the ring put back by hand. */
.call>button:focus-visible{outline:2.5px solid var(--amber);outline-offset:-2px}
.modules__list button:focus-visible{outline:2.5px solid var(--sign-blue);outline-offset:-2px}
[aria-disabled="true"]{opacity:.5;cursor:default}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--sign-blue);color:#fff;padding:.7rem 1rem}
.skip:focus{left:0}

/* ---------- top progress (mobile / all) ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:3px;background:transparent;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--sign-blue)}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--bleed-pad);
  background:color-mix(in srgb,var(--concrete) 86%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s linear,background .2s linear;
}
.topbar.is-stuck{border-bottom-color:var(--rail)}
.wordmark{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:inherit}
.wordmark__name{font-family:var(--f-display);font-weight:800;font-stretch:112%;font-size:1.02rem;letter-spacing:.01em}
.wordmark__meta{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);letter-spacing:.04em}
.topnav{display:flex;align-items:center;gap:.15rem}
.topnav a{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.02em;
  color:var(--ink-2);text-decoration:none;padding:.42rem .6rem;border-radius:6px;
}
.topnav a:hover{color:var(--sign-blue);background:var(--concrete-hi)}
.topnav__cta{color:var(--paint)!important;background:var(--sign-blue);font-weight:600}
.topnav__cta:hover{background:var(--sign-blue-dk)!important;color:var(--paint)!important}

/* ---------- kilometre rail ---------- */
/* Below 1400px the shell's left margin is narrower than the rail, so the rail
   would sit on top of the text column. It only appears once there is room. */
.rail{display:none}
@media (min-width:1560px){
  .rail{
    display:block;position:fixed;z-index:40;top:50%;transform:translateY(-50%);
    left:max(1.5rem, calc(50% - var(--shell) / 2 - 9rem));
    width:max-content;max-width:8.5rem;
  }
  .rail__line{position:absolute;left:3px;top:6px;bottom:6px;width:2px;background:var(--rail)}
  .rail__fill{position:absolute;inset:0 0 auto 0;height:0;background:var(--sign-blue);transition:height .12s linear}
  .rail__stops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem}
  .rail__stops a{
    position:relative;display:flex;width:max-content;align-items:center;gap:.75rem;
    font-family:var(--f-mono);font-size:.7rem;letter-spacing:.03em;
    color:var(--ink-2);text-decoration:none;transition:color .18s var(--ease);
  }
  .rail__stops span{
    width:8px;height:8px;flex:none;border-radius:50%;
    background:var(--concrete);box-shadow:inset 0 0 0 2px var(--rail);
    transition:box-shadow .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
  }
  .rail__stops a:hover{color:var(--ink)}
  .rail__stops a.is-here{color:var(--sign-blue);font-weight:600}
  .rail__stops a.is-here span{background:var(--sign-blue);box-shadow:inset 0 0 0 2px var(--sign-blue);transform:scale(1.35)}
}

/* ---------- shells ---------- */
main{display:block}
.hero,.band{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(3rem,6vw,5rem)}
.band--last{padding-bottom:clamp(2.5rem,5vw,4rem)}
.sep{padding:0 .3em;opacity:.8;font-weight:400}
.band__lede{max-width:60ch;font-size:1.06em;color:var(--ink-2);margin:2rem 0 2.6rem}
.band__lede b{color:var(--ink)}

.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;line-height:1.5;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 1.1rem;
}
.eyebrow--light{color:#8E9CA0}
.fineprint{font-family:var(--f-mono);font-size:.7rem;line-height:1.55;color:var(--ink-3);letter-spacing:.01em}
.fineprint--light{color:#7D8B90}

/* The sentence that argues is the largest object on the page; the sign titles
   sit a full step below it. */
.display{
  font-family:var(--f-display);font-stretch:114%;font-weight:800;
  font-size:clamp(2.3rem,1.35rem + 3.4vw,3.85rem);line-height:1;letter-spacing:-.032em;
  text-wrap:balance;
}
.display--sm{font-size:clamp(1.7rem,1.15rem + 1.9vw,2.6rem)}

.lede{max-width:46ch;margin-top:1.3rem;font-size:1.06em;color:var(--ink-2)}
.lede em{font-style:normal;color:var(--ink);font-weight:600}
.lede--light{color:#A9B6BA;max-width:56ch}
.lede--light em{color:var(--paint)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.02em;
  padding:.6rem .95rem;border-radius:7px;text-decoration:none;
  color:var(--ink);background:var(--concrete-hi);
  border:1px solid var(--rail);cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease);
}
.btn:hover{background:#fff;border-color:var(--ink-3);transform:translateY(-1px)}
.btn--primary{background:var(--sign-blue);border-color:var(--sign-blue);color:var(--paint);font-weight:600}
.btn--primary:hover{background:var(--sign-blue-dk);border-color:var(--sign-blue-dk);color:var(--paint)}
.btn--dark{background:var(--asphalt);border-color:var(--asphalt);color:var(--paint)}
.btn--dark:hover{background:var(--asphalt-3);border-color:var(--asphalt-3);color:var(--paint)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  display:grid;gap:clamp(2rem,4vw,3.4rem);
  grid-template-columns:minmax(0,1fr);
  padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(3rem,6vw,5rem);
}
@media (min-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:start}
  .hero__text{position:sticky;top:5.5rem}
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.8rem}

/* The receipts. They sit above the buttons, because they are the thing a
   sceptical reader is looking for and they used to be below the fold. */
.ticker{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));
  gap:1rem 1.4rem;margin:1.9rem 0 0;padding:1.1rem 0;
  border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);
  font-family:var(--f-mono);font-size:.7rem;line-height:1.35;letter-spacing:.02em;color:var(--ink-3);
}
.ticker li{display:flex;flex-direction:column;gap:.25rem}
.ticker b{
  font-family:var(--f-display);font-stretch:104%;font-weight:750;font-size:1.4rem;
  color:var(--ink);line-height:1;letter-spacing:-.02em;
}

/* ---------- the trace: signature element ---------- */
/* An instrument, not a desktop window: hard corners, a bezel instead of a soft
   drop shadow, and no traffic-light dots. */
.trace{
  background:var(--asphalt);color:#D9E0E1;border-radius:4px;
  box-shadow:0 0 0 1px var(--rail),0 14px 34px -30px rgba(20,24,27,.8);
  overflow:hidden;display:flex;flex-direction:column;
}
.trace__chrome{
  display:flex;align-items:center;gap:.7rem;padding:.5rem .85rem;
  background:var(--asphalt-2);border-bottom:1px solid #000;
}
.trace__title{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;color:#93A0A4;flex:1;
  text-transform:uppercase;
}
.trace__replay{
  display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-mono);font-size:.68rem;
  background:transparent;border:1px solid #3A464C;color:#9EACB0;border-radius:5px;padding:.25rem .5rem;cursor:pointer;
}
.trace__replay:hover{color:var(--amber);border-color:var(--amber)}

.trace__body{padding:1rem .95rem;min-height:23rem;display:flex;flex-direction:column;gap:.7rem}
@media (min-width:1000px){.trace__body{min-height:26rem}}

.msg{border-radius:8px;padding:.7rem .85rem;font-size:.92rem;line-height:1.55}
.msg--user{background:#242C31;color:#E4EAEA;align-self:flex-end;max-width:92%;border-bottom-right-radius:2px}
.msg--user p{margin:0}
.msg__gloss{margin-top:.3rem!important;font-size:.78rem;color:#8B979A;font-style:italic}
.msg--agent{background:#1B2126;border-left:2px solid var(--go);color:#DDE4E3;white-space:pre-wrap}
.msg--agent.is-guess{border-left-color:var(--stop)}
.msg--agent b{color:#fff}

.calls{
  list-style:none;margin:0;padding:5px;display:flex;flex-direction:column;gap:5px;
  background:#0E1215;border-radius:4px;
}
.call{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:.6rem;
  background:#242D33;border:1px solid #39454C;border-radius:3px;
  font-family:var(--f-mono);font-size:.76rem;
  animation:callIn .34s var(--ease) both;
}
.call>button{
  all:unset;display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;
  width:100%;padding:.44rem .6rem;cursor:pointer;box-sizing:border-box;grid-column:1/-1;
}
.call:hover{border-color:#5A6970;background:#2A343A}
.call__name{color:#C5D1D4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call__name i{color:#93A0A4;font-style:normal}
/* A fixed track for the status chip, so the timings line up in a column
   instead of sliding left whenever a chip is wider than OK. */
.call__right{display:grid;grid-template-columns:auto 6.1rem;align-items:center;gap:.55rem}
.call__ms{color:#7A868A;font-size:.7rem;text-align:right;font-variant-numeric:tabular-nums}
.call__chip{display:flex;justify-content:flex-end}
.chip{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.13rem .38rem;border-radius:3px;white-space:nowrap;
}
.chip--ok{background:rgba(47,163,107,.16);color:#5FCB95}
.chip--partial{background:rgba(229,160,52,.16);color:var(--amber)}
.chip--unmeasured{background:transparent;color:var(--amber);border:1px dashed rgba(229,160,52,.7)}
.chip--empty{background:rgba(255,255,255,.07);color:#8B979A}
.chip--error{background:rgba(178,58,34,.2);color:#E58166}
.call__env{
  grid-column:1/-1;margin:0;padding:.55rem .7rem .7rem;
  border-top:1px dashed #2C363B;color:#8FA0A4;font-size:.72rem;line-height:1.7;white-space:pre;overflow-x:auto;
}
.call__env .k{color:#7FA8CF}
.call__env .s{color:#9ED2AE}
.call__env .n{color:#E5B96A}
.call__env .warn{color:var(--amber)}
.call.is-spinning .call__name::after{content:'';display:inline-block;width:6px;height:6px;margin-left:.45rem;border-radius:50%;background:var(--amber);animation:pulse .8s infinite}
@keyframes callIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

.trace__flag{
  margin:0;padding:.65rem .8rem;border-radius:7px;
  background:rgba(178,58,34,.14);border:1px solid rgba(178,58,34,.5);
  color:#F0A48C;font-size:.82rem;line-height:1.5;
  animation:callIn .3s var(--ease) both;
}
.trace__flag b{color:#FFC7B4}

.trace__foot{padding:.85rem .95rem 1rem;border-top:1px solid #232B30;background:#171D21}
.switch{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.switch__label{font-family:var(--f-mono);font-size:.72rem;color:#7E8C91}
.switch__track{display:flex;background:#0F1417;border:1px solid #2A343A;border-radius:7px;padding:2px}
.switch__opt{
  font-family:var(--f-mono);font-size:.72rem;padding:.34rem .6rem;border-radius:5px;
  background:transparent;border:0;color:#8B979A;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease);
}
.switch__opt:hover{color:#D3DBDC}
.switch__opt.is-on{background:var(--go);color:#06231A;font-weight:600}
.switch__opt.is-on[data-mode="guess"]{background:var(--stop);color:#FFE7E0}
.trace__note{margin:.7rem 0 0;font-size:.8rem;line-height:1.5;color:#8B979A;max-width:62ch}

/* ==========================================================================
   SIGN PANELS — section headers as motorway signs
   ========================================================================== */
.sign{
  background:var(--sign-blue);border-radius:12px;padding:7px;
  box-shadow:0 10px 26px -20px rgba(14,76,147,.9);
}
.sign--green{background:var(--sign-green);box-shadow:0 10px 26px -20px rgba(11,107,79,.9)}
.sign__inner{
  border:2px solid rgba(255,255,255,.88);border-radius:8px;
  padding:clamp(1.1rem,2.4vw,1.7rem) clamp(1.1rem,2.6vw,1.9rem);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem;
  color:var(--paint);
}
.sign__kicker{
  font-family:var(--f-mono);font-size:.71rem;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 .5rem;
}
.sign__kicker code{color:rgba(255,255,255,.9);font-size:.95em}
.sign__title{
  font-family:var(--f-display);font-stretch:118%;font-weight:800;
  font-size:clamp(1.75rem,1.15rem + 2vw,2.5rem);letter-spacing:-.025em;line-height:.95;color:#fff;
}
.sign__sub{margin:.45rem 0 0;font-size:.95rem;color:rgba(255,255,255,.88);max-width:52ch}
.sign__sub a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.sign__sub a:hover{text-decoration-color:#fff}
.sign__dist{
  margin:0;text-align:right;display:flex;align-items:baseline;gap:.6rem;
  border-left:2px solid rgba(255,255,255,.3);padding-left:1.1rem;
}
.sign__dist b{font-family:var(--f-display);font-stretch:110%;font-weight:800;font-size:2.1rem;line-height:1;color:#fff}
.sign__dist span{font-family:var(--f-mono);font-size:.68rem;line-height:1.35;color:rgba(255,255,255,.75);text-align:left}

/* ==========================================================================
   SILAWAY — system tabs
   ========================================================================== */
.sysnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin-bottom:1.6rem}
.sysnav__btn{
  text-align:left;background:var(--concrete-hi);border:1px solid var(--rail);border-radius:8px;
  padding:.7rem .8rem;cursor:pointer;color:var(--ink-2);
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.sysnav__btn b{display:block;font-family:var(--f-display);font-stretch:106%;font-weight:700;font-size:.98rem;color:var(--ink);letter-spacing:-.01em}
.sysnav__btn span{display:block;font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3);margin-top:.15rem}
.sysnav__btn:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.sysnav__btn.is-on{background:var(--asphalt);border-color:var(--asphalt)}
.sysnav__btn.is-on b{color:#fff}
.sysnav__btn.is-on span{color:var(--amber)}

.panel{display:none;animation:panelIn .3s var(--ease) both}
.panel.is-on{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel__grid{display:grid;gap:clamp(1.5rem,3vw,2.6rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.panel__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.panel__copy h3{font-size:1.35rem;font-stretch:106%;margin-bottom:.8rem;letter-spacing:-.02em;line-height:1.15}
.panel__copy p{color:var(--ink-2);font-size:.98rem}
.panel__copy .btn{margin-top:.4rem}
.panel__copy em{font-style:normal;font-weight:600;color:var(--ink)}
.panel__copy--wide{max-width:62ch;margin-bottom:1.8rem}

/* tool grid */
.toolgrid{display:flex;flex-direction:column;gap:.9rem;align-content:flex-start}
.toolgroup{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.toolgroup__h{
  width:100%;margin:0 0 .1rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:.6rem;
}
.toolgroup__h::after{content:'';flex:1;height:1px;background:var(--rail)}
.tool{
  font-family:var(--f-mono);font-size:.76rem;padding:.42rem .62rem;border-radius:6px;cursor:pointer;
  background:var(--concrete-hi);border:1px solid var(--rail);color:var(--ink-2);
  transition:all .15s var(--ease);
}
.tool:hover{background:var(--asphalt);border-color:var(--asphalt);color:var(--paint);transform:translateY(-1px)}
.tool.is-on{background:var(--asphalt);border-color:var(--asphalt);color:var(--paint)}
/* The card reads in three moves: what someone asks, what comes back, and the
   sentence the envelope licenses. The last one is the point. */
.envcard{
  margin-top:1.2rem;background:var(--asphalt);border-radius:4px;
  box-shadow:0 0 0 1px var(--rail);color:#C7D1D2;padding:1.15rem 1.2rem;
  display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr);align-content:start;
}
@media (min-width:1080px){.envcard{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:1.8rem}}
.envcard__name{margin:0 0 .5rem;font-family:var(--f-mono);font-size:.92rem;color:var(--amber)}
.envcard__does{margin:0 0 1.2rem;font-size:.94rem;line-height:1.55;color:#BAC6C9}
.envcard__h{
  margin:0 0 .35rem;font-family:var(--f-mono);font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;color:#93A0A4;
}
.envcard__ask{margin:0 0 1.2rem;font-size:.92rem;line-height:1.5;color:#D2DBDC}
.envcard__say{
  margin:0;font-size:.94rem;line-height:1.55;color:#E7EDEC;
  border-left:2px solid var(--go);padding-left:.8rem;
}
.envcard .env{
  margin:0;font-family:var(--f-mono);font-size:.74rem;line-height:1.8;color:#8FA0A4;
  white-space:normal;background:#0E1215;border-radius:3px;padding:.85rem .9rem;
}
.envcard .env .br{display:block;color:#93A0A4}
.envcard .env .ln{display:block;padding-left:1.15rem}
.envcard .env .k{color:#7FA8CF}
.envcard .env .s{color:#9ED2AE}
.envcard .env .n{color:#E5B96A}
.envcard .env .warn{color:var(--amber)}
.envcard .env .ann{
  display:block;font-style:normal;color:#93A0A4;font-size:.69rem;line-height:1.55;
  margin:.2rem 0 .55rem;max-width:48ch;
}

/* gate board */
.board{background:var(--asphalt);border-radius:var(--radius);overflow:hidden;font-family:var(--f-mono)}
.board__head,.board__row{display:grid;grid-template-columns:minmax(0,1.45fr) .6fr .8fr .8fr;gap:.5rem;align-items:center;padding:.6rem .85rem}
.board__head{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:#7A868A;border-bottom:1px solid #232B30}
.board__row{font-size:.82rem;color:#C7D1D2;border-bottom:1px solid #1C2226}
.board__row:last-child{border-bottom:0}
.board__row .gate{color:#E3EAEA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board__row .gate small{display:block;color:#7A868A;font-size:.68rem}
.board__row .into{color:#8B979A}
.board__row .wait{font-family:var(--f-display);font-stretch:100%;font-weight:700;font-size:1.1rem;color:#fff}
.board__row .age{color:#7A868A;font-size:.72rem}
.board__row.is-blank .wait{color:var(--amber);font-family:var(--f-mono);font-size:.72rem;font-weight:400;letter-spacing:.04em}
.board__row.is-blank .age{color:var(--amber)}
.board__row.is-blank{background:rgba(229,160,52,.06)}
.board__row.just-blanked{animation:blankFlash .9s var(--ease)}
@keyframes blankFlash{0%{background:rgba(229,160,52,.32)}100%{background:rgba(229,160,52,.06)}}

/* fan-out */
.fanout{margin-bottom:2.4rem}
.fanout__svg{width:100%;max-width:830px;height:auto;background:var(--asphalt);border-radius:var(--radius);padding:.8rem;display:block}
.fan-edges path{stroke:#2E383E;stroke-width:1.6}
.fan-edges path.is-live{stroke:var(--amber);stroke-width:2;filter:drop-shadow(0 0 4px rgba(229,160,52,.45))}
.fan-nodes rect{fill:#1E252A;stroke:#2E383E;stroke-width:1}
.fan-nodes rect.src{fill:#181E22}
.fan-nodes rect.out{fill:#0E2A20;stroke:#1E5741}
.fan-nodes rect.is-live{fill:#2A2416;stroke:var(--amber)}
.fan-nodes text{fill:#C7D1D2;font-family:var(--f-mono);font-size:11px;text-anchor:middle}
.fan-nodes text.sm{fill:#7E8C91;font-size:9.5px}
.fanout .btn{margin-top:.8rem}

/* the 45 roadworks story */
.story{background:var(--concrete-hi);border:1px solid var(--rail);border-radius:var(--radius);padding:clamp(1.2rem,3vw,2rem)}
.story__quote{font-family:var(--f-display);font-stretch:106%;font-weight:600;font-size:clamp(1.15rem,.9rem + 1vw,1.5rem);line-height:1.28;letter-spacing:-.02em;max-width:34ch;margin-bottom:.9rem}
.story__quote b{font-weight:800;color:var(--sign-blue)}
.story__body{max-width:62ch;color:var(--ink-2);font-size:.98rem}
.story__body em{font-style:normal;font-weight:600;color:var(--ink)}
.rank{margin-top:1.6rem}
.rank__switch{display:inline-flex;background:var(--concrete-lo);border-radius:8px;padding:3px;margin-bottom:1rem;flex-wrap:wrap}
.rank__opt{
  font-family:var(--f-mono);font-size:.74rem;padding:.4rem .7rem;border:0;border-radius:6px;background:transparent;
  color:var(--ink-2);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)
}
.rank__opt.is-on{background:var(--asphalt);color:var(--paint)}
.rank__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.rank__item{
  display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto;gap:.7rem;align-items:center;
  background:#fff;border:1px solid var(--concrete-lo);border-radius:7px;padding:.55rem .75rem;
}
.rank__item .no{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3)}
.rank__item .txt{font-size:.9rem;line-height:1.4}
.rank__item .txt small{display:block;color:var(--ink-3);font-size:.74rem;font-family:var(--f-mono);margin-top:.1rem}
/* Both numbers are always on screen. Only the sort key changes emphasis, so a
   skeptic can see the data did not move — just the order. */
.rank__item .sc{
  display:flex;flex-direction:column;align-items:flex-end;gap:.05rem;
  font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3);white-space:nowrap;
}
.rank__item .sc b{font-weight:400}
.rank__item .sc b.key{color:var(--ink);font-weight:600}
.rank__item.is-hot{border-color:var(--sign-blue);box-shadow:inset 3px 0 0 var(--sign-blue)}
.rank__item.is-noise{background:var(--concrete);color:var(--ink-3)}
.rank__item.is-noise .txt{color:var(--ink-3)}
.rank__cap{margin:.9rem 0 0;font-family:var(--f-mono);font-size:.73rem;color:var(--ink-3)}

/* media pipeline */
.pipe{
  background:var(--asphalt);border-radius:var(--radius);padding:1.1rem;
  display:grid;gap:.55rem;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;
}
@media (max-width:640px){.pipe{grid-template-columns:1fr}.pipe__arrow{display:none}}
.pipe__stage{background:#1B2126;border:1px solid #262F35;border-radius:8px;padding:.7rem .6rem;text-align:center;position:relative}
.pipe__stage b{display:block;font-family:var(--f-mono);font-size:.68rem;color:#8B979A;letter-spacing:.03em}
.pipe__n{display:block;font-family:var(--f-display);font-stretch:104%;font-weight:750;font-size:1.5rem;color:#fff;line-height:1.3}
.pipe__stage i{font-family:var(--f-mono);font-size:.62rem;font-style:normal;color:var(--amber)}
.pipe__stage--gate{border-color:rgba(229,160,52,.45)}
.pipe__stage--out{border-color:rgba(47,163,107,.4)}
.pipe__stage--out .pipe__n{color:#6FD3A0}
.pipe__stage.is-hit{animation:stageHit .5s var(--ease)}
@keyframes stageHit{0%{background:#2C3238}100%{background:#1B2126}}
.pipe__arrow{width:14px;height:1px;background:#39444A;position:relative}
.pipe__arrow::after{content:'';position:absolute;right:-1px;top:-2.5px;border-left:5px solid #39444A;border-top:3px solid transparent;border-bottom:3px solid transparent}
.pipe__meter,.pipe__keep{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;font-family:var(--f-mono);font-size:.74rem;color:#7E8C91;padding-top:.6rem;border-top:1px solid #232B30}
.pipe__keep{padding-top:.4rem;border-top:0}
.pipe__meter b{font-size:1rem;color:#fff}
.pipe__saved{color:var(--go)}
.pipe__keep code{color:#8FA0A4;word-break:break-all}

/* ==========================================================================
   THE SPINE (dark band)
   ========================================================================== */
.band--dark{
  max-width:none;background:var(--asphalt);color:#C7D1D2;
  padding-inline:0;margin-block:clamp(1rem,3vw,2rem);
}
.band--dark .spine__head,.band--dark .spine__grid{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.band--dark .display{color:#fff;max-width:20ch}
.spine__head{margin-bottom:clamp(2rem,4vw,3rem)}
.spine__grid{display:grid;gap:clamp(1.6rem,3.5vw,3rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.spine__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.keypath{margin:0}
.keypath svg{width:100%;height:auto;background:#1B2126;border-radius:var(--radius);padding:.6rem}
.kp rect{fill:#232B30;stroke:#333F45;stroke-width:1}
.kp rect.kp-hot{fill:#2A2416;stroke:var(--amber)}
.kp text{fill:#D2DBDC;font-family:var(--f-mono);font-size:12px;text-anchor:middle}
.kp text.sm{fill:#8B979A;font-size:10px}
.kp-edge{stroke:#4A575D;stroke-width:1.5;stroke-dasharray:4 3}
.keypath figcaption{margin-top:.8rem;font-size:.88rem;color:#8B979A;line-height:1.5}

.caps{background:#1B2126;border-radius:var(--radius);padding:1.2rem}
.caps__label{display:block;font-family:var(--f-mono);font-size:.72rem;color:#8B979A;margin-bottom:.7rem}
.caps input[type=range]{width:100%;accent-color:var(--amber);margin-bottom:1.1rem}
.caps__meters{display:grid;gap:.9rem}
.meter__top{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.72rem;color:#8B979A;margin-bottom:.3rem}
.meter__top b{color:#D2DBDC;font-weight:400}
.meter__bar{height:8px;border-radius:4px;background:#0F1417;overflow:hidden}
.meter__bar i{display:block;height:100%;width:0;background:var(--go);border-radius:4px;transition:width .12s linear,background .2s linear}
.meter.is-warn .meter__bar i{background:var(--amber)}
.meter.is-over .meter__bar i{background:var(--stop)}
.caps__verdict{margin:1rem 0 .6rem;font-family:var(--f-mono);font-size:.8rem;color:#6FD3A0}
.caps__verdict.is-warn{color:var(--amber)}
.caps__verdict.is-over{color:#E58166}

/* ==========================================================================
   MODULES (agent-harness)
   ========================================================================== */
.modules{display:grid;gap:clamp(1rem,2.5vw,1.8rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.modules{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.modules__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rail)}
.modules__list li{border-bottom:1px solid var(--rail)}
.modules__list button{
  all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:baseline;
  width:100%;padding:.72rem .2rem;cursor:pointer;
}
.modules__list button:hover .mod__name{color:var(--sign-blue)}
.mod__name{font-family:var(--f-mono);font-size:.86rem;color:var(--ink)}
.mod__why{font-family:var(--f-body);font-size:.78rem;color:var(--ink-3);text-align:right;line-height:1.3}
.modules__list li.is-on{background:var(--concrete-hi);box-shadow:inset 3px 0 0 var(--sign-blue)}
.modules__list li.is-on button{padding-left:.7rem}
.modules__list li.is-on .mod__name{color:var(--sign-blue);font-weight:600}
.modules__detail{background:var(--asphalt);border-radius:var(--radius);padding:clamp(1.1rem,2.5vw,1.6rem);color:#C7D1D2;position:sticky;top:5.5rem}
.mdet__name{font-family:var(--f-mono);font-size:.95rem;color:var(--amber);margin:0 0 .1rem}
.mdet__role{font-size:.88rem;color:#8B979A;margin:0 0 1.1rem}
.mdet__h{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#7A868A;margin:0 0 .35rem}
.mdet__fail{
  margin:0 0 1.1rem;padding:.7rem .85rem;border-radius:7px;
  background:rgba(178,58,34,.12);border-left:2px solid var(--stop);color:#EDA894;font-size:.9rem;line-height:1.5;
}
.mdet__fix{margin:0 0 1.1rem;font-size:.94rem;line-height:1.6;color:#C7D1D2}
.mdet__code{margin:0;font-family:var(--f-mono);font-size:.74rem;line-height:1.8;color:#8FA0A4;white-space:pre;overflow-x:auto;background:#12171A;border-radius:7px;padding:.8rem .9rem}
.mdet__code .k{color:#7FA8CF}
.mdet__code .s{color:#9ED2AE}
.mdet__code .c{color:#879499;font-style:italic}
.mdet__code .n{color:#E5B96A}

/* ==========================================================================
   DOSTLY
   ========================================================================== */
.dostly{display:grid;gap:clamp(1.8rem,4vw,3rem);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){.dostly{grid-template-columns:300px minmax(0,1fr)}}
.dostly__phone{display:flex;flex-direction:column;gap:.9rem;align-items:stretch}
.dostly__cut{justify-content:center;align-self:stretch}
.dostly__note{
  max-width:70ch;margin:clamp(1.6rem,3vw,2.4rem) 0 0;font-size:.95rem;color:var(--ink-2);line-height:1.6;
}
.dostly__note em{font-style:normal;font-weight:600;color:var(--ink)}
.dostly__note b{font-family:var(--f-mono);font-size:.88em;font-weight:400;color:var(--ink)}
.phone{justify-self:center}
.phone__frame{
  width:280px;background:#0D1114;border-radius:34px;padding:9px;position:relative;
  box-shadow:0 30px 60px -34px rgba(20,24,27,.85),0 0 0 1px #262F35;
}
.phone__status{
  display:flex;align-items:center;justify-content:space-between;padding:.5rem .7rem .35rem;
  font-family:var(--f-mono);font-size:.62rem;color:#8B979A;position:relative;z-index:2;
}
.phone__clock{color:#C7D1D2}
.chip--live{background:rgba(47,163,107,.18);color:#6FD3A0;text-transform:none;letter-spacing:.02em}
.chip--poll{background:rgba(229,160,52,.18);color:var(--amber);text-transform:none;letter-spacing:.02em}
.phone__screen{background:#151B1F;border-radius:26px;height:454px;display:flex;flex-direction:column;overflow:hidden}
.chat__head{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;border-bottom:1px solid #222A2F}
.chat__ava{
  width:32px;height:32px;flex:none;border-radius:50%;background:linear-gradient(150deg,#2E7DD6,#0E4C93);
  display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:.9rem;
}
.chat__head b{display:block;color:#E4EAEA;font-size:.88rem;font-weight:600}
.chat__head span{display:block;font-family:var(--f-mono);font-size:.64rem;color:#6FD3A0}
.chat__log{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.45rem;scrollbar-width:thin}
.bub{max-width:82%;padding:.5rem .65rem;border-radius:12px;font-size:.82rem;line-height:1.45;animation:callIn .25s var(--ease) both}
.bub--them{background:#222A30;color:#DDE4E3;align-self:flex-start;border-bottom-left-radius:3px}
.bub--me{background:#0E4C93;color:#EAF1FA;align-self:flex-end;border-bottom-right-radius:3px}
.bub__meta{display:block;margin-top:.25rem;font-family:var(--f-mono);font-size:.58rem;opacity:.65}
.bub--pending{opacity:.6}
.chat__bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .7rem;border-top:1px solid #222A2F}
#chatInput{flex:1;background:#1E252A;border-radius:14px;padding:.4rem .7rem;font-size:.76rem;color:#7A868A}
.chat__send{
  width:28px;height:28px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:var(--sign-blue);color:#fff;display:grid;place-items:center;transition:background .16s var(--ease)
}
.chat__send:hover{background:#2E7DD6}

.netlog{
  background:var(--asphalt);border-radius:4px;padding:.6rem .75rem;
  font-family:var(--f-mono);font-size:.68rem;line-height:1.8;color:#8B979A;min-height:5rem;
}
.netlog span{display:block;animation:callIn .22s var(--ease) both}
.netlog .ok{color:#6FD3A0}
.netlog .warn{color:var(--amber)}
.netlog .dim{color:#879499}

/* the profile, filling from the conversation next to it */
.extract{
  background:var(--concrete-hi);border:1px solid var(--rail);border-radius:var(--radius);
  padding:clamp(1.1rem,2.5vw,1.6rem);
}
.extract__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem}
.extract__title{
  margin:0;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}
.extract__pct{margin:0;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)}
.extract__pct b{
  font-family:var(--f-display);font-stretch:104%;font-weight:750;font-size:1.15rem;
  color:var(--ink);margin-right:.25rem;
}
.extract__bar{height:4px;border-radius:2px;background:var(--concrete-lo);margin:.7rem 0 1.1rem;overflow:hidden}
.extract__bar i{display:block;height:100%;width:0;background:var(--sign-blue);transition:width .5s var(--ease)}
.extract__rows{list-style:none;margin:0;padding:0}
.exrow{
  display:grid;grid-template-columns:6.5rem minmax(0,1fr) auto;gap:1rem;align-items:baseline;
  padding:.7rem 0;border-top:1px solid var(--concrete-lo);
}
.exrow:first-child{border-top:0}
.exrow__k{font-family:var(--f-mono);font-size:.76rem;color:var(--ink-3)}
.exrow__v{font-size:.98rem;color:var(--ink);transition:color .3s var(--ease)}
.exrow__c{display:flex;gap:3px;align-items:center}
.exrow__c i{width:5px;height:5px;border-radius:50%;background:var(--concrete-lo)}
.exrow__c i.on{background:var(--sign-blue)}
.exrow.is-empty .exrow__v{color:var(--ink-3);font-family:var(--f-mono);font-size:.8rem}
.exrow.is-merged{position:relative}
.exrow.is-merged .exrow__v::after{
  content:'merged, not replaced';display:block;
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.03em;color:var(--sign-blue);margin-top:.15rem;
}
.extract__match{
  margin-top:1.2rem;padding:.9rem 1rem;border-radius:8px;
  background:var(--sign-green);color:var(--paint);animation:callIn .35s var(--ease) both;
}
.extract__matchh{
  margin:0 0 .3rem;font-family:var(--f-mono);font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.75);
}
.extract__matchb{margin:0;font-size:.95rem;line-height:1.5}

/* ==========================================================================
   ME
   ========================================================================== */
.me{margin-top:clamp(2rem,4vw,3rem)}
.me__cols{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:clamp(2rem,4vw,3rem)}
.me__col h3{
  font-family:var(--f-mono);font-size:.68rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--rail);
}
.me__big{font-family:var(--f-display);font-stretch:112%;font-weight:800;font-size:1.9rem;letter-spacing:-.03em;margin-bottom:.5rem;line-height:1}
.me__col p{font-size:.92rem;color:var(--ink-2)}
.me__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;font-size:.92rem;color:var(--ink-2)}
.me__list li{padding-left:.9rem;position:relative}
.me__list li::before{content:'';position:absolute;left:0;top:.62em;width:4px;height:4px;background:var(--rail)}

.gap{
  background:var(--asphalt);border-radius:var(--radius);padding:clamp(1.3rem,3vw,2.2rem);
  display:grid;gap:clamp(1.2rem,3vw,2.4rem);grid-template-columns:minmax(0,1fr);align-items:center;
  border-left:5px solid var(--amber);
}
@media (min-width:860px){.gap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.gap__title{color:#fff;font-size:clamp(1.25rem,1rem + 1.1vw,1.7rem);font-stretch:108%;letter-spacing:-.02em;line-height:1.15;margin-bottom:.9rem}
.gap__body p{color:#A9B6BA;font-size:.98rem;max-width:56ch}
.gap__env{margin:0;font-family:var(--f-mono);font-size:.76rem;line-height:1.85;color:#8FA0A4;white-space:pre;overflow-x:auto;background:#12171A;border-radius:8px;padding:1rem 1.1rem}
.gap__env .k{color:#7FA8CF}
.gap__env .s{color:#9ED2AE}
.gap__env .n{color:#E5B96A}
.gap__env .p{color:#879499}

/* ==========================================================================
   CONTACT + FOOT
   ========================================================================== */
.contact{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:2rem}
.contact__card{
  display:flex;flex-direction:column;gap:.25rem;text-decoration:none;color:var(--ink);
  background:var(--concrete-hi);border:1px solid var(--rail);border-radius:var(--radius);
  padding:1.1rem 1.15rem;transition:all .18s var(--ease);
}
.contact__card:hover{background:#fff;border-color:var(--ink-3);transform:translateY(-2px)}
.contact__k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.contact__card b{font-family:var(--f-display);font-stretch:104%;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;word-break:break-word}
.contact__hint{font-size:.85rem;color:var(--ink-2)}
.contact__card--mail{background:var(--sign-green);border-color:var(--sign-green);color:var(--paint)}
.contact__card--mail:hover{background:#0A5D45;border-color:#0A5D45;color:var(--paint)}
.contact__card--mail .contact__k{color:rgba(255,255,255,.75)}
.contact__card--mail .contact__hint{color:rgba(255,255,255,.85)}

.foot{
  padding:2rem var(--bleed-pad) 3rem;
  border-top:1px solid var(--rail);
  font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);line-height:1.7;
}
.foot p{margin:0}
.foot__sep{opacity:.5;margin:0 .3rem}
.foot__note{margin-top:.4rem;max-width:70ch}

/* ==========================================================================
   REFINEMENTS + SMALL SCREENS
   ========================================================================== */
.panel__copy .fineprint{margin-top:1.1rem}
.panel__copy .btn+.fineprint{margin-top:1rem}

@media (max-width:760px){
  .topbar{padding-block:.7rem}
  .wordmark__meta{display:none}
  .topnav a:not(.topnav__cta){display:none}
  .sign__inner{flex-direction:column;align-items:flex-start;gap:1rem}
  .sign__dist{border-left:0;border-top:2px solid rgba(255,255,255,.3);padding:.7rem 0 0;text-align:left;width:100%}
  .trace__body{padding:.8rem .7rem}
  .call__name{white-space:normal}
  .board__head,.board__row{grid-template-columns:minmax(0,1.5fr) .5fr .75fr;font-size:.78rem}
  .board__head span:last-child,.board__row .age{display:none}
  .board__row.is-blank .wait{font-size:.68rem}
  .phone__frame{width:100%;max-width:300px}
  .modules__detail{position:static}
  .phone{position:static}
  .hero__text{position:static}
}
@media (max-width:420px){
  .ticker{gap:.3rem 1.2rem}
  .trace__title{font-size:.62rem}
}

/* SVG text is in user units, so a diagram squeezed to 390px renders its labels
   at 4px. Below 700px the diagrams keep a legible size and scroll instead. */
@media (max-width:700px){
  .fanout,.keypath{overflow-x:auto}
  .fanout__svg{min-width:600px}
  .keypath svg{min-width:420px}
}

/* ---------- print ---------- */
@media print{
  .topbar,.rail,.progress,.skip,.sysnav,.trace__foot,.hero__actions,
  .trace__replay,.rank__switch,.btn,.caps input{display:none!important}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.45}
  .panel{display:block!important;page-break-inside:avoid}
  .panel+.panel{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #999}
  .band{padding-block:1.2rem;page-break-inside:avoid}
  .band--dark{background:#fff!important;color:#000!important}
  .trace,.calls,.call,.board,.envcard,.pipe,.modules__detail,.gap,.caps,.netlog,
  .msg,.msg--user,.msg--agent,.gap__env,.mdet__code,.fanout__svg,.keypath svg,
  .pipe__stage,.board__row,.phone__frame,.phone__screen{
    background:#fff!important;color:#000!important;box-shadow:none!important;border-color:#bbb!important;
  }
  .sign{background:#fff!important;box-shadow:none!important;border:2px solid #000}
  .sign__inner,.sign__title,.sign__sub,.sign__kicker,.sign__dist b,.sign__dist span{color:#000!important;border-color:#000!important}
  .trace__title,.call__name,.call__ms,.msg--agent,.mdet__fix,.gap__body p,
  .board__row .gate,.board__row .wait,.eyebrow,.fineprint,.foot{color:#000!important}
  .display{font-size:22pt}
  .reveal{opacity:1!important;transform:none!important}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
}

/* ---------- 404 ---------- */
.lost{max-width:var(--shell);margin-inline:auto;padding:clamp(4rem,14vh,9rem) var(--gutter)}
.lost .sign{max-width:44rem}
.lost__body{margin-top:2rem;max-width:46ch;color:var(--ink-2)}
.lost__back{margin-top:1.4rem}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
html{scroll-behavior:smooth;scroll-padding-top:5rem}