/* Clipd landing page.

   The page speaks in the app's own typeface. Every card in Clipd renders in a
   monospace, and the panel's own labels are mono, so IBM Plex Mono carries the
   display type here rather than being reserved for code. Plex Sans, drawn to
   sit with it, carries the reading text. Both are self-hosted: the page makes
   no external request of any kind, which is what lets the CSP say
   default-src 'self' and connect-src 'none' and still work.

   The page commits to one light theme. It does not follow the viewer's system
   setting, so `color-scheme: light` is declared once and every colour lives on
   :root with nothing behind a media query. If dark is ever wanted back, it is
   a second token block, not a rewrite.

   The demo stays dark regardless, and that is the point rather than an
   oversight. Clipd's panel is dark whatever your Mac is set to, so the
   miniature of it reads as the app sitting on top of the page, which is
   exactly what the app does. The product screenshots further down are dark for
   the same reason, so the dark surfaces on a light page are a family, not a
   stray section. */

/* ---------- faces ---------- */

@font-face {
  font-family: "Plex Sans";
  src: url("fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("fonts/plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --ground: #f7f6fb;
  --surface: #ffffff;
  --sunk: #eeecf6;
  --line: #e2dff0;
  --line-strong: #c9c4e0;
  --text: #14131d;
  --muted: #5d5872;
  --accent: #5b32d6;
  --accent-quiet: #ede7ff;
  --accent-ink: #ffffff;
  --select: #1f63e8;
  --warn: #8a5a0d;
  --shadow: 0 1px 2px rgba(58, 44, 110, .07), 0 14px 34px rgba(58, 44, 110, .09);

  /* The demo keeps its own palette in both themes. */
  --hud: #131320;
  --hud-2: #1c1b2b;
  --hud-line: #2b2940;
  --hud-text: #ecebf5;
  --hud-muted: #8b86a3;
  --hud-select: #2f7bff;
  --t-kw: #f97fb5;
  --t-type: #7fb4ff;
  --t-str: #ffb86c;
  --t-com: #6f6b85;
  --t-num: #c6a2ff;

  --sans: "Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s--1: .8125rem;
  --s-0: 1.0625rem;
  --s-1: 1.25rem;
  --s-2: 1.5rem;
  --s-3: 2rem;
  --s-4: 2.75rem;
  --s-5: 3.75rem;

  --col: 1140px;
  --prose: 60ch;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--s-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* Widows on the last line of a paragraph, which balance does not fix. */
  text-wrap: pretty;
  -webkit-tap-highlight-color: rgba(93, 50, 214, .14);
}

/* Every anchor target sits under a 62px sticky masthead. Without this, a jump
   to #privacy puts its heading behind the bar. */
[id] { scroll-margin-top: 5.5rem; }

a, button, summary { touch-action: manipulation; }

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

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, ul, ol { margin: 0; }

a { color: var(--accent); text-underline-offset: 3px; }

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

.wrap { width: min(100% - 2.5rem, var(--col)); margin-inline: auto; }
.prose { max-width: var(--prose); }
.muted { color: var(--muted); }
.mt-s { margin-top: .9rem; }
.mt-m { margin-top: 1.25rem; }

.skip {
  position: absolute;
  left: 1.25rem;
  top: -4rem;
  z-index: 60;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .6rem 1rem;
  border-radius: 0 0 9px 9px;
  font-size: var(--s--1);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}

.skip:focus { top: 0; }

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

/* Grid and flex children default to min-width: auto, so one wide child drags
   its whole row past the viewport. Measured before this line existed: at 375px
   the document was 577px wide. */
.split > *, .keys > *, .steps > li > div, .snippet { min-width: 0; }

/* ---------- type devices ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--s--1);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(1.95rem, 4.9vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}

h2 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, var(--s-4));
  line-height: 1.1;
  letter-spacing: -.04em;
}

h3 { font-size: var(--s-1); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }

kbd {
  font-family: var(--mono);
  font-size: .82em;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: .1em .42em;
  color: var(--text);
  white-space: nowrap;
  display: inline-block;
  transition: transform .09s ease, border-bottom-width .09s ease, background-color .09s ease;
}

/* Pressing the real keys presses the ones on the page. The page is about a
   keyboard shortcut, so it should notice one. */
kbd[data-down="true"] {
  transform: translateY(1px);
  border-bottom-width: 1px;
  background: var(--accent-quiet);
}

code {
  font-family: var(--mono);
  font-size: .875em;
  background: var(--sunk);
  border-radius: 4px;
  padding: .08em .34em;
}

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}

