/*
  taskrix.app — design system

  One stylesheet for the whole site. Two themes, both taken from the app rather
  than invented here: the brand purple is Color(red: 0.45, green: 0.25, blue:
  0.85) from DashboardView, and the four quadrant colours are QuadrantTheme's
  own accents — #E64238 / #337AE6 / #F28C33 / #737380. Someone arriving from the
  App Store should recognise the thing they just saw.

  Structure, in order:
    1. Tokens          — colour, type, space, in light and dark
    2. Reset & base
    3. Typography      — a display scale for the product page, a modest one
                         for reading pages
    4. Layout          — wraps, full-bleed bands, the deep band
    5. Chrome          — sticky header, footer
    6. Device frame    — the iPhone bezel, drawn in CSS around a real capture
    7. Product page    — hero, score, beats, matrix, features, Pro, Watch
    8. Reading pages   — policy prose, Q&A, contact form
    9. Motion & responsive

  Sections 8 and 9 keep every class name the other pages and /stats/ already
  use. Renaming a token here silently breaks the stats dashboard, which styles
  itself from var(--rule), var(--brand) and friends.
*/

/* ─── 1. Tokens ────────────────────────────────────────────────────────── */

:root {
  /* Surfaces, light. --ground is the page, --ground-2 the alternating band.
     They have to be far enough apart that a band reads as a band; at a
     two-point difference the whole page just looks like one flat sheet. */
  --ground: #FFFFFF;
  --ground-2: #F3F1F9;
  --card: #FFFFFF;
  --ink: #14121B;
  --ink-2: #55505F;
  --ink-3: #706C7A;
  --rule: #E3E0EB;

  /* Brand — exactly the app's values */
  --brand: #7340D9;
  --brand-2: #5933BF;
  --on-brand: #FFFFFF;

  /* The filled button keeps the app's own gradient and white label in both
     themes. Tinting it up for dark mode was tempting and wrong: the lighter
     lavender only clears 3.3:1 against any label dark enough to sit on it. */
  --cta-a: #7340D9;
  --cta-b: #5933BF;
  --on-cta: #FFFFFF;

  /* Quadrants — QuadrantTheme, not approximated */
  --do-now: #E64238;
  --schedule: #337AE6;
  --delegate: #F28C33;
  --eliminate: #737380;

  /* …and the same four darkened just enough to carry 11px label text on a
     light surface. #F28C33 is a fine 3px rule and a 2.4:1 word. */
  --do-now-ink: #CA3A31;
  --schedule-ink: #2D6CCC;
  --delegate-ink: #A25D22;
  --eliminate-ink: #6D6D79;

  /* The band that stays dark in both themes */
  --deep: #07060C;
  --deep-2: #141120;

  --shadow: 0 1px 3px rgba(20, 18, 27, 0.07);
  --shadow-lift: 0 18px 50px -12px rgba(20, 18, 27, 0.22);
  --glow: 0.42;

  --radius: 14px;
  --radius-lg: 22px;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── Width tiers ──────────────────────────────────────────────────────
     One container for everything is what made this page read as a narrow
     ribbon down the middle of a large monitor. The fix isn't "wider" — it's
     tiers. Text stays tight and legible; visuals break out past it; a few
     things go edge to edge. The numbers match the system Apple uses on a
     product page (content 1260, feature media 1440, hero media 1680), which
     is where these came from.                                            */
  --gutter: 24px;
  --measure: 680px;          /* prose — the reading column               */
  --measure-wide: 1260px;    /* content — headings, cards, grids         */
  --measure-visual: 1440px;  /* feature visuals, split sections          */
  --measure-media: 1680px;   /* hero media, the widest thing on the page */

  --band-y: clamp(72px, 8vw, 168px);
}

/* Gutters step with the viewport, same as the grid they came from. */
@media (min-width: 1441px) { :root { --gutter: 32px; } }
@media (max-width: 1068px) { :root { --gutter: 20px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #100E17;
    --ground-2: #1A1724;
    --card: #201C2C;
    --ink: #F0EEF5;
    --ink-2: #B2ADBF;
    --ink-3: #8A8399;
    --rule: #2E2939;

    --brand: #A98AF8;
    --brand-2: #7340D9;
    --on-brand: #14102A;

    --cta-a: #7D4CE0;
    --cta-b: #5F37C6;
    --on-cta: #FFFFFF;

    --do-now: #F0665C;
    --schedule: #5E9BF0;
    --delegate: #F5A45C;
    --eliminate: #8E8E9B;

    --do-now-ink: var(--do-now);
    --schedule-ink: var(--schedule);
    --delegate-ink: var(--delegate);
    --eliminate-ink: var(--eliminate);

    --shadow: none;
    --shadow-lift: 0 24px 70px -16px rgba(0, 0, 0, 0.8);
    --glow: 0.6;
  }
}

