:root {
  --primary: #00985e;
  /* Same hue family as --primary, blue channel trimmed to cut the teal/cyan
     cast that read as "swampy" — brightness (green channel) kept level with
     the previous value so the button face doesn't look washed out. */
  --primary-bright: #00ce64;
  --primary-deep: #007a3c;
  /* Darker ridge shade for the pressable CTA mechanic now that the resting
     fill itself uses --primary-deep (WCAG AA contrast fix — white text on
     --primary-bright measured ~2.1:1, below the 4.5:1 minimum). Same hue as
     --primary-deep, just darker, so the shadow ridge still reads under the
     new fill. */
  --primary-deeper: #004924;
  /* Secondary accent button: reuses the same 3D-pill mechanics as
     .btn-primary (solid face + darker shadow ridge) for a cool-toned CTA. */
  --accent-blue: #3b82f6;
  --accent-blue-deep: #1d4ed8;
  /* Hero premium-card accent — deliberately a different hue from
     --primary-bright (#00ce64) so the "premium" card visually stands apart
     from the flat green CTA buttons. */
  --accent-emerald: #0ea472;
  --accent-emerald-deep: #06664f;
  --bg: #ffffff;
  /* Subtle warm, faintly green-tinted off-white — flat #f5f5f5 read as a
     generic gray box; this stays close to --primary's hue without competing
     with it. Used as the end-stop of .section-muted's gradient. */
  --bg-muted: #f5f8f6;
  --text-title: #1a1a1a;
  --text-body: #333333;
  --text-secondary: #666666;
  --text-on-primary: #fff;
  --border: #e8e8e8;
  --radius-card: 16px;
  --radius-button: 16px;
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.08);
  --hover-surface: #f6fefb;
  --hover-border: #8ddfc0;
  --hover-shadow: 0 14px 26px rgba(0, 152, 94, 0.14);
  --hover-lift: -2px;
  --hover-duration: 220ms;
  --hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-body: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Display/Headline-only accent face — deliberately distinct from Inter's
     neutral grotesque. Falls back to --font-body's stack if it fails to
     load, so a missed font request never breaks the type hierarchy. */
  --font-display: "Space Grotesk", Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Parenting blog preview. These selectors are isolated until the complete
   locale cluster is ready for public generation. */
.site-blog {
  background: #f7faf8;
}

.site-blog .site-header {
  background: rgba(247, 250, 248, 0.94);
}

.blog-main {
  padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 7rem);
}

.blog-layout {
  max-width: 960px;
}

.blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.blog-breadcrumb a,
.blog-prose a:not(.site-btn),
.blog-card a,
.blog-featured a:not(.site-btn),
.blog-related a {
  color: var(--primary-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.blog-article {
  /* Full layout width so age bands can sit in an even grid; reading
     blocks below keep a comfortable measure via max-width. */
  max-width: none;
  width: 100%;
}

.blog-article-header,
.blog-toc,
.blog-prose > section:not(:has(> .blog-age-grid)):not(.blog-boundary):not(.blog-further-reading),
.blog-prose > .blog-boundary,
.blog-prose > .blog-further-reading,
.blog-prose > .blog-related {
  max-width: 75ch;
}

.blog-article-header {
  margin-bottom: 2rem;
}

.blog-category {
  width: fit-content;
  margin: 0 0 1rem;
  color: var(--primary-deep);
  font-weight: 700;
}

.blog-article h1,
.blog-hub h1 {
  max-width: min(18ch, 100%);
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 3.8vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.blog-dek,
.blog-hub-header > p {
  max-width: 65ch;
  margin: 1.25rem 0 0;
  color: #4b554f;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.blog-byline {
  margin: 1.75rem 0 0.35rem;
  color: var(--text-title);
  font-weight: 700;
}

.blog-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.blog-toc {
  margin: 2rem 0 3rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #d8e4dc;
  border-radius: var(--radius-card);
  background: #fff;
}

.blog-toc h2 {
  font-size: 1rem;
}

.blog-toc ol {
  columns: 2;
  gap: 2rem;
  margin: 0.8rem 0 0;
  padding-left: 1.25rem;
}

.blog-toc li {
  break-inside: avoid;
  margin: 0.45rem 0;
}

.blog-toc a {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.65rem;
  color: var(--text-body);
}

.blog-prose {
  font-size: 1.06rem;
  line-height: 1.75;
}

.blog-prose > section {
  scroll-margin-top: 6rem;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}

.blog-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.blog-prose h3 {
  font-size: 1.15rem;
}

.blog-prose p,
.blog-prose li {
  text-wrap: pretty;
}

.blog-prose p {
  margin: 1rem 0;
}

.blog-prose ul {
  margin: 1.25rem 0;
  padding-left: 1.3rem;
}

.blog-prose li {
  margin: 0.85rem 0;
  padding-left: 0.35rem;
}

.blog-prose > section:has(> .blog-age-grid) {
  max-width: none;
  width: 100%;
}

.blog-age-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
  align-items: stretch;
}

.blog-age-band {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 1.25rem 1.35rem;
  border: 1px solid #d8e4dc;
  border-radius: var(--radius-card);
  background: #fff;
}

.blog-age-band h3 {
  margin: 0 0 0.35rem;
  color: var(--primary-deep);
  font-size: 1.2rem;
  line-height: 1.2;
}

.blog-age-band p {
  margin: 0.65rem 0 0;
  font-size: 0.96rem;
  line-height: 1.6;
}

.blog-age-band p:first-of-type {
  margin-top: 0.85rem;
}

/* Side-by-side only when each card has enough readable width. */
@media (min-width: 900px) {
  .blog-age-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.blog-boundary {
  padding: clamp(1.4rem, 4vw, 2.1rem);
  border: 1px solid #cbdad1;
  border-radius: var(--radius-card);
  background: #eef5f1;
}

.blog-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: clamp(3.5rem, 8vw, 6rem) 0;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border-radius: 24px;
  background: #dff3e8;
}

.blog-cta > div {
  flex: 1 1 auto;
  min-width: min(100%, 18rem);
}

.blog-cta h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.blog-cta p {
  max-width: 50ch;
  margin-bottom: 0;
}

.blog-cta .site-btn {
  flex: 0 0 auto;
  color: var(--text-on-primary);
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .blog-cta {
    flex-direction: column;
    align-items: stretch;
  }
}

.blog-further-reading ul {
  padding-left: 1.2rem;
}

.blog-further-reading a {
  overflow-wrap: anywhere;
}

.blog-related {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #d8e4dc;
}

.blog-related h2 {
  font-size: 1.35rem;
}

.blog-related a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.blog-hub .container {
  max-width: 1120px;
}

.blog-hub-header {
  max-width: 860px;
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
}

.blog-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  padding: clamp(1.8rem, 5vw, 3.5rem);
  border-radius: 24px;
  background: #dff3e8;
}

.blog-featured > div > p:first-child,
.blog-card > p:first-child {
  margin: 0 0 0.75rem;
  color: var(--primary-deep);
  font-size: 0.9rem;
  font-weight: 700;
}

.blog-featured h2 {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.blog-featured h2 a,
.blog-card h3 a {
  color: var(--text-title);
  text-decoration: none;
}

.blog-featured h2 a:hover,
.blog-card h3 a:hover {
  color: var(--primary-deep);
}

.blog-featured .site-btn {
  color: var(--text-on-primary);
}

.blog-groups {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: clamp(4rem, 9vw, 7rem);
}

/* Hub: digital habits (left) + cooperation (right); life skills full-width row. */
.blog-group:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.blog-group:nth-child(2) {
  grid-column: 1 / -1;
  grid-row: 2;
}

.blog-group:nth-child(3) {
  grid-column: 2;
  grid-row: 1;
}

.blog-group h2 {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.blog-group-list {
  display: grid;
  gap: 1rem;
}

.blog-group[aria-labelledby="group-life-skills"] .blog-group-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
}

.blog-card {
  padding: 1.4rem 0;
  border-top: 1px solid #cfdcd4;
}

.blog-card h3 {
  max-width: 30ch;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  line-height: 1.25;
  text-wrap: balance;
}

.blog-card > p:last-child {
  max-width: 56ch;
  margin-bottom: 0;
  color: #4b554f;
  line-height: 1.65;
}

.blog-editorial-policy {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 1.5rem 2.5rem;
  margin-top: clamp(5rem, 11vw, 9rem);
  padding-top: 2rem;
  border-top: 1px solid #cfdcd4;
}

.blog-editorial-policy > h2 {
  grid-row: span 2;
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  line-height: 1.12;
}

.blog-editorial-policy h3 {
  font-size: 1rem;
}

.blog-editorial-policy p {
  color: #4b554f;
  line-height: 1.65;
}

@media (max-width: 800px) {
  .blog-toc ol {
    columns: 1;
  }

  .blog-groups,
  .blog-editorial-policy {
    grid-template-columns: 1fr;
  }

  .blog-group:nth-child(1),
  .blog-group:nth-child(2),
  .blog-group:nth-child(3),
  .blog-editorial-policy > h2 {
    grid-column: auto;
    grid-row: auto;
  }

  .blog-group[aria-labelledby="group-life-skills"] .blog-group-list {
    grid-template-columns: 1fr;
  }

  .blog-featured,
  .blog-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .blog-main {
    padding-top: 1.5rem;
  }

  .blog-article h1,
  .blog-hub h1 {
    max-width: min(18ch, 100%);
    font-size: clamp(2rem, 9vw, 2.85rem);
  }

  .blog-prose {
    font-size: 1rem;
  }

  .blog-age-band,
  .blog-boundary,
  .blog-toc {
    padding: 1rem;
  }
}

@media print {
  .site-blog .site-header,
  .site-blog .site-footer,
  .site-blog .site-cookie,
  .blog-toc,
  .blog-cta {
    display: none !important;
  }

  .site-blog,
  .blog-main,
  .blog-age-band,
  .blog-boundary {
    background: #fff !important;
  }

  .blog-main {
    padding: 0;
  }

  .blog-article {
    max-width: none;
  }

  .blog-age-grid {
    display: block;
  }

  .blog-age-band,
  .blog-boundary {
    break-inside: avoid;
    border-color: #888;
  }

  .blog-prose a {
    color: #000;
    text-decoration: underline;
  }
}

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

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--bg);
}

