/* =========================================================================
   Quant AI — hand-written stylesheet (Tailwind-free), 1:1 with the Astro site.
   Design tokens are CSS custom properties; the charcoal ramp flips between
   dark (default) and light (html.light), exactly like Layout.astro.
   ========================================================================= */

/* Self-hosted variable fonts — the exact @fontsource files Astro ships
   ("Inter Variable" / "Bricolage Grotesque Variable", wght axis). Matching the
   real font metrics is what makes line-wrapping pixel-identical to Astro. */
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2-variations');
  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: 'Bricolage Grotesque Variable';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  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: 'Inter Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* Brand palette (mirrored from the iOS app) */
  --primary-400: 255 137 51;   /* #FF8933 */
  --primary-500: 255 123 26;   /* #FF7B1A */
  --primary-600: 255 108 0;    /* #FF6C00 */
  --accent-500:  54 173 251;   /* #36ADFB */

  /* Neutral ramp — dark theme. Space-separated RGB so we can add opacity. */
  --ch-50: 242 242 242;  --ch-100: 229 229 229; --ch-200: 201 201 201;
  --ch-300: 176 176 176; --ch-400: 150 150 150; --ch-500: 125 125 125;
  --ch-600: 97 97 97;    --ch-700: 71 71 71;    --ch-800: 56 56 56;
  --ch-850: 46 46 46;    --ch-900: 30 30 30;    --ch-950: 18 18 18;

  --font-sans: "Inter Variable", "Inter", system-ui, sans-serif;
  --font-display: "Bricolage Grotesque Variable", "Inter Variable", system-ui, sans-serif;
  --container: 1280px;
}

html.light {
  --ch-50: 26 29 33;     --ch-100: 36 40 45;    --ch-200: 52 58 65;
  --ch-300: 75 82 90;    --ch-400: 107 114 123; --ch-500: 135 142 151;
  --ch-600: 156 163 173; --ch-700: 212 216 222; --ch-800: 228 231 236;
  --ch-850: 237 239 242; --ch-900: 242 244 246; --ch-950: 255 255 255;
}

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

