/* SNITCH
   Palette: the 16-color VGA set the first graphical Windows shipped with,
   used semantically. Magenta is never decoration; it means "this one gets you
   sued." Everything sits on near-black because pure VGA hues only clear
   contrast on a dark ground.
   Type: SOMA Slice 2.0 (variable width axis) for display, IBM Plex Mono for
   every piece of measured data, which is most of this page. */

/* Every face is served from this origin. A product that reports third parties
   cannot itself hand a visitor's IP to a font CDN: the Munich Regional Court
   ruled in 2022 that exactly that transfer breached the GDPR, and it is the
   reason self-hosting is the fix rather than a consent prompt. */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plexmono-9994c10a.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plexmono-d7731959.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plexmono-60d1ee22.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plexmono-8d0aead6.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: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-001175b1.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: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-98bbbccb.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-001175b1.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-98bbbccb.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geist-001175b1.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geist-98bbbccb.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geistmono-44745446.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geistmono-013b2f2f.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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geistmono-44745446.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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geistmono-013b2f2f.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: 'Soma Slice';
  src: url('/fonts/SOMA_Slice_2.0VF.woff2') format('woff2-variations');
  font-weight: 400;
  font-stretch: 0% 150%;
  font-display: swap;
}

:root,
:root[data-theme='dark'] {
  --ground: #08080c;
  --surface: #101018;
  --raised: #16161f;
  --line: #5c5c7d;
  --ink: #f2f2f7;
  --muted: #adadc6;

  --critical: #ff00ff;
  --high: #ffe800;
  --medium: #00e5ff;
  --clean: #00ff66;

  /* text that sits ON an accent fill, and the scanline tint */
  --on-accent: #04140a;
  --scan: rgba(255, 255, 255, 0.018);
  color-scheme: dark;
}

/* Light mode keeps the hue identity but not the values: pure VGA green on
   white is 1.4:1 and unreadable, so each accent is the same hue taken down to
   a value that clears 4.5:1 on the light ground. */
:root[data-theme='light'] {
  --ground: #f4f4ee;
  --surface: #ffffff;
  --raised: #e9e9e0;
  --line: #8e8e80;
  --ink: #14141b;
  --muted: #3f3f4d;

  --critical: #9c0074;
  --high: #7a4a00;
  --medium: #005263;
  --clean: #00682a;

  --on-accent: #ffffff;
  --scan: rgba(0, 0, 0, 0.022);
  color-scheme: light;
}


/* Theme-independent layout tokens. */
:root {
  --measure: 100%;
  /* Corners are cut at 45 degrees rather than rounded, and only on the
     top-left and bottom-right, so every box leans the same way instead of
     reading as an octagon. Bordered boxes are two stacked clips, because
     clip-path cuts the border off along with the corner. */
  --cham: 13px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

.cham {
  --c: var(--cham);
  clip-path: polygon(
    var(--c) 0, 100% 0,
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    0 100%, 0 var(--c));
}

/* A bordered chamfer: the outer element is the border color and the inner
   surface sits 1px inside it, clipped a hair tighter. */
.chamline {
  --c: var(--cham);
  background: var(--line);
  padding: 1px;
  clip-path: polygon(
    var(--c) 0, 100% 0,
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    0 100%, 0 var(--c));
}
.chamline > * {
  --c: calc(var(--cham) - 1px);
  background: var(--surface);
  clip-path: polygon(
    var(--c) 0, 100% 0,
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    0 100%, 0 var(--c));
}

html {
  -webkit-text-size-adjust: 100%;
  /* Clear the sticky masthead when an in-page anchor is followed. */
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 15.5px;
  line-height: 1.62;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

/* A faint scanline wash. It is the one texture in the world and it never
   moves, so it reads as a surface rather than an effect. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(180deg, var(--scan) 0 1px, transparent 1px 3px);
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
/* Keeps a single word from being left alone on the last line. */
p, li, dd { text-wrap: pretty; }

a { color: var(--clean); text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--clean); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--medium);
  outline-offset: 3px;
}

