@font-face{font-family:'Archivo';src:url('/fonts/archivo.woff2') format('woff2-variations');
  font-weight:400 800;font-stretch:100% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/fonts/newsreader.woff2') format('woff2-variations');
  font-weight:400 600;font-style:normal;font-display:swap}

/* The same tokens both products already use, so the hub reads as their parent
   rather than as a third brand. */
:root{
  --bg:oklch(0.962 0.013 82);
  --foam:oklch(0.972 0.011 82);
  --ink:oklch(0.265 0.018 220);
  --muted:oklch(0.470 0.022 218);
  --sea:oklch(0.395 0.058 216);
  --sea-deep:oklch(0.310 0.052 218);
  --amber:oklch(0.600 0.132 38);
  --rule:oklch(0.820 0.022 82);
  --hair:oklch(0.900 0.016 82);
  --go:oklch(0.560 0.110 155);
  --wait:oklch(0.720 0.140 75);
  --stop:oklch(0.550 0.170 25);
  --off:oklch(0.760 0.010 82);
  --sans:'Archivo',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --paper:0 18px 44px -22px oklch(0.265 0.018 220/.35),0 2px 8px -2px oklch(0.265 0.018 220/.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
@media(min-width:900px){body{font-size:18px}}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
a{color:var(--sea);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- masthead ---------------------------------------------------------- */
.top{border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding-top:20px;padding-bottom:20px}
.mark{font:700 20px/1 var(--sans);letter-spacing:-.01em;color:var(--ink);
  text-decoration:none}
.mark:hover{color:var(--ink)}
.langs{font:500 14px/1 var(--sans);display:flex;gap:14px}
.langs a{text-decoration:none;color:var(--muted)}
.langs [aria-current]{color:var(--ink);text-decoration:underline}

/* ---- statement --------------------------------------------------------- */
.lede{padding:64px 0 8px}
.lede h1{margin:0;font:400 clamp(34px,7vw,52px)/1.08 var(--serif);
  letter-spacing:-.015em;max-width:15ch}
.lede p{margin:20px 0 0;max-width:46ch;color:var(--muted);font-size:1.05em}

/* ---- live panel -------------------------------------------------------- */
.now{margin:40px 0 0;background:var(--foam);border:1px solid var(--rule);
  border-radius:14px;box-shadow:var(--paper);overflow:hidden}
.now h2{margin:0;padding:14px 20px;border-bottom:1px solid var(--hair);
  font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.ports{margin:0;padding:0;list-style:none}
.port{display:flex;align-items:center;gap:14px;padding:16px 20px;
  border-bottom:1px solid var(--hair)}
.port:last-child{border-bottom:0}
.dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--off);
  box-shadow:0 0 0 4px oklch(0.760 0.010 82/.22)}
.dot[data-stage=clear],.dot[data-stage=green]{background:var(--go);
  box-shadow:0 0 0 4px oklch(0.560 0.110 155/.20)}
.dot[data-stage=yellow]{background:var(--wait);
  box-shadow:0 0 0 4px oklch(0.720 0.140 75/.22)}
.dot[data-stage=red]{background:var(--stop);
  box-shadow:0 0 0 4px oklch(0.550 0.170 25/.20)}
.port-name{font-weight:600}
.port-line{color:var(--muted);font-size:.86em}
.port-state{margin-left:auto;text-align:right}
.port-state b{display:block;font-weight:600;font-size:.94em}
.port-state span{color:var(--muted);font-size:.8em;font-variant-numeric:tabular-nums}
.tally{padding:14px 20px;border-top:1px solid var(--hair);color:var(--muted);
  font-size:.86em;font-variant-numeric:tabular-nums}

/* ---- products ---------------------------------------------------------- */
.products{display:grid;gap:16px;margin:40px 0 0}
@media(min-width:680px){.products{grid-template-columns:1fr 1fr}}
.card{display:block;padding:24px;border:1px solid var(--rule);border-radius:14px;
  background:var(--foam);text-decoration:none;color:inherit;
  transition:border-color .18s,transform .18s}
.card:hover{border-color:var(--sea);transform:translateY(-2px);color:inherit}
.card h3{margin:0;font:600 19px/1.2 var(--sans)}
.card .host{display:block;margin:4px 0 12px;color:var(--sea);font-size:.86em}
.card p{margin:0;color:var(--muted);font-size:.94em}

/* ---- foot -------------------------------------------------------------- */
.foot{margin:56px 0 0;border-top:1px solid var(--hair);padding:24px 0 48px;
  color:var(--muted);font-size:.9em}
.foot p{margin:0 0 6px}