:root{
  /* ---- neutrals (warm-tinted near-neutral, Peec-clean) ---- */
  --ink:#0E0F12; --ink-2:#3A3D44; --ink-3:#6B7079;
  --line:#E7E8EC; --line-2:#F0F1F4;
  --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#FBFBFC;

  /* ---- interactive (Nightwatch blue, the single action accent) ---- */
  --blue:#2563EB; --blue-press:#1D4ED8; --blue-bg:#EEF3FF; --blue-line:#D5E1FF;

  /* ---- functional status ---- */
  --ok:#15875A;   --ok-bg:#E7F6EE;   --ok-line:#BfE8D2;  --ok-dot:#1FA968;
  --warn:#B45309; --warn-bg:#FCF3E4; --warn-line:#F6DDB0; --warn-dot:#F59E0B;
  --err:#C32B43;  --err-bg:#FCE9EC;  --err-line:#F6C9D1;  --err-dot:#E5364F;
  --neutral:#6B7079; --neutral-bg:#F1F2F4; --neutral-dot:#A1A6AE;
  --alert:#F97316; /* the bright plan-limit orange */

  /* ---- categorical data-viz (warm brand set; charts only) ---- */
  --teal:#2A9D90; --coral:#E76E50; --gold:#F4A362; --plum:#7C6BD6;

  /* ---- dark data surface ---- */
  --d-bg:#0B0C0E; --d-surface:#15171A; --d-surface-2:#1C1F23;
  --d-line:#262A30; --d-text:#EDEEF0; --d-muted:#8A8F98; --d-pos:#34D399;

  --r-sm:6px; --r:9px; --r-lg:12px; --r-xl:14px;
  --sh-1:0 1px 2px rgba(14,15,18,.05);
  --sh-2:0 6px 24px rgba(14,15,18,.06);
  --sh-3:0 18px 50px rgba(14,15,18,.10);

  --sans:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-0.011em;}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.035em;line-height:1.04;}
p{margin:0;} a{color:inherit;text-decoration:none;}
.ds-mono{font-family:var(--mono);}

.ds-wrap{max-width:var(--maxw);margin:0 auto;padding:0 36px;}
section.ds-band{padding:64px 0;border-top:1px solid var(--line);}
section.ds-band.ds-muted{background:var(--surface-2);}

/* eyebrow + section heads */
.ds-eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px;}
.ds-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);}
.ds-pill-label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 13px;box-shadow:var(--sh-1);}
.ds-sec-title{font-size:29px;margin:11px 0 9px;letter-spacing:-0.04em;}
.ds-sec-sub{color:var(--ink-3);font-size:15px;max-width:64ch;line-height:1.5;}
.ds-sec-head{margin-bottom:30px;} .ds-sec-head.ds-center{text-align:center;}
.ds-sec-head.ds-center .ds-sec-sub{margin:12px auto 0;}

/* ============================================================
   DS v2 shared molecules — single source of truth for the
   patterns that recur across pages. Consume via the x-ds.*
   Blade components; raw classes are the fallback. Do NOT
   re-declare these per page (that is what caused the drift).
   ============================================================ */

/* hero / inline domain check form */
.ds-checkform{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:560px;margin:0 auto;}
.ds-checkform .ds-input{flex:1;min-width:260px;box-shadow:var(--sh-2);padding:13px 16px;font-size:15px;display:flex;align-items:center;gap:8px;}
.ds-checkform .ds-input input{border:0;outline:0;background:transparent;font-family:var(--mono);font-size:14px;color:var(--ink);width:100%;letter-spacing:-0.01em;}
.ds-checkform .ds-input input::placeholder{color:var(--ink-3);}

/* stat tile — value + label (+ optional unit, bar, desc) */
.ds-stat .ds-stat-v{font-size:30px;font-weight:700;letter-spacing:-0.035em;color:var(--ink);line-height:1.05;}
.ds-stat .ds-stat-v .ds-stat-u{font-size:16px;color:var(--ink-3);font-weight:600;}
.ds-stat .ds-stat-l{font-size:12.5px;color:var(--ink-3);margin-top:5px;}
.ds-stat .ds-stat-d{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin-top:8px;}

/* progress / fill bar — toned */
.ds-bar{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.ds-bar.ds-bar-lg{height:9px;}
.ds-bar-fill{height:100%;border-radius:99px;background:var(--ink-3);}
.ds-bar-fill.t-ok{background:var(--ok);}
.ds-bar-fill.t-warn{background:var(--warn);}
.ds-bar-fill.t-err{background:var(--err);}
.ds-bar-fill.t-blue{background:var(--blue);}
.ds-bar-fill.t-neutral{background:var(--ink-3);opacity:.5;}

/* distribution row — label · track · count */
.ds-barrow{display:grid;grid-template-columns:minmax(96px,auto) 1fr auto;gap:13px;align-items:center;margin-bottom:11px;}
.ds-barrow:last-child{margin-bottom:0;}
.ds-barrow .ds-barrow-l{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);}
.ds-barrow .ds-barrow-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.ds-barrow .ds-barrow-dot.t-ok{background:var(--ok);}.ds-barrow .ds-barrow-dot.t-warn{background:var(--warn);}.ds-barrow .ds-barrow-dot.t-err{background:var(--err);}.ds-barrow .ds-barrow-dot.t-blue{background:var(--blue);}.ds-barrow .ds-barrow-dot.t-neutral{background:var(--ink-3);}
.ds-barrow .ds-barrow-chip{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none;}
.ds-barrow .ds-barrow-chip.t-ok{background:var(--ok-bg);color:var(--ok);}.ds-barrow .ds-barrow-chip.t-warn{background:var(--warn-bg);color:var(--warn);}.ds-barrow .ds-barrow-chip.t-err{background:var(--err-bg);color:var(--err);}.ds-barrow .ds-barrow-chip.t-blue{background:var(--blue-bg);color:var(--blue);}
.ds-barrow .ds-barrow-c{font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap;}
.ds-barrow .ds-barrow-c .pct{color:var(--ink-3);}