body.modal-open {
  overflow: hidden;
}

.container {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

.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;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.quiz-top-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.quiz-top-actions .btn-store {
  min-height: 36px;
  padding: 0.28rem 0.65rem;
  font-size: 0.75rem;
}

.quiz-header-social {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  color: var(--text-body);
  font-weight: 700;
  text-decoration: none;
}

.quiz-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.quiz-footer a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  color: var(--text-body);
  font-weight: 700;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-title);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.language-switcher select {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-title);
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
}

.hero {
  padding: 4rem 0 3rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.5rem;
  align-items: stretch;
}

.chip {
  display: inline-flex;
  margin: 0 0 1rem;
  background: #e8fbf2;
  color: var(--primary-deep);
  border: 1px solid #c4f3df;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--text-title);
}

/* Display/Headline tier only — the hero H1 and every section title share
   the second typeface; card/footer titles and everything smaller stay on
   Inter (--font-body) by inheritance. */
h1,
.section h2 {
  font-family: var(--font-display);
}

h1 {
  font-size: clamp(1.85rem, 3.5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

h3 {
  font-size: 1.125rem;
}

.hero-subtitle {
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 58ch;
}

.cta-group {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-button);
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.33, 1, 0.68, 1), box-shadow 150ms cubic-bezier(0.33, 1, 0.68, 1);
}

.btn:focus-visible,
.link-button:focus-visible,
.footer-link:focus-visible,
.modal-close:focus-visible,
.language-switcher select:focus-visible {
  outline: 3px solid rgba(0, 152, 94, 0.28);
  outline-offset: 2px;
}

.btn-blue:focus-visible {
  outline-color: rgba(59, 130, 246, 0.35);
}

/* 3D-pill pressable mechanic (shadow ridge collapses as the button travels
   down on :active, via the shared .btn transform). WCAG AA: white text on
   --primary-deep clears 4.5:1 with a wide margin. */
.btn-primary {
  background: var(--primary-deep);
  color: #fff;
  box-shadow: 0 4px 0 var(--primary-deeper);
}

.btn-secondary {
  border-color: var(--border);
  color: var(--text-title);
  background: #fff;
  box-shadow: 0 4px 0 var(--border);
}

/* Reusable cool-toned accent CTA — same pressable pill mechanics as
   .btn-primary, for actions that want a secondary "brand" emphasis without
   competing with the primary green (e.g. a change-answer/secondary nav
   action). Not wired to a specific spot by default; apply where it fits. */
.btn-blue {
  background: var(--accent-blue);
  color: #fff;
  box-shadow: 0 4px 0 var(--accent-blue-deep);
}

.btn-disabled {
  opacity: 0.56;
  cursor: not-allowed;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
  }

  .btn-primary:hover {
    box-shadow: 0 5px 0 var(--primary-deeper);
  }

  .btn-secondary:hover {
    box-shadow: 0 5px 0 var(--border);
  }

  .btn-blue:hover {
    box-shadow: 0 5px 0 var(--accent-blue-deep);
  }
}

.btn:active {
  transform: translateY(3px);
}

.btn-primary:active {
  box-shadow: 0 1px 0 var(--primary-deeper);
}

.btn-secondary:active {
  box-shadow: 0 1px 0 var(--border);
}

.btn-blue:active {
  box-shadow: 0 1px 0 var(--accent-blue-deep);
}

.micro-note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ── Topbar right cluster ────────────────────────────────────────────────── */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.quiz-nav-cta {
  display: none; /* shows on ≥640px */
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-deep);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  transition: background 180ms ease, color 180ms ease;
}

.quiz-nav-cta:hover {
  background: #e8fbf2;
  color: var(--primary);
}

@media (min-width: 640px) {
  .quiz-nav-cta {
    display: inline-flex;
    align-items: center;
  }
}

/* ── Primary quiz CTA button (hero) ─────────────────────────────────────── */
.btn-quiz-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-button);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  letter-spacing: -0.01em;
  background: var(--primary-deep);
  color: #fff;
  box-shadow: 0 4px 0 var(--primary-deeper);
  width: 100%;
  max-width: 440px;
}

@media (hover: hover) and (pointer: fine) {
  .btn-quiz-hero:hover {
    box-shadow: 0 5px 0 var(--primary-deeper);
  }
}

.btn-quiz-hero:active {
  box-shadow: 0 1px 0 var(--primary-deeper);
}

.quiz-hero-note {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ── App store button group (secondary, below quiz CTA) ─────────────────── */
.cta-group-stores {
  margin-top: 1rem;
}

.btn-store {
  border-color: var(--border);
  color: var(--text-title);
  background: #fff;
  font-size: 0.875rem;
  min-height: 44px;
  padding: 0.65rem 1rem;
  box-shadow: 0 3px 0 var(--border);
}

/* Store badge glyphs (Google Play / App Store), reused on both the hero
   buttons and the footer app links — currentColor so they follow whichever
   text color the parent link/button already uses. */
.btn-store-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
}

.footer-link .btn-store-icon {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .btn-store:hover {
    box-shadow: 0 4px 0 var(--border);
  }

  .btn-store-compact:hover {
    box-shadow: 0 3px 0 var(--border);
  }
}

.btn-store:active {
  box-shadow: 0 1px 0 var(--border);
}

/* ── Lead-magnet promo section ───────────────────────────────────────────── */
.section-quiz-promo {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(0, 152, 94, 0.08), transparent 70%),
    var(--bg);
}

.quiz-promo-inner {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

.quiz-promo-badge {
  display: inline-flex;
  margin-bottom: 0.85rem;
  background: #e8fbf2;
  color: var(--primary-deep);
  border: 1px solid #c4f3df;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.quiz-promo-title {
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--text-title);
  margin: 0 0 0.75rem;
}

.quiz-promo-text {
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.quiz-promo-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 1.1rem;
  margin-bottom: 1.4rem;
}

.quiz-promo-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-body);
}

.quiz-promo-cta {
  font-size: 1rem;
  min-height: 50px;
  min-width: 200px;
}

