/* threat.cafe site styles, extracted from index.html on 2026-10-16 (cafe_edits 4.10). */
@layer reset, tokens, base, layout, components, utilities, overrides;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--nav-height) + var(--safe-top) + var(--space-4));
    hanging-punctuation: first last;
  }
  body, h1, h2, h3, p, ul, ol, dl, dd, figure {
    margin: 0;
  }
  ul, ol {
    list-style: none;
  }
  button, input {
    font: inherit;
    color: inherit;
  }
  svg {
    display: block;
    flex-shrink: 0;
  }
}

@layer tokens {
  :root {
    color-scheme: light;

    /* Tier 1: Primitives (34/34 sRGB-safe OKLCH tokens, warm-stone 95deg light, carbon-slate 255deg dark) */
    --stone-1: oklch(98.2% 0.004 95deg);
    --stone-2: oklch(96.3% 0.005 95deg);
    --stone-3: oklch(93.4% 0.006 95deg);
    --stone-4: oklch(90.0% 0.008 95deg);
    --stone-5: oklch(85.5% 0.010 95deg);
    --stone-7: oklch(61.0% 0.011 95deg);
    --stone-9: oklch(49.5% 0.012 95deg);
    --stone-10: oklch(43.5% 0.012 95deg);
    --stone-12: oklch(19.0% 0.008 95deg);

    --ink-1: oklch(16.2% 0.006 255deg);
    --ink-2: oklch(19.2% 0.007 255deg);
    --ink-3: oklch(22.4% 0.008 255deg);
    --ink-4: oklch(26.5% 0.010 255deg);
    --ink-5: oklch(31.5% 0.012 255deg);
    --ink-7: oklch(52.5% 0.013 255deg);
    --ink-9: oklch(67.5% 0.011 255deg);
    --ink-10: oklch(76.5% 0.009 255deg);
    --ink-12: oklch(94.5% 0.005 95deg);

    --vermilion-light: oklch(52.5% 0.178 34deg);
    --vermilion-light-hover: oklch(48.0% 0.172 34deg);
    --vermilion-light-text: oklch(49.0% 0.172 34deg);
    --vermilion-light-soft: oklch(92.0% 0.026 38deg);

    --vermilion-dark: oklch(70.5% 0.185 35deg);
    --vermilion-dark-hover: oklch(73.5% 0.155 35deg);
    --vermilion-dark-soft: oklch(24.5% 0.042 35deg);

    --jade-light: oklch(46.5% 0.095 160deg);
    --jade-light-soft: oklch(92.5% 0.028 160deg);
    --jade-dark: oklch(78.0% 0.115 160deg);
    --jade-dark-soft: oklch(24.0% 0.040 160deg);

    --amber-light: oklch(48.5% 0.098 72deg);
    --amber-light-soft: oklch(93.0% 0.032 78deg);
    --amber-dark: oklch(79.5% 0.120 75deg);
    --amber-dark-soft: oklch(25.0% 0.042 75deg);

    /* Spatial scale: --space-1..4 come from type-system.css; 5..10 are threat's tighter
       steps (ADR-DS03 exception, pending design review) */
    --space-0: 0px;
    --space-1-5: 0.375rem;
    --space-2-5: 0.625rem;
    --threat-space-5: 1.25rem;
    --threat-space-6: 1.5rem;
    --threat-space-7: 1.75rem;
    --threat-space-8: 2rem;
    --threat-space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Typography: family, weights, ladder sizes, leading and tracking roles come from
       type-system.css. The names below are legacy aliases of ladder roles. */
    --font-size-xs: var(--font-size-small);
    --font-size-sm: var(--font-size-small);
    --font-size-meta: var(--font-size-small);
    --font-size-base: var(--font-size-body);
    --font-size-lg: var(--font-size-sub);
    --font-size-xl: var(--font-size-heading);
    --font-size-lede: var(--font-size-lead);
    --font-size-h3-bento: var(--font-size-sub);
    --font-size-manifesto: var(--font-size-title);
    --font-size-h2: var(--font-size-heading);
    --font-size-stat: var(--font-size-display);
    --font-size-h1: var(--font-size-display);

    --leading-tight: 1.04;
    --leading-snug: 1.32;
    --tracking-tight: -0.02em;
    --tracking-mono: -0.01em;
    --threat-measure: 62ch;

    /* Shape & Radius Lock (Concentric Doppelrand: 24px outer - 6px pad = 18px inner) */
    --radius-outer: 1.5rem;
    --radius-inner: 1.125rem;
    --radius-card: 1.25rem;
    --radius-sm: 0.625rem;
    --radius-pill: 9999px;

    /* Motion Primitives (UI ceiling 300ms, reveals 450ms) */
    --duration-fast: 140ms;
    --duration-base: 220ms;
    --duration-slow: 300ms;
    --duration-reveal: 450ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --motion-distance: 12px;

    /* Z-Index Ladder */
    --z-base: 1;
    --z-sticky: 100;
    --z-float: 200;
    --z-modal: 400;

    /* Hardware Safe Areas & Viewport Tokens */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --keyboard-offset: 0px;

    /* Tier 2: Semantic Tokens (Light Stone Mode Default) */
    --bg: var(--stone-2);
    --surface: var(--stone-3);
    --surface-raised: var(--stone-1);
    --surface-recessed: var(--stone-4);
    --surface-glass: color-mix(in oklch, var(--stone-2) 88%, transparent);

    --text: var(--stone-12);
    --muted: var(--stone-10);
    --faint: var(--stone-9); /* 5.50:1 on --bg, 5.05:1 on --surface */

    --line: var(--stone-5);
    --border-input: var(--stone-7); /* 3.40:1 on --bg, 3.12:1 on --surface */
    --highlight-inset: oklch(100% 0 0deg / 78%);
    --shadow-tray: 0 1px 2px oklch(19% 0.008 95deg / 5%), 0 12px 32px -10px oklch(19% 0.008 95deg / 7%);
    --hero-glow: radial-gradient(ellipse 68% 52% at 72% 24%, oklch(52.5% 0.178 34deg / 7%), transparent 70%);

    --accent: var(--vermilion-light);
    --accent-hover: var(--vermilion-light-hover);
    --accent-text: var(--vermilion-light-text); /* 5.62:1 on --surface, 6.12:1 on --bg */
    --accent-ink: oklch(100% 0 0deg);
    --accent-soft: var(--vermilion-light-soft);

    --ok: var(--jade-light);
    --ok-soft: var(--jade-light-soft);
    --warn: var(--amber-light);
    --warn-soft: var(--amber-light-soft);

    /* Tier 3: Component & Pointer-Aware Sizing Tokens */
    --max: 76.5rem; /* 1224px */
    --threat-gutter: clamp(1.25rem, 3.5vw, 2.5rem);
    --threat-space-section: clamp(4.5rem, 7.5vw, 6.5rem);
    --nav-height: 4.25rem; /* 68px */
    --control-height: 3rem; /* 48px primary inputs & hero CTA */
    --touch-min: 2.75rem; /* 44px buttons, nav links, icon buttons */
    --pill-height: 2.125rem; /* 34px sleek desktop chips (>=24px WCAG 2.2 AA; 44px on coarse pointer) */
    --tab-height: 2rem; /* 32px sleek desktop segmented tabs (>=24px WCAG 2.2 AA; 44px on coarse pointer) */
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
    --scrim: oklch(0% 0 0deg / 52%);
    --shadow-tab: 0 1px 2px oklch(0% 0 0deg / 10%);

    /* font_best Part 8 vocabulary (ADR-DS04): the shared names, aliased to the threat palette */
    --color-bg: var(--bg);
    --color-surface: var(--surface);
    --color-text: var(--text);
    --color-text-muted: var(--muted);
    --color-text-subtle: var(--faint);
    --color-accent: var(--accent);
    --color-accent-hover: var(--accent-hover);
    --color-on-accent: var(--accent-ink);
    --color-link: var(--accent-text);
    --color-focus: var(--accent);
    --color-success-text: var(--ok);
    --color-warning-text: var(--warn);
    --threat-accent: var(--accent);
  }

  @media (pointer: coarse) {
    :root {
      --pill-height: 2.75rem;
      --tab-height: 2.75rem;
    }
  }

  /* Light theme only (2026-10-15): dark token sets removed. */
}

@layer base {
  body {
    background-color: var(--bg);
    background-image: var(--hero-glow);
    background-repeat: no-repeat;
    background-size: 100% 52rem;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    line-height: var(--leading-body, 1.55);
    font-weight: var(--weight-regular, 400);
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
  }

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

  h1, h2, h3 {
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
    text-wrap: balance;
    color: var(--text);
  }

  p {
    text-wrap: pretty;
    max-inline-size: var(--threat-measure);
  }

  a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border-input);
    text-underline-offset: 0.22em;
    transition: color var(--duration-fast) var(--ease-out),
                text-decoration-color var(--duration-fast) var(--ease-out);
  }

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

  button, a, input, summary, [role="tab"] {
    touch-action: manipulation;
  }
}

@layer layout {
  .wrap {
    inline-size: 100%;
    max-inline-size: var(--max);
    margin-inline: auto;
    padding-inline-start: max(var(--threat-gutter), var(--safe-left));
    padding-inline-end: max(var(--threat-gutter), var(--safe-right));
  }

  .skip {
    position: fixed;
    inset-block-start: -5rem;
    inset-inline-start: max(var(--threat-gutter), var(--safe-left));
    z-index: var(--z-modal);
    background: var(--accent);
    color: var(--accent-ink);
    padding-block: var(--space-2-5);
    padding-inline: var(--space-4);
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--weight-medium, 500);
  }
  .skip:focus {
    inset-block-start: max(var(--space-3), var(--safe-top));
  }

  /* Editorial Chapter Bar (01 to 05 Story Spine) */
  .chapter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--threat-space-5);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption, 0.75rem);
    color: var(--faint);
    letter-spacing: 0;
    font-weight:var(--weight-medium, 500);
  }
  .chapter-num {
    color: var(--accent-text);
    font-weight: var(--weight-medium);
  }
  .chapter-rule {
    inline-size: 2.5rem;
    block-size: 1px;
    background: var(--border-input);
  }
}

