/* Ratio'd — Playful Neo-Brutalist Utility Stylesheet (cartoon edition) */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700;800&family=Plus+Jakarta+Sans:wght@700;800&display=swap');

:root {
  color-scheme: light;

  --color-bg: #F6F1E7;            /* Warm paper canvas */
  --color-surface: #FFFFFF;        /* Card background */
  --color-surface-muted: #EFE9DC;  /* Muted surface */
  --color-ink: #121212;            /* Text & borders */
  --color-primary: #EA3E2B;        /* Orange-red primary accent */
  --color-yellow: #FFD23F;         /* Sticker yellow */
  --color-blue: #5DBBFF;           /* Sticker blue */
  --color-pink: #FF8FB1;           /* Card tint */
  --color-green: #9BE86D;          /* Card tint */
  --color-badge-alt: #8A8B5C;      /* Muted olive: safe */
  --color-warn: #E8720C;           /* Suspicious */
  --color-text-muted: #4A4741;

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-italic-accent: 'Instrument Serif', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --bw: 3px;                                  /* border width */
  --shadow-hard: 6px 6px 0 var(--color-ink);
  --shadow-hard-lg: 10px 10px 0 var(--color-ink);
  --shadow-hard-sm: 3px 3px 0 var(--color-ink);
  --radius-lg: 18px;
  --radius-md: 10px;
  --radius-sm: 6px;
}

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* The header is sticky, so any #anchor jump would otherwise park the section
   heading underneath it. Applied to every section rather than per-section so a
   newly added section inherits the offset for free. */
section[id] { scroll-margin-top: 110px; }

body {
  background-color: var(--color-bg);
  background-image: radial-gradient(rgba(18, 18, 18, 0.16) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.italic-accent {
  font-family: var(--font-italic-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
  letter-spacing: 0;
}

/* Highlighter marker behind words */
.marker {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 0.15em;
}
.marker::before {
  content: "";
  position: absolute;
  inset: 0.18em -0.1em 0.02em -0.1em;
  background: var(--color-yellow);
  border: var(--bw) solid var(--color-ink);
  border-radius: 10px 6px 12px 4px;
  transform: rotate(-1.5deg);
  z-index: -1;
}
.marker-blue::before { background: var(--color-blue); transform: rotate(1.2deg); }
.marker-pink::before { background: var(--color-pink); transform: rotate(-1deg); }
.marker-green::before { background: var(--color-green); transform: rotate(1.6deg); }

/* Stickers */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: var(--bw) solid var(--color-ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  color: var(--color-ink);
  background: var(--color-surface);
  white-space: nowrap;
  line-height: 1.2;
}
.sticker-yellow { background: var(--color-yellow); }
.sticker-blue { background: var(--color-blue); }
.sticker-red { background: var(--color-primary); color: #fff; }
.sticker-white { background: var(--color-surface); }
.sticker-tilt-left { transform: rotate(-4deg); }
.sticker-tilt-right { transform: rotate(3deg); }
/* Stickers double as links (the author credit), so the browser's default
   underline would break the pill shape. */
a.sticker { text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.sticker:hover { transform: rotate(0deg) translate(-1px, -1px); box-shadow: var(--shadow-hard); }
a.sticker:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }

/* Tactile physical interaction */
.tactile {
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  transition: transform 0.16s cubic-bezier(.34,1.56,.64,1), box-shadow 0.16s ease, background-color 0.16s ease;
}
.tactile:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--color-ink);
}
.tactile:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--color-ink);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  padding: 12px 20px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);
  user-select: none;
}
.btn-lg { font-size: 1.05rem; padding: 16px 26px; }
.btn-block { width: 100%; margin-top: 8px; }
.btn-primary { background-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background-color: #F04A37; }
.btn-secondary { background-color: var(--color-surface); color: var(--color-ink); }
.btn-secondary:hover { background-color: var(--color-yellow); }

.btn-arrow {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  background: var(--color-ink);
  color: var(--color-yellow);
  border-radius: 50%;
  font-size: 1rem;
  transition: transform 0.2s ease;
}
.btn:hover .btn-arrow { transform: translateX(4px) rotate(-10deg); }

.kbd-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  padding: 2px 8px;
}

*:focus-visible {
  outline: 4px solid var(--color-blue);
  outline-offset: 3px;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.section { margin-bottom: 88px; }
.section-head { margin-bottom: 28px; max-width: 720px; }
.section-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 12px 0 10px; }
.section-sub { color: var(--color-text-muted); font-size: 1.05rem; }

/* Roadmap note under the install section's subtitle. Uses the same sticker +
   hard-shadow language as the rest of the page so it reads as part of the
   design rather than a bolted-on announcement, and wraps to full width so a
   long sentence never sits awkwardly beside the tag. */
.platform-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 16px;
  background-color: var(--color-surface-muted);
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--color-ink);
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.platform-note .sticker { flex-shrink: 0; }
.platform-note strong { color: var(--color-ink); }

/* Store-version notice dialog

   A notice, not a gate. It uses the same neo-brutalist language as the rest of
   the page: hard ink borders, offset shadows, the sticker and tactile button
   primitives. The backdrop is a flat translucent ink wash rather than a blur,
   so the card stays the only thing that reads as raised.

   Animations are gated on prefers-reduced-motion below, and the dialog is
   marked hidden in the markup so it never flashes before its script runs. */
.store-notice-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(18, 18, 18, 0.62);
  animation: store-notice-fade 0.18s ease;
}
.store-notice-backdrop[hidden] { display: none; }

.store-notice-card {
  position: relative;
  width: 100%;
  max-width: 30rem;
  padding: 26px 26px 22px;
  background-color: var(--color-surface);
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 var(--color-ink);
  animation: store-notice-pop 0.2s cubic-bezier(.34, 1.56, .64, 1);
}

.store-notice-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: 2px solid var(--color-ink);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.store-notice-close:hover { background-color: var(--color-yellow); transform: rotate(6deg); }
.store-notice-close:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.store-notice-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-right: 34px; /* clears the absolute close button */
}
.store-notice-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.store-notice-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
}
.store-notice-body p { font-size: 0.94rem; line-height: 1.6; margin-bottom: 10px; }
.store-notice-aside {
  padding: 10px 12px;
  background-color: var(--color-surface-muted);
  border-left: 4px solid var(--color-blue);
  border-radius: 0 6px 6px 0;
  font-size: 0.86rem !important;
  color: var(--color-text-muted);
}
.store-notice-actions { margin-top: 16px; }
.store-notice-dismiss {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}
.store-notice-dismiss:hover { color: var(--color-primary); }
.store-notice-dismiss:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

