/*
 * Mind Clutter — marketing site.
 *
 * Plain CSS on purpose. The site has to run from cPanel (no Node) as
 * happily as from GitHub Pages, so there is no build step and no
 * framework: one stylesheet, one script, hand-written HTML.
 */

/* --------------------------------------------------------------- fonts --
 * Inter is self-hosted rather than pulled from fonts.googleapis.com. Two
 * reasons, and the second is the important one:
 *   1. It removes two DNS lookups and a render-blocking third-party CSS
 *      request from the critical path.
 *   2. Loading fonts from Google's CDN transmits every visitor's IP address
 *      to Google before they have consented to anything — a German court
 *      (LG München I, 3 O 17493/20) held that to be a GDPR breach. Doing
 *      that on the page where we promise we cannot read your thoughts would
 *      be indefensible.
 * Latin subset only; font-display:swap so text paints immediately.
 * Inter is licensed under the SIL Open Font License 1.1.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/inter-800.woff2') format('woff2');
}

/* ---------------------------------------------------------------- tokens */

:root {
  --blue-700: #1F47B8;
  --blue-600: #2A5BE0;
  --blue-500: #3D6EF7;
  --blue-400: #6C97FA;
  --blue-300: #9CC0FC;
  --ice: #E6F4FE;
  --ice-deep: #D3E9FD;

  --ink: #0C1A33;
  --ink-2: #46587A;
  --ink-3: #7387A6;

  --bg: #FFFFFF;
  --bg-alt: #F5F9FF;
  --surface: #FFFFFF;
  --line: rgba(12, 26, 51, 0.09);

  --shadow-sm: 0 1px 2px rgba(12, 26, 51, 0.06), 0 4px 12px rgba(12, 26, 51, 0.05);
  --shadow-md: 0 2px 6px rgba(12, 26, 51, 0.07), 0 18px 40px rgba(12, 26, 51, 0.09);
  --shadow-lg: 0 30px 80px rgba(31, 71, 184, 0.18);

  --radius: 18px;
  --radius-lg: 28px;

  --maxw: 1120px;
  --pad: clamp(20px, 5vw, 40px);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Light only, by decision. Without this a visitor whose OS is set to dark
     gets dark UA form controls and scrollbars against our light surfaces. */
  color-scheme: light;
}

/* ----------------------------------------------------------------- reset */

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

html {
  scroll-behavior: smooth;
  /* The header is sticky and ~71px tall. Without this, every in-page link
     parks its target underneath the header — clicking "Get the app" scrolled
     the download buttons completely out of sight. */
  scroll-padding-top: 96px;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  /* `clip`, never `hidden`. overflow-x:hidden on body makes the body a
     scroll container (computed overflow becomes "hidden auto"), which gives
     the page two nested scrollers and leaves scrolling feeling stuck after
     an anchor jump. `clip` cuts the overflow without creating a scroll box. */
  overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--blue-500); }

:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 6px;
}

/* -------------------------------------------------------------- typography */

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; font-weight: 800; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.3rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; }
p { margin: 0; }

.lead {
  font-size: clamp(1.06rem, 2.1vw, 1.32rem);
  color: var(--ink-2);
  line-height: 1.62;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-500);
  background: var(--ice);
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 999px;
}

/* ------------------------------------------------------------------ layout */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
section { padding: clamp(72px, 11vw, 130px) 0; }
.section-head { max-width: 660px; margin-bottom: clamp(40px, 6vw, 66px); }
.section-head h2 { margin: 18px 0 16px; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 70px;
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 600;
  transition: color 0.18s ease;
}
.nav-links a:hover { color: var(--ink); }
@media (max-width: 820px) { .nav-links { display: none; } }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.09rem;
  letter-spacing: -0.02em;
}
.brand svg { width: 30px; height: 30px; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.18s ease, background 0.18s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff;
  box-shadow: 0 10px 26px rgba(61, 110, 247, 0.34);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(61, 110, 247, 0.42); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-2px); }

