/*
 * varve.css
 *
 * THE PAGE IS A VARVE SEQUENCE. Sections alternate between a near-white
 * lamina and a saturated one, the way a lake lays down a pale meltwater layer
 * over a dark winter one. That is not decoration: it is the fix for the defect
 * this site was built after. The sibling before it solved a ground at L 0.950
 * and cards at L 0.983 — 1.11:1 — so every section, every card and every
 * hairline sat in one continuous fog and the page had no rhythm at all. Here
 * the ground carries chroma 0.060 and a card clears it by 1.31:1.
 *
 * Type is loaded, not inherited. "Iowan Old Style, Palatino, Georgia, serif"
 * renders as a different typeface on every platform, and the one it lands on
 * outside macOS is Times.
 */

:root {
  --serif: Newsreader, "Iowan Old Style", Palatino, Georgia, serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wide: 1180px;
  --gut: clamp(20px, 5vw, 40px);
  --r: 20px;
  --r-lg: 26px;
  --shadow: 0 1px 2px rgba(12, 48, 52, .05), 0 8px 26px -12px rgba(12, 48, 52, .16);
  --shadow-lg: 0 2px 6px rgba(12, 48, 52, .06), 0 30px 60px -28px rgba(12, 48, 52, .34);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.62 var(--sans);
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Scroll reveal must never hide the page from a reader without JS. The rule is
   scoped to .js, which an inline script sets before any stylesheet loads. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

a { color: var(--accent); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- *
 *  Bands — the laminae
 * ---------------------------------------------------------------- */
.band { position: relative; padding: clamp(64px, 9vw, 116px) var(--gut); }
.band > .in { max-width: var(--wide); margin: 0 auto; }
.band-airy { background: var(--airy); }
.band-ground { background: var(--ground); }
.band-sunk { background: var(--sunk); }

/* A DARK BAND REDEFINES ITS INK TOKENS. It does not list the selectors
   somebody thought of — that is how a sibling shipped every `.panel p`, every
   list item and every icon dark-on-dark while its checks passed. */
.band-deep {
  background: var(--deep-band);
  --ink: var(--on-deep);
  --ink-mid: var(--on-deep-faint);
  --ink-faint: var(--on-deep-faint);
  --accent: var(--on-deep);
  --warm: var(--warm-on-deep);
  --card: var(--deep-card);
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .26);
  --sunk: rgba(255, 255, 255, .05);
  color: var(--on-deep);
}
.band-deep a { color: var(--warm-on-deep); }

/* The hairline between two laminae. */
.band + .band { border-top: 1px solid color-mix(in oklab, var(--line) 55%, transparent); }
.band-deep + .band, .band + .band-deep { border-top: 0; }

/* ---------------------------------------------------------------- *
 *  Navigation
 * ---------------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 60;
  padding: 14px var(--gut) 0;
  pointer-events: none;
}
.bar-in {
  pointer-events: auto;
  max-width: var(--wide); margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 18px;
  background: color-mix(in oklab, var(--card) 82%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.bar-mark {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--serif); font-size: 22px; letter-spacing: -.02em;
  color: var(--ink); margin-right: 10px; flex: 0 0 auto;
}
.bar-mark svg { display: block; }
.bar-links { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; }
.bar-links a {
  /* Two classes, because `.bar-nav a` beat `.bar-cta` in a sibling and put its
     primary call to action on the page at 1.03:1. */
  color: var(--ink-mid); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 8px 12px; border-radius: 999px; white-space: nowrap;
}
.bar-links a:hover { color: var(--ink); background: color-mix(in oklab, var(--ground) 60%, transparent); }
.bar-links a[aria-current="page"] { color: var(--ink); background: color-mix(in oklab, var(--ground) 80%, transparent); }
a.btn.bar-cta { flex: 0 0 auto; }
.bar-x {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-mid); text-decoration: none; margin-right: 2px;
}
.bar-x:hover { color: var(--ink); background: color-mix(in oklab, var(--ground) 70%, transparent); }
.foot-x {
  display: inline-flex !important; align-items: center; gap: 8px;
  margin-top: 16px; padding: 8px 14px 8px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); color: var(--on-deep) !important;
  font-size: 14px; text-decoration: none;
}
.foot-x:hover { background: rgba(255,255,255,.08); }
.bar-burger {
  display: none; margin-left: auto; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  align-items: center; justify-content: center; cursor: pointer;
}
@media (max-width: 940px) {
  .bar-links { display: none; }
  .bar-burger { display: inline-flex; }
  .bar-in { padding-right: 8px; }
}
@media (max-width: 560px) {
  /* At 390px the call to action was wider than the wordmark and the menu put
     together. It stays — a nav with no way into the product is worse — but it
     stops shouting. */
  a.btn.bar-cta { padding: 11px 15px; font-size: 14.5px; }
  .bar-x { margin-left: auto; }
  a.btn.bar-cta svg { display: none; }
  .bar-mark { font-size: 20px; margin-right: 0; }
}
.sheet {
  position: fixed; inset: 0; z-index: 70; background: var(--airy);
  padding: 84px var(--gut) 40px; overflow-y: auto;
}
.sheet[hidden] { display: none !important; }
.sheet a { display: block; padding: 16px 0; font-family: var(--serif); font-size: 27px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.sheet-close { position: absolute; top: 22px; right: var(--gut); width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font-size: 20px; }

/* ---------------------------------------------------------------- *
 *  Buttons and pills
 * ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px;
  font: 500 15.5px var(--sans); letter-spacing: -.006em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--card); box-shadow: var(--shadow); }
.btn-primary:hover { box-shadow: var(--shadow-lg); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.band-deep .btn-primary { background: var(--warm-on-deep); color: var(--deep-band); }
.band-deep .btn-ghost { background: rgba(255,255,255,.08); color: var(--on-deep); border-color: rgba(255,255,255,.22); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 14px; color: var(--ink-mid); white-space: nowrap;
}
.pill svg { flex: 0 0 auto; color: var(--accent); }
.pill b { color: var(--ink); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); flex: 0 0 auto; }

/* ---------------------------------------------------------------- *
 *  Hero
 * ---------------------------------------------------------------- */
.hero { position: relative; padding: clamp(96px, 15vh, 150px) var(--gut) clamp(64px, 8vw, 100px); overflow: hidden; }
.hero-photo {
  position: absolute; inset: 0; background-size: cover; background-position: 50% 55%;
  filter: saturate(1.1) contrast(1.03);
}
/* THE SCRIM WAS VEILING THE PHOTOGRAPH. The first version laid a 30% radial
   wash of the page ground over the middle of the frame "for legibility" — but
   the only thing that needs to be legible there is the hero card, which is its
   own frosted surface and carries its own contrast. Measured on the captured
   composite rather than judged from the source image: the wash cost 24 points
   of mean chroma and bought nothing. What is left is a fade at the very top,
   so the floating navbar has something to sit on, and a fade into the ground
   at the bottom so the photograph ends on the page's own colour instead of a
   line. */
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      color-mix(in oklab, var(--airy) 34%, transparent) 0%,
      transparent 18%,
      transparent 68%,
      color-mix(in oklab, var(--ground) 72%, transparent) 92%,
      var(--ground) 100%);
}
.hero-in { position: relative; max-width: 940px; margin: 0 auto; text-align: center; }
.hero-card {
  background: color-mix(in oklab, var(--card) 76%, transparent);
  backdrop-filter: saturate(1.4) blur(22px);
  -webkit-backdrop-filter: saturate(1.4) blur(22px);
  border: 1px solid color-mix(in oklab, #fff 55%, transparent);
  border-radius: clamp(24px, 3.4vw, 38px);
  box-shadow: var(--shadow-lg);
  padding: clamp(34px, 5vw, 56px) clamp(24px, 5vw, 62px) clamp(30px, 4.4vw, 48px);
}
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(60px, 11vw, 122px); line-height: .92; letter-spacing: -.035em;
  margin: 18px 0 22px; color: var(--ink);
}
.hero .lede {
  font-size: clamp(17px, 2vw, 19.5px); line-height: 1.62; color: var(--ink-mid);
  max-width: 660px; margin: 0 auto 30px;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-pills { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* The floating product card, overlapping the seam between two laminae. */
/* Overlapping the SEAM between two laminae, the way the reference's product
   card does — not overlapping the hero card above it, which is what the first
   set of margins did. */
.float {
  position: relative; z-index: 3;
  max-width: 460px; margin: clamp(-54px, -4vw, -30px) auto clamp(-76px, -6vw, -48px);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 22px 24px;
}
.float-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.float-head h3 { margin: 0; font: 600 16px var(--sans); letter-spacing: -.012em; }
.float-head p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-faint); }
.float-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-mid); }
.float-row b { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--ink); }

