@charset "UTF-8";
/* ---- assets/fonts/fonts.css ---- */
/* Self-hosted Google Fonts (SIL Open Font License 1.1, see OFL.txt). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-normal-200-800-cyrillic-ext.woff2?v=2591db81) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-normal-200-800-vietnamese.woff2?v=196acbb6) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-normal-200-800-latin-ext.woff2?v=5ffe46ee) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-normal-200-800-latin.woff2?v=52d04440) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- assets/css/tokens.css ---- */
/*
  BeatVale website design tokens as CSS custom properties.
  Mirrors design/design-tokens.json; change both together. Pages use only the semantic names
  (--color-background, --color-accent, ...), never raw hex values, so a design change happens here.
  The light theme is the default; the dark theme follows the system and can be forced with
  data-theme="dark" or data-theme="light" on <html>.
*/

:root {
  /* Brand */
  --brand-berry-50: #FBE8F0;
  --brand-berry-400: #FF4D94;
  --brand-berry-500: #FB1F79;
  --brand-berry-600: #D7176B;
  --brand-berry-700: #C0145E;
  --brand-lime-300: #C4E82E;
  --brand-logo-ink: #1B232A;
  --brand-logo-ink-on-dark: #FFFFFF;
  --brand-logo-groove: #D5166A;
  --brand-logo-flag-light: #FCECCF;
  --brand-logo-flag-dark: #F9DFB8;
  --brand-logo-retro-disc: #D54A2B;
  --brand-logo-retro-groove: #BB3C21;
  --brand-logo-retro-label: #E8B23E;
  --brand-logo-retro-flag-light: #256D67;
  --brand-logo-retro-flag-dark: #24615C;
  --brand-violet-900: #1D0C33;
  --brand-violet-800: #2A0F42;
  --brand-violet-700: #3D154F;
  --brand-violet-600: #6B236D;
  --brand-retro-terracotta: #D54A2B;
  --brand-retro-terracotta-dark: #BD3C20;
  --brand-retro-olive: #9D8850;
  --brand-retro-cream: #F6E7CE;
  --brand-retro-cream-light: #FDF6E8;

  /* Neutral */
  --neutral-0: #FFFFFF;
  --neutral-25: #FBFBFD;
  --neutral-50: #F5F5F7;
  --neutral-100: #E8E8ED;
  --neutral-300: #D2D2D7;
  --neutral-400: #A1A1A6;
  --neutral-500: #86868B;
  --neutral-600: #6E6E73;
  --neutral-700: #424245;
  --neutral-900: #1D1D1F;

  /* Semantic, light theme */
  --color-background: var(--neutral-25);
  --color-surface: var(--neutral-50);
  --color-border: var(--neutral-300);
  --color-text: var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-accent: var(--brand-berry-600);
  --color-accent-pressed: var(--brand-berry-700);
  --color-on-accent: var(--neutral-0);
  --color-accent-soft: var(--brand-berry-50);
  --color-on-accent-soft: var(--brand-berry-700);
  --color-highlight: var(--brand-lime-300);
  --color-on-highlight: var(--neutral-900);
  --color-text-nav: var(--neutral-700);
  --color-on-text: var(--neutral-0);
  --color-separator: rgba(0, 0, 0, 0.08);
  --color-fill: var(--neutral-100);
  --color-fill-subtle: rgba(0, 0, 0, 0.06);
  --color-fill-subtle-hover: rgba(0, 0, 0, 0.10);
  --color-glass: rgba(251, 251, 253, 0.8);
  --color-glass-strong: rgba(251, 251, 253, 0.92);
  --color-glass-light: rgba(255, 255, 255, 0.72);
  --color-glow: rgba(178, 74, 196, 0.08);
  --color-device-screen: #000000;
  --color-field: var(--neutral-0);

  /* Typography */
  --font-sans: "Plus Jakarta Sans", sans-serif;
  --font-sans-ja: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
  --font-sans-ko: "Plus Jakarta Sans", "Noto Sans KR", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-display: clamp(2.5rem, 6vw, 4rem);
  --font-size-h1: clamp(2rem, 4.5vw, 2.75rem);
  --font-size-h2: clamp(1.5rem, 3vw, 2rem);
  --font-size-h3: 1.25rem;
  --font-size-body-large: 1.1875rem;
  --font-size-body: 1.0625rem;
  --font-size-small: 0.875rem;
  --font-size-caption: 0.75rem;
  --line-height-tight: 1.1;
  --line-height-heading: 1.2;
  --line-height-body: 1.55;
  --letter-spacing-display: -0.02em;
  --letter-spacing-heading: -0.01em;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-gutter: 1rem;
  --content-width: 72rem;

  /* Shape and depth */
  --radius-small: 8px;
  --radius-tile: 12px;
  --radius-card: 20px;
  --radius-large: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 24px rgba(29, 12, 51, 0.12);
  --shadow-lifted: 0 20px 48px rgba(29, 12, 51, 0.20);
  --shadow-cover: 0 10px 24px rgba(29, 12, 51, 0.12), 0 1px 3px rgba(29, 12, 51, 0.08);
  --shadow-device: 10px 16px 24px rgba(29, 12, 51, 0.18), 36px 48px 96px rgba(29, 12, 51, 0.32);

  /* Motion */
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: var(--brand-violet-900);
    --color-surface: var(--brand-violet-800);
    --color-border: var(--brand-violet-700);
    --color-text: var(--neutral-50);
    --color-text-secondary: var(--neutral-400);
    --color-accent: var(--brand-berry-400);
    --color-accent-pressed: var(--brand-berry-500);
    --color-on-accent: var(--brand-violet-900);
    --color-accent-soft: rgba(255, 77, 148, 0.16);
    --color-on-accent-soft: var(--brand-berry-400);
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lifted: 0 20px 48px rgba(0, 0, 0, 0.45);
    --shadow-device: 10px 16px 24px rgba(0, 0, 0, 0.40), 36px 48px 96px rgba(0, 0, 0, 0.55);
    --color-text-nav: var(--neutral-100);
    --color-on-text: var(--brand-violet-900);
    --color-separator: rgba(255, 255, 255, 0.12);
    --color-fill: var(--brand-violet-700);
    --color-fill-subtle: rgba(255, 255, 255, 0.10);
    --color-fill-subtle-hover: rgba(255, 255, 255, 0.16);
    --color-glass: rgba(29, 12, 51, 0.8);
    --color-glass-strong: rgba(29, 12, 51, 0.92);
    --color-glass-light: rgba(42, 15, 66, 0.72);
    --color-glow: rgba(255, 77, 148, 0.10);
    --color-field: var(--brand-violet-800);
  }
}