/* -------------------------------------------------------------- store badges */

.stores { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px 11px 18px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.store-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.store-badge svg { width: 26px; height: 26px; flex: none; fill: currentColor; }
.store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge .sb-small { font-size: 0.66rem; opacity: 0.82; letter-spacing: 0.02em; }
.store-badge .sb-big { font-size: 1.03rem; font-weight: 700; letter-spacing: -0.01em; }

.stores-note { font-size: 0.86rem; color: var(--ink-3); margin-top: 14px; }

/* -------------------------------------------------------------------- hero */

.hero { position: relative; padding: clamp(56px, 8vw, 96px) 0 clamp(70px, 10vw, 120px); overflow: hidden; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy .stores, .hero-copy .eyebrow { justify-content: center; }
  .hero-trust { justify-content: center; }
}

.hero h1 { margin: 22px 0 20px; }
.hero h1 .grad {
  background: linear-gradient(120deg, var(--blue-500), var(--blue-700) 55%, var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lead { max-width: 34ch; }
@media (max-width: 940px) { .hero .lead { max-width: none; } }
.hero .stores { margin-top: 34px; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  font-size: 0.87rem;
  color: var(--ink-2);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--blue-500); flex: none; }

/* Aurora blobs behind the hero. */
/* Sized to the viewport and clipping its own blobs. Letting it hang past
   the edge relied on an ancestor to clip, which kept it out of sight but
   still counted toward document scroll width — 21px of phantom horizontal
   scroll on a 375px screen. */
.aurora {
  position: absolute;
  inset: -20% 0 auto 0;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  filter: blur(70px);
  opacity: 0.55;
}
.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  animation: drift 22s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -6vw; top: 2vw; background: radial-gradient(circle, var(--blue-400), transparent 68%); }
.aurora i:nth-child(2) { width: 40vw; height: 40vw; right: -4vw; top: -6vw; background: radial-gradient(circle, var(--blue-300), transparent 66%); animation-delay: -7s; }
.aurora i:nth-child(3) { width: 34vw; height: 34vw; left: 38vw; top: 28vw; background: radial-gradient(circle, #A7E8FF, transparent 66%); animation-delay: -13s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3vw, -3vw, 0) scale(1.14); }
}

/* ------------------------------------------------------- the phone mock-up */

.phone-stage { display: flex; justify-content: center; perspective: 1400px; }

.phone {
  position: relative;
  width: min(310px, 78vw);
  aspect-ratio: 310 / 640;
  border-radius: 44px;
  background: linear-gradient(160deg, #1a2540, #0b1327);
  padding: 11px;
  box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255, 255, 255, 0.13);
  transform: rotateY(-13deg) rotateX(5deg) rotateZ(1deg);
  animation: tilt 12s ease-in-out infinite alternate;
}
@keyframes tilt {
  from { transform: rotateY(-13deg) rotateX(5deg) translateY(0); }
  to { transform: rotateY(-5deg) rotateX(2deg) translateY(-14px); }
}

.phone::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  border-radius: 999px;
  background: #05090f;
  z-index: 4;
}

.screen {
  position: relative;
  height: 100%;
  border-radius: 34px;
  background: var(--bg);
  overflow: hidden;
}

/* Real screenshots, crossfading through capture → sorted → today. The app
   is the demo; drawing an approximation of it only invites the comparison. */
.shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.75s ease;
}
.shot.is-on { opacity: 1; }

.shot-caption {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  background: rgba(10, 17, 34, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

/* --------------------------------------------------------- shots gallery */

.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  max-width: 860px;
  margin-inline: auto;
}
@media (max-width: 700px) { .shots { grid-template-columns: 1fr; max-width: 300px; } }

.shots figure { margin: 0; }
.shots img {
  width: 100%;
  /* height:auto is required, not tidiness: the width/height HTML attributes
     are presentational hints, so the attribute height wins over aspect-ratio
     and the tiles render at full natural height without it. */
  height: auto;
  /* Fixed ratio so a scrolled capture (which is shorter) still tiles evenly
     with the full-height ones. */
  aspect-ratio: 540 / 1127;
  object-fit: cover;
  object-position: top center;
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: var(--bg-alt);
}
.shots figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.shots figcaption b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 3px; }

