/* Blink Your Life — marketing site. Mirrors the app's Blinkoncemore design tokens
   so the site and the app feel like one product. */

/* Self-hosted fonts (latin subset, variable weight). Both faces are SIL OFL; see fonts/OFL.txt. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #000217;
  --s1: #05071c;
  --s2: #0b0d22;
  --text: #f1f3fa;
  --muted: rgba(241, 243, 250, 0.72);
  --faint: rgba(241, 243, 250, 0.55);
  --border: rgba(241, 243, 250, 0.1);
  --border-strong: rgba(241, 243, 250, 0.16);
  --p200: #dee0fc;
  --p300: #cbb6f3;
  --p400: #b69be0;
  --p600: #7c5ce6;
  --radius: 24px;
  --radius-md: 18px;
  --grad: linear-gradient(90deg, var(--p200), var(--p400), var(--p600));
  --card: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1200px 620px at 50% -12%, rgba(124, 92, 230, 0.28), transparent 60%),
    radial-gradient(820px 520px at 88% 6%, rgba(182, 155, 224, 0.12), transparent 55%);
  background-attachment: fixed;
}

h1, h2, h3 {
  font-family: "Space Grotesk", "Figtree", sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}
h1 { color: var(--p300); }

p { color: var(--muted); }

a { color: var(--p300); text-decoration: none; transition: color 0.18s ease; -webkit-tap-highlight-color: rgba(182, 155, 224, 0.18); }
a:hover { text-decoration: underline; }

/* Visible keyboard focus ring (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--p300);
  outline-offset: 2px;
  border-radius: 4px;
}
main:focus { outline: none; }

/* Skip-to-content link — off-screen until focused */
.skip-link {
  position: absolute;
  left: 12px;
  top: -56px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--s2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: top 0.18s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

.container { width: min(1080px, 92%); margin: 0 auto; }

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;  /* wins over any higher-specificity color: (e.g. .hero .tagline) */
}

/* ---- Header ---- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
}
.brand img { width: 30px; height: 30px; }
.brand:hover { text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; }
.nav a { color: var(--muted); font-size: 15px; padding: 6px 0; }
.nav a:hover { color: var(--text); text-decoration: none; }
/* "Get the app": outlined pill so the one action reads apart from the text links. */
.nav .nav-cta {
  color: var(--p300);
  font-weight: 600;
  padding: 6px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.nav .nav-cta:hover { color: var(--text); border-color: var(--p400); }

/* ---- Hero ---- */
.hero {
  text-align: center;
  padding: 48px 0 36px;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero > * { animation: rise 0.6s ease both; }
.hero .launch-pill { animation-delay: 0s; }
.hero .owl      { animation-delay: 0.05s; }
.hero .wordmark { animation-delay: 0.12s; }
.hero .slogan   { animation-delay: 0.15s; }
.hero h1, .hero .headline { animation-delay: 0.18s; }
.hero .hero-h1  { animation-delay: 0.22s; }
.hero .tagline  { animation-delay: 0.26s; }
.hero .badges   { animation-delay: 0.32s; }
/* Launch pill: a label, not a sentence, so the hero stays no wordier. Delete when it stops being news. */
.launch-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 auto 20px;
  padding: 7px 16px 7px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--p300);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.launch-pill:hover { text-decoration: none; color: var(--text); border-color: var(--p400); }
.launch-pill .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--p400);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(182, 155, 224, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(182, 155, 224, 0); }
  100% { box-shadow: 0 0 0 0 rgba(182, 155, 224, 0); }
}
@media (prefers-reduced-motion: reduce) { .launch-pill .pulse { animation: none; } }
.hero .owl { width: 104px; height: 104px; margin: 0 auto 18px; display: block; }
.hero .wordmark {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.hero .slogan {
  font-size: clamp(15px, 2vw, 17px);
  color: var(--muted);
  margin: -4px 0 18px;
}
.hero h1, .hero .headline { font-size: clamp(34px, 6vw, 40px); margin: 0 0 16px; }
/* Home: the big line is a <p> so the <h1> can carry the search phrase; give it the h1 look explicitly. */
.hero .headline {
  font-family: "Space Grotesk", "Figtree", sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--p300);
  margin-bottom: 10px;
}
.hero .hero-h1 {
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--p300);
  max-width: 720px;          /* one line at desktop; balanced two lines below ~640px */
  margin: 0 auto 22px;
  text-wrap: balance;
}
.hero .tagline {
  font-size: clamp(17px, 2.4vw, 21px);
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto 26px;
}
.badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 18px;
  max-width: 100%;
}
/* Official App Store badge (Apple asks for >= 40px tall and clear space of 1/4 its height). */
.store-badge { display: inline-block; line-height: 0; border-radius: 8px; transition: transform 0.2s ease; }
.store-badge img { display: block; width: 144px; height: 48px; }
@media (hover: hover) { .store-badge:hover { transform: translateY(-2px); } }
.store-badge:focus-visible { outline-offset: 4px; border-radius: 8px; }
.badge-note {
  padding: 10px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--faint);
  font-size: 14px;
}