.wrap { width: 100%; max-width: 1020px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid transparent;
}
/* The hairline appears only once the page has scrolled, so the hero keeps its
   clean edge and scrolled content does not run into the bar. Scroll-driven
   animation rather than a scroll listener; browsers without it simply keep the
   transparent edge, which is the state before this rule existed. */
@supports (animation-timeline: scroll()) {
  .masthead {
    animation: masthead-edge linear both;
    animation-timeline: scroll();
    animation-range: 0 56px;
  }
  @keyframes masthead-edge {
    to { border-bottom-color: var(--line); }
  }
}
/* The bar spans the viewport; the column inside it keeps the page measure.
   Doing this with a 100vw pseudo-element instead overflows by the width of
   the scrollbar. */
.masthead-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-block: 0.85rem calc(0.85rem - 2px);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mark {
  justify-self: start;
  text-decoration: none;
  /* Trim the font's built-in leading so the box is the letters, not the
     letters plus whatever space the face reserves above and below them.
     Ignored by browsers that do not support it, which changes nothing. */
  text-box: trim-both cap alphabetic;
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 118;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clean);
}
/* Sits above the H1 at Guido's explicit instruction (2026-09-07), overriding
   the standing no-eyebrow rule. */
.hero .tag {
  margin: 0 0 0.9rem;
  padding-top: 15px;
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 104;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.35rem;
}
/* Nav links sit below the logo in the hierarchy, so their cap height has to
   stay under it: Soma Slice caps are 0.75em, giving the logo 16.5px at 22px and
   the links 14.4px at 19.2px. Matching the links to the 21px icon made them
   taller than the wordmark, which read as an error. */
.nav a {
  color: var(--muted);
  text-decoration: none;
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 96;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.nav a:hover { color: var(--ink); }

/* Lucide sun and moon, one visible at a time: sun in dark, moon in light.
   They are stroke icons, so they take stroke rather than fill and inherit the
   link colour. Drawn at 18px, because Lucide's 24 unit grid plus a 2 unit
   round-capped stroke puts 22 units of ink in the box, and matching the nav
   link's 16.5px cap height needs 16.5 * 24 / 22 = 18px. */
#theme {
  border: 0;
  background: none;
  color: var(--muted);
  padding: 4px 4px 3px 0;
  display: inline-flex;
  cursor: pointer;
  transition: color 120ms var(--ease);
}
#theme:hover { color: var(--ink); }
#theme svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root[data-theme='dark'] #theme .i-moon { display: none; }
:root[data-theme='light'] #theme .i-sun { display: none; }

/* -------------------------------------------------------------------- hero */

.hero { padding-block: clamp(1.6rem, 6vw, 3.875rem) clamp(2.5rem, 6vw, 5rem); }

.hero h1 {
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 102;
  font-size: clamp(1.85rem, 4.5vw, 3.65rem);
  line-height: 1.06;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lede {
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: clamp(0.9375rem, 1.35vw, 1.0313rem);
  line-height: 1.6;
}
.lede li {
  position: relative;
  padding-left: 1.5rem;
}
.lede li + li { margin-top: 0.85rem; }
/* A drawn square, not a glyph, so it keeps its edge at every size. */
.lede li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  background: var(--clean);
}
/* Emphasis without changing the text: the phrase keeps the body color and
   weight, and gets a 2px square-dot rule under it. `text-decoration: underline
   dotted` draws round dots, so it is a tiled gradient instead. */
.lede strong {
  color: inherit;
  font-weight: inherit;
  padding-bottom: 3px;
  background-image: repeating-linear-gradient(90deg, var(--clean) 0 2px, transparent 2px 4px);
  background-size: 4px 2px;
  background-position: 0 100%;
  background-repeat: repeat-x;
}

/* ------------------------------------------------------------------- input */

.scanbox { margin-top: 2.9rem; }

.field { width: 66.667%; transition: background 140ms var(--ease); }
.field:focus-within { background: var(--medium); }

