/* JiggleGuard public site: shared styles (telemetry theme) */

/* Self-hosted Latin subsets (SIL Open Font License): Schibsted Grotesk, Martian Mono */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url(/fonts/martian-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* Telemetry palette: clinical paper, ink, and presence-status colours */
  --paper: #f3f5f4;
  --paper-2: #e8eceb;
  --card: #ffffff;
  --ink: #0e1412;
  --ink-2: #38423e;
  --ink-3: #56615c;
  --rule: #d6ddda;
  --rule-2: #c2cbc7;
  --brand: #3d44f0;          /* logo, links and focus only */
  --brand-ink: #2a30c9;
  --brand-wash: #eceefe;
  --signal: #d6361c;         /* flagged */
  --signal-ink: #a92a14;
  --signal-wash: #fbe8e3;
  --human: #17784a;          /* looks human */
  --human-wash: #e1f2e8;
  --avail: #2fb36b;          /* chat-app "Available" dot */
  --scope: #0c1210;          /* dark instrument panels */

  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --grid: linear-gradient(rgba(14,20,18,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(14,20,18,.045) 1px, transparent 1px);

  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #f3f5f4; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grid);
  background-size: 28px 28px;
  color: var(--ink);
  font: 400 18px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ink); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.brand svg { width: 32px; height: 32px; flex: none; }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--signal); }
.header-cta { flex: none; }
.menu-btn { display: none; flex: none; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; overflow: visible; }
.menu-btn path { transform-box: view-box; transform-origin: 10px 10px; transition: transform .2s; }
.nav-open .menu-btn .l1 { transform: rotate(45deg) translateY(3px); }
.nav-open .menu-btn .l2 { transform: rotate(-45deg) translateY(-3px); }
.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; }
@media (max-width: 1040px) { .nav { gap: 20px; } .nav a[href*="who-its-for"] { display: none; } }
@media (max-width: 880px) {
  .site-header .wrap { gap: 10px; }
  .menu-btn { display: grid; }
  .site-header .header-cta { margin-left: auto; height: 40px; padding: 0 16px; font-size: 14px; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 16px; background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 18px 30px -24px rgba(21,23,31,.4); }
  .nav-open .nav { display: flex; }
  .nav a, .nav a[href*="who-its-for"] { display: block; padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--rule); }
  .nav a:last-child { border-bottom: 0; }
}
.cta-short { display: none; }
@media (max-width: 420px) {
  .site-header .wrap { gap: 8px; }
  .site-header .header-cta { padding: 0 14px; }
  .cta-long { display: none; } .cta-short { display: inline; }
  .brand { font-size: 18px; gap: 8px; } .brand svg { width: 28px; height: 28px; }
}
@media (max-width: 350px) {
  .site-header .wrap { gap: 6px; }
  .site-header .header-cta { height: 38px; padding: 0 10px; font-size: 13px; }
  .menu-btn { width: 40px; height: 40px; }
  .brand { font-size: 17px; gap: 6px; } .brand svg { width: 26px; height: 26px; }
}