:root[data-theme="dark"] {
  --color-background: var(--brand-violet-900);
  --color-surface: var(--brand-violet-800);
  --color-border: var(--brand-violet-700);
  --color-text: var(--neutral-50);
  --color-text-secondary: var(--neutral-400);
  --color-accent: var(--brand-berry-400);
  --color-accent-pressed: var(--brand-berry-500);
  --color-on-accent: var(--brand-violet-900);
  --color-accent-soft: rgba(255, 77, 148, 0.16);
  --color-on-accent-soft: var(--brand-berry-400);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lifted: 0 20px 48px rgba(0, 0, 0, 0.45);
  --shadow-device: 10px 16px 24px rgba(0, 0, 0, 0.40), 36px 48px 96px rgba(0, 0, 0, 0.55);
  --color-text-nav: var(--neutral-100);
  --color-on-text: var(--brand-violet-900);
  --color-separator: rgba(255, 255, 255, 0.12);
  --color-fill: var(--brand-violet-700);
  --color-fill-subtle: rgba(255, 255, 255, 0.10);
  --color-fill-subtle-hover: rgba(255, 255, 255, 0.16);
  --color-glass: rgba(29, 12, 51, 0.8);
  --color-glass-strong: rgba(29, 12, 51, 0.92);
  --color-glass-light: rgba(42, 15, 66, 0.72);
  --color-glow: rgba(255, 77, 148, 0.10);
  --color-field: var(--brand-violet-800);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-normal: 0ms;
  }
}

/* ---- assets/css/base.css ---- */
/*
  beatVale website: base styles, site header and site footer.
  Load order: fonts.css, tokens.css, base.css, components.css. Only semantic variables from tokens.css, no raw colours.
  Logical properties (inline/block) so a right-to-left language needs no rebuild.
*/

:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans); /* no system fonts: the page looks the same on every device */
  font-size: 17px;
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}
:lang(ja) { font-family: var(--font-sans-ja); line-break: strict; }
:lang(ko) { font-family: var(--font-sans-ko); word-break: keep-all; }
:is(:lang(ja), :lang(ko)) :is(h1, h2, h3) { line-height: 1.2; letter-spacing: 0; }

img { max-inline-size: 100%; }
strong { font-weight: var(--font-weight-semibold); color: var(--color-text); }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-pressed); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }  /* no single word alone in the last line */

.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-inline-start: 16px; inset-block-start: -100px; z-index: 30;
  padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--color-text); color: var(--color-on-text); font-size: 15px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { inset-block-start: 12px; color: var(--color-on-text); }

.eyebrow { margin: 0 0 12px; font-size: 17px; line-height: 1.2; font-weight: 600; color: var(--color-text-secondary); }