.field > .inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.field input {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  padding: 0.75rem 0.5rem 0.75rem 1.1rem;
  min-width: 0;
}
.field input::placeholder { color: var(--muted); }
.field input:focus { outline: 0; }

.field button {
  --c: 10px;
  border: 0;
  background: var(--clean);
  color: var(--on-accent);
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 96;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.8rem clamp(1.1rem, 3vw, 2rem);
  cursor: pointer;
  transition: background 120ms var(--ease), transform 90ms var(--ease);
}
.field button:hover:not(:disabled) { background: var(--ink); color: var(--ground); }
.field button:active:not(:disabled) { transform: translateY(1px); }
.field button:disabled { background: var(--raised); color: var(--muted); cursor: progress; }

.smallprint { margin: 0.85rem 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

.error {
  --c: var(--cham);
  margin: 0.85rem 0 0;
  padding: 0.75rem 0.9rem;
  background: color-mix(in srgb, var(--ink) 12%, var(--ground));
  color: var(--ink);
  font-size: 13px;
  clip-path: polygon(
    var(--c) 0, 100% 0,
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    0 100%, 0 var(--c));
}

/* --------------------------------------------------------------- live feed */

.live { padding-bottom: 3rem; }
.live[hidden] { display: none; }

.livehead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.livehead .beat::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 0.5rem;
  background: var(--clean);
  animation: beat 1s steps(1, end) infinite;
}
@keyframes beat { 50% { opacity: 0; } }

#log {
  margin: 0;
  padding: 0.9rem 0 0;
  max-height: 20rem;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-all;
}
#log b { color: var(--ink); font-weight: 400; }
#log .ms { color: var(--muted); opacity: 0.72; }
#log .critical { color: var(--ink); }
#log .high { color: var(--muted); }
#log .medium { color: var(--muted); }

/* ------------------------------------------------------------------ report */

.report[hidden] { display: none; }
.report > * + * { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

.verdict { border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3rem); }

.verdict h2 {
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 102;
  font-size: clamp(1.55rem, 3.7vw, 2.95rem);
  line-height: 1.08;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.verdict h2 { color: var(--ink); }
.verdict[data-level='clean'] h2 { color: var(--clean); }

.verdict .subject { color: var(--muted); font-size: 13px; margin: 0 0 1.1rem; }
.verdict .explain { max-width: var(--measure); margin: 1.5rem 0 0; line-height: 1.7; }

.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.tally b { color: var(--ink); font-weight: 400; }

/* the waterfall: the authored moment of the page */

.section-title {
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 88;
  font-size: 26px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.75rem;
}
.section-title > span { display: block; max-width: 30rem; }

.consentline {
  --c: var(--cham);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
  padding: 0.8rem 1rem;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 16%, transparent) 0 8px, transparent 8px 16px),
    color-mix(in srgb, var(--ink) 6%, transparent);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  clip-path: polygon(
    var(--c) 0, 100% 0,
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    0 100%, 0 var(--c));
}

.fall { display: grid; gap: 2px; }

.fall-row {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr 4.5rem;
  align-items: center;
  gap: 0.9rem;
  padding: 0.45rem 0;
  font-size: 12.5px;
}
.fall-row .who { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fall-row .who span { color: var(--muted); }
.fall-row .when { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.track { position: relative; height: 14px; overflow: hidden; }
.track::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line);
}
.bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100%;
  transform: translateX(-100%);
  transition: transform 900ms var(--ease);
  color: var(--medium);
}
.bar { color: var(--ink); }
.bar.high { color: var(--muted); }
.bar.medium { color: var(--line); }
.bar::before {
  content: '';
  position: absolute;
  left: 0; right: 3px; top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.bar::after {
  content: '';
  position: absolute;
  right: 0;
  inset-block: 0;
  width: 3px;
  background: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .bar { transition: none; }
  .track { scroll-margin: 0; }
  .livehead .beat::after { animation: none; }
}

/* ------------------------------------------------------------------ stakes */

.say {
  max-width: var(--measure);
  margin: 0 0 2.25rem;
  line-height: 1.7;
  color: var(--muted);
}

.docket { margin-bottom: 2.5rem; }

.docket-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
}
.docket-row:last-child { border-bottom: 1px solid var(--line); }