/* FAQ accordion (native details/summary, no JS) */
.ds-faq{border-top:1px solid var(--line);}
.ds-faq-item{border-bottom:1px solid var(--line);}
.ds-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 2px;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink);list-style:none;}
.ds-faq-item summary::-webkit-details-marker{display:none;}
.ds-faq-item .ds-faq-chev{flex:none;transition:transform .2s;color:var(--ink-3);}
.ds-faq-item[open] .ds-faq-chev{transform:rotate(180deg);}
.ds-faq-item .ds-faq-a{padding:0 2px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.6;}
.ds-faq-item .ds-faq-a a{color:var(--blue);}
.ds-faq-item .ds-faq-a code{font-family:var(--mono);font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:5px;}
.ds-faq-item .ds-faq-a strong{color:var(--ink);}

/* hub hero — eyebrow + gradient h1 + sub + check-form + stat row
   (score-hub / status-hub share this verbatim via x-ds.hub-hero) */
.ds-hub-hero{position:relative;overflow:hidden;text-align:center;padding:40px 0 4px;}
.ds-hub-wrap{max-width:920px;}
.ds-hub-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.ds-hub-h1{font-size:clamp(34px,5.2vw,52px);letter-spacing:-0.045em;line-height:1.04;margin:14px 0 18px;}
.ds-hub-grad{background:linear-gradient(90deg,var(--blue),var(--ok));-webkit-background-clip:text;background-clip:text;color:transparent;}
.ds-hub-sub{font-size:17px;color:var(--ink-2);max-width:640px;margin:0 auto 30px;line-height:1.55;}
.ds-hub-sub strong{color:var(--ink);}
.ds-hub-err{color:var(--err);font-size:13px;margin:10px 0 0;}
.ds-hub-stats{display:flex;justify-content:center;gap:46px;flex-wrap:wrap;margin:34px auto 0;}
.ds-hub-stats .ds-stat{text-align:center;}
@media(max-width:860px){.ds-hub-stats{gap:30px;}}

/* blog post card — shared across homepage + /blog grid (x-ds.blog-card) */
.ds-bcard{display:flex;flex-direction:column;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s;}
.ds-bcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue-line);}
.ds-bcard-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-2);}
.ds-bcard-ph{width:100%;aspect-ratio:16/9;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--line-2);}
.ds-bcard-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.ds-bcard-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.ds-bcard-tag{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:5px;padding:3px 8px;}
.ds-bcard-tag.t-blue{background:var(--blue-bg);color:var(--blue);}
.ds-bcard-tag.t-ok{background:var(--ok-bg);color:var(--ok);}
.ds-bcard-tag.t-warn{background:var(--warn-bg);color:var(--warn);}
.ds-bcard-tag.t-neutral{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);}
.ds-bcard-tag.t-series{background:#efeafe;color:#7c6cf0;}
.ds-bcard-title{font-size:16.5px;letter-spacing:-0.02em;line-height:1.3;color:var(--ink);}
.ds-bcard-ex{font-size:13px;color:var(--ink-2);line-height:1.55;margin-top:9px;flex:1;}
.ds-bcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);margin-top:16px;}
.ds-bcard-meta .dot{color:var(--line-2);}

/* group label — mono uppercase eyebrow with a trailing rule line, optional
   tone dot. Shared by homepage section groups + stats dashboard groups. */