@layer components {
  /* Sticky Navigation Bar */
  .site-nav {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    padding-block-start: var(--safe-top);
    background: var(--surface-glass);
    border-block-end: 1px solid transparent;
    transition: border-color var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out);
  }
  @supports (backdrop-filter: blur(1px)) {
    .site-nav {
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      backdrop-filter: blur(14px) saturate(140%);
    }
  }
  .site-nav.scrolled {
    border-block-end-color: var(--line);
  }
  .nav-sentinel {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    block-size: 1px;
    pointer-events: none;
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: var(--nav-height);
    gap: var(--space-4);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2-5);
    min-block-size: var(--touch-min);
    font-weight: var(--weight-medium, 500);
    font-size: var(--font-size-base);
    letter-spacing: 0;
    text-decoration: none;
  }
  .brand svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--accent);
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--muted);
  }
  .nav-links a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-min);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    text-decoration: none;
  }
  .nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Buttons (2 Variants: Primary with Circular Well, Ghost) */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2-5);
    min-block-size: var(--control-height);
    padding-block: var(--space-2);
    padding-inline: var(--threat-space-5);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-meta);
    font-weight: var(--weight-medium, 500);
    line-height: var(--leading-label, 1.3);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: transform var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
  }
  .btn:active {
    transform: scale(0.985);
  }
  .btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
    padding-inline-end: var(--space-2-5);
  }
  .btn-primary-simple {
    background: var(--accent);
    color: var(--accent-ink);
  }
  .btn-well {
    display: inline-grid;
    place-items: center;
    inline-size: 1.875rem;
    block-size: 1.875rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--accent-ink) 18%, transparent);
    color: var(--accent-ink);
    transition: transform var(--duration-fast) var(--ease-out);
  }
  .btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-input);
  }
  .btn-sm {
    min-block-size: var(--touch-min);
    padding-block: var(--space-1-5);
    padding-inline: var(--space-4);
    font-size: var(--font-size-sm);
  }
  .icon-btn {
    inline-size: var(--touch-min);
    block-size: var(--touch-min);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-input);
    background: transparent;
    color: var(--muted);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    font-size: var(--font-size-lead, 1.125rem);
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
  }
  .mobile-menu-btn {
    display: none;
  }

  @media (max-width: 54rem) {
    .nav-links {
      display: none;
    }
    .mobile-menu-btn {
      display: inline-grid;
    }
    .nav-actions .btn-sm {
      display: none;
    }
  }

  /* Native Top-Layer Mobile Navigation <dialog> */
  .mobile-dialog {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100dvh;
    max-block-size: 100dvh;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 0;
    z-index: var(--z-modal);
  }
  .mobile-dialog::backdrop {
    background: var(--scrim);
  }
  @supports (backdrop-filter: blur(1px)) {
    .mobile-dialog::backdrop {
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }
  }
  .mobile-dialog-inner {
    margin-inline-start: auto;
    inline-size: min(22rem, 88vw);
    block-size: 100%;
    background: var(--surface-raised);
    border-inline-start: 1px solid var(--line);
    padding-block-start: max(var(--space-4), var(--safe-top));
    padding-block-end: max(var(--threat-space-6), var(--safe-bottom));
    padding-inline-start: var(--threat-space-6);
    padding-inline-end: max(var(--threat-space-6), var(--safe-right));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .mobile-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--line);
  }
  .mobile-dialog-links {
    display: grid;
    gap: var(--space-1);
    margin-block: var(--threat-space-6) auto;
  }
  .mobile-dialog-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 3.125rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--weight-medium, 500);
    text-decoration: none;line-height:var(--leading-sub, 1.3);
  }
  .mobile-dialog-foot {
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--line);
    display: grid;
    gap: var(--space-3);
  }
  .mobile-dialog-foot .btn {
    inline-size: 100%;
  }

  /* Double-Bezel (Doppelrand) Machined Tray: Reserved strictly for the 3 Interactive Instruments */
  .tray {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-outer);
    padding: var(--space-1-5);
    box-shadow: var(--shadow-tray);
    min-inline-size: 0;
  }
  .tray-core {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-inner);
    box-shadow: inset 0 1px 0 var(--highlight-inset);
    padding: clamp(1.25rem, 2.2vw, 1.625rem);
    min-inline-size: 0;
  }

  /* Eyebrow Pill (Used only twice on the page: Hero & Pricing) */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--muted);
    margin-block-end: var(--threat-space-5);
  }

  /* Prologue: Hero + Zero-Scroll Conversion + Focused Counter Workbench */
  .hero {
    padding-block-start: clamp(2rem, 4.5vw, 3.75rem);
    padding-block-end: clamp(3.5rem, 6.5vw, 5.5rem);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: clamp(2rem, 4.5vw, 4rem);
    align-items: start;
  }
  .hero-copy {
    padding-block-start: var(--space-1-5);
  }
  .hero h1 {
    font-size: var(--font-size-h1);
    line-height: var(--leading-display, 1.05);
    letter-spacing: var(--tracking-display, -0.02em);
    max-inline-size: 11.5ch;font-weight:var(--weight-semibold, 600);
  }
  .hero p.lede {
    margin-block-start: var(--threat-space-5);
    font-size: var(--font-size-lede);
    line-height: var(--leading-body, 1.55);
    color: var(--muted);
    max-inline-size: 45ch;
  }

  /* Inline Hero Conversion Capture (#heroJoinBox) */
  .hero-convert {
    margin-block-start: var(--threat-space-7);
    max-inline-size: 31rem;
  }
  .hero-convert .ok {
    display: none;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--font-size-meta);
    padding: var(--space-4);
    border-radius: var(--radius-card);
    background: var(--ok-soft);
    border: 1px solid var(--line);
    color: var(--text);
  }
  .hero-convert .ok i {
    color: var(--ok);
    font-size: var(--font-size-heading, 1.5rem);
    line-height: var(--leading-heading, 1.2);
    flex-shrink: 0;letter-spacing:var(--tracking-heading, -0.01em);
  }
  .hero-convert.done form {
    display: none;
  }
  .hero-convert.done .ok {
    display: flex;
  }

  .hero-links {
    margin-block-start: var(--threat-space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--threat-space-6);
    font-size: var(--font-size-sm);
  }
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    min-block-size: var(--pill-height);
    font-weight: var(--weight-medium);
    color: var(--text);
    text-decoration: none;
  }
  .text-link i {
    color: var(--accent-text);
  }
  .dot-sep {
    color: var(--faint);
  }

  /* Hero Trust & Specification Strip */
  .hero-proof {
    margin-block-start: var(--threat-space-8);
    padding-block-start: var(--threat-space-5);
    border-block-start: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    max-inline-size: 33rem;
  }
  .proof-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .proof-item b {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-medium, 500);
    color: var(--text);
  }
  .proof-item span {
    font-size: var(--font-size-xs);
    color: var(--faint);
    line-height: var(--leading-small, 1.5);
  }

  @media (max-width: 60rem) {
    .hero-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    .hero-copy {
      padding-block-start: 0;
    }
  }
  @media (max-width: 30rem) {
    .hero-proof {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-2-5);
    }
  }

  /* Counter Workbench Instrument (#lookup) */
  .counter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-end: var(--space-3);
    margin-block-end: var(--space-4);
    border-block-end: 1px solid var(--line);
    flex-wrap: wrap;
  }
  .counter-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .counter-title {
    font-size: var(--font-size-base);
    font-weight: var(--weight-medium, 500);
    letter-spacing: 0;
  }
  .counter-telemetry {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--faint);
  }
  .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.375rem;
    block-size: 1.375rem;
    padding-inline: var(--space-1);
    border-radius: 5px;
    border: 1px solid var(--border-input);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption, 0.75rem);
    color: var(--muted);
  }

  .field label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--weight-medium, 500);
    color: var(--muted);
    margin-block-end: var(--space-1-5);
  }
  .field .row {
    display: flex;
    gap: var(--space-2);
  }
  .input-wrap {
    position: relative;
    flex: 1;
    min-inline-size: 0;
    display: flex;
    align-items: center;
  }
  .input {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: var(--control-height);
    padding-inline-start: var(--space-4);
    padding-inline-end: 2.75rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-input);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    line-height: var(--leading-small, 1.5);
    -webkit-appearance: none;
    appearance: none;
  }
  #heroEmail,
  #email {
    font-family: var(--font-sans);
    padding-inline-end: var(--space-4);
  }
  .input::placeholder {
    color: var(--faint);
  }
  .input:focus {
    outline: 2px solid transparent;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
  }
  .input[aria-invalid="true"] {
    border-color: var(--accent);
  }
  .clear-btn {
    position: absolute;
    inset-inline-end: var(--space-1);
    inline-size: var(--touch-min);
    block-size: var(--touch-min);
    border-radius: var(--radius-pill);
    border: 0;
    background: transparent;
    color: var(--faint);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    font-size: var(--font-size-body, 1rem);
  }
  .clear-btn[hidden] {
    display: none;
  }
  .help {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--muted);
    min-block-size: 1.125rem;
  }
  .help.err {
    color: var(--accent-text);
    font-weight: var(--weight-medium);
  }

  /* Curated 5-Chip Preset Strip (Sleek 34px desktop, 44px touch) */
  .chips-label {
    margin-block-start: var(--space-2-5);
    margin-block-end: var(--space-1-5);
    font-size: var(--font-size-xs);
    color: var(--faint);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
  }
  .chip {
    max-inline-size: 100%;
    min-block-size: var(--pill-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--border-input);
    background: var(--bg);
    color: var(--muted);
    border-radius: var(--radius-pill);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: var(--leading-small, 1.5);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
  }
  .chip-dot {
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }
  .chip-dot.bad { background: var(--accent); }
  .chip-dot.clean { background: var(--ok); }
  .chip-dot.unknown { background: var(--warn); }

  .chip[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
    font-weight: var(--weight-medium);
  }

  /* Counter Result Shell with 2-Mode Toggle (Verdict vs Hook & OSV JSON) */
  .result-shell {
    margin-block-start: var(--space-3);
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--space-3);
  }
  .view-tabs {
    display: inline-flex;
    gap: 2px;
    background: var(--surface);
    padding: 3px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
  }
  .view-tab {
    min-block-size: var(--tab-height);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-medium, 500);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
  }
  .view-tab[aria-selected="true"] {
    background: var(--surface-raised);
    color: var(--text);
    box-shadow: var(--shadow-tab);
  }

  .result {
    min-block-size: 9.25rem;
    contain: layout style;
  }
  .result .empty {
    color: var(--faint);
    font-size: var(--font-size-meta);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding-block: var(--space-3);
  }
  .result .empty i {
    font-size: var(--font-size-sub, 1.25rem);
    line-height: var(--leading-sub, 1.3);
    color: var(--accent-text);
  }
  .verdict {
    display: grid;
    gap: var(--space-2-5);
  }
  .verdict-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .verdict .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-medium, 500);
    font-size: var(--font-size-sm);
  }
  .verdict.bad .badge {
    background: var(--accent-soft);
    color: var(--accent-text);
  }
  .verdict.clean .badge {
    background: var(--ok-soft);
    color: var(--ok);
  }
  .verdict.unknown .badge {
    background: var(--warn-soft);
    color: var(--warn);
  }
  .verdict .target {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--muted);
    word-break: break-all;
  }
  .verdict .why {
    font-size: var(--font-size-meta);
    color: var(--text);
    line-height: var(--leading-small, 1.5);
    max-inline-size: 54ch;
  }
  /* Compact 2x2 Verdict Metadata Grid */
  .verdict-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
    margin-block-start: var(--space-1);
    padding-block-start: var(--space-2-5);
    border-block-start: 1px solid var(--line);
    font-size: var(--font-size-xs);
  }
  .meta-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-inline-size: 0;
  }
  .meta-cell dt {
    color: var(--faint);
    font-size: var(--font-size-caption, 0.75rem);
  }
  .meta-cell dd {
    color: var(--text);
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .meta-cell dd a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--pill-height);
    color: var(--accent-text);
  }

  .code-box {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption, 0.75rem);
    line-height: var(--leading-caption, 1.45);
    color: var(--muted);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    max-inline-size: 100%;
    white-space: pre;
  }
  .code-box .hl-bad {
    color: var(--accent-text);
    font-weight: var(--weight-medium);
  }
  .code-box .hl-ok {
    color: var(--ok);
    font-weight: var(--weight-medium);
  }
  .code-box .hl-warn {
    color: var(--warn);
    font-weight: var(--weight-medium);
  }

  .tray-foot {
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .cli-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding-block: 2px;
    padding-inline-start: var(--space-3);
    padding-inline-end: 3px;
    max-inline-size: 100%;
    min-inline-size: 0;
  }
  .cli-pill code {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption, 0.75rem);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .copy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: var(--tab-height);
    padding-inline: var(--space-2-5);
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--font-size-caption, 0.75rem);
    font-weight: var(--weight-medium, 500);
    cursor: pointer;
    flex-shrink: 0;
  }
  .demo-note {
    font-size: var(--font-size-caption, 0.75rem);
    color: var(--faint);
  }
  @media (max-width: 32rem) {
    .field .row {
      flex-direction: column;
    }
    .field .row .btn {
      inline-size: 100%;
    }
    .verdict-meta {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Act 01: The Shift (Manifesto + Clean Hairline Scale Ledger) */
  .manifesto {
    padding-block: var(--threat-space-section);
    border-block-start: 1px solid var(--line);
  }
  .manifesto p.big {
    font-size: var(--font-size-manifesto);
    line-height: var(--leading-title, 1.1);
    letter-spacing: var(--tracking-title, -0.015em);
    font-weight: var(--weight-semibold, 600);
    max-inline-size: 26ch;
    text-wrap: balance;
  }
  .manifesto p.big span {
    color: var(--muted);
  }
  /* Hairline Specification Ledger (No box-in-box clutter) */
  .numbers {
    margin-block-start: clamp(2.75rem, 5.5vw, 4.25rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-outer);
    overflow: hidden;
  }
  .num {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    border-inline-end: 1px solid var(--line);
  }
  .num:last-child {
    border-inline-end: 0;
  }
  .num-tag {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--faint);
    margin-block-end: var(--space-4);
  }
  .num b {
    display: block;
    font-weight: var(--weight-semibold, 600);
    font-size: var(--font-size-stat);
    letter-spacing: var(--tracking-display, -0.02em);
    line-height: var(--leading-display, 1.05);
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }
  .num p {
    margin-block-start: var(--space-3);
    color: var(--muted);
    font-size: var(--font-size-meta);
    max-inline-size: 32ch;
  }
  .source-link {
    margin-block-start: auto;
    padding-block-start: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    min-block-size: var(--pill-height);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-medium, 500);
    color: var(--accent-text);
  }
  @media (max-width: 54rem) {
    .numbers {
      grid-template-columns: minmax(0, 1fr);
    }
    .num {
      border-inline-end: 0;
      border-block-end: 1px solid var(--line);
    }
    .num:last-child {
      border-block-end: 0;
    }
  }

  /* Act 02: The Mechanism (Contrast Ledger + 3 Steps + Policy Simulator) */
  .how {
    padding-block: var(--threat-space-section);
    border-block-start: 1px solid var(--line);
  }
  .section-h2 {
    font-size: var(--font-size-h2);line-height:var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em);
  }
  .section-lead {
    margin-block-start: var(--space-3);
    color: var(--muted);
    max-inline-size: 54ch;
  }

  /* Clean Hairline Contrast Comparison (No nested boxes) */
  .contrast-grid {
    margin-block-start: var(--threat-space-8);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .contrast-card {
    border-radius: var(--radius-outer);
    padding: clamp(1.5rem, 2.8vw, 2rem);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }
  .contrast-fragile {
    background: var(--surface);
  }
  .contrast-deterministic {
    background: var(--surface-raised);
    border-color: var(--border-input);
    box-shadow: var(--shadow-tray);
  }
  .contrast-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-block-end: var(--space-3);
  }
  .contrast-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption, 0.75rem);
    font-weight: var(--weight-medium, 500);
  }
  .contrast-fragile .contrast-pill {
    background: var(--bg);
    color: var(--faint);
    border: 1px solid var(--line);
  }
  .contrast-deterministic .contrast-pill {
    background: var(--accent-soft);
    color: var(--accent-text);
  }
  .contrast-outcome {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption, 0.75rem);
    color: var(--faint);
  }
  .contrast-deterministic .contrast-outcome {
    color: var(--accent-text);
    font-weight: var(--weight-medium);
  }
  .contrast-card h3 {
    font-size: var(--font-size-sub, 1.25rem);
    margin-block-end: var(--space-3);line-height:var(--leading-sub, 1.3);
  }
  .flow-list {
    display: grid;
    border-block-start: 1px solid var(--line);
  }
  .flow-item {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--space-2-5);
    align-items: start;
    font-size: var(--font-size-meta);
    color: var(--muted);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--line);
  }
  .flow-item:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }
  .flow-item i {
    font-size: var(--font-size-lead, 1.125rem);
    margin-block-start: 2px;
  }
  .contrast-fragile .flow-item:last-child {
    color: var(--text);
  }
  .contrast-fragile .flow-item:last-child i {
    color: var(--warn);
  }
  .contrast-deterministic .flow-item:last-child {
    color: var(--text);
    font-weight: var(--weight-medium);
  }
  .contrast-deterministic .flow-item:last-child i {
    color: var(--accent-text);
  }
  @media (max-width: 54rem) {
    .contrast-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .how-grid {
    margin-block-start: var(--threat-space-10);
    padding-block-start: var(--threat-space-10);
    border-block-start: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .steps {
    display: grid;
  }
  .step {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-3);
    padding-block: var(--threat-space-6);
    border-block-end: 1px solid var(--line);
  }
  .step:first-child {
    padding-block-start: 0;
  }
  .step:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }
  .step-icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    display: inline-grid;
    place-items: center;
    font-size: var(--font-size-sub, 1.25rem);
    color: var(--accent-text);line-height:var(--leading-sub, 1.3);
  }
  .step h3 {
    font-size: var(--font-size-lg);line-height:var(--leading-sub, 1.3);
  }
  .step p {
    margin-block-start: var(--space-2);
    color: var(--muted);
    font-size: var(--font-size-meta);
    max-inline-size: 46ch;
  }

  /* Interactive Policy Simulator */
  .sim-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
    flex-wrap: wrap;
  }
  .sim-head h3 {
    font-size: var(--font-size-lg);line-height:var(--leading-sub, 1.3);
  }
  .sim-controls {
    display: grid;
    gap: var(--space-2-5);
    margin-block-end: var(--space-4);
  }
  .sim-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
  }
  .sim-row-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .sim-pills {
    display: inline-flex;
    gap: 2px;
    background: var(--surface);
    padding: 3px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
  }
  .sim-pill {
    min-block-size: var(--tab-height);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption, 0.75rem);
    cursor: pointer;
  }
  .sim-pill[aria-pressed="true"] {
    background: var(--surface-raised);
    color: var(--text);
    font-weight: var(--weight-medium);
    box-shadow: var(--shadow-tab);
  }
  @media (max-width: 58rem) {
    .how-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Act 03: The Threat Board (Filterable Public Ledger) */
  .board {
    padding-block: var(--threat-space-section);
    border-block-start: 1px solid var(--line);
  }
  .board-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--threat-space-6);
    flex-wrap: wrap;
  }
  .board-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-start: var(--threat-space-7);
    flex-wrap: wrap;
  }
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .board-step-btns {
    display: inline-flex;
    gap: var(--space-2);
    margin-inline-start: auto;
  }
  .board-track {
    margin-block-start: var(--threat-space-7);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(84vw, 310px), 356px);
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-block: var(--space-2) var(--threat-space-5);
    padding-inline-start: max(var(--threat-gutter), var(--safe-left));
    padding-inline-end: max(var(--threat-gutter), var(--safe-right));
    scroll-padding-inline-start: max(var(--threat-gutter), var(--safe-left));
    scrollbar-width: thin;
  }
  @media (min-width: 79rem) {
    .board-track {
      padding-inline-start: calc((100% - var(--max)) / 2 + var(--threat-gutter));
      scroll-padding-inline-start: calc((100% - var(--max)) / 2 + var(--threat-gutter));
    }
  }
  .incident {
    scroll-snap-align: start;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--threat-space-6);
    display: flex;
    flex-direction: column;
    min-block-size: 20rem;
    min-inline-size: 0;
  }
  .incident[hidden] {
    display: none;
  }
  .incident .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--faint);
  }
  .incident .kind {
    color: var(--accent-text);
    font-weight: var(--weight-medium);
    background: var(--accent-soft);
    padding: 2px var(--space-2-5);
    border-radius: var(--radius-pill);
  }
  .incident h3 {
    margin-block-start: var(--space-4);
    font-size: var(--font-size-sub, 1.25rem);
    line-height: var(--leading-sub, 1.3);
  }
  .incident p {
    margin-block-start: var(--space-2-5);
    color: var(--muted);
    font-size: var(--font-size-meta);
  }
  .ioc-chip {
    margin-block-start: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption, 0.75rem);
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .incident-actions {
    margin-block-start: auto;
    padding-block-start: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-block-start: 1px solid var(--line);
  }
  .incident-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    min-block-size: var(--pill-height);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-medium, 500);
    color: var(--text);
  }
  .test-counter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: var(--pill-height);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-input);
    background: var(--bg);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption, 0.75rem);
    cursor: pointer;
  }
  .board-foot {
    margin-block-start: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--faint);
  }

  /* Act 04: The Standard (4-Cell Principles Bento Grid) */
  .principles {
    padding-block: var(--threat-space-section);
    border-block-start: 1px solid var(--line);
  }
  .bento {
    margin-block-start: var(--threat-space-8);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .cell {
    border-radius: var(--radius-outer);
    padding: clamp(1.5rem, 3vw, 2.125rem);
    min-block-size: 16.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    background: var(--surface);
    position: relative;
    overflow: hidden;
    min-inline-size: 0;
  }
  .cell h3 {
    font-size: var(--font-size-h3-bento);
    letter-spacing: 0;
    max-inline-size: 18ch;line-height:var(--leading-sub, 1.3);
  }
  .cell p {
    margin-block-start: var(--space-2-5);
    color: var(--muted);
    max-inline-size: 42ch;
    font-size: var(--font-size-meta);
  }
  .cell-specimen {
    margin-block-end: var(--threat-space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    position: relative;
    z-index: 1;
  }
  .spec-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption, 0.75rem);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    color: var(--text);
  }
  .c1 {
    grid-column: span 7;
    background: var(--accent);
    border-color: transparent;
  }
  .c1 h3, .c1 p {
    color: var(--accent-ink);
  }
  .c1 .spec-badge {
    background: color-mix(in oklch, var(--accent-ink) 16%, transparent);
    border-color: color-mix(in oklch, var(--accent-ink) 28%, transparent);
    color: var(--accent-ink);
  }
  .c1 .spec-strike {
    text-decoration: line-through;
  }
  .c2 {
    grid-column: span 5;
    background: var(--surface-raised);
  }
  .c3 {
    grid-column: span 5;
    background: var(--surface);
  }
  .c3 .bigmark {
    position: absolute;
    inset-inline-end: -4rem;
    inset-block-start: -5rem;
    inline-size: 14rem;
    block-size: 14rem;
    color: var(--accent);
    opacity: 0.2;
    pointer-events: none;
  }
  .c4 {
    grid-column: span 7;
    background: var(--surface-raised);
  }
  @media (max-width: 56rem) {
    .bento {
      grid-template-columns: minmax(0, 1fr);
    }
    .c1, .c2, .c3, .c4 {
      grid-column: auto;
    }
    .cell {
      min-block-size: 14.5rem;
    }
  }

  /* Act 05: Downstream Pricing + FAQ + Seat at the Counter */
  .pricing {
    padding-block: var(--threat-space-section);
    border-block-start: 1px solid var(--line);
  }
  .tiers {
    margin-block-start: var(--threat-space-8);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
  }
  .tier {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-outer);
    padding: var(--threat-space-7);
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }
  .tier.featured {
    background: var(--surface-raised);
    border: 2px solid var(--accent);
    box-shadow: var(--shadow-tray);
  }
  .tier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .tier h3 {
    font-size: var(--font-size-sub, 1.25rem);line-height:var(--leading-sub, 1.3);
  }
  .tier-badge {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption, 0.75rem);
    font-weight: var(--weight-medium, 500);
    padding: 2px var(--space-2-5);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-text);
  }
  .tier .who {
    margin-block-start: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--faint);
  }
  .tier .price {
    margin-block-start: var(--threat-space-5);
    padding-block-end: var(--threat-space-5);
    border-block-end: 1px solid var(--line);
  }
  .tier .price b {
    display: block;
    font-weight: var(--weight-semibold, 600);
    font-size: var(--font-size-title, clamp(2rem, 1.75rem + 1vw, 2.5rem));
    letter-spacing: var(--tracking-title, -0.015em);
    font-variant-numeric: tabular-nums;line-height:var(--leading-title, 1.1);
  }
  .tier .price span {
    display: block;
    margin-block-start: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--faint);
  }
  .tier-desc {
    margin-block-start: var(--space-4);
    color: var(--muted);
    font-size: var(--font-size-meta);
  }
  .tier-list {
    margin-block-start: var(--space-4);
    margin-block-end: var(--threat-space-7);
    display: grid;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text);
  }
  .tier-list li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--space-2);
    align-items: start;
  }
  .tier-list i {
    color: var(--accent-text);
    font-size: var(--font-size-body, 1rem);
    margin-block-start: 3px;
  }
  .tier .btn {
    margin-block-start: auto;
    inline-size: 100%;
  }
  .pricing-foot {
    margin-block-start: var(--threat-space-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--faint);
  }
  @media (max-width: 58rem) {
    .tiers {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Native <details>/<summary> FAQ */
  .faq {
    padding-block: var(--threat-space-section);
    border-block-start: 1px solid var(--line);
  }
  .faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .faq-list {
    display: grid;
    gap: var(--space-2-5);
  }
  .faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding-inline: var(--threat-space-6);
  }
  .faq-item[open] {
    background: var(--surface-raised);
    border-color: var(--border-input);
  }
  .faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-block-size: 3.75rem;
    padding-block: var(--space-3);
    font-weight: var(--weight-medium, 500);
    font-size: var(--font-size-body, 1rem);
    cursor: pointer;
  }
  .faq-item summary::-webkit-details-marker {
    display: none;
  }
  .faq-item summary i {
    font-size: var(--font-size-lead, 1.125rem);
    color: var(--accent-text);
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-out);
  }
  .faq-item[open] summary i {
    transform: rotate(45deg);
  }
  .faq-body {
    padding-block-end: var(--threat-space-5);
    color: var(--muted);
    font-size: var(--font-size-meta);
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--space-3);
  }
  @media (max-width: 56rem) {
    .faq-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Final Conversion Threshold (#join) */
  .join {
    padding-block: var(--threat-space-section);
    border-block-start: 1px solid var(--line);
  }
  .join-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .join p.sub {
    margin-block-start: var(--space-3);
    color: var(--muted);
    max-inline-size: 42ch;
  }
  .join .ok {
    display: none;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--font-size-meta);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--ok-soft);
    color: var(--text);
  }
  .join .ok i {
    color: var(--ok);
    font-size: var(--font-size-heading, 1.5rem);
    line-height: var(--leading-heading, 1.2);
    flex-shrink: 0;letter-spacing:var(--tracking-heading, -0.01em);
  }
  .join.done form {
    display: none;
  }
  .join.done .ok {
    display: flex;
  }
  @media (max-width: 56rem) {
    .join-inner {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Footer */
  footer {
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--space-12);
    padding-block-end: calc(var(--space-12) + var(--safe-bottom) + 3.5rem);
    font-size: var(--font-size-sm);
    color: var(--muted);
  }
  @media (min-width: 48rem) {
    footer {
      padding-block-end: calc(var(--space-12) + var(--safe-bottom));
    }
  }
  footer .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--threat-space-7);
    align-items: start;
  }
  .footer-tagline {
    margin-block-start: var(--space-2);
    color: var(--faint);
  }
  footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  footer nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-min);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    text-decoration: none;
  }
  footer .credits {
    grid-column: 1 / -1;
    padding-block-start: var(--threat-space-6);
    border-block-start: 1px solid var(--line);
    font-size: var(--font-size-xs);
    color: var(--faint);
    max-inline-size: 82ch;
  }
  @media (max-width: 44rem) {
    footer .wrap {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Mobile Thumb-Zone Sticky Action Bar (<=768px) */
  .thumb-bar {
    display: none;
  }
  @media (max-width: 48rem) {
    .thumb-bar {
      position: fixed;
      inset-inline: 0;
      inset-block-end: 0;
      z-index: var(--z-float);
      display: flex;
      gap: var(--space-2-5);
      padding-block-start: var(--space-2-5);
      padding-block-end: max(var(--space-2-5), var(--safe-bottom));
      padding-inline-start: max(var(--threat-gutter), var(--safe-left));
      padding-inline-end: max(var(--threat-gutter), var(--safe-right));
      background: var(--surface-glass);
      border-block-start: 1px solid var(--line);
      transform: translateY(calc(-1 * var(--keyboard-offset, 0px)));
      transition: opacity var(--duration-base) var(--ease-out);
    }
    @supports (backdrop-filter: blur(1px)) {
      .thumb-bar {
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
      }
    }
    .thumb-bar .btn {
      flex: 1;
      min-block-size: var(--touch-min);
      padding-inline: var(--space-3);
      font-size: var(--font-size-sm);
    }
    .thumb-bar.hidden-by-join {
      opacity: 0;
      pointer-events: none;
    }
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  /* 2026-10-16b: content is never hidden while waiting for an observer.
     Hero items rise on load; later items rise once, the moment they enter view. */
  @keyframes tc-rise {
    from { opacity: 0; transform: translateY(var(--motion-distance)); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .js .hero .reveal { animation: tc-rise var(--duration-reveal) var(--ease-out) both; }
    .js .hero .tray.reveal { animation-delay: 120ms; }
    .js .reveal.in { animation: tc-rise var(--duration-reveal) var(--ease-out) both; }
  }
}

@layer overrides {
  @media (hover: hover) and (pointer: fine) {
    a:hover {
      color: var(--text);
      text-decoration-color: var(--text);
    }
    .nav-links a:hover,
    footer nav a:hover {
      color: var(--text);
      background: var(--surface);
    }
    .btn-primary:hover,
    .btn-primary-simple:hover {
      background: var(--accent-hover);
    }
    .btn-primary:hover .btn-well {
      transform: translate(1px, -1px);
    }
    .btn-ghost:hover {
      border-color: var(--text);
      background: var(--surface);
    }
    .icon-btn:hover,
    .clear-btn:hover {
      color: var(--text);
      border-color: var(--text);
      background: var(--surface);
    }
    .chip:hover,
    .test-counter-btn:hover,
    .copy-btn:hover {
      color: var(--text);
      border-color: var(--text);
    }
    .text-link:hover {
      color: var(--accent-text);
    }
    .mobile-dialog-links a:hover {
      background: var(--surface);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
      scroll-behavior: auto;
    }
    .js .reveal {
      animation: none;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .site-nav,
    .thumb-bar {
      background: var(--bg);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --line: var(--border-input);
      --faint: var(--muted);
    }
    .tray-core,
    .incident,
    .tier,
    .faq-item,
    .input {
      border-width: 2px;
    }
  }

  @media (forced-colors: active) {
    .btn,
    .chip,
    .tray-core,
    .incident,
    .tier,
    .cell,
    .faq-item {
      border: 1px solid CanvasText;
    }
    :focus-visible {
      outline: 2px solid CanvasText;
    }
  }
}

/* light theme only (2026-10-15): theme switch hidden */
[data-theme-toggle], #theme-btn, #themeToggle, .theme-toggle { display: none !important; }

/* UX audit 2026-10-15: contrast, links, inputs, community section (unlayered so it wins) */
:root {
--muted: oklch(39% 0.012 95deg);       /* >= 7:1 on bg, surface and recessed */
--faint: oklch(41% 0.012 95deg);       /* >= 7:1 on bg and surface */
--accent-text: oklch(41% 0.15 34deg);  /* 7.4:1 on accent-soft, 7.8:1 on surface, 8.5:1 on bg */
/* 2026-10-16b: one step deeper vermilion so white labels on it hold 7:1 at any size */
--accent: oklch(48% 0.172 34deg);      /* white on it 7.1:1 */
--accent-hover: oklch(44% 0.155 34deg);
--ok: oklch(40% 0.09 160deg);          /* 7.1:1 on ok-soft, 7.9:1 on bg */
--warn: oklch(41% 0.09 72deg);         /* 7.3:1 on warn-soft, 8.1:1 on bg */
}
h2, h3 { font-weight: var(--weight-medium, 500); }
.input, .select { font-size: var(--font-size-body, 1rem); }
.text-link span, .source-link span, .incident-link span, .board-foot a, .faq-body a, footer nav a, footer .credits a, .verdict-meta a {
text-decoration: underline; text-underline-offset: 0.15em;
}
.tray-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.board-foot a { color: var(--accent-text); font-weight: var(--weight-medium, 500); }

.community { padding-block: var(--threat-space-section); border-block-start: 1px solid var(--line); }
/* cafe_edits 2026-10-16: the regulars as a 2x2 definition list, no card chrome */
.seats { margin: var(--threat-space-8) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--threat-space-8) var(--threat-space-10); padding: 0; }
.seat { min-inline-size: 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.seat dt { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); font-weight: var(--weight-medium, 500); }
.seat dt i { font-size: var(--font-size-heading, 1.5rem); line-height: var(--leading-heading, 1.2); color: var(--accent-text); }
.seat dd { margin: var(--space-2) 0 0; font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); color: var(--text); }
.seat-k { font-weight: var(--weight-medium, 500); color: var(--text); }
.community-grid { margin-block-start: var(--threat-space-8); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.rituals, .week-one { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-outer); padding: clamp(1.5rem, 3vw, 2rem); min-inline-size: 0; }
.rituals h3, .week-one h3 { font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); font-weight: var(--weight-medium, 500); }
.ritual-list, .week-list, .rules { margin-block-start: var(--space-4); padding: 0; display: grid; gap: var(--space-4); }
.ritual-list li { list-style: none; display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.ritual-when { font-size: var(--font-size-caption, 0.75rem); line-height: var(--leading-caption, 1.45); font-weight: var(--weight-medium, 500); letter-spacing: 0; color: var(--accent-text); padding-block-start: 0.2rem; }
.ritual-list b, .week-list b { font-weight: var(--weight-medium, 500); }
.ritual-note { margin-block-start: var(--space-4); font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); color: var(--text); }
.week-list { counter-reset: none; }
.week-list li { list-style: none; padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--accent-soft); }
.rules-title { margin-block-start: var(--threat-space-8); }
.rules { gap: var(--space-2); }
.rules li { list-style: none; display: flex; gap: var(--space-2); align-items: flex-start; }
.rules i { color: var(--ok); margin-block-start: 0.3rem; }
.contribute { margin-block-start: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--threat-space-5); border: 1px solid var(--line); border-radius: var(--radius-outer); padding: clamp(1.5rem, 3vw, 2rem); background: var(--accent-soft); }
.contribute h3 { font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); font-weight: var(--weight-medium, 500); }
.contribute p { margin-block-start: var(--space-2); color: var(--text); max-inline-size: 60ch; }
.contribute-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contribute-actions .btn { min-block-size: var(--touch-min, 2.75rem); background: var(--surface-raised); }
.who-runs { margin-block-start: var(--threat-space-6); display: flex; gap: var(--space-3); align-items: flex-start; }
.who-runs i { font-size: var(--font-size-heading, 1.5rem); line-height: var(--leading-heading, 1.2); color: var(--accent-text); }
.who-runs b { font-weight: var(--weight-medium, 500); }
.who-runs p { color: var(--text); }