@keyframes store-notice-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes store-notice-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .store-notice-backdrop, .store-notice-card { animation: none; }
  .store-notice-close:hover { transform: none; }
}
@media (max-width: 600px) {
  .store-notice-card { padding: 22px 18px 18px; }
  .store-notice-title { font-size: 1.2rem; }
  .store-notice-head { flex-wrap: wrap; gap: 8px; }
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  border-bottom: var(--bw) solid var(--color-ink);
  background-color: var(--color-surface);
}
.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.logo-group {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  background-color: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  border: var(--bw) solid var(--color-ink);
  border-radius: 12px;
  box-shadow: var(--shadow-hard-sm);
  transform: rotate(-6deg);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.logo-group:hover .logo-mark { transform: rotate(6deg) scale(1.08); }
.brand-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  text-decoration: none;
  padding: 8px 12px;
  border: var(--bw) solid transparent;
  border-radius: 999px;
  transition: all 0.15s ease;
}
.nav-link:hover {
  background: var(--color-yellow);
  border-color: var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
  transform: translate(-1px, -1px) rotate(-1.5deg);
}

.channel-selector {
  display: flex;
  gap: 4px;
  background-color: var(--color-surface-muted);
  padding: 4px;
  border: var(--bw) solid var(--color-ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
}
.channel-tab {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 16px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}
.channel-tab:hover { background: rgba(18, 18, 18, 0.08); }
.channel-tab.active {
  background-color: var(--color-ink);
  color: var(--color-yellow);
  border-color: var(--color-ink);
}
/* The Email/SMS selector moved out of the site header (it was navigation
   furniture for a control that actually belongs to the analyzer) and into the
   telemetry pane, where it now labels the textarea it changes. */
.channel-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.channel-row .preset-label { margin: 0; }

/* Ticker */
.ticker {
  overflow: hidden;
  background: var(--color-yellow);
  border-bottom: var(--bw) solid var(--color-ink);
  padding: 10px 0;
  margin-bottom: 56px;
}
.ticker-track {
  display: flex;
  gap: 40px;
  width: max-content;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  animation: ticker 28s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Hero */
.hero-section {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 96px;
}
.hero-kicker { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-headline {
  font-size: clamp(2.8rem, 6vw, 5rem);
  margin-bottom: 22px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.hero-subtitle {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin-bottom: 30px;
}
.hero-cta-group { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }

.system-status-banner {
  background-color: var(--color-ink);
  color: #fff;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 var(--color-primary);
}
.system-status-banner:hover { box-shadow: 8px 8px 0 var(--color-primary); }
.system-status-banner .sticker { box-shadow: none; }
.status-left { display: flex; align-items: center; gap: 10px; }

/* Hero roadmap note. Sits directly under the status banner and mirrors its
   flex layout, but uses the muted surface rather than the dark banner fill so
   two heavy blocks do not stack. Kept in the hero because the hero is the only
   section every visitor reads. */
.hero-platform-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 18px;
  background-color: var(--color-surface);
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 0 var(--color-ink);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.hero-platform-note .sticker { flex-shrink: 0; }
.hero-platform-note strong { color: var(--color-ink); }
.status-pulse {
  display: inline-block;
  width: 12px; height: 12px;
  background-color: var(--color-primary);
  border: 2px solid #fff;
  border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234, 62, 43, 0.6); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(234, 62, 43, 0); }
}

/* Hero visual */
.hero-visual { position: relative; display: flex; justify-content: center; }
.mascot-card {
  position: relative;
  background: var(--color-surface);
  width: min(100%, 400px);
  transform: rotate(2deg);
  overflow: visible;
  z-index: 2;
}
.mascot-card:hover { transform: rotate(0deg) translate(-2px, -2px); }
.mascot-card-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: var(--bw) solid var(--color-ink);
  background: var(--color-surface-muted);
  border-radius: calc(var(--radius-lg) - var(--bw)) calc(var(--radius-lg) - var(--bw)) 0 0;
}
.mascot-card-title {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}
.mascot-img {
  width: 100%;
  height: auto;
  padding: 18px;
  /* Multiply knocks out the PNG's white backdrop against the cream card */
  mix-blend-mode: multiply;
  }
/* The hero artwork is a flat JPEG, so js/mascot-eyes.js lays a live SVG eye
   layer over it. The wrapper is the positioning context, and it carries the
   bob so the layer and the artwork can never desync - the image above opts
   out of the animation, since moving both independently would shear them. */
.mascot-figure {
  position: relative;
  animation: bob 4s ease-in-out infinite;
}
.mascot-eyes-layer {
  position: absolute;
  /* The image's CONTENT box, i.e. inside its 18px padding. Pinning to 0
     instead would slide both eyes off the painted ones by that same 18px. */
  inset: 18px;
  width: auto;
  height: auto;
  pointer-events: none;
  /* Above the artwork, below the floating stickers. */
  z-index: 1;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(-1.5deg); }
}

.dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-ink);
  display: inline-block;
}
.dot-red { background: var(--color-primary); }
.dot-yellow { background: var(--color-yellow); }
.dot-blue { background: var(--color-blue); }

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-ink); color: #fff;
  padding: 12px 20px; font-weight: 700; text-decoration: none;
  border-bottom-right-radius: var(--radius-sm);
}
.skip-link:focus { left: 0; }

/* Modifier is redundant with the base rule but keeps the markup self-describing. */
.starburst-yellow { background: var(--color-yellow); }
.hero-copy { min-width: 0; }

/* ── ShapeWaves hero background (vanilla WebGPU) ──────────────────────────
   The canvas draws only its marks over a transparent void, so the page's own
   paper + halftone dot-grid shows through and the hero keeps the same texture
   as the rest of the site. (It deliberately has no `background` of its own -
   an opaque backdrop here is what previously forced a second, mismatched grid
   to be stacked on top and moire'd against the shapes.)

   Two things keep the hero copy readable on top of the effect:
     1. the layer is faint - `opacity: 0.34` here on top of CFG.ink in the JS;
     2. a soft paper scrim sits under the copy and fades out towards the
        mascot card, which is a solid surface anyway.
   Without WebGPU the canvas is removed by JS and the hero falls back to
   exactly the flat paper + dot-grid look. */