.ds-grouplabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px;margin:34px 0 14px;}
.ds-grouplabel:first-of-type{margin-top:0;}
.ds-grouplabel::after{content:"";flex:1;height:1px;background:var(--line);}
.ds-grouplabel-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-3);}
.ds-grouplabel-dot.t-ok{background:var(--ok);}
.ds-grouplabel-dot.t-blue{background:var(--blue);}
.ds-grouplabel-dot.t-warn{background:var(--warn);}
.ds-grouplabel-dot.t-err{background:var(--err);}
.ds-grouplabel-dot.t-purple{background:#7c6cf0;}
.ds-grouplabel-dot.t-neutral{background:var(--ink-3);}

/* ds-prose — long-form article body (rendered markdown). Shared by blog posts,
   author bios, and content pages. Tokenised port of the legacy .prose. */
.ds-prose{font-size:17px;line-height:1.8;color:var(--ink-2);}
.ds-prose > *:first-child{margin-top:0;}
.ds-prose > *:last-child{margin-bottom:0;}
.ds-prose p{margin:1.4em 0;}
.ds-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:text-decoration-color .2s;}
.ds-prose a:hover{text-decoration-color:var(--ink);}
.ds-prose strong{font-weight:600;color:var(--ink);}
.ds-prose h2{font-size:1.75rem;font-weight:700;color:var(--ink);margin:2.4em 0 .7em;letter-spacing:-0.025em;line-height:1.2;position:relative;}
.ds-prose h3{font-size:1.35rem;font-weight:600;color:var(--ink);margin:2em 0 .5em;letter-spacing:-0.02em;position:relative;}
.ds-prose h4{font-size:1.12rem;font-weight:600;color:var(--ink);margin:1.5em 0 .5em;position:relative;}
.ds-prose h2 .heading-permalink,.ds-prose h3 .heading-permalink,.ds-prose h4 .heading-permalink{position:absolute;left:-1.5em;color:var(--line-2);text-decoration:none;font-weight:400;opacity:0;transition:opacity .2s;}
.ds-prose h2:hover .heading-permalink,.ds-prose h3:hover .heading-permalink,.ds-prose h4:hover .heading-permalink{opacity:1;}
.ds-prose h2 .heading-permalink:hover,.ds-prose h3 .heading-permalink:hover,.ds-prose h4 .heading-permalink:hover{color:var(--ink-3);}
/* code */
.ds-prose code{background:var(--surface-2);color:var(--blue);font-family:var(--mono);font-size:0.85em;padding:2px 6px;border-radius:5px;}
.ds-prose pre{background:var(--d-bg);color:#e2e8f0;border-radius:12px;padding:0;overflow:hidden;margin:2em 0;font-size:0.9rem;line-height:1.7;position:relative;}
.ds-prose pre code{display:block;padding:20px 24px;overflow-x:auto;font-family:var(--mono);background:none;color:inherit;font-size:0.9rem;}
.ds-prose .code-header{display:flex;justify-content:space-between;align-items:center;padding:10px 24px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);}
.ds-prose .code-language{font-family:var(--mono);font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;}
.ds-prose .code-copy-btn{background:none;border:1px solid rgba(255,255,255,.15);color:#9ca3af;font-family:var(--mono);font-size:0.72rem;padding:4px 12px;border-radius:6px;cursor:pointer;transition:all .2s;}
.ds-prose .code-copy-btn:hover{border-color:rgba(255,255,255,.3);color:#e2e8f0;}
/* tables */
.ds-prose table{width:100%;border-collapse:collapse;margin:2em 0;font-size:0.9rem;}
.ds-prose table th{background:var(--surface-2);font-family:var(--mono);font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);}
.ds-prose table td{padding:12px 16px;border-bottom:1px solid var(--line-2);color:var(--ink-2);}
.ds-prose table tbody tr:hover{background:var(--surface-2);}
/* blockquote / images / lists / hr */
.ds-prose blockquote{border-left:3px solid var(--ink);background:var(--surface-2);margin:2em 0;padding:18px 22px;border-radius:0 10px 10px 0;}
.ds-prose blockquote p{margin:0;color:var(--ink-2);}
.ds-prose blockquote p + p{margin-top:.75em;}
.ds-prose img{width:100%;border-radius:10px;margin:2em 0;}
.ds-prose figure{margin:2em 0;text-align:center;}
.ds-prose figure img{width:100%;max-width:100%;border-radius:10px;}
.ds-prose ul,.ds-prose ol{padding-left:1.5em;margin:1.4em 0;}
.ds-prose li{margin-bottom:.5em;}
.ds-prose li::marker{color:var(--ink-3);}
.ds-prose hr{border:none;border-top:1px solid var(--line);margin:2.5em 0;}

/* newsletter CTA (x-ds.newsletter-cta) + the small check-row used in mockups */
.ds-news{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:34px 36px;}
.ds-news-preview{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;}
@media(max-width:900px){.ds-news{grid-template-columns:1fr;}}
.ck{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);}
.ck .b{width:16px;height:16px;border-radius:5px;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex:none;}

/* top nav */
header.ds-top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line);}
header.ds-top .ds-wrap{display:flex;align-items:center;gap:16px;height:58px;}
.ds-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-0.03em;white-space:nowrap;flex:none;}
.ds-brand img{width:23px;height:23px;object-fit:contain;display:block;}
nav.ds-anchors{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;}
nav.ds-anchors a{font-size:12.5px;color:var(--ink-3);padding:6px 9px;border-radius:7px;transition:.15s;white-space:nowrap;}
nav.ds-anchors a:hover{color:var(--ink);background:var(--surface-2);}
.ds-tagchip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-bg);border:1px solid var(--blue-line);padding:3px 8px;border-radius:6px;}

/* hero */
.ds-hero{padding:66px 0 52px;text-align:center;}
.ds-hero h1{font-size:clamp(38px,5.4vw,62px);letter-spacing:-0.05em;font-weight:800;max-width:18ch;margin:18px auto 0;}
.ds-hero h1 .ds-alt{color:var(--ink-3);}
.ds-hero .ds-lead{margin:18px auto 0;font-size:17px;color:var(--ink-3);max-width:58ch;line-height:1.5;}
.ds-hero .ds-surfaces{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap;}
.ds-surface-tag{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-1);}
.ds-surface-tag .ds-d{width:8px;height:8px;border-radius:50%;}

/* cards + grid */
.ds-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-1);}
.ds-grid{display:grid;gap:14px;}
.ds-g2{grid-template-columns:repeat(2,1fr);} .ds-g3{grid-template-columns:repeat(3,1fr);} .ds-g4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.ds-g2,.ds-g3,.ds-g4{grid-template-columns:1fr;}}
.ds-kv{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.02em;}

