:root {
  --navy: #1a3b56;
  --navy-deep: #102638;
  --steel: #4278a7;
  --steel-light: #8fb3d0;
  --cobalt: #1e50c0;
  --cobalt-hover: #1a45a6;
  --cream: #fbf9f1;
  --white: #ffffff;
  --ink: #1a3b56;
  --ink-soft: rgba(26, 59, 86, 0.74);
  --line: rgba(26, 59, 86, 0.14);
  --line-strong: rgba(26, 59, 86, 0.28);
  --good: #0f6e56;
  --good-light: #6fd4b0;

  --shell: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --radius: 10px;
  --radius-lg: 16px;
  --header-h: 4.5rem;
  --shadow-soft: 0 1.5rem 4rem rgba(26, 59, 86, 0.12);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Self-hosted, not loaded from fonts.googleapis.com — see the <link rel=preload>
   comment in the template for why. One variable file covers weight 400–700
   across latin + latin-ext + cyrillic (needed once the site went to four
   languages — see website/README.md "Languages" for the glyph-coverage
   story). It also carries an opsz axis, so font-optical-sizing: auto (the CSS
   default — no rule needed here) sharpens large headings automatically.
   The ?v= query is deliberate and must be bumped whenever the font file
   changes: fonts are cached aggressively, and this URL has no other way to
   invalidate a stale cached copy. Keep this in sync with the <link
   rel="preload"> href in src/template.html — same URL, same query, or the
   preload hint is wasted and the font gets fetched twice. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/inter-var.woff2?v=2") format("woff2");
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--cobalt);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus { left: 0; }

/* ---------- motion primitives ---------- */

/* `both` fill holds the start frame through any --enter-delay, so a staggered
   block never flashes in at full opacity before its turn. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}

.enter-rise {
  animation: rise-in 480ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--enter-delay, 0ms);
}

/* Revealed on scroll by JS adding .is-visible. Only hidden under `html.js`:
   with scripting off the `no-js` class survives and everything stays visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--enter-delay, 0ms);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

.flow__step:nth-child(2) { --enter-delay: 120ms; }
.flow__step:nth-child(3) { --enter-delay: 240ms; }

/* ---------- legal pages (impressum, datenschutz) ---------- */

.legal h2 {
  margin-top: 2.25rem;
  font-size: 1.15rem;
}

.legal p { color: var(--ink-soft); max-width: 68ch; }
.legal a { color: var(--cobalt); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow { max-width: 800px; }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 62ch;
  color: var(--ink-soft);
}

.eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-light);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--cobalt); color: var(--cream); }
.btn--primary:hover { background: var(--cobalt-hover); }

.btn--ghost {
  border-color: rgba(251, 249, 241, 0.42);
  color: var(--cream);
}

.btn--ghost:hover { border-color: var(--cream); background: rgba(251, 249, 241, 0.08); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.92rem; }
.btn--block { display: flex; width: 100%; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 249, 241, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: box-shadow 280ms ease;
}

.site-header.is-stuck { box-shadow: 0 0.5rem 1.75rem rgba(16, 38, 56, 0.1); }

/* 2px top and bottom: the logo defines the header's height, everything else
   sits inside it. */
.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 2px var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  text-decoration: none;
  margin-right: auto;
}

/* Sized by height with width:auto — the source PNG is 357x392, so pinning both
   axes to the same number would squash it. */
.brand__mark {
  height: 3.5rem;
  width: auto;
  flex: none;
  object-fit: contain;
}

.brand__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.brand__name {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand__slogan {
  margin-top: 0.22rem;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--steel);
}

.nav__list {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.nav a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  transition: color 0.18s ease;
}

.nav a:hover { color: var(--cobalt); }

/* Underline grows from the left on hover; scaleX keeps it off the main thread's
   layout path. */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.3rem;
  height: 2px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}

.nav a:hover::after { transform: scaleX(1); }

/* Same burger as the storefront app: a single <path> whose `d` is swapped
   between bars and an X, with `transition: d` morphing between them. Browsers
   without animatable `d` simply snap. */
.burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.burger:hover { background: rgba(26, 59, 86, 0.07); }

.burger svg {
  width: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 0.6;
}

.burger svg path { transition: d 0.2s ease; }

.nav__cta { display: none; }

/* ---------- language switcher ---------- */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.flag {
  display: block;
  flex: none;
  width: 1.35rem;
  height: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(26, 59, 86, 0.18);
  border-radius: 0.2rem;
}