/* ── Buttons & form ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: 8px;
  background: var(--ink); color: #fff; font: 700 15px/1 var(--sans);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, transform .15s;
}
.btn:hover { background: #000; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: progress; }

.signup { max-width: 520px; }
.signup form { display: flex; gap: 8px; padding: 6px; background: var(--card); border: 1px solid var(--rule-2); border-radius: 10px; box-shadow: 0 1px 0 rgba(14,20,18,.04); }
.signup form:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14,20,18,.12); }
.signup input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; background: transparent;
  font: 500 16px var(--sans); color: var(--ink);
}
.signup input:focus { outline: none; }
.signup input::placeholder { color: var(--ink-3); }
.signup .note { margin: 12px 4px 0; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.signup .ok { display: none; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px; background: var(--human-wash); color: var(--human); font-weight: 700; font-size: 16px; }
.signup.done form, .signup.done .note { display: none; }
.signup.done .ok { display: flex; }
.signup .err { margin: 10px 4px 0; padding: 10px 12px; border-radius: var(--radius); background: var(--signal-wash); color: var(--signal-ink); font-size: 14.5px; line-height: 1.45; }
.signup .err a { color: inherit; }
.signup .note a { color: inherit; }
.cta-box .signup .err { background: #fff; }
@media (max-width: 480px) {
  .signup form { flex-direction: column; border-radius: 10px; }
  .signup .btn { width: 100%; }
}

/* ── Type ───────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; color: var(--ink); }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; }
h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; }
h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.06; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: normal; color: inherit; }
/* Hero: the second clause reads as an "Away" status */
.away { display: block; color: var(--ink-3); font-weight: 700; }
.away::before { content: ""; display: inline-block; width: .32em; height: .32em; margin: 0 .22em .16em 0; border-radius: 50%; background: #9aa5a0; vertical-align: middle; }
h1, h2, h3, .eyebrow, .faq summary { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
p { margin: 0; }
.lede { font-size: clamp(19px, 2vw, 22px); line-height: 1.55; color: var(--ink-2); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 11.5px/1.3 var(--mono); font-stretch: 87.5%; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow .dot { flex: none; width: 8px; height: 8px; border-radius: 1px; background: var(--signal); }
.mono { font-family: var(--mono); font-stretch: 87.5%; }

/* ── Sections ───────────────────────────────────────────── */
section { padding: clamp(64px, 9vw, 112px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head p { margin-top: 18px; }
.answer { font-size: clamp(19px, 2vw, 21px); line-height: 1.6; color: var(--ink); }
.answer strong { font-weight: 700; }
.band { background-color: var(--paper-2); background-image: var(--grid); background-size: 28px 28px; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); }
.hero .wrap { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin: 22px 0 24px; }
.hero .lede { margin-bottom: 32px; max-width: 34ch; }
.spec { display: grid; grid-template-columns: auto 1fr; gap: 0; max-width: 520px; margin: 28px 0 0; border-top: 1px solid var(--rule-2); }
.spec dt, .spec dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.spec dt { padding-right: 20px; font: 500 11px/1.6 var(--mono); font-stretch: 87.5%; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { font-size: 15px; line-height: 1.45; color: var(--ink); }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 0; }
  .hero .lede { max-width: none; }
  /* Phones: show the reveal straight after the pitch, before the form */
  .hero-copy { display: contents; }
  .hero .eyebrow { order: 1; } .hero h1 { order: 2; } .hero .lede { order: 3; margin-bottom: 28px; }
  .hero .reveal { order: 4; margin-bottom: 32px !important; } .hero .signup { order: 5; } .hero .beta-note { order: 6; } .hero .spec { order: 7; } .hero .updated { order: 8; }
}

/* Trace instrument (signature visual) */
.trace {
  position: relative; background: var(--card); border: 1px solid var(--rule-2); border-radius: 10px;
  box-shadow: 0 1px 0 rgba(14,20,18,.04), 0 24px 48px -32px rgba(14,20,18,.35);
  overflow: hidden;
}
.trace-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--rule); font: 500 12px/1 var(--mono); font-stretch: 87.5%; color: var(--ink-3); letter-spacing: .02em; }
.trace-top .live { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.trace-top .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: blink 1.6s infinite; }
.lane { position: relative; padding: 16px 18px 18px; }
.lane + .lane { border-top: 1px dashed var(--rule-2); }
.lane-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.lane-label b { font-size: 14px; font-weight: 700; }
.lane-label span { font: 500 11.5px/1.2 var(--mono); font-stretch: 87.5%; color: var(--ink-3); text-align: right; }
.lane svg { width: 100%; height: 92px; overflow: visible;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 100% 23px, 40px 100%; background-position: 0 -1px, -1px 0; border-radius: 6px; }
.lane path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lane.human path { stroke: var(--human); }
.lane.bot path { stroke: var(--signal); }
.lane path.draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 3.2s cubic-bezier(.4,.1,.2,1) forwards; }
.lane.bot path.draw { animation-delay: .5s; }
/* Below-the-fold traces wait until they scroll into view (site.js adds .in) */
.js .draw-on-view path.draw { animation-name: none; }
.js .draw-on-view.in path.draw { animation-name: draw; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 4px; font: 600 11px/1 var(--mono); font-stretch: 87.5%; letter-spacing: .02em; }
.tag.ok { background: var(--human-wash); color: var(--human); }
.tag.flag { background: var(--signal-wash); color: var(--signal-ink); }
.trace-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--paper); border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-2); }
.trace-foot small { font: 500 11px/1 var(--mono); font-stretch: 87.5%; color: var(--ink-3); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes blink { 50% { opacity: .25; } }

/* Split + stats */
.split { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.stats { display: grid; gap: 12px; }
.stats { gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; }
.stat { padding: 22px 24px; background: var(--card); }
.stat b { display: block; font: 800 50px/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); margin-bottom: 8px; }
.stat b::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 1px; background: var(--signal); vertical-align: top; transform: translateY(6px); }
.stat span { display: block; font-size: 16px; line-height: 1.45; color: var(--ink); }
.stat small { display: block; margin-top: 10px; font: 500 11.5px/1 var(--mono); font-stretch: 87.5%; color: var(--ink-3); letter-spacing: .02em; }

