/* home.css — the landing page at /home.
   Standalone on purpose: this page is the one a stranger from Google lands on, so it
   carries its own stylesheet rather than pulling app.css (an app shell) or page.css
   (built for standing text pages). Tokens are copied verbatim from page.css so the
   brand does not drift between /home and /about.

   Light only, deliberately. DisMis is a newsprint product on paper — the app, /about
   and /support all commit to it, and a dark variant here would make the one page a
   stranger sees look like a different site. */

:root {
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --ink: #101418;
  --nearblack: #0C1013;
  --violet: #4B31E0;
  --blue: #3E7BFA;
  --purple: #7C2AE8;
  --lilac: #A79BFF;
  --mist: #EDEBFE;
  --paper: #FBFCFB;
  --light: #F7F8F7;
  --page: #EEF1EE;
  --chip: #F3F5F3;
  --deep: #241A45;
  --news: #E7EAE7;
  --news-ink: #1A1815;

  /* the four calls, same hexes the app stamps with */
  --red: #E11D33;
  --green: #0E8C6A;
  --amber: #C77700;
  --sus: #3B5BDB;

  --grad: linear-gradient(135deg, var(--blue), var(--purple));
  --hair: rgba(16, 20, 24, .09);
  --soft: rgba(16, 20, 24, .70);
  --faint: rgba(16, 20, 24, .45);

  --wrap: 1140px;
  --gut: 26px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ── header ─────────────────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px var(--gut);
  background: rgba(238, 241, 238, .84);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--hair);
}
.mark { display: flex; align-items: center; gap: 10px; }
.mark:hover { text-decoration: none; }
.mark i {
  width: 30px; height: 30px; display: block; flex: none;
  background: url('/logo.svg') center / contain no-repeat;
}
.mark b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.mark b s { text-decoration: none; color: var(--violet); }
.mark span { font-weight: 500; font-size: 10px; letter-spacing: .18em; color: var(--faint); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 13px; border-radius: 999px; color: var(--soft);
  font-weight: 500; font-size: 13px; white-space: nowrap;
}
.nav a:hover { background: #fff; text-decoration: none; }
.nav a.go { background: var(--grad); color: #fff; padding: 9px 17px; font-weight: 600; }
.nav a.go:hover { filter: brightness(1.07); }

@media (max-width: 720px) {
  .mark span { display: none; }
  .nav .hide-s { display: none; }
}

/* ── shared type ────────────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 18px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px; background: var(--grad); border-radius: 2px;
}

/* DM Sans, like every heading in the app. --display is held back for the one thing
   the app also holds it back for: a claim being quoted. See .mcard-head. */
h2.h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(27px, 3.9vw, 42px);
  line-height: 1.14;
  letter-spacing: -.025em;
  margin: 0 0 16px;
  text-wrap: balance;
}
h3.sh {
  font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px;
}
.lede {
  font-size: clamp(16px, 1.7vw, 18.5px);
  color: var(--soft);
  max-width: 62ch;
  margin: 0 0 8px;
}

.section { padding: clamp(66px, 9vw, 118px) 0; }
.section-tight { padding: clamp(52px, 7vw, 86px) 0; }

/* ── buttons ────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  border: 0; cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { text-decoration: none; }
.btn-grad {
  background: var(--grad); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(75, 49, 224, .62);
}
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(75, 49, 224, .7); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--hair); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { transform: translateY(-2px); }
.btn svg { flex: none; }

/* ── hero ───────────────────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 78px) 0 clamp(58px, 7vw, 96px); }

/* ambient wash. Two soft blobs drifting behind the paper — the app's own glow, slowed
   right down so it reads as light on paper rather than as a moving graphic. */
.blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  pointer-events: none; z-index: 0;
}
.blob-a { width: 620px; height: 620px; top: -260px; left: -180px; background: #CFE0FF; animation: drift 26s ease-in-out infinite; }
.blob-b { width: 520px; height: 520px; top: 60px; right: -220px; background: var(--mist); animation: drift 32s ease-in-out infinite reverse; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, 50px) scale(1.12); }
}

.hero .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(34px, 5vw, 68px);
  align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 42px; } }

