:root { --ink:#0D1530; --beam:#3B5BFF; --beam-d:#2A45D6; --mint:#38E0B0; --mint-l:#DDF8EF; --paper:#F5F6FA; --white:#fff; --amber:#F2A93B; --amber-l:#FDF0DA; --red:#E5484D; --red-l:#FDE4E4; --soft:#566079; --line:#DEE2EC; }
* { box-sizing:border-box; }
html { scroll-padding-top:84px; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 'Hanken Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; height:auto; display:block; }
h1, h2, h3 { font-family:'Syne',sans-serif; font-weight:700; line-height:1.02; letter-spacing:-.02em; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-999px; top:8px; background:var(--beam); color:#fff; padding:8px 12px; z-index:50; }
.skip:focus { left:8px; }
:focus-visible { outline:3px solid var(--beam); outline-offset:3px; }
.top { position:sticky; top:0; z-index:20; background:rgba(245,246,250,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:26px; height:66px; }
.logo { display:flex; align-items:baseline; gap:.02em; text-decoration:none; color:var(--ink); }
.logo svg { height:.74em; width:auto; flex:none; font-size:23px; transform:translateY(.04em); }
.logo span { font:700 23px/1 'Syne',sans-serif; letter-spacing:-.03em; }
.logo b { color:var(--beam); }
.top nav { display:flex; gap:22px; margin-left:auto; }
.top nav a { text-decoration:none; font-weight:600; font-size:15.5px; color:var(--soft); padding:6px 0; border-bottom:2px solid transparent; }
.top nav a:hover, .top nav a[aria-current] { color:var(--ink); border-color:var(--beam); }
.top .cta { text-decoration:none; font-weight:700; font-size:15px; background:var(--beam); color:#fff; padding:10px 18px; border-radius:10px; }
.top .cta:hover { background:var(--beam-d); }
.menu-toggle { display:none; margin-left:auto; background:none; border:2px solid var(--ink); font:700 14px 'Hanken Grotesk'; padding:7px 14px; border-radius:10px; color:var(--ink); }
.btn { display:inline-block; background:var(--beam); color:#fff; font-weight:700; text-decoration:none; padding:13px 22px; border-radius:12px; border:0; font-size:16px; cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--beam-d); }
.btn.ink { background:var(--ink); } .btn.ink:hover { background:#000; }
.btn.line { background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor; }
.btn.sm { padding:8px 14px; font-size:14px; border-radius:9px; }
.sec { padding:92px 0; }
.sec h2 { font-size:clamp(36px,4.6vw,60px); margin:0 0 16px; }
.lede { font-size:clamp(18px,1.5vw,20.5px); color:var(--soft); max-width:36em; margin:0 0 38px; }
.dark { background:var(--ink); color:#E6E9F5; }
.dark .lede { color:#A3ABC8; }
.page-intro { padding:74px 0 52px; background:var(--white); border-bottom:1px solid var(--line); }
.page-intro h1 { font-size:clamp(44px,6.2vw,90px); margin:0 0 16px; max-width:13em; }
.page-intro h1 em { font-style:normal; color:var(--beam); }
.page-intro p { font-size:clamp(18px,1.6vw,21px); color:var(--soft); max-width:35em; margin:0; }
.src { font-size:13.5px; color:var(--soft); }
.dark .src { color:#8E97B8; }
.foot { background:var(--ink); color:#A3ABC8; font-size:14.5px; padding:56px 0 28px; }
.foot .wrap { display:grid; grid-template-columns:1fr auto; gap:28px; }
.foot .logo { color:#fff; }
.foot p { margin:12px 0 0; }
.foot nav { display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.foot nav a { text-decoration:none; color:#DDE2F2; font-weight:600; }
.fine { grid-column:1 / -1; display:flex; gap:8px 24px; flex-wrap:wrap; border-top:1px solid #222C4C; padding-top:20px; margin:0 !important; color:#7C86A8; }

/* the tracker */
.vt { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 60px -40px rgba(13,21,48,.45); overflow:hidden; }
.vt-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 18px; border-bottom:1px solid var(--line); }
.vt-stats { display:flex; gap:8px; flex-wrap:wrap; }
.vt-stats span { font-size:13.5px; font-weight:700; border-radius:999px; padding:5px 12px; background:var(--paper); }
.vt-stats .r { background:var(--red-l); color:#9B1C21; } .vt-stats .a { background:var(--amber-l); color:#7A4B06; } .vt-stats .g { background:var(--mint-l); color:#0B6B50; }
.vt table { width:100%; border-collapse:collapse; font-size:15px; table-layout:fixed; }
.vt td .pill { margin:2px 0; }
.vt th { text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--soft); padding:10px 12px; background:var(--paper); }
.vt td { padding:10px 12px; border-top:1px solid var(--line); vertical-align:middle; }
.vt td input, .vt td select { width:100%; font:500 15px 'Hanken Grotesk'; border:1.5px solid transparent; background:transparent; border-radius:8px; padding:6px 8px; color:var(--ink); }
.vt td input:hover, .vt td select:hover { border-color:var(--line); }
.vt td input:focus, .vt td select:focus { border-color:var(--beam); outline:none; background:#fff; }
.vt .pill { display:inline-block; font-size:12.5px; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.vt .ok { background:var(--mint-l); color:#0B6B50; } .vt .warn { background:var(--amber-l); color:#7A4B06; } .vt .bad { background:var(--red-l); color:#9B1C21; } .vt .mute { background:var(--paper); color:var(--soft); }
.vt .del { background:none; border:0; color:var(--soft); cursor:pointer; font-size:18px; padding:4px 8px; border-radius:6px; }
.vt .del:hover { background:var(--red-l); color:#9B1C21; }
.vt-foot { display:flex; gap:8px; flex-wrap:wrap; padding:14px 18px; border-top:1px solid var(--line); align-items:center; }
.vt-foot small { color:var(--soft); margin-left:auto; }
@media (max-width:860px) {
  .vt table, .vt thead, .vt tbody, .vt tr, .vt td { display:block; } .vt thead, .vt colgroup { display:none; }
  .vt tr { border-top:1px solid var(--line); padding:8px 6px; display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; }
  .vt td { border:0; padding:4px 6px; } .vt td::before { content:attr(data-l); display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--soft); }
  .vt td.nm { grid-column:1 / -1; }
}
@media (max-width:1000px) {
  .menu-toggle { display:block; } .top .cta { display:none; }
  .top nav { display:none; position:absolute; top:66px; left:0; right:0; background:var(--paper); flex-direction:column; gap:0; padding:6px 24px 18px; border-bottom:1px solid var(--line); }
  .top nav.open { display:flex; } .top nav a { padding:12px 0; font-size:18px; border-bottom:1px solid var(--line); }
  .sec { padding:68px 0; }
}
@media (max-width:600px) { .foot .wrap { grid-template-columns:1fr; } .page-intro { padding:56px 0 44px; } }