/* ---- site-header: transparent at the top, frosted once the page scrolls ---------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 20; block-size: 64px;
  border-block-end: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.site-header.scrolled {
  background: var(--color-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-block-end-color: var(--color-separator);
}
.site-header__in {
  max-inline-size: 1440px; block-size: 100%; margin-inline: auto; padding-inline: var(--page-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
:root { --page-pad: clamp(24px, 4vw, 64px); }  /* 24 px on phones: logo, text and footer share one edge */
/* The logo is a fixed file (assets/brand/beatVale-logosign.svg), never live text. */
.brand { display: flex; align-items: center; flex: none; }
.brand img { display: block; inline-size: auto; block-size: 36px; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.nav-link { font-size: 14px; line-height: 1; color: var(--color-text-nav); text-decoration: none; }
.nav-link:hover, .nav-link[aria-current] { color: var(--color-text); }
.language-link {
  display: inline-flex; align-items: center; block-size: 32px; padding-inline: 12px; border-radius: var(--radius-pill);
  background: var(--color-fill-subtle); font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.language-link:hover { background: var(--color-fill-subtle-hover); }
/* The language menu: the pill opens a small list of the languages, each in its own name (owner, 09.10.2026: the
   choice must not wait at the end of the page). A <details> element, so it opens and closes without JavaScript;
   site.js adds closing by a tap elsewhere, Escape and scrolling. The footer list stays. */
.language-menu { position: relative; }
.language-menu > summary { list-style: none; cursor: pointer; gap: 6px; user-select: none; -webkit-user-select: none; }
.language-menu > summary::-webkit-details-marker { display: none; }
.language-menu > summary::after {
  content: ""; inline-size: 5px; block-size: 5px; margin-block-start: -3px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s ease;
}
.language-menu[open] > summary { background: var(--color-fill-subtle-hover); color: var(--color-text); }
.language-menu[open] > summary::after { margin-block-start: 3px; transform: rotate(-135deg); }
.language-menu__list {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 1;
  min-inline-size: 208px; margin: 0; padding: 6px; list-style: none;
  background: var(--color-field); border-radius: 14px; box-shadow: var(--shadow-lifted), inset 0 0 0 1px var(--color-border);
  transform-origin: top right; animation: menu-in .18s var(--motion-easing);
}
.language-menu__list a {
  display: flex; align-items: center; gap: 12px; block-size: 40px; padding-inline: 12px; border-radius: 8px;
  font-size: 15px; color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.language-menu__list a:hover, .language-menu__list a:focus-visible { background: var(--color-fill-subtle); }
.language-menu__list a[aria-current] { font-weight: 600; }
/* The current language gets a tick, drawn in CSS (the text font has no check mark glyph) */
.language-menu__list a[aria-current]::after {
  content: ""; inline-size: 5px; block-size: 10px; margin-inline-start: auto; margin-block-start: -3px;
  border: solid var(--color-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .language-menu__list { animation: none; } .language-menu > summary::after { transition: none; } }
/* The only button in the header: the beta test, shown while sign-up is open (config beta.open). */
.header-cta {
  display: inline-flex; align-items: center; block-size: 32px; padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-on-accent); font-size: 13px; line-height: 1; font-weight: var(--font-weight-medium); text-decoration: none;
  white-space: nowrap; flex: none;
}
.header-cta:hover { background: var(--color-accent-pressed); color: var(--color-on-accent); }

/* ---- site-footer ------------------------------------------------------------------------------------------------ */

.site-footer { margin-block-start: 112px; border-block-start: 1px solid var(--color-separator); }
.site-footer__in {
  max-inline-size: 1440px; margin-inline: auto; padding: 24px var(--page-pad) 48px;
  font-size: 12px; line-height: 1.5; color: var(--color-text-secondary);
}
.footer-nav, .language-switcher { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-block-end: 12px; }
.site-footer a { color: var(--color-text-secondary); text-decoration: none; padding-block: 4px; }
.site-footer a:hover { color: var(--color-text); text-decoration: underline; }
.footer-nav a { color: var(--color-text-nav); font-size: 14px; }
.language-switcher a[aria-current] { color: var(--color-text); font-weight: 600; }
.site-footer p { margin: 0 0 4px; }

@media (max-width: 479px) {
  /* Phones: logo, language and the beta button fit; Support stays in the footer. */
  .site-nav:has(.header-cta) .nav-link--support { display: none; }
}
@media (max-width: 379px) {
  /* Very narrow phones: the language list stays in the footer. */
  .site-nav:has(.header-cta) .language-menu { display: none; }
}

@media (max-width: 1023px) {
  .nav-link--wide { display: none; }
  .site-nav { gap: 16px; }
  .site-header.scrolled { background: var(--color-glass-strong); }
}

@media (pointer: coarse) {
  /* Larger hit areas without changing the look */
  .nav-link, .site-footer a { position: relative; }
  .nav-link::before { content: ""; position: absolute; inset: -12px -8px; }
  .site-footer a::before { content: ""; position: absolute; inset: -10px -6px; }
  .header-cta { position: relative; }
  .header-cta::before { content: ""; position: absolute; inset: -8px -4px; }
}

/* ---- assets/css/components.css ---- */
/*
  beatVale website: components (names from PLAN.md, section 4). Only semantic variables from tokens.css.
  The start page hero is the approved design "Zufluss", variant 4: covers flow toward the phone, and on wide screens
  the stage stays pinned while four stations tell the features (assets/js/flow.js). Without JavaScript, and on
  phones, the same story is a column of sections (.story).
*/

:root {
  /* The phone grows with the window width and height (iPad upright), but never reaches the station bar:
     its height (width x 2.044) stays below the window height minus header, bar and air (188 px). */
  --phone-w: clamp(220px, min(max(21vw, 27svh), calc((100svh - 188px) / 2.044)), 312px);
  --stage-bottom: 92px;  /* room for the station bar on wide screens */
  --gutter: clamp(48px, 5.3vw, 80px);
  --ios-easing: cubic-bezier(.32, .72, 0, 1);
  /* Section headings on phones and tablets, the same for the story and every section below it: 32 px on an iPhone */
  --mobile-h2: clamp(28px, 8.15vw, 40px);
}

/* ---- hero journey ------------------------------------------------------------------------------------------------- */

.journey { position: relative; }
.stage {
  position: relative; min-block-size: 100svh; overflow: clip;
  background: radial-gradient(560px 420px at 50% 53%, var(--color-glow), transparent), var(--color-background);
}
.stage-layout {
  position: relative; z-index: 3; block-size: 100%; min-block-size: inherit;
  max-inline-size: 1440px; margin-inline: auto; padding: 64px var(--page-pad) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--phone-w) minmax(0, 1fr); column-gap: var(--gutter); align-items: center;
}
.stage-col { display: grid; align-items: center; block-size: 100%; container-type: inline-size; }
.stage-col > .panel { grid-area: 1 / 1; }
.stage-col--phone { display: flex; align-items: center; justify-content: center; container-type: normal; }
.stage-col--side { justify-items: start; }

.panel {
  max-inline-size: 440px; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .5s var(--motion-easing), transform .5s var(--motion-easing);
}
.panel.on { opacity: 1; transform: none; pointer-events: auto; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }
.panel--hero.on { animation: enter .6s var(--motion-easing) backwards; }

/* The three lines of the headline stay lines. Sizes are those of the approved variant 4 (70 px on a MacBook, 39 px on
   an iPhone); only where a language's longest line would not fit does the size shrink. As in variant 4, that line may
   reach 40 px into the gutter beside the phone. --hero-em is the longest line in em, measured at 100 px:
   de "Auch im Auto." 6.56, en "No subscription." 7.80. A new language needs its own value; the default fits 8 em. */
.hero-title {
  --hero-em: 8;
  margin: 0 0 28px; font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: -.015em;
  font-size: min(clamp(40px, calc(5.9vw - 14px), 70px), calc((100cqi + 40px) / var(--hero-em)));
}
.hero-title:lang(de) { --hero-em: 6.56; }
.hero-title:lang(en) { --hero-em: 7.80; }
.hero-title:lang(fr) { --hero-em: 8.88; }
.hero-title:lang(it) { --hero-em: 10.13; }
.hero-title:lang(es) { --hero-em: 7.44; }
.hero-title:lang(pt-BR) { --hero-em: 8.59; }
.hero-title:lang(pt-PT) { --hero-em: 8.52; }
/* Each statement stays one line. Safe: the size above never lets a line exceed the column by more than 40 px. */
.hero-title > span { display: block; white-space: nowrap; }
.hero-title > span:last-child { color: var(--color-accent); }
.lead { margin: 0 0 32px; max-inline-size: 400px; font-size: 21px; line-height: 1.38; color: var(--color-text-secondary); }
.price-note { margin: 16px 0 0; max-inline-size: 400px; font-size: 14px; line-height: 1.43; color: var(--color-text-secondary); text-wrap: balance; }
.panel h2 { margin: 0 0 16px; font-size: clamp(30px, 11.4cqi, 48px); line-height: 1.08; font-weight: var(--font-weight-semibold); letter-spacing: -.005em; }
.panel--hero .eyebrow { margin-inline-end: -40px; }
.panel:not(.panel--hero) > p:not(.eyebrow) { margin: 0; max-inline-size: 400px; font-size: 19px; line-height: 1.42; color: var(--color-text-secondary); }

/* Before launch a status label instead of Apple's badge (Apple: no badge without a store link). Berry, but quiet:
   it is not a button, there is nothing to tap yet. */
.soon {
  display: inline-flex; align-items: center; min-block-size: 44px; margin: 0; padding: 8px 20px; border-radius: var(--radius-pill);
  background: var(--color-accent-soft); color: var(--color-on-accent-soft); font-size: 19px; line-height: 1.2; font-weight: var(--font-weight-semibold);
}
.app-store-badge { display: inline-block; }
.app-store-badge img { display: block; block-size: 48px; inline-size: auto; }
.beta-link { display: inline-block; margin-block-start: 14px; font-size: 15px; line-height: normal; font-weight: var(--font-weight-semibold); color: var(--color-accent); text-decoration: none; }
.beta-link:hover { text-decoration: underline; }

/* ---- stations: show that more follows, where you are, and jump there (wide screens with JavaScript) -------------- */
/* Clearly a navigation (owner, 07.10.2026: "Navigations-Element gut lesbar"): white pill with an outline and a soft
   shadow, 15 px text in the navigation colour, the current station filled. */

.stations {
  position: absolute; inset-inline-start: 50%; inset-block-end: 24px; z-index: 6; transform: translateX(-50%);
  display: none; gap: 4px; padding: 6px; border-radius: var(--radius-pill);
  background: var(--color-field); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--color-border);
}
.stations a {
  display: inline-flex; align-items: center; block-size: 40px; padding: 0 20px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: var(--font-weight-medium); color: var(--color-text-nav); text-decoration: none; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}
.stations a:hover { background: var(--color-fill-subtle); color: var(--color-text); }
.stations a.on { background: var(--color-text); color: var(--color-on-text); }

/* ---- device-frame: Apple's bezel, unchanged, over the real app screens -------------------------------------------- */

.device-frame { position: relative; inline-size: var(--phone-w); aspect-ratio: 1350 / 2760; }
/* The phone of the hero lies a little above the page and the covers slide underneath it (owner, 08.10.2026): seen from
   above, so its soft shadow falls onto the page and the passing covers, not onto a floor below it, which the station
   bar would cover. Apple's bezel image itself stays untouched. */
.device-float { position: relative; }
/* The shadow sits on a box shaped like the phone's body in Apple's image (edges 1.8 % in, corners 17 % / 8.3 %), not on
   a filter: Safari cuts a drop-shadow filter off hard at the element's box. */
.device-float::before {
  content: ''; position: absolute; z-index: -1; inset: 0.8% 2% 0.8% 1.8%; border-radius: 17% / 8.3%;
  box-shadow: var(--shadow-device); pointer-events: none;
}
.device-screen {
  position: absolute; inset-inline-start: 5.333%; inset-block-start: 2.5%; inline-size: 89.333%; block-size: 95%;
  background: var(--color-device-screen); overflow: hidden; border-radius: 12% / 5.6%;
}
.scr { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; visibility: hidden; z-index: 0; }
.scr.on { visibility: visible; z-index: 2; }
.scr.leaving { visibility: visible; z-index: 1; }
.scr.clip { clip-path: inset(6.1% 0 0 0); }
.scr.in-push { animation: in-push .62s var(--ios-easing) both; }
.scr.out-push { animation: out-push .62s var(--ios-easing) both; }
.scr.in-pop { animation: in-pop .62s var(--ios-easing) both; }
.scr.out-pop { animation: out-pop .62s var(--ios-easing) both; z-index: 3; }
.scr.in-sheet { animation: in-sheet .62s var(--ios-easing) both; }
.scr.out-sheet { animation: out-sheet .62s var(--ios-easing) both; }
.scr.in-unsheet { animation: in-unsheet .62s var(--ios-easing) both; }
.scr.out-unsheet { animation: out-unsheet .62s var(--ios-easing) both; z-index: 3; }
.scr.in-fade { animation: in-fade .5s ease both; }
@keyframes in-push { from { transform: translateX(100%); } to { transform: none; } }
@keyframes out-push { to { transform: translateX(-30%); filter: brightness(.7); } }
@keyframes in-pop { from { transform: translateX(-30%); filter: brightness(.7); } to { transform: none; filter: none; } }
@keyframes out-pop { to { transform: translateX(100%); } }
@keyframes in-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes out-sheet { to { filter: brightness(.6); } }
@keyframes in-unsheet { from { filter: brightness(.6); } to { filter: none; } }
@keyframes out-unsheet { to { transform: translateY(100%); } }
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }
.status-bar {
  position: absolute; inset: 0 0 auto 0; block-size: 6.1%; z-index: 4; opacity: 0; pointer-events: none;
  background: url(../img/screens/status-bar.webp?v=6008cef1) top center / 100% 100% no-repeat;
}
.status-bar.show { opacity: 1; }
.bezel { position: absolute; inset: 0; z-index: 5; inline-size: 100%; block-size: 100%; pointer-events: none; }

