/* ==========================================================================
   MeetHugo Landing - design tokens
   Pulled directly from the product (app/globals.css, components/ui/card.tsx,
   components/ui/button.tsx, components/dashboard/metric-card.tsx,
   components/billing/tier-badge.tsx) so the marketing site and the app read
   as one product: system font stack, neutral oklch grays, rounded-xl cards
   with a hairline ring instead of a hard border, and the same green/amber/red
   score semantics + amber-to-orange Premium gradient used in the dashboard.
   ========================================================================== */

:root {
  --background: #ffffff;
  --foreground: #252525;
  --card: #ffffff;
  --card-ring: rgba(37, 37, 37, 0.1);
  --muted: #f7f7f7;
  --muted-foreground: #8a8a8a;
  --border: #e7e7e7;
  --primary: #343434;
  --primary-foreground: #fafafa;

  --good-bg: rgba(34, 197, 94, 0.15);
  --good-text: #16a34a;
  --ok-bg: rgba(245, 158, 11, 0.15);
  --ok-text: #b45309;
  --bad-bg: rgba(217, 62, 48, 0.1);
  --bad-text: #cf3021;

  --premium-from: #f59e0b;
  --premium-to: #f97316;

  --shadow-sm: 0 1px 2px rgba(37, 37, 37, 0.04), 0 1px 6px rgba(37, 37, 37, 0.04);
  --shadow-md: 0 8px 24px rgba(37, 37, 37, 0.08), 0 2px 8px rgba(37, 37, 37, 0.06);
  --shadow-lg: 0 24px 64px rgba(37, 37, 37, 0.12), 0 4px 16px rgba(37, 37, 37, 0.08);

  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas,
    "Liberation Mono", Menlo, monospace;

  --radius-lg: 10px;
  --radius-xl: 14px;

  --container: 1152px;
  --container-narrow: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #252525;
    --foreground: #fafafa;
    --card: #333333;
    --card-ring: rgba(255, 255, 255, 0.1);
    --muted: #2b2b2b;
    --muted-foreground: #b5b5b5;
    --border: rgba(255, 255, 255, 0.1);
    --primary: #ececec;
    --primary-foreground: #333333;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--premium-to); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--primary); color: var(--primary-foreground); padding: 10px 16px; border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap--narrow { max-width: var(--container-narrow); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 700;
  color: var(--premium-to);
  margin: 0 0 14px;
}
.section-sub {
  color: var(--muted-foreground);
  max-width: 62ch;
  font-size: 1.05rem;
  margin-top: 14px;
}

/* ---------- buttons (mirrors components/ui/button.tsx) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: var(--radius-lg);
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover { opacity: 0.82; }
.btn-premium {
  background: linear-gradient(to right, var(--premium-from), var(--premium-to));
  color: #ffffff;
}
.btn-premium:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn-outline {
  border: 1px solid var(--border);
  color: var(--foreground);
  background: var(--background);
}
.btn-outline:hover { background: var(--muted); }
.btn-outline-negative {
  border: 1px solid var(--bad-text);
  color: var(--foreground);
  background: var(--background);
}
.btn-outline-negative:hover { background: var(--bad-bg); }
.btn-sm { padding: 8px 15px; font-size: 0.85rem; }
.btn-lg { padding: 15px 28px; font-size: 1.02rem; }

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.nav.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.nav-inner {
  display: flex; align-items: center; gap: 32px;
  height: 68px;
  /* Reserve a constant 150px of clearance from the true VIEWPORT edge for
     the fixed corner ribbon - not from .wrap's own (centered, width-capped)
     edge. .wrap already grows a margin of max(0, (100vw - var(--container))/2)
     once the viewport exceeds --container; this only tops that margin up to
     150px and never goes negative, so .wrap itself stays centered exactly
     like every other section and the logo stays aligned with the rest of
     the page at every width. */
  padding-right: max(0px, calc(150px - max(0px, (100vw - var(--container)) / 2)));
}
@media (max-width: 640px) {
  .nav-inner { padding-right: max(0px, calc(90px - max(0px, (100vw - var(--container)) / 2))); }
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.05rem;
  margin-right: auto;
}
.brand img { border-radius: 7px; }
.nav-links { display: flex; gap: 26px; font-size: 0.92rem; color: var(--muted-foreground); }
.nav-links a:hover { color: var(--foreground); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-login { font-size: 0.9rem; color: var(--muted-foreground); }
.nav-login:hover { color: var(--foreground); }

.nav-toggle { display: none; padding: 6px; color: var(--foreground); }
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 24px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}
.nav-mobile a, .nav-mobile .btn { padding: 12px 0; font-size: 1rem; }
.nav-mobile.is-open { display: flex; }