/* ─── 2. Reset & base ──────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 74px;      /* the sticky header, plus a little air */
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); }

/* ─── 3. Typography ────────────────────────────────────────────────────── */

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 16px;
}

/* Reading-page sizes. The product page overrides these per band. */
h1 { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.06; }
h2 { font-size: clamp(26px, 3.6vw, 34px); line-height: 1.18; margin-top: 52px; }

h3 { font-size: 17px; font-weight: 600; margin: 30px 0 6px; letter-spacing: -0.005em; }

p { margin: 0 0 16px; }

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

.lede {
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 28px;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 14px;
}

.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.center { text-align: center; }

/* Display type — product page only */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6.8vw, 116px);
  line-height: 0.97;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  text-wrap: balance;
}

.display--sm {
  font-size: clamp(31px, 4.4vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.024em;
}

/* A number treated as the object it is */
.figure {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(110px, 18vw, 300px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  margin: 0;
  display: block;
}

.figure-label {
  font-family: var(--mono);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--schedule);
  margin: 14px 0 0;
}

/* ─── 4. Layout ────────────────────────────────────────────────────────── */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: var(--measure-wide); }
.wrap--visual { max-width: var(--measure-visual); }
.wrap--media { max-width: var(--measure-media); }

/* Edge to edge, no gutter. For a full-bleed visual only — never for text. */
.wrap--bleed { max-width: none; padding-inline: 0; }

/* A full-bleed horizontal band. Every product-page section is one.
   overflow-x: clip keeps the device glow — which is deliberately wider than
   its column — from widening the document. clip rather than hidden, because
   hidden would make this a scroll container and break the sticky header. */
.band {
  padding-block: var(--band-y);
  position: relative;
  overflow-x: clip;
}

.band--tint { background: var(--ground-2); }

.band--deep {
  background: var(--deep);
  /* Re-point the tokens rather than hard-coding light text, so everything
     inside — rules, cards, the device frame — follows without a second set of
     classes. This band is dark in both themes on purpose. */
  --ground: var(--deep);
  --ground-2: var(--deep-2);
  --card: #1A1726;
  --ink: #F4F2F9;
  --ink-2: #AEA8BE;
  /* A shade lighter than the dark theme's own --ink-3. The generated field
     images peak at rgb(42,28,73) once the scrim is composited over them, and
     #8A8399 only reaches 4.26:1 against that. */
  --ink-3: #8F889D;
  --rule: #262231;
  --brand: #A98AF8;
  --on-brand: #14102A;
  --cta-a: #7D4CE0;
  --cta-b: #5F37C6;
  --on-cta: #FFFFFF;
  --do-now: #F0665C;
  --schedule: #5E9BF0;
  --delegate: #F5A45C;
  --eliminate: #8E8E9B;
  --do-now-ink: var(--do-now);
  --schedule-ink: var(--schedule);
  --delegate-ink: var(--delegate);
  --eliminate-ink: var(--eliminate);
  --shadow: none;
  --shadow-lift: 0 24px 70px -16px rgba(0, 0, 0, 0.85);
  --glow: 0.7;
  color: var(--ink);
}