.join-extra { margin-block-start: var(--space-4); display: grid; gap: var(--space-3); }
.join-extra label { display: block; font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-label, 1.3); font-weight: var(--weight-medium, 500); margin-block-end: var(--space-2); }
.join-extra .opt { font-weight: var(--weight-regular, 400); }
.select { font-family: var(--font-sans); padding-inline-end: var(--threat-space-8); cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.select:focus { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--focus-ring); }
.join-extra .check { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--touch-min, 2.75rem); margin: 0; cursor: pointer; font-weight: var(--weight-regular, 400); font-size: var(--font-size-body, 1rem); }
.check input { inline-size: 1.5rem; block-size: 1.5rem; min-block-size: 0; accent-color: var(--accent); flex-shrink: 0; }
.privacy-note { margin-block-start: var(--space-4); font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); color: var(--text); max-inline-size: 60ch; }

@media (max-width: 48rem) {
.seats, .community-grid { grid-template-columns: minmax(0, 1fr); }
.ritual-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.contribute-actions, .contribute-actions .btn { inline-size: 100%; }
}

/* cafe_edits 2026-10-16 */
.bento-cell--tint { background: var(--surface-recessed); }
.counter-caption { margin-block-start: var(--space-3); }
.view-tabs[hidden], .ok[hidden] { display: none !important; }
.test-counter-btn .inspect-ico { inline-size: 0.875rem; block-size: 0.875rem; }
@media (min-width: 61.25rem) {
.tiers { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); }
}
.tier-head { flex-wrap: wrap; align-items: flex-start; }
.tier-badge { white-space: nowrap; }