.quiz-promo-proof {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.hero-card {
  border-radius: 24px;
  border: 1px solid #a9e0c7;
  background:
    radial-gradient(110% 80% at 86% 12%, rgba(14, 164, 114, 0.32), transparent 65%),
    linear-gradient(155deg, #d7f2e7, #f7fdfa);
  padding: 1.4rem;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--hover-duration) var(--hover-ease),
    border-color var(--hover-duration) var(--hover-ease),
    box-shadow var(--hover-duration) var(--hover-ease),
    transform var(--hover-duration) var(--hover-ease);
}

.hero-card-visual {
  margin-bottom: 0.9rem;
  border-radius: 16px;
  border: 1px solid #a9ddc7;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.85), rgba(186, 232, 210, 0.85));
  padding: 0.75rem;
}

.hero-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.38rem 0.68rem;
  background: #fff;
  border: 1px solid #a9ddc7;
  color: var(--text-title);
  font-size: 0.82rem;
  font-weight: 700;
}

.hero-brand-logo {
  border-radius: 7px;
  display: block;
}

.hero-premium-badges {
  margin-top: 0.58rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.hero-premium-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.24rem 0.56rem;
  background: rgba(224, 247, 238, 0.85);
  border: 1px solid #8fd4b8;
  color: var(--accent-emerald-deep);
  font-size: 0.76rem;
  font-weight: 700;
}

.hero-card h2 {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}

.hero-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.hero-card li {
  border: 1px solid #b3e3cd;
  border-radius: 12px;
  background: #fff;
  padding: 0.7rem 0.8rem;
  font-size: 0.95rem;
}

.hero-card-trust {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary);
  font-size: 0.83rem;
}

.hero-card-trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--accent-emerald), var(--accent-emerald-deep));
  box-shadow: 0 0 0 4px rgba(14, 164, 114, 0.22);
}

.section {
  padding: 3.2rem 0;
}

.section h2 {
  margin-bottom: 1.25rem;
}

.section-muted {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-muted) 100%);
}

.cards,
.steps,
.pricing-grid,
.screens-grid {
  display: grid;
  gap: 1rem;
}

/* ── Feature showcase: big screenshot paired with feature copy ──────────── */
.feature-showcase {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
}

.feature-showcase-reverse {
  grid-template-columns: 0.85fr 1.15fr;
}

/* Neutral brand-toned frame around the device screenshot — the screenshot
   itself still carries its own accent color (baked into the marketing
   asset), so this soft card keeps that color from sitting directly against
   the page background and unifies the frame across every showcase section. */
.feature-showcase-visual {
  margin: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--bg-muted);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
}

.feature-showcase-visual img {
  width: 100%;
  max-width: 280px;
  border-radius: 20px;
  /* Matches the cropped landing screenshot source (576x830) — the
     marketing asset's caption/banner is cropped off before it reaches this
     page, see landing/screenshots/crop_inline.py. */
  aspect-ratio: 576 / 830;
  object-fit: cover;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

@media (max-width: 980px) {
  .feature-showcase,
  .feature-showcase-reverse {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .feature-showcase-reverse {
    grid-template-areas: none;
  }

  /* In markup the reverse pairing is [image, text] (for the desktop
     image-left layout). Stacked on narrow screens that would put this
     section's image directly after the previous section's image with no
     text between them — force text first so every pairing reads as
     text-then-image, matching the other showcase sections. */
  .feature-showcase-reverse .feature-showcase-text {
    order: -1;
  }

  .feature-showcase-visual {
    padding: 0.75rem;
  }

  .feature-showcase-visual img {
    max-width: 190px;
  }
}

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

.card {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: #fff;
  padding: 1.1rem;
  transition:
    background-color var(--hover-duration) var(--hover-ease),
    border-color var(--hover-duration) var(--hover-ease),
    box-shadow var(--hover-duration) var(--hover-ease),
    transform var(--hover-duration) var(--hover-ease);
}

.card p {
  margin: 0.5rem 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

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

.step {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: #fff;
  padding: 1.1rem;
  transition:
    background-color var(--hover-duration) var(--hover-ease),
    border-color var(--hover-duration) var(--hover-ease),
    box-shadow var(--hover-duration) var(--hover-ease),
    transform var(--hover-duration) var(--hover-ease);
}

.step p {
  margin: 0.5rem 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

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

.price-card {
  position: relative;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: #fff;
  padding: 1.1rem;
  transition:
    background-color var(--hover-duration) var(--hover-ease),
    border-color var(--hover-duration) var(--hover-ease),
    box-shadow var(--hover-duration) var(--hover-ease),
    transform var(--hover-duration) var(--hover-ease);
}

.price-card-highlight {
  border-color: #c7f1df;
  box-shadow: var(--shadow-soft);
}

.price-badge {
  display: inline-flex;
  margin-bottom: 0.5rem;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  background: #e8fbf2;
  color: var(--primary-deep);
  font-size: 0.75rem;
  font-weight: 700;
}

.price {
  margin: 0.4rem 0 0;
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  color: var(--text-title);
}

.price-note,
.pricing-footnote,
.screens-subtitle {
  margin: 0.55rem 0 0;
  color: var(--text-secondary);
}

.screens-section {
  position: relative;
  overflow: hidden;
}

.screens-showcase {
  position: relative;
  margin-top: 0.75rem;
  padding: 0.25rem 3.5rem 2.1rem;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 7%,
    black 93%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 7%,
    black 93%,
    transparent 100%
  );
}

.screens-carousel {
  overflow: hidden;
  outline: none;
  touch-action: pan-y pinch-zoom;
}

.screens-track {
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.phone-slide {
  margin: 0;
  flex: 0 0 clamp(220px, 28vw, 310px);
  opacity: 0.42;
  transform: scale(0.9);
  transition:
    opacity var(--hover-duration) var(--hover-ease),
    transform var(--hover-duration) var(--hover-ease),
    filter var(--hover-duration) var(--hover-ease);
  filter: saturate(0.85);
}

.phone-slide.is-near {
  opacity: 0.7;
  transform: scale(0.95);
  filter: saturate(0.95);
}

.phone-slide.is-active {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1);
}

.phone-slide img {
  width: 100%;
  display: block;
  border-radius: 20px;
  /* Carousel shows the full, uncropped marketing screenshot (576x1024) with
     its caption/banner intact — unlike feature-showcase/cert-block, which
     use the cropped 576x830 `lp/` variant. Must match the source ratio
     exactly, otherwise object-fit: cover silently clips the top of the
     caption. */
  aspect-ratio: 576 / 1024;
  object-fit: cover;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
}

.phone-slide.is-active img {
  /* Depth only, no colored glow — the section no longer has a tinted wash
     behind it for this to blend into, so a colored glow floated oddly on
     the plain background. */
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.16);
}

.screens-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(9, 12, 18, 0.64);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  transition:
    transform var(--hover-duration) var(--hover-ease),
    background-color var(--hover-duration) var(--hover-ease),
    box-shadow var(--hover-duration) var(--hover-ease);
}

/* Expand the tappable area to the 44x44px minimum without inflating the
   visible circle (which shrinks further on narrow screens); centered on
   the button regardless of its own size at any breakpoint. */
.screens-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(44px, 100%);
  height: max(44px, 100%);
  transform: translate(-50%, -50%);
}

.screens-nav-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.screens-nav:hover {
  transform: translateY(-50%) scale(1.05);
  background: rgba(11, 16, 24, 0.8);
  box-shadow: 0 10px 26px rgba(4, 7, 12, 0.35);
}

.screens-nav:focus-visible {
  outline: 3px solid rgba(0, 206, 100, 0.34);
  outline-offset: 2px;
}

.screens-nav-prev {
  left: 0.3rem;
}

.screens-nav-next {
  right: 0.3rem;
}

.screens-dots {
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.screens-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(24, 26, 36, 0.20);
  cursor: pointer;
  transition:
    width var(--hover-duration) var(--hover-ease),
    background-color var(--hover-duration) var(--hover-ease);
}

/* Same 44px minimum hit-area trick as .screens-nav — the visible dot stays
   tiny (8px, 24px when active) so the row doesn't look heavy. */
.screens-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.screens-dot.is-active {
  width: 24px;
  background: linear-gradient(135deg, var(--primary-bright), var(--primary));
}

.screens-dot:focus-visible {
  outline: 3px solid rgba(0, 152, 94, 0.26);
  outline-offset: 2px;
}

.screen-placeholder {
  min-height: 260px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  text-align: center;
  padding: 1rem;
}