/*
  A deep band carrying one of the generated light fields.

  The scrim is not decoration. The fields peak around rgb(120,80,200) in the
  bloom, and body copy laid straight over that sits near 4:1 — so a fixed
  dark wash goes over the image and the text sits on that instead. It also
  means a band reads the same whether or not the image has loaded yet.
*/
.band--field {
  background-color: var(--deep);
  background-image:
    linear-gradient(rgba(7, 6, 12, 0.62), rgba(7, 6, 12, 0.62)),
    var(--field, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 900px) { .band--field { --field: var(--field-2x, var(--field-1x)); } }

.field--score { --field-1x: url("/img/field-score@1x.webp"); --field-2x: url("/img/field-score.webp"); --field: var(--field-1x); }
.field--voice { --field-1x: url("/img/field-voice@1x.webp"); --field-2x: url("/img/field-voice.webp"); --field: var(--field-1x); }
.field--close { --field-1x: url("/img/field-close@1x.webp"); --field-2x: url("/img/field-close.webp"); --field: var(--field-1x); }

/* ── The highlights strip ──────────────────────────────────────────────
   Five one-line claims near the top, before anyone has scrolled far enough
   to reach a feature section. */
.highlights {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.highlight { background: var(--ground); padding: clamp(24px, 2.6vw, 42px) clamp(18px, 1.7vw, 28px); }

.highlight .k {
  font-family: var(--serif);
  font-size: clamp(30px, 3.1vw, 58px);
  line-height: 1;
  letter-spacing: -0.025em;
  display: block;
  margin-bottom: 10px;
}

.highlight p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* ── Specifications ───────────────────────────────────────────────────── */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(20px, 2.4vw, 40px) clamp(24px, 3vw, 56px);
  margin-top: clamp(30px, 4vw, 52px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--rule);
}

.spec dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.spec dd { margin: 0; font-size: 15.5px; line-height: 1.5; }
.spec dd + dd { margin-top: 4px; color: var(--ink-2); font-size: 14.5px; }

/* Two columns that collapse to one, copy first. */
.split, .score {
  display: grid;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.split { grid-template-columns: 1fr 1fr; }

/* Grid items default to min-width: auto, so a single long word inside a card
   can hold the whole column open past the viewport. */
.split > *, .score > * { min-width: 0; }

.split--flip .split-visual { order: -1; }
.split-copy { max-width: 34rem; }

/* ─── 5. Chrome ────────────────────────────────────────────────────────── */

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

header.site.is-stuck { border-bottom-color: var(--rule); }

.bar {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}

/* The app icon, redrawn: four quadrants, a tick in the urgent-important one. */
.mark .glyph {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(145deg, var(--brand), var(--brand-2));
  position: relative;
  flex: none;
}

.mark .glyph::before,
.mark .glyph::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.42);
}

.mark .glyph::before { left: 50%; top: 3px; bottom: 3px; width: 1px; }
.mark .glyph::after { top: 50%; left: 3px; right: 3px; height: 1px; }

nav.site { display: flex; align-items: center; gap: 20px; }

/* :not(.cta) matters. A bare `nav.site a` rule outranks `.cta` on specificity,
   which quietly repainted the header button's white label in body-text grey —
   dark type on a purple fill, at about 2:1. */
nav.site a:not(.cta) {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}

nav.site a:not(.cta):hover { color: var(--ink); }
nav.site a:not(.cta).is-current { color: var(--brand); }

.nav-links { display: flex; gap: 20px; }

footer.site {
  border-top: 1px solid var(--rule);
  padding-block: 34px 56px;
  margin-top: 0;
  font-size: 14px;
  color: var(--ink-3);
}

footer.site .bar {
  height: auto;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: flex-start;
}

footer.site a { color: var(--ink-2); text-decoration: none; }
footer.site a:hover { color: var(--brand); }
footer.site nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ─── 6. Device frame ──────────────────────────────────────────────────── */
/*
  The screens are real captures with the iOS corner already cut to transparent,
  so the frame only has to supply the bezel. Both numbers are measured from the
  source: the bezel is 1.23% of the device width and the outer corner is 10.2%.
  Driving everything off one --dw means the frame stays exact at any size.
*/

.device {
  --dw: 300px;
  width: var(--dw);
  flex: none;
  padding: calc(var(--dw) * 0.0123);
  border-radius: calc(var(--dw) * 0.102);
  background: linear-gradient(160deg, #26242C, #0A0A0C 28%, #0A0A0C 72%, #2A2831);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  position: relative;
  margin-inline: auto;
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--dw) * 0.0915);
}

/* The light behind the phone. Purely decorative, so it is aria-hidden in the
   markup and sits behind everything via a negative z-index. */
.device-stage {
  position: relative;
  isolation: isolate;          /* so the glow can sit at z-index 0 and still
                                  paint over the band's own background */
  display: flex;
  justify-content: center;
}

.device-stage .device { position: relative; z-index: 1; }

