/*
 * Home Budget Analytics - marketing landing page styles.
 *
 * Hand-written CSS (not Tailwind's generated output) since this page is
 * built as a static file outside the Vite/Tailwind pipeline - see
 * landing/README.md. The color tokens below are copied 1:1 from
 * frontend/src/styles/index.css (`@theme` block) so the landing page and
 * the app it leads into feel like the same product. Keep them in sync by
 * hand if the app's palette ever changes.
 */

:root {
  --brand-50: #effdf9;
  --brand-100: #d7fbef;
  --brand-200: #aef6df;
  --brand-300: #73f1c2;
  --brand-400: #43e6b0;
  --brand-500: #1fd1a0;
  --brand-600: #14b48a;
  --brand-700: #0f8f6e;
  --brand-800: #0c6f57;
  --brand-900: #0a5745;

  --ink-50: #eef1f8;
  --ink-100: #d7deee;
  --ink-200: #a9b8d6;
  --ink-300: #7c92be;
  --ink-500: #2c4885;
  --ink-700: #0f2354;
  --ink-800: #0a1a40;
  --ink-900: #061029;
  --ink-950: #030815;

  --gray-25: #fdfdfd;
  --gray-50: #fafafa;
  --gray-100: #f5f5f6;
  --gray-200: #e9eaeb;
  --gray-300: #d5d7da;
  --gray-400: #a4a7ae;
  --gray-500: #717680;
  --gray-600: #535862;
  --gray-700: #414651;
  --gray-800: #252b37;
  --gray-900: #181d27;

  --shadow-sm: 0 1px 3px 0 rgb(10 13 18 / 0.1), 0 1px 2px -1px rgb(10 13 18 / 0.1);
  --shadow-md: 0 4px 8px -2px rgb(10 13 18 / 0.1), 0 2px 4px -2px rgb(10 13 18 / 0.06);
  --shadow-lg: 0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03);
  --shadow-xl: 0 20px 24px -4px rgb(10 13 18 / 0.1), 0 8px 8px -4px rgb(10 13 18 / 0.04);

  --container: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--gray-900);
  background: var(--gray-25);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  line-height: 1.5;
}

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

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

/* Plain browser default for a <button> is an arrow cursor, not a pointer -
   every button on this page (nav-toggle, language switcher, FAQ questions,
   install-banner dismiss, mobile-nav close) is otherwise unstyled for
   cursor, so set it once here instead of on each one individually. */
button {
  font: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}

.icon {
  width: 1em;
  height: 1em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Skip link - keyboard users shouldn't have to tab through the whole header. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--ink-900);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
  transition: top 0.15s ease;
  font-weight: 600;
  font-size: 14px;
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(253 253 253 / 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 16px;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-900);
  flex-shrink: 0;
}
.brand-mark img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.main-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gray-700);
  padding: 8px 0;
}
.main-nav a:hover {
  color: var(--ink-900);
}

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

.lang-switcher {
  position: relative;
}
.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
}
.lang-switcher-btn:hover {
  border-color: var(--gray-400);
  color: var(--ink-900);
}
.lang-switcher-btn .icon {
  width: 15px;
  height: 15px;
}
.lang-switcher-btn .chev {
  width: 13px;
  height: 13px;
  transition: transform 0.15s ease;
}
.lang-switcher[data-open="true"] .chev {
  transform: rotate(180deg);
}
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 168px;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.lang-switcher[data-open="true"] .lang-menu {
  display: block;
}
.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--gray-700);
}
.lang-menu a:hover {
  background: var(--gray-50);
}
.lang-menu a[aria-current="true"] {
  color: var(--brand-700);
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--brand-700);
}
.btn-secondary {
  background: #fff;
  color: var(--gray-700);
  border-color: var(--gray-300);
}
.btn-secondary:hover {
  border-color: var(--gray-400);
  color: var(--ink-900);
}
.btn-ghost {
  background: none;
  color: var(--gray-700);
  padding: 10px 8px;
}
.btn-ghost:hover {
  color: var(--ink-900);
}
.btn-lg {
  padding: 13px 24px;
  font-size: 15.5px;
}
.btn .icon {
  width: 17px;
  height: 17px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle .icon {
  width: 20px;
  height: 20px;
  color: var(--gray-700);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 96px;
  background:
    radial-gradient(ellipse 900px 480px at 85% -10%, var(--brand-100), transparent 60%),
    radial-gradient(ellipse 700px 420px at 5% 0%, var(--ink-50), transparent 55%);
}

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero-visual {
  position: relative;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-800);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink-900);
  margin: 0 0 20px;
}