/* ── Language flag strip: decorative trust signal, not a switcher ───────── */
.section-lang-strip {
  padding: 1.75rem 0;
}

.lang-strip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.lang-strip-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.lang-flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 0.4rem 0.85rem 0.4rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-title);
}

.lang-flag-chip img {
  display: block;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.lang-strip-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Certificate feature block ───────────────────────────────────────────── */
.section-certificate .cert-block {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 2.5rem;
  align-items: center;
}

.cert-block-badge {
  display: inline-flex;
  margin-bottom: 0.85rem;
  background: #e8fbf2;
  color: var(--primary-deep);
  border: 1px solid #c4f3df;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.cert-block-title {
  margin: 0 0 0.75rem;
}

.cert-block-body {
  margin: 0;
  max-width: 46ch;
  color: var(--text-secondary);
  line-height: 1.6;
}

.cert-block-visual {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--bg-muted);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
}

/* Same max-width as .feature-showcase-visual img — this section sits right
   after the feature-showcase blocks in the page flow, so matching size keeps
   the visual rhythm consistent instead of reading as an accidental shrink. */
.cert-block-image {
  width: min(100%, 280px);
  aspect-ratio: 576 / 830;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 980px) {
  .section-certificate .cert-block {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .cert-block-visual {
    padding: 0.75rem;
  }

  .cert-block-image {
    max-width: 190px;
  }
}

.footer {
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
  gap: 1.5rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--border);
}

.footer-title {
  margin-bottom: 0.5rem;
}

.footer-main {
  max-width: 46ch;
}

.footer-email {
  margin: 0.75rem 0 0;
}

.footer-email a {
  color: var(--primary-deep);
  text-decoration: none;
  word-break: break-word;
}

.footer-email a:hover {
  text-decoration: underline;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  padding: 2.4rem 0 2rem;
}

.footer-col-title {
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  border: none;
  background: none;
  margin: 0;
  padding: 0.4rem 0;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease;
}

.footer-link:hover {
  color: var(--primary-deep);
}

.footer-social-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
}

/* Keep the language row clear of the fixed mobile sticky quiz bar. */
@media (max-width: 1023px) {
  .footer-bottom {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}

.footer-language {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-language-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.footer-language select {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-title);
  padding: 0.4rem 0.65rem;
  font-size: 0.88rem;
}

@media (max-width: 980px) {
  .footer-top,
  .footer-columns {
    grid-template-columns: 1fr;
  }
}

.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: none;
}

.cookie-banner.is-visible {
  display: block;
}

.cookie-banner-inner {
  margin-inline: auto;
  width: min(980px, 100%);
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 0.9rem;
}

.cookie-banner-title {
  margin: 0;
  color: var(--text-title);
  font-weight: 700;
}

.cookie-banner-text {
  margin: 0.45rem 0 0;
  color: var(--text-secondary);
}

.cookie-banner-actions {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.link-button {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-title);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border);
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.link-button:hover {
  background: #f8f8f8;
  transform: translateY(-1px);
}

.link-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 1rem;
}

.modal.is-open {
  display: flex;
}

.modal-panel {
  width: min(860px, 100%);
  max-height: min(88vh, 900px);
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  position: relative;
  padding: 1.1rem 1.1rem 1.2rem;
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-title);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.modal-content {
  margin-top: 0.8rem;
  line-height: 1.6;
  color: var(--text-body);
}

.modal-content h3 {
  margin: 1rem 0 0.35rem;
  font-size: 1rem;
}

.modal-content p {
  margin: 0.4rem 0;
}

.modal-content ul {
  margin: 0.45rem 0;
  padding-left: 1.1rem;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .step:hover,
  .price-card:hover,
  .screen:not(.phone-slide):hover {
    background-color: var(--hover-surface);
    border-color: var(--hover-border);
    box-shadow: var(--hover-shadow);
    transform: translateY(var(--hover-lift));
  }

  .hero-card:hover {
    /* Dedicated emerald hover tones, not the shared --hover-border/--hover-shadow
       (those are teal and used by several other cards on the page). */
    background:
      radial-gradient(110% 80% at 86% 12%, rgba(14, 164, 114, 0.4), transparent 66%),
      linear-gradient(160deg, #cdeee0, #eefbf6);
    border-color: #7dd1ac;
    box-shadow: 0 14px 26px rgba(14, 164, 114, 0.22);
    transform: translateY(var(--hover-lift));
  }
}

@media (max-width: 980px) {
  .hero-grid,
  .cards,
  .steps,
  .screens-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .screens-showcase {
    padding-inline: 2.5rem;
  }

  .phone-slide {
    flex-basis: clamp(190px, 42vw, 260px);
  }

  .screens-nav {
    width: 38px;
    height: 38px;
  }

  .screens-nav-icon {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 700px) {
  .hero {
    padding-top: 2.8rem;
  }

  .topbar-inner {
    min-height: 64px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .screens-showcase {
    padding-inline: 0.1rem;
    padding-bottom: 1.65rem;
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  }

  .phone-slide {
    flex-basis: clamp(150px, 48vw, 200px);
  }

  .screens-nav {
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(9, 12, 18, 0.72);
  }

  .screens-nav-icon {
    width: 16px;
    height: 16px;
  }

  .screens-nav:hover {
    transform: translateY(-50%) scale(1.03);
  }

  .screens-dots {
    margin-top: 0.9rem;
  }
}

/* ── Mid-page quiz CTA section ───────────────────────────────────────────── */
.section-quiz-mid {
  background: linear-gradient(135deg, #f0fdf7 0%, #e6f9f0 100%);
  border-top: 1px solid #c4f3df;
  border-bottom: 1px solid #c4f3df;
}

.quiz-mid-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.quiz-mid-eyebrow {
  display: inline-flex;
  background: #00985e22;
  color: var(--primary-deep);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.quiz-mid-title {
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-title);
  margin: 0;
}

.quiz-mid-sub {
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 420px;
}

.quiz-mid-btn {
  max-width: 360px;
}

@media (min-width: 768px) {
  .quiz-mid-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .quiz-mid-text {
    flex: 1;
  }
  .quiz-mid-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ── Before-pricing quiz hook ────────────────────────────────────────────── */
.pricing-quiz-hook {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.pricing-quiz-hook a {
  color: var(--primary-deep);
  font-weight: 600;
  text-decoration: none;
  transition: color 180ms ease;
}

.pricing-quiz-hook a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ── Footer quiz block ───────────────────────────────────────────────────── */
.footer-quiz {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.footer-quiz-btn {
  max-width: 400px;
  font-size: 0.95rem;
  min-height: 50px;
}

.footer-quiz-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ── Sticky quiz bar (mobile Noom/Headspace pattern) ─────────────────────── */
.quiz-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #c4f3df;
  box-shadow: 0 -4px 20px rgba(0, 152, 94, 0.12);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
}

.quiz-sticky-bar.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.quiz-sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  min-height: 52px;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-button);
  border: none;
  background: var(--primary-deep);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--primary-deeper);
  transition: transform 150ms cubic-bezier(0.33, 1, 0.68, 1), box-shadow 150ms cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover: hover) and (pointer: fine) {
  .quiz-sticky-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--primary-deeper);
  }
}

.quiz-sticky-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--primary-deeper);
}

/* hide sticky bar on large screens where topbar already shows the link */
@media (min-width: 1024px) {
  .quiz-sticky-bar {
    display: none;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   Site-wide (also covers quiz.css, loaded after this file on the quiz
   page): stops indefinite/looping keyframe animations and takes transform
   (movement/scale) out of every transition, so hover/press/carousel/enter
   effects resolve instantly instead of sliding, lifting, or bouncing.
   Color and opacity transitions are left in place — they still orient the
   parent to what changed without relying on motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  * {
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
  }
}

/* Generated localized home pages. All selectors are scoped to preserve the
   quiz, legal, privacy, and compatibility pages. */
.site-home {
  overflow-x: hidden;
  color: var(--text-body);
  background: var(--bg);
  --section-pad: 2.25rem;
}

.site-home h1,
.site-home h2 {
  font-family: var(--font-display);
  color: var(--text-title);
  text-wrap: balance;
}

.site-home h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.site-home h3 {
  font-family: var(--font-body);
  line-height: 1.25;
  text-wrap: balance;
}

.site-home p,
.site-home li {
  line-height: 1.65;
}

.site-home p {
  max-width: 70ch;
  text-wrap: pretty;
}

.site-skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 60;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  color: #fff;
  background: var(--primary-deep);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 220ms var(--hover-ease);
}