.verdict .target { word-break: normal; overflow-wrap: anywhere; }
@media (pointer: coarse) { .counter-telemetry .kbd { display: none; } }
.hero-links { row-gap: var(--space-2); }
/* cafe_edits 2026-10-16b: counter answer head, pass-it-down-the-counter figure */
.chips-label { display: block; color: var(--text); font-family: var(--font-sans); }
.result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-block-end: var(--space-3); }
.result-label { font-size: var(--font-size-small, 0.875rem); font-weight: var(--weight-medium, 500); color: var(--text); }
.result { min-inline-size: 0; }
#panelTech, #panelTech .code-box { min-inline-size: 0; max-inline-size: 100%; }
#techTraceBox { max-block-size: 22rem; overflow: auto; }
.code-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pass { --cup: 4.5rem; margin: var(--threat-space-10) 0 0; container-type: inline-size; position: relative; }
.pass-seats { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; }
/* the counter top, seen from above, and the line a warning travels along */
.pass-seats::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -0.375rem; block-size: calc(var(--cup) + 0.75rem); border-radius: var(--radius-pill); background: var(--surface-recessed); border: 1px solid var(--line); }
.pass-seats::after { content: ""; position: absolute; inset-inline: 10%; inset-block-start: calc(var(--cup) / 2 - 1px); block-size: 2px; background: repeating-linear-gradient(90deg, var(--border-input) 0 0.375rem, transparent 0.375rem 0.75rem); }
.pass-seat { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: var(--space-3); min-inline-size: 0; }
.pass-seat p { max-inline-size: 26ch; margin: var(--space-2) 0 0; font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); color: var(--text); text-wrap: balance; }
.pass-seat h3 { margin: var(--threat-space-5) 0 0; font-size: var(--font-size-lg, 1.25rem); line-height: var(--leading-sub, 1.3); text-wrap: balance; }
.pass-seat a { color: var(--accent-text); font-weight: var(--weight-medium, 500); display: inline-flex; align-items: center; min-block-size: var(--touch-min, 2.75rem); }
.cup { inline-size: var(--cup); block-size: var(--cup); overflow: visible; }
.cup-saucer { fill: var(--surface-raised); stroke: var(--line); stroke-width: 1.5; }
.cup-handle { fill: var(--surface-raised); stroke: var(--text); stroke-width: 2.5; }
.cup-ring { fill: var(--surface-raised); stroke: var(--text); stroke-width: 4; }
.cup-crema { fill: var(--accent); }
.cup-halo { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.pass-seat--open .cup-saucer { fill: transparent; stroke: var(--border-input); stroke-width: 2; stroke-dasharray: 4 5; }
.pass-seat--open h3 { color: var(--accent-text); }
.pass figcaption { margin-block-start: var(--threat-space-8); max-inline-size: 62ch; color: var(--text); }
.pass figcaption b { font-weight: var(--weight-medium, 500); }
/* the note: a small accent disc that travels from seat to seat */
.pass::after { content: ""; position: absolute; inset-block-start: calc(var(--cup) / 2 - 0.4375rem); inset-inline-start: 0; inline-size: 0.875rem; block-size: 0.875rem; margin-inline-start: -0.4375rem; border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent); opacity: 0; z-index: 2; pointer-events: none; transform: translateX(10cqi); }
@media (prefers-reduced-motion: no-preference) {
  .pass::after { animation: tc-note 8s var(--ease-spring) infinite; }
  .cup-halo { animation: tc-halo 8s ease-out infinite; }
  .pass-seat:nth-child(2) .cup-halo { animation-delay: 1.2s; }
  .pass-seat:nth-child(3) .cup-halo { animation-delay: 2.4s; }
  .pass-seat:nth-child(4) .cup-halo { animation-delay: 3.6s; }
  .pass-seat:nth-child(5) .cup-halo { animation-delay: 4.8s; }
}
@keyframes tc-note {
  0% { opacity: 0; transform: translateX(10cqi); }
  4% { opacity: 1; transform: translateX(10cqi); }
  15% { transform: translateX(30cqi); }
  30% { transform: translateX(50cqi); }
  45% { transform: translateX(70cqi); }
  60% { opacity: 1; transform: translateX(90cqi); }
  70%, 100% { opacity: 0; transform: translateX(90cqi); }
}
@keyframes tc-halo {
  0% { opacity: 0; transform: scale(0.6); }
  4% { opacity: 0.35; transform: scale(1.15); }
  20% { opacity: 0; transform: scale(1.9); }
  100% { opacity: 0; transform: scale(1.9); }
}
@media (max-width: 56rem) {
  .pass-seats { grid-template-columns: minmax(0, 1fr); gap: var(--threat-space-6); }
  .pass-seats::before { inset-block: -0.375rem 0; inset-inline: -0.375rem auto; inline-size: calc(var(--cup) + 0.75rem); block-size: auto; }
  .pass-seats::after { display: none; }
  .pass-seat:not(:last-child)::after { content: ""; position: absolute; z-index: -1; inset-inline-start: calc(var(--cup) / 2 - 1px); inset-block-start: calc(var(--cup) / 2); inline-size: 2px; block-size: calc(100% + var(--threat-space-6)); background: repeating-linear-gradient(180deg, var(--border-input) 0 0.375rem, transparent 0.375rem 0.75rem); }
  .pass-seat { display: grid; grid-template-columns: var(--cup) minmax(0, 1fr); column-gap: var(--threat-space-5); align-items: start; text-align: start; padding-inline: 0; }
  .pass-seat .cup { grid-row: 1 / span 3; }
  .pass-seat h3 { margin-block-start: var(--space-2); }
  .pass-seat h3, .pass-seat p { grid-column: 2; max-inline-size: 60ch; text-wrap: pretty; }
  .pass-seat--open { padding-block-end: var(--space-2); }
  .pass::after { display: none; }
}