/* ---------------------------------------------------------------- *
 *  Section headings
 * ---------------------------------------------------------------- */
.eyebrow {
  font: 600 12.5px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
.band-deep .eyebrow { color: var(--warm-on-deep); }
h2.display, .display {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5.2vw, 58px); line-height: 1.05; letter-spacing: -.03em;
  margin: 0 0 18px; color: var(--ink);
}
.display em { font-style: italic; color: var(--accent); }
.band-deep .display em { color: var(--warm-on-deep); }
.centred { text-align: center; }
.centred .sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.sub { font-size: 17.5px; line-height: 1.62; color: var(--ink-mid); margin: 0 0 34px; }

/* ---------------------------------------------------------------- *
 *  Cards
 * ---------------------------------------------------------------- */
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px 26px 28px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.card h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; letter-spacing: -.02em; margin: 0 0 10px; color: var(--ink); }
.card p { margin: 0 0 12px; color: var(--ink-mid); font-size: 15.5px; line-height: 1.6; }
.card p:last-child { margin-bottom: 0; }

.chip {
  width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--accent) 12%, var(--card));
  color: var(--accent); margin-bottom: 16px; flex: 0 0 auto;
}
.chip-warm { background: color-mix(in oklab, var(--warm) 15%, var(--card)); color: var(--warm); }
.band-deep .chip { background: rgba(255,255,255,.10); color: var(--on-deep); }