/* Floating chips that orbit the phone. They must sit above .screen and the
   notch (z-index 4), both of which come later in the DOM and would
   otherwise paint over them. */
.orbit { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.chip {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: bob 6s ease-in-out infinite;
}
/* Kept clear of the top of the screenshot — the header and the day's count
   are the first thing read, and a chip over them costs more than it adds. */
.chip.c1 { top: 32%; left: -17%; animation-delay: -0.6s; }
.chip.c2 { top: 56%; right: -13%; animation-delay: -2.4s; }
.chip.c3 { bottom: 12%; left: -10%; animation-delay: -4.1s; }
@media (max-width: 1080px) { .chip { display: none; } }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-13px) rotate(1.2deg); }
}

/* ------------------------------------------------------------------- steps */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff;
  font-weight: 800;
  font-size: 1.02rem;
  margin-bottom: 18px;
}
.step h3 { margin-bottom: 9px; }
.step p { color: var(--ink-2); font-size: 0.96rem; }

/* ---------------------------------------------------------------- features */

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }
.feature .ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--ice);
  color: var(--blue-500);
  margin-bottom: 16px;
}
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { margin-bottom: 8px; font-size: 1.04rem; }
.feature p { color: var(--ink-2); font-size: 0.93rem; }

/* ----------------------------------------------------------------- privacy */

.privacy-band { background: var(--bg-alt); border-block: 1px solid var(--line); }
.privacy-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(34px, 6vw, 70px); align-items: center; }
@media (max-width: 900px) { .privacy-grid { grid-template-columns: 1fr; } }

.vault {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 340px;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--ice), transparent 68%);
  position: relative;
  /* The rings are squares with border-radius:50%. Rotating a square grows
     its bounding box by a factor of √2 even though the painted circle never
     moves, and that phantom width became real horizontal scroll on a phone.
     Clipping costs nothing visually — there is nothing in the corners. */
  overflow: hidden;
}
.vault svg { width: 52%; color: var(--blue-500); }
.vault .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed var(--blue-300);
  animation: spin 34s linear infinite;
}
.vault .ring:nth-of-type(2) { inset: 13%; animation-duration: 24s; animation-direction: reverse; border-style: solid; opacity: 0.5; }
@keyframes spin { to { transform: rotate(360deg); } }

.privacy-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 15px; }
.privacy-list li { display: flex; gap: 13px; align-items: flex-start; color: var(--ink-2); font-size: 0.98rem; }
.privacy-list svg { width: 21px; height: 21px; color: var(--blue-500); flex: none; margin-top: 2px; }
.privacy-list b { color: var(--ink); font-weight: 700; }

/* ----------------------------------------------------------------- pricing */

.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 780px; margin-inline: auto; }
@media (max-width: 700px) { .price-grid { grid-template-columns: 1fr; } }

.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
}
.plan.best { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(61, 110, 247, 0.13), var(--shadow-md); }
.plan .tag {
  position: absolute;
  top: -13px;
  left: 28px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
}
.plan h3 { font-size: 1rem; color: var(--ink-2); font-weight: 700; }
.plan .amount { font-size: 2.7rem; font-weight: 800; letter-spacing: -0.04em; margin: 10px 0 2px; }
.plan .amount span { font-size: 1rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.plan .sub { font-size: 0.9rem; color: var(--ink-3); }
.plan ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: 0.93rem; color: var(--ink-2); }
.plan li svg { width: 18px; height: 18px; color: var(--blue-500); flex: none; margin-top: 3px; }

.price-note { text-align: center; color: var(--ink-3); font-size: 0.88rem; margin-top: 26px; }

/* --------------------------------------------------------------------- faq */