.hero-section { position: relative; isolation: isolate; }
.shape-waves {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 900ms ease;
}
.shape-waves[data-ready='true'] { opacity: 0.34; }
/* Readability scrim: a gradient veil, not a hard panel, so the shapes are
   still felt on the left but never fight the subtitle. */
.hero-section::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    var(--color-bg) 0%,
    rgba(246, 241, 231, 0.82) 26%,
    rgba(246, 241, 231, 0.48) 44%,
    rgba(246, 241, 231, 0) 66%);
}
.hero-section > .hero-copy,
.hero-section > .hero-visual { position: relative; z-index: 2; }
.hero-blob { z-index: 2; }
.starburst {
  position: absolute;
  top: -26px; right: -26px;
  width: 104px; height: 104px;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--color-ink);
  background: var(--color-yellow);
  clip-path: polygon(50% 0%, 61% 12%, 76% 6%, 80% 22%, 96% 26%, 90% 41%, 100% 50%, 90% 59%, 96% 74%, 80% 78%, 76% 94%, 61% 88%, 50% 100%, 39% 88%, 24% 94%, 20% 78%, 4% 74%, 10% 59%, 0% 50%, 10% 41%, 4% 26%, 20% 22%, 24% 6%, 39% 12%);
  filter: drop-shadow(3px 3px 0 var(--color-ink));
  animation: spin-slow 18s linear infinite;
  z-index: 3;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.sticker-float-1 { position: absolute; left: -30px; bottom: 70px; transform: rotate(-8deg); z-index: 3; }
.sticker-float-2 { position: absolute; right: -22px; bottom: 26px; transform: rotate(5deg); z-index: 3; }

.hero-blob {
  position: absolute;
  border: var(--bw) solid var(--color-ink);
  z-index: 1;
}
.hero-blob-yellow {
  width: 140px; height: 140px;
  background: var(--color-yellow);
  border-radius: 46% 54% 60% 40% / 50% 40% 60% 50%;
  top: -30px; left: 4%;
  animation: wobble 9s ease-in-out infinite;
}
.hero-blob-blue {
  width: 110px; height: 110px;
  background: var(--color-blue);
  border-radius: 58% 42% 40% 60% / 40% 60% 40% 60%;
  bottom: -20px; right: 6%;
  animation: wobble 11s ease-in-out infinite reverse;
}
@keyframes wobble {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  33% { transform: translate(8px, -10px) rotate(12deg); }
  66% { transform: translate(-6px, 6px) rotate(-8deg); }
}

/* Section header tag */
.section-header-tag {
  display: inline-block;
  background-color: var(--color-ink);
  color: var(--color-yellow);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: 999px;
  transform: rotate(-2deg);
  border: var(--bw) solid var(--color-ink);
  box-shadow: 3px 3px 0 var(--color-primary);
}

/* Pipeline */
.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.pipeline-card {
  background-color: var(--color-surface);
  padding: 28px 22px 22px;
  position: relative;
  overflow: visible;
}
.pipeline-card:nth-child(odd) { transform: rotate(-1deg); }
.pipeline-card:nth-child(even) { transform: rotate(1deg); }
.pipeline-card:hover { transform: rotate(0) translate(-2px, -2px); }