/* 2026-10-26 homepage declutter: one idea per section, the details one click away.
   Unlayered so it wins; the older component rules above stay until every page uses this markup. */
footer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
footer nav { justify-content: flex-start; column-gap: var(--space-1); }
@media (max-width: 56rem) {
footer .wrap { grid-template-columns: minmax(0, 1fr); }
footer nav { margin-inline-start: calc(-1 * var(--space-3)); }
}

.threat_anchor { display: block; }
.threat_hero-actions { margin-block-start: var(--threat-space-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--threat-space-6); }
.hero .hero-copy:has(.threat_hero-actions) { padding-block-start: clamp(0rem, 4vw, 3rem); }
.threat_counter-note { margin-block-start: var(--space-4); }
.threat_verdict-src { margin-block-start: var(--space-2); font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); color: var(--muted); }
.threat_verdict-src a { color: var(--accent-text); }
.threat_verdict-more { margin-block-start: var(--space-2); }
.threat_verdict-more summary { display: inline-flex; align-items: center; min-block-size: var(--pill-height); font-size: var(--font-size-small, 0.875rem); color: var(--muted); cursor: pointer; }
.threat_verdict-more .verdict-meta { margin-block-start: var(--space-2); }

.threat_stats { margin: var(--threat-space-7) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--threat-space-8); }
.threat_stats li { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
.threat_stats b { font-size: var(--font-size-display); line-height: var(--leading-display, 1.05); letter-spacing: var(--tracking-display, -0.02em); font-weight: var(--weight-semibold, 600); font-variant-numeric: tabular-nums; }
.threat_stats span { font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); color: var(--muted); }
.threat_stats a { display: inline-flex; vertical-align: middle; color: var(--accent-text); padding: var(--space-1); margin: calc(-1 * var(--space-1)); }
.board .board-top { align-items: flex-end; }

.threat_steps { margin: var(--threat-space-8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--threat-space-6) var(--threat-space-8); }
.threat_steps li { position: relative; min-inline-size: 0; }
.threat_steps li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 1.375rem; inset-inline: 3.5rem calc(-1 * var(--threat-space-8) + var(--space-2)); block-size: 1px; background: var(--line); }
.threat_step-icon { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-raised); font-size: var(--font-size-sub, 1.25rem); color: var(--accent-text); }
.threat_steps h3 { margin-block-start: var(--space-3); font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); }
.threat_steps p { margin-block-start: var(--space-1); color: var(--muted); font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); max-inline-size: 34ch; }

.threat_more { margin-block-start: var(--threat-space-8); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.threat_more[open] { background: var(--surface-raised); }
.threat_more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: 3.5rem; padding-inline: var(--threat-space-6); font-weight: var(--weight-medium, 500); cursor: pointer; }
.threat_more summary::-webkit-details-marker { display: none; }
.threat_more summary i, .threat_verdict-more summary i, .threat_join-more summary i { color: var(--accent-text); font-size: var(--font-size-lead, 1.125rem); }
.threat_verdict-more summary::-webkit-details-marker, .threat_join-more summary::-webkit-details-marker { display: none; }
.threat_verdict-more summary, .threat_join-more summary { list-style: none; gap: var(--space-2); }
.threat_verdict-more summary i, .threat_join-more summary i { font-size: var(--font-size-body, 1rem); }
@media (prefers-reduced-motion: no-preference) { .threat_more summary i, .threat_verdict-more summary i, .threat_join-more summary i { transition: transform var(--duration-base) var(--ease-out); } }
.threat_more[open] summary i, .threat_verdict-more[open] summary i, .threat_join-more[open] summary i { transform: rotate(45deg); }
.threat_more-body { padding: 0 var(--threat-space-6) var(--threat-space-6); }
.threat_more-body .sim-head .demo-note { max-inline-size: 52ch; }

.threat_rules { margin: var(--threat-space-7) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.threat_rules li { display: inline-flex; align-items: center; min-block-size: var(--touch-min, 2.75rem); padding-inline: var(--threat-space-5); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-raised); font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); font-weight: var(--weight-medium, 500); }
.principles .contribute { margin-block-start: var(--threat-space-10); background: var(--surface); }
.threat_who { margin-block-start: var(--threat-space-6); font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); color: var(--muted); }
.threat_who a { color: var(--text); }

.threat_tiers { margin: var(--threat-space-8) 0 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-outer); background: var(--surface-raised); }
.threat_tiers li { display: grid; grid-template-columns: minmax(11rem, 1fr) minmax(8rem, 0.8fr) minmax(0, 2fr); gap: var(--space-3) var(--threat-space-8); align-items: baseline; padding: var(--threat-space-6) var(--threat-space-7); }
.threat_tiers li + li { border-block-start: 1px solid var(--line); }
.threat_tier-name h3 { font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); }
.threat_tier-name span { display: block; margin-block-start: var(--space-1); font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); color: var(--muted); }
.threat_tier--featured .threat_tier-name span { color: var(--accent-text); font-weight: var(--weight-medium, 500); }
.threat_tier-price { font-size: var(--font-size-heading, 1.5rem); line-height: var(--leading-heading, 1.2); letter-spacing: var(--tracking-heading, -0.01em); font-weight: var(--weight-semibold, 600); }
.threat_tier-price small { margin-inline-start: var(--space-1); font-size: var(--font-size-small, 0.875rem); font-weight: var(--weight-regular, 400); letter-spacing: 0; color: var(--muted); }
.threat_tiers li p { color: var(--muted); }
.threat_tiers li p a { color: var(--accent-text); white-space: nowrap; }
.threat_tiers-foot { margin-block-start: var(--space-4); font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); color: var(--muted); }

.threat_faq .faq-list { margin-block-start: var(--threat-space-6); max-inline-size: 52rem; gap: 0; border-block-start: 1px solid var(--line); }
.threat_faq .faq-item, .threat_faq .faq-item[open] { background: transparent; border: 0; border-block-end: 1px solid var(--line); border-radius: 0; padding-inline: 0; }
.threat_faq .faq-body { border-block-start: 0; padding-block-start: 0; }
.board .board-track { grid-auto-columns: minmax(min(78vw, 260px), 300px); }
.board .incident { min-block-size: 12rem; }
.board .incident h3 { flex: 1; }

.threat_join { max-inline-size: 36rem; margin-inline: auto; }
.threat_join h2, .threat_join .sub { text-align: center; margin-inline: auto; }
.threat_join #joinBox { margin-block-start: var(--threat-space-7); }
.threat_join-more summary { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--touch-min, 2.75rem); font-size: var(--font-size-small, 0.875rem); color: var(--muted); cursor: pointer; }
.threat_join-more .join-extra { margin-block-start: var(--space-1); }