@media (max-width: 860px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: block; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding: 76px 0 96px; }
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: 20px;
}
.hero-sub {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 16px;
}
.hero-sub .accent {
  background: linear-gradient(to right, var(--premium-from), var(--premium-to));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-body {
  font-size: 1.08rem;
  color: var(--muted-foreground);
  max-width: 50ch;
  margin-bottom: 30px;
}
.hero-ctas { margin-bottom: 16px; }
.hero-trust { font-size: 0.86rem; color: var(--muted-foreground); }

/* ---- on-brand dashboard mockup (real card/badge language, illustrative data) ---- */
.mock-window {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--card-ring);
  overflow: hidden;
}
.mock-titlebar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.mock-titlebar img { border-radius: 6px; }
.mock-titlebar span { font-size: 0.8rem; font-weight: 600; color: var(--muted-foreground); }
.mock-stage {
  position: relative;
  min-height: 300px;
}
.mock-frame {
  position: absolute; inset: 0;
  padding: 24px 24px 26px;
  opacity: 0;
  animation: mockFade 9s infinite;
}
.mock-frame:nth-child(2) { animation-delay: 4.5s; }
@keyframes mockFade {
  0%, 4% { opacity: 0; transform: translateY(6px); }
  8%, 46% { opacity: 1; transform: translateY(0); }
  50%, 100% { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .mock-frame { animation: none; opacity: 0; transition: opacity 0.4s ease; }
  .mock-frame:first-child { opacity: 1; }
}
.mock-label { font-size: 0.84rem; color: var(--muted-foreground); margin-bottom: 8px; }
.mock-value {
  font-size: 2rem; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.mock-value .unit { font-size: 1rem; font-weight: 500; color: var(--muted-foreground); }
.mock-delta { font-size: 0.88rem; color: var(--good-text); margin-bottom: 16px; font-weight: 600; }
.mock-chart { margin-bottom: 18px; }
.mock-chart svg { width: 100%; height: 64px; display: block; }
.mock-hugo {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--muted);
  border-radius: var(--radius-lg);
  padding: 13px 15px;
  font-size: 0.88rem;
  color: var(--muted-foreground);
}
.mock-hugo-dot {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; margin-top: 1px;
  background: linear-gradient(135deg, #ec4899, var(--premium-to));
}
.mock-score-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.mock-score { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; }
.mock-badge {
  font-size: 0.76rem; font-weight: 600; padding: 3px 10px; border-radius: 99px;
  background: var(--good-bg); color: var(--good-text);
}
.mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mock-metric {
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--card-ring);
  padding: 12px 14px;
}
.mock-metric .mock-label { margin-bottom: 6px; font-size: 0.76rem; }
.mock-metric .mock-metric-value { font-size: 1.15rem; font-weight: 700; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding: 52px 0 60px; }
}

/* ==========================================================================
   PROBLEM
   ========================================================================== */
.problem { padding: 84px 0; background: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.problem h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 40px; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.problem-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-sm);
  padding: 26px 24px;
}
.problem-card .icon { color: var(--premium-to); width: 28px; height: 28px; margin-bottom: 16px; }
.problem-card p { color: var(--muted-foreground); font-size: 0.98rem; }
@media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.how { padding: 96px 0; }
.how h2 { font-size: clamp(1.85rem, 3.2vw, 2.5rem); margin-bottom: 4px; }
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 48px;
}
.step { position: relative; padding-top: 4px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary); color: var(--primary-foreground);
  font-weight: 700; font-size: 1.05rem;
  margin-bottom: 18px;
}
.step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.step p { color: var(--muted-foreground); }
.how-cta { margin-top: 48px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 34px; } }

/* ==========================================================================
   FEATURES
   ========================================================================== */