.card-tint-yellow { background: #FFF3C4; }
.card-tint-blue { background: #DDF1FF; }
.card-tint-pink { background: #FFE1EA; }
.card-tint-green { background: #E4F8D3; }

.stage-badge {
  position: absolute;
  top: -20px; left: 18px;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--color-ink);
  color: var(--color-yellow);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  border: var(--bw) solid var(--color-ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--color-primary);
}
.pipeline-card.active-stage {
  background-color: var(--color-yellow);
  box-shadow: var(--shadow-hard-lg);
  transform: rotate(0) scale(1.02);
  animation: shake 0.45s ease-in-out;
}
.pipeline-card.active-stage .stage-badge { background: var(--color-primary); color: #fff; }
@keyframes shake {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -2deg; }
  75% { rotate: 2deg; }
}
.stage-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin: 6px 0 4px 44px;
}
.stage-title { font-size: 1.5rem; margin-bottom: 8px; }
.stage-desc { font-size: 0.92rem; color: var(--color-text-muted); }

/* Console */
.console-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 96px;
}
.console-pane {
  background-color: var(--color-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.console-pane:hover { transform: none; box-shadow: var(--shadow-hard); }

.pane-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: var(--bw) solid var(--color-ink);
  background: repeating-linear-gradient(-45deg, var(--color-yellow) 0 10px, #FFE27A 10px 20px);
}
.pane-bar-dark {
  background: repeating-linear-gradient(-45deg, var(--color-blue) 0 10px, #86CDFF 10px 20px);
}
.pane-dots { display: flex; gap: 6px; }
.pane-title {
  font-size: 1.05rem;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  flex: 1;
}
.pane-bar .sticker { box-shadow: none; }
.pane-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }

/* Presets */
.preset-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.preset-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.btn-preset {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 12px;
  background-color: var(--color-surface);
  color: var(--color-ink);
  border: var(--bw) solid var(--color-ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  transition: all 0.14s cubic-bezier(.34,1.56,.64,1);
}
.btn-preset:hover {
  background-color: var(--color-blue);
  transform: translate(-1px, -1px) rotate(-2deg);
  box-shadow: 4px 4px 0 var(--color-ink);
}
.btn-preset:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--color-ink); }
.btn-preset-ghost { background: var(--color-surface-muted); }
.btn-preset-ghost:hover { background: var(--color-primary); color: #fff; }

/* Textarea */
.telemetry-input-group { position: relative; margin-bottom: 14px; }
.telemetry-textarea {
  width: 100%;
  height: 250px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.6;
  padding: 18px;
  background-color: #FFFDF7;
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(18, 18, 18, 0.07) 27px 28px);
  background-attachment: local;
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: inset 4px 4px 0 rgba(18, 18, 18, 0.08);
  resize: vertical;
  color: var(--color-ink);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.telemetry-textarea:focus {
  background-color: #fff;
  outline: none;
  box-shadow: inset 4px 4px 0 rgba(18, 18, 18, 0.08), 0 0 0 4px var(--color-yellow), 0 0 0 7px var(--color-ink);
}
.telemetry-textarea::placeholder { color: #9A958B; }
.textarea-corner {
  position: absolute;
  top: -12px; right: 14px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  background: var(--color-ink);
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.1em;
}

.privacy-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}
.privacy-counts {
  color: var(--color-badge-alt);
  font-weight: 700;
  line-height: 1.4;
}

.privacy-card {
  background-color: var(--color-surface-muted);
  border: var(--bw) dashed var(--color-ink);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
}
.privacy-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.shield-icon {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  background: var(--color-green);
  border: 2px solid var(--color-ink);
  border-radius: 8px;
}

/* Verdict */
.verdict-box {
  display: flex;
  align-items: center;
  gap: 22px;
  background-color: var(--color-surface-muted);
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 26px;
  position: relative;
}
.verdict-box.pop { animation: pop 0.55s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop {
  0% { transform: scale(0.96) rotate(-1deg); }
  60% { transform: scale(1.03) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}
.gauge-svg-container { width: 120px; height: 120px; position: relative; flex-shrink: 0; }
.gauge-svg-container svg { width: 100%; height: 100%; display: block; }
.gauge-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  pointer-events: none;
}
.verdict-info { flex: 1; min-width: 0; }
.verdict-badge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  border: var(--bw) solid var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
  display: inline-block;
  margin-bottom: 8px;
  color: #fff;
  transform: rotate(-2deg);
  transform-origin: left center;
}
.verdict-high_risk { background-color: var(--color-primary); }
.verdict-suspicious { background-color: var(--color-warn); }
.verdict-safe { background-color: var(--color-badge-alt); }
.verdict-score-num {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.score-denom {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-left: 4px;
  letter-spacing: 0;
}
.verdict-explanation { font-size: 0.9rem; color: var(--color-text-muted); margin-top: 6px; }

/* Labeled boxes */
.labeled-box { position: relative; margin-bottom: 26px; padding-top: 12px; }
.labeled-box:last-child { margin-bottom: 0; }
.box-label {
  position: absolute;
  top: 0; left: 16px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--color-ink);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  border: 2px solid var(--color-ink);
  transform: rotate(-1.5deg);
}
.box-label-yellow { background: var(--color-yellow); color: var(--color-ink); transform: rotate(1.5deg); }

.threat-inspector-box {
  background-color: #fff;
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: 24px 18px 18px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.75;
  min-height: 130px;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: inset 4px 4px 0 rgba(18, 18, 18, 0.06);
}
.placeholder-text { color: #9A958B; }

.highlighted-flag {
  background-color: var(--color-yellow);
  border: 2px solid var(--color-ink);
  font-weight: 800;
  color: var(--color-ink);
  padding: 0 5px;
  border-radius: 6px;
  cursor: help;
  position: relative;
  box-shadow: 2px 2px 0 var(--color-primary);
  display: inline-block;
  transform: rotate(-0.6deg);
}

/* Checklist */
.checklist-box {
  background-color: #fff;
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: 22px 18px 12px;
}
.checklist-items { list-style: none; }
.checklist-items li {
  font-size: 0.92rem;
  padding: 10px 0;
  border-bottom: 2px dashed rgba(18, 18, 18, 0.18);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.checklist-items li:last-child { border-bottom: none; }
.check-bullet {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--color-ink);
  background: var(--color-green);
  border: 2px solid var(--color-ink);
  border-radius: 6px;
  box-shadow: 2px 2px 0 var(--color-ink);
  margin-top: 1px;
}

/* Features & tiers */
.feature-grid, .tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 28px;
}
.feature-card, .tier-card {
  background-color: var(--color-surface);
  padding: 28px 26px;
  position: relative;
}
.feature-card h3, .tier-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.feature-card p, .tier-card p { font-size: 0.94rem; color: var(--color-text-muted); }
.feature-card:nth-child(2) { transform: rotate(0.8deg); }
.feature-card:nth-child(3) { transform: rotate(-0.8deg); }
.feature-card:hover, .tier-card:hover { transform: rotate(0) translate(-2px, -2px); }

.feature-icon {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--color-ink);
  border-radius: 14px;
  box-shadow: var(--shadow-hard-sm);
  margin-bottom: 18px;
  color: var(--color-ink);
  transform: rotate(-4deg);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.feature-card:hover .feature-icon { transform: rotate(6deg) scale(1.08); }
.feature-icon-yellow { background: var(--color-yellow); }
.feature-icon-blue { background: var(--color-blue); }
.feature-icon-pink { background: var(--color-pink); }

.card-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.tier-card { padding-top: 34px; }
.tier-current { background: #FFF3C4; }
.tier-step {
  position: absolute;
  top: -18px; left: 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  background: var(--color-surface);
  border: var(--bw) solid var(--color-ink);
  border-radius: 999px;
  padding: 4px 14px;
  box-shadow: var(--shadow-hard-sm);
}
.tier-current .tier-step { background: var(--color-ink); color: var(--color-yellow); }
.sticker-corner {
  position: absolute;
  top: -14px; right: 18px;
  transform: rotate(4deg);
}

/* Footer */
.footer {
  border-top: var(--bw) solid var(--color-ink);
  background: var(--color-surface);
  padding: 32px 0;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand .logo-mark { width: 38px; height: 38px; font-size: 1.15rem; }
.footer-links { display: flex; gap: 4px; flex-wrap: wrap; }
.footer-muted { color: var(--color-text-muted); }
/* Author credit inside muted footer text: needs a visible affordance without
   fighting the muted colour it sits in. */
.footer-credit {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-credit:hover { color: var(--color-primary); }
/* Footer "Show extension promo" control. It borrows .nav-link for typography
   and hover, so it only has to neutralise the button defaults a <button>
   brings with it (UA border/background/font/cursor). */
.nav-link-btn {
  background: none;
  border-color: transparent;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}
.nav-link-btn[hidden] { display: none; }

/* ============================================================
   Extension install flow
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.btn-sm { padding: 9px 16px; font-size: 0.85rem; }

.install-section { background: var(--color-surface); border-top: var(--bw) solid var(--color-ink); }
.install-grid { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; }
.install-aside, .install-main { min-width: 0; }

.install-card {
  position: relative;
  background: var(--color-bg);
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  padding: 26px 22px 22px;
  text-align: center;
}
.install-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
.install-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; }
.install-sub {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600;
  color: var(--color-text-muted); margin: 6px 0 18px;
}
.install-meta { list-style: none; margin-top: 18px; text-align: left; display: flex; flex-direction: column; gap: 9px; }
.install-meta li { display: flex; gap: 9px; font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.45; }
.bullet { color: #4A7C2F; font-weight: 800; flex-shrink: 0; }

/* Intro line above the manual-install step list. It exists because the list is
   no longer the primary route - the store button above it is - so without this
   the page would show five manual steps with no indication they were optional. */
.steps-intro {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.steps-intro strong { color: var(--color-ink); }

/* Chrome Web Store button.
   The store badge is an <img>, so the button has to lay out as a flex row with a
   fixed-size mark; a plain .btn is inline-block and would let the mark scale with
   the line height. The badge carries its own light tile, so it stays legible on
   the ink background without an extra border. */
.btn-store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--color-ink);
  color: #fff;
}
.btn-store:hover { background-color: #2C2C2C; }
.btn-store:focus-visible { outline: var(--bw) solid var(--color-yellow); outline-offset: 2px; }
.btn-store-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 4px;
}
.btn-store-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.btn-store-text small { font-size: 0.68rem; font-weight: 600; opacity: 0.8; letter-spacing: 0.02em; }
.btn-store-text strong { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; }
.btn-store-sm .btn-store-mark { width: 18px; height: 18px; }
.btn-store-sm .btn-store-text small { font-size: 0.6rem; }
.btn-store-sm .btn-store-text strong { font-size: 0.82rem; }

/* Secondary "install from ZIP" action, kept for the manual / developer path. */
.install-alt {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
}
.install-alt:hover { color: var(--color-ink); text-decoration: underline; }

.alt-link {
  display: block; margin-top: 16px; text-align: center;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  color: var(--color-text-muted); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.alt-link:hover { color: var(--color-ink); border-bottom-color: var(--color-ink); }

/* progress */
.steps-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.steps-progress { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 200px; }
.progress-track {
  flex: 1; height: 14px; border: var(--bw) solid var(--color-ink);
  border-radius: 999px; background: var(--color-surface); overflow: hidden;
}
.progress-fill {
  display: block; height: 100%; width: 0%;
  background: repeating-linear-gradient(45deg, var(--color-yellow) 0 8px, var(--color-primary) 8px 16px);
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.progress-text { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.btn-link {
  background: none; border: 0; cursor: pointer; font-family: var(--font-mono);
  font-size: 0.76rem; font-weight: 700; color: var(--color-text-muted);
  text-decoration: underline; padding: 4px; white-space: nowrap;
}
.btn-link:hover { color: var(--color-ink); }

/* steps */
.isteps { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.istep {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--color-bg);
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 0 var(--color-ink);
  padding: 18px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
}
.istep:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-ink); }
.istep.is-done { background: #EAF9E0; }

.istep-check { position: relative; flex-shrink: 0; cursor: pointer; margin-top: 2px; }
.istep-check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.istep-box {
  display: block; width: 24px; height: 24px;
  border: var(--bw) solid var(--color-ink); border-radius: 6px;
  background: var(--color-surface); transition: background 0.15s;
}
.istep-check input:checked + .istep-box {
  background: var(--color-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23121212' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size: 15px; background-position: center; background-repeat: no-repeat;
}
.istep-check input:focus-visible + .istep-box { outline: 3px solid var(--color-blue); outline-offset: 2px; }

.istep-body { min-width: 0; }
.istep-body h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 800; margin-bottom: 4px; }
.istep-body > p { font-size: 0.88rem; color: var(--color-text-muted); }
.istep-body code, .faq-item code {
  font-family: var(--font-mono); font-size: 0.85em; font-weight: 600;
  background: var(--color-surface-muted); border: 1px solid var(--color-ink);
  padding: 1px 5px; border-radius: 4px; color: var(--color-ink);
}
.istep-note { margin-top: 8px !important; font-size: 0.78rem !important; }
.istep-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.copy-row {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  background: var(--color-surface); border: var(--bw) dashed var(--color-ink);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.copy-code { font-family: var(--font-mono); font-size: 0.88rem; font-weight: 700; flex: 1; }

.mini-steps { margin: 10px 0 0 20px; display: flex; flex-direction: column; gap: 7px; }
.mini-steps li { font-size: 0.86rem; color: var(--color-text-muted); }
.mini-steps strong { color: var(--color-ink); font-weight: 700; }

/* faq */
.faq { margin-top: 28px; }
.faq-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; margin-bottom: 14px; }
.faq-item {
  border: var(--bw) solid var(--color-ink); border-radius: var(--radius-md);
  background: var(--color-bg); margin-bottom: 10px;
  box-shadow: 4px 4px 0 var(--color-ink);
}
.faq-item summary {
  cursor: pointer; padding: 14px 18px;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700;
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); font-weight: 800; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] { background: var(--color-surface); }
.faq-item p { padding: 0 18px 16px; font-size: 0.86rem; color: var(--color-text-muted); }
/* ---- promo bar (dismissible) ---- */
.promo-bar {
  background: var(--color-yellow);
  border-bottom: var(--bw) solid var(--color-ink);
  position: relative; z-index: 90;
}
.promo-bar[hidden] { display: none; }
.promo-inner { display: flex; align-items: center; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.promo-badge {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.08em; background: var(--color-ink); color: var(--color-yellow);
  padding: 3px 8px; border-radius: 4px; flex-shrink: 0;
}
.promo-text { font-size: 0.88rem; flex: 1; min-width: 0; }
.promo-actions { display: flex; gap: 8px; flex-shrink: 0; }
.promo-close {
  flex-shrink: 0; width: 30px; height: 30px; cursor: pointer;
  background: transparent; border: var(--bw) solid var(--color-ink); border-radius: 50%;
  font-size: 1.15rem; line-height: 1; font-weight: 700; color: var(--color-ink);
  display: grid; place-items: center; transition: background 0.15s, transform 0.15s;
}
.promo-close:hover { background: var(--color-primary); color: #fff; transform: rotate(90deg); }

/* ---- Mascot eye-follow (port of Framer's "Eye Follow Button") ----
   A dependency-free port of the Framer component of the same name, wearing
   the Ratio'd shield mascot. js/mascot-eyes.js moves the two pupils toward
   the cursor with a spring; everything here is the static art around them.

   The mascot renders in the hero card, where the eyes are an overlay on the
   painted artwork. It used to also be a floating button in this corner; see
   the .store-fab block below for what holds the corner now.
   replaces the old plain .dl-fab, so there is exactly one floating control
   and no chance of two of them fighting over a corner on a small screen. */

/* ---- Floating install action (bottom-right) ----
   The site's single floating control, pinned bottom-RIGHT and visible from
   first paint, so it cannot be lost behind JS being blocked or slow.

   This replaced the mascot FAB that previously held this corner. The mascot is
   NOT removed - it still lives in the hero card, where js/mascot-eyes.js
   overlays its eyes on the painted artwork. What went away is the floating
   duplicate of an install link that the nav, the footer and the install card
   already provide, and which alone still pointed at the manual ZIP flow
   instead of the store. */

.store-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  background: var(--color-ink);
  color: #fff;
  text-decoration: none;
  border: var(--bw) solid var(--color-ink);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--color-primary);
  font-family: var(--font-display);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease;
}
.store-fab:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--color-primary); }
.store-fab:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-primary); }
.store-fab:focus-visible { outline: var(--bw) solid var(--color-yellow); outline-offset: 3px; }
.store-fab-mark { width: 20px; height: 20px; flex-shrink: 0; border-radius: 4px; }
.store-fab-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.store-fab-text small { font-size: 0.6rem; font-weight: 600; opacity: 0.75; letter-spacing: 0.03em; }
.store-fab-text strong { font-size: 0.88rem; font-weight: 800; letter-spacing: -0.01em; }

/* --- Mascot parts -------------------------------------------------------
   Plain SVG presentation attributes in the brand palette: no new tokens, and
   no new palette. The transforms written by JS land on the pupil and glint
   only, so nothing here fights the tracking loop or the blink. */
.mascot-shield { fill: var(--color-primary); stroke: var(--color-ink); stroke-width: 5; stroke-linejoin: round; }
.mascot-shield-shade { fill: #C22C1C; }
.mascot-brow { stroke: var(--color-ink); stroke-width: 7; stroke-linecap: round; fill: none; }
/* The 4 here is in the FAB's 120-unit viewBox. The hero overlay is drawn in the
   artwork's 760-unit space and sets its own stroke-width per eye (the measured
   width of the painted ring), so a shared value would be off by 6x. */
.mascot-sclera { fill: #FFFFFF; stroke: var(--color-ink); stroke-width: 4; }
.mascot-pupil { fill: var(--color-ink); }
.mascot-glint { fill: #FFFFFF; }
.mascot-glass { fill: none; stroke: var(--color-yellow); stroke-width: 5; }
.mascot-lens { fill: var(--color-blue); }
.mascot-handle { stroke: var(--color-ink); stroke-width: 7; stroke-linecap: round; }
.mascot-smirk { fill: none; stroke: var(--color-ink); stroke-width: 4.5; stroke-linecap: round; }

@media (max-width: 600px) {
  .promo-inner { flex-wrap: wrap; gap: 10px; }
  /* flex-basis:100% is required: the base rule sets `flex:1` (basis 0), so a
     bare `width:100%` is ignored and the copy gets squeezed into a 1-word
     column that overflows the viewport. */
  .promo-text { order: 3; flex: 1 0 100%; width: 100%; }
  .promo-actions { margin-left: auto; }
  /* Mark only, no text: the full pill would eat a third of a phone screen.
     The link keeps an accessible name from the visually-hidden label, so
     hiding the words costs nothing for screen-reader and voice users. */
  .store-fab { padding: 6px; right: 16px; bottom: 16px; }
  .store-fab-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .store-fab-mark { width: 26px; height: 26px; }
}

.faq-item kbd {
  font-family: var(--font-mono); font-size: 0.78em; font-weight: 700;
  background: var(--color-surface-muted); border: 1px solid var(--color-ink);
  border-radius: 4px; padding: 1px 5px;
}

/* ── Architecture flowchart ───────────────────────────────────────────────
   The 10-stage board is data-driven (see js/architecture.js). Layout is a
   flex track of nodes joined by connectors, which rotate to vertical at the
   992px breakpoint. Every colour, radius, border and shadow below comes from
   the tokens at the top of this file - no new palette is introduced. */
.arch-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: 26px;
}
.arch-lens {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--color-surface);
  border: var(--bw) solid var(--color-ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
}
.arch-transport { display: flex; align-items: center; gap: 8px; }
.arch-status {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-left: auto; color: var(--color-text-muted); white-space: nowrap;
}

.arch-board {
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-hard);
  padding: 20px 24px 24px;
}
.arch-zone { padding: 22px 0; }
.arch-zone + .arch-zone,
.arch-boundary + .arch-zone { border-top: var(--bw) dashed rgba(18, 18, 18, 0.3); }
.arch-zone-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.arch-zone-note { font-size: 0.85rem; color: var(--color-text-muted); }
/* Centre rather than stretch: the 5/6 fork is twice as tall, and stretching
   every other node to match left huge empty boxes beside it. */
.arch-track { display: flex; align-items: center; }

.arch-node {
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left; cursor: pointer;
  padding: 16px 14px;
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-body); color: var(--color-ink);
  transition: transform 0.16s cubic-bezier(.34,1.56,.64,1), box-shadow 0.16s ease, background-color 0.16s ease;
}
.arch-node:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--color-ink); }
.arch-node:focus-visible { outline: var(--bw) solid var(--color-primary); outline-offset: 3px; }
.arch-node-num { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-primary); }
.arch-node-title { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; line-height: 1.15; letter-spacing: -0.01em; }
.arch-node-lens { font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-text-muted); word-break: break-word; }
.arch-node-tag {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.08em; padding: 2px 6px;
  border: 2px solid var(--color-ink); border-radius: 999px;
  background: var(--color-surface);
}
.arch-node.is-done .arch-node-num { color: var(--color-badge-alt); }
/* The 5/6 pair get an olive shadow so the fork reads as distinct from the
   straight-line stages even before the PARALLEL tag is noticed. */