@media (max-width: 60rem) {
.threat_steps { grid-template-columns: minmax(0, 1fr); }
.threat_steps li:not(:last-child)::after { display: none; }
.threat_steps { gap: var(--space-3); }
.threat_steps li { display: flex; align-items: center; gap: var(--space-3); }
.threat_steps h3 { margin-block-start: 0; }
}
@media (max-width: 48rem) {
.threat_stats { grid-template-columns: minmax(0, 1fr); }
.threat_rules li { font-size: var(--font-size-body, 1rem); }
.threat_stats { gap: var(--space-3); }
.threat_tiers li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--threat-space-5); }
.board .board-step-btns { display: none; }
.threat_more summary, .threat_more-body { padding-inline: var(--space-4); }
}

/* 2026-10-26b: centered, symmetric homepage. The size of the list leads, the list scrolls past,
   numbers count up once, cards lift on hover. All motion sits behind prefers-reduced-motion. */
.threat_center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.threat_hero { padding-block: clamp(3rem, 8vw, 6.5rem) 0; overflow: hidden; }
.threat_hero h1 { max-inline-size: 13ch; margin-inline: auto; font-size: clamp(2.75rem, 7.2vw, 5.75rem); }
.threat_hero p.lede { margin-inline: auto; margin-block-start: var(--threat-space-6); }
.threat_hero .threat_hero-actions { justify-content: center; margin-block-start: var(--threat-space-7); }
.threat_eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-block-end: var(--threat-space-6); padding: var(--space-1-5) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-raised); font-size: var(--font-size-small, 0.875rem); font-weight: var(--weight-medium, 500); color: var(--muted); }
.threat_live { position: relative; inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--radius-pill); background: var(--accent); }

.threat_kinds { margin: var(--threat-space-8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); inline-size: min(100%, 52rem); border: 1px solid var(--line); border-radius: var(--radius-outer); background: var(--surface-raised); box-shadow: var(--shadow-tray); }
.threat_kinds li { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--threat-space-6) var(--space-3); min-inline-size: 0; }
.threat_kinds li + li { border-inline-start: 1px solid var(--line); }
.threat_kinds i { font-size: var(--font-size-heading, 1.5rem); color: var(--accent-text); }
.threat_kinds b { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1; letter-spacing: var(--tracking-display, -0.02em); font-weight: var(--weight-semibold, 600); font-variant-numeric: tabular-nums; }
.threat_kinds span { font-size: var(--font-size-small, 0.875rem); color: var(--muted); }

.threat_ticker { margin-block-start: clamp(3rem, 6vw, 4.5rem); display: flex; overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); -webkit-mask-image: linear-gradient(90deg, transparent, currentColor 8%, currentColor 92%, transparent); mask-image: linear-gradient(90deg, transparent, currentColor 8%, currentColor 92%, transparent); }
.threat_ticker-row { display: flex; flex: none; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-1); list-style: none; }
.threat_ticker-row a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--touch-min, 2.75rem); padding-inline: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-raised); font-family: var(--font-mono); font-size: var(--font-size-small, 0.875rem); color: var(--text); text-decoration: none; white-space: nowrap; }
.threat_tick-kind { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text); font-family: var(--font-sans); font-size: var(--font-size-small, 0.875rem); font-weight: var(--weight-medium, 500); line-height: 1; }

.threat_try { padding-block: var(--threat-space-section); }
.threat_try .tray { inline-size: min(100%, 44rem); text-align: start; }

.threat_h2, .how .section-h2, .pricing .section-h2, .threat_faq .section-h2, .threat_join h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: var(--leading-display, 1.05); letter-spacing: var(--tracking-display, -0.02em); font-weight: var(--weight-semibold, 600); text-align: center; }
.board .threat_stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: var(--threat-space-8); gap: var(--space-4); }
.board .threat_stats li { align-items: center; text-align: center; gap: var(--space-2); padding: var(--threat-space-6) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); }
.board .threat_stats b { color: var(--accent-text); font-size: clamp(2.5rem, 5vw, 4rem); }
.board .threat_stats span { font-size: var(--font-size-body, 1rem); color: var(--text); max-inline-size: 18ch; }
.board .threat_stats a { white-space: nowrap; gap: var(--space-1); align-items: center; margin: 0; padding: var(--space-1) var(--space-2); font-size: var(--font-size-small, 0.875rem); }

.board .threat_cards { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; padding: 0; margin-block-start: var(--threat-space-7); scroll-snap-type: none; }
.board .threat_cards .incident { min-block-size: 11rem; }
.threat_directory { gap: var(--space-3); margin-block-start: var(--threat-space-8); }
.board .board-foot { display: none; }

.how .reveal:has(> .section-h2) { text-align: center; }
.how .threat_steps { text-align: center; }
.how .threat_steps li { display: flex; flex-direction: column; align-items: center; }
.how .threat_steps li:not(:last-child)::after { inset-inline: calc(50% + 2rem) calc(-50% - var(--threat-space-8) / 2 + 2rem); }
.how .threat_rules { justify-content: center; }
.how .threat_more { max-inline-size: 44rem; margin-inline: auto; }

.pricing .reveal:has(> .section-h2) { text-align: center; }
.pricing .threat_tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); border: 0; background: transparent; }
.pricing .threat_tiers li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--threat-space-7) var(--threat-space-6); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); }
.pricing .threat_tiers li + li { border-block-start: 1px solid var(--line); }
.pricing .threat_tier--featured { border-color: var(--accent); box-shadow: var(--shadow-tray); }
.pricing .threat_tier-price { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.pricing .threat_tiers-foot { text-align: center; }

.threat_faq .section-h2 { text-align: center; }
.threat_faq .faq-list { margin-inline: auto; max-inline-size: 44rem; }

.pricing .threat_tiers-foot { margin-inline: auto; }
footer .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
footer nav { justify-content: center; margin-inline: 0; }
footer .brand { justify-content: center; }
footer .credits { inline-size: 100%; max-inline-size: none; }
@media (hover: hover) and (pointer: fine) {
  .threat_ticker-row a:hover { border-color: var(--accent); }
  .board .threat_stats li:hover, .pricing .threat_tiers li:hover, .board .threat_cards .incident:hover { border-color: var(--border-input); box-shadow: var(--shadow-tray); }
}
@keyframes threat-marquee { to { transform: translateX(-100%); } }
@keyframes threat-ping { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .threat_ticker-row { animation: threat-marquee 60s linear infinite; }
  .threat_ticker:hover .threat_ticker-row, .threat_ticker:focus-within .threat_ticker-row { animation-play-state: paused; }
  .threat_live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); animation: threat-ping 1.6s var(--ease-out) infinite; }
  .board .threat_stats li, .pricing .threat_tiers li, .board .threat_cards .incident, .threat_ticker-row a { transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
  .board .threat_stats li:hover, .pricing .threat_tiers li:hover, .board .threat_cards .incident:hover { transform: translateY(-4px); }
  .js .threat_kinds.reveal li, .js .threat_stats.reveal.in li, .js .threat_cards.reveal.in .incident, .js .threat_steps.reveal.in li, .js .threat_tiers.reveal.in li { animation: tc-rise var(--duration-reveal) var(--ease-out) both; }
  .js .threat_kinds li:nth-child(2), .js .threat_stats li:nth-child(2), .js .threat_cards .incident:nth-child(2), .js .threat_steps li:nth-child(2), .js .threat_tiers li:nth-child(2) { animation-delay: 80ms; }
  .js .threat_kinds li:nth-child(3), .js .threat_stats li:nth-child(3), .js .threat_cards .incident:nth-child(3), .js .threat_steps li:nth-child(3), .js .threat_tiers li:nth-child(3) { animation-delay: 160ms; }
  .js .threat_kinds li:nth-child(4), .js .threat_stats li:nth-child(4), .js .threat_cards .incident:nth-child(4) { animation-delay: 240ms; }
  .js .threat_cards .incident:nth-child(5) { animation-delay: 320ms; }
  .js .threat_cards .incident:nth-child(6) { animation-delay: 400ms; }
}
@media (prefers-reduced-motion: reduce) {
  .threat_ticker { overflow-x: auto; }
  .threat_ticker-row[aria-hidden] { display: none; }
}

@media (max-width: 60rem) {
  .board .threat_stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board .threat_cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing .threat_tiers { grid-template-columns: minmax(0, 1fr); }
  .how .threat_steps li { flex-direction: column; gap: var(--space-2); }
  .how .threat_steps { gap: var(--threat-space-6); }
}
@media (max-width: 48rem) {
  .threat_kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .threat_kinds li:nth-child(3) { border-inline-start: 0; }
  .threat_kinds li:nth-child(n+3) { border-block-start: 1px solid var(--line); }
  .board .threat_stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .board .threat_stats li { padding: var(--threat-space-5) var(--space-2); }
  .board .threat_cards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(min(78vw, 260px), 300px); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--space-3); }
}

/* 2026-10-26c: /developers/ page, built from the homepage pieces. */
.threat_api-hero { padding-block-end: clamp(3rem, 6vw, 4.5rem); }
.threat_api-section { padding-block: var(--threat-space-section); border-block-start: 1px solid var(--line); }
.threat_api-grid { margin: var(--threat-space-8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.threat_api-grid li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--threat-space-7) var(--threat-space-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); min-inline-size: 0; }
.threat_api-grid h3 { margin-block-start: var(--space-2); font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); }
.threat_api-url { font-family: var(--font-mono); font-size: var(--font-size-small, 0.875rem); color: var(--accent-text); overflow-wrap: anywhere; }
.threat_api-grid p { font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); color: var(--muted); }
.threat_api-grid p a { color: var(--text); }
.threat_api-code { inline-size: min(100%, 48rem); margin-block-start: var(--threat-space-8); text-align: start; }
.threat_api-code-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.threat_api-code-head:not(:first-child) { margin-block-start: var(--threat-space-6); }
.threat_api-code-head h3 { font-size: var(--font-size-body, 1rem); font-weight: var(--weight-medium, 500); }
.threat_api-code .code-box { margin-block-start: var(--space-3); white-space: pre; overflow-x: auto; }
.threat_api-note { margin-block-start: var(--threat-space-6); max-inline-size: 52ch; font-size: var(--font-size-small, 0.875rem); line-height: var(--leading-small, 1.5); color: var(--muted); }
.threat_api-note code, .threat_api-rules code { font-family: var(--font-mono); font-size: 0.92em; }
.threat_api-rules { margin: var(--threat-space-8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); inline-size: 100%; }
.threat_api-rules li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--threat-space-7) var(--threat-space-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); }
.threat_api-rules b { font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); font-weight: var(--weight-semibold, 600); }
.threat_api-rules span { color: var(--muted); }
.threat_api-lede { margin-block-start: var(--threat-space-5); color: var(--muted); }
.threat_api-facts { margin-block-end: var(--threat-space-7); text-align: start; }
.threat_api-facts code { overflow-wrap: anywhere; }
.threat_center .threat_hero-actions { justify-content: center; }
@media (hover: hover) and (pointer: fine) {
  .threat_api-grid li:hover, .threat_api-rules li:hover { border-color: var(--border-input); box-shadow: var(--shadow-tray); }
}
@media (prefers-reduced-motion: no-preference) {
  .threat_api-grid li, .threat_api-rules li { transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
  .threat_api-grid li:hover, .threat_api-rules li:hover { transform: translateY(-4px); }
}
@media (max-width: 60rem) {
  .threat_api-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .threat_api-rules { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .threat_api-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 2026-10-26d: /usecase/bank.html. Homepage pieces plus a decision log, a fit row and a PoC timeline. */
.threat_bank-hero { padding-block-end: var(--threat-space-section); }
.threat_bank-section { padding-block: var(--threat-space-section); border-block-start: 1px solid var(--line); }
.threat_bank-sub { margin-block-start: var(--space-3); text-align: center; font-size: var(--font-size-lead, 1.125rem); color: var(--muted); }
.threat_bank-trust { margin: var(--threat-space-6) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--threat-space-6); font-size: var(--font-size-small, 0.875rem); font-weight: var(--weight-medium, 500); color: var(--muted); }
.threat_bank-trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.threat_bank-trust i { color: var(--accent-text); font-size: var(--font-size-body, 1rem); }

.threat_bank-log { inline-size: min(100%, 50rem); margin-block-start: clamp(2.5rem, 5vw, 4rem); text-align: start; }
.threat_bank-log-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block-end: var(--space-3); border-block-end: 1px solid var(--line); font-weight: var(--weight-medium, 500); }
.threat_bank-log-head span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); }
.threat_bank-log-head i { color: var(--accent-text); }
.threat_bank-log-tag { padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--font-size-small, 0.875rem); font-weight: var(--weight-regular, 400); color: var(--muted); }
.threat_bank-lines { margin: 0; padding: 0; list-style: none; font-size: var(--font-size-small, 0.875rem); }
.threat_bank-lines li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 6rem 8rem; align-items: center; gap: var(--space-3); min-block-size: var(--touch-min, 2.75rem); border-block-end: 1px solid var(--line); }
.threat_bank-lines li:last-child { border-block-end: 0; }
.threat_bank-lines time { font-family: var(--font-mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.threat_bank-lines code { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.threat_bank-lines li > :last-child { justify-self: end; color: var(--muted); white-space: nowrap; }
.threat_bank-lines a { color: var(--accent-text); font-family: var(--font-mono); }
.threat_bank-v { justify-self: start; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-weight: var(--weight-medium, 500); line-height: 1; }
.threat_bank-v.bad { background: var(--accent-soft); color: var(--accent-text); }
.threat_bank-v.ok { background: var(--surface); color: var(--ok); }
.threat_bank-v.warn { background: var(--surface); color: var(--warn); }

.board .threat_bank-sub + .threat_stats { margin-block-start: var(--threat-space-7); }
.threat_bank-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.threat_bank-3 p, .threat_bank-trust-grid p { font-size: var(--font-size-body, 1rem); }
.threat_bank-trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: 100%; }
.threat_bank-chips { justify-content: center; margin-block-start: var(--threat-space-8); }
.threat_bank-note { margin-block-start: var(--space-4); font-size: var(--font-size-small, 0.875rem); color: var(--muted); }

.threat_bank-fit { margin: var(--threat-space-8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); inline-size: 100%; }
.threat_bank-fit li { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--threat-space-7) var(--threat-space-6); border: 1px dashed var(--border-input); border-radius: var(--radius-card); }
.threat_bank-fit-kind { font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); font-weight: var(--weight-semibold, 600); }
.threat_bank-fit p { color: var(--muted); max-inline-size: 30ch; }
.threat_bank-fit .threat_bank-fit--us { border: 1px solid var(--accent); background: var(--surface-raised); box-shadow: var(--shadow-tray); }
.threat_bank-fit--us .threat_bank-fit-kind { color: var(--accent-text); }
.threat_bank-fit--us p { color: var(--text); }