.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--gray-600);
  max-width: 52ch;
  margin: 0 0 30px;
}

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

.trial-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--gray-500);
}

/* Stylized illustrative product preview - hand-built with plain HTML/CSS,
   not a real screenshot: purely decorative, generic placeholder figures. */
.mockup {
  position: relative;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transform: rotate(0.6deg);
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
}
.mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gray-200);
}
.mockup-body {
  display: grid;
  grid-template-columns: 64px 1fr;
}
.mockup-side {
  background: var(--ink-900);
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.mockup-side-dot {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.14);
}
.mockup-side-dot.active {
  background: var(--brand-400);
}
.mockup-main {
  padding: 20px;
}
.mockup-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.mockup-stat {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 10px 12px;
}
.mockup-stat-label {
  font-size: 10.5px;
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mockup-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  margin-top: 3px;
}
.mockup-stat-value.brand {
  color: var(--brand-700);
}
.mockup-chart {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 84px;
  padding: 12px 4px 0;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--gray-100);
}
.mockup-chart span {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--brand-300), var(--brand-500));
}
.mockup-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mockup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.mockup-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mockup-row-label {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--gray-100);
}
.mockup-row-amount {
  font-weight: 600;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}
.mockup-caption {
  position: absolute;
  bottom: -14px;
  right: 18px;
  background: var(--ink-900);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
}

/* ---------- Trust bar ---------- */
.trust-bar {
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  background: #fff;
}
.trust-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 22px 20px;
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--gray-700);
  font-weight: 500;
}
.trust-item .icon {
  width: 17px;
  height: 17px;
  color: var(--brand-600);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---------- Sections (generic) ---------- */
section {
  padding: 88px 0;
}
.section-head {
  max-width: 640px;
  margin: 0 auto 52px;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.section-head p {
  font-size: 16px;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.6;
}

/* ---------- What is it ---------- */
.about {
  background: var(--gray-50);
  padding: 72px 0;
  overflow: hidden;
}
.about .container {
  max-width: 1080px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.about h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 14px;
}
.about p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0;
  max-width: 46ch;
}
.about-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 28px 24px 24px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ink-900);
  color: var(--brand-300);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 16px;
}
.step h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.step p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gray-600);
  margin: 0;
}

/* ---------- Features ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature-card {
  padding: 24px 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-700);
  margin-bottom: 16px;
}
.feature-icon .icon {
  width: 20px;
  height: 20px;
}
.feature-card h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.feature-card p {
  font-size: 13.8px;
  line-height: 1.6;
  color: var(--gray-600);
  margin: 0;
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--gray-50);
}
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: none;
  border: none;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
}
.faq-question .icon {
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.faq-item[data-open="true"] .faq-question .icon {
  transform: rotate(180deg);
}
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.faq-item[data-open="true"] .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer-inner {
  overflow: hidden;
}
.faq-answer p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gray-600);
}

/* ---------- Final CTA ---------- */
.cta-band {
  background: radial-gradient(ellipse 900px 500px at 50% -20%, var(--ink-700), var(--ink-950));
  color: #fff;
  text-align: center;
  padding: 76px 0;
}
.cta-band h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.cta-band p {
  font-size: 16px;
  color: var(--ink-200);
  margin: 0 0 30px;
}
.cta-band .btn-primary {
  background: var(--brand-500);
  color: var(--ink-950);
}
.cta-band .btn-primary:hover {
  background: var(--brand-400);
}