.arch-node.is-parallel { box-shadow: 3px 3px 0 var(--color-badge-alt); }
.arch-node.is-parallel:hover { box-shadow: 5px 5px 0 var(--color-ink); }
.arch-node.is-parallel.is-active { box-shadow: 7px 7px 0 var(--color-primary); }
.arch-node.is-active {
  background: var(--color-yellow);
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--color-primary);
}
.arch-node.is-active .arch-node-num { color: var(--color-ink); }
/* Connectors are plain 3px rules with a CSS arrowhead, and carry a packet
   element that GSAP animates from 0% to 100% along the active axis. */
.arch-conn {
  position: relative;
  flex: 0 0 38px; align-self: center;
  height: 3px; background: var(--color-ink);
}
.arch-conn::after {
  content: ''; position: absolute; right: -2px; top: 50%;
  transform: translateY(-50%);
  border-left: 10px solid var(--color-ink);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.arch-packet {
  position: absolute; top: 50%; left: 0;
  width: 13px; height: 13px; margin-top: -6.5px;
  border-radius: 50%; background: var(--color-primary);
  border: 2px solid var(--color-ink); opacity: 0;
}

/* Stages 5 and 6 run side by side. The ::after bar is the merge bracket: it
   sits at the vertical midpoint of the pair so the outgoing connector reads
   as a genuine convergence into stage 7. */
.arch-parallel {
  position: relative; flex: 1.35 1 0;
  display: flex; flex-direction: column; gap: 14px;
}
.arch-parallel::after {
  content: ''; position: absolute; right: -19px; top: 25%; bottom: 25%;
  width: 3px; background: var(--color-ink);
}
.arch-parallel-tag {
  position: absolute; top: -14px; left: 0;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.08em; color: var(--color-text-muted);
}
.arch-branch { display: flex; align-items: center; }
.arch-branch .arch-node { flex: 1 1 0; }
.arch-branch .arch-conn { flex: 0 0 19px; }

.arch-boundary { display: flex; align-items: center; gap: 12px; margin: 4px 0; }
.arch-boundary-line { flex: 1 1 0; height: 0; border-top: var(--bw) dashed var(--color-ink); }
.arch-boundary-label {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  padding: 6px 12px; border: var(--bw) solid var(--color-ink);
  border-radius: 999px; background: var(--color-primary); color: #fff;
  box-shadow: var(--shadow-hard-sm);
}

.arch-detail { margin-top: 26px; padding: 24px; background: var(--color-surface); }
.arch-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.arch-detail-title { font-size: 1.3rem; }
.arch-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.arch-field-label {
  display: block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-primary); margin-bottom: 6px;
}
.arch-field-text { font-size: 0.88rem; color: var(--color-text-muted); }
.arch-example {
  display: block; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.55;
  background: var(--color-ink); color: var(--color-yellow);
  padding: 12px 14px; border-radius: var(--radius-sm);
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.arch-detail-note {
  margin-top: 16px; font-size: 0.9rem; color: var(--color-text-muted);
  border-left: var(--bw) solid var(--color-yellow); padding-left: 14px;
}

/* Hover tooltips, CSS-only so there is no extra JS and no layout thrash.
   Nodes use ::after; connectors use ::before because ::after is the arrowhead.
   Gated behind (hover: hover) so they never appear on touch devices. */
@media (hover: hover) {
  .arch-node[data-tip]:hover::after,
  .arch-conn[data-tip]:hover::before {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 10px);
    transform: translateX(-50%);
    z-index: 20; width: max-content; max-width: 250px;
    font-family: var(--font-body); font-size: 0.78rem; font-weight: 500;
    line-height: 1.4; color: #fff; background: var(--color-ink);
    border: 2px solid var(--color-ink); border-radius: var(--radius-sm);
    padding: 8px 10px; text-align: left; pointer-events: none;
    box-shadow: 4px 4px 0 var(--color-primary);
  }
}