.flag svg { display: block; width: 100%; height: 100%; }

.lang { position: relative; flex: none; }

.lang__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.55rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.18s ease;
}

/* Two selectors: Chromium and Firefox honour list-style, WebKit needs this. */
.lang__trigger::-webkit-details-marker { display: none; }
.lang__trigger:hover { background: rgba(26, 59, 86, 0.07); }

.lang__chevron {
  width: 0.55rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 0.15s ease;
}

.lang[open] .lang__chevron { transform: rotate(180deg); }

.lang__panel {
  position: absolute;
  z-index: 35;
  top: calc(100% + 0.5rem);
  right: 0;
  width: max-content;
  min-width: 10rem;
  padding: 0.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transform-origin: top right;
  animation: lang-panel-in 160ms var(--ease-out) both;
}

@keyframes lang-panel-in {
  from { opacity: 0; transform: translateY(-0.35rem) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.lang__panel ul { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }

.lang__panel a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

.lang__panel a:hover { background: rgba(66, 120, 167, 0.1); }

.lang__panel a[aria-current='true'] {
  background: rgba(66, 120, 167, 0.14);
  color: var(--cobalt);
}

.nav__langs { display: none; }

/* Sits above the panel's own stacking so the header never dims with it. */
.nav-scrim {
  position: fixed;
  z-index: 25;
  inset: var(--header-h) 0 0;
  display: none;
  background: rgba(26, 59, 86, 0.45);
  border: 0;
  padding: 0;
  opacity: 0;
  transition:
    opacity 340ms ease,
    display 340ms allow-discrete;
}

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

/* Thin image band. The photo is a fixed-attachment background so it holds
   still while the page scrolls over it. Touch browsers ignore or stutter on
   `fixed`, so they get `scroll` — see the overrides at the bottom of the file. */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(400px, 50vh, 540px);
  padding: clamp(3rem, 7vw, 5rem) 0;
  text-align: center;
  color: var(--cream);
  background-color: var(--navy-deep);
  background-image: url("assets/hero-counter.jpg");
  background-size: cover;
  background-position: center 38%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 38, 56, 0.82) 0%, rgba(16, 38, 56, 0.62) 45%, rgba(16, 38, 56, 0.86) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

/* Guaranteed single line, not just "usually fits" — "Pay once. Own forever." and
   its translations must never wrap, on any viewport this site supports (down to
   320px, same floor already committed to for the header lockup). The four
   languages are very different lengths at the same meaning (Russian is ~60%
   longer than English), so one size for all of them would force English down
   to Russian's tiny minimum — each gets its own.

   Deliberately NOT a fluid vw-based clamp: in testing, this environment's `vw`
   unit resolved against a different reference width than `window.innerWidth`
   (confirmed with a 100vw probe element), which made the two disagree by
   ~15–20% and silently broke a hand-derived formula — it kept landing at the
   same computed size regardless of one of the three clamp arguments changing.
   Discrete breakpoints have no unit to get confused about: every value below
   is a real number, checked against the real rendered width of the real
   string at the real breakpoint (binary-searched against a live element, not
   estimated from an offscreen span), with margin to spare — not a formula
   assumed to interpolate safely between two calibration points. */
.hero h1 {
  margin-bottom: 0.6rem;
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(16, 38, 56, 0.45);
  font-size: 2.6rem;
}

html[lang="de"] .hero h1 { font-size: 2rem; }
html[lang="ru"] .hero h1 { font-size: 2rem; }
html[lang="tr"] .hero h1 { font-size: 2rem; }

@media (max-width: 560px) {
  /* Real max-safe at a true 320px viewport, measured live: en 27.2px,
     de 17.3px, ru 17.4px ("Разовый платёж. Навсегда ваше." — shorter than
     the original translation, which only safely fit 15.1px), tr 17.9px.
     Values below sit ~10–15% under each, for margin against real devices,
     font hinting, and future copy tweaks. */
  .hero h1 { font-size: 24px; }
  html[lang="de"] .hero h1 { font-size: 15px; }
  html[lang="ru"] .hero h1 { font-size: 15px; }
  html[lang="tr"] .hero h1 { font-size: 15px; }
}

.hero__sub {
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  color: rgba(251, 249, 241, 0.88);
  margin: 0 auto;
  max-width: 46ch;
  text-shadow: 0 1px 12px rgba(16, 38, 56, 0.45);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.6rem;
}

/* ---------- comparison table (sits directly under the hero) ---------- */

.proof-band {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.75rem, 4vw, 3rem) 0;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}

