/* ============================================================
   WhisprCatch site styles (shared by every page under site/).
   Design tokens are the single source of truth (docs/DESIGN.md
   Part A, "warm paper"). Never hand-pick a colour below.
   ============================================================ */
:root {
  color-scheme: light;

  /* surfaces */
  --paper:    #fcfbec;
  --paper-2:  #fffef7;
  --paper-3:  #f3f1de;

  /* ink */
  --ink:      #16191b;
  --ink-2:    #545b57;
  --ink-3:    #878d86;
  --rule:     rgba(22, 25, 27, .12);
  --rule-2:   rgba(22, 25, 27, .22);

  /* deep green blocks */
  --forest:   #063c34;
  --forest-2: #0a4f44;
  --forest-3: #0e6154;
  --on-forest:      #eaf6f2;
  --on-forest-dim:  rgba(234, 246, 242, .68);
  --on-forest-rule: rgba(234, 246, 242, .16);

  /* accents */
  --mint:     #5de8cd;
  --mint-2:   #9cf3e2;
  --on-mint:  #06342c;
  --ember:    #e4572e;
  --butter:   #ffc96b;

  /* type */
  --sans:  "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "Fragment Mono", ui-monospace, "JetBrains Mono", monospace;

  /* geometry */
  --wrap: 1140px;
  --wrap-narrow: 800px;
  --pad: 24px;
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* elevation */
  --sh-1: 0 1px 2px rgba(16, 32, 28, .05), 0 2px 8px -4px rgba(16, 32, 28, .10);
  --sh-2: 0 2px 6px rgba(16, 32, 28, .06), 0 18px 44px -18px rgba(16, 32, 28, .22);
  --sh-3: 0 30px 80px -34px rgba(16, 32, 28, .40);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* .btn/.cmd set display, which would otherwise beat the UA rule for [hidden] */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16.5px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--mint); color: var(--on-mint); }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: var(--wrap-narrow); }
/* grid and flex children default to min-width:auto, which lets one nowrap
   command line stretch the whole page wider than the viewport */
.plat, .step, .stat, .proof, .calc, .split > *, .wedge-grid > * { min-width: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------------- type ---------------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 8.4vw, 108px);
  line-height: .95;
  letter-spacing: -.032em;
}
h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(33px, 5vw, 60px);
  line-height: 1.03;
  letter-spacing: -.026em;
}
h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 2.3vw, 28px);
  line-height: 1.16;
  letter-spacing: -.018em;
}
em, .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.eyebrow {
  font: 600 12px/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--rule-2); flex: none;
}
.eyebrow.center { justify-content: center; }
.lede {
  font-size: clamp(17px, 1.55vw, 20.5px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
}
.small { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
code, kbd, .mono { font-family: var(--mono); font-size: .92em; }
kbd {
  /* system-ui first: Fragment Mono has no ⌘ / ⌥ glyphs */
  font-family: system-ui, -apple-system, "Segoe UI Symbol", var(--sans);
  background: var(--paper-3); border: 1px solid var(--rule);
  border-bottom-width: 2px; border-radius: 6px;
  padding: 1.5px 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.mark { background: linear-gradient(transparent 62%, var(--butter) 62%); padding: 0 .06em; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 15.5px/1 var(--sans);
  padding: 15px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--mint); color: var(--on-mint);
  box-shadow: var(--sh-1);
  cursor: pointer; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--mint-2); transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--rule-2); box-shadow: none;
}
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink); }
.btn-dark { background: var(--forest); color: var(--on-forest); }
.btn-dark:hover { background: var(--forest-2); }
.btn-sm { padding: 11px 18px; font-size: 14px; }
.btn svg { flex: none; }

/* command chip */
.cmd {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 13px 14px 13px 16px;
  cursor: pointer;
  font-family: var(--mono); font-size: 13.5px; color: var(--ink);
  transition: border-color .16s ease, background .16s ease;
  overflow: hidden;
}
.cmd:hover { border-color: var(--rule-2); }
.cmd code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd .p { color: var(--ink-3); user-select: none; }
.cmd-copy {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font: 500 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
.cmd.copied { border-color: var(--forest); }
.cmd.copied .cmd-copy { color: var(--forest); }

/* ---------------- nav ---------------- */
.nav-shell {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding: 14px var(--pad) 0;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 254, 247, .86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 9px 9px 9px 20px;
  box-shadow: var(--sh-1);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.nav.stuck { box-shadow: var(--sh-2); border-color: var(--rule-2); }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 17px/1 var(--sans); letter-spacing: -.02em; text-decoration: none;
}
.brand svg { color: var(--forest); }
.seg {
  display: inline-flex; background: var(--paper-3); border-radius: var(--r-pill); padding: 3px;
  border: 1px solid transparent;
}
.seg button {
  font: 600 13.5px/1 var(--sans); color: var(--ink-2);
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 15px; border-radius: var(--r-pill);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}
.seg button[aria-selected="true"] { background: var(--paper-2); color: var(--ink); box-shadow: var(--sh-1); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  font: 500 14.5px/1 var(--sans); color: var(--ink-2); text-decoration: none;
  padding: 9px 12px; border-radius: var(--r-pill); transition: color .16s ease, background .16s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--paper-3); }