/* Responsive */
@media (max-width: 992px) {
  .hero-section { grid-template-columns: 1fr; gap: 56px; }
  /* Single column puts the copy *below* the mascot card, so the readability
     scrim has to run vertically instead of across a left-hand copy column. */
  .hero-section::before {
    background: linear-gradient(to bottom,
      rgba(246, 241, 231, 0) 0%,
      rgba(246, 241, 231, 0.5) 32%,
      var(--color-bg) 60%);
  }
  .hero-visual { order: -1; padding: 30px 30px 0; }
  .mascot-card { width: min(100%, 320px); }
  .console-grid { grid-template-columns: 1fr; }
  .install-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  /* Architecture board collapses to a single vertical column; connectors
     rotate 90 degrees and the merge bracket is dropped because "converge"
     has no meaning once the branches are stacked. */
  .arch-track { flex-direction: column; align-items: stretch; }
  .arch-node { flex: 0 0 auto; }
  .arch-conn { flex: 0 0 30px; width: 3px; height: 30px; }
  .arch-conn::after {
    right: auto; top: auto; bottom: -2px; left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-top: 10px solid var(--color-ink); border-bottom: 0;
  }
  .arch-packet { top: 0; left: 50%; margin-top: 0; margin-left: -6.5px; }
  .arch-parallel { flex: 0 0 auto; }
  .arch-parallel::after { display: none; }
  .arch-parallel-tag { position: static; display: block; margin-bottom: 8px; }
  .arch-branch { flex-direction: column; align-items: stretch; }
  .arch-branch .arch-conn { flex: 0 0 24px; }
  .arch-status { margin-left: 0; }
  .arch-detail { padding: 20px; }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .section { margin-bottom: 64px; }
  .hero-headline { font-size: 2.6rem; }
  .hero-cta-group .btn { width: 100%; }
  .verdict-box { flex-direction: column; align-items: flex-start; }
  .pane-body { padding: 18px; }
  .sticker-float-1 { left: -10px; }
  .sticker-float-2 { right: -8px; }
  .starburst { width: 84px; height: 84px; font-size: 0.8rem; top: -18px; right: -12px; }
  .hero-blob-yellow { display: none; }
  .brand-title { display: none; }
  .istep { padding: 15px; gap: 11px; }
  .steps-head { gap: 10px; }
  .copy-row { flex-wrap: wrap; }
  .arch-board { padding: 16px 14px 20px; }
  .arch-transport { width: 100%; }
  .arch-transport .btn { flex: 1 1 auto; }
  .arch-lens { width: 100%; justify-content: center; }
  .arch-detail-grid { grid-template-columns: 1fr; }
  .arch-boundary-label { font-size: 0.58rem; padding: 5px 9px; }
}