/* ---- Sections ---- */
section { padding: 20px 0; } /* audience pages run tight */
.home section { padding: 15px 0; } /* landing runs tightest */
/* Audience sub-pages: hero spacing halved to match. */
body:not(.home) .hero { padding: 24px 0 18px; }
/* Landing hero: 25% tighter than the base .hero. */
.home .hero { padding: 15px 0 27px; }
.section-head {
  text-align: center;
  font-size: 25px;
  letter-spacing: -0.01em;
  color: var(--p400);
  margin-bottom: 22px;
}

.modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.card .emoji { font-size: 28px; }
/* Home "What it remembers for you": everything in the card is centred, blurb included */
#features .card .emoji, #features .card .kicker, #features .card h3, #features .card p { text-align: center; }
.card .kicker {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--p400);
}
.card h3 { font-size: 19px; margin: 12px 0 8px; }
.card .kicker + h3 { margin-top: 2px; }
.card p { margin: 0; font-size: 15px; }

/* ---- Closing CTA band ---- */
.cta { text-align: center; }
.cta h2 {
  font-size: clamp(28px, 5vw, 36px);
  color: var(--p300);
  margin: 0 0 14px;
}
.cta p { max-width: 600px; margin: 0 auto 24px; }

.values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
/* Home "Built to be yours": force the six chips into a tidy 3 + 3 */
.home .values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: center;
}
.chip {
  border: 1px solid var(--border);
  text-align: center;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  background: var(--card);
  color: var(--muted);
  font-size: 15px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }

/* ---- App screenshots ("A calm home for the details") ---- */
.screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: none;
  margin: 0 auto;
}
.screens figure { margin: 0; text-align: center; }
.screens.solo { grid-template-columns: 1fr; max-width: 300px; }
.screens img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}
.screens figcaption {
  margin-top: 12px;
  color: var(--faint);
  font-size: 14px;
}

.screen-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 34px;
  cursor: zoom-in;
  transition: transform 0.25s ease;
}
@media (hover: hover) { .screen-btn:hover { transform: translateY(-4px) scale(1.02); } }
.screen-btn:focus-visible { outline-offset: 4px; }
.screens-hint { text-align: center; color: var(--faint); font-size: 14px; margin: 18px 0 0; }

/* ---- Screenshot lightbox (<dialog>) ---- */
html.lb-open { overflow: hidden; overscroll-behavior: none; }
.lightbox {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  display: none;
  touch-action: pan-y pinch-zoom;   /* horizontal swipes go to our handler, not history-back */
  align-items: center;
  justify-content: center;
}
.lightbox[open] { display: flex; animation: lb-in 0.22s ease; }
.lightbox::backdrop { background: rgba(0, 2, 23, 0.9); backdrop-filter: blur(6px); animation: lb-in 0.22s ease; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-figure { margin: 0; text-align: center; }
/* Directional crossfade between images: fade + 16px slide out, park on the far side, slide in */
.lb-figure { transition: opacity 0.18s ease, transform 0.18s ease; }
.lb-figure.lb-out-left  { opacity: 0; transform: translateX(-16px); }
.lb-figure.lb-out-right { opacity: 0; transform: translateX(16px); }
.lb-figure.lb-in-right  { opacity: 0; transform: translateX(16px);  transition: none; }
.lb-figure.lb-in-left   { opacity: 0; transform: translateX(-16px); transition: none; }
.lb-img {
  display: block;
  width: auto;
  height: auto;
  max-height: calc(100vh - 140px);
  max-width: calc(100vw - 170px);
  border-radius: 34px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}
.lb-figure figcaption {
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.lb-count { color: var(--faint); font-variant-numeric: tabular-nums; }
.lb-nav, .lb-close {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lb-nav:hover, .lb-close:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--p400); }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-close { top: 20px; right: 20px; }
.lb-nav .chev { width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.lb-prev .chev { transform: translateX(2px) rotate(135deg); }
.lb-next .chev { transform: translateX(-2px) rotate(-45deg); }
.lb-close span { position: relative; width: 18px; height: 18px; }
.lb-close span::before, .lb-close span::after {
  content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: currentColor;
}
.lb-close span::before { transform: rotate(45deg); }
.lb-close span::after { transform: rotate(-45deg); }
@media (max-width: 760px) {
  /* Phones: the image runs nearly edge to edge (16px gutters) and is sized by width, so it can be
     taller than the screen. The dialog scrolls vertically; close / prev / next stay pinned. */
  .lightbox {
    flex-direction: column;
    justify-content: flex-start;   /* with the figure's auto margins: centred when short, scrollable when tall */
    overflow-y: auto;
    padding: 12px 16px calc(76px + env(safe-area-inset-bottom));
  }
  .lb-figure { margin: auto 0; }
  .lb-img {
    width: min(100vw - 32px, 552px);   /* never upscale past the source */
    max-width: none;
    max-height: none;
    box-shadow: none;                  /* invisible on the dark backdrop anyway */
  }
  .lb-nav, .lb-close { position: fixed; }
  .lb-nav { width: 40px; height: 40px; }
  .lb-prev { left: 12px; top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: none; }
  .lb-next { right: 12px; top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: none; }
  .lb-close { width: 36px; height: 36px; top: max(10px, env(safe-area-inset-top)); right: 10px; }
  .lb-close span { width: 14px; height: 14px; }
  .lb-close span::before, .lb-close span::after { width: 14px; top: 6px; }
}

/* ---- "Sound familiar?" scenarios ---- */
.scenario-group { margin-top: 30px; }
.scenario-group:first-of-type { margin-top: 8px; }
.group-kicker {
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--p400);
  margin: 0 0 16px;
}
.scenarios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}
.scenario {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.scenario:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.scenario .moment {
  font-family: "Space Grotesk", "Figtree", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--p300);
  margin: 0 0 6px;
}
.scenario p { margin: 0; font-size: 15px; }