html {
  background-color: rgb(var(--ch-950));
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: rgb(var(--ch-950));
  color: rgb(var(--ch-100));
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
::selection { background: rgb(var(--primary-600) / 0.3); color: #fff; }
img { max-width: 100%; height: auto; display: block; content-visibility: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.accent { color: rgb(var(--primary-500)); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hidden { display: none; }

/* ---- Ambient glow ----------------------------------------------------- */
.ambient { pointer-events: none; position: fixed; inset: 0; z-index: -10; overflow: hidden; }
.ambient-blob { position: absolute; border-radius: 9999px; filter: blur(120px); }
.ambient-blob--primary {
  top: -10rem; left: 50%; transform: translateX(-50%);
  height: 40rem; width: 40rem; background: rgb(var(--primary-600) / 0.15);
}
.ambient-blob--accent {
  top: 33%; right: -10rem; height: 30rem; width: 30rem; background: rgb(var(--accent-500) / 0.10);
}

/* ---- Buttons (ports ui/link.astro + ui/button.astro) ------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.5rem; font-weight: 600; text-align: center; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; line-height: 1.25rem;
  transition: all 0.2s ease;
}
.btn--icon { gap: 0.375rem; }
/* Optical nudge so the Apple glyph centers against the label. em-relative so
   it scales with the button size. */
.btn--icon .apple-icon { position: relative; top: -0.08em; }
.btn .apple-icon { width: 1rem; height: 1rem; }
.btn--md { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn--lg { padding: 0.75rem 1.25rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--submit { padding: 0.75rem 1.5rem; }      /* Button size lg */

.btn--primary {
  background: rgb(var(--primary-600)); color: #fff;
  box-shadow: 0 10px 15px -3px rgb(var(--primary-600) / 0.25),
              0 4px 6px -4px rgb(var(--primary-600) / 0.25);
}
.btn--primary:hover { background: rgb(var(--primary-500)); }
.btn--outline {
  background: transparent; border-color: rgb(var(--ch-700)); color: rgb(var(--ch-50));
}
.btn--outline:hover { border-color: rgb(var(--ch-500)); background: rgb(var(--ch-900)); }
.btn--inverted { background: #fff; color: rgb(var(--ch-950)); }
.btn--inverted:hover { background: rgb(var(--ch-100)); }
.btn--muted { background: rgb(var(--ch-850)); color: rgb(var(--ch-100)); }
.btn--muted:hover { background: rgb(var(--ch-800)); }
.btn--ghost { color: rgb(var(--ch-200)); }
.btn--ghost:hover { color: rgb(var(--ch-50)); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--ch-950)), 0 0 0 4px rgb(var(--primary-500) / 0.6);
}

/* ---- Theme toggle ----------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.25rem; width: 2.25rem; border-radius: 0.5rem;
  border: 1px solid rgb(var(--ch-800)); background: rgb(var(--ch-900) / 0.6);
  color: rgb(var(--ch-200)); cursor: pointer; transition: color .2s, border-color .2s;
}
.theme-toggle:hover { border-color: rgb(var(--ch-600)); color: rgb(var(--ch-50)); }
.theme-toggle svg { height: 1.25rem; width: 1.25rem; }
.theme-moon { display: none; }
html.light .theme-sun { display: none; }
html.light .theme-moon { display: inline-block; }

/* ---- Navbar (ports navbar/navbar.astro) ------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgb(var(--ch-900) / 0.8);
  background: rgb(var(--ch-950) / 0.7);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.nav-header {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; padding-block: 0.75rem;
}
.nav-bar { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.nav-logo img { height: 2.25rem; width: 2.25rem; border-radius: 0.5rem; }
.nav-logo > span {
  font-size: 1.125rem; font-weight: 700; font-family: var(--font-display);
  letter-spacing: -0.025em; color: rgb(var(--ch-50));
}
.nav-mobile-actions { display: flex; align-items: center; gap: 0.5rem; }
.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; background: transparent; border: 0;
  color: rgb(var(--ch-100)); cursor: pointer;
}
.hamburger svg { width: 1.25rem; height: 1.25rem; }
.nav-menu { display: none; width: 100%; margin-top: 0.75rem; }
.nav-menu.open { display: block; }
.nav-links { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: flex; padding: 0.5rem 0; font-size: 0.875rem; font-weight: 500;
  color: rgb(var(--ch-300)); text-decoration: none; transition: color .2s;
}
.nav-links a:hover { color: rgb(var(--ch-50)); }
.nav-menu-cta { margin-top: 0.75rem; }
.nav-desktop-actions { display: none; }

@media (min-width: 1024px) {
  .nav-header { flex-direction: row; }
  .nav-bar { width: auto; }
  .nav-mobile-actions { display: none; }
  .nav-menu { display: flex !important; width: auto; margin-top: 0; align-items: center; }
  .nav-links { flex-direction: row; gap: 0.5rem; align-items: center; }
  .nav-links a { padding: 0.5rem 0.75rem; }
  .nav-menu-cta { display: none; }
  .nav-desktop-actions { display: flex; align-items: center; gap: 0.75rem; }
}

/* ---- Hero ------------------------------------------------------------- */
.fold { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 5rem); }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 2rem; }
.hero-badge-wrap { margin-bottom: 1.5rem; }
.hero-badge { width: 130px; }
.hero-title {
  max-width: 56rem; margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.025em;
  color: rgb(var(--ch-50));
}
.hero-title .grad {
  background: linear-gradient(to right, rgb(var(--primary-400)), rgb(var(--primary-600)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.light .hero-badge { filter: invert(1) brightness(0.92); }
.hero-subtitle { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; color: rgb(var(--ch-300)); }
.hero-cta { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.download-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.download-buttons .apple-icon { width: 1.25rem; height: 1.25rem; }

/* social proof */
.social-proof { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; }
.avatars { display: flex; }
.avatars img {
  width: 2rem; height: 2rem; border-radius: 9999px; object-fit: cover;
  box-shadow: 0 0 0 2px rgb(var(--ch-950)); margin-left: -0.625rem;
}
.avatars img:first-child { margin-left: 0; }
.rating { display: flex; flex-direction: column; align-items: center; }
.stars { display: flex; align-items: center; gap: 0.125rem; color: #facc15; }
.rating-score { margin-left: 0.4rem; font-size: 0.875rem; font-weight: 600; color: rgb(var(--ch-50)); }
.rating-label { margin: 0.25rem 0 0; font-size: 0.875rem; color: rgb(var(--ch-400)); white-space: nowrap; }

@media (min-width: 640px) {
  .hero-badge { width: 150px; }
  .social-proof { flex-direction: row; gap: 1rem; text-align: left; }
}

/* phones */
.phones { position: relative; margin-top: 3.5rem; display: flex; align-items: flex-end; justify-content: center; }
.phones-glow {
  position: absolute; inset-inline: 0; bottom: 0; z-index: -10; margin-inline: auto;
  height: 70%; width: 80%; border-radius: 9999px; filter: blur(64px);
  background: linear-gradient(to bottom, rgb(var(--primary-600) / 0.25), rgb(var(--accent-500) / 0.15));
}
.phone { position: relative; z-index: 10; width: 165px; }
.phone img { filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); }  /* Tailwind drop-shadow-2xl */
.phone--front { transform: translateY(1rem); z-index: 20; }   /* left phone sits on top */
.phone--back { margin-left: -1rem; transform: translateY(-1rem); z-index: 10; }
@media (min-width: 640px) { .phone { width: 280px; } .phone--back { margin-left: -1.5rem; } }
@media (min-width: 1024px) { .phone { width: 320px; } }

/* market pills (ports logos.astro) */
.markets { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.625rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px;
  border: 1px solid rgb(var(--ch-800)); background: rgb(var(--ch-900) / 0.6);
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
  color: rgb(var(--ch-200)); transition: border-color 0.2s, color 0.2s;
}
.pill:hover { border-color: rgb(var(--ch-600)); color: rgb(var(--ch-50)); }
.pill-icon { width: 1rem; height: 1rem; color: rgb(var(--primary-500)); }

/* ---- Section scaffolding --------------------------------------------- */
.section { margin-top: 6rem; }
.section--anchor { scroll-margin-top: 6rem; }
@media (min-width: 768px) { .section { margin-top: 8rem; } }

.section-head { max-width: 42rem; margin-inline: auto; text-align: center; }
.section-title {
  margin-top: 0.75rem; font-size: 1.875rem; font-weight: 700; font-family: var(--font-display);
  letter-spacing: -0.025em; color: rgb(var(--ch-50));
}
.section-desc { margin-top: 1rem; font-size: 1.125rem; color: rgb(var(--ch-300)); }
@media (min-width: 1024px) { .section-title { font-size: 3rem; line-height: 1; } }

.section-chip {
  display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px;
  border: 1px solid rgb(var(--ch-800)); background: rgb(var(--ch-900) / 0.6);
  padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: rgb(var(--ch-200));
}
.section-chip-icon { width: 1rem; height: 1rem; color: rgb(var(--primary-500)); }

/* page heads (ports sectionhead.astro) */
.section-head--page { margin-top: 4rem; }
.page-title {
  font-size: 2.25rem; font-weight: 700; font-family: var(--font-display);
  letter-spacing: -0.025em; color: rgb(var(--ch-50));
}
.page-desc { margin-top: 1rem; font-size: 1.125rem; color: rgb(var(--ch-300)); max-width: 42rem; margin-inline: auto; }
@media (min-width: 1024px) { .page-title { font-size: 3rem; } }

/* ---- Features --------------------------------------------------------- */
.features-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 4rem; }
@media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card {
  border-radius: 1rem; border: 1px solid rgb(var(--ch-800)); background: rgb(var(--ch-900) / 0.5);
  padding: 1.5rem; transition: border-color .2s, background-color .2s;
}
.feature-card:hover { border-color: rgb(var(--primary-600) / 0.5); background: rgb(var(--ch-900)); }
.feature-icon {
  display: flex; align-items: center; justify-content: center; height: 2.75rem; width: 2.75rem;
  border-radius: 0.75rem; background: rgb(var(--primary-600) / 0.15); color: rgb(var(--primary-500));
  transition: background-color .2s, color .2s;
}
.feature-card:hover .feature-icon { background: rgb(var(--primary-600)); color: #fff; }
.feature-icon-svg { width: 1.5rem; height: 1.5rem; }
.feature-title { margin-top: 1.25rem; font-weight: 600; font-size: 1.125rem; color: rgb(var(--ch-50)); }
.feature-desc { margin-top: 0.5rem; color: rgb(var(--ch-400)); line-height: 1.625; }

/* ---- How it works ----------------------------------------------------- */
.steps { position: relative; margin-top: 4rem; display: grid; gap: 2rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps-line { display: none; }
@media (min-width: 768px) {
  .steps-line {
    display: block; position: absolute; top: 1.75rem; left: 16%; right: 16%; height: 1px;
    background: linear-gradient(to right, rgb(var(--primary-600) / 0), rgb(var(--ch-700)), rgb(var(--accent-500) / 0));
  }
}
.step { position: relative; text-align: center; }
.step-num {
  margin-inline: auto; display: flex; align-items: center; justify-content: center;
  height: 3.5rem; width: 3.5rem; border-radius: 1rem; border: 1px solid rgb(var(--ch-700));
  background: rgb(var(--ch-900)); font-size: 1.125rem; font-weight: 700;
  font-family: var(--font-display); color: rgb(var(--primary-500));
}
.step-title { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 600; color: rgb(var(--ch-50)); }
.step-desc { margin-top: 0.5rem; color: rgb(var(--ch-400)); line-height: 1.625; max-width: 20rem; margin-inline: auto; }

/* ---- FAQ -------------------------------------------------------------- */
.faq-list {
  margin: 3rem auto 0; max-width: 48rem; border-radius: 1rem;
  border: 1px solid rgb(var(--ch-800)); background: rgb(var(--ch-900) / 0.4);
}
.faq-item { padding-inline: 1.5rem; }
.faq-item + .faq-item { border-top: 1px solid rgb(var(--ch-800)); }
.faq-q {
  display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between;
  padding-block: 1.25rem; text-align: left; font-weight: 600; color: rgb(var(--ch-50));
}
.faq-q::-webkit-details-marker { display: none; }
.faq-plus { height: 1.25rem; width: 1.25rem; flex-shrink: 0; color: rgb(var(--ch-400)); transition: transform .2s; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-a { padding-bottom: 1.25rem; margin-top: -0.25rem; color: rgb(var(--ch-400)); line-height: 1.625; }

/* ---- CTA -------------------------------------------------------------- */
.cta-card {
  position: relative; overflow: hidden; margin-inline: auto; max-width: 64rem;
  border-radius: 1.5rem; border: 1px solid rgb(var(--ch-800));
  background: linear-gradient(to bottom right, rgb(var(--ch-900)), rgb(var(--ch-950)));
}
.cta-glow {
  pointer-events: none; position: absolute; top: -6rem; left: 33%; transform: translateX(-50%);
  height: 18rem; width: 18rem; border-radius: 9999px; background: rgb(var(--primary-600) / 0.25); filter: blur(64px);
}
.cta-grid { position: relative; display: grid; align-items: end; gap: 2rem; }
@media (min-width: 1024px) { .cta-grid { grid-template-columns: repeat(2, 1fr); } }
.cta-text { padding: 3.5rem 2rem 2.5rem; text-align: center; }
@media (min-width: 768px) { .cta-text { padding: 4rem 3.5rem; } }
@media (min-width: 1024px) { .cta-text { text-align: left; } }
.cta-icon {
  height: 4rem; width: 4rem; border-radius: 1rem; margin-inline: auto;
  box-shadow: 0 10px 15px -3px rgb(var(--primary-600) / 0.3), 0 4px 6px -4px rgb(var(--primary-600) / 0.3);
}
.cta-title { margin-top: 1.5rem; font-size: 1.875rem; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.025em; color: rgb(var(--ch-50)); }
.cta-desc { margin-top: 1rem; font-size: 1.125rem; color: rgb(var(--ch-300)); max-width: 28rem; margin-inline: auto; }
.cta-actions { margin-top: 2rem; display: flex; justify-content: center; }
.cta-phone { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.cta-phone img { width: 240px; margin-bottom: -1rem; filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); }
@media (min-width: 640px) { .cta-phone img { width: 280px; } }
@media (min-width: 768px) { .cta-title { font-size: 3rem; line-height: 1; } }
@media (min-width: 1024px) {
  .cta-icon { margin-inline: 0; }
  .cta-title, .cta-desc { margin-left: 0; margin-right: 0; }
  .cta-actions { justify-content: flex-start; }
  .cta-phone img { width: 300px; margin-bottom: -1.5rem; }
}

/* ---- Contact ---------------------------------------------------------- */
.contact-grid { display: grid; gap: 2.5rem; margin: 4rem auto 0; max-width: 56rem; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
.contact-heading { font-weight: 600; font-size: 1.5rem; color: rgb(var(--ch-50)); }
.contact-lead { font-size: 1.125rem; line-height: 1.625; color: rgb(var(--ch-300)); margin-top: 0.75rem; }
.contact-rows { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.contact-row { display: flex; align-items: center; gap: 0.5rem; color: rgb(var(--ch-300)); }
.contact-row a { text-decoration: none; transition: color .2s; }
.contact-row a:hover { color: rgb(var(--ch-50)); }
.contact-icon { width: 1rem; height: 1rem; color: rgb(var(--primary-500)); }

/* contact form (ports contactform.astro) */
.form-group { margin-bottom: 1.25rem; }
.form-group--tight { margin-bottom: 0.75rem; }
.form-input {
  width: 100%; padding: 0.75rem 1rem; background: rgb(var(--ch-900)); color: rgb(var(--ch-50));
  border: 2px solid rgb(var(--ch-700)); border-radius: 0.5rem; outline: none;
  font: inherit; transition: border-color .2s, box-shadow .2s;
}
.form-input::placeholder { color: rgb(var(--ch-500)); }
.form-input:focus { border-color: rgb(var(--primary-600)); box-shadow: 0 0 0 2px rgb(var(--primary-600) / 0.2); }
.form-textarea { height: 9rem; resize: vertical; }
.form-error { display: none; color: #f87171; font-size: 0.875rem; margin-top: 0.25rem; }
.form-result { margin-top: 0.75rem; text-align: center; }
.form-result.text-green { color: #22c55e; }
.form-result.text-red { color: #ef4444; }
.was-validated :placeholder-shown:invalid ~ .empty-feedback { display: block; }
.was-validated :not(:placeholder-shown):invalid ~ .invalid-feedback { display: block; }
.is-invalid, .was-validated :invalid { border-color: #dc3545; }

/* ---- Legal pages (privacy / terms) ----------------------------------- */
.legal { margin: 4rem auto 0; max-width: 48rem; color: rgb(var(--ch-300)); }
.legal-lead { font-size: 1.125rem; line-height: 1.625; }
.legal-section { margin-top: 2.5rem; }
.legal-section h2 { font-weight: 600; font-size: 1.5rem; color: rgb(var(--ch-50)); margin-bottom: 1rem; }
.legal-section p { line-height: 1.625; margin-top: 1rem; }
.legal-section p:first-of-type { margin-top: 0; }
.legal-section ul { margin: 0; padding: 0; list-style: none; }
.legal-section ul li { line-height: 1.625; margin-top: 1rem; }
.legal-section ul li:first-child { margin-top: 0; }
.legal-list { list-style: disc !important; padding-left: 1.5rem !important; }
.legal-list li { margin-top: 0.5rem !important; }
.legal strong { color: rgb(var(--ch-50)); }
.legal-link { color: rgb(var(--primary-500)); text-decoration: none; transition: color .2s; }
.legal-link:hover { color: rgb(var(--ch-50)); }

/* ---- 404 -------------------------------------------------------------- */
.notfound { min-height: calc(100vh - 16rem); display: flex; align-items: center; justify-content: center; }
.notfound-inner { text-align: center; }
.notfound-icon { height: 4rem; width: 4rem; border-radius: 1rem; margin-inline: auto; opacity: 0.9; }
.notfound-title { margin-top: 1.5rem; font-size: 3.75rem; font-weight: 700; font-family: var(--font-display); color: rgb(var(--ch-50)); }
.notfound-desc { font-size: 1.125rem; margin-top: 0.75rem; color: rgb(var(--ch-300)); }
.notfound-action { margin-top: 2rem; display: flex; justify-content: center; }

/* ---- Footer (ports footer.astro) ------------------------------------- */
.footer { margin-top: 6rem; border-top: 1px solid rgb(var(--ch-900)); }
.footer-body { padding-block: 3rem; }
.footer-top { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 768px) { .footer-top { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.footer-navs { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 640px) { .footer-navs { flex-direction: row; gap: 5rem; } }
.footer-nav { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; }
.footer-nav a { color: rgb(var(--ch-400)); text-decoration: none; transition: color .2s; }
.footer-nav a:hover { color: rgb(var(--ch-50)); }
.footer-disclaimer { margin-top: 2.5rem; font-size: 0.75rem; line-height: 1.625; color: rgb(var(--ch-600)); max-width: 48rem; }
.footer-copy { margin-top: 1.5rem; font-size: 0.875rem; color: rgb(var(--ch-500)); }

/* =========================================================================
   Animations
   ========================================================================= */
.reveal-word {
  display: inline-block; opacity: 0; transform: translateY(20px);
  filter: blur(10px);
}

.reveal {
  opacity: 0; transform: translateY(20px);
  filter: blur(8px);
}

.phone {
  opacity: 0;
}

.pill-reveal {
  opacity: 0; transform: translateY(16px);
}

/* Scroll-triggered reveals for [data-reveal] (driven by the observer in footer). */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 0.65, 0.3, 0.95) var(--reveal-delay, 0ms),
      transform 0.6s cubic-bezier(0.22, 0.65, 0.3, 0.95) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-word, .reveal, .phone, .pill-reveal { animation: none; opacity: 1; transform: none; }
}