/* ── Cards / grids ──────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }
.card { background: var(--card); padding: 26px; }
.card h3::before { content: attr(data-code); display: block; margin-bottom: 14px; font: 500 11px/1 var(--mono); font-stretch: 87.5%; letter-spacing: .05em; color: var(--ink-3); }
.card .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-wash); color: var(--brand); margin-bottom: 18px; }
.card .ico svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.card .how { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font: 500 12.5px/1.5 var(--mono); font-stretch: 87.5%; color: var(--ink-3); }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule-2); counter-reset: step; }
.steps li { padding: 28px 28px 8px 0; counter-increment: step; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.steps li::before { content: "STEP 0" counter(step); display: block; font: 500 11px/1 var(--mono); font-stretch: 87.5%; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 18px; }
.steps p { color: var(--ink-2); font-size: 16.5px; margin-top: 8px; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
}

/* Comparison table */
.compare-wrap { margin-top: clamp(40px, 6vw, 64px); }
.compare-wrap h3 { margin-bottom: 16px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 560px; }
caption { text-align: left; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td, tr:last-child th { border-bottom: 0; }
thead th { font: 500 11px/1.2 var(--mono); font-stretch: 87.5%; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); }
tbody th { font-weight: 700; width: 24%; }
td.h { color: var(--human); }
td.b { color: var(--signal-ink); }

/* Privacy */
.privacy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .privacy { grid-template-columns: 1fr; } }
.never { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.never li { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); font-weight: 600; font-size: 16px; }
.never li svg { width: 18px; height: 18px; flex: none; color: var(--signal); }
.never li.yes { border-color: color-mix(in srgb, var(--human) 35%, var(--rule)); background: var(--human-wash); grid-column: 1 / -1; }
.never li.yes svg { color: var(--human); }
.callout { margin-top: 24px; padding: 20px 22px; border-left: 3px solid var(--signal); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; font-size: 16.5px; color: var(--ink-2); }
.callout strong { color: var(--ink); }

/* FAQ */
.faq { max-width: 860px; border-top: 1px solid var(--rule-2); }
.faq details { border-bottom: 1px solid var(--rule-2); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font-weight: 700; font-size: clamp(18px, 2vw, 20px); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--rule-2);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230e1412' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 3.5v9M3.5 8h9'/%3E%3C/svg%3E") center/14px no-repeat;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 52px 24px 0; color: var(--ink-2); font-size: 17px; }
.faq .a p + p { margin-top: 10px; }