/* Safe Peek Link Tracer */
.safe-peek-card {
  margin-top: 20px;
  background: var(--color-bg);
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: 3px 3px 0 var(--color-ink);
}
.safe-peek-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.safe-peek-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin-bottom: 12px;
}
.safe-peek-input-row {
  display: flex;
  gap: 8px;
}
.safe-peek-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 8px 12px;
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}
.safe-peek-input:focus-visible {
  outline: var(--bw) solid var(--color-primary);
  outline-offset: 1px;
}
.safe-peek-output {
  margin-top: 14px;
  padding: 12px;
  background: var(--color-surface);
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
}
.safe-peek-hop {
  padding: 4px 0;
  border-bottom: 1px dashed var(--color-ink);
  word-break: break-all;
}
.safe-peek-hop:last-child {
  border-bottom: none;
}
.safe-peek-status {
  display: inline-block;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  background: #eee;
  margin-right: 6px;
}
.safe-peek-dest {
  font-weight: 700;
}
.safe-peek-risk {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1.5px solid var(--color-ink);
  font-weight: 800;
}

/* PII Status Bar & Clear Action */
.pii-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--color-surface);
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: 2.5px 2.5px 0 var(--color-ink);
  padding: 8px 14px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.pii-status-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.pii-indicator-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-safe);
  border: 1.5px solid var(--color-ink);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(155, 232, 109, 0.4);
}
.privacy-counts {
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.4;
  word-break: break-word;
}
.btn-clear-tactile {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  background-color: var(--color-surface-muted);
  color: var(--color-ink);
  border: var(--bw) solid var(--color-ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--color-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  transition: all 0.14s cubic-bezier(.34,1.56,.64,1);
}
.btn-clear-tactile:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--color-ink);
}
.btn-clear-tactile:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--color-ink);
}