/* swatches */
.ds-sw-grid{display:grid;gap:14px;}
.ds-sw{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);}
.ds-sw .ds-chip{height:78px;}
.ds-sw .ds-m{padding:12px 14px;border-top:1px solid var(--line);}
.ds-sw .ds-n{font-size:13px;font-weight:600;} .ds-sw .ds-v{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:2px;}
.ds-sw .ds-role{font-size:11px;color:var(--ink-3);margin-top:6px;line-height:1.4;}

/* buttons */
.ds-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;font-weight:600;
  border-radius:var(--r);padding:11px 18px;border:1px solid transparent;cursor:pointer;transition:.15s;letter-spacing:-0.01em;white-space:nowrap;}
.ds-btn-primary{background:var(--ink);color:#fff;} .ds-btn-primary:hover{background:#000;}
.ds-btn-blue{background:var(--blue);color:#fff;} .ds-btn-blue:hover{background:var(--blue-press);}
.ds-btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1);} .ds-btn-secondary:hover{background:var(--surface-2);}
.ds-btn-ghost{background:transparent;color:var(--ink-2);} .ds-btn-ghost:hover{background:var(--surface-2);}
.ds-btn-sm{padding:8px 13px;font-size:13px;}

/* inputs + segmented */
.ds-input{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r);
  padding:10px 13px;background:var(--surface);font-size:14px;color:var(--ink-3);box-shadow:var(--sh-1);}
.ds-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg);}
.ds-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:3px;gap:2px;}
.ds-seg button{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-3);background:transparent;border:0;
  padding:6px 11px;border-radius:7px;cursor:pointer;letter-spacing:.04em;}
.ds-seg button.ds-on{background:var(--blue);color:#fff;box-shadow:var(--sh-1);}
.ds-seg.ds-ink button.ds-on{background:var(--ink);color:#fff;}

/* pills */
.ds-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 11px 3px 9px;border-radius:999px;line-height:1.5;border:1px solid transparent;}
.ds-pill .ds-dot{width:7px;height:7px;border-radius:50%;}
.ds-pill.ds-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line);} .ds-pill.ds-ok .ds-dot{background:var(--ok-dot);}
.ds-pill.ds-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line);} .ds-pill.ds-warn .ds-dot{background:var(--warn-dot);}
.ds-pill.ds-err{background:var(--err-bg);color:var(--err);border-color:var(--err-line);} .ds-pill.ds-err .ds-dot{background:var(--err-dot);}
.ds-pill.ds-info{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-line);} .ds-pill.ds-info .ds-dot{background:var(--blue);}
.ds-pill.ds-neutral{background:var(--neutral-bg);color:var(--neutral);} .ds-pill.ds-neutral .ds-dot{background:var(--neutral-dot);}

/* grade chip */
.ds-grade{font-family:var(--mono);font-weight:700;font-size:13px;width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;}
.ds-gA{background:var(--ok-bg);color:var(--ok);} .ds-gB{background:#EAF4E0;color:#4D7C0F;}
.ds-gC{background:var(--warn-bg);color:var(--warn);} .ds-gD{background:#FCEBDD;color:#C2410C;} .ds-gF{background:var(--err-bg);color:var(--err);}

/* mono table */
table.ds-data{width:100%;border-collapse:collapse;font-size:13.5px;}
table.ds-data th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding:11px 16px;border-bottom:1px solid var(--line);}
table.ds-data td{padding:13px 16px;border-bottom:1px solid var(--line-2);}
table.ds-data tr:last-child td{border-bottom:0;}
table.ds-data tbody tr:hover{background:var(--surface-2);}
.ds-dom{display:flex;align-items:center;gap:11px;font-weight:600;}
.ds-fav{width:20px;height:20px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;}
.ds-fav .ds-gl{width:9px;height:9px;border-radius:50%;}

/* bars + sparkline */
.ds-bar{height:7px;border-radius:999px;background:var(--line-2);overflow:hidden;}
.ds-bar>span{display:block;height:100%;border-radius:999px;}
.ds-barcol{display:flex;align-items:flex-end;gap:3px;height:64px;}
.ds-barcol i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#BCD2F9,#9EBDF6);display:block;min-height:3px;}
.ds-barcol i.ds-hot{background:var(--blue);}

/* pill icon badge (status verdict) */
.ds-pill .ds-ic{width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;line-height:1;flex:none;}
.ds-pill.ds-ok .ds-ic{background:var(--ok-dot);} .ds-pill.ds-warn .ds-ic{background:var(--warn-dot);}
.ds-pill.ds-err .ds-ic{background:var(--err-dot);} .ds-pill.ds-info .ds-ic{background:var(--blue);} .ds-pill.ds-neutral .ds-ic{background:var(--neutral-dot);}
.ds-pill:has(.ds-ic){padding:3px 13px 3px 4px;font-size:13px;}

/* category cell pill (dot + bold) */
.ds-cellpill{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 13px;box-shadow:var(--sh-1);}
.ds-cellpill .ds-d{width:8px;height:8px;border-radius:50%;flex:none;}

/* meta chips */
.ds-metachips{display:flex;gap:10px;flex-wrap:wrap;}
.ds-metachip{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;box-shadow:var(--sh-1);}
.ds-metachip b{color:var(--ink);font-weight:600;}
.ds-metachip .ds-av{display:inline-flex;}
.ds-metachip .ds-av span{width:18px;height:18px;border-radius:50%;border:2px solid var(--surface);margin-left:-7px;background:linear-gradient(135deg,#C7CCD4,#9AA0A8);}
.ds-metachip .ds-av span:first-child{margin-left:0;}

/* tabs */
.ds-tabs{display:inline-flex;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:4px;}
.ds-tabs button{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-3);background:transparent;border:0;padding:7px 14px;border-radius:8px;cursor:pointer;letter-spacing:-0.01em;}
.ds-tabs button.ds-on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--sh-1);}