/* ---- covers flowing flat toward the phone: two rows, one size, one speed; they run behind it and vanish there ------ */

.flow {
  --tile: clamp(112px, 10vw, 144px);
  --edge: calc(50% + var(--phone-w) / 2);
  position: absolute; inset: 64px 0 0 0; z-index: 2; pointer-events: none;
  /* The covers slide behind the phone and vanish there, as if they flowed into the app (owner, 08.10.2026: the white
     fade beside the phone looked dated). The clip cuts them off at the phone's centre line, which the phone hides, so
     none comes out on its other side. A clip, not a mask: a mask is drawn again for every frame of the animation. */
  clip-path: inset(0 0 0 50%);
}
.flow-row { position: absolute; left: calc(var(--edge) + 24px); display: flex; gap: 24px; inline-size: max-content; animation: flow 70s linear infinite; }
.flow-row--1 { inset-block-start: calc(50% - 12px - var(--tile)); }
.flow-row--2 { inset-block-start: calc(50% + 12px); margin-inline-start: calc((var(--tile) + 24px) / -2); }
@keyframes flow { to { transform: translate3d(calc(-5 * (var(--tile) + 24px)), 0, 0); } }
.stage.paused .flow-row { animation-play-state: paused; }
/* Covers out of sight stand still and are not drawn: scrolled past the hero, or the whole stage off screen */
.stage:is(.flow-off, .out-of-view) .flow-row { animation-play-state: paused; }
.stage.flow-off .flow { visibility: hidden; }
.cover-card {
  flex: none; inline-size: var(--tile); block-size: var(--tile); border-radius: var(--radius-small); overflow: hidden;
  box-shadow: var(--shadow-cover);
  animation: cover-in .8s var(--motion-easing) backwards; animation-delay: var(--in-delay, 0ms);
}
.cover-card img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Covers load lazily (phones never show them); each card appears only once its image is there, never as an empty box. */
.js .cover-card:not(.ready) { visibility: hidden; animation: none; }  /* the fade-in starts with .ready */
@keyframes cover-in { from { opacity: 0; transform: scale(.96); } }

