/* FamBrief website: the one stylesheet for every page.
   Tokens come from Brand Pack v1.2 and the shipped Evening Brief app, so a
   colour or spacing change starts in section 1 and nowhere else. */

/* 1. Tokens ---------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  /* Inter 4.001, Latin subset, weight axis 400-700 (OFL 1.1: /assets/fonts/Inter-OFL.txt).
     "optional" never swaps after first paint: no layout shift and no flash.
     A visitor who misses it on a slow first load reads the system font, the
     same typeface the app itself uses, and gets Inter from cache next time. */
  src: url("/assets/fonts/inter-4.001-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: optional;
}

:root {
  --night: #1b2350;
  --night-deep: #131936;
  --cobalt: #3651d6;
  --canvas: #f6f3ee;
  --ink: #151a30;
  --ink-2: #5f6374;
  --amber: #ffc56b;
  --success: #1d7a4c;
  --hairline: #e7e2d9;
  --cobalt-soft: #e9edfc;
  --mist: #c7d0ec;
  --surface: #ffffff;
  /* The app's quiet fill inside cards (FamBriefColors.surfaceMuted). */
  --surface-muted: #f0ece5;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-letter: Georgia, "Times New Roman", serif;

  /* 4-point rhythm. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;

  --shadow: 0 1px 2px rgba(21, 26, 48, 0.05), 0 12px 32px rgba(21, 26, 48, 0.08);
  --shadow-lift: 0 2px 6px rgba(21, 26, 48, 0.08), 0 24px 56px rgba(21, 26, 48, 0.16);

  --max: 72rem;
  --gutter: clamp(16px, 5vw, 32px);
  --section: clamp(56px, 7vw, 96px);
  --header: 64px;

  /* Motion (section 12): reveal and settle, never loop. */
  --motion-fast: 180ms;
  --motion-medium: 360ms;
  --motion-slow: 520ms;
  --ease-settle: cubic-bezier(0.22, 0.72, 0.24, 1);
  /* Scroll reveals finish while an element's top is in the lowest 200 px of the screen,
     so anything being read is already settled. */
  --reveal-range: entry 0% entry 200px;
}

/* 2. Reset ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

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

img {
  height: auto;
}

/* 3. Base typography ----------------------------------------------------------- */

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: var(--cobalt);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--cobalt-soft);
  color: var(--ink);
}

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

.display {
  font-size: clamp(2rem, 1rem + 4vw, 3rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.03em;
}

.display .line {
  display: block;
}

.h2 {
  font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.375rem);
  letter-spacing: -0.025em;
}

.h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
}