/* Show 4 of 8 scenarios per group; the rest live in a wrapper whose grid row
   animates 0fr -> 1fr (smooth height without JS measurement). Without JS the
   wrapper is simply open and the button is hidden. */
.scenarios-more { display: grid; grid-template-rows: 1fr; max-width: 860px; margin: 0 auto; }
.scenarios-more-inner { min-height: 0; overflow: hidden; }
.scenarios-more .scenarios { margin-top: 14px; }
.show-more { display: none; }
.js .scenarios-more {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.45s ease, opacity 0.3s ease, visibility 0s linear 0.45s;
}
.js .scenario-group.is-open .scenarios-more {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.45s ease, opacity 0.35s ease 0.1s, visibility 0s;
}
.js .show-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.js .show-more:hover { border-color: var(--border-strong); color: var(--text); }
.scenario-group { text-align: center; }          /* centres the button */
.scenario-group .scenario { text-align: left; }
.show-more .chev {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s ease;
}
.is-open .show-more .chev { transform: translateY(2px) rotate(-135deg); }

/* ---- Founder note ("Why I built this") ---- */
.founder {
  max-width: 680px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 34px;
  box-shadow: var(--shadow);
}
.founder p { margin: 0 0 14px; font-size: 15.5px; }
.founder p:last-child { margin-bottom: 0; }
.founder .sig { margin-top: 18px; color: var(--faint); font-size: 14.5px; }

/* ---- "What you can remember" examples ---- */
.lead {
  text-align: center;
  max-width: 600px;
  margin: -6px auto 24px;
  color: var(--muted);
}
.examples {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 860px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.examples li {
  position: relative;
  padding: 14px 18px 14px 42px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 15px;
}
.examples li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 20px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grad);
}

/* ---- Audience cross-links (home "Made for the way you remember") ---- */
.audience-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 780px;
  margin: 0 auto;
}
.audience-links a {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  background: var(--card);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.audience-links a:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  text-decoration: none;
}
.audience-links h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--p300);
}
.audience-links p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
}

/* Audience pages: "Also made for..." shows the other three personas in one row */
.audience-links.three { grid-template-columns: repeat(3, 1fr); max-width: 1000px; }

/* Audience pages: FAQ (same reading column as .legal) */
.faq { max-width: 760px; margin: 0 auto; }
.faq h3 { font-size: 18px; margin: 22px 0 6px; }
.faq p { margin: 0; font-size: 15.5px; }
.faq p a { text-decoration: underline; }

