:root {
  --bg: #f7f5f2;
  --bg-deep: #efebe4;
  --surface: #ffffff;
  --paper-raised: #fffdfa;
  --text: #16150f;
  --muted: #5c5950;
  --body: #3c3a33;
  --border: #e4e1d9;
  --border-strong: #d7d3ca;
  --ink: #111111;
  /* System info hue (extension / “elsewhere” in the app). Used on the
     hero’s rotating platform names so the variable word carries colour
     without inventing a marketing accent Findy doesn’t otherwise have. */
  --accent: #3b62c4;
  --shadow: 0 1px 2px rgba(22, 21, 15, 0.06), 0 8px 24px rgba(22, 21, 15, 0.07);
  --shadow-lg: 0 2px 6px rgba(22, 21, 15, 0.08), 0 24px 56px rgba(22, 21, 15, 0.12);
  --radius: 14px;
  --max: 1180px;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

.container {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  background: rgba(247, 245, 242, 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}

.nav.scrolled {
  border-color: var(--border);
  background: rgba(247, 245, 242, 0.97);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.logo-mark {
  width: 30px;
  height: 30px;
  /* The mark is a real asset now, not a letter typeset in the body sans:
     index.html set an "F" here while every sub-page left the span empty
     and rendered a blank black square. See
     tools/brand/build-brand-assets.py. */
  background: url("assets/brand/logo.svg") center / contain no-repeat;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s, background 0.2s, color 0.2s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-lg {
  padding: 14px 28px;
  font-size: 15px;
}

.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  box-shadow: var(--shadow-lg);
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* Hero — copy first, product shot below on matching cream */
.hero {
  position: relative;
  padding: 72px 0 0;
  background: var(--bg);
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding: 28px 0 40px;
  animation: hero-rise 0.95s var(--ease-out) both;
}

/* Only ever rendered as `.brand-lockup .brand-lockup-on-dark`, in the
   closing CTA. The pair used to exist because the hero repeated the
   wordmark above the h1 at display size; that was removed, and the large
   clamp and ink colour went with it — both were dead, overridden by the
   on-dark rule that follows every time they were used. */
.brand-lockup {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.8vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  font-weight: 600;
  color: var(--text);
}

.hero-lead {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 40ch;
  margin: 0 auto 28px;
  line-height: 1.65;
}

/* One short line of audience framing. It sits above the h1 rather than
   inside the lead, because the lead was already trimmed once for being
   wordy and this should cost a line, not a paragraph. */
.hero-eyebrow {
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Rotating save-type in the eyebrow. Same type treatment as the rest of
   the line — only the words change. Stays inline so width follows each
   phrase and the baseline stays level with the surrounding sentence. */
.hero-rotate {
  display: inline;
  white-space: nowrap;
}

.hero-rotate-word {
  display: inline-block;
  white-space: nowrap;
  color: var(--accent);
  vertical-align: baseline;
}

.hero-rotate-word.is-leave {
  animation: hero-rotate-out 0.32s var(--ease-out) both;
}

.hero-rotate-word.is-enter {
  animation: hero-rotate-in 0.32s var(--ease-out) both;
}

/* Fallback for no-JS / screen readers: visible until the rotator starts,
   then hidden so AT keeps the stable “saves” wording instead of hearing
   every flip. */
.hero-rotate-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-rotate:not([data-ready]) .hero-rotate-word {
  display: none;
}

.hero-rotate:not([data-ready]) .hero-rotate-fallback {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: nowrap;
}

/* The hero CTA sat at 4% of the page and the next at 74% — ten screens
   with nowhere to act. This one lands straight after the search demo,
   the strongest proof on the page. Deliberately smaller than the hero
   CTA so it reads as a second chance, not a second hero. */
.inline-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 56px;
}

/* The sync section already ends with padding before pricing; this variant
   does not add its own. */
.inline-cta-tight {
  margin-top: 40px;
  margin-bottom: 0;
}

.inline-cta-note {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Risk reversal belongs with the decision, not in the footnotes — it is
   the cheapest objection to answer and the most expensive to leave open. */
.cta-reassure {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.cta-reassure-on-dark {
  color: rgba(255, 255, 255, 0.7);
}

.hero-visual {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  background: transparent;
  animation: hero-drift 1.2s var(--ease-out) both;
}

.hero-visual img {
  width: 100%;
  height: auto;
}

.showroom {
  margin: 0;
  background: transparent;
  max-width: var(--max);
}

.showroom img {
  width: 100%;
  height: auto;
}

/* The phone shot is portrait, so at the column's full width it would
   tower over the section. Cap it and centre it in its half of the row. */
.showroom-phone {
  display: flex;
  justify-content: center;
}

.showroom-phone img {
  width: auto;
  max-height: 620px;
}

/* Sections */
section {
  padding: 96px 0;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head-wide {
  max-width: 720px;
}

.section-head.centered {
  margin-inline: auto;
  text-align: center;
}

.section-head h2,
.vitamin-copy h2,
.cta-box h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  line-height: 1.12;
  font-weight: 600;
}

/* Both selectors must exclude .eyebrow: an eyebrow is a <p>, and these
   rules outrank .eyebrow on specificity. The .vitamin-copy half was
   already guarded; .section-head was not, so eyebrows in section heads
   silently rendered at 1.05rem instead of 0.78rem — 34% larger than the
   identical label three sections further down. */
.section-head p:not(.eyebrow),
.vitamin-copy > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.section-head p:not(.eyebrow) + p:not(.eyebrow),
.vitamin-copy > p:not(.eyebrow) + p:not(.eyebrow) {
  margin-top: 0.9em;
}

/* Showroom — bare product shots, no framed card */
.showroom-rise {
  margin-bottom: 56px;
  animation: showroom-in 1s var(--ease-out) both;
}

/* Search feature */
.feature-search {
  padding-top: 104px;
}

/* The one place a caption earns its keep: the screenshot only proves the
   claim if the reader knows what was typed and what came back. */
.showroom-caption {
  margin: 16px auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

.showroom-caption strong {
  color: var(--text);
  font-weight: 600;
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.pain-point {
  padding: 24px 0 8px;
}

.pain-point h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pain-point p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

/* Vitamins — Spaces / Reading */
.vitamin {
  padding: 88px 0;
}

.vitamin-row {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 48px 56px;
  align-items: center;
}

.vitamin-row-flip {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

.vitamin-row-flip .vitamin-copy {
  order: 2;
}

.vitamin-row-flip .showroom {
  order: 1;
}

.vitamin-copy {
  max-width: 420px;
}

/* Tertiary — Also in Findy.
   One level for every item: serif titles in a 2-up grid, hairline
   dividers only — same weight for Spaces / Reading and the rest. */
.tertiary {
  padding: 88px 0;
}

/* "The rest of the library" — two leads, then four supporting.
   Reference lock: Midday (midday.ai) achromatic ledger. Hairlines
   SEPARATE rows; they never box a cell. Boxing every cell on four sides
   was what made the old grid read as a spreadsheet. No radius, no
   shadow, compact density. */
.also-lead {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  border-top: 1px solid var(--border);
}

.also-lead li {
  padding: 32px 0 34px;
  text-align: center;
}


.also-lead h3 {
  margin: 0 0 8px;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.also-lead p {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  /* 1.65 on three-line copy read as thin, not calm. Midday's density is
     "compact"; Loops warns against excessive spacing for body text. */
  line-height: 1.5;
  max-width: 46ch;
  margin-inline: auto;
  text-wrap: balance;
}

.also-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 40px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.also-grid li {
  padding: 26px 0 28px;
  text-align: center;
}

/* A step down from the leads — hierarchy through type scale, the way the
   reference does it, rather than through colour or rules. */
.also-grid h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.also-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  text-wrap: balance;
}

@media (max-width: 860px) {
  .also-lead,
  .also-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .also-lead,
  .also-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .also-lead li,
  .also-grid li {
    border-bottom: 1px solid var(--border);
  }

  .also-grid {
    border-bottom: none;
  }
}

/* Sync split */
.sync-section {
  background: rgba(255, 253, 250, 0.65);
}

.sync-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 880px;
  margin-inline: auto;
}

.sync-col {
  padding: 8px 0 0;
  text-align: center;
}

.sync-col h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
}

.sync-col > p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
  text-wrap: balance;
}

.sync-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sync-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Pricing */
.pricing-interval {
  display: flex;
  width: max-content;
  gap: 2px;
  margin: 0 auto 28px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-deep);
}

.pricing-interval-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.pricing-interval-option.is-selected {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow);
}

.pricing-interval-save {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin-inline: auto;
  align-items: stretch;
}

/* One membership — a single centred card rather than a row of tiers. */
.pricing-grid-single {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
}

.pricing-card.featured {
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.pricing-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
}

.pricing-card .price {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 12px 0 8px;
  font-family: var(--font-display);
}

.pricing-card .price span {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 500;
  font-family: var(--font-body);
}

.plan-pitch {
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.6;
  font-size: 1rem;
}

.plan-badge {
  align-self: flex-start;
  margin-bottom: 14px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
}

.plan-features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
  /* flex: 1 makes this list absorb the card's spare height so every CTA
     lines up along the bottom. Without align-content, the grid rows share
     that spare height too — so the card with three bullets spaced them
     twice as far apart as the card with five. Keep the bullets tight and
     let the slack fall below them. */
  align-content: start;
  flex: 1;
}

.plan-features li {
  position: relative;
  padding-left: 24px;
  color: var(--body);
  font-size: 0.95rem;
  line-height: 1.45;
}

.plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.pricing-card .btn {
  width: 100%;
}

.pricing-note {
  text-align: center;
  margin: 28px auto 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* FAQ */
.faq-section {
  padding-top: 72px;
}

.faq {
  max-width: 720px;
  margin-inline: auto;
  border-top: 1px solid var(--border);
}

.faq details {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 36px 18px 0;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}

.faq details[open] summary::after {
  transform: translateY(-20%) rotate(225deg);
}

.faq details p {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 58ch;
}

/* CTA */
.cta {
  padding-top: 48px;
  padding-bottom: 104px;
}

.cta-box {
  background: var(--ink);
  color: #f4f2ec;
  /* 20px is `search`, the largest non-pill step on the documented
     scale. 22px was 2px of drift nobody can see on a panel this
     size — it just cost the scale a step. */
  border-radius: 20px;
  padding: clamp(48px, 8vw, 72px);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.cta-box h2 {
  color: #fff;
}

.cta-box p:not(.brand-lockup) {
  margin: 0 auto 28px;
  max-width: 42ch;
  color: rgba(244, 242, 236, 0.78);
  font-size: 1.05rem;
  line-height: 1.65;
}

.cta-box .btn-primary {
  background: #fff;
  color: var(--ink);
}

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 40px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer .brand {
  font-size: 1.05rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.footer-links a:hover {
  color: var(--text);
}

.footer-inner > p,
.footer-meta {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-sep {
  opacity: 0.55;
}

.footer-version {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* Legal / guide pages */
.legal-page {
  padding: 48px 0 80px;
}

.legal-card {
  max-width: 720px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 48px 56px;
  box-shadow: var(--shadow);
}

.legal-card h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  line-height: 1.15;
}

.legal-meta {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 32px;
  line-height: 1.6;
}

.legal-card h2 {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  margin: 32px 0 10px;
}

.legal-card p,
.legal-card li {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.65;
}

.legal-card p {
  margin: 0 0 14px;
}

.legal-card ul {
  margin: 0 0 14px;
  padding-left: 1.25rem;
}

.legal-card li {
  margin-bottom: 8px;
}

.legal-card a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-card a:hover {
  color: var(--ink);
}

.guide-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.guide-toc a {
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
}

.guide-toc a:hover {
  color: var(--ink);
}

.guide-doc section {
  scroll-margin-top: 88px;
}

.guide-doc h2 {
  margin-top: 40px;
}

.guide-doc section:first-of-type h2 {
  margin-top: 8px;
}

.guide-doc ol {
  margin: 0 0 14px;
  padding-left: 1.25rem;
}

.guide-doc ol li {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.65;
}

.guide-doc code {
  font-size: 0.86em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--border) 65%, transparent);
}

.guide-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  border: 1px solid var(--border);
}

.guide-code code {
  padding: 0;
  background: none;
}

.guide-signin {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.95rem;
}

/* Motion */
@keyframes hero-drift {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes showroom-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-rotate-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-0.45em);
  }
}

@keyframes hero-rotate-in {
  from {
    opacity: 0;
    transform: translateY(0.45em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-rotate-word.is-leave,
  .hero-rotate-word.is-enter {
    animation: none;
  }
}

/* Responsive */
@media (max-width: 960px) {
  .pain-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pain-point {
    border-bottom: 1px solid var(--border);
    padding: 22px 0;
  }

  .pain-point:last-child {
    border-bottom: none;
  }

  .vitamin-row,
  .vitamin-row-flip {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vitamin-row-flip .vitamin-copy,
  .vitamin-row-flip .showroom {
    order: unset;
  }

  .vitamin-copy {
    max-width: none;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .also-grid li:nth-child(odd) {
    padding-right: 32px;
  }

  .also-grid li:nth-child(even) {
    padding-left: 32px;
  }

  .sync-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 720px) {
  .container {
    width: min(var(--max), calc(100% - 32px));
  }

  /* The section links and the hamburger that held them were removed —
     the header is now just the brand plus Sign in / Get started, which
     fits at every width. Sign in used to be hidden here and surfaced
     inside the menu; with no menu it has to stay visible. */

  .hero {
    padding: 56px 0 0;
  }

  .hero-copy {
    padding: 12px 0 28px;
  }

  section {
    padding: 72px 0;
  }

  .showroom-rise {
    margin-bottom: 40px;
  }

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

  .also-grid li,
  .also-grid li:nth-child(odd),
  .also-grid li:nth-child(even) {
    border-right: none;
    padding: 22px 0;
  }

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

  .cta-box {
    padding: 48px 24px;
  }

  .legal-card {
    padding: 32px 24px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------
   Manual
   ---------------------------------------------------------------------
   Long-form instructional pages, one per task. Deliberately a different
   reading treatment from .legal-card: legal pages are dense reference
   text you scan, a manual is prose you follow while doing something else
   on a second screen.

   Body copy is set in the brand serif rather than the UI sans. That is a
   departure from the landing page and an intentional one — the app
   already sets saved notes in the serif (.card.is-note), so "serif means
   reading, sans means chrome" is an existing Findy idiom, not a new
   rule. Svelte's docs do the same thing and are the reference here.

   No chromatic accent: Findy has none, and borrowing one from a
   reference would be a rebrand rather than a manual.

   Type scale — reuse these, do not add neighbours:
     0.85rem  breadcrumb, captions
     1rem     h3 — sans and bold, so it reads as a heading despite
              sitting a hair under the serif body size
     1.06rem  body, notes
     1.2rem   standfirst
     1.55rem  h2
     clamp(2rem, 4vw, 2.75rem)  h1
   An earlier pass here shipped 0.99rem and 1.02rem, which are not steps —
   they are 1rem with extra decimals, and no reader can tell them apart.
   --------------------------------------------------------------------- */

.manual-page {
  padding: 40px 0 96px;
}

.manual-shell {
  max-width: 760px;
  margin-inline: auto;
}

.manual-breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 28px;
}

.manual-breadcrumb a {
  border-bottom: 1px solid var(--border);
}

.manual-breadcrumb a:hover {
  border-color: var(--muted);
}

.manual-shell h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 16px;
}

/* The standfirst answers "am I on the right page" before any scrolling. */
.manual-standfirst {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 40px;
}

.manual-body {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--body);
}

/* Constrain the *text*, not the container. Capping .manual-body itself
   measured 87 characters down to a comfortable 68, but it also shrank the
   figures — a screenshot ended up narrower than the paragraph above it.
   Limiting the prose elements individually leaves figures free to use the
   full shell, and avoids switching the block layout to grid, which would
   stop heading margins collapsing and quietly change the vertical rhythm. */
.manual-body > p,
.manual-body > ul,
.manual-body > h2,
.manual-body > h3,
.manual-body > .manual-note,
.manual-body > .manual-steps {
  max-width: 68ch;
}

.manual-body h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text);
  margin: 56px 0 14px;
}

.manual-body h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 650;
  color: var(--text);
  margin: 32px 0 8px;
}

.manual-body p {
  margin: 0 0 18px;
}

.manual-body a {
  border-bottom: 1px solid var(--border-strong);
}

.manual-body a:hover {
  border-color: var(--ink);
}

.manual-body strong {
  color: var(--text);
  font-weight: 600;
}

/* Steps carry the page. Numbers sit outside the measure so the prose
   stays flush left and scannable. */
.manual-steps {
  list-style: none;
  counter-reset: step;
  margin: 24px 0 28px;
  padding: 0;
}

.manual-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  margin-bottom: 26px;
}

.manual-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.manual-body ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.manual-body li {
  margin-bottom: 8px;
}

/* A quiet aside — never a coloured "warning" box, which would introduce
   a semantic palette the brand does not have. */
.manual-note {
  border-left: 2px solid var(--border-strong);
  padding: 4px 0 4px 18px;
  margin: 24px 0 26px;
  color: var(--muted);
  /* Same size as body on purpose. The rule and the muted colour already
     separate an aside from the prose; shaving 1px off the type as well
     just produced a step no reader could resolve. */
  font-size: 1.05rem;
}

.manual-note strong {
  color: var(--text);
}

/* Screenshots sit in a contained frame, per the docs reference. No
   shadow: the captures already carry browser chrome. */
.manual-figure {
  margin: 28px 0 30px;
}

.manual-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.manual-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--muted);
}

/* Placeholder for a capture that does not exist yet. Visible on purpose:
   an empty slot that looks deliberate is honest, a missing image that
   looks broken is not. */
.manual-figure-todo {
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 40px 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--bg-deep);
}

.manual-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}

/* Hub */
.manual-index {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.manual-index li {
  border-bottom: 1px solid var(--border);
}

.manual-index a {
  display: block;
  padding: 20px 4px;
  border: 0;
}

.manual-index a:hover .manual-index-title {
  border-bottom-color: var(--ink);
}

.manual-index-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  border-bottom: 1px solid transparent;
  display: inline-block;
}

.manual-index-desc {
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
}

.manual-group-heading {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 48px 0 0;
}

.manual-next {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .manual-body {
    font-size: 1rem;
  }

  .manual-body h2 {
    margin-top: 44px;
  }
}