h1 { margin: 0 0 20px; }
h1 .hook {
  display: block;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.08; letter-spacing: -.038em;
  text-wrap: balance;
  /* The line cycles through a few openers. min-height is set from JS to the tallest
     of them so the swap never shoves the paragraph below it up and down. */
  transition: opacity .3s ease, transform .3s ease;
}
h1 .hook.swap { opacity: 0; transform: translateY(-7px); }
@media (prefers-reduced-motion: reduce) {
  h1 .hook { transition: none; }
  h1 .hook.swap { opacity: 1; transform: none; }
}
h1 .hook em {
  font-style: normal;
  background: linear-gradient(105deg, var(--blue), var(--purple), var(--violet), var(--blue));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s linear infinite;
}
@keyframes shimmer { to { background-position: 300% 0; } }
h1 .seo {
  display: block; margin-top: 16px;
  font-family: var(--sans); font-size: clamp(15px, 1.7vw, 18px); font-weight: 500;
  line-height: 1.5; color: var(--soft); max-width: 36ch;
}

.hero-sub { font-size: 16.5px; color: var(--soft); max-width: 44ch; margin: 0 0 26px; }

/* the handoff box. Typing here and hitting Check leaves for the app on the main
   domain — this page never runs a check itself, it just carries the query over. */
.ask { display: flex; gap: 9px; max-width: 520px; margin-bottom: 14px; }
.ask input {
  flex: 1; min-width: 0;
  padding: 15px 19px; border-radius: 999px;
  border: 1.5px solid var(--hair); background: #fff;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
}
.ask input::placeholder { color: var(--faint); }
.ask input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(75, 49, 224, .11); }
@media (max-width: 460px) { .ask { flex-direction: column; } .ask .btn { width: 100%; } }

.ask-note { font-size: 12.5px; color: var(--faint); margin: 0 0 26px; }
.ask-note b { font-weight: 600; color: var(--soft); }
/* The second way into the app. Inheriting the note's grey made it invisible as a
   link, which is the one thing this line exists to be. */
.ask-note a {
  color: var(--violet); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(75, 49, 224, .32);
}
.ask-note a:hover { text-decoration-color: var(--violet); }

.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: var(--soft); }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof svg { flex: none; color: var(--green); }

/* ── the machine (hero right) ───────────────────────────────────────────────── */
/* The app's card, full size. The tiles further down are this same card printed small;
   this one is set to app.css's own numbers — 28px radius, the 40px avatar, the 214px
   clipping, the stamp sixteen up from its floor — because it is the first card anybody
   sees and it should be the card, not a picture of one.

   The app sets the claim twice, sans above the clipping and serif inside it, and so does
   this. In the app the sans line is what you tap and the clipping is the artefact you
   are tapping into, and losing that doubling is what made the old panel read as a
   drawing. The tiles drop it only because six of them in a grid cannot afford it.

   --v-fg comes off data-v, not the .v-DISMISSED classes: those set `color`, which would
   tint the whole card rather than just the avatar, the rules, the word and the read. */

.machine { position: relative; }

.mcard[data-v="DISMISSED"] { --v-fg: var(--red); }
.mcard[data-v="LEGIT"]     { --v-fg: var(--green); }
.mcard[data-v="MID"]       { --v-fg: var(--amber); }
.mcard[data-v="SUS"]       { --v-fg: var(--sus); }
.mcard {
  --v-fg: var(--violet);
  background: #fff; color: var(--ink);
  border-radius: 28px; padding: 16px 16px 20px;
  box-shadow: 0 18px 42px -32px rgba(16, 20, 24, .9), 0 0 0 1px var(--hair);
}