/* spreadsheet table */
.ds-sheet{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--sh-1);}
.ds-sheet table{width:100%;border-collapse:collapse;font-size:14px;}
.ds-sheet th{font-weight:600;color:var(--ink-2);text-align:left;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;}
.ds-sheet th:last-child,.ds-sheet td:last-child{border-right:0;}
.ds-sheet td{padding:11px 16px;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);vertical-align:middle;}
.ds-sheet tbody tr:last-child td{border-bottom:0;}
.ds-sheet tbody tr:hover td{background:var(--surface-3);}
.ds-sheet .ds-hi{display:inline-flex;align-items:center;gap:8px;}
.ds-sheet .ds-hi .ds-gi{opacity:.4;font-size:13px;}
.ds-cb{width:16px;height:16px;border:1.5px solid var(--line);border-radius:5px;display:inline-block;vertical-align:middle;background:var(--surface);}
.ds-caret{display:inline-block;width:0;height:0;border-left:5px solid var(--ink-3);border-top:4px solid transparent;border-bottom:4px solid transparent;margin-right:9px;vertical-align:middle;}
.ds-caret.ds-open{border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--ink-3);border-bottom:0;margin-right:8px;}
.ds-sheet tr.ds-diff td{background:repeating-linear-gradient(135deg,rgba(15,20,30,.022) 0 6px,transparent 6px 12px);color:var(--ink-3);}
.ds-sheet tr.ds-diff:hover td{background:repeating-linear-gradient(135deg,rgba(15,20,30,.022) 0 6px,transparent 6px 12px);}
.ds-sheet .ds-strike{text-decoration:line-through;opacity:.65;}
.ds-sheet tr.ds-addrow td{color:var(--ink-3);font-weight:500;cursor:pointer;}
.ds-sheet tr.ds-addrow:hover td{background:var(--surface-2);}