/* Headers & Authentication Drawer */
.auth-drawer {
  margin-bottom: 14px;
  background: var(--color-surface);
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--color-ink);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.auth-drawer:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--color-ink);
}
.auth-drawer-summary {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  list-style: none;
  user-select: none;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease;
}
.auth-drawer-summary:hover {
  background-color: #FFFDF7;
}
.auth-drawer-summary::-webkit-details-marker,
.auth-drawer-summary::marker {
  display: none;
  content: "";
}
.auth-drawer-summary::after {
  display: none !important;
}
.auth-summary-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.auth-summary-title {
  color: var(--color-ink);
  font-weight: 800;
}
.auth-summary-sub {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-text-muted);
  font-weight: 700;
}
.auth-summary-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--color-ink);
  border-radius: 6px;
  background: #FFFDF7;
  color: var(--color-ink);
  box-shadow: 1.5px 1.5px 0 var(--color-ink);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), background-color 0.15s ease;
  flex-shrink: 0;
}
.auth-drawer[open] .auth-summary-arrow {
  transform: rotate(180deg);
  background-color: var(--color-yellow);
}
.auth-drawer-content {
  padding: 14px 14px 16px 14px;
  border-top: 2px dashed var(--color-ink);
  background: #FFFDF7;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.auth-drawer-desc {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  line-height: 1.4;
}
.auth-field-row {
  margin-bottom: 10px;
}
.auth-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.auth-field-col {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  .auth-field-grid { grid-template-columns: 1fr; }
  .pii-status-bar { flex-direction: column; align-items: flex-start; }
  .btn-clear-tactile { align-self: flex-end; }
  /* Stack the roadmap note so the sticker sits on its own line rather than
     squeezing the sentence into a narrow column beside it. */
  .platform-note { gap: 8px; padding: 10px 12px; font-size: 0.88rem; }
  .hero-platform-note { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
}
.auth-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--color-ink);
}
.auth-input, .auth-raw-textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 6px 10px;
  border: var(--bw) solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}
.auth-input:focus, .auth-raw-textarea:focus {
  outline: 2px solid var(--color-ink);
  background: #FFFFFF;
  box-shadow: 2px 2px 0 var(--color-ink);
}
.auth-raw-textarea {
  resize: vertical;
  min-height: 52px;
}

/* Authentication Status Badges in Output Pane */
.auth-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  border: var(--bw) solid var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
  display: inline-block;
  margin-bottom: 8px;
  margin-left: 6px;
  transform: rotate(-1deg);
}
.auth-badge-spoof { background-color: var(--color-primary); color: #fff; }
.auth-badge-verified { background-color: var(--color-badge-alt); color: #121212; }
.auth-badge-unverified { background-color: var(--color-surface); color: var(--color-text-muted); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tactile:hover, .tactile:active, .pipeline-card, .feature-card, .mascot-card, .arch-node.is-active { transform: none !important; }
}
/* append to styles.css, uses the project's neo-brutalist tokens */
#qr-panel { background:#fff; border:3px solid #121212; box-shadow:6px 6px 0 #121212; padding:20px; margin:24px 0; }
#qr-drop { border:3px dashed #121212; padding:24px; text-align:center; background:#F6F1E7; }
#qr-drop.over { background:#FFD23F; }
#qr-panel button { border:3px solid #121212; background:#FFD23F; box-shadow:4px 4px 0 #121212; padding:8px 14px; font-weight:700; cursor:pointer; }
#qr-panel button:active { transform:translate(2px,2px); box-shadow:2px 2px 0 #121212; }
#qr-video { width:100%; max-width:420px; border:3px solid #121212; margin-top:12px; }
#qr-steps { display:flex; gap:8px; list-style:none; padding:0; margin:16px 0; font-family:"JetBrains Mono",monospace; }
#qr-steps li { flex:1; border:3px solid #121212; padding:6px; text-align:center; background:#fff; }
#qr-steps li[data-state="active"] { background:#5DBBFF; }
#qr-steps li[data-state="done"] { background:#9BE86D; }
#qr-steps li[data-state="fail"] { background:#EA3E2B; color:#fff; }
.qr-card { border:3px solid #121212; padding:14px; margin-top:12px; box-shadow:4px 4px 0 #121212; background:#fff; }
.qr-verdict { font-family:"JetBrains Mono",monospace; font-weight:800; }
.qr-safe .qr-verdict { color:#8A8B5C; } .qr-suspicious .qr-verdict { color:#E8720C; } .qr-high_risk .qr-verdict { color:#EA3E2B; }
.qr-payload { display:block; word-break:break-all; background:#F6F1E7; padding:8px; margin:6px 0; }
.qr-label, .qr-engine { font-size:12px; opacity:.7; font-family:"JetBrains Mono",monospace; }