.eyebrow {
  margin-bottom: var(--s-4);
  color: var(--cobalt);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

.muted {
  color: var(--ink-2);
}

.small {
  font-size: 0.875rem;
}

/* 4. Layout primitives ---------------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.narrow {
  max-width: 44rem;
}

.section {
  padding-block: var(--section);
}

.section-head {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head .h2 + p {
  margin-top: var(--s-4);
}

/* A little air above anchored sections. */
[id] {
  scroll-margin-top: var(--s-4);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 20;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

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

/* 5. Header ------------------------------------------------------------------------ */

/* Deliberately not sticky: a light bar would cut across the Night Indigo Tomorrow band, and
   the page is short enough that the navigation is never far away. */
.site-header {
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header);
}

.brand {
  display: block;
  flex: none;
  border-radius: 6px;
}

/* The lockup is about 20% larger than its original 115 x 28 px (139 x 34). With larger text
   on a narrow phone it gives that back first, down to the original size, so "Get the app"
   keeps its line: the middle term is the room left beside the button (about 5.25rem of text
   and 40 px of padding, border and gap). */
.brand img {
  width: clamp(115px, calc(100vw - 2 * var(--gutter) - 56px - 5.25rem), 139px);
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.site-nav ul {
  display: none;
  gap: var(--s-6);
  padding: 0;
  list-style: none;
}

.site-nav ul a {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.site-nav ul a:hover {
  color: var(--cobalt);
}

/* 6. Buttons and calls to action ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.btn-primary {
  background: var(--cobalt);
  color: #fff;
}

.btn-primary:hover {
  background: var(--night);
}

.btn-secondary {
  border-color: var(--cobalt);
  color: var(--cobalt);
}

.btn-secondary:hover {
  background: var(--cobalt-soft);
}

.btn-sm {
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
}

/* Pre-launch store state: a statement, never a button or a link. */
.availability {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 600;
}

.availability::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 197, 107, 0.3);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}

.microcopy {
  margin-top: var(--s-5);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

ul.microcopy {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

/* The separator is visual only (screen readers hear a plain list), and it ends an item so a
   wrapped line never starts with one. */
ul.microcopy li:not(:last-child)::after {
  content: "·" / "";
  margin-inline: var(--s-2);
}

/* 7. Components ------------------------------------------------------------------------ */

.card {
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Real app screens: a rounded crop with no device frame. */
.screen {
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

.screen img {
  width: 100%;
  border-radius: inherit;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: 0;
  list-style: none;
}

.chips li {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 500;
}

.checks {
  display: grid;
  gap: var(--s-3);
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 32px;
}

.checks li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 4px;
  width: 14px;
  height: 7px;
  border-bottom: 2px solid var(--cobalt);
  border-left: 2px solid var(--cobalt);
  transform: rotate(-45deg);
}

/* 8. Homepage sections ----------------------------------------------------------------- */

/* Hero */
.hero {
  padding-block: clamp(24px, 4vw, 64px) clamp(48px, 6vw, 80px);
}

.hero-grid {
  display: grid;
  gap: var(--s-4);
}

.hero-copy .eyebrow {
  margin-bottom: var(--s-3);
}

/* 16px on phones keeps the product inside the first viewport. */
.hero-copy .lead {
  max-width: 34em;
  margin-top: var(--s-4);
  color: var(--ink-2);
  font-size: 1rem;
}

.hero-copy .cta-row {
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-5);
}

.hero-copy .microcopy {
  margin-top: var(--s-4);
}

/* The incoming message and the real review it became. On phones the letter is a short
   excerpt overlapping the top of the stage, so the review shows in the first viewport. */
.hero-visual {
  display: flex;
  flex-direction: column;
  width: min(100%, 30rem);
  margin-inline: auto;
}

.letter {
  position: relative;
  z-index: 1;
  width: min(72%, 22rem);
  margin: 0 0 -40px var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: #fffdf9;
  box-shadow: var(--shadow-lift);
  font-family: var(--font-letter);
  font-size: 0.875rem;
  line-height: 1.5;
}

.letter-label {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The full sentence stays in the page for screen readers; phones show the first lines. */
.letter figcaption + p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.letter-sign {
  display: none;
}

.letter mark {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(255, 197, 107, 0.45);
  color: inherit;
}

.hero-stage {
  padding: 48px var(--s-4) var(--s-5);
  border-radius: var(--r-2xl);
  background: var(--night);
}

.stage-label {
  margin-bottom: var(--s-2);
  color: var(--mist);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.hero-stage .screen {
  width: min(100%, 330px);
  margin-inline: auto;
}

/* Problem and family moments */
.split {
  display: grid;
  gap: var(--s-5) var(--s-8);
}

.problem-grid {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-5);
}

.problem-body {
  max-width: 36em;
}

.moments li {
  font-size: 1.0625rem;
}

.closing {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

/* How it works */
.steps {
  display: grid;
  gap: var(--s-6);
  padding: 0;
  list-style: none;
}

.step {
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

.step-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--s-4);
  border-radius: 50%;
  background: var(--cobalt-soft);
  color: var(--cobalt);
  font-weight: 700;
}

.step p {
  margin-top: var(--s-2);
  color: var(--ink-2);
}

/* Tomorrow: the Evening Brief moment. */
.band-night {
  background: var(--night);
  color: #fff;
}

.band-night :focus-visible {
  outline-color: #fff;
}

.band-night a {
  color: #fff;
}

.feature {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

.feature .screen {
  width: min(100%, 340px);
  margin-inline: auto;
}

.band-night .screen {
  outline: 1px solid rgba(199, 208, 236, 0.28);
  box-shadow: 0 30px 70px rgba(4, 7, 22, 0.5);
}

.band-night .lead {
  margin-top: var(--s-5);
  color: var(--mist);
}

.signal {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  margin-top: var(--s-6);
  font-size: 1.125rem;
  font-weight: 600;
}

.signal::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  transform: translateY(-1px);
}

/* Trust */
.feature .lead {
  margin-top: var(--s-5);
  color: var(--ink-2);
}

.band-night .feature .lead {
  color: var(--mist);
}

/* Privacy */
.band-muted {
  background: var(--surface-muted);
}

.proofs {
  display: grid;
  gap: var(--s-4);
  padding: 0;
  list-style: none;
}

.proof {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
}

.tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cobalt-soft);
}

.tick::before {
  content: "";
  width: 11px;
  height: 6px;
  border-bottom: 2px solid var(--cobalt);
  border-left: 2px solid var(--cobalt);
  transform: translateY(-1px) rotate(-45deg);
}

.more-link {
  display: inline-block;
  margin-top: var(--s-6);
  font-weight: 600;
}

/* Free and Pro */
.plans-grid {
  display: grid;
  gap: var(--s-4);
}

.plan {
  padding: var(--s-6);
}

.plan .h3 {
  margin-bottom: var(--s-5);
  font-size: 1.5rem;
}

.plan-pro {
  background: var(--night);
  color: #fff;
}

.plan-pro .checks li::before {
  border-color: var(--amber);
}

.plan-lead {
  margin: calc(-1 * var(--s-3)) 0 var(--s-5);
  color: var(--mist);
}

.plans-cta {
  margin-top: var(--s-6);
}

.plans-note {
  max-width: 44rem;
  margin-top: var(--s-4);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* FAQ */
.faq-list {
  border-top: 1px solid var(--hairline);
}

.faq-list details {
  border-bottom: 1px solid var(--hairline);
}

.faq-list summary {
  position: relative;
  padding: var(--s-5) var(--s-7) var(--s-5) 0;
  font-size: 1.0625rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

.faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--s-3);
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
}

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

.faq-list details > p {
  max-width: 42rem;
  padding-bottom: var(--s-5);
  color: var(--ink-2);
}

/* The app's Add a message sheet under "Common questions": in the left column beside the
   questions from 960 px, between the heading and the questions below that. overflow clips
   the sheet to the frame's rounded corners, like the phone would. */
.faq-screen {
  width: min(100%, 320px);
  margin-top: var(--s-6);
  overflow: hidden;
}

/* Final call to action */
.final {
  text-align: center;
}

/* The approved v1.2 app icon, rounded the way a phone shows it. */
.final .app-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--s-5);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
}