/* Pause control (WCAG 2.2.2) and the note Apple asks for, together in one corner */
.stage-corner { position: absolute; inset-inline-start: max(var(--page-pad), calc((100% - 1440px) / 2 + var(--page-pad))); inset-block-end: 32px; z-index: 5; display: flex; align-items: center; gap: 12px; }
.motion-toggle {
  display: none; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-fill-subtle); transition: opacity .3s ease, visibility .3s;
}
.js .motion-toggle { display: grid; }
.js .motion-toggle.off { visibility: hidden; opacity: 0; pointer-events: none; }  /* keeps its place, the note does not jump */
.motion-toggle:hover { background: var(--color-fill-subtle-hover); }
.motion-toggle__icon { inline-size: 10px; block-size: 12px; border-inline: 3px solid var(--color-text); }
.motion-toggle[aria-pressed="true"] .motion-toggle__icon {
  inline-size: 0; block-size: 0; border: 0; margin-inline-start: 3px;
  border-inline-start: 10px solid var(--color-text); border-block: 6px solid transparent;
}
.fineprint { margin: 0; font-size: 12px; line-height: 1.33; color: var(--color-text-secondary); }
/* Without JavaScript nothing could pause the covers, so they stand still. */
html:not(.js) .flow-row { animation: none; }