.mcard-top { display: flex; align-items: center; gap: 11px; }
.mcard-av {
  width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--v-fg);
  display: grid; place-items: center;
  color: #fff; font-weight: 600; font-size: 13px; line-height: 1;
  transition: background .35s ease;
}
.mcard-who { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mcard-who b { font-weight: 600; font-size: 14.5px; line-height: 1.1; letter-spacing: -.01em; }
.mcard-who i {
  font-style: normal; font-size: 11px; line-height: 1; letter-spacing: .05em;
  color: rgba(16, 20, 24, .45);
}

/* Two lines held open, so the card does not grow and shrink as claims cycle through it. */
.mcard-title {
  margin: 14px 0 0; font-weight: 600; font-size: 20px; line-height: 1.32;
  letter-spacing: -.028em; min-height: 2.64em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mcard-title .caret {
  display: inline-block; width: 2px; height: .88em; margin-left: 2px;
  background: var(--ink); vertical-align: -.08em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.mcard-clip {
  position: relative; margin-top: 14px; height: 214px;
  border-radius: 20px; overflow: hidden;
  background: var(--news) url('/assets/newsprint.png') center / 178% no-repeat;
  display: grid; place-items: center; padding: 22px 20px 68px;
}
/* Its own class rather than `.mcard-clip span`, which would out-specify the scrim, the
   stamp and the stamp's rules — all spans in here too. */
.mcard-head {
  font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.16;
  color: var(--news-ink); text-align: center; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; transition: opacity .5s ease;
}
.mcard.printed .mcard-head { opacity: 1; }
.mcard-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0 40%, rgba(16, 20, 24, .55) 100%);
}
.mcard-stamp { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; opacity: 0; }
.mcard-rules {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 500; font-size: 7.5px; line-height: 1; letter-spacing: .32em;
  color: rgba(255, 255, 255, .85);
}
.mcard-rules i { width: 22px; height: 1px; background: var(--v-fg); }
.mcard-stamp b {
  display: block; margin-top: 10px;
  font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: .14em;
  color: var(--v-fg);
  text-shadow: 0 1px 10px rgba(16, 20, 24, .85), 0 8px 24px rgba(16, 20, 24, .5);
}
.mcard.stamped .mcard-stamp { animation: mSlam .8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes mSlam {
  0%   { opacity: 0; transform: scale(2.3); }
  60%  { opacity: 1; transform: scale(.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* One slot, two jobs: what the check is doing, then what it found. Held at two lines so
   the swap between them does not move the foot line under the card. */
.mcard-read {
  margin: 14px 0 0; min-height: 2.7em;
  font-weight: 600; font-size: 12.5px; line-height: 1.35; letter-spacing: .01em;
  color: var(--v-fg);
}
.mcard-read.working { font-weight: 500; color: var(--faint); }

.v-DISMISSED { color: var(--red); }
.v-LEGIT     { color: var(--green); }
.v-MID       { color: var(--amber); }
.v-SUS       { color: var(--sus); }

.machine-foot {
  margin-top: 20px; font-size: 12px; color: var(--faint);
  display: flex; align-items: center; gap: 8px;
}
.machine-foot b { font-weight: 600; color: var(--soft); }

/* ── ticker ─────────────────────────────────────────────────────────────────── */
/* Each strip is one of the cases above, and clicking it opens that case. Grey pills with
   a coloured word in them were the one thing on the page that led nowhere. */

.ticker {
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  background: var(--paper); padding: 14px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker-track { display: flex; gap: 12px; width: max-content; animation: roll 72s linear infinite; }
/* focus-within as well as hover: the strips are links now, so a keyboard can be inside
   one, and it must not slide out from under the person tabbing through it. */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes roll { to { transform: translateX(-50%); } }

.tick[data-v="DISMISSED"] { --v-fg: var(--red); }
.tick[data-v="LEGIT"]     { --v-fg: var(--green); }
.tick[data-v="MID"]       { --v-fg: var(--amber); }
.tick[data-v="SUS"]       { --v-fg: var(--sus); }
.tick {
  --v-fg: var(--violet);
  display: inline-flex; align-items: center; gap: 11px; flex: none;
  max-width: 440px;
  padding: 9px 16px 9px 12px; border-radius: 13px;
  background: #fff; box-shadow: 0 0 0 1px var(--hair);
  color: var(--ink); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tick:hover {
  transform: translateY(-2px); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(16, 20, 24, .14), 0 14px 26px -20px rgba(16, 20, 24, .9);
}
/* the verdict rule off the card's stamp, stood on its end */
.tick::before { content: ''; flex: none; width: 3px; align-self: stretch; border-radius: 2px; background: var(--v-fg); }
.tick b { flex: none; font-weight: 700; font-size: 9.5px; letter-spacing: .17em; color: var(--v-fg); }
.tick span { font-size: 13px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── counter slab ───────────────────────────────────────────────────────────── */

.slab { background: var(--nearblack); color: #fff; position: relative; overflow: hidden; }
.slab::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(700px 340px at 18% -10%, rgba(75, 49, 224, .40), transparent 68%),
              radial-gradient(600px 320px at 88% 108%, rgba(62, 123, 250, .26), transparent 66%);
  pointer-events: none;
}
.slab .wrap { position: relative; z-index: 1; }
.slab h2.h { color: #fff; }
.slab .lede { color: rgba(255, 255, 255, .68); }

.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, .11); border-radius: 16px; overflow: hidden; }
.counts[data-visits="0"] { grid-template-columns: repeat(3, 1fr); }
.counts[data-visits="0"] .count-visits { display: none; }
@media (max-width: 820px) {
  .counts, .counts[data-visits="0"] { grid-template-columns: repeat(2, 1fr); }
  /* Three tiles in two columns leaves a cell nobody paints, and the 1px gap colour
     shows through it as a stray pale rectangle. Let the odd one out take the row. */
  .counts[data-visits="0"] .count:last-child { grid-column: 1 / -1; }
}
.count { background: var(--nearblack); padding: 28px 22px; }
.count-n {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(32px, 4.2vw, 46px); line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, #fff 30%, var(--lilac));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.count-l {
  margin-top: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.counts-note {
  margin-top: 16px; font-size: 13.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .46);
}

/* ── how it works ───────────────────────────────────────────────────────────── */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--paper); border: 1px solid var(--hair); border-radius: 18px;
  padding: 26px 24px 28px; position: relative; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(16, 20, 24, .28); }
/* the ordinal is load-bearing: these three happen in this order, every time */
.step-n {
  font-family: var(--sans); font-weight: 800; font-size: 40px; line-height: 1;
  letter-spacing: -.05em; color: var(--mist); margin-bottom: 14px;
}
.step p { margin: 0; color: var(--soft); font-size: 14.5px; }
.step-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); transform: scaleY(0); transform-origin: top; transition: transform .35s ease; }
.step:hover .step-bar { transform: scaleY(1); }

/* ── verdict slab ───────────────────────────────────────────────────────────── */

.verdicts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px; }
@media (max-width: 900px) { .verdicts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .verdicts { grid-template-columns: 1fr; } }
.vc {
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 16px;
  padding: 24px 20px 22px; background: rgba(255, 255, 255, .035);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.vc:hover { transform: translateY(-5px); border-color: currentColor; background: rgba(255, 255, 255, .06); }
.vc-word {
  font-family: var(--sans); font-weight: 800; font-size: 25px; line-height: 1;
  letter-spacing: .04em; margin-bottom: 8px;
}
.vc-sub { font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.vc p { margin: 14px 0 0; font-size: 14px; color: rgba(255, 255, 255, .66); }

/* ── feature grid ───────────────────────────────────────────────────────────── */

.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
@media (max-width: 900px) { .feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feats { grid-template-columns: 1fr; } }
.feat {
  background: var(--paper); border: 1px solid var(--hair); border-radius: 18px; padding: 26px 24px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feat:hover { transform: translateY(-4px); border-color: var(--lilac); box-shadow: 0 22px 44px -26px rgba(75, 49, 224, .34); }
.feat-i {
  width: 42px; height: 42px; border-radius: 12px; background: var(--mist); color: var(--violet);
  display: grid; place-items: center; margin-bottom: 16px;
}
.feat p { margin: 0; font-size: 14.5px; color: var(--soft); }

/* ── real claims ────────────────────────────────────────────────────────────── */

.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
@media (max-width: 900px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cases { grid-template-columns: 1fr; } }
/* A tile here is the app's card, printed small. Every rule below is the matching rule
   from app.css scaled down, and the parts are the same parts in the same order: who
   checked it, the claim on newsprint, the stamp across the bottom of the clipping, the
   read in the verdict's colour. It used to be a flat panel with a coloured word in the
   corner, which looked like a design for a fact-checking site rather than like DisMis.
   A reader who clicks through should recognise what opens.

   The claim is set once, on the clipping, and not again above it as the app does. In the
   app the sans title is what you tap and the clipping is the artefact; in a six-up grid
   the whole tile is the tap target, so the second copy would only cost the reader a
   scroll.

   --v-fg comes off data-v rather than the .v-DISMISSED classes the ticker uses, because
   those set `color` and this needs a variable the avatar, rules and stamp can each pull
   from without the whole card turning red. */
.case[data-v="DISMISSED"] { --v-fg: var(--red); }
.case[data-v="LEGIT"]     { --v-fg: var(--green); }
.case[data-v="MID"]       { --v-fg: var(--amber); }
.case[data-v="SUS"]       { --v-fg: var(--sus); }
.case {
  --v-fg: var(--violet);
  display: flex; flex-direction: column;
  background: #fff; color: var(--ink);
  border-radius: 22px; padding: 14px 14px 17px;
  box-shadow: 0 18px 42px -30px rgba(16, 20, 24, .9), 0 0 0 1px var(--hair);
  transition: transform .22s ease, box-shadow .22s ease;
}
.case:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 54px -28px rgba(16, 20, 24, .55), 0 0 0 1px rgba(16, 20, 24, .13);
  text-decoration: none;
}

.case-head { display: flex; align-items: center; gap: 10px; }
.case-av {
  width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--v-fg);
  display: grid; place-items: center;
  color: #fff; font-weight: 600; font-size: 11px; line-height: 1;
}
.case-who { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.case-who b { font-weight: 600; font-size: 13px; line-height: 1.1; letter-spacing: -.01em; }
.case-who i {
  font-style: normal; font-weight: 400; font-size: 10.5px; line-height: 1;
  letter-spacing: .05em; color: var(--faint);
}

/* The clipping. Same texture, same tint, same serif as the app sets a claim in, at the
   width a third of the grid gives it. The app's is 214px tall against a 311px card; a
   faithful ratio here would be 234px and six of those make the section a scroll of its
   own, so it is cut to 172 and the serif clamps at three lines instead of four. */
.case-clip {
  position: relative; margin-top: 12px; height: 172px;
  border-radius: 16px; overflow: hidden;
  background: var(--news) url('/assets/newsprint.png') center / 178% no-repeat;
  display: grid; place-items: center; padding: 16px 16px 56px;
}
/* Its own class, not `.case-clip span`. The scrim, the stamp and the stamp's rules are
   all spans inside the clipping too, and a descendant selector out-specifies their own
   classes — which set the claim's serif and its near-black on top of the stamp. */
.case-quote {
  font-family: var(--display); font-weight: 800; font-size: 16.5px; line-height: 1.18;
  letter-spacing: -.01em; color: var(--news-ink); text-align: center; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.case-scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* Deeper and starting higher than the app's, which ramps from 40% to .55 over 214px.
     Over 172px the same numbers leave the stamp sitting on mid-grey, and the stamp is
     the whole point of a tile this size. */
  background: linear-gradient(180deg, transparent 0 34%, rgba(16, 20, 24, .72) 100%);
}
.case-stamp { position: absolute; left: 0; right: 0; bottom: 13px; text-align: center; }
.case-rules {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-weight: 500; font-size: 6.5px; line-height: 1; letter-spacing: .3em;
  color: rgba(255, 255, 255, .85);
}
.case-rules i { width: 18px; height: 1px; background: var(--v-fg); }
.case-stamp b {
  display: block; margin-top: 8px;
  font-weight: 700; font-size: 19px; line-height: 1; letter-spacing: .13em;
  color: var(--v-fg);
  text-shadow: 0 1px 10px rgba(16, 20, 24, .85), 0 8px 24px rgba(16, 20, 24, .5);
}
/* The app slams its stamp on when the card comes up. Here the tiles arrive on scroll, so
   it hangs off the same .in the reveal uses and lands once, when the card does. */
.case.in .case-stamp { animation: caseSlam .8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes caseSlam {
  0%   { opacity: 0; transform: scale(2.1); }
  60%  { opacity: 1; transform: scale(.95); }
  100% { opacity: 1; transform: scale(1); }
}

.case-likely {
  margin: 13px 0 0; font-weight: 600; font-size: 12px; line-height: 1.35;
  letter-spacing: .01em; color: var(--v-fg);
}
.case small { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--soft); }

/* ── phones ─────────────────────────────────────────────────────────────────── */

.screens {
  display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: clamp(16px, 3vw, 34px);
  justify-content: center; margin-top: 52px;
}
@media (max-width: 860px) { .screens { grid-template-columns: repeat(2, minmax(0, 240px)); } }
@media (max-width: 560px) { .screens { grid-template-columns: minmax(0, 260px); } }

.phone {
  border-radius: 34px; padding: 9px; background: var(--nearblack);
  box-shadow: 0 34px 66px -30px rgba(16, 20, 24, .5);
  will-change: transform;
}
.phone-in {
  border-radius: 26px; background: var(--paper); overflow: hidden;
  display: flex; flex-direction: column; min-height: 400px;
}
.phone-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 9px; font-size: 9.5px; font-weight: 600; color: var(--faint);
  letter-spacing: .1em;
}
.phone-body { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.phone-cap {
  text-align: center; margin-top: 16px; font-size: 13px; color: var(--soft);
}
.phone-cap b { display: block; font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 2px; }

.mini-lab { font-size: 8.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.mini-clip {
  background: var(--news); color: var(--news-ink); border-radius: 4px; padding: 13px;
  font-family: var(--display); font-weight: 700; font-size: 13.5px; line-height: 1.3;
  position: relative;
}
.mini-stamp {
  display: inline-block; margin-top: 10px; border: 2.5px solid currentColor; border-radius: 5px;
  padding: 4px 10px 3px; transform: rotate(-4deg);
  font-family: var(--sans); font-weight: 800; font-size: 14px; line-height: 1; letter-spacing: .05em;
}
.mini-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  background: var(--chip); border-radius: 9px; font-size: 11px; color: var(--soft);
}
.mini-row i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); flex: none; }
.mini-p { font-size: 11.5px; color: var(--soft); line-height: 1.5; margin: 0; }
.mini-input {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 999px;
  border: 1.5px solid var(--hair); background: #fff; font-size: 11.5px; color: var(--faint);
}
.mini-cta {
  margin-top: auto; padding: 11px; border-radius: 999px; background: var(--grad); color: #fff;
  text-align: center; font-size: 12px; font-weight: 600;
}
.mini-pill {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--mist); color: var(--violet); font-size: 10px; font-weight: 600;
}

/* ── faq ────────────────────────────────────────────────────────────────────── */

.faq { margin-top: 40px; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 21px 2px; cursor: pointer; list-style: none;
  font-size: clamp(16px, 1.9vw, 18.5px); font-weight: 600; letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 13px; height: 13px; margin-top: 7px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg); transition: transform .25s ease, border-color .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--violet); }
