:root{
    --bench:#EFF2F1;        /* cool lab-bench grey */
    --panel:#FFFFFF;
    --ink:#15211E;
    --ink-soft:#5A6663;
    --line:#D8DEDC;
    --signal:#0E7C72;       /* phosphor teal — the one accent */
    --signal-soft:#E0F0EE;
    --warn:#C97A12;
    --bad:#B3402E;
    --mono:'IBM Plex Mono', ui-monospace, monospace;
    --display:'Space Grotesk', sans-serif;
    --body:'Inter', system-ui, sans-serif;
    --radius:10px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bench);
    color:var(--ink);
    font-family:var(--body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1040px; margin:0 auto; padding:0 24px;}

  /* ---------- nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(239,242,241,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; height:60px;}
  .brand{font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink);}
  .brand .dot{width:9px; height:9px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 3px var(--signal-soft);}
  nav.links{display:flex; gap:1.6rem;}
  nav.links a{font-size:.9rem; font-weight:500; color:var(--ink-soft); text-decoration:none;}
  nav.links a:hover, nav.links a:focus-visible{color:var(--signal);}
  a:focus-visible, button:focus-visible{outline:2px solid var(--signal); outline-offset:2px; border-radius:4px;}

  /* ---------- hero / instrument ---------- */
  .hero{padding:56px 0 28px;}
  .eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--signal); margin-bottom:.6rem;}
  h1{font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,4.5vw,2.9rem); letter-spacing:-.02em; line-height:1.12; max-width:620px;}
  .hero p.lead{margin-top:.9rem; max-width:560px; color:var(--ink-soft);}

  .instrument{
    margin-top:36px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 1px 2px rgba(21,33,30,.05), 0 8px 28px rgba(21,33,30,.06);
    overflow:hidden;
  }
  .inst-head{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:14px 22px; border-bottom:1px solid var(--line);
    font-family:var(--mono); font-size:.75rem; color:var(--ink-soft);
  }
  .inst-head .status{display:flex; align-items:center; gap:.5rem;}
  .led{width:8px;height:8px;border-radius:50%;background:var(--line);}
  .led.on{background:var(--signal); animation:pulse 1.2s infinite;}
  @keyframes pulse{50%{opacity:.35;}}

  .readouts{
    display:grid; grid-template-columns:repeat(4,1fr);
    border-bottom:1px solid var(--line);
  }
  .readout{padding:20px 22px; border-right:1px solid var(--line);}
  .readout:last-child{border-right:none;}
  .readout .label{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);}
  .readout .value{font-family:var(--mono); font-weight:600; font-size:clamp(1.4rem,3.2vw,2.1rem); margin-top:.2rem; font-variant-numeric:tabular-nums;}
  .readout .unit{font-size:.8rem; font-weight:400; color:var(--ink-soft); margin-left:.25rem;}
  .readout.active .value{color:var(--signal);}

  .trace{position:relative; height:130px; background:
      repeating-linear-gradient(to right, transparent 0 39px, var(--line) 39px 40px),
      repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px);
    background-color:#FBFCFC;
  }
  .trace svg{position:absolute; inset:0; width:100%; height:100%;}
  .trace .phase{
    position:absolute; top:10px; left:14px;
    font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-soft); background:rgba(251,252,252,.85); padding:2px 8px; border:1px solid var(--line); border-radius:4px;
  }

  .verdict{
    display:none; align-items:center; gap:14px; flex-wrap:wrap;
    padding:16px 22px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:.82rem; background:#FBFCFC;
  }
  .verdict.show{display:flex;}
  .verdict .grade{
    font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1;
    padding:.35rem .8rem; border-radius:8px; background:var(--signal-soft); color:var(--signal);
  }
  .verdict .grade.chip{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    align-self:flex-start; white-space:nowrap; padding:.45rem .7rem;
  }
  .verdict .grade.warn{background:#F7ECDB; color:var(--warn);}
  .verdict .grade.bad{background:#F5E2DE; color:var(--bad);}
  .verdict span#verdictTxt{flex:1; min-width:240px;}
  .verdict a{color:var(--signal);}

  .inst-foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:18px 22px; flex-wrap:wrap;}
  .btn{
    font-family:var(--display); font-weight:500; font-size:1rem;
    border:none; cursor:pointer; border-radius:8px; padding:.75rem 1.8rem;
    background:var(--signal); color:#fff; transition:transform .08s ease, background .15s ease;
  }
  .btn:hover{background:#0B6A61;}
  .btn:active{transform:scale(.98);}
  .btn[disabled]{background:var(--ink-soft); cursor:wait;}
  .btn.secondary{background:transparent; color:var(--signal); border:1px solid var(--signal);}
  .btn.secondary:hover{background:var(--signal-soft);}
  .btn.small{font-size:.85rem; padding:.5rem 1.1rem;}
  .inst-foot .meta{font-family:var(--mono); font-size:.74rem; color:var(--ink-soft);}

  /* ---------- sections ---------- */
  section{padding:64px 0;}
  section h2{font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.015em;}
  section .sub{color:var(--ink-soft); margin-top:.5rem; max-width:640px;}

  /* decision tree */
  #start-here{padding:40px 0 8px;}
  .decide{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px;}
  /* single-guide portal: one card at a sensible width, not stretched across a 3-col grid */
  .decide--single{grid-template-columns:minmax(0,420px);}
  .decide > a, .decide > .card{
    display:block; text-decoration:none; color:var(--ink);
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px 22px; transition:border-color .15s ease, transform .12s ease;
  }
  .decide > a:hover{border-color:var(--signal); transform:translateY(-2px);}
  .decide .route a{color:var(--signal); text-decoration:none;}
  .decide .route a:hover{text-decoration:underline;}
  .compare{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px;}
  @media (max-width:680px){ .compare{grid-template-columns:1fr;} }
  .rcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
  .rcard.good{border-top:3px solid var(--signal);}
  .rcard.bad{border-top:3px solid var(--bad);}
  .gradebadge{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; font-family:var(--display); font-weight:700; font-size:1.3rem; color:#fff; flex:none;}
  .bignum{font-family:var(--display); font-weight:700; font-size:2.3rem; line-height:1; color:var(--ink);}
  .qrow{display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--line); font-size:.9rem;}
  .qrow:last-child{border-bottom:none;}
  .qrow .v{font-family:var(--mono); color:var(--ink-soft);}
  .proof{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px;}
  @media (max-width:680px){ .proof{grid-template-columns:1fr;} }
  .proof figure{margin:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
  .proof img{display:block; width:100%; height:auto; border-bottom:1px solid var(--line);}
  .proof figcaption{padding:13px 16px;}
  .proof .lbl{display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:700;}
  .proof .meta{font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); margin-top:.4rem; line-height:1.5;}
  .decide .symptom{font-family:var(--display); font-weight:700; font-size:1rem; line-height:1.35;}
  .decide .route{margin-top:.7rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--signal);}

  /* bufferbloat card */
  .bloat-card{
    margin-top:28px; display:grid; grid-template-columns:1.2fr .8fr; gap:0;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  }
  .bloat-card .text{padding:30px;}
  .bloat-card .text p{color:var(--ink-soft); margin-top:.7rem; font-size:.95rem;}
  .bloat-card .demo{
    border-left:1px solid var(--line); background:#FBFCFC; padding:24px;
    display:flex; flex-direction:column; justify-content:center; gap:14px;
  }
  .lat-row{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:.78rem;}
  .lat-row .tag{width:84px; color:var(--ink-soft);}
  .lat-bar{flex:1; height:10px; background:var(--signal-soft); border-radius:5px; position:relative; overflow:hidden;}
  .lat-bar i{position:absolute; inset:0; border-radius:5px; background:var(--signal); width:12%;}
  .lat-bar.loaded i{width:78%; background:var(--bad);}
  .lat-row .ms{width:64px; text-align:right; font-weight:600;}
  .delta{font-family:var(--mono); font-size:.78rem; color:var(--bad); font-weight:600;}
  .bloat-card .actions{margin-top:1.4rem; display:flex; gap:.8rem; flex-wrap:wrap;}

  /* ---------- guides ---------- */
  .guide{margin-top:36px;}
  .guide-head{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    padding:18px 24px; border:1px solid var(--line); border-bottom:none;
    border-radius:var(--radius) var(--radius) 0 0; background:var(--ink); color:#fff;
  }
  .guide-head h3{font-family:var(--display); font-weight:700; font-size:1.2rem; display:flex; align-items:baseline; gap:.8rem;}
  .guide-head .gn{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:#9FD8D0;}
  .guide-body{border:1px solid var(--line); border-top:none; border-radius:0 0 var(--radius) var(--radius); background:var(--bench); padding:20px;}

  .steps{display:grid; gap:18px;}
  .step{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px 24px;
  }
  .step h4{font-family:var(--display); font-size:1.05rem; font-weight:700; display:flex; align-items:baseline; gap:.7rem;}
  .step h4 .n{font-family:var(--mono); font-size:.72rem; color:var(--signal); letter-spacing:.08em;}
  .step p{color:var(--ink-soft); font-size:.93rem; margin-top:.4rem;}
  .step p strong{color:var(--ink);}
  .cmd{
    margin-top:.8rem; position:relative;
    background:#15211E; color:#D8E6E2; border-radius:8px;
    font-family:var(--mono); font-size:.82rem; padding:14px 90px 14px 16px;
    overflow-x:auto; white-space:pre;
  }
  .cmd .copy{
    position:absolute; top:8px; right:8px;
    font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
    background:rgba(255,255,255,.1); color:#D8E6E2; border:1px solid rgba(255,255,255,.2);
    border-radius:5px; padding:4px 10px; cursor:pointer;
  }
  .cmd .copy:hover{background:rgba(255,255,255,.2);}

  table.bench{width:100%; border-collapse:collapse; margin-top:.8rem; font-size:.88rem;}
  table.bench th, table.bench td{padding:.55rem .8rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
  table.bench th{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:500;}
  table.bench td:last-child{font-family:var(--mono); font-size:.8rem;}
  .ok{color:var(--signal); font-weight:600;}
  .meh{color:var(--warn); font-weight:600;}
  .poor{color:var(--bad); font-weight:600;}

  .figure{margin-top:1.1rem; background:#FBFCFC; border:1px solid var(--line); border-radius:8px; padding:18px;}
  .figure svg{display:block; width:100%; height:auto;}
  .figcap{font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); margin-top:.7rem; letter-spacing:.04em;}

  /* ---------- affiliate gear cards ---------- */
  .gear{
    margin-top:1.1rem; background:#FBFCFC; border:1px solid var(--line);
    border-left:3px solid var(--signal); border-radius:8px; padding:16px 18px;
  }
  .gear .gear-tag{
    font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--signal); display:flex; align-items:center; gap:.5rem; margin-bottom:.7rem;
  }
  .gear .gear-tag::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--signal);}
  .gear ul{list-style:none; display:grid; gap:10px;}
  .gear li{display:flex; align-items:baseline; gap:.7rem; font-size:.9rem;}
  .gear li .what{flex:1;}
  .gear li .what b{font-family:var(--display); font-weight:700;}
  .gear li .price{font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); white-space:nowrap;}
  .gear a.buy{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-decoration:none;
    color:var(--signal); border:1px solid var(--signal); border-radius:5px; padding:3px 10px; white-space:nowrap;
  }
  .gear a.buy:hover{background:var(--signal-soft);}
  .gear li{flex-wrap:wrap;}
  .gear .buys{display:flex; gap:.4rem; flex-wrap:wrap;}
  .gear .honest{margin-top:.8rem; font-size:.78rem; color:var(--ink-soft); font-style:italic;}
  .disclosure{
    font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); line-height:1.5;
    border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem;
  }

  footer{border-top:1px solid var(--line); padding:28px 0 40px; color:var(--ink-soft); font-size:.85rem;}
  footer .wrap{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;}

  @media (max-width:820px){
    .readouts{grid-template-columns:repeat(2,1fr) !important;}
    .readout{border-bottom:1px solid var(--line);}
    .readout:nth-child(2n){border-right:none;}
    .decide{grid-template-columns:1fr;}
    .bloat-card{grid-template-columns:1fr;}
    .bloat-card .demo{border-left:none; border-top:1px solid var(--line);}
    nav.links{gap:.9rem; flex-wrap:wrap;}
    nav.links a{font-size:.82rem;}
    header .nav{flex-wrap:wrap; height:auto; padding:10px 0; gap:.4rem .9rem;}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important;}
    html{scroll-behavior:auto;}
  }

  /* ---------- print ---------- */
  .nav a.active{color:var(--signal); font-weight:600;}
  @media print{
    header, footer, .no-print, .guide-head .btn{display:none !important;}
    body{background:#fff;}
    section{padding:10px 0;}
    .guide-head{background:#fff; color:var(--ink); border-bottom:1px solid var(--line);}
    .guide-head .gn{color:var(--ink-soft);}
    .guide-body{background:#fff;}
    .step{break-inside:avoid; border:1px solid #bbb;}
    .cmd{background:#fff; color:var(--ink); border:1px solid #bbb;}
    .cmd .copy{display:none;}
    .gear, .disclosure{border-color:#bbb;}
  }

  /* ---------- responsive / mobile overflow fixes ---------- */
  img{ max-width:100%; height:auto; }
  svg{ max-width:100%; }                       /* viewBox diagrams scale down instead of overflowing */
  table.bench td, table.bench th{ overflow-wrap:break-word; }
  .tscroll{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }

  @media (max-width:680px){
    .wrap{ padding:0 16px; }                   /* tighter gutters on phones */
    table.bench{ font-size:.82rem; table-layout:fixed; width:100%; }
    table.bench:not(.c3) td:first-child, table.bench:not(.c3) th:first-child{ width:34%; }
    table.bench.c3 th:nth-child(1), table.bench.c3 td:nth-child(1){ width:26%; }
    table.bench.c3 th:nth-child(3), table.bench.c3 td:nth-child(3){ width:24%; }
    .guide-body{ padding:14px; }                /* reclaim width on phones */
    .step{ padding:16px 14px; }
  }

  /* grid shrink fix: stop one long pre-formatted command from stretching every step */
  .steps{ grid-template-columns:minmax(0,1fr); }
  .step{ min-width:0; }
  .cmd{ min-width:0; }