.masthead[data-scrolled="true"] { border-bottom-color: var(--line); }

.masthead__inner { display: flex; align-items: center; gap: 1.5rem; height: 62px; }

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -.03em;
  font-size: 1.0625rem;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.brand img { width: 25px; height: 25px; border-radius: 6px; }

.navlinks {
  display: flex;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: var(--s--1);
}

.navlinks a {
  color: var(--muted);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}

.navlinks a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}

.navlinks a:hover { color: var(--text); }
.navlinks a:hover::after,
.navlinks a[aria-current="true"]::after { transform: scaleX(1); }
.navlinks a[aria-current="true"] { color: var(--accent); }

@media (max-width: 46rem) {
  .navlinks a:not(.navlinks__keep) { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.2rem;
  border-radius: 9px;
  font-family: var(--sans);
  font-size: var(--s-0);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s ease, color .2s ease;
}

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn--sm { padding: .45rem .85rem; font-size: var(--s--1); }

/* A third weight of action, so the hero is not the usual filled-plus-ghost
   pair. Downloading is a decision; reading the source is a door. */
.textlink {
  display: inline-flex;
  align-items: center;
  align-self: center;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: .72rem .25rem;
  position: relative;
}

.textlink::after {
  content: "";
  position: absolute;
  left: .25rem; right: .25rem; bottom: .6rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.textlink:hover { color: var(--accent); }
.textlink:hover::after { transform: scaleX(1); }
.textlink:active { transform: translateY(1px); }

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

.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 0; }
.hero__lede { max-width: 42rem; }
.hero h1 { margin: 1rem 0 1.25rem; }
.hero__sub { font-size: var(--s-1); color: var(--muted); max-width: 33rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.hero__meta {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: var(--s--1);
  color: var(--muted);
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .7rem;
}

.hero__meta span::after { content: " /"; opacity: .45; }
.hero__meta span:last-child::after { content: ""; }

/* ---------- the demo: a working miniature of the app ---------- */

.demo {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  border-radius: 16px;
  overflow: hidden;
  background: var(--hud);
  border: 1px solid var(--hud-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 80px rgba(0, 0, 0, .32);
  color: var(--hud-text);
  transition: box-shadow .3s var(--ease);
}

.demo[data-armed="true"] { box-shadow: 0 30px 80px rgba(47, 123, 255, .22); }

.demo__editor { padding: 0 0 1.1rem; position: relative; }

.demo__chrome {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--hud-line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--hud-muted);
}

.dot { width: 10px; height: 10px; border-radius: 50%; background: #3a3750; }
.demo__file { margin-left: .6rem; transition: color .25s ease; }
.demo[data-armed="true"] .demo__file { color: var(--hud-text); }

.demo__out {
  margin: 0;
  padding: 1.4rem 1.25rem .6rem;
  min-height: 8.5rem;
  font-family: var(--mono);
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.75;
  white-space: pre;
  overflow-x: auto;
  color: var(--hud-text);
}

.demo__out code { background: none; padding: 0; font-size: inherit; }

.caret {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--hud-select);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.demo__hint {
  padding: .2rem 1.25rem 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--hud-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.demo__hint kbd {
  background: var(--hud-2);
  border-color: var(--hud-line);
  color: var(--hud-text);
}

.demo__hint kbd[data-down="true"] { background: var(--hud-select); border-color: var(--hud-select); }

/* The strip. Flush to the bottom edge, exactly as the real panel is flush to
   the bottom of your screen. */
.strip {
  background: rgba(255, 255, 255, .028);
  border-top: 1px solid var(--hud-line);
  padding-bottom: .9rem;
}

.strip__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.25rem;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--hud-muted);
}

.strip__search { flex: 1; }

.tab {
  border-radius: 999px;
  padding: .2rem .65rem;
  border: 1px solid transparent;
}

.tab--on { background: var(--hud-select); color: #fff; }

.cards {
  list-style: none;
  padding: 0 1.25rem;
  margin: 0;
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.card {
  flex: 0 0 15.5rem;
  scroll-snap-align: start;
  background: var(--hud-2);
  border: 1px solid var(--hud-line);
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  transition: transform .22s var(--ease), border-color .22s ease, box-shadow .22s var(--ease);
}

.card:hover { transform: translateY(-3px); border-color: var(--hud-select); }
.card:active { transform: translateY(-1px) scale(.99); }
.card:focus-visible { outline-offset: 2px; }

.card[aria-selected="true"] {
  border-color: var(--hud-select);
  box-shadow: 0 0 0 1px var(--hud-select), 0 10px 26px rgba(47, 123, 255, .25);
}

.card__head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .6rem .7rem .5rem;
}

.card[aria-selected="true"] .card__head { background: var(--hud-select); }

.card__lang { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.card__age { font-family: var(--mono); font-size: 10px; color: var(--hud-muted); margin-left: auto; }
.card[aria-selected="true"] .card__age { color: rgba(255, 255, 255, .78); }

.card__body {
  margin: 0;
  padding: .55rem .7rem;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  white-space: pre;
  overflow: hidden;
  height: 6.4rem;
  color: var(--hud-text);
  /* The app clips a card's preview too. The fade is what makes the clip read
     as deliberate rather than as a half-drawn line. */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

.card__foot {
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  padding: .4rem .7rem .55rem;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--hud-muted);
}

.card__num {
  margin-left: auto;
  transition: color .2s ease;
}

.card:hover .card__num, .card[aria-selected="true"] .card__num { color: var(--hud-select); }
.card[aria-selected="true"] .card__num { color: var(--hud-text); }

/* Syntax colours, taken from what the app actually draws. */
.t-kw { color: var(--t-kw); }
.t-type { color: var(--t-type); }
.t-str { color: var(--t-str); }
.t-com { color: var(--t-com); }
.t-num { color: var(--t-num); }

/* ---------- sections ---------- */

.section { padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(4.75rem, 9vw, 7.5rem); border-top: 1px solid var(--line); }
.section--sunk { background: var(--sunk); }
.section__head { margin-bottom: 3rem; }
.section__head p { color: var(--muted); margin-top: 1rem; max-width: var(--prose); }
.section__head .eyebrow { display: block; margin-bottom: 1rem; }

/* ---------- the argument: ruled, not boxed ---------- */

.claims {
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.claim { border-top: 2px solid var(--accent); padding-top: 1.1rem; }
.claim h3 { margin-bottom: .55rem; }
.claim p { color: var(--muted); font-size: var(--s--1); line-height: 1.68; }

/* ---------- split rows ---------- */

.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; grid-template-columns: 1fr; }
.split + .split { margin-top: clamp(3rem, 6vw, 4.5rem); }

@media (min-width: 62rem) {
  .split { grid-template-columns: 5fr 7fr; }
  .split--flip > .shot { order: -1; }
}

.split h3 { font-size: var(--s-2); margin-bottom: .9rem; }
.split p { color: var(--muted); }
.split p + p { margin-top: .8rem; }

.shot {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--surface);
}

/* ---------- keyboard table ---------- */

.keys { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; grid-template-columns: 1fr; }

@media (min-width: 62rem) { .keys { grid-template-columns: 1fr 1fr; } }

.keys h2 { margin-bottom: 1rem; }

.shortcuts { list-style: none; padding: 0; margin: 0; font-size: var(--s--1); }

.shortcuts li {
  font-variant-numeric: tabular-nums;
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: .75rem;
  align-items: baseline;
  color: var(--muted);
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}

.shortcuts li:first-child { border-top: 1px solid var(--line); }

/* ---------- privacy layers ---------- */

.layers { list-style: none; padding: 0; margin: 0 0 3rem; }

.layer {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.layer:first-child { border-top: 1px solid var(--line); }

.layer__tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: .3rem;
}

.layer h3 { margin-bottom: .35rem; }
.layer p { color: var(--muted); font-size: var(--s--1); max-width: var(--prose); }

.finding {
  border-left: 2px solid var(--accent);
  padding: .35rem 0 .35rem 1.75rem;
}

.finding h3 { font-size: var(--s-2); margin-bottom: .9rem; }
.finding p { max-width: var(--prose); }
.finding p + p { margin-top: .85rem; }
.finding .quiet { color: var(--muted); font-size: var(--s--1); }

/* ---------- flow ---------- */

.flow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.flow__step { position: relative; padding-top: 2.5rem; }

/* The line is the sync. Each stop puts a node on it, and the line only runs
   between stops, never off the end of the last one. */
.flow__step::before {
  content: "";
  position: absolute;
  left: 0; right: -2rem; top: .55rem;
  height: 1px;
  background: var(--line-strong);
}

.flow__step:last-child::before { right: 0; }

.flow__step::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ground);
  border: 2px solid var(--accent);
}

@media (max-width: 62rem) {
  .flow__step::before { right: 0; }
}

.flow__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: .7rem;
}

