:root {
  /* Fonts */
  --market-content-fonts: 'Open Sans', 'Open Sans Fallback', Arial, sans-serif;
  --market-header-fonts: 'Roboto Condensed', 'Roboto Condensed Fallback', 'Arial Narrow', Arial, sans-serif;

  /* ── Colour system ───────────────────────────────────────────────────────────────────────
     One palette for the Rails pages and every React app (the SPAs inherit it from :root).
     Three layers — use the highest one that fits:
       1. Base scale: the only place with raw hex values. Do not use it in components.
       2. Semantic tokens: ink, text, borders, surfaces and states.
       3. Product accent (--accent-*): the colour of the product line the element belongs to.
          `data-product="toll|insurance"` on any container (or on the button itself) retints
          it; vignette (blue) is the default. Primary buttons, eyebrows, links and selected
          states read --accent-*, so a page or card changes product colour without new CSS.
     Every text colour meets WCAG AA (4.5:1) on white and on the -50/-100 fills; the logo and
     icons keep the brand #199BFA. */

  /* 1. Base scale */
  --white-color: #fff;
  --blue-50: #f4f9ff;
  --blue-100: #eaf2fd;
  --blue-200: #e1ebfa;
  --blue-600: #0b63d4;
  --blue-700: #0a58bd;
  --blue-800: #0a4a9e;
  --green-50: #f2f9f5;
  --green-100: #eaf7f0;
  --green-200: #cde9da;
  --green-600: #188048;
  --green-700: #176844;
  --green-800: #0f4f2d;
  --violet-50: #f6f4fe;
  --violet-100: #eeeafc;
  --violet-200: #ddd6f7;
  --violet-600: #5b45c9;
  --violet-700: #4a37a8;
  --violet-800: #3b2c86;
  --lime-100: #e6ffa0;
  --lime-300: #cdee4f;
  --lime-500: #adbf78;
  --red-50: #fcefef;
  --red-200: #f3d2d0;
  --red-600: #d6322e;
  --red-700: #b3261e;
  --amber-50: #fef3d4;
  --amber-200: #f3e2a9;
  --amber-500: #e0930e;
  --amber-800: #8a5d0b;
  --orange-600: #e0612e;
  --slate-50: #f5f7fa;
  --slate-100: #f0f2f6;
  --slate-200: #e6eaf0;
  --slate-300: #d7dde6;
  --slate-400: #cdd5df;
  --slate-500: #8190a1;
  --slate-600: #5b6b7d;
  --slate-700: #46586b;
  --slate-900: #0e1b2b;
  --paypal-yellow-color: #ffc439;

  /* 2. Semantic tokens */
  --ink-color: var(--slate-900);
  --text-secondary-color: var(--slate-700);
  --text-muted-color: var(--slate-600);
  --icon-muted-color: var(--slate-500);
  --border-color: var(--slate-200);
  --border-strong-color: var(--slate-300);
  --surface-muted-color: var(--slate-50);
  --surface-sunken-color: var(--slate-100);
  --danger-color: var(--red-600);
  --danger-strong-color: var(--red-700);
  --danger-soft-color: var(--red-50);
  --danger-border-color: var(--red-200);
  --success-color: var(--green-600);
  --success-strong-color: var(--green-700);
  --success-hover-color: var(--green-800);
  --success-soft-color: var(--green-100);
  --success-border-color: var(--green-200);
  --warning-color: var(--orange-600);
  --notice-color: var(--amber-500);
  --notice-strong-color: var(--amber-800);
  --notice-soft-color: var(--amber-50);
  --notice-border-color: var(--amber-200);
  /* Promo (lime): CTAs on coloured or dark backgrounds and small badges; never the main CTA on
     white and never the fill of a panel or band (test/lib/promo_color_usage_test.rb). */
  --promo-color: var(--lime-300);
  --promo-soft-color: var(--lime-100);
  --promo-hover-color: var(--lime-500);
  --promo-text-color: var(--ink-color);

  --background-white-color: #ffffff;
  --background-light-gray-color: #f9f9f9;
  --background-medium-gray-color: #f2f2f2;
  --background-dark-gray-color: #9a9a9a;
  --background-linear-gradient: linear-gradient(#2a3a5e99, #2a3a5e99);

  /* Deprecated aliases (COLOR-ALIASES-2026-10): kept so render-cached Liquid HTML and older
     bundles keep their colours. New code uses the tokens above; remove after 2026-12-31. */
  --dark-blue-color: var(--blue-600);
  --light-blue-color: var(--blue-600);
  --primary-hover-blue-color: var(--blue-700);
  --bright-blue-color: var(--blue-50);
  --light-green-color: var(--green-600);
  --dark-green-color: var(--green-700);
  --primary-hover-green-color: var(--green-800);
  --dark-green-soft-color: var(--green-100);
  --dark-green-border-color: var(--green-200);
  --light-yellow-color: var(--lime-100);
  --dark-yellow-color: var(--lime-500);
  --lime-color: var(--lime-300);
  --red-color: var(--red-600);
  --orange-color: var(--orange-600);
  --light-gray-color: var(--slate-600);
  --dark-gray-color: var(--slate-600);
  --slate-color: var(--slate-600);
  --muted-slate-color: var(--slate-600);
  --navy-color: var(--ink-color);
  --text-black-color: var(--ink-color);
  --text-gray-color: var(--text-secondary-color);
  --border-blue-color: var(--border-color);
  --border-light-gray-color: var(--border-color);
  --border-dark-gray-color: var(--border-strong-color);
  --background-light-blue-color: var(--surface-muted-color);

  /* Dimensions */
  --mobile-header-height: 56px;
  --desktop-header-height: 72px;

  /* Spacing */
  --side-spacing: 1rem;

  /* Radius */
  --border-radius: 1.25rem;
  --border-radius-small: 0.75rem;
  /* Every button and CTA, in Rails and in the React apps: a rounded rectangle, never a pill. */
  --button-radius: 0.75rem;

  /* Margins */
  --standard-margin: 2rem;
  --large-margin: 3rem;

  --font-weight-bold: 700;

  --letter-spacing-medium: 0.1rem;

  --box-shadow-light: 0px 5px 30px 0px rgba(155, 155, 155, 0.20);
  --box-shadow-heavy: 0px 1px 5px 0px rgba(0, 0, 0, 0.250);
}

/* 3. Product accent. The default (no data-product) is the vignette line; the cart, checkout and
   order pages stay on it too, because a cart mixes products. A cross-sell button takes the colour
   of the product it sells: put data-product on the button itself. */
:root,
[data-product="vignette"] {
  --accent-color: var(--blue-600);
  --accent-hover-color: var(--blue-700);
  --accent-strong-color: var(--blue-600);
  --accent-subtle-color: var(--blue-50);
  --accent-soft-color: var(--blue-100);
  --accent-border-color: var(--blue-200);
  --accent-contrast-color: var(--white-color);
  --accent-glow-color: rgb(11 99 212 / 0.7);
}

/* Road tolls: Austrian section tolls (Streckenmaut, FLEX) and the maut1 on-board units. */
[data-product="toll"] {
  --accent-color: var(--green-600);
  --accent-hover-color: var(--green-800);
  --accent-strong-color: var(--green-700);
  --accent-subtle-color: var(--green-50);
  --accent-soft-color: var(--green-100);
  --accent-border-color: var(--green-200);
  --accent-contrast-color: var(--white-color);
  --accent-glow-color: rgb(24 128 72 / 0.7);
}

[data-product="insurance"] {
  --accent-color: var(--violet-600);
  --accent-hover-color: var(--violet-700);
  --accent-strong-color: var(--violet-700);
  --accent-subtle-color: var(--violet-50);
  --accent-soft-color: var(--violet-100);
  --accent-border-color: var(--violet-200);
  --accent-contrast-color: var(--white-color);
  --accent-glow-color: rgb(91 69 201 / 0.7);
}

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

@media (hover: none) and (pointer: coarse) {

  html,
  body {
    overscroll-behavior-y: none;
  }
}

body {
  margin: 0;
  color: var(--ink-color);
  font-family: var(--market-content-fonts);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--market-header-fonts);
}