.site-skip-link:focus {
  transform: translateY(0);
}

.site-home {
  scroll-padding-top: 72px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 64px;
  border-bottom: 1px solid rgba(0, 122, 60, 0.1);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
}

.site-nav {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-brand {
  min-height: 48px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-title);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.site-brand img {
  display: block;
  object-fit: contain;
}

.site-nav-panel {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.site-anchor-nav,
.site-language-nav {
  display: flex;
  align-items: center;
}

.site-anchor-nav {
  gap: clamp(0.25rem, 1vw, 0.85rem);
}

.site-language-nav {
  gap: 0.1rem;
  padding-left: clamp(0.35rem, 1vw, 0.8rem);
  border-left: 1px solid var(--border);
}

.site-nav-stores {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
}

.site-nav-stores .btn-store,
.btn-store-compact {
  min-height: 36px;
  padding: 0.28rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--border);
}

.site-nav-stores .btn-store-icon,
.btn-store-compact .btn-store-icon {
  width: 16px;
  height: 16px;
}

.site-anchor-nav a,
.site-language-nav a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.55rem;
  color: var(--text-body);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.site-language-nav a {
  min-width: 48px;
  padding: 0.35rem;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-secondary);
}

.site-language-nav a[aria-current="page"] {
  border-color: var(--primary-deep);
  color: var(--text-title);
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0, 122, 60, 0.18);
}

.site-lang-flag {
  display: block;
  width: 28px;
  height: 22px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  object-fit: cover;
}

.site-nav-toggle {
  width: 48px;
  min-height: 48px;
  display: none;
  place-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-title);
  background: #fff;
  cursor: pointer;
}

.site-nav-toggle span {
  width: 20px;
  height: 2px;
  display: block;
  border-radius: 2px;
  background: currentColor;
  transition: transform 220ms var(--hover-ease), opacity 220ms var(--hover-ease);
}

.site-nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(7px) rotate(45deg);
}

.site-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

.site-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border: 0;
  border-radius: var(--radius-button);
  color: #fff;
  background: var(--primary-deep);
  box-shadow: 0 4px 0 var(--primary-deeper);
  font: 800 0.95rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--hover-ease), box-shadow 160ms var(--hover-ease);
}

.site-btn-small {
  min-height: 48px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.site-btn:active {
  box-shadow: 0 1px 0 var(--primary-deeper);
  transform: translateY(3px) scale(0.98);
}

.site-home a:focus-visible,
.site-home button:focus-visible {
  outline: 3px solid rgba(0, 152, 94, 0.32);
  outline-offset: 3px;
}

.site-hero {
  min-height: 0;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: var(--section-pad) 0;
  background:
    radial-gradient(70% 80% at 88% 40%, rgba(0, 206, 100, 0.18), transparent 58%),
    linear-gradient(180deg, #f3faf6 0%, #fff 72%);
}

.site-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1.08fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.site-kicker {
  margin: 0 0 1rem;
  color: var(--primary-deep);
  font-size: 0.875rem;
  font-weight: 800;
}

.site-hero h1 {
  max-width: min(16ch, 100%);
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.site-hero-subtitle {
  margin: 1.4rem 0 0;
  max-width: 56ch;
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.site-hero-actions {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-store-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-hero .btn-store {
  gap: 0.5rem;
  text-decoration: none;
  white-space: nowrap;
}

.site-store-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  color: var(--text-title);
  font-weight: 750;
  text-underline-offset: 0.25rem;
  white-space: nowrap;
}

.site-hero-visual {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(100%, 520px);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.site-hero-blob {
  position: absolute;
  inset: 8% 4% 4%;
  z-index: 0;
  border-radius: 48% 52% 46% 54%;
  background: radial-gradient(circle at 35% 30%, #7be3ad 0%, #00985e 58%, #007a3c 100%);
  box-shadow: 0 28px 60px rgba(0, 73, 36, 0.22);
}

.site-hero-visual img,
.site-screen img,
.site-capability img,
.site-heroes img {
  width: 100%;
  height: auto;
  display: block;
}

.site-hero-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: min(640px, 78vh);
  object-fit: contain;
  object-position: bottom center;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply;
}

.site-eas {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.site-eas-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-eas-inner p {
  margin: 0;
  max-width: 36ch;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
}

.site-eas-seal,
.product-eas-seal img {
  display: block;
  width: 88px;
  height: auto;
  object-fit: contain;
}

.product-eas-seal {
  margin: 1.5rem 0 0;
  max-width: 96px;
}

.product-eas-seal img {
  width: 96px;
}

.site-footer-eas {
  margin: 1rem 0 0;
  max-width: none;
}

.site-eas-wordmark {
  display: block;
  width: min(220px, 100%);
  height: auto;
  object-fit: contain;
}

.site-belief {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.site-belief-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: baseline;
}

.site-belief h2 {
  font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.site-belief p {
  margin: 0;
  font-size: 1.08rem;
}

.site-section {
  padding: var(--section-pad) 0;
}

.site-trust-story {
  padding: var(--section-pad) 0;
}

.site-section-heading {
  max-width: 720px;
  margin-bottom: 1.25rem;
}

.site-section-heading p,
.site-split-copy > p,
.site-how-layout > div > p,
.site-safety-layout > div > p,
.site-heroes-copy > p {
  margin: 1rem 0 0;
  color: var(--text-secondary);
  font-size: 1.05rem;
}

.site-capability-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.site-capability {
  min-height: 390px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.72fr);
  align-items: end;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #fff;
}

.site-capability-1 {
  grid-column: span 7;
  min-height: 520px;
  background: #edf9f4;
}

.site-capability-2 {
  grid-column: span 5;
  grid-template-columns: 1fr;
  background: #f8f5ff;
}

.site-capability-3,
.site-capability-4 {
  grid-column: span 6;
}

.site-capability-3 {
  background: #f2f5ff;
}

.site-capability-4 {
  background: #f2faf8;
}

.site-capability-copy {
  align-self: start;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.site-capability-copy h3 {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.site-capability-copy h3 a,
.site-split-copy h2 a,
.site-heroes-copy h2 a {
  color: inherit;
  text-decoration: none;
}

.site-capability-copy h3 a:hover,
.site-capability-copy h3 a:focus-visible,
.site-split-copy h2 a:hover,
.site-split-copy h2 a:focus-visible,
.site-heroes-copy h2 a:hover,
.site-heroes-copy h2 a:focus-visible {
  color: var(--primary-deep);
}

.site-capability-copy p {
  margin: 0.75rem 0 0;
  color: var(--text-secondary);
}

.site-capability figure {
  width: min(100%, 260px);
  margin: 0 auto;
  padding: 1rem 1rem 0;
}

.site-capability img {
  border-radius: 20px 20px 0 0;
}

.site-carousel-controls {
  display: flex;
}

.site-carousel:focus-visible {
  outline: 3px solid rgba(0, 152, 94, 0.32);
  outline-offset: 6px;
}

.site-carousel-controls button:disabled {
  opacity: 0.45;
  cursor: default;
}

.site-how {
  background: #f3faf6;
}

.site-how-layout {
  display: block;
}

.site-steps {
  position: relative;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
}

.site-steps::before {
  content: none;
}

.site-steps li {
  position: relative;
  display: grid;
  gap: 1rem;
  min-height: 100%;
  padding: 1.5rem 1.35rem 1.6rem;
  border: 1px solid #dceee4;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 0 #d7ebe0;
}

.site-steps li:last-child {
  padding-bottom: 1.6rem;
}

.site-step-num,
.site-step-marker {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  border-radius: 14px;
  background: var(--primary-deep);
  box-shadow: 0 3px 0 var(--primary-deeper);
  color: #fff;
  font: 800 1rem/1 var(--font-display);
}

.site-steps h3 {
  font-size: 1.25rem;
}

.site-steps p {
  margin: 0.5rem 0 0;
  color: var(--text-secondary);
}

.site-split,
.site-analytics-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 9vw, 8rem);
}

.site-screen {
  width: min(100%, 410px);
  margin: 0;
  padding: 1rem 1rem 0;
  overflow: hidden;
  border-radius: 24px;
}

.site-screen img {
  border-radius: 20px 20px 0 0;
}

.site-screen-green {
  background: #e9f8f1;
}

.site-screen-blue {
  justify-self: end;
  background: #eef3ff;
}

.site-split-copy ul {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.site-split-copy li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}

.site-analytics {
  border-top: 1px solid var(--border);
}

.site-analytics-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
}

.site-heroes {
  background: #f4f8f6;
}

.site-heroes-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(210px, 0.48fr) minmax(210px, 0.48fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
}

.site-ladder {
  color: var(--primary-deep) !important;
  font-weight: 800;
}

.site-heroes-primary,
.site-heroes-certificate {
  margin: 0;
  padding: 0.75rem 0.75rem 0;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
}

.site-heroes-primary {
  transform: translateY(1.5rem);
}

.site-heroes-certificate {
  transform: translateY(-1.5rem);
}

.site-heroes img {
  border-radius: 20px 20px 0 0;
}

.site-safety-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 8vw, 7rem);
  align-items: start;
}

.site-safety ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.site-safety li {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
  font-weight: 650;
}

.site-closing {
  padding: 0 0 var(--section-pad);
  color: #fff;
  background: transparent;
}

.site-closing-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.75rem);
  border-radius: 28px;
  background: var(--primary-deep);
}

.site-closing h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  color: #fff;
}