.nav .btn { padding: 11px 18px; font-size: 14.5px; }
@media (max-width: 900px) { .nav-links a.hide-sm { display: none; } }
@media (max-width: 620px) {
  .nav { padding-left: 16px; gap: 8px; }
  .nav .seg { display: none; }
  .nav-links a { padding: 8px 9px; font-size: 14px; }
}

/* ---------------- sections ---------------- */
section { position: relative; }
.band { padding: clamp(72px, 9.5vw, 132px) 0; }
.band-paper-3 { background: var(--paper-3); }
.band-forest {
  background: var(--forest); color: var(--on-forest);
}
.band-forest h2, .band-forest .display { color: var(--on-forest); }
.band-forest .lede { color: var(--on-forest-dim); }
.band-forest .eyebrow { color: var(--on-forest-dim); }
.band-forest .eyebrow::before { background: var(--on-forest-rule); }
.head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(38px, 5vw, 62px); }
.head.center { align-items: center; text-align: center; }
.head.center .lede { text-align: center; }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

/* ---------------- hero ---------------- */
.hero { padding: clamp(120px, 15vw, 180px) 0 0; text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  width: 120vw; height: 70vh; left: 50%; top: -18vh; transform: translateX(-50%);
  background: radial-gradient(48% 50% at 50% 40%, rgba(93, 232, 205, .22), transparent 70%);
  pointer-events: none;
}
.hero .display { margin: 18px auto 0; max-width: 14ch; }
.hero .display .it { display: block; }
.hero .lede { margin: 26px auto 0; text-align: center; max-width: 60ch; }
.hero .eyebrow { justify-content: center; }
.cta-row {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px;
}
.hero-cmd { max-width: 520px; margin: 18px auto 0; }
.hero-note {
  margin: 20px auto 0; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center;
  font-size: 13.5px; color: var(--ink-3);
}
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }

/* price tag under the fold-line */
.pricetag {
  display: inline-flex; align-items: center; gap: 12px; margin: 30px auto 0;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-pill); padding: 9px 9px 9px 18px;
  font-size: 14.5px; color: var(--ink-2); box-shadow: var(--sh-1);
}
.pricetag s { color: var(--ink-3); text-decoration-color: var(--ember); text-decoration-thickness: 1.5px; }
.pricetag b {
  background: var(--forest); color: var(--on-forest); font-weight: 600;
  padding: 7px 14px; border-radius: var(--r-pill); font-size: 14px;
}

/* hero media */
.stage { margin-top: clamp(46px, 6vw, 76px); padding-bottom: clamp(60px, 8vw, 96px); }
.screen {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: var(--forest); box-shadow: var(--sh-3);
  border: 1px solid rgba(22, 25, 27, .10);
}
.screen video { width: 100%; height: auto; display: block; }
.stage-cap {
  margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--ink-3);
}

/* ---------------- tape ---------------- */
/* The ribbon is tilted, so it has to be wider than the viewport (its ends hang
   off both sides) and the wrapper has to be taller than the ribbon (the tilt
   lifts one end above it). Get either wrong and the ends show up as cut corners. */