.features { padding: 96px 0; background: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.features h2 { font-size: clamp(1.85rem, 3.2vw, 2.5rem); margin-bottom: 44px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  padding: 26px 24px;
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--card-ring);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.feature-card:hover { box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-md); transform: translateY(-2px); }
.feature-card .icon { color: var(--premium-to); width: 26px; height: 26px; margin-bottom: 14px; }
.feature-card h3 { font-size: 1.04rem; margin-bottom: 8px; }
.feature-card p { color: var(--muted-foreground); font-size: 0.94rem; }
@media (max-width: 860px) { .features-grid { grid-template-columns: 1fr; } }
@media (min-width: 861px) and (max-width: 1080px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   QUOTE
   ========================================================================== */
.quote-section { padding: 100px 0; background: var(--foreground); border-bottom: 1px solid var(--border); }
.quote-section blockquote { max-width: 760px; margin: 0 auto; text-align: center; }
.quote-section p {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--background);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.quote-section footer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.quote-section cite {
  font-style: normal; font-weight: 700;
  background: linear-gradient(to right, var(--premium-from), var(--premium-to));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.quote-sub { font-size: 0.85rem; color: color-mix(in srgb, var(--background) 55%, transparent); letter-spacing: 0.02em; }

/* ==========================================================================
   WHO IT'S FOR
   ========================================================================== */
.who { padding: 96px 0; }
.who h2 { font-size: clamp(1.85rem, 3.2vw, 2.5rem); margin-bottom: 40px; }
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.who-card { border-left: 2px solid var(--premium-to); padding-left: 16px; }
.who-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
.who-card p { color: var(--muted-foreground); font-size: 0.92rem; }
@media (max-width: 900px) { .who-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; } }
@media (max-width: 540px) { .who-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   NOTIFY — pre-launch email capture
   ========================================================================== */
.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;
}
.notify { padding: 100px 0; background: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; }
.notify h2 { font-size: clamp(1.85rem, 3.2vw, 2.5rem); margin-bottom: 4px; }
.notify .section-sub { margin: 14px auto 36px; }
.notify-form {
  display: flex; gap: 10px; max-width: 460px; margin: 0 auto;
}
.notify-form input {
  flex: 1; min-width: 0;
  background: var(--card); box-shadow: 0 0 0 1px var(--border); border: none; border-radius: var(--radius-lg);
  padding: 12px 16px; font-size: 0.98rem; color: var(--foreground); font-family: inherit;
}
.notify-form input::placeholder { color: var(--muted-foreground); }
.notify-form input:focus-visible { outline: 2px solid var(--premium-to); outline-offset: 1px; }
.notify-form .btn { flex-shrink: 0; }
.notify-status {
  max-width: 460px; margin: 18px auto 0; font-size: 0.92rem; font-weight: 500; padding: 10px 14px;
  border-radius: var(--radius-lg);
}
.notify-status.is-success { background: var(--good-bg); color: var(--good-text); }
.notify-status.is-error { background: var(--bad-bg); color: var(--bad-text); }
.notify-privacy { margin-top: 18px; font-size: 0.82rem; color: var(--muted-foreground); }
@media (max-width: 560px) {
  .notify-form { flex-direction: column; }
}

/* ==========================================================================
   CORNER RIBBON — "Launching soon"
   ========================================================================== */
.corner-ribbon {
  position: fixed; top: 0; right: 0; z-index: 300;
  width: 220px; height: 220px; overflow: hidden; pointer-events: none;
}
.corner-ribbon span {
  position: absolute; display: block;
  top: 44px; right: -58px;
  width: 300px; padding: 11px 0;
  background: linear-gradient(to right, var(--premium-from), var(--premium-to));
  color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; transform: rotate(45deg);
  box-shadow: 0 3px 12px rgba(37, 37, 37, 0.25);
}
@media (max-width: 640px) {
  .corner-ribbon { width: 160px; height: 160px; }
  .corner-ribbon span { top: 30px; right: -50px; width: 220px; padding: 8px 0; font-size: 11px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding: 96px 0; background: var(--muted); border-top: 1px solid var(--border); }
.faq h2 { font-size: clamp(1.85rem, 3.2vw, 2.5rem); margin-bottom: 32px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 20px 2px; text-align: left; font-size: 1rem; font-weight: 600;
}
.faq-caret { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted-foreground); transition: transform 0.2s ease; }
.faq-item.is-open .faq-caret { transform: rotate(180deg); color: var(--premium-to); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
}
.faq-a p { padding: 0 2px 20px; color: var(--muted-foreground); max-width: 68ch; }
.faq-item.is-open .faq-a { max-height: 240px; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta { padding: 112px 0; text-align: center; }
.final-cta h2 { font-size: clamp(1.9rem, 3.8vw, 2.6rem); margin-bottom: 10px; }
.final-cta p { color: var(--muted-foreground); font-size: 1.08rem; margin-bottom: 32px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding: 56px 0 28px; border-top: 1px solid var(--border); background: var(--muted); }
.footer-inner {
  display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 28px;
  padding-bottom: 40px; border-bottom: 1px solid var(--border);
}
.footer-brand p { color: var(--muted-foreground); font-size: 0.88rem; margin-top: 10px; }
.footer-col h4 {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted-foreground); margin-bottom: 12px; font-weight: 700;
}
.footer-col a { display: block; color: var(--muted-foreground); font-size: 0.9rem; padding: 5px 0; }
.footer-col a:hover { color: var(--foreground); }
.footer-copy { margin-top: 22px; font-size: 0.8rem; color: var(--muted-foreground); }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   COOKIE CONSENT BANNER
   z-index 400 - above the corner ribbon (300) and nav (100), since it must
   stay reachable/visible no matter what else is fixed-position on the page.
   ========================================================================== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.cookie-banner-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.cookie-banner-copy { flex: 1 1 360px; min-width: 0; }
.cookie-banner-title { font-weight: 700; margin-bottom: 4px; }
.cookie-banner-body { color: var(--muted-foreground); font-size: 0.92rem; max-width: 62ch; }
.cookie-banner-link {
  display: inline-block; margin-top: 6px; font-size: 0.86rem; font-weight: 600;
  color: var(--premium-to); text-decoration: underline;
}
/* Accept uses the solid .btn-primary treatment, Reject uses the outline
   "negative" treatment (.btn-outline-negative) - same size/padding (.btn +
   .btn-sm) so neither reads as visually smaller or less clickable than the
   other. Equal size/weight is the GDPR/ePrivacy requirement here, not
   identical fill color. */
.cookie-banner-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 0 0 auto;
}
.cookie-customize-link {
  font-size: 0.86rem; font-weight: 600; color: var(--muted-foreground); padding: 8px 4px;
}
.cookie-customize-link:hover { color: var(--foreground); }