/* ---- story: the features as stacked sections ---------------------------------------------------------------------- */

.story { padding: 24px var(--page-pad) 0; }
.story-item { container-type: inline-size; max-inline-size: 520px; margin: 0 auto 96px; display: flex; flex-direction: column; }
.story-item .eyebrow { margin-block-end: 8px; font-size: 15px; }
.story-item h2 { margin: 0 0 12px; font-size: var(--mobile-h2); line-height: 1.1; font-weight: var(--font-weight-semibold); letter-spacing: -.005em; }
.story-item > p:not(.eyebrow) { margin: 0; font-size: 17px; line-height: 1.47; color: var(--color-text-secondary); }
.device-frame--small { order: 1; inline-size: min(64vw, 260px); margin: 32px auto 0; }
.device-frame__screen { position: absolute; inset-inline-start: 5.333%; inset-block-start: 2.5%; inline-size: 89.333%; block-size: 95%; object-fit: cover; border-radius: 12% / 5.6%; }

@media (min-width: 1024px) {
  .story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; max-inline-size: 1200px; margin-inline: auto; padding-block-start: 96px; }
  .story-item { margin: 0; }
  /* With JavaScript the pinned stage tells the story instead */
  .js .journey { block-size: 380svh; }
  .js .stage { position: sticky; inset-block-start: 0; block-size: 100svh; }
  .js .stage-layout { padding-block-end: var(--stage-bottom); }
  .js .flow { inset-block-end: var(--stage-bottom); }
  .js .stations { display: flex; }
  .js .story { display: none; }
}

@media (max-width: 1023px) {
  .flow, .stations { display: none; }
  .stage { min-block-size: 0; overflow: visible; background: var(--color-background); }
  .stage-layout { display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-block-size: 0; padding: 88px var(--page-pad) 48px; }
  .stage-col { display: block; block-size: auto; }
  .stage-col--phone { display: flex; justify-content: center; }
  .stage-col--side, .stage-col--text > .panel:not(.panel--hero) { display: none; }
  .panel { max-inline-size: none; }
  .panel--hero .eyebrow { margin-block-end: 8px; font-size: 15px; }
  .hero-title { margin-block-end: 16px; font-size: min(clamp(36px, 10vw, 44px), calc(100cqi / var(--hero-em))); }
  .panel--hero .eyebrow { margin-inline-end: 0; }
  .lead { margin-block-end: 24px; font-size: 17px; line-height: 1.47; }
  .price-note { margin-block-start: 12px; }
  .panel--hero .soon { display: flex; justify-content: center; inline-size: 100%; }
  :root { --phone-w: min(64vw, 260px); }
  .stage-corner { position: static; justify-content: center; padding: 0 var(--page-pad) 8px; }
}

/* ---- sections below the hero ---------------------------------------------------------------------------------------- */

.section { max-inline-size: calc(1080px + 2 * var(--page-pad)); margin-inline: auto; padding: 112px var(--page-pad) 0; text-align: center; }
.section h2 { margin: 0 0 16px; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.08; font-weight: var(--font-weight-semibold); letter-spacing: -.005em; }
.section__head { max-inline-size: 760px; margin-inline: auto; }
.section__text { margin: 0 auto 32px; max-inline-size: 600px; font-size: 21px; line-height: 1.38; color: var(--color-text-secondary); }

/* CarPlay: one cockpit; the other screens lie exactly over its display, so switching changes only the screen.
   The numbers are pixels of the owner's 3072 x 2048 montages, as cut by tools/make-carplay-images.py:
   wide crop 0,160 – 3072,1312; narrow crop 670,440 – 2410,1310; screen 856,648 – 2272,1184. */
.carplay__figure { margin: 48px 0 0; }
.carplay__view {
  --crop-x: 0; --crop-y: 160; --crop-w: 3072; --crop-h: 1152;
  position: relative; overflow: hidden; aspect-ratio: 3072 / 1152;
  border-radius: var(--radius-large); box-shadow: var(--shadow-soft); background: var(--color-device-screen);
}
.carplay__view picture { display: block; block-size: 100%; }
.carplay__cockpit { display: block; inline-size: 100%; block-size: 100%; }
/* Image geometry, not text direction: left and top on purpose */
.carplay__screen {
  position: absolute; display: block;
  left: calc((856 - var(--crop-x)) / var(--crop-w) * 100%); top: calc((648 - var(--crop-y)) / var(--crop-h) * 100%);
  inline-size: calc(1416 / var(--crop-w) * 100%); block-size: calc(536 / var(--crop-h) * 100%);
  opacity: 0; transition: opacity .35s ease;
}
.carplay__screen.on { opacity: 1; }
:root:not(.js) .carplay__screen { display: none; }
/* Below the cockpit, like the station bar: a white pill, the current view filled. On phones the five views do not
   fit in one row, so they stand as single pills in two rows. */