.compare th,
.compare td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}

.compare thead th {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 2px solid var(--line-strong);
}

/* The winning column is tinted end to end rather than boxed, so the two
   columns read as one comparison instead of two separate cards. */
.compare thead th.is-win {
  color: var(--good);
  border-bottom-color: var(--good);
}

.compare th:nth-child(3),
.compare td:nth-child(3) {
  background: rgba(15, 110, 86, 0.06);
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

.compare tbody th {
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.compare td { color: var(--ink-soft); }
.compare .is-good { color: var(--good); font-weight: 500; }

.compare .amount {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--steel);
}

.compare .amount.is-good { color: var(--good); }

/* ---------- calculator ---------- */

.calc__field label,
.ctrl label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.4rem;
}

.calc__input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.85rem;
  font-size: 1.25rem;
  font-weight: 600;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.calc__input:focus-within {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(30, 80, 192, 0.16);
}

.calc__input span { color: var(--steel); }

.calc__input input {
  flex: 1;
  min-width: 0;
  min-height: 2.25rem;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
}

.calc__input input:focus { outline: none; }

.calc__unit { font-size: 0.8rem; font-weight: 500; color: var(--steel); }

/* ---------- sections ---------- */

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); color: var(--cream); }
.section--navy-deep { background: var(--navy-deep); color: var(--cream); }

.section--navy .lede,
.section--navy-deep .lede { color: var(--steel-light); }

.section__cta { margin: 2rem 0 0; }

.fineprint {
  margin: 1.5rem 0 0;
  font-size: 0.88rem;
  color: rgba(251, 249, 241, 0.6);
  max-width: 70ch;
}

/* ---------- how it works: numbered flow with arrows ---------- */

.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.75rem;
  list-style: none;
  margin: 4rem 0 0;
  padding: 0;
}

/* Each step is a plain column under a rule; the number straddles the rule and
   a chevron sits in the gap, so order reads left to right without any boxes. */
.flow__step {
  position: relative;
  border-top: 2px solid var(--line-strong);
  padding-top: 2.4rem;
  text-align: center;
}

.flow__n {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cobalt);
  color: var(--cream);
  font-size: 1.05rem;
  font-weight: 700;
}

.flow__step + .flow__step::before {
  content: "";
  position: absolute;
  left: calc(-1.375rem - 6px);
  top: 0;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--steel);
  border-right: 2px solid var(--steel);
  transform: translateY(-50%) rotate(45deg);
}

.flow__step h3 { margin-bottom: 0.4rem; }
.flow__step p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- split ---------- */

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; }

.ticks li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.7rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--good);
  border-bottom: 2.5px solid var(--good);
  transform: rotate(-45deg);
}

.ticks--tight li { margin-bottom: 0.35rem; font-size: 0.97rem; }

.loop {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.75rem;
  border-left: 2px dashed var(--line-strong);
}

.loop li { position: relative; padding-bottom: 1.5rem; }
.loop li:last-child { padding-bottom: 0; }

.loop__dot {
  position: absolute;
  left: calc(-1.75rem - 8px);
  top: 0.45em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--steel);
}

.loop__dot--end { border-color: var(--good); background: var(--good); }

.loop p { margin: 0; color: var(--ink-soft); }
.loop strong { color: var(--ink); }

/* ---------- breakdown ---------- */

.breakdown {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: 2.5rem;
}

.breakdown__controls {
  background: rgba(251, 249, 241, 0.07);
  border: 1px solid rgba(251, 249, 241, 0.16);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.breakdown__controls .calc__field label,
.ctrl label { color: var(--steel-light); }

/* Inside the navy section this input inherits cream text, which is invisible
   on its own light background. Force the brand blue. */
.calc__input--light {
  background: rgba(251, 249, 241, 0.96);
  border-color: transparent;
  color: var(--cobalt);
}

.calc__input--light input { color: var(--cobalt); }
.calc__input--light span { color: var(--steel); }

.ctrl { margin-top: 1.35rem; }

.ctrl label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  text-transform: none;
  font-size: 0.95rem;
  letter-spacing: 0;
}

.ctrl output { font-weight: 700; color: var(--cream); }

/* Track is drawn on the pseudo-element so the input itself can stay a 26px
   tall touch target instead of a 4px hairline. */
.ctrl input[type="range"] {
  width: 100%;
  height: 26px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.ctrl input[type="range"]::-webkit-slider-runnable-track,
.ctrl input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(251, 249, 241, 0.28);
}