.flow__step h3 { margin-bottom: .5rem; }
.flow__step p { color: var(--muted); font-size: var(--s--1); }

/* ---------- numbered steps ---------- */

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.9rem; }

.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1rem;
  align-items: start;
}

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  padding-top: .28rem;
  letter-spacing: .06em;
}

.steps h3 { margin-bottom: .35rem; }
.steps p { color: var(--muted); font-size: var(--s--1); max-width: var(--prose); }

.snippet {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: .6rem .6rem .6rem .95rem;
  max-width: 44rem;
}

/* The code scrolls, not the block. Scrolling the block put Copy off the right
   edge on a phone, unreachable until you scrolled the thing you wanted. */
.snippet code {
  background: none;
  padding: 0 0 .2rem;
  font-size: var(--s--1);
  white-space: pre;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  display: block;
}

.copy {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .35rem .6rem;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .18s var(--ease);
}

.copy:hover { color: var(--accent); border-color: var(--accent); }
.copy:active { transform: scale(.96); }
.copy[data-copied="true"] { color: var(--select); border-color: var(--select); transform: scale(1.06); }

.step__shot { margin-top: 1.1rem; max-width: 21rem; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; box-shadow: var(--shadow); }

/* ---------- caveats ---------- */

.caveats { list-style: none; padding: 0; margin: 0; }

.caveat {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.caveat:first-child { border-top: 1px solid var(--line); }
.caveat__mark { font-family: var(--mono); color: var(--warn); font-weight: 600; padding-top: .1rem; }
.caveat h3 { margin-bottom: .35rem; }
.caveat p { color: var(--muted); font-size: var(--s--1); max-width: var(--prose); }

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

.notfound__title { font-family: var(--mono); font-weight: 600; font-size: clamp(1.8rem, 4.4vw, 3rem); letter-spacing: -.03em; line-height: 1.1; margin-top: 1rem; }

.footer { border-top: 1px solid var(--line); padding: 3rem 0 4rem; font-size: var(--s--1); color: var(--muted); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: baseline; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; font-family: var(--mono); }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* ---------- motion ----------

   Scroll-driven, so it needs no JavaScript and nothing is hidden when the
   feature is absent. The earlier IntersectionObserver version started every
   section at opacity 0, and one section stayed there. */

@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section__head, .claim, .split, .layer, .flow__step, .caveat {
      animation: settle .5s var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }
  }
}

@keyframes strip-up {
  from { transform: translateY(102%); }
  to { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .strip { animation: strip-up .8s var(--ease) .25s both; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret { animation: none; }
  .btn:hover, .card:hover { transform: none; }
}