/* bar chart with axes */
.ds-barchart{display:grid;grid-template-columns:26px 1fr;gap:12px;height:180px;}
.ds-barchart.ds-bare{grid-template-columns:1fr;height:90px;}
.ds-bc-y{display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink-3);text-align:right;padding-bottom:20px;}
.ds-bc-plot{position:relative;}
.ds-barchart.ds-bare .ds-bc-plot,.ds-barchart.ds-bare .ds-bc-lines,.ds-barchart.ds-bare .ds-bc-bars{bottom:0;}
.ds-bc-lines{position:absolute;left:0;right:0;top:0;bottom:20px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;}
.ds-bc-lines i{border-top:1px dashed var(--line);}
.ds-bc-bars{position:absolute;left:0;right:0;top:0;bottom:20px;display:flex;align-items:flex-end;gap:5px;}
.ds-bc-bars b{flex:1;background:linear-gradient(180deg,#BCD2F9,#9EBDF6);border-radius:4px 4px 0 0;min-height:3px;}
.ds-bc-bars b.ds-hot{background:var(--blue);}
.ds-bc-bars b.ds-ghost{background:repeating-linear-gradient(135deg,#EDEFF2 0 5px,#F6F7F9 5px 10px);}
.ds-bc-x{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink-3);}
.ds-tip{position:relative;display:inline-block;background:#26282D;color:#fff;border-radius:9px;padding:8px 12px;font-size:12.5px;box-shadow:var(--sh-3);white-space:nowrap;}
.ds-tip .ds-tl{color:#9AA0A8;}
.ds-tip::after{content:"";position:absolute;left:22px;bottom:-4px;width:9px;height:9px;background:#26282D;transform:rotate(45deg);}

/* area card */
.ds-areacard{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;}
.ds-areacard .ds-lab{font-size:13.5px;font-weight:600;}
.ds-areacard .ds-big{font-size:30px;font-weight:700;letter-spacing:-0.04em;display:flex;align-items:center;gap:9px;margin-top:5px;}
.ds-areacard .ds-cap{font-size:12.5px;color:var(--ink-3);margin-top:4px;}
.ds-badge-up{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:999px;padding:2px 8px;}
.ds-areachart{width:140px;height:60px;flex:none;}

/* dark chart variants */
.ds-dark .ds-bc-y,.ds-dark .ds-bc-x{color:var(--d-muted);}
.ds-dark .ds-bc-lines i{border-color:var(--d-line);}
.ds-dark .ds-bc-bars b{background:linear-gradient(180deg,#5E81D8,#4D6BBE);}
.ds-dark .ds-bc-bars b.ds-hot{background:#6F9BFF;}
.ds-dark .ds-areacard .ds-cap{color:var(--d-muted);}

/* stat tile */
.ds-tile{padding:16px 18px;}
.ds-tile .ds-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between;align-items:center;}
.ds-tile .ds-big{font-size:34px;font-weight:700;letter-spacing:-0.04em;margin-top:12px;line-height:1;}
.ds-tile .ds-big small{font-size:16px;color:var(--ink-3);font-weight:600;}
.ds-tile .ds-sub{font-size:13px;color:var(--ink-3);margin-top:7px;}

/* code */
.ds-code{background:var(--d-bg);border-radius:var(--r-lg);padding:18px 20px;overflow:auto;}
.ds-code pre{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:#E5E7EB;}
.ds-c-com{color:#6B7079;} .ds-c-str{color:#86EFAC;} .ds-c-key{color:#93C5FD;} .ds-c-fn{color:#FCD34D;}

/* dark data surface */
.ds-dark{background:var(--d-bg);color:var(--d-text);border:1px solid var(--d-line);border-radius:var(--r-xl);}
.ds-dark .ds-kv,.ds-dark .ds-tile .ds-lab{color:var(--d-muted);}
.ds-dark .ds-tile .ds-big small{color:var(--d-muted);}

/* dotted ecosystem canvas */
.ds-dots{background:
  radial-gradient(circle, #D6D9DF 1px, transparent 1.4px) 0 0/22px 22px;
  border:1px solid var(--line);border-radius:var(--r-xl);position:relative;overflow:hidden;background-color:var(--surface-3);}
.ds-node{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-2);padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;}
.ds-node .ds-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;}
.ds-node small{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-3);font-weight:500;}

/* sidebar (product) */
.ds-app{display:grid;grid-template-columns:208px 1fr;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--sh-2);}
.ds-side{background:var(--surface-3);border-right:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:3px;}
.ds-side .ds-org{display:flex;align-items:center;gap:9px;padding:6px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:8px;}
.ds-side .ds-org .ds-sq{width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none;}
.ds-side .ds-grp{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:12px 8px 5px;}
.ds-side a{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2);padding:7px 9px;border-radius:8px;font-weight:500;}
.ds-side a:hover{background:var(--surface-2);}
.ds-side a.ds-on{background:var(--blue-bg);color:var(--blue);font-weight:600;}
.ds-side a .ds-i{width:15px;height:15px;border:1.6px solid currentColor;border-radius:4px;opacity:.55;flex:none;}
.ds-side a.ds-on .ds-i{opacity:1;}
.ds-limit{margin-top:auto;background:linear-gradient(160deg,#FB923C,#F97316);color:#fff;border-radius:14px;padding:14px;}
.ds-limit b{font-size:13px;display:flex;align-items:center;gap:6px;} .ds-limit p{font-size:12px;opacity:.92;margin-top:6px;line-height:1.45;}
.ds-appmain{padding:22px 24px;background:var(--surface);}

/* feature card (marketing) */
.ds-feat{padding:20px;}
.ds-feat .ds-fi{width:38px;height:38px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.ds-feat h4{font-size:16px;letter-spacing:-0.02em;} .ds-feat p{font-size:13.5px;color:var(--ink-3);margin-top:6px;line-height:1.5;}

/* chips */
.ds-chips{display:flex;gap:8px;flex-wrap:wrap;}
.ds-chip-cat{font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;box-shadow:var(--sh-1);display:inline-flex;gap:8px;align-items:center;}
.ds-chip-cat .ds-ct{font-family:var(--mono);font-size:11px;color:var(--ink-3);}

/* footer */
footer.ds-footer{background:var(--ink);color:#fff;padding:64px 0 40px;}
footer.ds-footer .ds-brand{color:#fff;}
.ds-prod{display:flex;align-items:center;gap:12px;padding:15px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;}
.ds-prod .ds-pi{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;flex:none;}
.ds-prod .ds-pt{font-weight:600;font-size:14px;} .ds-prod .ds-ps{font-size:11.5px;color:#9AA0A8;}

/* spec rows */
.ds-spec{display:grid;grid-template-columns:130px 1fr;gap:22px;padding:22px 0;border-top:1px solid var(--line);align-items:baseline;}
.ds-spec .ds-l{font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.5;}
.ds-spec .ds-l b{display:block;color:var(--ink);font-weight:600;}

.ds-watermark{font-weight:800;font-size:clamp(64px,18vw,240px);letter-spacing:-0.05em;color:var(--surface-2);text-align:center;line-height:1;user-select:none;padding:8px 0 0;}

.ds-note{font-family:var(--mono);font-size:11px;border-radius:8px;padding:7px 11px;display:inline-flex;gap:7px;align-items:center;}
.ds-note.ds-blue{color:var(--blue);background:var(--blue-bg);border:1px solid var(--blue-line);}
.ds-note.ds-ok{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line);}


/* ===================================================================
   DS v2 — named scales (added for implementation handoff)
   Delivery: this file is the single source of truth.
   Consumers: x-ui.* Blade components and Tailwind @theme both read these.
   Namespacing: every component class is prefixed .ds-* so the global
   sheet can load site-wide without fighting the 82 existing <style> blocks.
   =================================================================== */
:root{
  /* type scale */
  --text-display:clamp(38px,5.4vw,62px);
  --text-h1:clamp(30px,4vw,40px);
  --text-h2:29px;
  --text-h3:19px;
  --text-title:16px;
  --text-body:15px;
  --text-sm:13.5px;
  --text-xs:12.5px;
  --text-mono:11px;
  --leading-tight:1.04;
  --leading-body:1.55;
  --tracking-tight:-0.04em;

  /* spacing scale (4px base) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;

  /* density dial — the two band paddings the DS copy names */
  --band-pad-marketing:88px;
  --band-pad-product:60px;
  --band-pad:var(--band-pad-marketing);

  /* breakpoints (reference) */
  --bp-sm:620px; --bp-md:760px; --bp-lg:980px;
}

/* product surfaces tighten the density dial via a context class */
.ds-surface-product{ --band-pad:var(--band-pad-product); }

/* wire the scales into the existing rules (values unchanged -> no visual diff) */
.ds-band{ padding:var(--band-pad) 0; }
.ds-hero h1{ font-size:var(--text-display); }
.ds-sec-title{ font-size:var(--text-h2); }
.ds-sec-sub{ font-size:var(--text-body); }
.ds-eyebrow{ font-size:var(--text-mono); }

/* ============================================================
   MOTION & ASYNC — async/loading vocabulary (claude.ai/design handoff
   "UCP Motion & Async"). Tokens + primitives + reduced-motion fallbacks.
   "The work is real": indeterminate (never fake %), always alive, pay off the wait.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:140ms; --dur:240ms; --dur-slow:440ms;
  --spin-dur:.78s; --loop-dur:1.4s; --pulse-dur:2s;
}

/* ring spinner */
.ds-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;
  border-top-color:transparent;border-right-color:transparent;display:inline-block;
  animation:ds-spin var(--spin-dur) linear infinite;vertical-align:middle;opacity:.9;}
.ds-spinner.lg{width:26px;height:26px;border-width:2.5px;}
.ds-spinner.sm{width:13px;height:13px;border-width:1.8px;}
@keyframes ds-spin{to{transform:rotate(360deg);}}

/* indeterminate track (looping segment, no fake %) */
.ds-track{position:relative;width:200px;height:6px;border-radius:999px;background:var(--line-2);overflow:hidden;}
.ds-track::before{content:"";position:absolute;inset:0;width:40%;border-radius:999px;background:var(--blue);
  animation:ds-trackslide var(--loop-dur) var(--ease-in-out) infinite;}
@keyframes ds-trackslide{0%{transform:translateX(-100%);}60%{transform:translateX(260%);}100%{transform:translateX(260%);}}

/* ping dot (live status) */
.ds-ping{position:relative;width:9px;height:9px;border-radius:50%;background:var(--ok-dot);display:inline-block;vertical-align:middle;}
.ds-ping::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--ok-dot);
  opacity:.7;animation:ds-pingring var(--pulse-dur) var(--ease-out) infinite;}
.ds-ping.blue{background:var(--blue);} .ds-ping.blue::after{border-color:var(--blue);}
@keyframes ds-pingring{0%{transform:scale(.55);opacity:.8;}100%{transform:scale(2.1);opacity:0;}}

/* telemetry bars (equalizer / throughput) */
.ds-tbars{display:inline-flex;align-items:flex-end;gap:3px;height:22px;}
.ds-tbars i{width:3px;border-radius:2px;background:var(--blue);animation:ds-tbar 1.05s var(--ease-in-out) infinite;}
.ds-tbars i:nth-child(2){animation-delay:.13s;} .ds-tbars i:nth-child(3){animation-delay:.26s;}
.ds-tbars i:nth-child(4){animation-delay:.39s;} .ds-tbars i:nth-child(5){animation-delay:.52s;}
@keyframes ds-tbar{0%,100%{height:5px;opacity:.55;}50%{height:22px;opacity:1;}}

/* radar / discovery scan */
.ds-scan{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--blue-line);
  background:radial-gradient(circle at center,var(--blue-bg),transparent 70%);overflow:hidden;}
.ds-scan::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(37,99,235,.32) 50deg,transparent 70deg);
  animation:ds-spin 1.5s linear infinite;}
.ds-scan::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--blue);transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--blue-bg);}

/* button in-progress + done states (wired on real check/score forms) */
.ds-btn.is-loading{position:relative;overflow:hidden;pointer-events:none;}
.ds-btn.is-loading::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-100%);animation:ds-sweep 1.25s var(--ease-in-out) infinite;}
.ds-btn-secondary.is-loading::after{background:linear-gradient(105deg,transparent 30%,rgba(37,99,235,.10) 50%,transparent 70%);}
@keyframes ds-sweep{to{transform:translateX(100%);}}
.ds-btn.is-done{background:var(--ok)!important;color:#fff!important;pointer-events:none;}
.ds-btn .ds-spinner{margin-right:2px;}
/* check icon draw-in for the done state */
.ds-tick{width:15px;height:15px;display:inline-block;}
.ds-tick path{stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:20;stroke-dashoffset:20;}
.ds-btn.is-done .ds-tick path,.ds-tick.run path{animation:ds-draw .42s var(--ease-out) .05s forwards;}
@keyframes ds-draw{to{stroke-dashoffset:0;}}

/* centered loading region (hold space with one calm indicator) */
.ds-loadregion{width:100%;max-width:440px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--sh-1);min-height:168px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:30px;}
.ds-loadregion .cap{font-family:var(--mono);font-size:12px;color:var(--ink-3);}
.ds-loadregion .cap b{color:var(--ink-2);font-weight:600;}