/* ---------- Footer ---------- */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--gray-200);
  padding: 56px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding-bottom: 36px;
}
.footer-brand .brand-mark {
  margin-bottom: 12px;
}
.footer-brand p {
  font-size: 13.5px;
  color: var(--gray-500);
  max-width: 32ch;
  line-height: 1.6;
  margin: 0;
}
.footer-col h4 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
  margin: 0 0 14px;
}
.footer-col a,
.footer-col button {
  display: block;
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 10px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.footer-col a:hover,
.footer-col button:hover {
  color: var(--ink-900);
}
.footer-lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.footer-lang-grid a[aria-current="true"] {
  color: var(--brand-700);
  font-weight: 600;
}
.footer-bottom {
  border-top: 1px solid var(--gray-100);
  padding-top: 24px;
  font-size: 12.5px;
  color: var(--gray-400);
}
.footer-bottom a {
  color: var(--gray-400);
  text-decoration: underline;
}
.footer-bottom a:hover {
  color: var(--ink-900);
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .main-nav {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  /* Both CTAs are already reachable inside the mobile-nav drawer (opened
     by .nav-toggle just below) - keeping either one inline in the header
     row here, alongside the logo and language switcher, overflows a phone
     viewport horizontally instead of wrapping (flex children don't wrap by
     default), clipping the button and sometimes the toggle button itself
     off-screen. Hide both so the header row only ever holds what fits:
     logo, language switcher, hamburger. */
  .header-actions .btn-secondary,
  .header-actions .btn-primary {
    display: none;
  }
  .hero .container {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-visual {
    order: -1;
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
  }
  .about p {
    max-width: none;
  }
  .trust-bar .container {
    grid-template-columns: 1fr 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .features-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  /* Simplified phone header, left to right: icon+text logo, icon-only
     language switcher, a single green "Login" button - no hamburger, no
     Sign Up. The hamburger drawer (Features/How it works/FAQ links, plus
     Sign Up) isn't reachable from the header at this width any more; those
     sections are still reachable by scrolling the single-page layout, and
     Sign Up has two other prominent CTAs already on the page (the hero and
     the final CTA band), so nothing is actually lost, just decluttered.
     Scoped to the sticky header specifically - the mobile-nav drawer's own
     copies of the logo/language switcher (still used at tablet widths,
     561-900px) keep their full text, and the drawer itself is untouched
     above this breakpoint. */
  .site-header .container {
    padding: 0 16px;
    gap: 12px;
  }
  .site-header .nav-toggle {
    display: none;
  }
  .site-header .header-actions {
    gap: 10px;
  }
  .site-header .header-actions .btn-primary {
    display: none;
  }
  /* Login and the language switcher are given the same explicit height
     instead of relying on matching padding/font-size to happen to line up -
     the two buttons have different content (text vs. a single icon) and
     different padding needs, so equal padding doesn't actually produce
     equal height once border-box is factored in. An explicit height plus
     flex centering (both buttons are already display:flex,
     align-items:center) guarantees they match pixel-for-pixel regardless. */
  .site-header .header-actions .btn-secondary,
  .site-header .header-actions .lang-switcher-btn {
    height: 34px;
  }
  /* This is the "Login" link, normally styled as the secondary/bordered
     button (see .btn-secondary) - restyled to the primary/green look here
     only, since it's the one action worth making prominent in this
     trimmed-down header. */
  .site-header .header-actions .btn-secondary {
    display: inline-flex;
    flex-shrink: 0;
    padding: 0 12px;
    font-size: 13.5px;
    background: var(--brand-600);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-sm);
  }
  .site-header .header-actions .btn-secondary:hover {
    background: var(--brand-700);
  }
  .site-header .header-actions .lang-switcher-btn span {
    display: none;
  }
  /* The chevron next to the globe icon is a "this opens a menu" affordance
     that only earns its keep alongside the "English"-style text label it
     used to sit next to (see the desktop .lang-switcher-btn rules) - on its
     own, next to a single bare icon, it reads as clutter rather than a
     hint, and the user asked for the language switcher to be "just the
     icon" here. Dropping it also buys back real width for the brand text
     next to it, which is the tighter constraint at this breakpoint. */
  .site-header .header-actions .lang-switcher-btn .chev {
    display: none;
  }
  .site-header .header-actions .lang-switcher-btn {
    flex-shrink: 0;
    padding: 0 8px;
  }
  /* The brand text is the one element with no natural minimum width, so
     it's the one that gives way first: on a wide-enough phone it shows in
     full ("Home Budget Analytics"), and only on the narrowest devices does
     it truncate with an ellipsis, rather than the row overflowing
     horizontally the way the pre-redesign header did. flex-shrink:0 is set
     unconditionally on .brand-mark at the top of this file (line ~152) for
     the desktop/tablet layout, where there's always room for it next to
     the full nav - this is the one breakpoint where that has to give. */
  .site-header .brand-mark {
    min-width: 0;
    flex-shrink: 1;
    gap: 8px;
  }
  .site-header .brand-mark img {
    width: 28px;
    height: 28px;
  }
  .site-header .brand-mark span {
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero {
    padding: 48px 0 64px;
  }
  section {
    padding: 60px 0;
  }
  .trust-bar .container {
    grid-template-columns: 1fr;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-ctas .btn {
    width: 100%;
  }
}

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #fff;
  padding: 20px;
}
.mobile-nav[data-open="true"] {
  display: flex;
  flex-direction: column;
}
.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
/* The head row (logo + close button) is short and fixed height, but the
   nav links/language switcher/CTAs below it are also short - on a full
   phone-height overlay that leaves a large, empty-looking gap at the
   bottom if it's just stacked top-down (the drawer used to do exactly
   that). Centering this block in the remaining space instead makes the
   menu read as a deliberately laid-out screen rather than a mostly-empty
   one; on very short viewports where the content doesn't fit, it still
   scrolls normally rather than clipping. */
.mobile-nav-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}
.mobile-nav a {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
}
.mobile-nav-ctas {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-nav-ctas .btn {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

/* ---------- Install prompt banner (Add to Home Screen) ---------- */
/* Hidden by default - landing.js turns it on via [data-open="true"] and
   picks the Android ([data-variant="android"]) or iOS ([data-variant="ios"])
   variant once it knows which one actually applies. See render.mjs's
   renderInstallBanner() for the markup this styles. */
.install-banner {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px 40px 16px 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
}
.install-banner[data-open="true"] {
  display: flex;
  align-items: flex-start;
}
.install-banner-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--gray-400);
}
.install-banner-dismiss:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}
.install-banner-dismiss .icon {
  width: 16px;
  height: 16px;
}
.install-banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-700);
}
.install-banner-icon .icon {
  width: 20px;
  height: 20px;
}
.install-banner-body {
  min-width: 0;
  flex: 1;
}
.install-banner-title {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-900);
}
.install-banner-subtitle {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray-600);
}
.install-banner-ios-steps {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-700);
}
.install-banner-ios-steps .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.install-banner-cta {
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 13.5px;
}
.install-banner-cta .icon {
  width: 15px;
  height: 15px;
}
/* Android/Chrome variant: real "Install" button, no static instructions. */
/* iOS Safari variant: static Share-sheet instructions, no button - there is
   no programmatic install API on that platform. */