.ticks { list-style: none; margin: 14px 0 0; padding: 0; }
.ticks li { position: relative; padding-left: 24px; margin: 9px 0; font-size: 15px; color: var(--ink-mid); line-height: 1.55; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.ticks-no li::before { background: var(--neg); }

/* Stat tiles. */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 22px; text-align: center; min-width: 0; }
.stat b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1; letter-spacing: -.03em;
  color: var(--ink); margin-bottom: 10px;
}
.stat b.warm { color: var(--warm); }
.stat span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--ink-mid); }

/* A strip of claims between two sections, like the reference's. */
.strip { background: var(--sunk); padding: 20px var(--gut); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip-in { max-width: var(--wide); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: center; align-items: center; font-size: 14.5px; color: var(--ink-mid); }
.strip-in b { color: var(--ink); font-weight: 600; }
.strip-in .sep { color: var(--line-strong); }

/* ---------------------------------------------------------------- *
 *  Prose, tables, figures
 * ---------------------------------------------------------------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose p { color: var(--ink-mid); margin: 0 0 18px; }
.prose h3 { font-family: var(--serif); font-weight: 400; font-size: 27px; letter-spacing: -.022em; color: var(--ink); margin: 44px 0 14px; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose code { font-family: var(--mono); font-size: .87em; background: var(--sunk); padding: 2px 6px; border-radius: 6px; color: var(--ink); }
.prose ul { padding-left: 20px; color: var(--ink-mid); }
.prose li { margin: 8px 0; }

.fig { margin: 30px 0; }
.fig img { display: block; width: 100%; border-radius: var(--r); box-shadow: var(--shadow); }
.fig figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ink-faint); line-height: 1.55; }

.eq {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 24px; margin: 24px 0; text-align: center;
  font-family: var(--mono); font-size: 15px; line-height: 1.8; color: var(--ink);
  overflow-x: auto;
}

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
th { font: 600 12.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
td { color: var(--ink-mid); }
td.n, th.n { text-align: right; font-family: var(--mono); font-size: 13.5px; }
td b { color: var(--ink); font-weight: 600; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .mono { font-family: var(--mono); font-size: 13.5px; word-break: break-all; }

/* ---------------------------------------------------------------- *
 *  Accordion
 * ---------------------------------------------------------------- */
.acc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; }
.acc summary {
  list-style: none; cursor: pointer; padding: 20px 22px;
  font: 500 17px var(--sans); letter-spacing: -.012em; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 22px; color: var(--ink-faint); font-weight: 300; flex: 0 0 auto; }
