/* Sage & Cream preview. Production typography and content remain unchanged. */
:root {
  color-scheme: light;
  --bg: #faf9f4;
  --panel: #f0f5ef;
  --panel-soft: #e7f1ea;
  --line: #b3c6b9;
  --text: #223d3a;
  --muted: #445e58;
  --accent: #2e7265;
  --accent-strong: #2e7265;
  --accent-hover: #245b50;
  --accent-pressed: #1b483f;
  --control-border: #668c7c;
  --card-surface: #d9e6da;
  --surface-sage: #e7f1ea;
  --surface-peach: #f4e3d6;
  --surface-blue: #dce7f1;
  --reading: #445e58;
  --phone-frame: #46625b;
  --on-accent: #fff;
}

body { background: var(--bg); color: var(--text); }
::selection { background: var(--accent); color: #fff; }
.skip { background: var(--accent-strong); color: var(--on-accent); }
.site-header { background: rgba(250, 249, 244, .94); }
.nav-links .nav-pill,
.nav-links .nav-pill:hover { color: var(--on-accent); }
.language-switch { border-color: var(--control-border); }
.language-switch a { min-width: 44px; min-height: 44px; }
.language-switch a[aria-current="true"] { background: var(--surface-sage); }
.language-switch a:hover { background: var(--surface-sage); }

.hero { padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.hero::before {
  background:
    linear-gradient(156deg, transparent 24%, var(--surface-blue) 110%),
    linear-gradient(30deg, var(--surface-peach) -55%, transparent 45%),
    linear-gradient(145deg, var(--bg) 10%, var(--surface-sage) 60%, var(--bg) 100%);
}
.hero-lead,
.hero-support { color: var(--reading); }
.button-primary { color: var(--on-accent); }
.button-primary:hover { color: var(--on-accent); }
.button-primary:active { background: var(--accent-pressed); }
.button-secondary { border-color: var(--control-border); }
.button-secondary:hover { color: var(--on-accent); }
.button-secondary:active { border-color: var(--accent-pressed); background: var(--accent-pressed); color: var(--on-accent); }
.phone { border-color: var(--phone-frame); box-shadow: 0 30px 75px rgba(0, 0, 0, .18), 0 0 0 1px var(--control-border); }

.use-case,
.faq details { border: 0; background: var(--card-surface); }
.faq summary { display: list-item; list-style-position: inside; padding-block: .55rem; }
.faq summary::marker { color: var(--accent); }
.feature,
.steps li { border-top-color: var(--control-border); }
.screen-card img { border-color: var(--phone-frame); }
.screen-card figcaption,
.steps-note { color: var(--reading); }
.quiet-panel { border: 0; background: var(--surface-blue); }
.quiet-panel p { color: var(--reading); }
.last-call { background: var(--surface-sage); }

.back-to-top { border-color: var(--control-border); background: var(--panel); color: var(--text); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.back-to-top:hover { border-color: var(--accent-strong); color: var(--on-accent); }

/* The privacy pages reuse the same tokens but have a few hard-coded dark colours. */
main > section[lang] p,
main > section[lang] li { color: var(--reading); }
main > section[lang] .notice { border-color: var(--control-border); background: var(--panel); overflow-wrap: anywhere; }

@media (min-width: 1051px) and (max-width: 1120px) {
  .nav,
  .nav-links { gap: 1rem; }
}

@media (max-width: 1050px) {
  .mobile-nav summary { border-color: var(--control-border); background: var(--panel); }
  .mobile-nav summary:hover,
  .mobile-nav[open] summary { color: var(--accent); background: var(--surface-sage); }
  .mobile-menu { background: var(--bg); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
  .mobile-menu .language-switch { background: var(--panel); }
}