/* score reveal — count-up + grade pop + cascading rows ("pay off the wait") */
.ds-countup{font-variant-numeric:tabular-nums;}
.ds-pop{animation:ds-gradepop .5s var(--ease-spring) both;}
@keyframes ds-gradepop{0%{opacity:0;transform:scale(.4) rotate(-8deg);}100%{opacity:1;transform:scale(1) rotate(0);}}
.ds-reveal .ds-rr{opacity:0;transform:translateY(6px);}
.ds-reveal.go .ds-rr{animation:ds-rowin .4s var(--ease-out) both;}
.ds-reveal.go .ds-rr:nth-child(1){animation-delay:.05s;} .ds-reveal.go .ds-rr:nth-child(2){animation-delay:.13s;}
.ds-reveal.go .ds-rr:nth-child(3){animation-delay:.21s;} .ds-reveal.go .ds-rr:nth-child(4){animation-delay:.29s;}
.ds-reveal.go .ds-rr:nth-child(5){animation-delay:.37s;}
@keyframes ds-rowin{to{opacity:1;transform:translateY(0);}}

/* reduced motion — calm fallbacks everywhere (info identical, movement withdrawn) */
@media(prefers-reduced-motion:reduce){
  .ds-spinner{animation:none;border-top-color:currentColor;border-right-color:currentColor;opacity:.5;}
  .ds-track::before{animation:none;width:100%;opacity:.4;}
  .ds-ping::after{animation:none;opacity:0;}
  .ds-tbars i{animation:none;height:14px;opacity:.7;}
  .ds-scan::before{animation:none;}
  .ds-btn.is-loading::after{animation:none;display:none;}
  .ds-tick path{animation:none;stroke-dashoffset:0;}
  .ds-pop{animation:none;}
  .ds-reveal.go .ds-rr{animation:none;opacity:1;transform:none;}
}