/* ---- Blog post list ---- */
.posts {
  list-style: none;
  padding: 0;
  margin: 8px auto 0;
  max-width: 760px;
  display: grid;
  gap: 14px;
}
.posts a {
  display: block;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.posts a:hover { border-color: var(--border-strong); transform: translateY(-2px); text-decoration: none; }
.legal .posts li a, .legal .posts li a:hover { text-decoration: none; }
.posts h3 { margin: 0 0 6px; font-size: 19px; color: var(--text); }
.posts p { margin: 0; }

/* ---- Pricing ---- */
.pricing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}
.plan {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--card);
  text-align: center;
  transition: transform 0.2s ease;
}
.plan:hover { transform: translateY(-3px); }
.plan.featured { border-color: var(--p600); }
.plan h3 { font-size: 20px; margin: 0 0 6px; }
.plan .price { font-size: 26px; font-weight: 700; color: var(--text); margin: 8px 0; }
.plan .price span { font-size: 15px; color: var(--faint); font-weight: 400; }
.plan ul { list-style: none; padding: 0; margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.plan li { padding: 5px 0; }
.plan li strong { color: var(--p300); font-weight: 600; }
.trial { color: var(--p300); font-size: 14px; margin-top: 10px; }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding: 28px 0 40px;
  text-align: center;
  color: var(--faint);
  font-size: 14px;
}
.site-footer a { color: var(--muted); margin: 0 4px; padding: 6px 8px; display: inline-block; }

/* ---- Legal / support pages ---- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 0 48px;
}
.legal h1 { font-size: clamp(28px, 5vw, 40px); margin: 8px 0 6px; }
.legal .updated { color: var(--faint); font-size: 16px; margin-bottom: 28px; }
.legal h2 { font-size: 20px; margin: 30px 0 10px; }
.legal h3 { font-size: 17px; margin: 22px 0 8px; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 20px; }
.legal a { color: var(--p300); }
.legal p a, .legal li a { text-decoration: underline; }
.back { display: inline-block; margin-bottom: 8px; color: var(--muted); font-size: 14px; }

@media (max-width: 760px) {
  .modules { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .examples { grid-template-columns: 1fr; }
  .scenarios { grid-template-columns: 1fr; }
  .audience-links, .audience-links.three { grid-template-columns: 1fr; }
  .screens { grid-template-columns: 1fr; max-width: 300px; }
  .home .values { display: flex; }
}
@media (max-width: 560px) {
  .site-header {
    flex-direction: column;
    gap: 14px;
    padding: 18px 0 16px;
    border-bottom: 1px solid var(--border);
  }
  .nav { gap: 28px; }
  .nav a { padding: 6px 4px; }
  /* Home headline: one sentence per line. "You don't need a better memory." is 15.15x
     the font-size wide in Space Grotesk 700; the container is 92vw, so 5.95vw fills it
     with ~2% slack. (Audience-page headlines are longer and keep the default size.) */
  .home .hero .headline {
    font-size: min(34px, 5.95vw);
    text-wrap: wrap;           /* balance could otherwise re-break the lines */
    margin-bottom: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero > * { animation: none; }
  .card:hover, .plan:hover, .scenario:hover, .audience-links a:hover { transform: none; }
  .scenarios-more, .show-more .chev { transition: none; }
  .lightbox[open], .lightbox::backdrop, .screen-btn { animation: none; transition: none; }
  .lb-figure { transition: none; }
}

/* Windows High Contrast / forced-colors: gradient-clipped text would vanish */
@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

/* ==== Mobile (audit 2026-08-24) ==== */
@media (max-width: 760px) {
  /* iOS Safari ignores background-attachment: fixed and sizes the gradient
     against the whole document, pushing the hero glow off the top of the page.
     Anchor it to the document top in px instead. */
  body {
    background-attachment: scroll;
    background-image:
      radial-gradient(760px 460px at 50% -90px, rgba(124, 92, 230, 0.28), transparent 60%),
      radial-gradient(520px 380px at 90% 40px, rgba(182, 155, 224, 0.12), transparent 55%);
  }

  /* Stacked cards: centre the emoji / kicker / title under the centred section heading */
  .card .emoji, .card .kicker, .card h3 { text-align: center; }

  /* Tap targets >= 44px (nav, footer, back links) */
  .nav a { padding: 12px 6px; }
  .nav .nav-cta { padding: 11px 16px; }
  .site-footer a { padding: 11px 10px; }
  .back { padding: 11px 0; margin-bottom: 0; }

  /* Nicer line breaks on narrow columns (progressive enhancement) */
  h1, h2, h3, .section-head, .group-kicker { text-wrap: balance; }
  .hero .tagline, .lead, .cta p, .card p, .scenario p, .audience-links p { text-wrap: pretty; }
}
@media (max-width: 360px) {
  .nav { gap: 16px; }
}
/* Touch screens: hover "lift" would otherwise stick after a tap */
@media (hover: none) {
  .card:hover, .plan:hover, .scenario:hover, .audience-links a:hover, .posts a:hover { transform: none; }
}