.docket .amount {
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 96;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.docket .who { margin: 0 0 0.4rem; color: var(--ink); font-size: 13.5px; }
.docket .finding { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.65; }

.stakes dd b { color: var(--ink); font-weight: inherit; }

.sources {
  max-width: var(--measure);
  margin: 1.75rem 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 680px) {
  .docket-row { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ----------------------------------------------------------------- pricing */

.tiers { display: grid; gap: 1.15rem; }
@media (min-width: 820px) {
  .tiers { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

/* Equal-height columns with the availability note pinned to the bottom, so
   the three frames line up instead of stepping down the page. */
.tier {
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.tier .tier-list { flex: 1; }
/* The tier we want read first takes the accent for its frame rather than a
   badge or a scale-up, which would break the row. */
.gbox.tier-lead::before { background: var(--clean); }

.tier-name {
  margin: 0 0 0.5rem;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tier-price {
  margin: 0 0 1.15rem;
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.tier-price span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.tier-lead .tier-price { color: var(--clean); }

.tier-list { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.6; color: var(--muted); }
.tier-list li { position: relative; padding-left: 1.15rem; }
.tier-list li + li { margin-top: 0.7rem; }
.tier-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: var(--clean);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tier-cta {
  --c: 8px;
  width: 100%;
  margin-top: 1.35rem;
  border: 0;
  background: var(--clean);
  color: var(--on-accent);
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 96;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 1rem 0.75rem;
  line-height: 1.25;
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.tier-cta:hover { background: var(--ink); color: var(--ground); }
.tier:not(.tier-lead) .tier-cta { background: var(--raised); color: var(--ink); }
.tier:not(.tier-lead) .tier-cta:hover { background: var(--ink); color: var(--ground); }

.notify { margin-top: 1.35rem; }
.notify input {
  --c: 8px;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 0.6rem 0.7rem;
}
.notify input:focus-visible { outline: 2px solid var(--medium); outline-offset: 1px; }
.notify .tier-cta { margin-top: 0.5rem; }
.notify-msg { margin: 0.6rem 0 0; font-size: 12px; line-height: 1.5; color: var(--clean); }
.notify-msg:empty { display: none; }
.notify-msg[data-error] { color: var(--critical); }

.tier-note {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* ----------------------------------------------------------------- results */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 1.35rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.tab {
  --c: 9px;
  border: 0;
  background: var(--raised);
  color: var(--muted);
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 1rem 0.65rem;
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected='true'] { background: var(--clean); color: var(--on-accent); }

/* All four panels share one grid cell, so the box is always as tall as the
   longest one and does not jump when you switch tabs. Inactive panels stay
   laid out and are hidden with visibility, which also takes them out of the
   accessibility tree. */
.resultbox { display: grid; grid-template-columns: 1fr; }
.resultbox > .tabs { grid-row: 1; }
.resultbox > .panel { grid-row: 2; grid-column: 1; }

.panel { display: grid; gap: 1.75rem; align-content: start; }
.panel[hidden] { visibility: hidden; }
@media (min-width: 720px) {
  .panel { grid-template-columns: 1fr 1fr; gap: 2.25rem; }
}
.panel h3 {
  margin: 0 0 0.6rem;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel p { margin: 0; color: var(--ink); line-height: 1.7; font-size: 13.5px; }

/* ------------------------------------------------------------------ tables */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th {
  position: sticky;
  top: 0;
  text-align: left;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted);
  background: var(--raised);
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--raised); }
td .dim { color: var(--muted); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.chip {
  --c: 5px;
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border: 1px solid currentColor;
  clip-path: polygon(
    var(--c) 0, 100% 0,
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    0 100%, 0 var(--c));
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip.critical { color: var(--ink); }
.chip.high { color: var(--muted); }
.chip.medium { color: var(--muted); }
.chip.benign, .chip.unknown { color: var(--muted); }
.chip.clean { color: var(--clean); }

/* --------------------------------------------------------------- explainer */

.band { padding-top: clamp(3.5rem, 8vw, 6.5rem); }

/* The order of these steps is the information, so they are numbered. */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3.4rem;
  line-height: 1.7;
}
.steps li + li { margin-top: 1.6rem; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.27em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: calc(0.16em + 2px) 2px 2px;
  /* CSS `dotted` draws round dots. Four repeating gradients draw square ones,
     which is the only kind this world has. */
  background-image:
    repeating-linear-gradient(90deg, var(--clean) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(180deg, var(--clean) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, var(--clean) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(180deg, var(--clean) 0 2px, transparent 2px 4px);
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  background-position: 0 0, 100% 0, 0 100%, 0 0;
  background-repeat: no-repeat;
  color: var(--clean);
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 102;
  font-size: 1.15rem;
  line-height: 1;
}

.glossary {
  margin: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 760px) {
  .glossary { grid-template-columns: 1fr 1fr; gap: 1.15rem; }
}

/* A chamfered frame drawn as two stacked pseudo-elements: a hairline-colored
   shape, and a ground-colored shape 1px inside it. clip-path cuts a border off
   along with the corner, so the border has to be a shape rather than a border. */
.gbox,
.resultbox {
  --c: var(--cham);
  position: relative;
}
.gbox { padding: 1.15rem 1.25rem 1.3rem; }
.resultbox { padding: 1.25rem 1.4rem 1.5rem; }
.gbox > *,
.resultbox > * { position: relative; z-index: 1; }
.gbox::before, .gbox::after,
.resultbox::before, .resultbox::after { content: ''; position: absolute; z-index: 0; pointer-events: none; }
.gbox::before,
.resultbox::before {
  inset: 0;
  background: var(--line);
  clip-path: polygon(
    var(--c) 0, 100% 0,
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    0 100%, 0 var(--c));
}
.gbox::after,
.resultbox::after {
  --c: calc(var(--cham) - 1px);
  inset: 1px;
  background: var(--ground);
  clip-path: polygon(
    var(--c) 0, 100% 0,
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    0 100%, 0 var(--c));
}

.glossary dt {
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 17px;
  -webkit-text-stroke: 0.45px currentColor;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clean);
}
.glossary dd {
  margin: 0.6rem 0 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 13.5px;
}

.plainlist { max-width: var(--measure); }

.productlist { margin: 0 0 2.5rem; }
.plainlist li::before { background: var(--muted); }

/* The explainer tables carry sentences, not measurements, so they get a
   reading line length instead of the report's dense single-line rows. */
.band table td { line-height: 1.65; }
.band table td:first-child { white-space: nowrap; }
.band table td:not(:first-child) { min-width: 20rem; }

/* ---------------------------------------------------------------- footer */

.foot {
  margin-top: clamp(4rem, 9vw, 7rem);
  padding-block: 2.5rem 3.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}
.foot p { max-width: var(--measure); margin: 0 0 0.75rem; }

@media (max-width: 780px) {
  .nav a { display: none; }
}

@media (max-width: 680px) {
  .lede { font-size: 13.5px; line-height: 1.62; }
  .lede li { padding-left: 1.2rem; }
  .lede li::before { width: 6px; height: 6px; top: 0.55em; }
  .hero h1 { font-variation-settings: 'wdth' 88; font-size: clamp(1.7rem, 7.4vw, 2.5rem); }
  .verdict h2 { font-variation-settings: 'wdth' 88; }
  .section-title { font-size: 21px; }
  .fall-row { grid-template-columns: 1fr 3.75rem; grid-template-areas: 'who when' 'track track'; }
  .fall-row .who { grid-area: who; }
  .fall-row .when { grid-area: when; }
  .fall-row .track { grid-area: track; margin-top: 0.35rem; }
  .field { width: 100%; }
  .field > .inner { grid-template-columns: 1fr; gap: 0.4rem; padding: 0.5rem; }
  .field input { padding-inline: 0.7rem; }
  .field button { padding-block: 0.95rem; }
}


/* ------------------------------------------------------------- consent bar */

/* The gate we tell other people to build. Refuse and Accept are the same
   size, weight and colour: nothing here nudges toward yes. */
#consent-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 1rem var(--gutter) 1.15rem;
}
.consent-inner {
  max-width: 1020px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.consent-copy { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.6; color: var(--muted); }
.consent-copy a { color: var(--clean); }
.consent-actions { display: flex; gap: 0.6rem; }
.consent-actions button {
  --c: 8px;
  min-width: 8rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 96;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1rem 0.6rem;
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.consent-actions button:hover { background: var(--ink); color: var(--ground); }

/* ------------------------------------------------------------------ footer */

.sitefoot {
  margin-top: clamp(4rem, 9vw, 7rem);
  /* Square dots, so it belongs to the same world as the other pixel details.
     CSS `dotted` draws round ones; this is a 2px-on, 2px-off gradient pinned to
     the top edge, and it spans exactly the footer's width. */
  background-image: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 4px);
  background-size: calc(100% - var(--gutter) * 2) 2px;
  background-position: var(--gutter) 0;
  background-repeat: no-repeat;
  padding-block: 2.5rem 3rem;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; } }
.foot-grid h2 {
  margin: 0 0 0.7rem;
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 96;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-box: trim-both cap alphabetic;
}
/* The first footer column is headed by the wordmark itself, not by a label. */
.foot-mark {
  display: inline-block;
  margin-bottom: 0.7rem;
  justify-self: auto;
}
/* .foot-grid a is (0,1,1) and beats .mark, so the wordmark colour has to be
   restated at least as specifically. */
.foot-grid a.foot-mark { color: var(--clean); }
.foot-grid a.foot-mark:hover { color: var(--ink); text-decoration: none; }
.foot-grid ul { margin: 0; padding: 0; list-style: none; }
.foot-grid li + li { margin-top: 0.35rem; }
.foot-grid a { color: var(--muted); text-decoration: none; }
.foot-grid a:hover { color: var(--ink); text-decoration: underline; }
.foot-grid p { margin: 0 0 0.8rem; max-width: 46ch; }

.foot-claim {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 12px;
}
.foot-claim b { color: var(--clean); font-weight: 400; }
#consent-none {
  margin-top: 0.8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink);
}

/* ------------------------------------------------------------ legal pages */

.legal { font-family: 'Geist', system-ui, sans-serif; font-size: 15.5px; line-height: 1.68; }
.legal .measure { max-width: 68ch; }
.legal h1 {
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 102;
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.legal h2 {
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.6rem;
  color: var(--ink);
}
.legal p, .legal li { color: var(--muted); }
.legal p { margin: 0 0 0.9rem; max-width: 68ch; }
.legal ul { margin: 0 0 0.9rem; padding: 0; list-style: none; max-width: 68ch; }
.legal li { position: relative; padding-left: 1.4rem; margin-bottom: 0.5rem; }
.legal li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--clean);
}
.legal strong { color: var(--ink); font-weight: 600; }
.legal .updated {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2.5rem;
}


/* --------------------------------------------------------------------- faq */

/* Native <details>, so it opens without JavaScript and is announced correctly
   by a screen reader without any aria wiring. */
.faqs { display: grid; gap: 0.7rem; }

.faq { padding: 0; }
.faq > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Soma Slice', sans-serif;
  font-variation-settings: 'wdth' 96;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:hover { color: var(--clean); }

/* A pixel plus that loses its upright when the panel opens, leaving a minus.
   Drawn on a 16 unit grid at exactly 16px, one unit per pixel, so the bars stay
   hard-edged. Rotating it 45 degrees into a cross would antialias those edges,
   which is why the bar is removed instead. */
.faq-plus {
  flex: none;
  fill: currentColor;
  shape-rendering: crispEdges;
}
.faq[open] > summary .faq-plus .bar-v { display: none; }

.faq > p {
  margin: 0;
  padding: 0 1.2rem 1.25rem;
  max-width: 74ch;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}
.faq > p a { color: var(--clean); }