/*
    Design-Tokens an die echte App angelehnt (Light als Basis, Dark per
    prefers-color-scheme). Bewusst dieselbe Palette und dieselbe Schrift wie in
    den Screenshots — eine Marketing-Seite, die anders aussieht als das Produkt
    darauf, wirkt wie ein Template mit fremden Bildern.
  */
  :root {
    --bg: #f5f5f7;
    --bg-sub: #eceef2;
    --card: #ffffff;
    --border: #d2d4dc;
    --border-light: #e2e3e9;
    --text: #0a0a0c;
    --text-sub: #2d2e36;
    --text-muted: #626572;
    --accent: #15803d;
    --accent-soft: #15803d16;
    --accent-border: #15803d40;
    --gold: #a67c3f;
    --gruen-bd: #15803d; --gruen-tx: #065f46; --gruen-bg: #b9e8c9;
    --orange-bd: #d97706; --orange-tx: #92400e; --orange-bg: #fcdea5;
    --rot-bd: #dc2626; --rot-tx: #991b1b; --rot-bg: #fac5c5;
    --shadow-sm: 0 1px 2px rgba(10,10,12,0.06), 0 3px 8px -2px rgba(10,10,12,0.08);
    --shadow-lg: 0 24px 52px -30px rgba(10,10,12,0.28);
    --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px;
    --font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

    /* Typskala: Quart (1.333) im Display, kleine Terz im Fließtext */
    --t-display: clamp(36px, 6.2vw, 76px);
    --t-h2: clamp(28px, 3.5vw, 40px);
    --t-h3: 21px;
    --t-lead: 19px;
    --t-body: 16px;
    --t-small: 14px;
    --t-micro: 12.5px;

    /* Das Fenster um Screenshots ist immer dunkel — die App ist es auch. */
    --shot-bg: #0a0a0c;
    --shot-line: #24252d;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0a0a0c;
      --bg-sub: #101012;
      --card: #141418;
      --border: #22232a;
      --border-light: #181920;
      --text: #fafafa;
      --text-sub: #9ca0ad;
      --text-muted: #9296a5;
      --accent: #16a34a;
      --accent-soft: #16a34a1f;
      --accent-border: #16a34a3a;
      --gold: #d4b27a;
      --gruen-bd: #16a34a; --gruen-tx: #4ade80; --gruen-bg: #0d2618;
      --orange-bd: #f59e0b; --orange-tx: #fbbf24; --orange-bg: #261e0d;
      --rot-bd: #ef4444; --rot-tx: #f87171; --rot-bg: #260d0d;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px -1px rgba(0,0,0,0.24);
      --shadow-lg: 0 16px 40px -22px rgba(0,0,0,0.62);
      --shot-line: #22232a;
    }
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
  [hidden] { display: none !important; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.006em;
  }
  img, video { max-width: 100%; display: block; }
  a { color: inherit; }
  ::selection { background: var(--accent); color: #fff; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* Zahlen laufen überall in gleicher Breite — Preise dürfen nicht springen. */
  .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

  .wrap { max-width: 1160px; margin: 0 auto; padding-inline: 28px; }

  /* ---- Header ---- */
  header { padding: 20px 0; border-bottom: 1px solid var(--border-light); }
  .header-row {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px;
    max-width: 1160px; margin: 0 auto; padding-inline: 28px;
  }
  .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -0.012em; }
  .brand-square { width: 13px; height: 13px; border-radius: 3px; background: var(--accent); flex-shrink: 0; }
  .brand-suffix { color: var(--text-muted); font-weight: 500; }
  .header-link {
    font-size: var(--t-small); font-weight: 500; color: var(--text-sub);
    text-decoration: none; cursor: pointer; background: none; border: none;
    font-family: var(--font); padding: 0;
  }
  .header-link:hover { color: var(--text); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 26px; border-radius: var(--r-sm); font-weight: 600; font-size: 15px;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    min-height: 48px; letter-spacing: -0.008em; font-family: var(--font); line-height: 1.4;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .btn-primary { background: #15803d; color: #fff; }
  .btn-primary:hover { background: #166534; }
  .btn-quiet { background: transparent; color: var(--text-sub); border-color: var(--border); }
  .btn-quiet:hover { color: var(--text); border-color: var(--text-muted); }

  /* ---- Hero ---- */
  .hero { padding-block: 92px 76px; }
  .hero-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: start; }
  .hero-copy { min-width: 0; }
  h1 {
    font-size: var(--t-display); line-height: 1.04; letter-spacing: -0.038em;
    margin: 0 0 38px; font-weight: 800; overflow-wrap: anywhere;
  }
  .tagline {
    font-size: var(--t-lead); color: var(--text-sub); line-height: 1.5;
    margin: 0 0 36px; max-width: 40ch;
  }
  .hero-note { max-width: 34ch; }
  .hero-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
  .hero-note {
    font-size: var(--t-micro); color: var(--text-muted);
    border-left: 2px solid var(--accent-border); padding-left: 11px; line-height: 1.45;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero > h1, .hero-copy > *, .hero .shot { animation: rise 0.62s cubic-bezier(0.22,0.61,0.36,1) both; }
    .hero > h1 { animation-delay: 0.02s; }
    .hero-copy > *:nth-child(1) { animation-delay: 0.12s; }
    .hero-copy > *:nth-child(2) { animation-delay: 0.18s; }
    .hero-copy > *:nth-child(3) { animation-delay: 0.24s; }
    .hero .shot { animation-delay: 0.16s; animation-duration: 0.72s; }
    @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  }

  /* ---- App-Fenster um Screenshots ----
     Die Screenshots sind Ausschnitte einer laufenden App. Ohne Rahmen liest
     sich der Anschnitt unten als Schlamperei, im Fenster als Fensterausschnitt.
     Der Rahmen ist in beiden Themes dunkel, weil die App dunkel ist. */
  .shot {
    margin: 0; border-radius: var(--r-lg); overflow: hidden;
    background: var(--shot-bg); border: 1px solid var(--shot-line);
    box-shadow: var(--shadow-lg);
  }
  /* Unten ausblenden statt hart abschneiden — der Ausschnitt endet mitten im Inhalt. */
  .shot-frame { position: relative; }
  .shot-frame::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 92px;
    background: linear-gradient(to bottom, rgba(10,10,12,0) 0%, var(--shot-bg) 92%);
    pointer-events: none;
  }
  .shot img, .shot video { width: 100%; height: auto; }

  /* ---- Preisleiter: das Kernargument als Diagramm ---- */
  .ladder-section {
    background: var(--bg-sub);
    border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
    padding: 72px 0;
  }
  .ladder-head { max-width: 640px; margin: 0 0 44px; }
  .ladder-head h2 { font-size: var(--t-h2); letter-spacing: -0.028em; margin: 0 0 14px; font-weight: 700; line-height: 1.08; }
  .ladder-head p { color: var(--text-muted); font-size: 17px; margin: 0; max-width: 46ch; }

  .ladder { max-width: 860px; }
  .ladder-scale {
    display: grid; grid-template-columns: 148px 1fr 118px; gap: 18px; align-items: end;
    font-size: 11px; color: var(--text-muted); margin-bottom: 10px;
  }
  .ladder-datum-label {
    position: relative; height: 100%;
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em; color: var(--text-sub);
  }
  .ladder-datum-label b { position: absolute; left: 20%; transform: translateX(-50%); white-space: nowrap; font-weight: 600; }

  .ladder-row {
    display: grid; grid-template-columns: 148px 1fr 118px; gap: 18px; align-items: center;
    padding: 11px 0;
  }
  .ladder-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
  .ladder-track {
    position: relative; height: 30px; border-radius: 3px;
    background: linear-gradient(var(--border-light), var(--border-light)) no-repeat;
    background-size: 100% 1px; background-position: 0 100%;
  }
  /* Die Referenz ist die Nulllinie, nicht der linke Rand. */
  .ladder-track::before {
    content: ""; position: absolute; left: 20%; top: -12px; bottom: -12px;
    width: 2px; background: var(--text); opacity: 0.7;
  }
  .ladder-bar {
    position: absolute; top: 4px; bottom: 4px; border-radius: 3px;
    left: var(--from); width: var(--len);
    transform-origin: var(--grow);
    transition: transform 0.85s cubic-bezier(0.22,0.61,0.36,1);
  }
  /* Ohne JS stehen die Balken sofort — die .js-Klasse setzt erst das Skript. */
  .ladder.js .ladder-bar { transform: scaleX(0); }
  .ladder.js.in .ladder-bar { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { .ladder-bar { transition: none; } }
  .ladder-row.gruen  .ladder-bar { background: var(--gruen-bd); }
  .ladder-row.orange .ladder-bar { background: var(--orange-bd); }
  .ladder-row.rot    .ladder-bar { background: var(--rot-bd); }
  /* Urteil steht neben der Zahl — die Leiter erklaert sich ohne Legende. */
  .ladder-out { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .ladder-out b {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  }
  .ladder-row.gruen  .ladder-out b { color: var(--gruen-tx); }
  .ladder-row.orange .ladder-out b { color: var(--orange-tx); }
  .ladder-row.rot    .ladder-out b { color: var(--rot-tx); }
  .ladder-verdict { font-size: var(--t-micro); color: var(--text-muted); line-height: 1.35; margin-top: 1px; }

  /* ---- Funktionen ---- */
  .pillars-section { padding-block: 68px 8px; }
  .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .pillar { padding: 0 24px; }
  .pillar:first-child { padding-left: 0; }
  .pillar:last-child { padding-right: 0; }
  .pillar:not(:first-child) { border-left: 1px solid var(--border-light); }
  .pillar h3 { font-size: 17px; margin: 0 0 8px; font-weight: 700; letter-spacing: -0.016em; }
  .pillar p { margin: 0 0 12px; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }
  .pillar .num {
    font-size: 11.5px; color: var(--text-sub); letter-spacing: 0.02em;
    display: block; padding-top: 10px; border-top: 1px solid var(--border-light);
  }

  /* ---- Section shared ---- */
  section { padding: 72px 0; }
  .section-head { max-width: 640px; margin: 0 0 42px; }
  .section-head h2 { font-size: var(--t-h2); letter-spacing: -0.028em; margin: 0 0 14px; font-weight: 700; line-height: 1.08; }
  .section-head p { color: var(--text-muted); font-size: 17px; margin: 0; max-width: 48ch; }

  /* ---- Tour ---- */
  .tour-item {
    display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 52px; align-items: center;
    padding: 56px 0; border-top: 1px solid var(--border-light);
  }
  .tour-item.reverse { grid-template-columns: 1.18fr 0.82fr; }
  .tour-item.reverse .tour-copy { order: 2; }
  .tour-item.reverse .mix-preview { order: 1; }
  .tour-copy h3 { font-size: 24px; margin: 0 0 14px; letter-spacing: -0.02em; font-weight: 700; line-height: 1.15; }
  .tour-copy p { color: var(--text-muted); font-size: 15.5px; line-height: 1.62; margin: 0; max-width: 38ch; }

  /* ---- Kontakt ---- */
  .contact-section {
    background: var(--bg-sub);
    border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
  }
  .contact-grid {
    display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start;
  }
  .contact-grid .section-head { margin-bottom: 0; padding-top: 6px; }
  .contact-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 36px; box-shadow: var(--shadow-sm);
  }
  .field { margin-bottom: 16px; }
  .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--text-sub); }
  .field input, .field textarea {
    width: 100%; padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--border);
    font-family: var(--font); font-size: 16px; background: var(--bg); color: var(--text);
    min-height: 48px;
  }
  .field textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
  .field input:focus, .field textarea:focus { outline: 2px solid var(--accent-border); border-color: var(--accent); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-submit { width: 100%; margin-top: 8px; }
  .form-fineprint { font-size: var(--t-micro); color: var(--text-muted); margin-top: 15px; text-align: center; line-height: 1.5; }

  /* ---- Footer ---- */
  footer { padding: 46px 0 62px; }
  .footer-row {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 28px;
    flex-wrap: wrap; font-size: 13px; color: var(--text-muted);
  }
  .footer-row .brand { margin-bottom: 9px; }
  .footer-disclaimer { max-width: 46ch; line-height: 1.55; }
  .footer-links { display: flex; flex-direction: column; gap: 5px; text-align: right; }

  /* ---- Responsiv ---- */
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .hero { padding-block: 56px 60px; }
    .hero-copy { max-width: none; }
    .pillars { grid-template-columns: 1fr 1fr; row-gap: 30px; column-gap: 34px; }
    .pillar { padding: 0 !important; border-left: none !important; }
    .tour-item, .tour-item.reverse { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
    .tour-item .tour-copy, .tour-item.reverse .tour-copy { order: 1; }
    .tour-item .shot, .tour-item.reverse .mix-preview { order: 2; }
    .tour-copy p { max-width: none; }
    .contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .contact-grid .section-head { max-width: none; }
    section { padding: 52px 0; }
    .ladder-section { padding: 52px 0; }
  }
  @media (max-width: 760px) {
    .pillars { grid-template-columns: 1fr; }
    .ladder-scale, .ladder-row { grid-template-columns: 104px 1fr 96px; gap: 12px; }
    .ladder-name { font-size: 13.5px; }
    .ladder-out b { font-size: 14px; }
    .ladder-legend { gap: 14px 20px; }
  }
  @media (max-width: 560px) {
    .header-row, .wrap { padding-inline: 18px; }
    h1 { hyphens: auto; -webkit-hyphens: auto; }
    .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
    .hero-note { border-left: none; padding-left: 0; }
    .form-row { grid-template-columns: 1fr; }
    .contact-card { padding: 24px; }
    .footer-row { flex-direction: column; }
    .footer-links { text-align: left; }
    .ladder-row { grid-template-columns: 1fr; gap: 6px; }
    .ladder-scale { display: none; }
    .ladder-row { padding: 14px 0; border-bottom: 1px solid var(--border-light); }
    .ladder-out { align-items: flex-start; text-align: left; }
  }

  /* Navigation und lesbare Produktdarstellung. */
  .skip-link { position: absolute; top: 8px; left: 16px; z-index: 20; padding: 10px 18px; background: var(--card); border: 2px solid var(--accent); border-radius: var(--r-sm); transform: translateY(-180%); }
  .skip-link:focus { transform: none; }
  .header-row .brand { text-decoration: none; min-height: 44px; }
  .header-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
  .header-nav .header-link { display: inline-flex; align-items: center; min-height: 44px; }
  .eyebrow { margin: 0 0 16px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
  .hero { padding-top: 68px; }
  .hero h1 span { color: var(--accent); }
  .hero-ctas { gap: 12px; }
  .btn { gap: 10px; }
  .hero-product { margin: 0; min-width: 0; }
  .hero-product figcaption { margin-top: 12px; color: var(--text-muted); font-size: 12.5px; }
  .hero-note { margin-bottom: 0; max-width: 42ch; }
  .ladder-reference { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 26px; font-size: 14px; color: var(--text-sub); }
  .reference-mark { width: 2px; height: 18px; background: var(--text); margin-right: 3px; }
  .ladder-name small { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 3px; }
  .section-note { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 20px 0 0; }
  .section-note a { text-underline-offset: 3px; }
  .ladder .section-note { max-width: 78ch; }
  .section-head .eyebrow, .ladder-head .eyebrow { font-size: 12px; color: var(--accent); margin-bottom: 16px; }
  .pillar .num { font-family: var(--font); }
  .tour-item > * { min-width: 0; }
  .screenshot-link { display: block; color: #d5d8e0; text-decoration: none; }
  .screenshot-link:focus-visible { outline-offset: -4px; }
  .screenshot-hint { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; font-size: 13px; min-height: 44px; border-top: 1px solid var(--shot-line); }
  .screenshot-link:hover .screenshot-hint { color: #fff; }
  .text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-size: 14px; font-weight: 600; margin-top: 20px; min-height: 44px; text-underline-offset: 4px; }
  .mix-preview { margin: 0; padding: 28px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
  .mix-preview figcaption .eyebrow { display: block; margin-bottom: 8px; }
  .mix-preview figcaption > strong { font-size: 20px; letter-spacing: -0.02em; }
  .mix-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
  .mix-totals > div { padding: 14px; background: var(--bg-sub); border: 1px solid var(--border-light); border-radius: var(--r-sm); }
  .mix-totals dt { font-size: 12px; color: var(--text-sub); }
  .mix-totals dd { font-family: var(--mono); font-size: clamp(18px, 2vw, 23px); font-weight: 600; margin: 8px 0 0; white-space: nowrap; }
  .mix-totals .mix-optimal { background: var(--accent-soft); border-color: var(--accent-border); }
  .mix-optimal dd { color: var(--gruen-tx); }
  .mix-positions { padding: 0; margin: 0; list-style: none; }
  .mix-positions li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; }
  .mix-positions small { color: var(--text-muted); display: block; font-size: 12px; }
  .mix-positions strong { white-space: nowrap; font-size: 13px; }
  .mix-savings { color: var(--gruen-tx); padding-top: 20px; margin: 0; font-size: 15px; }
  .mix-savings > strong { font-family: var(--mono); font-size: 23px; }
  .mix-savings > span { white-space: nowrap; }
  .demo-section { background: var(--bg-sub); border-block: 1px solid var(--border-light); }
  .demo-section .section-head { margin-bottom: 24px; }
  .demo-disclaimer { max-width: 80ch; color: var(--text-sub); font-size: 14px; margin-bottom: 28px; }
  .demo-static { padding: 24px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); }
  .table-scroll { max-width: 100%; overflow-x: auto; }
  .comparison-table { width: 100%; border-collapse: collapse; white-space: nowrap; text-align: right; font-size: 14px; }
  .comparison-table caption { text-align: left; font-size: 13px; color: var(--text-muted); white-space: normal; padding-bottom: 16px; }
  .comparison-table th, .comparison-table td { padding: 12px; border-bottom: 1px solid var(--border-light); }
  .comparison-table th:first-child { text-align: left; }
  .comparison-table td { font-family: var(--mono); }
  .demo-static > p { font-size: 14px; }
  .demo-contact { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; }
  .demo-contact p { margin: 0; font-size: 15px; color: var(--text-sub); }
  .faq-list { max-width: 860px; }
  .faq-list details { border-top: 1px solid var(--border); }
  .faq-list details:last-child { border-bottom: 1px solid var(--border); }
  .faq-list summary { cursor: pointer; padding: 20px 4px; font-weight: 600; line-height: 1.5; }
  .faq-list details p { color: var(--text-sub); margin: 0 4px 22px; max-width: 75ch; font-size: 15px; }
  .contact-card h3 { margin: 0 0 12px; font-size: 21px; }
  .contact-card > p { color: var(--text-sub); }
  .contact-email { display: inline-block; color: var(--accent); font-size: clamp(17px, 3vw, 22px); font-weight: 600; text-underline-offset: 5px; overflow-wrap: anywhere; }
  .contact-card .section-note { color: var(--text-muted); }
  .form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .btn:disabled { cursor: wait; opacity: 0.65; }
  .form-status { font-size: 14px; color: var(--gruen-tx) !important; }
  .form-status:empty { margin: 0; }
  .form-error { font-size: 14px; color: var(--rot-tx) !important; background: var(--rot-bg); padding: 12px; border-radius: var(--r-sm); }
  .footer-disclaimer { margin: 8px 0 0; }
  .footer-links a { text-underline-offset: 3px; min-height: 36px; }
  .footer-links a { color: var(--text-sub); font-size: 14px; }
  .privacy-check { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0; font-size: 14px; color: var(--text-sub); }
  .privacy-check input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
  .privacy-check a, .contact-alternative a { text-underline-offset: 3px; }
  .form-intro, .contact-alternative { font-size: 14px; color: var(--text-sub); }
  .form-intro { margin: 0 0 22px; }
  .contact-alternative { margin: 18px 0 0; overflow-wrap: anywhere; }
  .legal-page { max-width: 820px; padding-block: 48px 72px; }
  .legal-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 28px; font-size: 14px; text-underline-offset: 4px; }
  .legal-page h1 { font-size: clamp(32px, 6vw, 52px); margin-bottom: 20px; }
  .legal-page h2 { font-size: 23px; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 14px; }
  .legal-page section { padding: 30px 0 0; margin-top: 30px; border-top: 1px solid var(--border); }
  .legal-page p, .legal-page li { color: var(--text-sub); }
  .legal-page p { margin: 0 0 16px; }
  .legal-page address { font-style: normal; color: var(--text-sub); }
  .legal-page a { text-underline-offset: 3px; overflow-wrap: anywhere; }
  .legal-page li + li { margin-top: 8px; }
  .image-dialog { width: min(1380px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); color: var(--text); overflow: auto; }
  .image-dialog::backdrop { background: rgba(0, 0, 0, 0.8); }
  .image-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
  .image-dialog h2 { font-size: 18px; margin: 0; }
  .image-dialog-scroll { max-width: 100%; overflow-x: auto; border-radius: var(--r-sm); }
  .image-dialog img { width: 1278px; max-width: none; height: auto; }
  .image-dialog > p { font-size: 13px; color: var(--text-muted); margin: 12px 0 0; }
  body.image-open { overflow: hidden; }
  @media (max-width: 560px) {
    .hero { padding-top: 40px; }
    .hero h1 { font-size: clamp(30px, 9.6vw, 36px); hyphens: none; -webkit-hyphens: none; text-wrap: balance; }
    .eyebrow { font-size: 11px; }
    .header-nav { gap: 4px 22px; }
    .header-row { gap: 0 24px; }
    .header-nav { width: 100%; justify-content: space-between; }
    .mix-preview { padding: 20px; }
    .mix-totals { grid-template-columns: 1fr; }
    .demo-contact { align-items: stretch; flex-direction: column; }
    .demo-static { padding: 16px; }
    .image-dialog { padding: 12px; width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  }