.threat_bank-poc { position: relative; margin: var(--threat-space-8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); inline-size: 100%; }
.threat_bank-poc::before { content: ""; position: absolute; inset-block-start: 1.0625rem; inset-inline: 12.5%; block-size: 2px; background: var(--line); }
.threat_bank-poc li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.threat_bank-when { position: relative; padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: var(--font-size-small, 0.875rem); font-weight: var(--weight-semibold, 600); }
.threat_bank-poc h3 { margin-block-start: var(--space-2); font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); }
.threat_bank-poc p { color: var(--muted); max-inline-size: 24ch; }
.threat_bank-needs { inline-size: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-block-start: var(--threat-space-8); }
.threat_bank-needs p { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 16rem; max-inline-size: 22rem; padding: var(--threat-space-5) var(--threat-space-6); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); color: var(--muted); }
.threat_bank-needs b { color: var(--text); font-weight: var(--weight-semibold, 600); }
.threat_bank-close { background: var(--surface); }
#list .threat_kinds { margin-block-start: var(--threat-space-7); }
#list .threat_hero-actions { margin-block-start: var(--threat-space-7); }
.threat_bank-latest li { grid-template-columns: 6.5rem minmax(0, 1fr) auto 8rem; }
.threat_bank-latest .threat_tick-kind { justify-self: start; }
a.threat_bank-log-tag { color: var(--accent-text); }

@media (prefers-reduced-motion: no-preference) {
  .js .threat_bank-lines.is-playing li { animation: tc-rise var(--duration-reveal) var(--ease-out) both; }
  .js .threat_bank-lines.is-playing li:nth-child(2) { animation-delay: 350ms; }
  .js .threat_bank-lines.is-playing li:nth-child(3) { animation-delay: 700ms; }
  .js .threat_bank-lines.is-playing li:nth-child(4) { animation-delay: 1050ms; }
  .js .threat_bank-lines.is-playing li:nth-child(5) { animation-delay: 1400ms; }
  .js .threat_bank-poc.reveal.in li, .js .threat_bank-fit.reveal.in li, .js .threat_api-grid.reveal.in li { animation: tc-rise var(--duration-reveal) var(--ease-out) both; }
  .js .threat_bank-poc li:nth-child(2), .js .threat_bank-fit li:nth-child(2), .js .threat_api-grid li:nth-child(2) { animation-delay: 90ms; }
  .js .threat_bank-poc li:nth-child(3), .js .threat_bank-fit li:nth-child(3), .js .threat_api-grid li:nth-child(3) { animation-delay: 180ms; }
  .js .threat_bank-poc li:nth-child(4), .js .threat_api-grid li:nth-child(4) { animation-delay: 270ms; }
  .js .threat_api-grid li:nth-child(5) { animation-delay: 360ms; }
  .js .threat_api-grid li:nth-child(6) { animation-delay: 450ms; }
}
@media (max-width: 60rem) {
  .threat_bank-3, .threat_bank-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .threat_bank-3 li:last-child { grid-column: 1 / -1; }
  .threat_bank-fit { grid-template-columns: minmax(0, 1fr); }
  .threat_bank-poc { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--threat-space-7); }
  .threat_bank-poc::before { display: none; }
}
@media (max-width: 40rem) {
  .threat_bank-3, .threat_bank-trust-grid { grid-template-columns: minmax(0, 1fr); }
  .threat_bank-lines li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding-block: var(--space-2); }
  .threat_bank-lines time { display: none; }
  .threat_bank-lines li > :last-child { grid-column: 1 / -1; justify-self: start; font-size: var(--font-size-small, 0.875rem); }
  .threat_bank-latest li { grid-template-columns: minmax(0, 1fr) auto; }
  .threat_bank-poc { grid-template-columns: minmax(0, 1fr); }
}

/* 2026-10-26e: /usecase/fintech.html. A bank's questions answered in rows, and two pricing cards. */
.threat_qa { margin: var(--threat-space-8) 0 0; padding: 0; list-style: none; inline-size: min(100%, 56rem); border: 1px solid var(--line); border-radius: var(--radius-outer); background: var(--surface-raised); box-shadow: var(--shadow-tray); text-align: start; }
.threat_qa li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3) var(--threat-space-7); align-items: center; padding: var(--threat-space-5) var(--threat-space-6); }
.threat_qa li + li { border-block-start: 1px solid var(--line); }
.threat_qa-q { font-size: var(--font-size-lead, 1.125rem); line-height: var(--leading-sub, 1.3); font-weight: var(--weight-medium, 500); }
.threat_qa-a { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--muted); }
.threat_qa-a i { margin-block-start: 0.125rem; font-size: var(--font-size-lead, 1.125rem); color: var(--accent-text); }
.threat_qa-a b { color: var(--text); font-weight: var(--weight-semibold, 600); }
.pricing .threat_fintech-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 44rem; margin-inline: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js .threat_qa.reveal.in li { animation: tc-rise var(--duration-reveal) var(--ease-out) both; }
  .js .threat_qa li:nth-child(2) { animation-delay: 90ms; }
  .js .threat_qa li:nth-child(3) { animation-delay: 180ms; }
  .js .threat_qa li:nth-child(4) { animation-delay: 270ms; }
  .js .threat_qa li:nth-child(5) { animation-delay: 360ms; }
}
@media (max-width: 48rem) {
  .threat_qa li { grid-template-columns: minmax(0, 1fr); padding: var(--threat-space-5); }
  .pricing .threat_fintech-tiers { grid-template-columns: minmax(0, 1fr); }
}

/* 2026-10-26f: /report/. One form, a report/dispute switch, and the approval steps under it. */
.threat_report { inline-size: min(100%, 40rem); margin-block-start: var(--threat-space-8); text-align: start; }
.threat_report-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-1); margin-block-end: var(--threat-space-6); border-radius: var(--radius-pill); background: var(--surface); }
.threat_report-mode label { position: relative; display: block; cursor: pointer; }
.threat_report-mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.threat_report-mode span { display: flex; align-items: center; justify-content: center; min-block-size: var(--touch-min, 2.75rem); padding-inline: var(--space-3); border-radius: var(--radius-pill); font-size: var(--font-size-small, 0.875rem); font-weight: var(--weight-medium, 500); color: var(--muted); text-align: center; }
.threat_report-mode input:checked + span { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-tab); }
.threat_report-mode input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.threat_report form { display: flex; flex-direction: column; gap: var(--threat-space-5); }
.threat_report .field label { font-size: var(--font-size-small, 0.875rem); color: var(--text); }
.threat_report .help { margin-block-start: var(--space-1-5); }
.threat_report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--threat-space-5) var(--space-4); }
.threat_report .input { padding-inline-end: var(--space-4); }
.threat_textarea { block-size: auto; min-block-size: 7rem; padding-block: var(--space-3); border-radius: var(--radius-sm); resize: vertical; font-family: var(--font-sans); }
.threat_trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.threat_report-submit { align-self: stretch; justify-content: center; }
.threat_report-done { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding-block: var(--threat-space-6); text-align: center; }
.threat_report-done[hidden] { display: none; }
.threat_report form[hidden], .threat_report-mode[hidden] { display: none; }
#rEmail, #rCredit { font-family: var(--font-sans); }
.threat_report-done > i { font-size: var(--font-size-display, 3rem); color: var(--ok); }
.threat_report-done h2 { font-size: var(--font-size-heading, 1.5rem); line-height: var(--leading-heading, 1.2); }
.threat_report-done code { font-family: var(--font-mono); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface); }
.threat_report-done:focus { outline: 2px solid transparent; }
@media (max-width: 40rem) {
  .threat_report-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 2026-10-26h: Anthropic light palette. Ivory grounds, Slate text, Book Cloth accent.
   Book Cloth is too light for small text or white labels, so buttons carry Slate text on it and links,
   small accent text and the focus ring use a deeper Book Cloth (5.4:1 or better on every surface). */
:root {
  --anth-slate-dark: #191919;
  --anth-slate-light: #40403e;
  --anth-cloud-dark: #666663;
  --anth-cloud-light: #bfbfba;
  --anth-ivory-dark: #e5e4df;
  --anth-ivory-medium: #f0f0eb;
  --anth-ivory-light: #fafaf7;
  --anth-book-cloth: #cc785c;
  --anth-book-cloth-hover: #bd6a4e;
  --anth-book-cloth-deep: #8f452c;

  --bg: var(--anth-ivory-medium);
  --surface: var(--anth-ivory-dark);
  --surface-raised: var(--anth-ivory-light);
  --surface-recessed: var(--anth-ivory-dark);
  --surface-glass: color-mix(in oklch, var(--anth-ivory-medium) 88%, transparent);
  --text: var(--anth-slate-dark);
  --muted: var(--anth-slate-light);
  --faint: var(--anth-cloud-dark);
  --line: var(--anth-cloud-light);
  --border-input: var(--anth-cloud-dark);
  --accent: var(--anth-book-cloth);
  --accent-hover: var(--anth-book-cloth-hover);
  --accent-ink: var(--anth-slate-dark);
  --accent-text: var(--anth-book-cloth-deep);
  --accent-soft: color-mix(in oklch, var(--anth-book-cloth) 16%, var(--anth-ivory-light));
  --hero-glow: radial-gradient(ellipse 68% 52% at 72% 24%, color-mix(in oklch, var(--anth-book-cloth) 10%, transparent), transparent 70%);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-text);
  --threat-logo: var(--anth-book-cloth);
}
.brand svg, .bigmark { color: var(--threat-logo); }