.ctrl input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--cobalt);
  border: 3px solid var(--cream);
}

.ctrl input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cobalt);
  border: 3px solid var(--cream);
}

/* The result reads as a receipt: one number that lands, then the workings
   under it on hairlines. No cards — the subject is money, not features. */
.ledger { padding-top: 0.25rem; }

.ledger__headline {
  margin: 0;
  font-size: clamp(3rem, 7vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--good-light);
}

.ledger__caption {
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
  color: var(--steel-light);
}

.ledger__rows {
  margin: 1.75rem 0 0;
  border-top: 1px solid rgba(251, 249, 241, 0.22);
}

.ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(251, 249, 241, 0.14);
}

.ledger__row dt {
  font-size: 0.97rem;
  color: var(--steel-light);
}

.ledger__row dd {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.ledger__row .is-good { color: var(--good-light); }

.ledger__row--total {
  border-bottom: 0;
  padding-top: 1.1rem;
  border-top: 2px solid rgba(251, 249, 241, 0.28);
}

.ledger__row--total dt { color: var(--cream); font-weight: 500; }
.ledger__row--total dd { font-size: 1.6rem; }
.ledger .calc__unit { color: var(--steel-light); }

/* ---------- pricing ---------- */

.pricing {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
  margin-top: 2.5rem;
}

.plan {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.plan--featured { border: 2px solid var(--cobalt); }

.plan__badge {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(30, 80, 192, 0.1);
  color: var(--cobalt);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
}

.plan__price s { color: var(--steel); font-size: 1.25rem; }

.plan__price strong {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan__price--small { gap: 0.15rem; margin-bottom: 0.75rem; }
.plan__price--small strong { font-size: 1.9rem; }
.plan__price--small span { color: var(--steel); font-weight: 600; }

.plan__note { color: var(--ink-soft); margin: 0.5rem 0 1.25rem; }

.plan__ready { margin: 1.35rem 0 1rem; font-weight: 600; }

.plan__fine { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }

.plan--small { margin-top: 1rem; }
.plan--small h4 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.plan--small p { color: var(--ink-soft); font-size: 0.95rem; }

.plan-side__title { margin: 0; font-size: 1.35rem; }
.plan-side__sub { color: var(--ink-soft); margin: 0; }

/* ---------- faq ---------- */

.faq { margin-top: 2rem; border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-size: 1.08rem;
  font-weight: 600;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: 0.6rem;
  top: 1.5rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--steel);
  border-bottom: 2px solid var(--steel);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }

.faq p { margin: 0 0 1.25rem; color: var(--ink-soft); max-width: 65ch; }

/* Open animates; closing snaps. Animating a <details> shut needs
   ::details-content + calc-size(), which is not broadly supported yet. */
.faq details[open] p { animation: rise-in 300ms var(--ease-out) both; }

.faq details:nth-child(2) { --enter-delay: 60ms; }
.faq details:nth-child(3) { --enter-delay: 120ms; }
.faq details:nth-child(4) { --enter-delay: 180ms; }
.faq details:nth-child(5) { --enter-delay: 240ms; }

/* ---------- closing + footer ---------- */

.closing { text-align: center; }
.closing .lede { margin-left: auto; margin-right: auto; }

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.75rem;
}

.site-footer {
  background: var(--cream);
  color: var(--ink-soft);
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.site-footer .brand { color: var(--ink); margin-right: 0; }
.site-footer .brand__mark { height: 2rem; }
.site-footer .brand__name { font-size: 1.05rem; }
.site-footer__tag { margin: 0; margin-right: auto; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__links a { display: inline-block; padding: 0.25rem 0; text-decoration: none; }
.site-footer__links a:hover { color: var(--cobalt); text-decoration: underline; }

.site-footer__legal { margin: 0; width: 100%; color: rgba(26, 59, 86, 0.5); }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .site-header__cta { display: none; }
  .burger { display: grid; }
  .brand { margin-right: auto; margin-left: 0.75rem; }
  .nav__cta { display: block; }
  .brand__slogan { font-size: 0.5rem; letter-spacing: 0.07em; }

  /* The dropdown gives way to the flat row inside the open menu. */
  .lang { display: none; }
  .nav__langs { display: block; margin-top: 0.35rem; padding: 0.75rem 0.75rem 0.5rem; border-top: 1px solid var(--line); }

  .nav__langs-label {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel);
  }

  .nav__langs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }

  /* Scoped through .nav deliberately: the generic `.nav a` panel-link rule
     below has the same specificity and would otherwise win on source order,
     turning these back into full-width blocks. */
  .nav .nav__langs-row a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
  }

  .nav .nav__langs-row a:hover { background: rgba(66, 120, 167, 0.1); }

  .nav .nav__langs-row a[aria-current='true'] {
    background: rgba(66, 120, 167, 0.14);
    color: var(--cobalt);
  }

  /*
   * Open and close are one transition played in both directions, so closing is
   * exactly the reverse of opening — no second set of keyframes to keep in
   * sync. `display` is transitioned with `allow-discrete` so the panel stays
   * laid out until the closing run finishes; `@starting-style` supplies the
   * frame it animates *from* on the way in.
   *
   * Revealed by clip rather than by moving it: the panel is a positioned
   * descendant of the header, so translating it up would slide it across the
   * logo and burger instead of out from behind them. Clipping from the top edge
   * downward keeps it strictly below the header. The open state insets a
   * negative bottom so the drop shadow is not clipped away once it settles.
   */
  .nav {
    position: absolute;
    z-index: 26;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    padding: 0.5rem;
    /* Same surface as .site-header, so the panel reads as the header itself
       extending downward rather than as a separate white card. */
    background: rgba(251, 249, 241, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    opacity: 0.4;
    clip-path: inset(0 0 100% 0);
    transition:
      opacity 260ms var(--ease-out),
      clip-path 260ms var(--ease-out),
      display 260ms allow-discrete;
  }

  .nav.open {
    display: block;
    opacity: 1;
    clip-path: inset(0 0 -100% 0);
  }

  @starting-style {
    .nav.open {
      opacity: 0.4;
      clip-path: inset(0 0 100% 0);
    }
  }

  .nav__list { flex-direction: column; gap: 0; }

  .nav a {
    display: block;
    padding: 0.9rem 0.75rem;
    border-radius: 0.6rem;
    font-size: 1rem;
    color: var(--ink);
  }

  .nav a:hover { background: rgba(66, 120, 167, 0.1); }
  .nav a::after { display: none; }

  .nav__cta a { color: var(--cobalt); font-weight: 600; }

  /* Slower than the panel, so the overlay settles in behind it — and, in
     reverse, lingers a moment after the panel has gone. */
  .nav-scrim.open { display: block; opacity: 1; }

  @starting-style {
    .nav-scrim.open { opacity: 0; }
  }

  .split,
  .breakdown,
  .pricing { grid-template-columns: minmax(0, 1fr); }

  .loop { margin-top: 0.5rem; }

  .flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.5rem;
    margin-top: 3.5rem;
  }

  /* Stacked, the chevron turns to point down into the next step. */
  .flow__step + .flow__step::before {
    left: 50%;
    top: -2.25rem;
    transform: translate(-50%, -50%) rotate(135deg);
  }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .btn { width: 100%; }

  /* The burger takes 44px out of the row, so the lockup shrinks to keep the
     slogan on one line down to a 320px viewport. */
  .site-header .brand__mark { height: 3rem; }
  .brand__name { font-size: 1.3rem; }
  .brand__slogan { font-size: 0.46rem; letter-spacing: 0.04em; }

  .compare th,
  .compare td { padding: 0.7rem 0.5rem; font-size: 0.85rem; }
  .compare thead th { font-size: 0.68rem; letter-spacing: 0.04em; }
  .compare tbody th { font-size: 0.85rem; }
  .compare .amount { font-size: 1.5rem; }
  .hero__actions .btn,
  .closing__actions .btn { flex: 1 1 100%; }
  .hero { min-height: clamp(340px, 62vh, 460px); }
}

/* iOS Safari and most touch browsers either ignore `background-attachment:
   fixed` or repaint the whole layer on every scroll frame. Give them a plain
   scrolling background instead of a janky fake parallax. */
@media (hover: none), (pointer: coarse) {
  .hero {
    background-attachment: scroll;
    background-position: center 45%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /*
     * Required, not cosmetic: the rules above collapse duration but leave delay
     * intact, and `animation-fill-mode: both` would then hold a staggered block
     * at opacity 0 for the whole delay. A negative delay starts every animation
     * already finished, so content is simply present.
     */
    animation-delay: -1ms !important;
    transition-delay: 0ms !important;
  }

  .btn:hover { transform: none; }
  .hero { background-attachment: scroll; }

  /* Same reasoning for the scroll reveals: show them outright rather than
     relying on an observer that fires only when something scrolls. */
  .js .reveal { opacity: 1; transform: none; }
}