.site-closing p {
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.86);
}

.site-footer {
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--border);
}

.site-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--border);
}

.site-footer-brand p {
  max-width: 46ch;
  margin: 0.75rem 0 0;
  color: var(--text-secondary);
}

.site-footer-email {
  margin: 0.85rem 0 0;
}

.site-footer-email a {
  color: var(--primary-deep);
  font-weight: 650;
  text-decoration: none;
  word-break: break-word;
}

.site-footer-email a:hover,
.site-footer-email a:focus-visible {
  text-decoration: underline;
}

.site-footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  padding: 2.4rem 0 2rem;
}

.site-footer-col-title {
  margin: 0 0 0.9rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.site-footer-columns nav,
.site-footer-columns > div {
  display: grid;
  align-content: start;
  gap: 0.15rem;
}

.site-footer-columns a:not(.site-footer-link) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text-body);
  font-weight: 650;
  text-decoration: none;
}

.site-footer-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0.35rem 0;
  color: var(--text-body);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
}

.site-footer-link .btn-store-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.site-footer-social svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.site-footer-columns a:hover,
.site-footer-columns a:focus-visible,
.site-footer-link:hover,
.site-footer-link:focus-visible {
  color: var(--primary-deep);
}

.site-footer-legal-note {
  margin: 0.5rem 0 0 !important;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Legacy grid retained for any leftover shells during rebuild. */
.site-footer-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(140px, 0.75fr)
    minmax(140px, 0.75fr)
    minmax(210px, 0.95fr);
  gap: 2rem;
}

.site-footer-actions {
  display: grid;
  align-content: start;
  gap: 0.85rem;
}

.site-cookie {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 50;
  width: min(720px, calc(100% - 2rem));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem;
  border: 1px solid #b8d8c8;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 73, 36, 0.16);
}

.site-cookie[hidden] {
  display: none;
}

.site-cookie p {
  margin: 0.35rem 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.45;
}

.site-cookie-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-cookie-actions button:not(.site-btn) {
  min-height: 48px;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 16px;
  color: var(--text-body);
  background: transparent;
  font: 700 0.9rem/1 var(--font-body);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .site-btn:hover {
    box-shadow: 0 5px 0 var(--primary-deeper);
    transform: translateY(-1px);
  }

  .site-anchor-nav a:hover,
  .site-language-nav a:hover,
  .site-footer a:hover {
    color: var(--primary-deep);
  }
}

@media (width < 1151px) {
  .site-nav,
  .site-header {
    min-height: 64px;
  }

  .site-nav-toggle {
    display: grid;
  }

  .site-nav-panel {
    position: absolute;
    top: 64px;
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 73, 36, 0.1);
  }

  .site-nav-panel.is-open {
    display: grid;
    gap: 0.75rem;
  }

  .site-anchor-nav,
  .site-language-nav {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 0;
  }

  .site-language-nav {
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .site-anchor-nav a {
    justify-content: flex-start;
  }

  .site-product-menu {
    width: 100%;
  }

  .site-product-menu > button {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .site-product-menu-panel {
    position: static;
    width: 100%;
    box-shadow: none;
  }

  .site-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.4rem);
  }

  .site-nav-stores {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .site-nav-stores .btn-store {
    flex: 1 1 0;
    min-height: 48px;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .site-nav {
    min-height: 64px;
  }

  .site-header {
    min-height: 64px;
  }

  .site-nav-toggle {
    display: grid;
  }

  .site-nav-panel {
    position: absolute;
    top: 64px;
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 73, 36, 0.1);
  }

  .site-nav-panel.is-open {
    display: grid;
    gap: 0.75rem;
  }

  .site-anchor-nav,
  .site-language-nav {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 0;
  }

  .site-language-nav {
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .site-anchor-nav a {
    justify-content: flex-start;
  }

  .site-hero {
    min-height: auto;
    padding: var(--section-pad) 0;
  }

  .site-hero-grid,
  .site-belief-layout,
  .site-how-layout,
  .site-split,
  .site-split-reverse,
  .site-start-grid,
  .site-analytics-layout,
  .site-heroes-layout,
  .site-safety-layout,
  .site-footer-columns,
  .site-footer-grid {
    grid-template-columns: 1fr;
  }

  .site-hero-grid {
    gap: 2rem;
  }

  .site-hero h1 {
    max-width: min(18ch, 100%);
    font-size: clamp(2.05rem, 9vw, 2.85rem);
  }

  .site-hero-actions,
  .site-closing-inner,
  .site-cookie {
    align-items: stretch;
    flex-direction: column;
  }

  .site-hero-actions {
    display: flex;
  }

  .site-store-actions {
    justify-content: center;
  }

  .site-hero-visual,
  .site-screen {
    width: min(100%, 380px);
    justify-self: center;
  }

  .site-capability-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding: 0 0 1rem;
  }

  .site-capability {
    min-width: min(88vw, 420px);
    min-height: 460px;
    grid-template-columns: 1fr;
    scroll-snap-align: start;
  }

  .site-carousel-controls {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .site-carousel-controls button {
    width: 48px;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--text-title);
    background: #fff;
    font-size: 1.15rem;
    cursor: pointer;
  }

  .site-screen-blue {
    grid-row: 1;
  }

  .site-heroes-primary,
  .site-heroes-certificate {
    width: min(100%, 380px);
    justify-self: center;
    transform: none;
  }

  .site-closing-inner {
    display: flex;
  }

  .site-closing .site-btn {
    width: 100%;
  }

  .site-cookie {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
  }

  .site-cookie-actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-home *,
  .site-home *::before,
  .site-home *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Generated official legal documents. */
.site-legal {
  color: var(--text-body);
  background: var(--bg);
}

.legal-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.legal-nav {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.legal-nav nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.legal-nav nav a,
.legal-footer a {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  font-weight: 650;
  text-underline-offset: 0.2rem;
}

.site-legal a:focus-visible {
  outline: 3px solid rgba(0, 152, 94, 0.32);
  outline-offset: 3px;
}

.legal-main {
  padding: clamp(2.5rem, 7vw, 5.5rem) 0;
}

.legal-layout {
  width: min(72ch, calc(100% - 2rem));
}

.legal-article {
  font-size: 1rem;
  line-height: 1.72;
}

.legal-title {
  margin-bottom: 1rem;
}

.legal-title h1 {
  max-width: min(18ch, 100%);
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 3.8vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.legal-official-note {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 650;
}

.legal-meta {
  margin: 0.5rem 0 2rem;
  color: var(--text-secondary);
}

.legal-toc {
  margin: 0 0 clamp(3rem, 8vw, 5rem);
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-muted);
}

.legal-toc h2 {
  font: 700 1.1rem/1.3 var(--font-body);
}

.legal-toc ol {
  margin: 1rem 0 0;
  padding-left: 1.4rem;
  columns: 2;
  column-gap: 2rem;
}

.legal-toc li {
  break-inside: avoid;
  margin-bottom: 0.55rem;
}

.legal-toc a,
.legal-section a {
  color: var(--primary-deep);
  text-underline-offset: 0.18rem;
  overflow-wrap: anywhere;
}

.legal-section {
  scroll-margin-top: 1.5rem;
}

.legal-section + .legal-section {
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
}

.legal-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.legal-section p,
.legal-section ul {
  margin: 1rem 0 0;
}

.legal-section ul {
  padding-left: 1.4rem;
}

.legal-section li + li {
  margin-top: 0.55rem;
}

.legal-footer {
  padding: 2.5rem 0;
  border-top: 1px solid var(--border);
}

.legal-footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.legal-footer p,
.site-footer-legal-note {
  color: var(--text-secondary);
}

.legal-footer p {
  margin: 0;
}

.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.site-footer-legal-note {
  margin: 0.5rem 0 0 !important;
  font-size: 0.875rem;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .legal-nav {
    min-height: 64px;
  }

  .legal-toc ol {
    columns: 1;
  }

  .legal-footer-inner,
  .legal-footer nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* Manual 404 route. */
.not-found {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

.not-found-card {
  width: min(560px, 100%);
  padding: clamp(2rem, 6vw, 3.5rem);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg);
  box-shadow: var(--shadow-soft);
}

.not-found-logo {
  width: 64px;
  height: 64px;
}

.not-found-code {
  margin: 1.25rem 0 0.5rem;
  color: var(--primary-deep);
  font-weight: 800;
}

.not-found-title {
  font-family: var(--font-display);
}

.not-found-copy {
  max-width: 42ch;
  margin: 1rem auto 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

@media print {
  .site-legal {
    color: #1a1a1a;
    background: #fff;
  }

  .site-legal .site-skip-link,
  .legal-header,
  .legal-footer,
  .legal-toc {
    display: none;
  }

  .legal-main {
    padding: 0;
  }

  .legal-layout {
    width: 100%;
  }

  .legal-article {
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .legal-section {
    break-inside: avoid-page;
  }

  .legal-section a {
    color: inherit;
    text-decoration: none;
  }
}

.site-product-page {
  overflow-x: hidden;
}

.site-product-page a:focus-visible,
.site-product-page button:focus-visible {
  outline: 3px solid rgba(0, 152, 94, 0.32);
  outline-offset: 3px;
}

.site-product-menu {
  position: relative;
}

.site-product-menu > button {
  min-height: 48px;
  padding: 0 0.55rem;
  border: 0;
  color: var(--text-body);
  background: transparent;
  font: 700 0.875rem/1 var(--font-body);
  cursor: pointer;
}

.site-product-menu > button::after {
  content: "▾";
  margin-left: 0.4rem;
}

.site-product-menu-panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 210px;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.site-product-menu-panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  color: var(--text-body);
  font-weight: 700;
  text-decoration: none;
}

.product-main {
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 7rem);
}

.product-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.product-breadcrumb a {
  color: var(--primary-deep);
}

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.product-hero > div:first-child {
  /* Let long store CTAs wrap instead of stealing screenshot columns. */
  min-width: 0;
}

.product-hero:not(:has(.product-screen)) {
  grid-template-columns: 1fr;
}

/* Two app screens (heroes): keep phones readable; stack store pills. */
.product-hero:has(.product-screen + .product-screen) {
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 0.78fr));
  gap: clamp(1.25rem, 4vw, 3rem);
}

.product-hero h1 {
  max-width: min(16ch, 100%);
  font: 700 clamp(2.15rem, 3.8vw, 3.4rem)/1.06 var(--font-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.product-hero:not(:has(.product-screen)) h1 {
  max-width: min(18ch, 100%);
  font-size: clamp(2.15rem, 3.8vw, 3.4rem);
}

.product-hero p {
  max-width: 56ch;
  margin: 1.25rem 0 1.75rem;
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}

.product-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 100%;
}

.product-hero .site-store-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 100%;
}

.product-hero:has(.product-screen + .product-screen) .site-store-actions {
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 18.5rem);
}