.faq { max-width: 760px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  transition: border-color 0.2s ease;
}
.faq details[open] { border-color: var(--blue-300); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2.2px solid var(--ink-3);
  border-bottom: 2.2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.24s ease;
  flex: none;
  margin-right: 3px;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { color: var(--ink-2); font-size: 0.96rem; margin-top: 12px; }

/* --------------------------------------------------------------------- cta */

.cta-band {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 7vw, 68px) clamp(26px, 5vw, 60px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  width: 60vw;
  height: 60vw;
  top: -30vw;
  right: -14vw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
}
.cta-band h2, .cta-band p { position: relative; }
.cta-band p { color: rgba(255, 255, 255, 0.86); margin-top: 14px; }
.cta-band .stores { justify-content: center; margin-top: 30px; position: relative; }
.cta-band .store-badge { background: #fff; color: var(--ink); }
.cta-band .stores-note { color: rgba(255, 255, 255, 0.72); }

/* ------------------------------------------------------------------ footer */

.site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; background: var(--bg-alt); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 34px; justify-content: space-between; }
.foot-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin: 0 0 14px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-col a { color: var(--ink-2); text-decoration: none; font-size: 0.93rem; }
.foot-col a:hover { color: var(--blue-500); }
.foot-bottom {
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 0.86rem;
}

/* ------------------------------------------------------- scroll reveal */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------- legal documents */

.doc { padding: clamp(46px, 7vw, 84px) 0 clamp(60px, 9vw, 100px); }
.doc-inner { max-width: 760px; margin-inline: auto; }
.doc h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); margin-bottom: 10px; }
.doc .updated { color: var(--ink-3); font-size: 0.92rem; margin-bottom: 40px; }
.doc h2 { font-size: clamp(1.3rem, 2.6vw, 1.65rem); margin: 46px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc h3 { margin: 28px 0 10px; font-size: 1.06rem; }
.doc p { margin: 0 0 16px; color: var(--ink-2); }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 22px; color: var(--ink-2); }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--ink); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 38px 0; }
.doc blockquote { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--blue-500); background: var(--bg-alt); border-radius: 0 12px 12px 0; }
.doc blockquote p:last-child { margin-bottom: 0; }
.doc code { background: var(--bg-alt); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; }

.doc .table-scroll { overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch; }
.doc table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 0.92rem; }
.doc th, .doc td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-weight: 700; color: var(--ink); background: var(--bg-alt); white-space: nowrap; }
.doc td { color: var(--ink-2); }

.doc-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.doc-nav a {
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 8px 15px;
  border-radius: 999px;
}
.doc-nav a[aria-current='page'] { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }

/* Crisis information must not read like fine print. */
.callout {
  border: 1px solid var(--blue-300);
  background: var(--ice);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 24px;
}
.callout p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ utilities --
 * These classes exist because the site ships a strict Content-Security-
 * Policy, and `style-src 'self'` blocks inline style attributes and
 * element.style writes alike. Keeping the policy strict is worth more than
 * the convenience of an inline style — so nothing here may move back into
 * a style="" attribute.
 */
.band { background: var(--bg-alt); border-block: 1px solid var(--line); }
.centered { text-align: center; margin-inline: auto; }

.foot-about { max-width: 280px; }
.foot-about .brand { margin-bottom: 12px; }
.foot-blurb { color: var(--ink-3); font-size: 0.9rem; line-height: 1.65; }

.privacy-head { margin: 18px 0 16px; }
.privacy-note { margin-top: 26px; color: var(--ink-3); font-size: 0.93rem; }

.nf-lead { margin: 14px 0 30px; }
.nf-note { margin-top: 34px; color: var(--ink-3); font-size: 0.92rem; }

/* Staggered reveals, previously set as an inline transitionDelay. */
.reveal.d1 { transition-delay: 90ms; }
.reveal.d2 { transition-delay: 180ms; }

.shot-caption.is-fading { opacity: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue-500);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 10px 0;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { left: 0; }