h1 {
  font-size: 3.75rem;
  line-height: 1;
  margin-bottom: 2rem;
}

h1>span,
h1>.accordion__button>span {
  font-size: 1.25rem;
  line-height: 1.75rem;
  display: block;
  color: var(--accent-strong-color);
}

h2 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  margin-bottom: 1.5rem;
}

h2>span,
h2>.accordion__button>span {
  font-size: 1.125rem;
  line-height: 1.75rem;
  display: block;
  color: var(--accent-strong-color);
}

h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1rem;
}

h3>span,
h3>.accordion__button>span {
  font-size: 1rem;
  line-height: 1.5rem;
  display: block;
  color: var(--accent-strong-color);
}

h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 0.5rem;
}

h4>span,
h4>.accordion__button>span {
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: block;
  color: var(--accent-strong-color);
}

h5 {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
}

h6 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Keep the look of a smaller level when the tag follows the document outline (no skipped levels). */
.heading-size-3 {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1rem;
}

.heading-size-3>span,
.heading-size-3>.accordion__button>span {
  font-size: 1rem;
  line-height: 1.5rem;
}

.heading-size-4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 0.5rem;
}

.heading-size-4>span,
.heading-size-4>.accordion__button>span {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

p {
  margin-bottom: 0.5rem;
}

/* Larger margin for the last paragraph before a header */
p+h1,
p+h2,
p+h3,
p+h4,
p+h5,
p+h6,
ul+h1,
ul+h2,
ul+h3,
ul+h4,
ul+h5,
ul+h6,
ol+h1,
ol+h2,
ol+h3,
ol+h4,
ol+h5,
ol+h6 {
  margin-top: 2rem;
}

ul {
  list-style-type: disc;
  list-style-position: inside;
  margin-bottom: 0.5rem;
  margin-left: 1.5rem;
}

ul.list-none {
  list-style-type: none;
  margin-left: 0;
}

ul>li+li {
  margin-top: 0.5rem;
}

ul li>ul {
  margin-left: 1.5rem;
  margin-top: 0.25rem;
}

a {
  color: var(--accent-strong-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Links inside running text need more than colour to stand out (WCAG 1.4.1). */
main :where(p, td, dd) a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

button {
  cursor: pointer;
  font-family: var(--market-content-fonts);
}

code {
  background-color: var(--surface-sunken-color);
}

strong {
  font-weight: 600;
}

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--side-spacing);
  padding-right: var(--side-spacing);
}

@media (min-width: 768px) {
  .container {
    max-width: 48rem;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 64rem;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 72rem;
  }
}

@media (min-width: 1921px) {
  .container {
    max-width: 80rem;
  }
}

/* Hide the Google reCAPTCHA v3 badge globally.
   Required by Google's terms: the reCAPTCHA branding text must instead be
   shown visibly in the protected flow (checkout submit button). */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* Visible to screen readers and crawlers only (server-rendered headings of SPA shells). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}