.product-hero .btn-store {
  gap: 0.5rem;
  justify-content: flex-start;
  text-decoration: none;
  white-space: normal;
}

.product-screen {
  margin: 0;
  padding: 0.8rem 0.8rem 0;
  overflow: hidden;
  border: 1px solid #b8ead4;
  border-radius: 24px;
  background: #ecfaf4;
}

.product-screen img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px 18px 0 0;
}

.product-prose {
  max-width: 75ch;
  margin-inline: auto;
}

.product-prose > p,
.product-prose section p,
.product-heroes p {
  font-size: 1.05rem;
  line-height: 1.75;
  text-wrap: pretty;
}

.product-prose > p + p,
.product-prose section {
  margin-top: 1.5rem;
}

.product-prose section {
  padding-top: clamp(2rem, 5vw, 4rem);
}

.product-prose h2 {
  font: 700 clamp(1.55rem, 2.6vw, 2.25rem)/1.15 var(--font-display);
  letter-spacing: -0.025em;
}

.product-heroes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: clamp(3rem, 7vw, 6rem) auto 0;
  padding: 0;
  list-style: none;
}

.product-heroes li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.product-hero-icon {
  display: block;
  width: 72px;
  height: 72px;
  transform: translateY(-0.625rem);
  border-radius: 14px;
  object-fit: cover;
  background: var(--bg-muted);
}

.product-heroes strong,
.product-heroes span {
  display: block;
}

.product-heroes strong {
  color: var(--text-title);
  font-size: 1.25rem;
}

.product-heroes span {
  margin-top: 0.25rem;
  color: var(--primary-deep);
  font-weight: 700;
}

.product-heroes p {
  margin: 0.65rem 0 0;
  font-size: 0.95rem;
}

.product-link-grid,
.product-related {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: clamp(3rem, 7vw, 6rem) auto 0;
}

.product-link-grid a,
.product-related a {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-title);
  background: #fff;
  text-decoration: none;
  /* Same pressable ridge as .btn-store so product nav cards feel tappable. */
  box-shadow: 0 3px 0 var(--border);
  transition:
    transform 150ms cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 150ms cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover: hover) and (pointer: fine) {
  .product-link-grid a:hover,
  .product-related a:hover {
    box-shadow: 0 4px 0 var(--border);
    transform: translateY(-1px);
  }
}

.product-link-grid a:active,
.product-related a:active {
  box-shadow: 0 1px 0 var(--border);
  transform: translateY(2px);
}