/* CTA */
.cta { text-align: left; }
.cta-box { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 10px; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 28px 28px, var(--scope); color: #fff; position: relative; overflow: hidden; }
.cta-box h2 { color: #fff; }
.cta-box h2 em { color: inherit; }
.cta-box p { color: #c3ccc8; margin-top: 14px; font-size: 17px; }
.cta-box .signup .note { color: #a7b2ad; }
.cta-box .btn { background: var(--ink); }
.cta-box .btn:hover { background: #000; }
.cta-box .signup .ok { background: #fff; }
.cta-box .signup form { border-color: transparent; }
.cta-box { padding-bottom: calc(clamp(28px, 5vw, 56px) + 44px); }
.cta-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 48px; opacity: .55; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 60' preserveAspectRatio='none' fill='none' stroke='%2346d98a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 40 C 40 38 60 14 100 18 S 160 50 200 46 L 250 46 C 280 46 292 10 330 14 C 360 17 356 40 392 38 L 440 38 C 466 38 478 52 506 48 L530 12 L552 44 L574 12 L596 44 L618 12 L640 44 L662 12 L684 44 L706 12 L728 44 L750 12 L772 44 L794 12 L816 44 L838 12 L860 44 L882 12 L904 44 L926 12 L948 44 L970 12 L992 44'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@media (max-width: 860px) { .cta-box { grid-template-columns: 1fr; } }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { padding: 56px 0 40px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); }
.site-footer .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.site-footer .blurb { max-width: 380px; margin-top: 12px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.site-footer nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.site-footer nav a:hover { color: var(--ink); }
.social { display: flex; gap: 6px; margin-top: 18px; }
.social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; color: var(--ink-2); border: 1px solid var(--rule-2); }
.social a:hover { color: var(--ink); border-color: var(--ink); }
.social svg { width: 16px; height: 16px; }
.site-footer .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); font: 500 12.5px/1.4 var(--mono); font-stretch: 87.5%; color: var(--ink-3); }

/* ── Article (guide) ────────────────────────────────────── */
.crumbs { font: 500 13px/1.4 var(--mono); font-stretch: 87.5%; color: var(--ink-3); padding-top: 36px; }
.crumbs a { color: var(--ink-3); }
.article-head { padding: 28px 0 40px; max-width: 820px; }
.article-head h1 { font-size: clamp(38px, 5.6vw, 64px); margin: 18px 0 22px; }
.byline { margin-top: 22px; font: 500 13px/1.5 var(--mono); font-stretch: 87.5%; color: var(--ink-3); }
.tldr { max-width: 820px; padding: 22px 24px; background: var(--card); border: 1px solid var(--rule-2); border-left: 3px solid var(--ink); border-radius: 0 var(--radius) var(--radius) 0; }
.tldr b { display: block; font: 500 11px/1 var(--mono); font-stretch: 87.5%; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.tldr ul { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 17px; }
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(30px, 3.6vw, 42px); margin: 0 0 18px; }
.prose p, .prose li { color: var(--ink-2); font-size: 18px; }
.prose p + p { margin-top: 16px; }
.prose ol { padding-left: 22px; }
.prose ol li { margin-bottom: 14px; }
.prose ol li strong { color: var(--ink); }
.prose .catch { color: var(--ink-3); }
.signs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; counter-reset: sign; }
.signs li { counter-increment: sign; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; }
.signs li::before { content: "SIGN 0" counter(sign); display: block; font: 500 11px/1 var(--mono); font-stretch: 87.5%; letter-spacing: .05em; color: var(--signal-ink); margin-bottom: 14px; }
.signs h3 { margin-bottom: 6px; }
.signs p { color: var(--ink-2); font-size: 16.5px; }
@media (max-width: 760px) { .signs { grid-template-columns: 1fr; } }

/* ── Consent bar ────────────────────────────────────────── */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 560px; margin-left: auto;
  display: none; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--rule-2); box-shadow: 0 20px 40px -20px rgba(21,23,31,.35); font-size: 14.5px; color: var(--ink-2); }
.consent.show { display: flex; }
@media (max-width: 640px), (max-height: 720px) { .consent { padding: 10px 12px; font-size: 13.5px; gap: 10px; } .consent p { flex-basis: 200px; } }
.consent p { flex: 1 1 260px; }
.consent .row { display: flex; gap: 8px; }
.consent button { height: 38px; padding: 0 16px; border-radius: 8px; font: 700 14px var(--sans); cursor: pointer; }
.consent .yes { background: var(--ink); color: #fff; border: 0; }
.consent .no { background: transparent; color: var(--ink); border: 1px solid var(--rule-2); }

/* ── Motion ─────────────────────────────────────────────── */
.rise { opacity: 0; transform: translateY(12px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .25s; } .d4 { animation-delay: .35s; } .d5 { animation-delay: .5s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
  .lane path.draw { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* Visible freshness date (hero) */
.updated { margin-top: 18px; font: 500 12.5px/1.4 var(--mono); font-stretch: 87.5%; color: var(--ink-3); }

/* Comparison table stacks into cards on phones */
@media (max-width: 640px) {
  .table-scroll { overflow: visible; border: 0; background: transparent; }
  .table-scroll table { min-width: 0; }
  .table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-scroll tbody, .table-scroll tr, .table-scroll th, .table-scroll td { display: block; width: auto; }
  .table-scroll tr { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
  .table-scroll th, .table-scroll td { padding: 0; border: 0; }
  .table-scroll tbody th { margin-bottom: 8px; }
  .table-scroll td + td { margin-top: 6px; }
  .table-scroll td::before { content: attr(data-label); display: block; font: 600 11px/1.4 var(--mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
}

/* ── In the news & glossary ─────────────────────────────── */
.jump { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 40px; }
.jump a { padding: 7px 12px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--card); color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.jump a:hover { color: var(--ink); border-color: var(--ink); }
.news-section, .gloss-section { padding: clamp(48px, 7vw, 80px) 0; }
.news-h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 28px; max-width: 820px; }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 760px) { .news-list { grid-template-columns: 1fr; } }
.news-item { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 22px; }
.news-meta { display: flex; justify-content: space-between; gap: 12px; font: 600 11.5px/1.3 var(--mono); font-stretch: 87.5%; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.news-meta span { color: var(--ink); }
.news-item h3 { font-size: 18px; line-height: 1.35; margin-bottom: 8px; }
.news-item h3 a { color: var(--ink); text-decoration: none; }
.news-item h3 a:hover { color: var(--brand-ink); text-decoration: underline; }
.news-item h3 a::after { content: " \2197"; color: var(--ink-3); font-weight: 500; }
.news-item p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
table.cases tbody th { width: 26%; }
table.cases th small { display: block; margin-top: 4px; font: 500 12px/1.3 var(--mono); font-stretch: 87.5%; color: var(--ink-3); }
.fineprint { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.glossary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 760px) { .glossary { grid-template-columns: 1fr; } }
.term { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 24px; scroll-margin-top: 90px; }
.term:target { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-wash); }
.term h3 { margin-bottom: 8px; }
.term p { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.term .aka { margin-top: 10px; font: 500 12.5px/1.5 var(--mono); font-stretch: 87.5%; color: var(--ink-3); }

/* Symptoms (plain-language entry point) */
.symptoms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 760px) { .symptoms { grid-template-columns: 1fr; } }
.symptoms li { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; background: var(--card); font-size: 17px; line-height: 1.45; }
.symptoms li b { display: block; margin-bottom: 4px; }
.symptoms li span { color: var(--ink-2); font-size: 15.5px; }
.symptoms .dot-s { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 1px; background: var(--signal); }
.symptoms .dot-s.avail { border-radius: 50%; background: var(--avail); box-shadow: 0 0 0 3px var(--human-wash); }
.symptoms-answer { margin-top: 28px; max-width: 820px; }

/* ── Hero reveal: chat status vs what JiggleGuard sees ─────────────── */
.reveal { position: relative; background: var(--card); border: 1px solid var(--rule-2); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(14,20,18,.04), 0 24px 48px -32px rgba(14,20,18,.35); }
.rv-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; font: 500 11.5px/1 var(--mono); font-stretch: 87.5%; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.rv-mid { border-top: 1px solid var(--rule); background: var(--paper); }
.rv-mid .live { display: inline-flex; align-items: center; gap: 7px; text-transform: none; color: var(--ink-2); }
.rv-mid .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: blink 1.6s infinite; }
.presence { display: flex; align-items: center; gap: 14px; padding: 18px 18px 12px; }
.avatar { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #e3e8e6; color: var(--ink-2); font: 700 15px var(--sans); }
.avatar i { position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; border-radius: 50%; background: var(--avail); border: 3px solid var(--card); }
.who { flex: 1; min-width: 0; }
.who b { display: block; font-size: 16px; }
.status { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--human); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--avail); }
.since { text-align: right; }
.since b { display: block; font: 600 17px var(--mono); font-stretch: 87.5%; }
.since span { font-size: 12.5px; color: var(--ink-3); }
.daybar { display: flex; align-items: center; gap: 10px; padding: 0 18px 18px; font: 500 11px var(--mono); font-stretch: 87.5%; color: var(--ink-3); }
.daybar .segs { flex: 1; display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.daybar .segs i { height: 14px; border-radius: 3px; background: var(--avail); opacity: .85; transform-origin: bottom; animation: grow .5s cubic-bezier(.2,.7,.2,1) both; }
.daybar .segs i:nth-child(n) { animation-delay: calc(.3s + var(--n, 0) * 30ms); }
@keyframes grow { from { transform: scaleY(0); } }
.reveal .lane { padding: 12px 18px 10px; }
.reveal .lane svg { height: 52px; background-size: 100% 13px, 40px 100%; }
.reveal .lane + .lane { border-top: 1px dashed var(--rule-2); }
.reveal .lane path.draw { animation-delay: .9s; }
.reveal .lane.kb path.draw { animation-delay: 1.3s; stroke-dasharray: 100; }
.rv-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px; border-top: 1px solid var(--rule); background: var(--signal-wash); font-size: 14px; color: #8a2f08; line-height: 1.45;
  animation: rise .6s 2.4s cubic-bezier(.2,.7,.2,1) both; }
.rv-flag .tag.flag { background: #fff; }

/* ── News strip ─────────────────────────────────────────────────────── */
.news-strip { padding: 0 0 clamp(48px, 7vw, 80px); }
.strip-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-top: 28px; border-top: 1px solid var(--rule-2); margin-bottom: 16px; }
.strip-head h2.eyebrow { font-family: var(--mono); font-stretch: 87.5%; font-size: 11.5px; letter-spacing: .04em; }
.strip-head a { font-weight: 700; font-size: 15px; text-decoration: none; }
.strip-head a:hover { text-decoration: underline; }
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px) { .strip { grid-template-columns: 1fr; } }
.strip a { display: block; height: 100%; padding: 16px 18px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.strip a:hover { border-color: var(--ink); transform: translateY(-2px); }
.strip .src { display: block; margin-bottom: 10px; font: 500 11px/1 var(--mono); font-stretch: 87.5%; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.strip b { font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; }

/* ── Compare grid: trace beside table ───────────────────────────────── */
.compare-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; align-items: start; }
@media (max-width: 960px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-grid .table-scroll table { min-width: 0; }
.news-strip + section { padding-top: clamp(24px, 4vw, 48px); }

/* ── Scope band: the person-vs-jiggler comparison on a dark instrument ── */
.scope { background: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 28px 28px, var(--scope); color: #e6ece9; }
.scope h2 { color: #fff; max-width: 760px; }
.scope .scope-intro { margin-top: 18px; max-width: 720px; color: #b9c4bf; font-size: clamp(18px, 2vw, 20px); }
.scope .compare-grid { margin-top: clamp(32px, 5vw, 48px); grid-template-columns: 1.15fr .85fr; }
.scope .trace { background: #111a17; border-color: #26332e; box-shadow: none; }
.scope .trace-top, .scope .trace-foot { background: #0f1714; border-color: #26332e; color: #93a19b; }
.scope .trace-top .live, .scope .trace-foot { color: #c9d3cf; }
.scope .trace-foot small { color: #93a19b; }
.scope .lane + .lane { border-top-color: #26332e; }
.scope .lane-label b { color: #fff; }
.scope .lane-label span { color: #93a19b; }
.scope .lane svg { height: 130px; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 100% 26px, 40px 100%; }
.scope .lane.human path { stroke: #46d98a; }
.scope .lane.bot path { stroke: #ff6a4d; }
.scope .tag.ok { background: rgba(70,217,138,.14); color: #7ee8ad; }
.scope .tag.flag { background: rgba(255,106,77,.14); color: #ff9b85; }
.scope .table-scroll { background: #111a17; border-color: #26332e; }
.scope th, .scope td { border-bottom-color: #26332e; }
.scope thead th { background: #0f1714; color: #93a19b; }
.scope tbody th { color: #fff; }
.scope td.h { color: #7ee8ad; }
.scope td.b { color: #ff9b85; }
@media (max-width: 960px) { .scope .compare-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .scope .table-scroll { background: transparent; border: 0; }
  .scope .table-scroll tr { background: #111a17; border-color: #26332e; }
  .scope .table-scroll td::before { color: #93a19b; }
}
.updated { font-stretch: 87.5%; }

/* Stacked case cards: the desktop column width must not squeeze the name */
@media (max-width: 640px) { table.cases tbody th { width: auto; } }

/* ── Utility pages: privacy, contact, 404 ───────────────────────────── */
.data-table { min-width: 720px; font-size: 15.5px; }
.data-table tbody th { width: 18%; }
@media (max-width: 640px) { .data-table tbody th { width: auto; } }
.prose code, .fineprint code { font: 500 0.88em/1 var(--mono); font-stretch: 87.5%; background: var(--paper-2); padding: 2px 5px; border-radius: 4px; }
.contact-grid .how a { font-family: var(--sans); font-stretch: normal; font-weight: 700; font-size: 15px; }
.notfound-links { list-style: none; margin: 0 0 96px; padding: 0; max-width: 640px; border-top: 1px solid var(--rule-2); }
.notfound-links li { border-bottom: 1px solid var(--rule); }
.notfound-links a { display: block; padding: 16px 0; font-weight: 700; text-decoration: none; color: var(--ink); }
.notfound-links a:hover { color: var(--brand-ink); }

/* ── Homepage: beta status, limits, collection summary, definitions ─── */
.beta-note { margin-top: 18px; max-width: 520px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.beta-note b { color: var(--ink); }
.limits { margin-top: clamp(32px, 5vw, 48px); padding: 22px 24px; background: var(--card); border: 1px solid var(--rule-2); border-left: 3px solid var(--signal); border-radius: 0 var(--radius) var(--radius) 0; max-width: 860px; }
.limits h3 { margin-bottom: 10px; }
.limits ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); font-size: 16.5px; }
.limits li + li { margin-top: 6px; }
.limits p { font-weight: 700; font-size: 15.5px; }
.data-table.collect { min-width: 0; }
.data-table.collect tbody th { width: 28%; }
.more-link { margin-top: 18px; font-weight: 700; }
.split.defs { grid-template-columns: 1fr 1fr; }
.split.defs h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 14px; }
@media (max-width: 900px) { .split.defs { grid-template-columns: 1fr; } }
.news-strip .fineprint { margin-top: 12px; }
/* Article contents list */
.toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; max-width: 820px; margin-top: 24px; padding: 14px 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); font-size: 15px; }
.toc b { font: 500 11px/1.4 var(--mono); font-stretch: 87.5%; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.toc a { font-weight: 600; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
/* Glossary: optional A–Z list under the short section index */
.all-terms { margin: -24px 0 40px; }
.all-terms summary { cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink-2); }
.all-terms .jump { padding: 14px 0 0; }
.term p a { font-weight: 600; }
/* Cases page */
.cases-h3 { margin: 8px 0 14px; font-size: 18px; }
.table-scroll + .cases-h3 { margin-top: 32px; }
table.cases { min-width: 760px; font-size: 15.5px; }
table.cases td[data-label="Source"] a { font-weight: 600; }
.case-summary { max-width: 820px; }
.case-summary p + p { margin-top: 14px; }
.case-summary p { color: var(--ink-2); }
.further { margin-top: 18px; border-top: 1px solid var(--rule-2); padding-top: 12px; }
.further summary { cursor: pointer; font-weight: 700; }
.further-list { margin: 12px 0 0; padding-left: 20px; }
.further-list li { margin-bottom: 8px; }
.further-list span { font: 500 11.5px/1.4 var(--mono); font-stretch: 87.5%; color: var(--ink-3); }
@media (max-width: 640px) { table.cases { min-width: 0; } }
/* Code blocks on the deployment page */
.code { margin: 14px 0 18px; padding: 14px 16px; background: var(--scope); color: #e6ece9; border-radius: var(--radius); overflow-x: auto; }
.code code { font: 500 14px/1.6 var(--mono); font-stretch: 87.5%; background: none; padding: 0; color: inherit; }
/* Product screenshot and annotated examples */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-2); border-radius: 10px; box-shadow: 0 24px 48px -32px rgba(14,20,18,.35); background: #fff; }
.shot figcaption { margin-top: 12px; max-width: 860px; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.examples { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(28px, 4vw, 40px); }
@media (max-width: 760px) { .examples { grid-template-columns: 1fr; } }
.example { padding: 22px 24px; background: var(--card); border: 1px solid var(--rule-2); border-top: 3px solid var(--human); border-radius: var(--radius); }
.example.warn { border-top-color: var(--signal); }
.example h3 { margin: 6px 0 10px; }
.example ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 16px; }
.example li + li { margin-top: 6px; }
.ex-tag { font: 500 11px/1.4 var(--mono); font-stretch: 87.5%; letter-spacing: .05em; text-transform: uppercase; color: var(--human); }
.example.warn .ex-tag { color: var(--signal-ink); }
.prose code { overflow-wrap: anywhere; }
.code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Jiggler type diagrams */
.card .diagram { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 0 18px; color: var(--ink); }

/* ── Phones: tighter rhythm, smaller body type, compact panels ─────── */
@media (max-width: 640px) {
  body { font-size: 17px; }
  section { padding: 44px 0; }
  .hero { padding: 24px 0 36px; }
  .hero h1 { margin: 14px 0 14px; font-size: clamp(34px, 10vw, 42px); }
  h2 { font-size: clamp(26px, 7.4vw, 30px); }
  .section-head { margin-bottom: 22px; }
  .section-head p { margin-top: 12px; }
  .lede, .answer, .scope .scope-intro { font-size: 17px; line-height: 1.55; }
  .hero .lede { margin-bottom: 22px; }
  .updated { margin-top: 12px; }
  /* Hero card: drop the day bar so the whole comparison fits in view */
  .reveal .daybar { display: none; }
  .reveal .presence { padding-bottom: 14px; }
  .reveal .lane svg { height: 40px; }
  .rv-label { font-size: 10.5px; padding: 10px 14px; }
  .reveal .lane, .presence, .rv-flag { padding-left: 14px; padding-right: 14px; }
  /* Spec readout stacks label over value */
  .spec { grid-template-columns: 1fr; }
  .spec dt { padding: 10px 0 0; border-bottom: 0; }
  .spec dd { padding: 2px 0 10px; }
  /* Stacked tables: row titles use the full card width */
  .data-table tbody th, .data-table.collect tbody th, table.cases tbody th { width: auto; }
  .card { padding: 20px; }
  .card .diagram { max-width: 180px; margin-bottom: 12px; }
  .card p { font-size: 16px; }
  .steps li, .steps li + li { padding: 18px 0; }
  .steps p { font-size: 16px; }
  .limits { padding: 18px; }
  .limits ul { font-size: 16px; }
  .symptoms li { padding: 16px 18px; }
  .more-link { font-size: 16px; }
  .strip b { font-size: 17px; }
  .faq summary { font-size: 17px; padding: 18px 0; gap: 16px; }
  .faq .a { padding-right: 0; font-size: 16px; }
  .callout { font-size: 16px; padding: 16px 18px; }
  .scope .lane svg { height: 96px; }
  .shot figcaption { font-size: 13.5px; }
  .examples .example { padding: 18px; }
  .cta-box { padding: 26px 20px calc(26px + 44px); }
  .article-head { padding: 18px 0 28px; }
  .article-head h1 { font-size: clamp(32px, 9vw, 40px); }
  .tldr { padding: 16px 18px; }
  .tldr ul { font-size: 16px; }
  .prose p, .prose li { font-size: 17px; }
  .site-footer { padding: 40px 0 32px; }
}
@media (max-width: 640px) {
  .scope .table-scroll tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 14px; }
  .scope .table-scroll tbody th { grid-column: 1 / -1; margin-bottom: 4px; }
  .scope .table-scroll td + td { margin-top: 0; }
  .scope .table-scroll td { font-size: 15px; line-height: 1.4; }
  .scope .table-scroll td::before { font-size: 10px; margin-bottom: 2px; }
  .data-table.collect td::before { display: none; }
}
.site-footer .bottom .legal { flex-basis: 100%; font-size: 11.5px; line-height: 1.5; }
/* Explainer: activity / work / intent */
.three { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; }
.three li { background: var(--card); padding: 22px 24px; }
.three li:first-child { box-shadow: inset 0 3px 0 var(--signal); }
.three h3 { margin: 6px 0 8px; }
.three p:not(.ex-tag) { color: var(--ink-2); font-size: 16px; }
@media (max-width: 760px) { .three { grid-template-columns: 1fr; } }
.byline a { color: inherit; }
/* Desktop hero: start the illustration level with the headline */
@media (min-width: 901px) { .hero .wrap { align-items: start; } .hero .reveal { margin-top: 36px !important; } }
.three .ex-tag { color: var(--ink-3); }
@media (min-width: 901px) { .hero h1 { font-size: clamp(40px, 4.2vw, 58px); } }
/* Types of mouse jiggler page */
.type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 860px) { .type-grid { grid-template-columns: 1fr; } }
.type-card { background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 22px 24px; scroll-margin-top: 90px; }
.type-card .diagram { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 0 14px; color: var(--ink); }
.type-card .ex-tag { color: var(--ink-3); }
.type-card h3 { margin: 4px 0 12px; }
.type-card dl { margin: 0; display: grid; grid-template-columns: 1fr; }
.type-card dt { margin-top: 10px; font: 500 11px/1.4 var(--mono); font-stretch: 87.5%; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.type-card dd { margin: 2px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.type-card dt:last-of-type { color: var(--signal-ink); }
.type-card dd:last-of-type { color: var(--ink); }
.type-card:target { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14,20,18,.1); }
@media (max-width: 640px) { .type-card { padding: 18px; } .type-card .diagram { max-width: 170px; } .type-card dd { font-size: 15.5px; } }

/* ── Animated diagrams: each one acts out what the tool does ───────── */
.diagram * { transform-box: fill-box; }
.diagram .a-nudge { transform-origin: center; animation: dg-nudge 2.4s ease-in-out infinite; }
.diagram .a-dash { animation: dg-dash 1.2s linear infinite; }
.diagram .a-blink { animation: dg-blink 1.2s steps(1, end) infinite; }
.diagram .a-draw { stroke-dasharray: 100; animation: dg-draw 3.2s cubic-bezier(.4,.1,.2,1) infinite; }
.diagram .a-sway { transform-origin: 50% 100%; animation: dg-sway 2.6s ease-in-out infinite alternate; }
.diagram .a-rock { transform-origin: 50% 100%; animation: dg-rock .9s ease-in-out infinite alternate; }
.diagram .a-pulse { animation: dg-pulse 1.6s ease-in-out infinite alternate; }
.diagram .a-zzz { transform-origin: center; animation: dg-zzz 2.8s ease-in-out infinite; }
.diagram .a-caret { animation: dg-blink 1s steps(1, end) infinite; }
.diagram .a-spin { transform-origin: center; animation: dg-spin 2.4s linear infinite; }
.diagram .a-hand { transform-box: view-box; transform-origin: 172px 56px; animation: dg-spin 4s steps(12, end) infinite; }
.diagram .a-click { animation: dg-click 1.2s ease-out infinite; }
.diagram .a-press { animation: dg-press 1.2s ease-in-out infinite; }
.diagram .a-rays { transform-origin: center; animation: dg-spin 9s linear infinite; }
@keyframes dg-nudge { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(7px, -3px); } 50% { transform: translate(0, 2px); } 75% { transform: translate(-6px, -2px); } }
@keyframes dg-dash { to { stroke-dashoffset: -16; } }
@keyframes dg-blink { 50% { opacity: .15; } }
@keyframes dg-draw { 0% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes dg-sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes dg-rock { from { transform: rotate(-4deg) translateX(-2px); } to { transform: rotate(4deg) translateX(2px); } }
@keyframes dg-pulse { from { opacity: .35; } to { opacity: 1; } }
@keyframes dg-zzz { 0% { opacity: 0; transform: translateY(6px); } 40%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes dg-spin { to { transform: rotate(360deg); } }
@keyframes dg-click { 0%, 60%, 100% { opacity: 0; } 10%, 40% { opacity: 1; } }
@keyframes dg-press { 0%, 100% { transform: translateY(0); } 45%, 60% { transform: translateY(5px); } }
/* Only animate while on screen (site.js adds .in); never with reduced motion */
.js .diagram:not(.in) * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .diagram * { animation: none !important; }
  .diagram .a-zzz, .diagram .a-click { opacity: 1; transform: none; }
}