/*
 * The product site's one stylesheet.
 *
 * Until 2026-09-18 the landing page and the account screen each carried the
 * palette inline, with a test comparing the two token by token. With eight
 * pages in three languages that stops scaling, so the palette lives here and
 * every page links this file. The values are unchanged from those two pages.
 */

:root {
  /*
   * The dark palette, defined once and pointed at from both switches below.
   * Two copies of twelve colours is two copies that drift, and the failure is
   * a page that looks right in one dark path and wrong in the other.
   */
  --d-bg: #14161a;
  --d-surface: #1c1f25;
  --d-ink: #eceef2;
  --d-muted: #a2a9b4;
  --d-line: #2e333b;
  --d-accent: #8fb0ff;
  --d-green: #6ddba0;
  --d-green-bg: #16301f;
  --d-amber: #f0c25f;
  --d-amber-bg: #322708;
  --d-red: #f19a9a;
  --d-red-bg: #331919;

  /* Light is the base. `color-scheme` is set explicitly in each state so
     native controls — scrollbars, the file picker, form fields — follow the
     page rather than the operating system. */
  color-scheme: light;
  --bg: #fbfaf8;
  --surface: #ffffff;
  --ink: #16181d;
  --muted: #5a6069;
  --line: #e3e1dc;
  --accent: #1f4fd8;
  --on-accent: #ffffff;
  --green: #177544;
  --green-bg: #e8f5ee;
  --amber: #8a5a00;
  --amber-bg: #fdf2dc;
  --red: #a32b2b;
  --red-bg: #fbe9e9;
}

/* What the browser asks for — unless the reader has explicitly said light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--d-bg);
    --surface: var(--d-surface);
    --ink: var(--d-ink);
    --muted: var(--d-muted);
    --line: var(--d-line);
    --accent: var(--d-accent);
    /* White on the light dark-mode accent is 2.3:1. The page background is 9:1. */
    --on-accent: var(--d-bg);
    --green: var(--d-green);
    --green-bg: var(--d-green-bg);
    --amber: var(--d-amber);
    --amber-bg: var(--d-amber-bg);
    --red: var(--d-red);
    --red-bg: var(--d-red-bg);
  }
}

/* An explicit choice wins over the system, in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--d-bg);
  --surface: var(--d-surface);
  --ink: var(--d-ink);
  --muted: var(--d-muted);
  --line: var(--d-line);
  --accent: var(--d-accent);
  --on-accent: var(--d-bg);
  --green: var(--d-green);
  --green-bg: var(--d-green-bg);
  --amber: var(--d-amber);
  --amber-bg: var(--d-amber-bg);
  --red: var(--d-red);
  --red-bg: var(--d-red-bg);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: break-word;
}
a { color: var(--accent); }
a:focus-visible, input:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: .6rem 1rem; border: 2px solid var(--accent); border-radius: 6px;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }
[hidden] { display: none !important; }

/* Used for labels that a sighted reader gets from the placeholder and the layout. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-header .bar {
  max-width: 60rem; margin: 0 auto; padding: .7rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
}
.brand { display: inline-flex; align-items: center; gap: .45rem; min-height: 1.75rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand-mark { width: 1.45em; height: 1.45em; fill: var(--accent); flex: none; }
.site-nav ul, .lang-switch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem .9rem; }
.site-nav li, .lang-switch li { margin: 0; }
.site-nav a { color: var(--ink); text-decoration: none; padding: .35rem 0; display: inline-block; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: .3em; }
.lang-switch a, .lang-switch span {
  display: inline-block; min-width: 1.75rem; min-height: 1.75rem; padding: .3rem .25rem; font-size: .88rem; text-align: center;
  text-transform: uppercase; letter-spacing: .06em;
}
.lang-switch a { color: var(--muted); text-decoration: none; }
.lang-switch a:hover { color: var(--ink); text-decoration: underline; }
.lang-switch [aria-current="true"] { color: var(--ink); font-weight: 700; }

/* ── Page ───────────────────────────────────────────────────────────────── */

main { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
main.wide { max-width: 60rem; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .75rem; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 2.5rem 0 .6rem; }
h3 { font-size: 1.02rem; margin: 1.5rem 0 .4rem; }
.lede { font-size: 1.1rem; color: var(--muted); margin: 0 0 2rem; }
.muted, .who, .evidence { color: var(--muted); }
.who { font-size: .93rem; }
.evidence { font-size: .9rem; }
ul, ol { padding-left: 1.15rem; margin: .4rem 0; }
li { margin: .35rem 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.small { font-size: .9rem; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

form { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 .75rem; }
label { display: block; font-weight: 600; margin-bottom: .4rem; }
/* Visible labels, above their field. A placeholder disappears as you type; a label does not. */
form > label { flex-basis: 100%; margin-bottom: 0; }
input[aria-invalid="true"] { border-color: var(--red); border-width: 2px; }
.field-error { flex-basis: 100%; margin: 0; color: var(--red); font-weight: 600; }
input[type=url], input[type=email] {
  flex: 1 1 18rem; min-width: 0;
  padding: .8rem .9rem; font: inherit;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px;
}
button, .button {
  display: inline-block;
  padding: .8rem 1.4rem; font: inherit; font-weight: 600; line-height: 1.3;
  color: var(--on-accent); background: var(--accent);
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  text-decoration: none;
}
button.secondary, .button.secondary { background: transparent; color: var(--accent); border-color: var(--accent); }
button.link {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 400;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
button[disabled], button[aria-disabled="true"] { opacity: .6; cursor: progress; }
.hint { color: var(--muted); font-size: .93rem; margin: 0 0 2.5rem; }
/* A line of explanation inside a flex form, on a row of its own. */
.form-note { flex-basis: 100%; margin: 0; }

/* ── Cards, verdicts, badges ────────────────────────────────────────────── */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.25rem 1.4rem; margin: 1.25rem 0;
}
.card > :first-child { margin-top: 0; }
.card h2, .row h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.result-title { margin-top: 2rem; }
.card > :last-child { margin-bottom: 0; }
.verdict { border-width: 2px; }
.verdict.green { border-color: var(--green); background: var(--green-bg); }
.verdict.amber { border-color: var(--amber); background: var(--amber-bg); }
.verdict.red   { border-color: var(--red);   background: var(--red-bg); }
.badge {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 999px; border: 1px solid currentColor;
  color: var(--muted);
}
.green .badge, .badge.accepted { color: var(--green); }
.amber .badge { color: var(--amber); }
.red .badge, .badge.declined { color: var(--red); }
.badge.sent { color: var(--accent); }
.verdict p.headline { font-size: 1.2rem; font-weight: 600; margin: .7rem 0 0; }
.offer, .card.quote, .card.accent { border-color: var(--accent); border-width: 2px; }
.offer h3 { margin-top: 0; font-size: 1.1rem; }
.offer .cta { font-weight: 600; margin-bottom: 0; }
.error { border-color: var(--red); background: var(--red-bg); }
.never { border-left: 3px solid var(--green); padding-left: .9rem; }
.never li { margin: .2rem 0; }
table.summary { border-collapse: collapse; width: 100%; margin: .5rem 0; }
table.summary td { padding: .3rem .6rem .3rem 0; border-bottom: 1px solid var(--line); }
table.summary td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.price { font-size: 1.5rem; font-weight: 700; margin: .5rem 0; }
.row { display: flex; gap: .75rem; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.row h3 { margin: 0; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* ── Content pages ──────────────────────────────────────────────────────── */

/* The phases, as a numbered list whose numbers carry weight. */
ol.phases { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: phase -1; }
ol.phases > li {
  counter-increment: phase;
  position: relative; margin: 0; padding: 0 0 1.75rem 3.25rem;
  border-left: 2px solid var(--line); margin-left: 1.1rem;
}
ol.phases > li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.phases > li::before {
  content: counter(phase);
  position: absolute; left: -1.15rem; top: -.1rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; background: var(--surface); color: var(--accent);
  border: 2px solid var(--accent);
}
ol.phases h3 { margin: .15rem 0 .4rem; font-size: 1.08rem; }
ol.phases dl { margin: .5rem 0 0; }
ol.phases dt { font-weight: 600; font-size: .9rem; color: var(--muted); margin-top: .5rem; }
ol.phases dd { margin: .1rem 0 0; }

/* Cards laid out side by side where there is room, stacked where there is not. */
/* 13rem lets four cards share the wide column instead of leaving one alone on a second row. */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1.25rem 0; }
.grid > .card { margin: 0; display: flex; flex-direction: column; padding: 1.1rem 1.1rem; }
/* A range is one figure: it may not break at its dash. Sized so the longest, `15.000–30.000 €`, fits a quarter of the wide column. */
.grid > .card .price { margin: .25rem 0 .5rem; font-size: 1.2rem; white-space: nowrap; }
/* "per month" under the figure, rather than wrapping beside it at some widths and not others. */
.price .per { display: block; font-size: .85rem; font-weight: 400; color: var(--muted); }
.grid > .card ul { margin-top: auto; padding-top: .5rem; }
.tag {
  display: inline-block; font-size: .8rem; font-weight: 600;
  padding: .1rem .55rem; border-radius: 999px;
  background: var(--green-bg); color: var(--green);
}
.tag.wait { background: var(--amber-bg); color: var(--amber); }

/* The architecture, drawn with boxes rather than an image so it follows the theme and the language. */
.diagram { display: grid; gap: .6rem; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; margin: 1.5rem 0; }
.diagram .node { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; }
.diagram .node strong { display: block; }
.diagram .node span { color: var(--muted); font-size: .88rem; }
.diagram .arrow { align-self: center; color: var(--muted); font-size: 1.3rem; text-align: center; }
@media (max-width: 40rem) {
  .diagram { grid-template-columns: 1fr; }
  .diagram .arrow { transform: rotate(90deg); }
}

/* FAQ entries: native disclosure, so it works without script and with every assistive technology. */
details { border-bottom: 1px solid var(--line); padding: .2rem 0; }
details:first-of-type { border-top: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; padding: .75rem 0; list-style-position: outside; margin-left: 1.1rem; }
details > :not(summary) { margin-left: 1.1rem; }
details[open] > summary { color: var(--accent); }

/* Tables of facts on the legal pages. On a phone each row becomes a block, rather than a table to scroll sideways. */
table.facts { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
table.facts th, table.facts td { text-align: left; vertical-align: top; padding: .55rem .6rem .55rem 0; border-bottom: 1px solid var(--line); }
table.facts th { font-weight: 600; }
table.facts thead th { color: var(--muted); font-size: .85rem; }
@media (max-width: 40rem) {
  table.facts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.facts, table.facts tbody, table.facts tr, table.facts th, table.facts td { display: block; width: 100%; }
  table.facts tr { border-bottom: 1px solid var(--line); padding: .5rem 0; }
  table.facts th, table.facts td { border: 0; padding: .15rem 0; }
  table.facts td[data-label]::before { content: attr(data-label) " — "; content: attr(data-label) " — " / ""; color: var(--muted); font-size: .85rem; }
}

/* A table wider than the reading column, centred on it: six comparisons do not fit in 44rem, and prose should not be widened to make room. */
table.facts.breakout { width: min(58rem, 100vw - 2rem); margin-left: 50%; transform: translateX(-50%); }
@media (max-width: 40rem) {
  /* On a phone the table is already a stack of blocks; there is nothing to break out of. */
  table.facts.breakout { width: 100%; margin-left: 0; transform: none; }
}

/* What is still missing from a legal notice renders as a gap nobody could mistake for data. */
.pending { background: var(--amber-bg); color: var(--amber); font-weight: 600; padding: 0 .3rem; border-radius: 4px; }

.cta-band { margin: 3rem 0 0; padding: 1.5rem 1.4rem; border-radius: 12px; background: var(--surface); border: 2px solid var(--accent); }
.cta-band h2 { margin-top: 0; }
.cta-band p:last-child { margin-bottom: 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.site-footer .bar { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; }
.site-footer ul { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-block; padding: .3rem 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer p { margin: .5rem 0; }

/* Theme picker — radios, because this is one choice among three. */
.theme { border: 0; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.theme legend { float: left; margin: 0 .5rem 0 0; padding: .3rem 0; font-size: .85rem; }
.theme label { margin: 0; font-weight: 400; }
.theme input { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.theme span {
  display: block; cursor: pointer;
  padding: .3rem .7rem; font-size: .85rem;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
}
.theme input:checked + span { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.theme input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── Contrast preferences ───────────────────────────────────────────────── */

/* Windows high contrast replaces every colour, so a choice shown only by a
   filled background disappears. Borders and outlines survive. */
@media (forced-colors: active) {
  .theme input:checked + span { outline: 3px solid CanvasText; outline-offset: 1px; }
  .site-nav a[aria-current="page"], .lang-switch [aria-current="true"] { text-decoration: underline; text-decoration-thickness: 3px; }
  .badge, .tag, .pending { border: 1px solid CanvasText; }
  button, .button { border: 2px solid ButtonText; }
  .brand-mark { fill: LinkText; }
}

/* Asked for more contrast: secondary text becomes body text, and faint lines darken. */
@media (prefers-contrast: more) {
  /* The :not(#…) only raises specificity above the two dark-theme rules, so
     this wins in every theme; --ink already resolves to the theme's own ink. */
  :root:not(#_) { --muted: var(--ink); --line: var(--ink); }
  a { text-decoration-thickness: 2px; }
}