.acc[open] summary::after { content: "\2212"; }
.acc-body { padding: 0 22px 20px; color: var(--ink-mid); font-size: 15.5px; line-height: 1.66; }
.acc-body p { margin: 0 0 12px; } .acc-body p:last-child { margin: 0; }
.acc-body code { font-family: var(--mono); font-size: .87em; background: var(--sunk); padding: 2px 6px; border-radius: 6px; }

/* ---------------------------------------------------------------- *
 *  Live panels
 * ---------------------------------------------------------------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow); min-width: 0; }
.panel h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -.02em; margin: 0 0 8px; color: var(--ink); }
.field { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.field input, .field select {
  flex: 1 1 260px; min-width: 0; padding: 13px 16px; border-radius: 13px;
  border: 1px solid var(--line-strong); background: var(--airy); color: var(--ink);
  font: 400 15px var(--mono);
}
.field input::placeholder { color: var(--ink-faint); font-family: var(--sans); }
.note { font-size: 13.5px; color: var(--ink-faint); line-height: 1.55; }
.out { margin-top: 18px; }
.kv { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 20px; margin: 0; font-size: 14.5px; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 13.5px; word-break: break-all; color: var(--ink); }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: color-mix(in oklab, var(--accent) 12%, var(--card)); color: var(--accent); }
.badge-ok { background: color-mix(in oklab, var(--pos) 14%, var(--card)); color: var(--pos); }
.badge-warn { background: color-mix(in oklab, var(--warm) 16%, var(--card)); color: var(--warm); }
.badge-no { background: color-mix(in oklab, var(--neg) 12%, var(--card)); color: var(--neg); }

/* ---------------------------------------------------------------- *
 *  Footer
 * ---------------------------------------------------------------- */
.foot { background: var(--deep-band); color: var(--on-deep); padding: clamp(56px, 7vw, 84px) var(--gut) 34px;
  --ink: var(--on-deep); --ink-mid: var(--on-deep-faint); --ink-faint: var(--on-deep-faint); --line: rgba(255,255,255,.14); }
.foot-in { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 820px) { .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.foot-mark { font-family: var(--serif); font-size: 27px; display: flex; align-items: center; gap: 11px; margin-bottom: 14px; color: var(--on-deep); }
.foot p { color: var(--on-deep-faint); font-size: 14.5px; line-height: 1.6; margin: 0; max-width: 320px; }
.foot h4 { font: 600 12.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--warm-on-deep); margin: 0 0 14px; }
.foot a { display: block; color: var(--on-deep-faint); text-decoration: none; font-size: 14.5px; padding: 5px 0; }
.foot a:hover { color: var(--on-deep); }
.foot-rule { max-width: var(--wide); margin: 44px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--on-deep-faint); }

/* ---------------------------------------------------------------- *
 *  Utilities
 * ---------------------------------------------------------------- */
.stack > * + * { margin-top: 18px; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.wrap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gut); top: 10px; z-index: 100; background: var(--card); padding: 10px 16px; border-radius: 10px; }