.final .lead {
  max-width: 32em;
  margin: var(--s-4) auto 0;
  color: var(--ink-2);
}

.final .availability {
  margin-top: var(--s-6);
}

.final .microcopy {
  margin-top: var(--s-3);
}

/* Footer */
.site-footer {
  padding-block: var(--s-8) var(--s-6);
  background: var(--night-deep);
  color: var(--mist);
}

.site-footer :focus-visible {
  outline-color: #fff;
}

.footer-grid {
  display: grid;
  gap: var(--s-6);
}

.footer-brand img {
  width: auto;
  height: 28px;
}

.footer-brand p {
  max-width: 24em;
  margin-top: var(--s-4);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  padding: 0;
  list-style: none;
}

/* Footer links: no resting underline; it appears on hover and with keyboard focus. */
.site-footer a {
  display: inline-block;
  padding-block: var(--s-1);
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.footer-contact {
  margin-top: var(--s-4);
}

/* Lets the address break when very large text meets a narrow phone; otherwise unchanged. */
.footer-contact a {
  overflow-wrap: anywhere;
}

.footer-legal {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(199, 208, 236, 0.2);
  font-size: 0.875rem;
}

.footer-legal p + p {
  margin-top: var(--s-1);
}

/* 9. Support and legal pages ------------------------------------------------------------ */

.page-head {
  padding-block: clamp(40px, 6vw, 80px) var(--s-7);
}

.page-head .lead {
  margin-top: var(--s-4);
  color: var(--ink-2);
}

.page-meta {
  margin-top: var(--s-4);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.notice {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--cobalt);
  border-radius: var(--r-md);
  background: var(--cobalt-soft);
}

.page-body {
  padding-bottom: var(--section);
}

.doc-grid {
  display: grid;
  gap: var(--s-6);
}

.doc-aside {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.doc-main {
  min-width: 0;
  max-width: 44rem;
}

.toc,
.summary {
  padding: var(--s-5);
}

.summary {
  margin-top: var(--s-6);
}

.summary .checks {
  margin-top: var(--s-4);
}

.toc h2 {
  margin-bottom: var(--s-3);
  font-size: 1rem;
}

.toc ol {
  display: grid;
  gap: var(--s-2);
  padding-left: 1.25em;
}

/* Long words (an email address, a storage key) break only when very large text meets a narrow
   phone; otherwise unchanged (TASK #023B). */
.prose {
  overflow-wrap: anywhere;
}

.prose > * + * {
  margin-top: var(--s-4);
}

.prose h2 {
  margin-top: var(--s-7);
  font-size: 1.5rem;
}

.prose h3 {
  margin-top: var(--s-6);
  font-size: 1.1875rem;
}

.prose h2 + *,
.prose h3 + * {
  margin-top: var(--s-3);
}

.prose ul,
.prose ol {
  display: grid;
  gap: var(--s-2);
  padding-left: 1.25em;
}

.contact-card {
  padding: var(--s-6) var(--s-5);
}

.contact-card .email {
  display: inline-block;
  margin-top: var(--s-2);
  font-size: 1.25rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contact-card p + p {
  margin-top: var(--s-3);
}

/* 404 */
.not-found {
  padding-block: clamp(64px, 12vw, 160px);
}

.not-found .lead {
  margin-top: var(--s-4);
}

.not-found .cta-row {
  margin-top: var(--s-6);
}

/* 10. Utilities ------------------------------------------------------------------------- */

.center {
  text-align: center;
}

/* 11. Responsive ------------------------------------------------------------------------ */

@media (min-width: 640px) {
  .hero-copy .lead {
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  }

  .chips li {
    padding: var(--s-2) var(--s-5);
  }

  .proofs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 820px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-7);
  }
}

@media (min-width: 900px) {
  .site-nav ul {
    display: flex;
  }
}

@media (min-width: 960px) {
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-8);
  }

  .feature-media-first .feature-media {
    order: -1;
  }

  /* Each screen sits toward its text instead of floating mid-column. */
  .feature .screen {
    margin-left: 0;
  }

  .feature-media-first .screen {
    margin-right: 0;
    margin-left: auto;
  }

  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .split > .section-head {
    position: sticky;
    top: var(--s-6);
    margin-bottom: 0;
  }

  /* Body and closing line on the left, the family moments beside them. */
  .problem-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    grid-template-areas:
      "body moments"
      "closing moments";
    gap: var(--s-5) var(--s-8);
    align-items: start;
  }

  .problem-body {
    grid-area: body;
  }

  .moments {
    grid-area: moments;
    align-self: center;
  }

  .closing {
    grid-area: closing;
  }

  /* Trust: the change review is the proof, so it gets the larger column. */
  .feature-trust {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .feature-trust .screen {
    width: min(100%, 420px);
  }
}