/* 2026-10-26i: counter offer to send an unknown item (or a config's unknown servers) for review. */
.threat_audit { display: grid; gap: var(--space-3); margin-block-start: var(--space-4); padding: var(--space-4); border: 1px dashed var(--border-input); border-radius: var(--radius-sm); background: var(--surface-raised); }
.threat_audit-lead { font-size: var(--font-size-small, 0.875rem); }
.threat_audit-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-2); }
.threat_audit .input { block-size: var(--touch-min, 2.75rem); padding-inline-end: var(--space-3); font-size: var(--font-size-small, 0.875rem); }
.threat_audit-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-small, 0.875rem); }
.threat_audit-list .check { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--touch-min, 2.75rem); }
.threat_audit-list code { font-family: var(--font-mono); overflow-wrap: anywhere; }
.threat_audit-label { color: var(--muted); }
.threat_audit .btn { justify-self: start; }
.threat_audit.is-sent .btn, .threat_audit.is-sent .threat_audit-row, .threat_audit.is-sent .threat_audit-list { display: none; }
@media (max-width: 40rem) { .threat_audit-row { grid-template-columns: minmax(0, 1fr); } }

/* Phosphor Icons (regular), MIT License, Copyright (c) 2023 Phosphor Icons, https://phosphoricons.com
   Self-hosted as CSS masks so the <i class="ph ph-NAME"> markup and every i{} rule keep working. */
.ph{display:inline-block;inline-size:1em;block-size:1em;flex:none;vertical-align:-0.125em;background-color:currentColor;-webkit-mask:var(--ph) center/contain no-repeat;mask:var(--ph) center/contain no-repeat}
.ph-arrow-down{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M205.66,149.66l-72,72a8,8,0,0,1-11.32,0l-72-72a8,8,0,0,1,11.32-11.32L120,196.69V40a8,8,0,0,1,16,0V196.69l58.34-58.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E")}
.ph-arrow-right{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E")}
.ph-arrow-up-right{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E")}
.ph-caret-left{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z'/%3E%3C/svg%3E")}
.ph-caret-right{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E")}
.ph-chat-slash{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M53.92,34.62A8,8,0,1,0,42.08,45.38L44.46,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.94,15.94,0,0,0,10.26-3.78l.08-.07L83,208H189.92l12.16,13.38a8,8,0,1,0,11.84-10.76ZM80,192a8,8,0,0,0-5.23,1.95L40,224V64H59L175.37,192ZM232,64V186a8,8,0,0,1-16,0V64H105.79a8,8,0,0,1,0-16H216A16,16,0,0,1,232,64Z'/%3E%3C/svg%3E")}
.ph-check{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E")}
.ph-check-circle{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'/%3E%3C/svg%3E")}
.ph-code{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z'/%3E%3C/svg%3E")}
.ph-coffee{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z'/%3E%3C/svg%3E")}
.ph-copy{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'/%3E%3C/svg%3E")}
.ph-cpu{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M152,96H104a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V104A8,8,0,0,0,152,96Zm-8,48H112V112h32Zm88,0H216V112h16a8,8,0,0,0,0-16H216V56a16,16,0,0,0-16-16H160V24a8,8,0,0,0-16,0V40H112V24a8,8,0,0,0-16,0V40H56A16,16,0,0,0,40,56V96H24a8,8,0,0,0,0,16H40v32H24a8,8,0,0,0,0,16H40v40a16,16,0,0,0,16,16H96v16a8,8,0,0,0,16,0V216h32v16a8,8,0,0,0,16,0V216h40a16,16,0,0,0,16-16V160h16a8,8,0,0,0,0-16Zm-32,56H56V56H200v95.87s0,.09,0,.13,0,.09,0,.13V200Z'/%3E%3C/svg%3E")}
.ph-file-text{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z'/%3E%3C/svg%3E")}
.ph-hand-palm{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M188,88a27.75,27.75,0,0,0-12,2.71V60a28,28,0,0,0-41.36-24.6A28,28,0,0,0,80,44v6.71A27.75,27.75,0,0,0,68,48,28,28,0,0,0,40,76v76a88,88,0,0,0,176,0V116A28,28,0,0,0,188,88Zm12,64a72,72,0,0,1-144,0V76a12,12,0,0,1,24,0v44a8,8,0,0,0,16,0V44a12,12,0,0,1,24,0v68a8,8,0,0,0,16,0V60a12,12,0,0,1,24,0v68.67A48.08,48.08,0,0,0,120,176a8,8,0,0,0,16,0,32,32,0,0,1,32-32,8,8,0,0,0,8-8V116a12,12,0,0,1,24,0Z'/%3E%3C/svg%3E")}
.ph-list{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E")}
.ph-lock-key{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M128,112a28,28,0,0,0-8,54.83V184a8,8,0,0,0,16,0V166.83A28,28,0,0,0,128,112Zm0,40a12,12,0,1,1,12-12A12,12,0,0,1,128,152Zm80-72H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Z'/%3E%3C/svg%3E")}
.ph-magnifying-glass{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E")}
.ph-plugs{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M149.66,138.34a8,8,0,0,0-11.32,0L120,156.69,99.31,136l18.35-18.34a8,8,0,0,0-11.32-11.32L88,124.69,69.66,106.34a8,8,0,0,0-11.32,11.32L64.69,124,41.37,147.31a32,32,0,0,0,0,45.26l5.38,5.37-28.41,28.4a8,8,0,0,0,11.32,11.32l28.4-28.41,5.37,5.38a32,32,0,0,0,45.26,0L132,191.31l6.34,6.35a8,8,0,0,0,11.32-11.32L131.31,168l18.35-18.34A8,8,0,0,0,149.66,138.34Zm-52.29,65a16,16,0,0,1-22.62,0L52.69,181.25a16,16,0,0,1,0-22.62L76,135.31,120.69,180Zm140.29-185a8,8,0,0,0-11.32,0l-28.4,28.41-5.37-5.38a32.05,32.05,0,0,0-45.26,0L124,64.69l-6.34-6.35a8,8,0,0,0-11.32,11.32l80,80a8,8,0,0,0,11.32-11.32L191.31,132l23.32-23.31a32,32,0,0,0,0-45.26l-5.38-5.37,28.41-28.4A8,8,0,0,0,237.66,18.34Zm-34.35,79L180,120.69,135.31,76l23.32-23.31a16,16,0,0,1,22.62,0l22.06,22A16,16,0,0,1,203.31,97.37Z'/%3E%3C/svg%3E")}
.ph-plugs-connected{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M237.66,18.34a8,8,0,0,0-11.32,0l-52.4,52.41-5.37-5.38a32.05,32.05,0,0,0-45.26,0L100,88.69l-6.34-6.35A8,8,0,0,0,82.34,93.66L88.69,100,65.37,123.31a32,32,0,0,0,0,45.26l5.38,5.37-52.41,52.4a8,8,0,0,0,11.32,11.32l52.4-52.41,5.37,5.38a32,32,0,0,0,45.26,0L156,167.31l6.34,6.35a8,8,0,0,0,11.32-11.32L167.31,156l23.32-23.31a32,32,0,0,0,0-45.26l-5.38-5.37,52.41-52.4A8,8,0,0,0,237.66,18.34Zm-116.29,161a16,16,0,0,1-22.62,0L76.69,157.25a16,16,0,0,1,0-22.62L100,111.31,144.69,156Zm57.94-57.94L156,144.69,111.31,100l23.32-23.31a16,16,0,0,1,22.62,0l22.06,22A16,16,0,0,1,179.31,121.37ZM88.57,35A8,8,0,0,1,103.43,29l8,20A8,8,0,0,1,96.57,55ZM24.57,93A8,8,0,0,1,35,88.57l20,8A8,8,0,0,1,49,111.43l-20-8A8,8,0,0,1,24.57,93ZM231.43,163a8,8,0,0,1-10.4,4.46l-20-8A8,8,0,1,1,207,144.57l20,8A8,8,0,0,1,231.43,163Zm-64,58.06A8,8,0,0,1,152.57,227l-8-20A8,8,0,0,1,159.43,201Z'/%3E%3C/svg%3E")}
.ph-plus{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E")}
.ph-question{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'/%3E%3C/svg%3E")}
.ph-shield-check{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0ZM82.34,141.66a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32l-56,56a8,8,0,0,1-11.32,0Z'/%3E%3C/svg%3E")}
.ph-sliders-horizontal{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M40,88H73a32,32,0,0,0,62,0h81a8,8,0,0,0,0-16H135a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16Zm64-24A16,16,0,1,1,88,80,16,16,0,0,1,104,64ZM216,168H199a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16h97a32,32,0,0,0,62,0h17a8,8,0,0,0,0-16Zm-48,24a16,16,0,1,1,16-16A16,16,0,0,1,168,192Z'/%3E%3C/svg%3E")}
.ph-terminal-window{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M128,128a8,8,0,0,1-3,6.25l-40,32a8,8,0,1,1-10-12.5L107.19,128,75,102.25a8,8,0,1,1,10-12.5l40,32A8,8,0,0,1,128,128Zm48,24H136a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm56-96V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Z'/%3E%3C/svg%3E")}
.ph-users-three{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z'/%3E%3C/svg%3E")}
.ph-warning-circle{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E")}
.ph-x{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E")}
.ph-x-circle{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'/%3E%3C/svg%3E")}
.ph-puzzle-piece{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M220.27,158.54a8,8,0,0,0-7.7-.46,20,20,0,1,1,0-36.16A8,8,0,0,0,224,114.69V72a16,16,0,0,0-16-16H171.78a35.36,35.36,0,0,0,.22-4,36.11,36.11,0,0,0-11.36-26.24,36,36,0,0,0-60.55,23.62,36.56,36.56,0,0,0,.14,6.62H64A16,16,0,0,0,48,72v32.22a35.36,35.36,0,0,0-4-.22,36.12,36.12,0,0,0-26.24,11.36,35.7,35.7,0,0,0-9.69,27,36.08,36.08,0,0,0,33.31,33.6,35.68,35.68,0,0,0,6.62-.14V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V165.31A8,8,0,0,0,220.27,158.54ZM208,208H64V165.31a8,8,0,0,0-11.43-7.23,20,20,0,1,1,0-36.16A8,8,0,0,0,64,114.69V72h46.69a8,8,0,0,0,7.23-11.43,20,20,0,1,1,36.16,0A8,8,0,0,0,161.31,72H208v32.23a35.68,35.68,0,0,0-6.62-.14A36,36,0,0,0,204,176a35.36,35.36,0,0,0,4-.22Z'/%3E%3C/svg%3E")}
.ph-package{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.34,44-29.77,16.3-80.35-44ZM128,120,47.66,76l33.9-18.56,80.34,44ZM40,90l80,43.78v85.79L40,175.82Zm176,85.78h0l-80,43.79V133.82l32-17.51V152a8,8,0,0,0,16,0V107.55L216,90v85.77Z'/%3E%3C/svg%3E")}
.ph-fish-simple{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M168,76a12,12,0,1,1-12-12A12,12,0,0,1,168,76Zm42,79.08c-15.08,20.84-37.53,34.88-66.7,41.74-20.08,4.72-43.54,6-70.12,3.93q2.4,17.82,6.72,37.54a8,8,0,0,1-6.1,9.52,7.81,7.81,0,0,1-1.72.19,8,8,0,0,1-7.81-6.29q-4.89-22.36-7.41-42.62-20.22-2.51-42.58-7.41a8,8,0,0,1,3.43-15.63q19.7,4.32,37.5,6.73c-2.09-26.56-.78-50,3.93-70.06C66,83.55,80.05,61.1,100.88,46,115,35.76,140.15,23.64,179.27,24c21.19.21,40.83,4.33,43.81,6.08a8,8,0,0,1,2.83,2.83c1.75,3,5.87,22.59,6.08,43.78C232.21,98.31,228.57,129.44,210,155.08Zm-23.76,2.8A112.07,112.07,0,0,1,98.12,69.74C75.64,94,66.7,132.47,71.36,184.6,123.51,189.28,162,180.35,186.25,157.88ZM212.44,43.56a175.75,175.75,0,0,0-39.22-3.51c-24.34.64-44.71,6.49-60.76,17.39a96,96,0,0,0,86.09,86.1c10.91-16,16.76-36.42,17.4-60.76A175.82,175.82,0,0,0,212.44,43.56Z'/%3E%3C/svg%3E")}
.ph-database{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z'/%3E%3C/svg%3E")}