.tape-wrap { overflow: hidden; padding: clamp(18px, 2.6vw, 44px) 0; }
.tape {
  width: 116%; margin-left: -8%;
  background: var(--ink); color: var(--paper);
  transform: rotate(-1.6deg);
  padding: 15px 0; overflow: hidden; white-space: nowrap;
}
.tape .track { display: inline-flex; gap: 0; animation: slide 38s linear infinite; }
.tape .track span {
  font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  padding: 0 26px; display: inline-flex; align-items: center; gap: 26px;
}
.tape .track span::after { content: "✳"; color: var(--mint); font-size: 11px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------- stats ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.stat {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 30px 26px; box-shadow: var(--sh-1);
}
.band-forest .stat { background: var(--forest-2); border-color: var(--on-forest-rule); box-shadow: none; }
.stat .val {
  font-family: var(--serif); font-size: clamp(42px, 5vw, 60px); line-height: 1; letter-spacing: -.03em;
}
.stat .val .unit { font-size: .42em; letter-spacing: 0; color: var(--ink-3); margin-left: .12em; }
.band-forest .stat .val .unit { color: var(--on-forest-dim); }
.stat .lbl { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.band-forest .stat .lbl { color: var(--on-forest-dim); }

/* ---------------- price wedge ---------------- */
.wedge-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center;
}
@media (max-width: 900px) { .wedge-grid { grid-template-columns: 1fr; } }
.calc {
  background: var(--forest-2); border: 1px solid var(--on-forest-rule);
  border-radius: var(--r-xl); padding: clamp(24px, 3.4vw, 38px);
}
.calc-row { margin-bottom: 26px; }
.calc-row:last-of-type { margin-bottom: 0; }
.calc-lab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-forest-dim);
  margin-bottom: 14px;
}
.calc-lab output { font-family: var(--mono); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--on-forest); }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px;
  background: var(--on-forest-rule); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mint); border: 3px solid var(--forest-2); box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--mint);
  border: 3px solid var(--forest-2); cursor: grab;
}
.calc-out {
  margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--on-forest-rule);
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.calc-out div span {
  display: block; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-forest-dim); margin-bottom: 12px;
}
.calc-out div b {
  font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1; letter-spacing: -.03em; display: block;
}
.calc-out .them b { color: var(--ember); }
.calc-out .us b { color: var(--mint); }

/* ---------------- steps ---------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 32px 28px; box-shadow: var(--sh-1);
}
.step .n {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  letter-spacing: .1em; margin-bottom: 22px; display: block;
}
.step h3 { margin-bottom: 12px; }
.step p { color: var(--ink-2); font-size: 15.5px; }

/* ---------------- app marquee ---------------- */
.apps { overflow: hidden; padding: 6px 0; position: relative; }
.apps::before, .apps::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.apps::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.apps::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.apps .track { display: inline-flex; gap: 10px; animation: slide 46s linear infinite; }
.apps .track:hover { animation-play-state: paused; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-pill);
  padding: 11px 20px; font: 500 14.5px/1 var(--sans); color: var(--ink-2); white-space: nowrap;
}
/* the app mark, referenced out of the sprite; colour comes from an inline
   brand hex on the <svg>, which is why these are not tokens */
.chip .ico { width: 17px; height: 17px; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------- feature split ---------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.feature-list { display: flex; flex-direction: column; gap: 4px; margin-top: 34px; }
.feature-list li {
  list-style: none; display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule);
}
.band-forest .feature-list li { border-color: var(--on-forest-rule); }
.feature-list li:last-child { border-bottom: 1px solid var(--rule); }
.band-forest .feature-list li:last-child { border-color: var(--on-forest-rule); }
.feature-list .tick { flex: none; color: var(--mint); margin-top: 3px; }
.feature-list h4 { font: 600 16px/1.4 var(--sans); margin-bottom: 4px; }
.feature-list p { font-size: 15px; color: var(--ink-2); }
.band-forest .feature-list p { color: var(--on-forest-dim); }

/* proof card */
.proof {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-xl);
  padding: clamp(26px, 3.4vw, 40px); box-shadow: var(--sh-2);
}
.band-forest .proof { background: var(--forest-2); border-color: var(--on-forest-rule); box-shadow: none; }
.proof .term {
  font-family: var(--mono); font-size: 13px; line-height: 1.9; color: var(--ink-2);
  background: var(--paper-3); border-radius: var(--r-sm); padding: 18px 20px; overflow-x: auto;
}
.band-forest .proof .term { background: rgba(0, 0, 0, .28); color: var(--on-forest-dim); }
.proof .term .ok { color: var(--forest); }
.band-forest .proof .term .ok { color: var(--mint); }
.proof .term .dim { color: var(--ink-3); }
.band-forest .proof .term .dim { color: rgba(234, 246, 242, .42); }

/* ---------------- comparison table ---------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper-2); box-shadow: var(--sh-1); }
table { border-collapse: collapse; width: 100%; min-width: 640px; }
th, td { text-align: left; padding: 17px 22px; border-bottom: 1px solid var(--rule); font-size: 15px; vertical-align: top; }
thead th {
  font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  background: var(--paper-3); white-space: nowrap;
}
thead th.us { color: var(--forest); }
tbody th { font: 500 15px/1.45 var(--sans); color: var(--ink); width: 34%; }
td.us { background: rgba(93, 232, 205, .10); font-weight: 500; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.yes { color: var(--forest); font-weight: 600; }
.no { color: var(--ink-3); }

/* ---------------- install ---------------- */
.plats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .plats { grid-template-columns: 1fr; } }
.plat {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 30px 28px; box-shadow: var(--sh-1); display: flex; flex-direction: column;
}
.plat h3 { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.plat > p { color: var(--ink-2); font-size: 15px; margin-bottom: 20px; }
.plat .cmd { margin-top: auto; }
.plat .cmd + .cmd { margin-top: 10px; }
.plat-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }
.plat .btn { align-self: flex-start; margin-bottom: 10px; }