@media (min-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--s-7);
    align-items: center;
  }

  .hero-copy .lead {
    margin-top: var(--s-5);
  }

  .hero-copy .cta-row {
    margin-top: var(--s-6);
  }

  /* Desktop: the letter and the stage share one grid row. The letter overlaps only the
     stage's left padding, so larger text makes the hero taller instead of letting the
     letter cover the review. */
  .hero-visual {
    display: grid;
    grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
    align-items: center;
    width: auto;
    margin: 0;
  }

  .letter {
    grid-area: 1 / 1;
    width: auto;
    margin: 0 -36px 0 0;
    padding: var(--s-4) var(--s-4) var(--s-5);
    font-size: 0.8125rem;
    line-height: 1.55;
  }

  .letter figcaption + p {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .letter-sign {
    display: block;
    margin-top: var(--s-2);
  }

  .hero-stage {
    grid-area: 1 / 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 32px 24px 32px 48px;
  }

  .stage-label,
  .hero-stage .screen {
    width: min(100%, 340px);
    margin: 0;
  }

  .stage-label {
    margin-bottom: var(--s-3);
    text-align: left;
  }

  /* Long documents: reading column left, contents beside it. */
  .doc-grid {
    grid-template-columns: minmax(0, 44rem) minmax(0, 17rem);
    justify-content: space-between;
    gap: var(--s-8);
  }

  .doc-aside {
    position: sticky;
    top: var(--s-6);
    order: 2;
  }
}

/* 12. Motion ----------------------------------------------------------------------------- */

/* Reveal and settle: things arrive once, softly, and then stay put. Only transform and
   opacity move, by 8 to 12 px, with no bounce and no loops. Everything here sits behind
   prefers-reduced-motion: no-preference, and the page without this section is the finished
   page, so nothing ever depends on an animation to become visible. */

@keyframes fb-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes fb-lift {
  from {
    transform: translateY(8px);
  }
}