.device-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 46%;
  width: min(760px, 125%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
              color-mix(in srgb, var(--brand) 58%, transparent) 0%,
              transparent 66%);
  opacity: var(--glow);
  filter: blur(46px);
  pointer-events: none;
}

.device-stage--flat::before { display: none; }

.device--hero { --dw: clamp(238px, 26vw, 486px); }
.device--feature { --dw: clamp(210px, 21vw, 366px); }
.device--pair { --dw: clamp(150px, 16vw, 290px); }

.device-pair {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
  align-items: flex-start;
}

/* Stagger, via margin rather than transform — a transform doesn't reserve
   layout space, so the offset device used to hang past the bottom of the row
   and collide with whatever came next. */
.device-pair .device:first-child { margin-top: clamp(12px, 2.4vw, 34px); }

/* ─── 7. Product page ──────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 108px);
  text-align: center;
}

.hero .display { margin-inline: auto; max-width: 16ch; }
.hero .lede { margin-inline: auto; max-width: 54ch; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin: 4px 0 8px;
}

.hero .cta-row { justify-content: center; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(160deg, var(--cta-a), var(--cta-b));
  color: var(--on-cta);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  padding: 14px 28px;
  border-radius: 999px;
  transition: transform .16s ease, filter .16s ease;
}

.cta:hover { filter: brightness(1.09); transform: translateY(-1px); }
.cta:active { transform: translateY(0); }

.cta--sm { padding: 9px 18px; font-size: 14.5px; }

.cta--ghost {
  background: none;
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}

.cta--ghost:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); filter: none; }

/* The score band */
.score { grid-template-columns: 1fr 1fr; }
.score .figure { background: linear-gradient(170deg, var(--ink), color-mix(in srgb, var(--ink) 58%, var(--schedule))); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Three beats */
.beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin: clamp(28px, 4vw, 48px) 0 0;
}

.beat {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow);
}

.beat .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--brand);
  font-weight: 500;
}

.beat h3 { margin: 10px 0 6px; font-size: 18px; }
.beat p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* The matrix. Kept narrower than the band: at full width the two columns
   stretch to 550px each and the axis labels end up so far apart they stop
   reading as the axis of the grid below them. */
.matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px auto 12px;
  max-width: 1000px;
}

.quadrant {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 17px 18px 19px;
  border-top: 3px solid var(--q, var(--brand));
}

.quadrant .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--q-ink, var(--brand));
  font-weight: 500;
}

.quadrant .rule-text { font-size: 13px; color: var(--ink-3); margin: 1px 0 12px; }

.quadrant ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.quadrant li { font-size: 14.5px; display: flex; align-items: baseline; gap: 9px; color: var(--ink-2); }

.quadrant li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.4px solid var(--q, var(--brand));
  opacity: 0.7;
}

.q-do-now    { --q: var(--do-now);    --q-ink: var(--do-now-ink); }
.q-schedule  { --q: var(--schedule);  --q-ink: var(--schedule-ink); }
.q-delegate  { --q: var(--delegate);  --q-ink: var(--delegate-ink); }
.q-eliminate { --q: var(--eliminate); --q-ink: var(--eliminate-ink); }

.axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 8px;
  max-width: 1000px;
  margin-inline: auto;
}

/* The voice exchange */
.exchange {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 26px 0;
  padding: clamp(20px, 2.6vw, 26px);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.turn { display: flex; gap: 12px; align-items: baseline; }

.turn .who {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: none;
  width: 62px;
}

.turn .said { font-size: 16px; }
.turn.app .said { color: var(--brand); }

/* Feature list — a hairline-ruled stack */
.features {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 26px 0;
}

.feature { background: var(--card); padding: 17px 20px; }
.feature h3 { margin: 0 0 3px; font-size: 16.5px; }
.feature p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* Pro rows */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); margin: clamp(26px, 3.4vw, 40px) 0 0; }

.tier {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--shadow);
}

.tier--pro { border-color: color-mix(in srgb, var(--brand) 42%, var(--rule)); }

.tier .price { font-family: var(--serif); font-size: 34px; line-height: 1; margin: 4px 0 2px; }
.tier .per { font-size: 13.5px; color: var(--ink-3); margin: 0 0 18px; }
.tier h3 { margin: 0; font-size: 15px; letter-spacing: 0.02em; }

.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

/* Two columns: the dot spans both rows, so the label and its note stack in
   the second column instead of sitting side by side. */