.product-link-grid span {
  margin-top: 0.4rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.product-related {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 767px) {
  .site-product-menu {
    width: 100%;
  }

  .site-product-menu > button {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .site-product-menu-panel {
    position: static;
    width: 100%;
    box-shadow: none;
  }

  .product-hero,
  .product-hero:has(.product-screen + .product-screen),
  .product-heroes,
  .product-link-grid,
  .product-related {
    grid-template-columns: 1fr;
  }

  .product-hero-actions {
    align-items: stretch;
  }

  .product-hero .site-store-actions,
  .product-hero:has(.product-screen + .product-screen) .site-store-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .product-hero h1,
  .product-hero:not(:has(.product-screen)) h1 {
    max-width: min(18ch, 100%);
    font-size: clamp(2.05rem, 9vw, 2.85rem);
  }

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

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

.site-hero-eas {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.1rem;
}

.site-hero-eas .site-eas-seal {
  width: 64px;
}

.site-hero-eas .site-eas-wordmark {
  width: min(168px, 100%);
}

.site-hero-trust,
.site-trust-grid {
  margin: 1.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.site-hero-trust li,
.site-trust-grid p {
  margin: 0;
  padding: 0.45rem 0.75rem;
  border: 1px solid #d7efe4;
  border-radius: 999px;
  background: #fff;
  color: var(--text-body);
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
}

.site-feature-grid {
  display: grid;
  gap: clamp(3rem, 8vw, 6rem);
}

.site-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.86fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.site-feature:nth-child(even) {
  grid-template-columns: minmax(240px, 0.86fr) minmax(0, 1fr);
}

.site-feature:nth-child(even) .site-feature-copy {
  order: 2;
}

.site-feature-media {
  margin: 0;
  padding: 1.25rem;
  border-radius: 32px;
  background: #eef8f2;
}

.site-feature-copy h3 {
  margin: 0 0 0.75rem;
  font: 800 clamp(1.2rem, 2vw, 1.55rem)/1.2 var(--font-display);
}

.site-feature-copy p,
.site-review-card p,
.site-review-verdict,
.site-price-note {
  margin: 0;
  color: var(--text-secondary);
}

.site-feature figure,
.site-feature img {
  margin: 0;
}

.site-feature img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.site-review {
  background: #fff;
}

.site-review .site-kicker {
  margin: 0 0 0.85rem;
}

.site-review h2 {
  margin: 0 0 1.5rem;
}

.site-review-grid,
.site-price-grid,
.doc-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.site-review-card,
.site-price-card,
.doc-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.site-review-card h3,
.site-price-card h3,
.doc-card strong {
  margin: 0;
  color: #000;
  font-size: 1.05rem;
  font-weight: 800;
}

.site-review-verdict {
  margin-top: 1.5rem;
  max-width: 72ch;
}

.site-review-close {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.site-review-close .site-review-verdict {
  margin: 0;
  max-width: none;
  flex: 1 1 auto;
}

.site-review-close .site-footer-eas {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.site-review-close .site-eas-wordmark {
  width: 220px;
  max-width: 100%;
  height: auto;
}

.site-price-amount {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0.55rem 0 0;
  color: var(--text-title);
  font: 800 2rem/1 var(--font-display);
  letter-spacing: -0.03em;
}

.site-price-was {
  color: #86868b;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.site-price-now {
  color: var(--text-title);
}

.site-price-trial {
  margin: 1.25rem 0 0.5rem;
  font-weight: 800;
}

.site-pricing .site-store-actions,
.site-closing .site-store-actions {
  margin-top: 1.25rem;
}

.site-inline-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  color: var(--primary-deep);
  font-weight: 800;
}

.documents-main {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.documents-hero h1 {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  letter-spacing: -0.03em;
}

.documents-hero p,
.documents-prose p {
  max-width: 70ch;
  color: var(--text-secondary);
}

.doc-card-grid {
  margin-top: 2rem;
}

.doc-card {
  min-height: 120px;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  border-color: #e5e7eb;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 160ms var(--hover-ease), box-shadow 160ms var(--hover-ease);
}

.doc-card span {
  color: #6b7280;
  font-size: 0.95rem;
}

@media (hover: hover) and (pointer: fine) {
  .doc-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
}

.doc-card:active {
  transform: scale(0.99);
}

@media (max-width: 767px) {
  .site-trust-grid,
  .site-feature,
  .site-feature:nth-child(even),
  .site-review-grid,
  .site-price-grid,
  .doc-card-grid,
  .site-steps {
    grid-template-columns: 1fr;
  }

  .site-feature:nth-child(even) .site-feature-copy {
    order: 0;
  }

  .site-hero-trust li {
    white-space: normal;
  }

  .site-split,
  .site-split-reverse,
  .site-start-grid,
  .site-closing-inner {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }

  .site-carousel-controls {
    margin-top: 1.25rem;
  }
}

.site-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4.5rem);
}

.site-split-reverse {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.site-illustration {
  margin: 0;
}

.site-illustration img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
}

.site-how .site-illustration {
  background: #f3faf6;
}

.site-how .site-illustration img {
  mix-blend-mode: multiply;
}

.site-trust-story h2,
.site-how h2,
.site-pricing h2,
.site-safety h2,
.site-start h2,
.site-section-heading h2 {
  margin: 0 0 1.15rem;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.site-section-heading p {
  margin: 0;
}

.site-trust-story p,
.site-how .site-split > div > p {
  margin: 0;
  max-width: 58ch;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.65;
}

.site-features {
  background: #fff;
}

.site-carousel {
  overflow: hidden;
  width: 100%;
  padding: 0.15rem 0 0.25rem;
  background: #fff;
}

.site-carousel .swiper,
.site-carousel .swiper-wrapper,
.site-carousel .swiper-slide {
  height: auto;
}

.site-carousel .swiper {
  overflow: hidden;
  padding: 1.25rem 0 1.75rem;
}

.site-carousel .swiper-wrapper {
  align-items: center;
}

/* Beat Swiper's .swiper-slide { width:100%; height:100% } loaded after styles.css. */
.site-carousel .swiper-slide {
  position: relative;
  /* Phone art is 576×1024. Keep the active slide at that frame, do not stretch. */
  width: clamp(168px, 22vw, 280px);
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  transform-origin: center center;
  cursor: pointer;
}

.site-carousel:not(.is-dragging) .swiper-slide {
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-carousel .swiper-slide-active {
  cursor: grab;
  z-index: 6;
}

.site-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.12);
  background: #fff;
}

.site-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  margin-top: 0.15rem;
}

.site-carousel-controls button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8e8e93;
  cursor: pointer;
}

.site-carousel-controls button:hover {
  color: var(--text-title);
}

.site-carousel-controls button[hidden],
.site-carousel-controls svg[hidden] {
  display: none;
}

.site-carousel .swiper-pagination {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}

.site-carousel .swiper-pagination-bullet {
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  appearance: none;
}

.site-carousel .swiper-pagination-bullet::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 20.5px auto;
  border-radius: 999px;
  background: #d2d2d7;
}

.site-carousel .swiper-pagination-bullet-active::after {
  width: 18px;
  background: #1d1d1f;
}

.site-start {
  padding: var(--section-pad) 0;
  background: #eef8f2;
}

.site-start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.site-start-card {
  padding: 1.5rem;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 73, 36, 0.06);
}

.site-start-num {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--primary-deep);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
}

.site-start-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
}

.site-start-card p {
  margin: 0;
  color: var(--text-secondary);
}

.site-footer-top .site-footer-eas {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 1rem;
}

.site-review .site-footer-eas {
  display: block;
  width: auto;
  max-width: none;
  margin-top: 0;
}

.site-review .site-eas-wordmark {
  width: 220px;
  max-width: 100%;
  height: auto;
}

.site-footer-top .site-eas-wordmark {
  width: min(280px, 100%);
  max-width: none;
  height: auto;
}

.site-closing .site-store-actions {
  flex-direction: column;
  align-items: stretch;
}

.site-closing .btn-store {
  background: #fff;
  color: #111;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-carousel .swiper-slide,
  .site-carousel .swiper-slide-active {
    transform: none;
    transition: none !important;
  }
}

@media (max-width: 767px) {
  .container {
    width: min(1120px, calc(100% - 1.75rem));
  }

  .site-split,
  .site-split-reverse,
  .site-hero-grid,
  .site-start-grid,
  .site-safety-layout,
  .site-review-grid,
  .site-price-grid,
  .site-footer-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .site-closing-inner,
  .site-footer-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .site-trust-story .site-split {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
  }

  .site-trust-story .site-illustration {
    order: 2;
  }

  .site-footer-top .site-eas-wordmark {
    width: 100%;
  }

  .site-review-close {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .site-review-close .site-footer-eas,
  .site-review .site-footer-eas {
    width: 100%;
  }

  .site-review-close .site-eas-wordmark,
  .site-review .site-eas-wordmark {
    width: 100%;
  }

  .site-hero-eas {
    justify-content: center;
  }

  .site-hero-trust,
  .site-trust-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .site-hero-trust li,
  .site-trust-grid p {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .site-store-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .site-store-actions .btn-store {
    width: 100%;
    justify-content: center;
  }

  .site-hero-visual,
  .site-illustration {
    width: min(100%, 280px);
    margin-inline: auto;
    justify-self: center;
  }

  .site-hero-visual img,
  .site-illustration img {
    width: 100%;
    max-width: 100%;
    max-height: 220px;
    margin-inline: auto;
    object-fit: contain;
  }

  .site-section,
  .site-start,
  .site-trust-story,
  .site-how,
  .site-features {
    padding: var(--section-pad) 0;
  }

  .site-section-heading {
    margin-bottom: 1.25rem;
  }

  .site-carousel .swiper-slide {
    width: clamp(140px, 40vw, 172px);
  }

  .site-slide img {
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.1);
  }

  .site-carousel .swiper {
    padding: 0.35rem 0 0.5rem;
  }

  .site-carousel .swiper-pagination-bullet {
    width: 28px;
    height: 44px;
  }

  .site-carousel .swiper-pagination-bullet::after {
    margin: 18.5px auto;
  }
}