/* ============================================================
   LEGAL / POLICY PAGES — read-progress bar + sticky numbered TOC + card
   (claude.ai/design "UCP Privacy Policy" → legal.css). Shared by privacy + terms.
   Markup: <div class="ds-readbar" id="readbar"></div>
           <main class="ds-wrap ds-legal"> <div class="ds-legal-head">… <div class="ds-legal-shell">
             <nav class="ds-toc">…  <article class="ds-legal-card"><section id="…"><h2><span class="num">01</span>…
   ============================================================ */
.ds-readbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--blue);z-index:1200;transition:width .08s linear;}
.ds-legal{padding:46px 0 76px;}
.ds-legal-head{text-align:center;max-width:62ch;margin:0 auto 34px;}
.ds-legal-head .ds-eyebrow{display:inline-block;}
.ds-legal-head h1{font-size:clamp(30px,4vw,38px);letter-spacing:-0.045em;margin:14px 0 0;color:var(--ink);font-weight:800;}
.ds-legal-summary{font-size:15.5px;color:var(--ink-3);line-height:1.6;margin:16px auto 0;max-width:56ch;}
.ds-legal-updated{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:14px;display:inline-flex;align-items:center;gap:8px;}
.ds-legal-updated::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok-dot);}
.ds-legal-shell{display:grid;grid-template-columns:212px minmax(0,720px);gap:48px;justify-content:center;align-items:start;}
.ds-toc{position:sticky;top:84px;}
.ds-toc .ds-toc-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:0 12px 4px;}
.ds-toc a{display:block;font-size:13px;color:var(--ink-3);padding:6px 12px;border-radius:8px;line-height:1.35;border-left:2px solid transparent;transition:.14s;}
.ds-toc a:hover{color:var(--ink);background:var(--surface-2);}
.ds-toc a.on{color:var(--blue);border-left-color:var(--blue);font-weight:600;}
.ds-toc a .n{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-right:8px;}
.ds-toc a.on .n{color:var(--blue);}
.ds-legal-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:44px 52px;}
.ds-legal-card section{padding:30px 0;border-top:1px solid var(--line-2);scroll-margin-top:84px;}
.ds-legal-card section:first-child{padding-top:0;border-top:0;}
.ds-legal-card section:last-child{padding-bottom:6px;}
.ds-legal-card h2{font-size:19px;letter-spacing:-0.03em;display:flex;align-items:baseline;gap:11px;color:var(--ink);font-weight:700;}
.ds-legal-card h2 .num{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--blue);flex:none;width:1.6em;}
.ds-legal-card h3{font-size:14px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);margin:22px 0 0;}
.ds-legal-card h2 + p,.ds-legal-card h2 + ul{margin-top:13px;}
.ds-legal-card p{font-size:14.5px;color:var(--ink-2);line-height:1.62;margin-top:12px;}
.ds-legal-card p.muted{color:var(--ink-3);}
.ds-legal-card ul{margin:11px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.ds-legal-card li{position:relative;padding-left:20px;font-size:14.5px;color:var(--ink-2);line-height:1.55;}
.ds-legal-card li::before{content:"";position:absolute;left:3px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--ink-3);opacity:.55;}
.ds-legal-card li b,.ds-legal-card p b{color:var(--ink);font-weight:600;}
.ds-legal-card a.inl{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue-line);transition:.14s;}
.ds-legal-card a.inl:hover{border-bottom-color:var(--blue);}
.ds-legal-card code{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;}
.ds-legal-note{display:flex;gap:13px;align-items:flex-start;background:var(--blue-bg);border:1px solid var(--blue-line);border-radius:var(--r-lg);padding:15px 17px;margin-top:18px;}
.ds-legal-note .ti{width:20px;height:20px;border-radius:6px;background:var(--blue);color:#fff;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.ds-legal-note p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55;}
.ds-legal-note p b{color:var(--ink);}
@media(max-width:900px){
  .ds-legal-shell{grid-template-columns:1fr;gap:0;}
  .ds-toc{display:none;}
  .ds-legal-card{padding:30px 22px;}
}