@keyframes fb-settle {
  from {
    transform: translateY(10px) scale(0.99);
  }
}

@keyframes fb-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-y, 8px)) translateX(var(--reveal-x, 0)) scale(var(--reveal-scale, 1));
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero, on load: eyebrow, headline, copy, then the call to action, done in about 0.6 s.
     The headline and the product (which holds the LCP image) only move; they are never
     hidden, so nothing readable or measured waits for the animation. */
  .hero-copy .eyebrow,
  .hero-copy .lead,
  .hero-copy .cta-row,
  .hero-copy .microcopy {
    animation: fb-rise var(--motion-medium) var(--ease-settle) both;
  }

  .hero-copy .display {
    animation: fb-lift var(--motion-medium) var(--ease-settle) 40ms both;
  }

  .hero-copy .lead {
    animation-delay: 80ms;
  }

  .hero-copy .cta-row {
    animation-delay: 130ms;
  }

  .hero-copy .microcopy {
    animation-delay: 170ms;
  }

  .hero-visual {
    animation: fb-settle var(--motion-slow) var(--ease-settle) 60ms both;
  }

  /* Small interactions. */
  .btn {
    transition:
      transform var(--motion-fast) var(--ease-settle),
      box-shadow var(--motion-fast) var(--ease-settle),
      background-color var(--motion-fast) var(--ease-settle);
  }

  .site-nav ul a {
    transition: color var(--motion-fast) var(--ease-settle);
  }

  .faq-list summary::after {
    transition: transform var(--motion-medium) var(--ease-settle);
  }
}

/* Buttons lift by 1 px only where there is a real pointer to hover with. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
  }

  .btn-primary:hover {
    box-shadow: 0 6px 16px rgba(27, 35, 80, 0.18);
  }

  .btn-secondary:hover {
    box-shadow: 0 4px 12px rgba(54, 81, 214, 0.12);
  }

  .btn:active {
    transform: none;
    box-shadow: none;
  }
}

/* Scroll reveals, only where the browser supports scroll-driven animations. Progress
   follows the scroll position, not a clock, so there is nothing to wait for. A reveal
   finishes low on the screen and stays settled while the element is read and while it
   leaves at the top. */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .problem .container > .h2,
    .problem-grid,
    .step > :not(.step-num),
    #tomorrow .feature > div:first-child,
    #tomorrow .screen,
    #trust .feature > div:first-child,
    #trust .screen,
    #privacy .container,
    .plans-grid,
    #faq .split,
    .final .app-icon,
    .final .container > :not(.app-icon) {
      animation: fb-reveal var(--ease-settle) both;
      animation-timeline: view();
      animation-range: var(--reveal-range);
    }

    /* How it works: a light stagger, only where the three steps sit side by side. */
    @media (min-width: 820px) {
      .step:nth-child(2) > :not(.step-num) {
        animation-range: entry 40px entry 240px;
      }

      .step:nth-child(3) > :not(.step-num) {
        animation-range: entry 80px entry 280px;
      }
    }

    /* Tomorrow is the emotional peak: the screen settles a little more deliberately. */
    #tomorrow .screen {
      --reveal-y: 12px;
      --reveal-scale: 0.985;
    }

    /* Trust: the change review arrives from its own side. */
    #trust .screen {
      --reveal-y: 0px;
      --reveal-x: -10px;
    }

    .final .app-icon {
      --reveal-y: 0px;
      --reveal-scale: 0.96;
    }
  }
}

/* 13. Accessibility: motion and forced colours ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .btn,
  .card,
  .screen,
  .letter,
  .chips li,
  .notice {
    border: 1px solid CanvasText;
  }

  .availability::before,
  .signal::before {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .faq-list summary::after,
  .checks li::before,
  .tick::before {
    border-color: CanvasText;
  }

  /* Colour alone can't mark links here, so the underline comes back. */
  .site-footer a {
    text-decoration: underline;
  }

  /* The lockups are images in brand colours, which forced colours can't recolour. A plate in
     each lockup's own background keeps it legible on any system palette. */
  .brand img {
    forced-color-adjust: none;
    background-color: var(--canvas);
  }

  .footer-brand img {
    forced-color-adjust: none;
    background-color: var(--night-deep);
  }
}

/* 14. Print ----------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .skip-link {
    display: none;
  }

  body {
    background: #fff;
  }

  .prose a::after {
    content: " (" attr(href) ")";
  }
}