.carplay__tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  inline-size: fit-content; max-inline-size: 100%; margin: 24px auto 0; padding: 6px; border-radius: 26px;
  background: var(--color-field); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--color-border);
}
.carplay__tabs[hidden] { display: none; }
.carplay__tabs button {
  display: inline-flex; align-items: center; block-size: 40px; padding: 0 20px; border: 0; border-radius: var(--radius-pill);
  background: transparent; font: inherit; font-size: 15px; font-weight: var(--font-weight-medium); color: var(--color-text-nav);
  white-space: nowrap; cursor: pointer; transition: background-color .3s ease, color .3s ease;
}
.carplay__tabs button:hover { background: var(--color-fill-subtle); color: var(--color-text); }
.carplay__tabs button[aria-pressed="true"] { background: var(--color-text); color: var(--color-on-text); }
@media (max-width: 1023px) {
  .carplay__view { --crop-x: 670; --crop-y: 440; --crop-w: 1740; --crop-h: 870; aspect-ratio: 1740 / 870; border-radius: var(--radius-card); }
}
/* Wide screens with JavaScript: heading, cockpit and buttons stay on screen together below the header while the page
   scrolls through the five screens (half a screen of scrolling each), as the phone of the hero does
   (assets/js/carplay.js follows it). The cockpit is only as wide as the height left over allows (owner, 08.10.2026:
   text, image and buttons should fit the MacBook's Safari window). */
@media (min-width: 1024px) {
  /* The link to #carplay lands with the stage already in place below the header */
  .js .carplay { padding-block-start: 64px; }
  /* Room to scroll as content, not padding: a sticky box only moves inside its parent's content box */
  .js .carplay__track::after { content: ''; display: block; block-size: 250svh; }
  .js .carplay__stage {
    --cp-chrome: 420px;  /* header, stage padding, heading, gaps and buttons: everything on screen but the cockpit */
    position: sticky; inset-block-start: 64px; min-block-size: calc(100svh - 64px);
    display: flex; flex-direction: column; justify-content: center; padding-block: 16px;
  }
  .js .carplay__stage .section__text { margin-block-end: 0; }
  .js .carplay__figure { margin-block-start: 32px; }
  .js .carplay__view { inline-size: min(100%, calc((100svh - var(--cp-chrome)) * 3072 / 1152)); margin-inline: auto; }
}
@media (max-width: 479px) {
  .carplay__tabs { gap: 8px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .carplay__tabs button { padding: 0 16px; background: var(--color-field); box-shadow: inset 0 0 0 1px var(--color-border); }
  .carplay__tabs button[aria-pressed="true"] { box-shadow: none; }
}
.feature-grid {
  list-style: none; margin: 40px 0 0; padding: 0; text-align: start;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px;
}
/* One white card per point, with the edge and shadow of the button bar above: after the large cockpit, fine rules alone
   left the points floating (owner, 08.10.2026; variant A of three he was shown). */
.feature-card {
  container-type: inline-size; padding: 24px 24px 26px; border-radius: var(--radius-card);
  background: var(--color-field); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--color-border);
}
.feature-card h3 { margin: 0 0 8px; font-size: clamp(18px, 7cqi, 21px); line-height: 1.2; font-weight: var(--font-weight-semibold); }
.feature-card p { margin: 0; font-size: 17px; line-height: 1.47; color: var(--color-text-secondary); }

.promise__card { padding: 0; }
.promise__card .section__text { margin-block-end: 0; }

.pricing-note { max-inline-size: calc(760px + 2 * var(--page-pad)); }
.pricing-note .section__text { max-inline-size: 560px; }
.pricing-note .soon { font-size: 21px; }
@media (max-width: 1023px) {
  /* One type scale for everything below the hero, the same as the story above it:
     eyebrow 15 px, heading --mobile-h2, text 17 px, sub-heading and question 19 px, label 19 px. */
  .section { padding-block-start: 96px; }
  .section .eyebrow { margin-block-end: 8px; font-size: 15px; }
  .section h2 { margin-block-end: 12px; font-size: var(--mobile-h2); line-height: 1.1; }
  .section__text { font-size: 17px; line-height: 1.47; }
  .pricing-note .soon { font-size: 19px; }
  .feature-card h3, .faq__item summary { font-size: 19px; }
  .feature-grid { margin-block-start: 32px; gap: 12px; }
  .feature-card { padding: 20px 20px 22px; }
  .faq__list { margin-block-start: 24px; }
}
.launch-note { margin: -16px auto 32px; font-size: 17px; color: var(--color-text); }
.pricing-note__link { margin: 4px 0 0; }