.tier li {
  font-size: 15px;
  line-height: 1.4;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 11px;
}

.tier li::before {
  content: "";
  grid-row: 1 / span 2;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .6;
}

.tier li b { grid-column: 2; font-weight: 600; }
.tier li span { grid-column: 2; color: var(--ink-3); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }

/* Pull quote */
.pull {
  font-family: var(--serif);
  font-size: clamp(26px, 3.8vw, 60px);
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* Coming next */
.next {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow);
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
}

.next h3 { margin: 16px 0 8px; font-size: clamp(20px, 2.6vw, 27px); font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.next p { margin: 0 0 10px; color: var(--ink-2); }
.next p:last-child { margin-bottom: 0; }

/* A quiet marker for the features that need Pro */
.pro-chip {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  vertical-align: 2px;
  margin-left: 8px;
  white-space: nowrap;
  font-weight: 500;
}

.showcase-caption {
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
  margin: 26px auto 0;
  max-width: 48ch;
}

/* ─── 8. Reading pages ─────────────────────────────────────────────────── */

/* The product page builds its own rhythm out of bands; a reading page is just
   one column, so it gets its top and bottom air here. */
main.wrap { padding-block: clamp(38px, 6vw, 72px) clamp(56px, 7vw, 92px); }

.page-head { padding-block: clamp(40px, 6vw, 76px) 8px; }

details {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 15px 19px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}

details summary { cursor: pointer; font-weight: 600; font-size: 16px; }
details summary::marker { color: var(--brand); }
details[open] summary { margin-bottom: 10px; }
details p:last-child { margin-bottom: 0; }
details ol, details ul { margin: 0 0 12px; padding-left: 22px; color: var(--ink-2); }
details li { margin: 4px 0; }

.policy h2 { font-size: clamp(21px, 2.4vw, 25px); margin-top: 44px; }
.policy p, .policy li { color: var(--ink-2); }
.policy ul { padding-left: 22px; }
.policy li { margin: 6px 0; }
.policy strong { color: var(--ink); }

.updated { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }

.cf {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 26px);
  box-shadow: var(--shadow);
  margin: 26px 0 12px;
}

.cf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cf-field label { font-size: 14px; font-weight: 600; }
.cf-field .hint { font-size: 13px; color: var(--ink-3); margin: -2px 0 2px; }

.cf textarea, .cf input[type="email"], .cf select {
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
}

.cf textarea { min-height: 140px; resize: vertical; line-height: 1.55; }

.cf textarea:focus, .cf input:focus, .cf select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.cf button {
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  color: var(--on-cta);
  background: linear-gradient(160deg, var(--cta-a), var(--cta-b));
  border: none;
  border-radius: 999px;
  padding: 13px 28px;
  cursor: pointer;
}

.cf button:hover { filter: brightness(1.08); }
.cf button:disabled { opacity: .5; cursor: progress; }

.cf-note { font-size: 14px; margin: 12px 0 0; color: var(--ink-2); }
.cf-note.ok { color: #16764F; font-weight: 500; }
.cf-note.warn { color: #B3372A; }

@media (prefers-color-scheme: dark) {
  .cf-note.ok { color: #4FC395; }
  .cf-note.warn { color: #F0857A; }
}

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

/* ─── 9. Motion & responsive ───────────────────────────────────────────── */

/*
  Reveal on scroll, done entirely in CSS.

  An earlier version of this used an IntersectionObserver that added a hidden
  class up front and removed it on entry. It worked until it didn't: anything
  the observer missed stayed at opacity 0 forever, and a whole section of the
  page would silently render blank. A scroll-driven animation has no such
  failure mode — where `animation-timeline` isn't supported, the rule set
  simply doesn't apply and the element is visible, which is the correct
  fallback rather than an accident.
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
  }
}

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

@media (max-width: 1068px) {
  .split, .score { grid-template-columns: 1fr; }
  .split--flip .split-visual { order: 0; }
  .split-copy { max-width: none; }
  .score { text-align: center; }
  .score .split-copy { margin-inline: auto; }
}

@media (max-width: 1068px) {
  .highlights { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .beats { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .highlights { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
  .highlights { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .matrix { grid-template-columns: 1fr; }
  .turn { flex-direction: column; gap: 2px; }
  .turn .who { width: auto; }
  .device-pair { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}