.cookie-panel {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 20px;
  border-top: 1px solid var(--border);
}
.cookie-panel-intro { color: var(--muted-foreground); font-size: 0.88rem; margin: 16px 0; }
.cookie-category { padding: 12px 0; border-top: 1px solid var(--border); }
.cookie-category:first-of-type { border-top: none; }
.cookie-category-header {
  display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.94rem;
}
.cookie-category-header input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--premium-to); }
.cookie-category-desc { color: var(--muted-foreground); font-size: 0.86rem; margin: 4px 0 0 26px; }
.cookie-panel-actions { margin-top: 16px; }

.cookie-settings-link {
  position: fixed; left: 20px; bottom: 20px; z-index: 390;
  background: var(--card); box-shadow: 0 0 0 1px var(--card-ring), var(--shadow-sm);
  border-radius: var(--radius-lg); padding: 9px 14px;
  font-size: 0.82rem; font-weight: 600; color: var(--muted-foreground);
}
.cookie-settings-link:hover { color: var(--foreground); }

@media (max-width: 760px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   LEGAL PAGES — privacy policy / terms of service (CS + EN)
   Shared by privacy.html, privacy-cs.html, terms.html, terms-cs.html so the
   four pages don't each carry their own duplicated inline <style> block.
   ========================================================================== */
.legal { padding: 80px 0 120px; }
.legal .wrap { max-width: var(--container-narrow); }
.legal a.back { display: inline-block; margin-bottom: 20px; color: var(--premium-to); font-size: 0.92rem; font-weight: 600; }
.legal .lang-toggle { margin: 0 0 20px; font-size: 0.86rem; color: var(--muted-foreground); }
.legal .lang-toggle a { color: var(--premium-to); font-weight: 600; text-decoration: underline; }
.legal h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 8px; }
.legal .updated { color: var(--muted-foreground); font-size: 0.88rem; margin-bottom: 40px; }
.legal h2 { font-size: 1.15rem; margin: 40px 0 12px; }
.legal h2 .policy-version { font-weight: 400; color: var(--muted-foreground); font-size: 0.7em; }
.legal h3 { font-size: 1rem; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--muted-foreground); font-size: 0.98rem; margin-bottom: 12px; }
.legal ul { padding-left: 1.3em; list-style: disc; margin-bottom: 16px; }
.legal strong { color: var(--foreground); }
.legal code { font-family: var(--font-mono); font-size: 0.9em; background: var(--muted); padding: 1px 5px; border-radius: 4px; }
.legal hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 4px 0 20px; font-size: 0.9rem; }
.legal th, .legal td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal th { background: var(--muted); font-weight: 700; color: var(--foreground); }
.legal td { color: var(--muted-foreground); }
@media (max-width: 640px) {
  .legal table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}