.install-banner[data-variant="ios"] .install-banner-cta {
  display: none;
}
.install-banner[data-variant="ios"] .install-banner-ios-steps {
  display: flex;
}

/* ---------- Cookie consent banner (render.mjs: renderCookieBanner) ----
   A full-width edge-to-edge bar (not a floating card like .install-banner
   above) so the two are visually distinct and never look like the same
   dismissible notice. Deliberately higher z-index than .install-banner
   (80 vs 60): landing.js holds the install banner back until this one has
   been answered, so in practice they never actually show at the same
   time, but this ordering still keeps the cookie banner on top were that
   ever not the case. */
.cookie-banner {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  padding: 16px 20px;
  background: #fff;
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.cookie-banner[data-open="true"] {
  display: block;
}
.cookie-banner-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-banner-body {
  min-width: 240px;
  flex: 1;
}
.cookie-banner-title {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-900);
}
.cookie-banner-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray-600);
}
.cookie-banner-link {
  color: var(--brand-700);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.cookie-banner-actions {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}
.cookie-banner-actions .btn {
  padding: 9px 16px;
  font-size: 13.5px;
}
@media (max-width: 560px) {
  .cookie-banner-actions {
    width: 100%;
  }
  .cookie-banner-actions .btn {
    flex: 1;
  }
}

/* ---------- Legal pages (render.mjs: renderPrivacyPage) ---------- */
.legal-page {
  padding: 64px 0 88px;
}
.legal-page-inner {
  max-width: 760px;
}
.legal-page-inner h1 {
  font-size: clamp(28px, 3.6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.legal-updated {
  font-size: 13.5px;
  color: var(--gray-500);
  margin: 0 0 28px;
}
.legal-intro {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0 0 8px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--gray-200);
}
.legal-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--gray-100);
}
.legal-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.legal-section h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.legal-section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0 0 12px;
}
.legal-section p:last-child {
  margin-bottom: 0;
}
.legal-section ul {
  margin: 0 0 12px;
  padding: 0 0 0 20px;
}
.legal-section li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-700);
  margin-bottom: 8px;
}
.legal-section li:last-child {
  margin-bottom: 0;
}

/* ---------- Static 404 page (render.mjs: renderNotFoundPage) ---------- */
.error-page {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 900px 480px at 85% -10%, var(--brand-100), transparent 60%),
    radial-gradient(ellipse 700px 420px at 5% 0%, var(--ink-50), transparent 55%);
}
.error-page-inner {
  max-width: 480px;
  text-align: center;
  padding: 64px 20px;
}
.error-code {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-700);
  margin: 0 0 12px;
}
.error-page h1 {
  font-size: clamp(26px, 3.6vw, 34px);
  line-height: 1.2;
  font-weight: 800;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.error-page p:not(.error-code) {
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-600);
  margin: 0 0 28px;
}
.error-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}