/* ---------------- faq ---------------- */
.faq-list { border-top: 1px solid var(--rule); }
details {
  border-bottom: 1px solid var(--rule);
}
summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); letter-spacing: -.015em; line-height: 1.3;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px;
  margin-top: -6px;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) center/12px 1.5px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) center/1.5px 12px no-repeat;
  transition: transform .2s ease;
}
details[open] summary::after { transform: rotate(45deg); }
details .answer { padding: 0 60px 26px 0; color: var(--ink-2); font-size: 16px; max-width: 72ch; }
details .answer a { color: var(--forest); text-underline-offset: 3px; }

/* ---------------- closer ---------------- */
.closer { text-align: center; }
.closer .display { margin: 0 auto; max-width: 15ch; }

/* ---------------- footer ---------------- */
footer { background: var(--paper-3); padding: clamp(56px, 7vw, 84px) 0 40px; border-top: 1px solid var(--rule); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h5 {
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}
.foot-grid ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.foot-grid a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.foot-grid a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-blurb { font-size: 14.5px; color: var(--ink-2); max-width: 34ch; margin-top: 14px; }
.foot-end {
  margin-top: clamp(44px, 6vw, 66px); padding-top: 26px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: baseline; justify-content: space-between;
}
.foot-quirk { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--ink); }
.foot-meta { font-size: 13.5px; color: var(--ink-3); }
.foot-meta a { color: var(--ink-2); }

/* ---------------- motion preference ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tape .track, .apps .track { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ============================================================
   Long-form pages (comparison / article)
   ============================================================ */
.crumbs {
  font-size: 13px; color: var(--ink-3); margin-bottom: 22px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { color: var(--rule-2); }

.page-head { padding: clamp(120px, 14vw, 168px) 0 0; }
.page-head h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 6vw, 76px); line-height: 1; letter-spacing: -.03em;
  max-width: 18ch;
}

/* the short answer, up top, for humans and answer engines alike */
.answer-box {
  background: var(--forest); color: var(--on-forest);
  border-radius: var(--r-xl); padding: clamp(26px, 3.6vw, 42px);
  margin-top: clamp(30px, 4vw, 46px);
  box-shadow: var(--sh-2);
}
.answer-box h2 {
  font: 600 12px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: var(--on-forest-dim); margin-bottom: 18px;
}
.answer-box p {
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: var(--on-forest);
  max-width: 62ch;
}
.answer-box p + p { margin-top: 14px; font-size: 16px; color: var(--on-forest-dim); }
.answer-box .btn { margin-top: 26px; }

.prose { max-width: 74ch; }
.prose h2 { margin: clamp(52px, 6vw, 78px) 0 20px; }
.prose h3 {
  font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -.01em;
  margin: 34px 0 12px;
}
.prose p { margin-bottom: 18px; color: var(--ink-2); }
.prose p strong, .prose li strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 20px 20px; color: var(--ink-2); }
.prose li { margin-bottom: 9px; }
.prose a { color: var(--forest); text-underline-offset: 3px; }
.prose .cmd { max-width: 560px; margin: 8px 0 20px; }

.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 8px; }
@media (max-width: 860px) { .picks { grid-template-columns: 1fr; } }
.pick {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 28px 26px; box-shadow: var(--sh-1); min-width: 0;
}
.pick.ours { border-color: var(--forest); }
.pick h3 { font-family: var(--serif); font-weight: 400; font-size: 25px; margin: 0 0 6px; letter-spacing: -.02em; }
.pick .who { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.pick ul { list-style: none; margin: 0; }
.pick li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); margin-bottom: 10px; }
.pick li::before { content: "→"; color: var(--mint); flex: none; }
.pick.theirs li::before { color: var(--ink-3); }

/* ============================================================
   Small screens: a couple of elements that read better stacked
   ============================================================ */
@media (max-width: 560px) {
  /* the rule before an eyebrow strands itself once the label wraps */
  .eyebrow::before { display: none; }

  .pricetag {
    flex-direction: column; gap: 10px; text-align: center;
    padding: 15px 18px; border-radius: var(--r-lg);
  }
  .pricetag s { white-space: nowrap; }

  .cta-row .btn { width: 100%; }
  .calc-out { grid-template-columns: 1fr; gap: 24px; }
}