.faq { max-inline-size: calc(760px + 2 * var(--page-pad)); }
.faq__list { text-align: start; border-block-start: 1px solid var(--color-separator); margin-block-start: 32px; }
.faq__item { border-block-end: 1px solid var(--color-separator); }
.faq__item summary {
  position: relative; display: block; padding: 20px 40px 20px 0; cursor: pointer; list-style: none;
  font-size: 19px; line-height: 1.3; font-weight: var(--font-weight-semibold);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before, .faq__item summary::after {
  content: ""; position: absolute; inset-inline-end: 4px; inset-block-start: 50%; inline-size: 14px; block-size: 2px;
  border-radius: 1px; background: var(--color-text-secondary); transition: transform var(--motion-normal) var(--motion-easing);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item summary { text-wrap: balance; }
.faq__item p { margin: 0 0 20px; font-size: 17px; line-height: 1.47; color: var(--color-text-secondary); }
.faq__more { margin: 24px 0 0; }
.faq__more a { font-size: 15px; font-weight: var(--font-weight-semibold); text-decoration: none; }
.faq__more a:hover { text-decoration: underline; }

/* ---- text pages: support, press, privacy, imprint ----------------------------------------------------------------- */

.text-page { padding: 112px var(--page-pad) 0; }
.prose { container-type: inline-size; max-inline-size: 720px; margin-inline: auto; }
/* Long single words ("Datenschutzerklärung") must fit a phone: size follows the column, hyphenation as a last resort. */
.prose :is(h1, h2, h3) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.prose h1 { margin: 0 0 24px; font-size: clamp(28px, 8.8cqi, 48px); line-height: 1.08; font-weight: var(--font-weight-bold); letter-spacing: -.015em; }
.prose h2 { margin: 48px 0 12px; font-size: clamp(24px, 4.6cqi, 32px); line-height: 1.15; font-weight: var(--font-weight-semibold); letter-spacing: -.005em; scroll-margin-block-start: 80px; }
.prose h3 { margin: 32px 0 8px; font-size: clamp(18px, 3cqi, 21px); line-height: 1.25; font-weight: var(--font-weight-semibold); scroll-margin-block-start: 80px; }
.prose h1 + p { font-size: 21px; line-height: 1.38; color: var(--color-text-secondary); }
.prose p, .prose li { font-size: 17px; line-height: 1.55; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-inline-start: 1.4em; }
.prose li { margin-block-end: 8px; }
.prose a { overflow-wrap: anywhere; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.prose table { inline-size: 100%; margin: 8px 0 24px; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.45; }
/* Owner's choice (07.10.2026): the press facts stay a table on phones, but without hyphenated words */
.prose th, .prose td { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: anywhere; padding: 10px 12px 10px 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--color-separator); }
.prose th[scope="row"] { inline-size: 30%; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }

@media (min-width: 1024px) {
  .faq__item summary { font-size: 21px; }
}

/* ---- contact form (support page) ------------------------------------------------------------------------------------ */

.button {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: 48px; padding: 0 24px; border: 0; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-on-accent); font: inherit; font-size: 17px; font-weight: var(--font-weight-medium);
  text-decoration: none; cursor: pointer; transition: background-color var(--motion-normal) ease;
}
.button:hover { background: var(--color-accent-pressed); color: var(--color-on-accent); }
.button:disabled { opacity: .5; cursor: default; }

.contact-form { margin: 24px 0 24px; }
html:not(.js) .contact-form { display: none; }  /* without JavaScript there is no check, so only the e-mail address */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: 15px; line-height: 1.3; font-weight: var(--font-weight-semibold); }
.field__optional { font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
.field input, .field select, .field textarea {
  inline-size: 100%; min-block-size: 48px; margin: 0; padding: 11px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-tile); background-color: var(--color-field);
  color: var(--color-text); font: inherit; font-size: 17px; line-height: 1.4;  /* 17 px: iOS does not zoom into the field */
}
.field textarea { min-block-size: 160px; resize: vertical; }
.field select {
  -webkit-appearance: none; appearance: none; padding-inline-end: 40px;
  /* The arrow is drawn with gradients: the page allows no data: images */
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.field input::placeholder { color: var(--color-text-secondary); opacity: .7; }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; font-size: 15px; line-height: 1.45; cursor: pointer; }
.consent input { flex: none; inline-size: 20px; block-size: 20px; margin: 1px 0 0; accent-color: var(--color-accent); }
.js .turnstile-slot { min-block-size: 65px; margin-block-start: 16px; }  /* room for the box, so nothing jumps when it appears */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-block-start: 24px; }
.form-status { margin: 0; font-size: 15px; color: var(--color-text-secondary); }
.form-status.is-error { color: var(--color-accent); font-weight: var(--font-weight-semibold); }
.form-success { margin: 24px 0; padding: 24px; border-radius: var(--radius-card); background: var(--color-accent-soft); outline: none; }
.form-success h3 { margin: 0 0 8px; color: var(--color-on-accent-soft); }
.form-success p { margin: 0; }
.form-preview { margin: 16px 0 0; padding: 16px; font-family: var(--font-sans); overflow-x: auto; border-radius: var(--radius-tile); background: var(--color-field); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.form-noscript { padding: 16px; border-radius: var(--radius-tile); background: var(--color-surface); }

/* ---- language choice at / and the 404 page ------------------------------------------------------------------------ */

.choice { min-block-size: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 48px 24px; text-align: center; }
.choice__logo { display: block; block-size: 48px; inline-size: auto; }
.choice__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.choice__list a {
  display: inline-flex; align-items: center; min-block-size: 48px; padding: 0 24px; border-radius: var(--radius-pill);
  background: var(--color-fill); color: var(--color-text); font-size: 17px; font-weight: var(--font-weight-semibold); text-decoration: none;
}
.choice__list a:hover { background: var(--color-text); color: var(--color-on-text); }
.not-found { display: grid; gap: 32px; max-inline-size: 520px; }
.not-found h1, .not-found h2 { margin: 0 0 8px; font-size: clamp(24px, 6vw, 32px); line-height: 1.15; font-weight: var(--font-weight-semibold); }
.not-found p { margin: 0; color: var(--color-text-secondary); }

@media (pointer: coarse) {
  .motion-toggle { inline-size: 44px; block-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
  .panel--hero.on, .cover-card, .flow-row { animation: none; }
  .scr { animation: none !important; }
  .carplay__screen { transition: none; }
}

/* E-mail address without JavaScript: stored reversed in the page (owner's request 2026-10-21, against address
   harvesting); the override reads it right way round. site.js replaces it with a normal link. */
.mail { unicode-bidi: bidi-override; direction: rtl; }
.mail::after { content: attr(data-d) "@" attr(data-u); }