.faq summary:hover { color: var(--violet); }
.faq-a { padding: 0 60px 24px 2px; margin: 0; color: var(--soft); font-size: 15px; }
.faq-a a { color: var(--violet); font-weight: 500; text-decoration: underline; }

/* ── closing cta ────────────────────────────────────────────────────────────── */

.close-cta { text-align: center; }
.close-cta .lede { margin-left: auto; margin-right: auto; }
.close-cta .ask { margin: 30px auto 14px; }
.close-cta .ask-note { text-align: center; }

/* ── footer ─────────────────────────────────────────────────────────────────── */

.foot { background: var(--nearblack); color: rgba(255, 255, 255, .62); padding: 62px 0 30px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px 24px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; gap: 30px; } }
.foot .mark b { color: #fff; }
.foot .mark b s { color: var(--lilac); }
.foot .mark span { color: rgba(255, 255, 255, .38); }
.foot-blurb { margin: 16px 0 0; max-width: 34ch; font-size: 13.5px; line-height: 1.65; }
.foot h4 {
  margin: 0 0 14px; color: #fff; font-size: 10.5px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot ul a { font-size: 13.5px; }
.foot ul a:hover { color: #fff; }
.foot-base {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .11);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: 12.5px; color: rgba(255, 255, 255, .42);
}

/* share row */
.share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.share button, .share a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); background: transparent;
  color: rgba(255, 255, 255, .8); font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.share button:hover, .share a:hover { background: #fff; color: var(--nearblack); border-color: #fff; text-decoration: none; }

/* ── scroll reveal ──────────────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
.reveal.d4 { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .mcard-stamp, .mcard-head { opacity: 1; }
  .ticker-track { animation: none; }
}