/* Design system: "engineered", not Apple, dark only. Barlow (road-sign
   grotesk) for body, Barlow Semi Condensed for headlines and big numbers,
   hairline borders on an asphalt ground, tight corners, rectangular buttons.
   The brand blue #1a04ff fills the hero card, Autobahn card, tags and CTA;
   Small text stays off-white or grey; links get a blue underline.
   Plain CSS, mobile first, no build step. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-semicond-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-semicond-700.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --blau: #1a04ff;
  --blau-deep: #1203b8;
  --weiss: #ffffff;
  --bg: #111214;
  --bg-deep: #0b0c0d;
  --card: #16181b;
  --card-2: #1c1f23;
  --ink: #ecebe7;
  --ink-2: #9ea3aa;
  --surface: #16181b;
  --surface-2: #23272c;
  --line: #262a30;
  --line-strong: #3a3f47;
  --rot: #ff6b6b;

  --font: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Barlow Semi Condensed", "Barlow", "Arial Narrow", Arial, sans-serif;

  --radius-xl: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --pill: 8px;
  --gutter: 1.25rem;
  --container: 68rem;
  --narrow: 44rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 84px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.5;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
/* Links: off-white with a brand-blue underline (the blue itself is too dark
   to read as small text on the dark ground). */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blau); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-color: currentColor; }
.brand, .btn, .menu__links a, .menu__pkgs a, .menu__trades a, .sign__exits a, .trade, .guide-card, .footer__links a, .skip { text-decoration: none; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.sign :focus-visible, .pkg--popular :focus-visible { outline-color: var(--weiss); }
.header :focus-visible, .menu :focus-visible { outline-offset: 2px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--narrow); }
.center { text-align: center; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: .5rem 1rem; z-index: 100; border-radius: var(--radius-sm); }
.skip:focus { left: 1rem; top: 1rem; }
.icon { width: 1.15em; height: 1.15em; flex: none; }

/* Header: wordmark, one CTA, one Menu button on every viewport. */
.header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__logo { display: block; width: auto; height: 52px; }
@media (min-width: 960px) { .brand__logo { height: 60px; } .header__inner, .menu__bar { min-height: 72px; } }
.header__actions { display: flex; align-items: center; gap: .5rem; }
.header .header__cta { display: none; }
@media (min-width: 560px) { .header .header__cta { display: inline-flex; } }
.menu-btn {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 40px; padding: .4rem .9rem .4rem .75rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--ink);
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
}
.menu-btn:hover { border-color: var(--ink); }
.menu-btn__icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; height: 18px; }
.menu-btn__icon i { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .25s, opacity .25s; }
.menu-btn--close .menu-btn__icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn--close .menu-btn__icon i:nth-child(2) { opacity: 0; }
.menu-btn--close .menu-btn__icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-fallback { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding-block: .5rem; font-weight: 600; }

/* Page transitions: the header holds still while the page under it fades
   over with a small lift. Browsers without cross-document view transitions
   just load the page. Leaving from the open menu, the whole screen fades.
   The opt-in (@view-transition) is inline in <head>, see layout.templ. */
@media (prefers-reduced-motion: no-preference) {
  .header { view-transition-name: header; }
  :root:has(.menu[open]) .header { view-transition-name: none; }
  ::view-transition-old(root) { animation: page-out .12s ease-out both; }
  ::view-transition-new(root) { animation: page-in .26s cubic-bezier(.2,.7,.2,1) .06s both; }
  @keyframes page-out { to { opacity: 0; } }
  @keyframes page-in { from { opacity: 0; transform: translateY(12px); } }
}

/* Fullscreen slide-out menu (native <dialog>). */
.menu {
  position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink); overflow-y: auto;
}
.menu::backdrop { background: transparent; }
.menu[open] { animation: menu-in .45s cubic-bezier(.2,.7,.2,1); }
.menu.is-closing { animation: menu-out .3s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes menu-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes menu-out { from { transform: none; } to { transform: translateX(100%); } }
html:has(.menu[open]) { overflow: hidden; }
.menu__bar { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--line); }
.menu__grid { display: grid; gap: 2.5rem; padding-block: clamp(1.5rem, 5vh, 4rem) 3rem; }
@media (min-width: 900px) { .menu__grid { grid-template-columns: 1.3fr 1fr; gap: 4rem; padding-top: clamp(2rem, 8vh, 6rem); } }
.menu__links { display: grid; }
.menu__links li { border-bottom: 1px solid var(--line); }
.menu__links a {
  display: flex; align-items: center; justify-content: space-between; padding: .6rem 0;
  font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 5.5vw, 3.75rem); line-height: 1.1; color: var(--ink);
}
.menu__links a::after { content: "→"; font-family: var(--font); font-weight: 400; font-size: .5em; color: var(--line-strong); transition: transform .2s, color .2s; }
.menu__links a:hover { text-decoration: none; color: var(--blau); }
.menu__links a:hover::after { transform: translateX(6px); color: var(--blau); }
.menu__links a[aria-current="page"] { color: var(--blau); }
.menu[open] .menu__links li { animation: menu-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.menu[open] .menu__links li:nth-child(1) { animation-delay: .08s; }
.menu[open] .menu__links li:nth-child(2) { animation-delay: .12s; }
.menu[open] .menu__links li:nth-child(3) { animation-delay: .16s; }
.menu[open] .menu__links li:nth-child(4) { animation-delay: .2s; }
.menu[open] .menu__links li:nth-child(5) { animation-delay: .24s; }
.menu[open] .menu__links li:nth-child(6) { animation-delay: .28s; }
.menu[open] .menu__links li:nth-child(7) { animation-delay: .32s; }
.menu[open] .menu__links li:nth-child(8) { animation-delay: .36s; }
.menu[open] .menu__aside { animation: menu-rise .5s cubic-bezier(.2,.7,.2,1) .25s both; }
@keyframes menu-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.menu__title { font-size: 1.1rem; font-family: var(--font); font-weight: 600; color: var(--ink-2); margin: 0 0 .75rem; }
.menu__pkgs { display: grid; gap: .5rem; margin-bottom: 2rem; }
.menu__pkgs a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 1rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); }
.menu__pkgs a:hover { text-decoration: none; border-color: var(--blau); }
.menu__trades { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.menu__trades a { display: block; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; }
.menu__trades a:hover, .menu__trades a[aria-current="page"] { text-decoration: none; border-color: var(--blau); }
.menu__pkg-name { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; }
.menu__pkg-sub { grid-row: 2; font-size: .85rem; color: var(--ink-2); }
.menu__pkg-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--ink-2); }
.menu__contact { color: var(--ink-2); margin-bottom: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .menu[open], .menu.is-closing, .menu[open] .menu__links li, .menu[open] .menu__aside { animation: none; } }

/* Hero card: speed streaks and light (see Light effects below). */
.sign--hero { position: relative; overflow: hidden; isolation: isolate; }
.sign--hero > * { position: relative; z-index: 1; }
/* Speed streaks: two layers of the same streak tile drift right at different
   speeds (a hint of depth). Only transforms move, so it stays on the
   compositor; the fade toward the text sits on the still wrapper. */
.sign--hero > .sign__streaks {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 20%, #000 85%); mask-image: linear-gradient(to right, transparent 20%, #000 85%);
}
.sign__streaks::before, .sign__streaks::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -520px; right: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='140'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='.4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url%28%23g%29'%3E%3Crect x='30' y='10' width='180' height='1.5' rx='.75'/%3E%3Crect x='300' y='22' width='120' height='1.5' rx='.75'/%3E%3Crect x='120' y='38' width='260' height='1.5' rx='.75'/%3E%3Crect x='420' y='50' width='80' height='1.5' rx='.75'/%3E%3Crect x='10' y='66' width='140' height='1.5' rx='.75'/%3E%3Crect x='230' y='78' width='200' height='1.5' rx='.75'/%3E%3Crect x='60' y='96' width='110' height='1.5' rx='.75'/%3E%3Crect x='330' y='108' width='170' height='1.5' rx='.75'/%3E%3Crect x='170' y='124' width='90' height='1.5' rx='.75'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 520px 140px;
}
.sign__streaks::after { left: -390px; background-size: 390px 105px; background-position: 0 40px; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .sign__streaks::before { animation: streak-near 22s linear infinite; will-change: transform; }
  .sign__streaks::after { animation: streak-far 34s linear infinite; will-change: transform; }
  @keyframes streak-near { to { transform: translateX(520px); } }
  @keyframes streak-far { to { transform: translateX(390px); } }
}

/* Hero with photo */
.sign--split { display: grid; gap: 2rem; align-items: center; }
.sign__media { position: relative; margin: 0; }
.sign__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 960px) {
  .sign--split { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
  .sign--split .sign__title { font-size: clamp(2.75rem, 5.6vw, 4.75rem); }
  .sign__photo img { aspect-ratio: 1 / 1; object-position: 30% 50%; }
}

/* Home hero phones: the four template sites taking turns in front, rising
   from the bottom edge of the hero (the card clips them). Everything is
   sized from the box's width (--w, one phone), so they never grow into the
   text. Slots: front (centre), left and right (smaller, behind) and back
   (hidden behind the front one). One 16 s loop moves each phone front ->
   left -> back -> right -> front; the delays start them in different slots.
   Each move eases out, so it starts on the same frame as the stacking and
   fade change and settles softly. Static: left, front, right. */
.hero-phones { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; aspect-ratio: 1.6; container-type: inline-size; }
.hero-phone {
  --w: 41cqi;
  --front: translateY(calc(var(--w) * .04));
  --left: translate(calc(var(--w) * -.78), calc(var(--w) * .3)) scale(.84);
  --right: translate(calc(var(--w) * .78), calc(var(--w) * .3)) scale(.84);
  --back: translateY(calc(var(--w) * .4)) scale(.7);
  position: absolute; top: 0; left: 50%; width: var(--w); margin-left: calc(var(--w) * -.5);
  border: 6px solid #15181d; border-radius: 28px; background: #15181d; transform-origin: 50% 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 24px 50px -12px rgba(8,4,60,.65);
}
.hero-phone img { display: block; width: 100%; height: auto; border-radius: 22px; }
.hero-phone:nth-child(1) { z-index: 2; transform: var(--left); }
.hero-phone:nth-child(2) { z-index: 4; transform: var(--front); }
.hero-phone:nth-child(3) { z-index: 3; transform: var(--right); }
.hero-phone:nth-child(4) { z-index: 1; transform: var(--back); opacity: 0; }
@media (min-width: 960px) {
  .sign--phones { grid-template-columns: 1fr 1fr; }
  .sign--phones .hero-phones { align-self: end; max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-phone { animation: phone-turn 16s cubic-bezier(.22,1,.36,1) infinite; }
  .hero-phone:nth-child(1) { animation-delay: -4s; }
  .hero-phone:nth-child(3) { animation-delay: -12s; }
  .hero-phone:nth-child(4) { animation-delay: -8s; }
  @keyframes phone-turn {
    0%, 20% { z-index: 4; opacity: 1; transform: var(--front); }
    20.01% { z-index: 2; }
    25%, 45% { z-index: 2; opacity: 1; transform: var(--left); }
    45.01% { z-index: 1; }
    50%, 70% { z-index: 1; opacity: 0; transform: var(--back); }
    70.01% { z-index: 3; }
    75%, 95% { z-index: 3; opacity: 1; transform: var(--right); }
    95.01%, 100% { z-index: 4; }
    100% { opacity: 1; transform: var(--front); }
  }
}

/* Booking demo: a phone that sends a booking request on a 14 s loop.
   Screen 1: service, time of day, Continue. Screen 2: name, phone, address
   type themselves in, Send request. Then "Request sent". */
.demo { overflow-x: clip; }
.demo__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .demo__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.demo__steps { display: grid; margin-top: 1.75rem; }
.demo__steps li { padding-block: .8rem; color: var(--ink-2); text-wrap: pretty; }
.demo__steps li + li { border-top: 1px solid var(--line); }
.demo__steps strong { color: var(--ink); }
.demo__stage { display: flex; justify-content: center; }
.phone { width: 290px; height: 590px; box-sizing: border-box; --ink: #15181d; --ink-2: #5f6670; --line: #d6dae1; --line-strong: #b9bfc9; --surface: #f6f7f9; border: 11px solid #2a2e34; border-radius: 46px; background: var(--weiss); box-shadow: 0 0 0 1px #3a3f47, 0 30px 80px rgba(0,0,0,.55); position: relative; }
.phone::before { content: ""; position: absolute; top: 8px; left: 50%; width: 84px; height: 22px; margin-left: -42px; border-radius: 12px; background: #2a2e34; z-index: 3; }
.phone__screen { position: absolute; inset: 0; border-radius: 35px; overflow: hidden; font-size: 14px; color: var(--ink); background: #fbfcfd; }
.bk__track { display: flex; width: 200%; height: 100%; }
.bk__pane { width: 50%; height: 100%; box-sizing: border-box; padding: 46px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.bk__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.bk__logo { width: 22px; height: 22px; border-radius: 6px; background: var(--blau); }
.bk__label { margin: 8px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.bk__summary { margin: 0; padding: 9px 12px; border-radius: 10px; background: #ebe9ff; color: var(--blau); font-weight: 600; font-size: 13px; }
.bk__opt { position: relative; display: flex; justify-content: space-between; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--weiss); font-weight: 600; }
.bk__opt span:last-child { color: var(--ink-2); font-weight: 500; }
.bk__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bk__slots span { position: relative; text-align: center; padding: 8px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--weiss); font-weight: 600; font-variant-numeric: tabular-nums; }
.bk__field { height: 40px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--weiss); font-weight: 500; }
.bk__type { display: inline-block; white-space: nowrap; }
.bk__btn { position: relative; margin-top: auto; padding: 13px; border-radius: 10px; background: var(--ink); color: var(--weiss); text-align: center; font-weight: 700; }
.bk__tap { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(26,4,255,.3); opacity: 0; pointer-events: none; }
.bk__done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 20px; background: #fbfcfd; text-align: center; opacity: 0; }
.bk__done strong { font-family: var(--font-head); font-size: 26px; }
.bk__done span { color: var(--ink-2); }
.bk__done small { margin-top: 8px; color: var(--ink-2); }
.bk__done .bk__check { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 50%; background: var(--blau); color: var(--weiss) !important; margin-bottom: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .bk__opt--pick { animation: bk-pick 14s infinite; }
  .bk__slot--pick { animation: bk-slot 14s infinite; }
  .bk__btn--next { animation: bk-press-next 14s infinite; }
  .bk__btn--book { animation: bk-press-book 14s infinite; }
  .bk__track { animation: bk-slide 14s infinite; }
  .bk__type--1 { animation: bk-type-1 14s infinite steps(11); }
  .bk__type--2 { animation: bk-type-2 14s infinite steps(14); }
  .bk__type--3 { animation: bk-type-3 14s infinite steps(20); }
  .bk__tap--1 { animation: bk-tap-1 14s infinite; }
  .bk__tap--2 { animation: bk-tap-2 14s infinite; }
  .bk__tap--3 { animation: bk-tap-3 14s infinite; }
  .bk__tap--4 { animation: bk-tap-4 14s infinite; }
  .bk__done { animation: bk-done 14s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .bk__opt--pick { border-color: var(--blau); background: #ebe9ff; }
  .bk__slot--pick { border-color: var(--blau) !important; background: var(--blau) !important; color: var(--weiss); }
}
/* timeline (14 s): 9% service, 19% time, 27% Continue, 30-34% slide,
   38-47% name, 49-58% phone, 60-70% address, 76% Book, 80-92% booked */
@keyframes bk-pick { 0%, 9% { border-color: var(--line); background: var(--weiss); } 10%, 96% { border-color: var(--blau); background: #ebe9ff; } 100% { border-color: var(--line); background: var(--weiss); } }
@keyframes bk-slot { 0%, 19% { border-color: var(--line); background: var(--weiss); color: var(--ink); } 20%, 96% { border-color: var(--blau); background: var(--blau); color: var(--weiss); } 100% { border-color: var(--line); background: var(--weiss); color: var(--ink); } }
@keyframes bk-press-next { 0%, 26% { background: var(--ink); transform: none; } 27% { background: var(--blau); transform: scale(.97); } 29%, 100% { background: var(--ink); transform: none; } }
@keyframes bk-press-book { 0%, 75% { background: var(--ink); transform: none; } 76% { background: var(--blau); transform: scale(.97); } 78%, 100% { background: var(--blau); transform: none; } }
@keyframes bk-slide { 0%, 30% { transform: translateX(0); } 34%, 96% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@keyframes bk-type-1 { 0%, 38% { clip-path: inset(0 100% 0 0); } 47%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes bk-type-2 { 0%, 49% { clip-path: inset(0 100% 0 0); } 58%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes bk-type-3 { 0%, 60% { clip-path: inset(0 100% 0 0); } 70%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes bk-tap-1 { 0%, 7% { opacity: 0; transform: scale(.4); } 9% { opacity: 1; transform: scale(1); } 13%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes bk-tap-2 { 0%, 17% { opacity: 0; transform: scale(.4); } 19% { opacity: 1; transform: scale(1); } 23%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes bk-tap-3 { 0%, 25% { opacity: 0; transform: scale(.4); } 27% { opacity: 1; transform: scale(1); } 31%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes bk-tap-4 { 0%, 74% { opacity: 0; transform: scale(.4); } 76% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes bk-done { 0%, 79% { opacity: 0; transform: translateY(10px); } 83%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

/* The shop's side: their week, next to the phone on wide screens and
   under it on narrow ones. The phone's request arrives as a notification
   over the week's bottom edge at 81 % of the same 14 s loop, right as the
   phone shows "Request sent". Reduced motion shows the notification. */
.demo__stage { flex-direction: column; align-items: center; }
.demo__week { position: relative; width: min(100%, 22rem); margin-top: 1.5rem; }
@media (min-width: 900px) {
  .demo__grid { grid-template-columns: .75fr 1.25fr; }
  .demo__stage { flex-direction: row; justify-content: flex-start; }
  .demo__stage .phone { flex: none; }
  .demo__week { width: auto; flex: 1; max-width: 24rem; margin: 0 0 0 1.25rem; }
}
.cal {
  container-type: inline-size; padding: 14px 14px 18px 12px; border-radius: 20px; background: #fff; color: #15181d;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 70px rgba(0,0,0,.5);
}
.cal__title { margin: 0 0 .6rem; font-weight: 600; font-size: .9rem; }
.cal__grid { display: grid; grid-template-columns: 2.4rem repeat(6, minmax(0, 1fr)); gap: 4px; }
.cal__day { padding-bottom: 4px; font: 500 .62rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; text-align: center; }
.cal__time { padding-top: 5px; font: 500 .6rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #9aa0aa; white-space: nowrap; }
.cal__cell { height: 2.75rem; border-radius: 6px; background: #f2f3f6; }
.cal__chip { display: flex; align-items: center; justify-content: center; height: 100%; padding: 2px; border-radius: 6px; background: #dde1e8; color: #4b5260; text-align: center; font-weight: 600; font-size: .64rem; line-height: 1.1; overflow: hidden; }
@container (max-width: 15rem) { .cal__chip { font-size: 0; } }
.cal__toast {
  position: absolute; z-index: 2; left: 8%; right: -.75rem; bottom: -1.6rem; display: flex; align-items: center; gap: .6rem;
  padding: 10px 12px 10px 10px; border-radius: 16px; background: #fff; color: #15181d;
  box-shadow: 0 0 0 1px rgba(21,24,29,.08), 0 16px 40px rgba(0,0,0,.45);
}
.cal__icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 6px; background: var(--blau); color: var(--weiss); }
.cal__icon .icon { width: 16px; height: 16px; }
.cal__text { display: grid; min-width: 0; line-height: 1.25; }
.cal__text strong { font-size: .8rem; }
.cal__text span { font-size: .74rem; color: #5f6670; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__price { margin-left: auto; font-weight: 600; font-size: .82rem; }
@media (prefers-reduced-motion: no-preference) {
  .cal__toast { animation: bk-cal-toast 14s infinite; }
}
@keyframes bk-cal-toast {
  0%, 80.5% { opacity: 0; transform: translateY(10px); }
  83.5%, 94% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}

/* Speed card: gauges + code window */
.speed__grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .speed__grid { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }
.gauges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (min-width: 560px) { .gauges { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .gauges { grid-template-columns: repeat(2, 1fr); } }
.gauge { position: relative; display: grid; justify-items: center; gap: .5rem; text-align: center; }
.gauge svg { width: 112px; height: 112px; transform: rotate(-90deg); }
.gauge__track { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.gauge__value { fill: none; stroke: var(--blau); stroke-width: 9; stroke-linecap: round; }
.gauge__num { position: absolute; top: 0; width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 2.1rem; font-variant-numeric: tabular-nums; }
.gauge__label { font-weight: 600; font-size: .95rem; }
.speed__note { margin-top: 1.5rem; color: var(--ink-2); font-size: .95rem; }
@media (prefers-reduced-motion: no-preference) {
  .gauge__value { animation: gauge-fill 1.4s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes gauge-fill { from { stroke-dasharray: 0 100; } }
}
.codewin { margin: 0; border-radius: var(--radius-xl); overflow: hidden; background: #0c0d0f; border: 1px solid var(--line); }
.codewin__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: var(--card); }
.codewin__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.codewin__bar span { margin-left: 8px; font-size: .8rem; color: var(--ink-2); }
.codewin pre { margin: 0; padding: 1.25rem 1.4rem; overflow-x: auto; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.codewin pre::-webkit-scrollbar { height: 6px; }
.codewin pre::-webkit-scrollbar-track { background: transparent; }
.codewin pre::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.codewin figcaption { padding: .9rem 1.4rem 1.2rem; font-size: .9rem; color: var(--ink-2); border-top: 1px solid var(--line); }
.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; }

/* Home and /templates: name form into the builder */
.mockup__form { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; max-width: 34rem; margin: 1.25rem auto 0; }
.mockup__form .field__input { flex: 1 1 16rem; width: auto; }

/* Builder on /mockup (live demo in a device frame) */
.mkb .container { max-width: 90rem; }
.mkb__head { max-width: 44rem; margin-bottom: 1.75rem; }
.mkb__controls { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
@media (min-width: 900px) { .mkb__controls { grid-template-columns: minmax(14rem, 20rem) 1fr; align-items: start; column-gap: 2rem; } }
.mkb__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.mkb__group legend { margin-bottom: .4rem; padding: 0; }
.mkb__pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.mkb__pill { position: relative; }
.mkb__pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mkb__pill span, .mkb__device { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); font: inherit; font-weight: 600; font-size: .95rem; color: var(--ink); cursor: pointer; }
.mkb__pill input:checked + span, .mkb__device[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.mkb__pill input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.mkb__colors { display: flex; flex-wrap: wrap; gap: .5rem; }
.mkb__color { display: inline-flex; align-items: center; gap: .55rem; min-height: 40px; padding: .3rem .9rem .3rem .3rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); font-weight: 600; font-size: .95rem; cursor: pointer; }
.mkb__color:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.mkb__color input { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.mkb__color input:focus-visible { outline: none; }
.mkb__color input::-webkit-color-swatch-wrapper { padding: 0; }
.mkb__color input::-webkit-color-swatch { border: 0; border-radius: 5px; }
.mkb__color input::-moz-color-swatch { border: 0; border-radius: 5px; }
.mkb__color[hidden] { display: none; }
.mkb__hint { margin: .45rem 0 0; font-size: .9rem; color: var(--ink-2); }
.mkb__device:disabled { opacity: .35; cursor: not-allowed; }
.mkb__submit { justify-self: start; }
.js .mkb__submit { display: none; }
.mkb__stage { display: flex; justify-content: center; padding: 1.5rem 0; background: var(--surface); border-radius: var(--radius-xl); overflow: hidden; }
/* Scaled with transform, not zoom: iOS Safari lays out a zoomed iframe at the
   wrong width. The negative margin gives back the height the scale saves. */
.mkb__device-frame { --w: 390px; --h: 760px; width: var(--w); flex: none; height: var(--h); transform: scale(var(--s, 1)); transform-origin: top center; margin-bottom: calc(var(--h) * (var(--s, 1) - 1)); border: 10px solid #2a2e34; border-radius: 40px; overflow: hidden; background: var(--weiss); box-shadow: 0 24px 50px rgba(21,24,29,.16); }
.mkb__stage[data-device="tablet"] .mkb__device-frame { --w: 820px; --h: 820px; border-radius: 28px; }
.mkb__stage[data-device="desktop"] .mkb__device-frame { --w: 1280px; --h: 760px; border-width: 28px 10px 10px; border-radius: 14px; }
.mkb__frame { display: block; width: 100%; height: 100%; border: 0; }
.mkb__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.mkb__cta p { margin: 0; color: var(--ink-2); max-width: 44rem; }
.mkb__cta p a { font-weight: 600; white-space: nowrap; }

/* Booth kiosk (/booth) on the trade-show tablet: a bar with the mark and the
   domain, then controls, the phone and the QR code in one screen, no
   scrolling. In portrait the code moves under the controls. */
.kiosk-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding-inline: 1.25rem; border-bottom: 1px solid var(--line); -webkit-user-select: none; user-select: none; }
.kiosk-bar .brand__logo { height: 48px; }
.kiosk-bar__domain { margin: 0; font: 700 1.35rem/1 var(--font-head); letter-spacing: .01em; }
.booth { display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr) minmax(12rem, 16rem); gap: 1.25rem; height: calc(100dvh - 65px); padding: 1.25rem; }
.booth__controls { min-height: 0; overflow-y: auto; }
.booth__title { font-size: clamp(1.9rem, 3vw, 2.5rem); margin-bottom: 1.25rem; }
.booth .mkb__controls { grid-template-columns: minmax(0, 1fr); margin: 0; }
.booth .mkb__name .field__input { min-height: 56px; font-size: 1.25rem; }
.booth .mkb__pill span, .booth .mkb__color { min-height: 48px; }
.booth .mkb__stage { height: 100%; min-height: 0; padding: 12px 0; align-items: center; }
.booth__take { display: flex; flex-direction: column; justify-content: center; gap: 1rem; min-height: 0; }
.booth__take-title { font-size: 1.6rem; }
.booth__qr { width: 100%; max-width: 16rem; height: auto; aspect-ratio: 1; border-radius: var(--radius); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.booth__launch { margin: 0; color: var(--ink-2); text-wrap: pretty; }
/* Until someone starts, the name field glows to say "start here". */
.booth .is-idle .mkb__name .field__input { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(26,4,255,.45); }
@media (prefers-reduced-motion: no-preference) {
  .booth .is-idle .mkb__name .field__input { animation: booth-call 2.4s ease-in-out infinite; }
  @keyframes booth-call { 50% { box-shadow: 0 0 0 8px rgba(26,4,255,.15); } }
}
@media (max-width: 63.99rem) {
  .booth { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); grid-template-rows: auto minmax(0, 1fr); }
  .booth .mkb__stage { grid-column: 2; grid-row: 1 / span 2; }
  .booth__take { justify-content: flex-start; }
  .booth__qr { max-width: 12rem; }
}
@media (max-width: 39.99rem) {
  .booth { display: flex; flex-direction: column; height: auto; }
  .booth .mkb__stage { height: 75dvh; flex: none; }
}

/* Job photo strip */

/* Inline photos */
.aside__figure { margin: 0 0 2rem; }
.aside__photo img, .duo__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.aside__figure figcaption { margin-top: .6rem; color: var(--ink-2); font-size: .95rem; }
.duo { display: grid; gap: 1rem; margin-block: 1.5rem 2.5rem; }
@media (min-width: 720px) { .duo { grid-template-columns: 1fr 1fr; } }

/* About: why a detailer builds websites */
.why { display: grid; gap: 2.5rem; align-items: start; }
.why__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.why__photos figure { margin: 0; }
.why__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius); }
.why__photos figcaption { margin-top: .6rem; color: var(--ink-2); font-size: .9rem; }
.work { display: grid; gap: .75rem; margin-top: 2rem; }
.work__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.25rem; }
.work__title { font-size: 1.3rem; margin: 0 0 .25rem; }
.work__item p { margin: 0; color: var(--ink-2); }
@media (min-width: 960px) { .why { grid-template-columns: 1.2fr 1fr; gap: 4rem; } .why__photos { position: sticky; top: 90px; } }

/* Buttons: pills. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: .7rem 1.3rem; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.96); }
.btn--sm { min-height: 36px; padding: .4rem 1rem; font-size: .9rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--primary:hover { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--ink); }
.btn--light { background: var(--weiss); color: var(--blau); border-color: var(--weiss); }
.btn--light:hover { background: var(--bg); border-color: var(--bg); color: var(--weiss); }
.btn--ghost-light { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,.55); }
.btn--ghost-light:hover { border-color: var(--weiss); background: rgba(255,255,255,.1); color: var(--weiss); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Hero card: the one blue Autobahn sign per page. */
.hero { padding-block: 1rem clamp(2rem, 6vw, 4rem); }
.hero:has(+ .strip) { padding-bottom: 0; }
.sign {
  background: var(--blau); color: var(--weiss);
  border-radius: var(--radius-xl);
  --pad: clamp(2rem, 6vw, 4.5rem);
  padding: var(--pad);
}
.sign--hero { padding-top: clamp(2.75rem, 8vw, 5.5rem); }
.sign__title { font-size: clamp(2.75rem, 8.5vw, 5.5rem); font-weight: 700; letter-spacing: -0.015em; line-height: .98; max-width: 15ch; margin-bottom: 1rem; }
.sign__title--sm { font-size: clamp(2rem, 5.5vw, 3.25rem); }
.sign__sub { font-size: clamp(1.1rem, 2.1vw, 1.35rem); line-height: 1.4; max-width: 44ch; margin-bottom: 1.75rem; color: rgba(255,255,255,.88); text-wrap: pretty; }
.sign .btn-row { margin-bottom: .5rem; }
.sign__exits { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.sign__exits a {
  display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem;
  border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.55); color: var(--weiss); font-weight: 600; font-size: .95rem;
}
.sign__exits a:hover { background: var(--weiss); color: var(--blau); text-decoration: none; }
/* Light effects, all plain gradients: each block has its own road texture
   (::before, --tex) and a soft glow (::after, --glow-*). Hero: speed
   streaks, like light trails at speed, plus light from the corner. Autobahn card: the stripes of sign 282. Closing CTA:
   reflective dots like road-sign sheeting. Preview block: a blueprint grid. */
.sign--cta, .pkg--popular, .mockup { position: relative; overflow: hidden; isolation: isolate; }
.sign--cta::before, .pkg--popular::before, .mockup::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tex);
  -webkit-mask-image: var(--tex-mask); mask-image: var(--tex-mask);
}
.sign--hero::after, .sign--cta::after, .pkg--popular::after, .mockup::after, .demo__stage::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: var(--glow-x); top: var(--glow-y); width: var(--glow-w); height: var(--glow-h); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--glow), transparent);
}
.sign--hero { --glow: rgba(190,185,255,.3); --glow-x: 88%; --glow-y: 0%; --glow-w: 70%; --glow-h: 110%; }
.sign--cta {
  text-align: center;
  --tex: radial-gradient(circle, rgba(255,255,255,.2) 1px, transparent 1.6px) 0 0 / 8px 8px;
  --tex-mask: linear-gradient(to bottom, transparent 10%, #000 90%);
  --glow: rgba(190,185,255,.55); --glow-x: 50%; --glow-y: 105%; --glow-w: 80%; --glow-h: 80%;
}
.pkg--popular {
  --tex: repeating-linear-gradient(-45deg, rgba(255,255,255,.1) 0 3px, transparent 3px 15px);
  --tex-mask: radial-gradient(ellipse at 100% 0%, #000, transparent 65%);
  --glow: rgba(190,185,255,.3); --glow-x: 100%; --glow-y: 0%; --glow-w: 110%; --glow-h: 70%;
}
.mockup {
  --tex: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 32px 32px;
  --tex-mask: radial-gradient(ellipse at 50% 100%, #000, transparent 75%);
  --glow: rgba(26,4,255,.45); --glow-x: 50%; --glow-y: 110%; --glow-w: 90%; --glow-h: 90%;
}
/* Booking demo: the phone's screen lights the dark around it. */
.demo__stage { position: relative; isolation: isolate; --glow: rgba(26,4,255,.35); --glow-x: 50%; --glow-y: 50%; --glow-w: min(560px, 140%); --glow-h: 640px; }
.sign--cta .sign__title, .sign--cta .sign__sub { margin-inline: auto; }
.sign--cta .btn-row { justify-content: center; }
.sign--cta .trust { border-top-color: rgba(255,255,255,.25); color: rgba(255,255,255,.88); }
.sign--cta .trust .icon { color: var(--weiss); }

/* Trust strip */
.strip { }
.strip {  }
.strip__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 2rem; padding-block: 1rem; font-size: .95rem; color: var(--ink-2); text-align: center; }
.strip__item { margin: 0; }
.strip__item strong { color: var(--ink); }

/* Sections */
.section { padding-block: clamp(3rem, 8vw, 6.5rem); }
.section--grey { background: transparent; }
.section__head { margin-bottom: clamp(1.75rem, 4vw, 3rem); max-width: 42rem; }
.section__title { font-size: clamp(2.1rem, 5.2vw, 3.5rem); margin-bottom: .6rem; }
.section__sub { color: var(--ink-2); font-size: 1.15rem; margin: 0; text-wrap: pretty; }

/* Cards (shared) */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.5rem, 3.5vw, 2.25rem); }

/* Highlights carousel (home): scroll-snap track, one card in view with the
   next peeking, a segmented progress line with numbered labels underneath.
   Progress and autoplay come from site.js. */
.hl { padding-block: clamp(3rem, 8vw, 6.5rem); overflow-x: clip; }
.hl__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.hl__head .section__title { margin: 0; }
.hl__more { display: inline-flex; align-items: center; gap: .25rem; font-weight: 500; white-space: nowrap; padding-bottom: .35rem; }
.hl__more .icon { width: 1em; height: 1em; }
.hl__track { outline-offset: -3px; container-type: inline-size; }
/* The active card sits in the middle; the side padding lets the first and
   last one centre too. Cards are sized from the track (cqi), not the list,
   so padding and width don't depend on each other. */
.hl__list {
  --hl-w: min(52rem, 100cqi - 3rem);
  position: relative; display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-inline: calc((100cqi - var(--hl-w)) / 2);
  overscroll-behavior-x: contain;
}
.hl__list::-webkit-scrollbar { display: none; }
.hl__slide { flex: 0 0 var(--hl-w); scroll-snap-align: center; }
.hl__card {
  position: relative; height: 100%; min-height: clamp(24rem, 56vh, 32rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem);
  transition: transform .5s ease, opacity .5s ease;
}
.hl__slide:not(.is-active) .hl__card { transform: scale(.97); opacity: .35; cursor: pointer; }
.hl__title { font-size: clamp(1.6rem, 3.4vw, 2.5rem); max-width: 22ch; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.hl__stat { margin: 0; font-family: var(--font-head); font-size: clamp(4.5rem, 13vw, 9rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--blau); font-variant-numeric: tabular-nums; }
.hl__stat-label { margin: .75rem 0 clamp(1rem, 2.5vw, 1.5rem); font-size: 1.05rem; color: var(--ink-2); }
.hl__body { margin: 0; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.hl__slide.is-active .hl__stat { animation: hl-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.hl__slide.is-active .hl__stat-label, .hl__slide.is-active .hl__body { animation: hl-rise .6s cubic-bezier(.2,.7,.2,1) .08s both; }
@keyframes hl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hl__nav { display: flex; align-items: flex-start; gap: 1.5rem; margin-top: 1.5rem; }
.hl__nav[hidden] { display: none; }
.hl__segs { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.hl__seg { display: block; width: 100%; padding: .5rem 0 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink-2); font: inherit; }
.hl__bar { display: block; height: 3px; background: var(--line); overflow: hidden; }
.hl__fill { display: block; height: 100%; width: 100%; background: var(--blau); transform: scaleX(0); transform-origin: left; }
.hl__seg-label { display: none; margin-top: .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hl__seg[aria-selected="true"] { color: var(--ink); }
.hl__seg[aria-selected="true"] .hl__bar { background: var(--line-strong); }
@media (min-width: 720px) { .hl__seg-label { display: block; } }
/* Pause/play: one toggle (aria-pressed = paused), the icon shows what a
   press does next. */
.hl__play { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: none; color: var(--ink-2); cursor: pointer; transition: border-color .15s ease-out, color .15s ease-out, transform .15s ease-out; }
.hl__play::after { content: ""; position: absolute; inset: -5px; }
.hl__play:hover { border-color: var(--ink); color: var(--ink); }
.hl__play:active { transform: scale(.96); }
/* Both icons share one cell and cross-fade. */
.hl__play .icon { grid-area: 1 / 1; width: 16px; height: 16px; transition: opacity .2s cubic-bezier(.2,0,0,1), scale .2s cubic-bezier(.2,0,0,1), filter .2s cubic-bezier(.2,0,0,1); }
.hl__play[aria-pressed="false"] .icon:last-child, .hl__play[aria-pressed="true"] .icon:first-child { opacity: 0; scale: .25; filter: blur(4px); }
@media (prefers-reduced-motion: reduce) { .hl__play .icon { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .hl__card { transition: none; }
  .hl__slide.is-active .hl__stat, .hl__slide.is-active .hl__stat-label, .hl__slide.is-active .hl__body { animation: none; }
}

/* Packages: dark cards, Autobahn in blue. Monthly price leads. */
.pkg-grid { display: grid; gap: 1rem; }
.pkg { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
.pkg--popular { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.pkg__sign { display: flex; flex-direction: column; align-items: flex-start; padding: 1.75rem 1.75rem 0; }
.pkg__name { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.01em; }
.pkg__subtitle { margin: 0; font-size: .95rem; color: var(--ink-2); }
.pkg--popular .pkg__subtitle { color: rgba(255,255,255,.75); }
.pkg__badge {
  justify-self: start; margin-bottom: .9rem;
  display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 4px;
  background: var(--weiss); color: var(--blau); font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
}
.pkg__badge .icon { width: .85em; height: .85em; fill: currentColor; }
.pkg__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.75rem 1.75rem; gap: .8rem; }
.pkg__for { margin: 0; font-weight: 600; font-size: 1.05rem; }
.pkg__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35rem; }
.pkg__price strong { font-family: var(--font-head); font-weight: 700; font-size: 2.9rem; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pkg__unit { color: var(--ink-2); font-weight: 500; }
.pkg--popular .pkg__unit { color: rgba(255,255,255,.75); }
.pkg__setup { flex-basis: 100%; margin-top: .45rem; font-weight: 500; }
.pkg__features { display: grid; gap: .5rem; margin-block: .25rem auto; font-size: .97rem; }
.pkg__features li { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.35; }
.pkg__features .icon { margin-top: .15rem; color: var(--ink-2); }
.pkg--popular .pkg__features .icon { color: rgba(255,255,255,.8); }
.pkg__body .btn { margin-top: 1rem; }
.pkg--popular .btn--primary { background: var(--weiss); color: var(--blau); }
.pkg--popular .btn--primary:hover { background: var(--bg); border-color: var(--bg); color: var(--weiss); }
.pkg-section__note { margin: 1.5rem 0 0; color: var(--ink-2); font-size: .95rem; }
.section .pkg-section + .center, .section .pkg-section + .btn-row { margin-top: 2rem; }
.btn-row--center { justify-content: center; }
@media (min-width: 640px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }

/* A package you jumped to lights up: blue ring that settles into a steady
   outline, so you can see which card the link meant. */
.pkg { transition: box-shadow .4s ease, border-color .4s ease; }
.pkg.is-target { border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau), 0 18px 40px rgba(26, 4, 255, .2); }
.pkg--popular.is-target { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 6px var(--blau), 0 18px 40px rgba(26, 4, 255, .3); }
@media (prefers-reduced-motion: no-preference) {
  .pkg.is-target { animation: pkg-hit .9s cubic-bezier(.2,.7,.2,1); }
  @keyframes pkg-hit { 0% { transform: scale(1); } 35% { transform: scale(1.02); } 100% { transform: scale(1); } }
}

/* Package picker: a waterfall of yes/no questions. The lane runs down the
   left, "no" branches off to an exit, the last "yes" turns into Nordschleife.
   Lines are 2px dashes in the lane-marking rhythm (gap twice the dash). Each
   step draws its lane in two halves, above and below its question, so
   hovering an exit can light up exactly the route there: a solid blue line
   laid over the dashes. */
@property --lit-top { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --lit-bot { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --lit-branch { syntax: "<color>"; inherits: true; initial-value: transparent; }
.pick { --lane: 1.25rem; --exit-in: 3.75rem; --gap: 3rem; --dash-v: repeating-linear-gradient(180deg, var(--line-strong) 0 4px, transparent 4px 12px); display: grid; max-width: 60rem; }
.pick__step {
  --lit-top: transparent; --lit-bot: transparent; --lit-branch: transparent;
  position: relative; display: grid; gap: 1rem; padding-top: var(--gap);
  transition: --lit-top .25s ease, --lit-bot .25s ease, --lit-branch .25s ease;
}
.pick__step:first-child { padding-top: 0; }
.pick__step::before, .pick__step::after, .pick__branch::before { content: ""; position: absolute; pointer-events: none; }
.pick__step::before, .pick__step::after { left: var(--lane); width: 2px; }
.pick__step::before { top: 0; bottom: calc((100% - var(--gap)) / 2); background: linear-gradient(var(--lit-top), var(--lit-top)), var(--dash-v); }
.pick__step::after { top: calc(var(--gap) + (100% - var(--gap)) / 2); bottom: 0; background: linear-gradient(var(--lit-bot), var(--lit-bot)), var(--dash-v); }
.pick__step:first-child::before { top: 0; bottom: 50%; }
.pick__step:first-child::after { top: 50%; }
.pick__step--end::after { content: none; }
.pick__q, .pick__exit, .pick__yes, .pick__no { position: relative; z-index: 1; }
.pick__q { margin: 0; padding: 1rem 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.15; transition: border-color .25s ease; }
.pick__yes, .pick__no { font: 500 .72rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .45rem; }
.pick__yes { position: absolute; top: calc(var(--gap) / 2); left: calc(var(--lane) + 1px); transform: translate(-50%, -50%); background: var(--blau); color: var(--weiss); }
/* On phones "no" sits on the lane where the branch leaves it. */
.pick__no { justify-self: start; margin-left: calc(var(--lane) + 1px); transform: translateX(-50%); background: var(--bg); border: 1px solid var(--line-strong); color: var(--ink-2); transition: color .25s ease, border-color .25s ease; }
.pick__branch { position: relative; display: grid; grid-template-columns: var(--exit-in) minmax(0, 1fr); align-items: center; }
.pick__branch::before { top: 50%; left: var(--lane); width: calc(var(--exit-in) - var(--lane)); height: 2px; margin-top: -1px; background: linear-gradient(var(--lit-branch), var(--lit-branch)), repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 12px); }
.pick__exit {
  grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center;
  padding: .85rem 1.1rem; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; transition: border-color .15s ease;
}
.pick__exit:hover { border-color: var(--ink); }
.pick__name { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.pick__for { grid-row: 2; color: var(--ink-2); font-size: .95rem; }
.pick__price { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.pick__price small { margin-left: .1rem; font-family: var(--font); font-weight: 500; font-size: .85rem; color: var(--ink-2); }
.pick__exit--popular { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.pick__exit--popular:hover { border-color: var(--weiss); }
.pick__exit--popular .pick__for, .pick__exit--popular small { color: rgba(255,255,255,.75); }
.pick__exit--popular:focus-visible { outline-color: var(--weiss); }
@media (min-width: 800px) {
  .pick { --lane: 2rem; --exit-in: 6rem; --gap: 3.5rem; }
  .pick__step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0; }
  .pick__branch { grid-column: 2; }
  .pick__branch::before { left: 0; width: var(--exit-in); }
  .pick__no { justify-self: center; margin-left: 0; transform: none; }
  /* The last yes turns right from the lane into the last exit. */
  .pick__step--end .pick__branch::before { left: calc(-100% + var(--lane)); width: calc(100% - var(--lane) + var(--exit-in)); }
  .pick__step:first-child::before { content: none; }
  /* The route to the exit under the pointer (or keyboard focus) lights up. */
  .pick__step:has(.pick__exit:hover, .pick__exit:focus-visible) { --lit-top: var(--blau); --lit-branch: var(--blau); }
  .pick__step:has(~ .pick__step .pick__exit:hover, ~ .pick__step .pick__exit:focus-visible) { --lit-top: var(--blau); --lit-bot: var(--blau); }
  .pick__step:has(.pick__exit:hover, .pick__exit:focus-visible) .pick__q,
  .pick__step:has(~ .pick__step .pick__exit:hover, ~ .pick__step .pick__exit:focus-visible) .pick__q { border-color: var(--line-strong); }
  .pick__step:has(.pick__exit:hover, .pick__exit:focus-visible) .pick__no { color: var(--ink); border-color: var(--ink-2); }
}

/* Comparison table: hairlines only. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--card); padding: .5rem 0; }
.compare { border-collapse: collapse; width: 100%; min-width: 760px; font-size: .95rem; }
.compare th, .compare td { padding: .9rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
/* The wrapper has no side padding, so the pinned label column sits flush at
   its edge; the outer cells carry the inset instead. */
.compare tr > :first-child { padding-left: 1.25rem; }
.compare tr > :last-child { padding-right: 1.25rem; }
.compare thead th { vertical-align: bottom; border-bottom-width: 2px; }
.compare tbody th { font-weight: 500; color: var(--ink-2); background: var(--card); position: sticky; left: 0; z-index: 1; min-width: 11rem; }
.compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
@media (max-width: 860px) { .compare tbody th { min-width: 9rem; } .compare tbody th, .compare thead th:first-child { box-shadow: 1px 0 0 var(--line); } }
.compare__name { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.compare thead th:nth-child(4) .compare__name { color: var(--blau); }
.compare__sub { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-2); margin-top: .25rem; }
.compare__price { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.compare__price span { font-weight: 400; font-size: .85rem; color: var(--ink-2); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare__tail { white-space: nowrap; }
.compare__info { position: relative; display: inline-grid; vertical-align: -5px; margin-left: .3rem; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; transition: color .15s ease; }
.compare__info::before { content: ""; position: absolute; inset: -10px; }
.compare__info:hover { color: var(--ink); }
.compare__info:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.compare__info .icon { width: 18px; height: 18px; }

/* Info dialog: native popover, centered in the top layer */
.infopop { width: min(26rem, calc(100vw - 2rem)); margin: auto; padding: 1.25rem 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--card); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.infopop::backdrop { background: rgba(0,0,0,.6); }
.infopop__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.infopop__title { margin: .25rem 0 0; font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.infopop__close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .15s ease; }
.infopop__close:hover { border-color: var(--ink); }
.infopop__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.infopop__close .icon { width: 18px; height: 18px; }
.infopop__body { margin: .75rem 0 0; color: var(--ink-2); font-size: 1rem; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  .infopop, .infopop::backdrop { transition: opacity .2s ease, transform .2s cubic-bezier(.2,.7,.2,1), overlay .2s allow-discrete, display .2s allow-discrete; }
  .infopop:not(:popover-open) { opacity: 0; transform: translateY(8px) scale(.98); }
  .infopop:not(:popover-open)::backdrop { opacity: 0; }
  @starting-style {
    .infopop:popover-open { opacity: 0; transform: translateY(8px) scale(.98); }
    .infopop:popover-open::backdrop { opacity: 0; }
  }
}

/* Extras, Ausfahrt, mockup */
.extra-grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .extra-grid { grid-template-columns: 1fr 1fr; } }
.extra { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.5rem, 3.5vw, 2.25rem); display: flex; flex-direction: column; gap: .25rem; }
.extra__name { font-size: 2rem; margin-bottom: .1rem; }
.extra__sub { color: var(--ink-2); font-weight: 600; margin-bottom: .6rem; }
.extra p { color: var(--ink-2); }
.extra .btn { align-self: flex-start; margin-top: auto; }
.ausfahrt { display: grid; gap: 1.5rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.5rem, 4vw, 2.5rem); }
.ausfahrt__sign {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  width: 7.5rem; height: 7.5rem; border-radius: var(--radius); background: var(--blau); color: var(--weiss); font-family: var(--font-head); font-weight: 700; font-size: 1.3rem;
}
.ausfahrt__sign .icon { width: 2.25rem; height: 2.25rem; }
.ausfahrt p { margin: 0; color: var(--ink-2); }
.ausfahrt .section__title { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
@media (min-width: 720px) { .ausfahrt { grid-template-columns: auto 1fr; } }
.mockup { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius-xl); padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem); text-align: center; }
.mockup .section__title { margin-inline: auto; font-size: clamp(2.2rem, 5.5vw, 3.75rem); }
.mockup p { color: var(--ink-2); max-width: 40ch; margin-inline: auto; font-size: 1.1rem; }
.mockup .mockup__form .field__input { min-height: 54px; font-size: 1.05rem; }
.mockup .mockup__form .field__input:focus { box-shadow: 0 0 0 3px rgba(26,4,255,.45); }
.mockup .mockup__form .btn--primary { min-height: 54px;  }
.mockup .mockup__form .btn--primary:hover { background: var(--blau); border-color: var(--blau); color: var(--weiss); }

/* Templates */
.tpl-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tpl-grid { grid-template-columns: repeat(4, 1fr); } .tpl-grid--wide { grid-template-columns: repeat(2, 1fr); } }
.tpl { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
.tpl__frame { margin: .75rem .75rem 0; border: 1px solid var(--line); border-radius: 10px 10px 0 0; overflow: hidden; background: var(--surface); }
.tpl__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.tpl__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.tpl__bar span { margin-left: 8px; font-size: .75rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl__viewport { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tpl__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Live demo on /templates (added by site.js): 1440x900, scaled to the card
   width by --k, fades in over the screenshot once loaded. */
.tpl__live { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform: scale(var(--k, .4)); transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.tpl__live.is-loaded { opacity: 1; }
.colors__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.colors__copy p { color: var(--ink-2); max-width: 32rem; }
.colors__copy p + p { margin-top: .75rem; }
.colors__copy .btn { margin-top: .75rem; }
.colors__frame { margin: 0; border-radius: 10px; }
@media (max-width: 860px) { .colors__in { grid-template-columns: 1fr; } }
.tpl__body { padding: 1.25rem; }
.tpl__name { font-size: 1.6rem; margin-bottom: .15rem; }
.tpl__vibe { color: var(--ink-2); font-weight: 600; margin-bottom: .6rem; }
.tpl__body p { color: var(--ink-2); }
/* Two buttons, lined up at the bottom of every card. */
.tpl { display: flex; flex-direction: column; }
.tpl__body { flex: 1; display: flex; flex-direction: column; }
.tpl__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: 1.1rem; }
.tpl__actions .icon { width: 1em; height: 1em; }
@media (pointer: coarse) { .tpl__actions .btn { min-height: 44px; } }

/* Steps */
.steps { display: grid; gap: 1rem; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 1.5rem; }
.step__title { font-size: 1.4rem; margin-bottom: .35rem; }
.step p { margin: 0 0 .35rem; text-wrap: pretty; }
.step__detail { color: var(--ink-2); }
@media (min-width: 900px) { .steps--compact { grid-template-columns: repeat(4, 1fr); } }
.steps + .center { margin-top: 2rem; }

/* Checklists */
.checklist { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.checklist li { display: flex; gap: .6rem; align-items: flex-start; }
.checklist .icon { color: var(--ink-2); margin-top: .2rem; }
.checklist--big { gap: .5rem; font-size: 1.1rem; }
.checklist--big li { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1.2rem; align-items: center; }
.checklist--big .icon { color: var(--blau); width: 1.4rem; height: 1.4rem; margin: 0; }

/* FAQ: hairline accordion */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { cursor: pointer; padding: 1.25rem 0; font-weight: 600; font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--ink-2); flex: none; transition: transform .2s; }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { margin: 0; padding: 0 0 1.5rem; color: var(--ink-2); max-width: 60ch; }

/* Founder */
.founder { display: grid; gap: 1.5rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.5rem, 4vw, 3rem); }
.founder__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 60% 40%; border-radius: var(--radius); }
.founder__cred { margin: 0 0 .15rem; font-weight: 600; }
.founder__role { font-weight: 600; color: var(--ink-2); }
@media (min-width: 800px) { .founder { grid-template-columns: 1.1fr 1fr; gap: 3rem; } }

/* Forms */
.form-layout { display: grid; gap: 2.5rem; }
.aside__title { font-size: 1.4rem; margin: 0 0 .75rem; }
.aside__title + p, .checklist + .aside__title { margin-top: 1.5rem; }
@media (min-width: 900px) { .form-layout { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field__label { font-weight: 500; font-size: .95rem; }
.field__opt { font-weight: 400; color: var(--ink-2); font-size: .85rem; margin-left: .35rem; }
.field__input {
  width: 100%; min-height: 50px; padding: .7rem 1rem; font: inherit; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #0c0d0f;
}
textarea.field__input { min-height: 7rem; resize: vertical; }
select.field__input {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem;
}
.field__input::placeholder { color: #6b7078; }
/* Keep autofilled fields dark: browsers paint their own pale fill otherwise. */
.field__input:-webkit-autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: 0 0 0 100px #0c0d0f inset; }
.field__input:-webkit-autofill:focus { box-shadow: 0 0 0 100px #0c0d0f inset, 0 0 0 3px rgba(26,4,255,.45); }
.field__input:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(26,4,255,.45); }
.field--error .field__input { border-color: var(--rot); background: #0c0d0f; }
.field__error { margin: 0; color: var(--rot); font-size: .9rem; font-weight: 500; }
.form__note { margin: 0; color: var(--ink-2); font-size: .9rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-weight: 500; }
.alert--error { background: rgba(255,107,107,.12); color: #ff8a8a; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request .btn > span:first-child { display: none; }
.success { background: var(--card); border: 1px solid var(--blau); border-radius: var(--radius-xl); padding: 2rem; }
.success__icon { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; background: var(--blau); color: var(--weiss); border-radius: 50%; margin-bottom: 1rem; }
.success h3 { font-size: 1.6rem; margin-bottom: .5rem; }
.calendar { border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 1.5rem; background: var(--card); }
.calendar iframe { display: block; width: 100%; min-height: 32rem; border: 0; }
.calendar--placeholder { min-height: 14rem; display: grid; place-items: center; color: var(--ink-2); text-align: center; padding: 1rem; }
.calendar--placeholder p { margin: 0; }

/* Prose & legal */
.prose h2 { font-size: 1.5rem; margin: 2rem 0 .5rem; }
.prose .section__title { margin-top: 0; }

/* Footer: quiet, light. */
.footer { background: var(--bg-deep); color: var(--ink); border-top: 1px solid var(--line); }
.footer__grid { display: grid; gap: 1.5rem; padding-block: 3rem; font-size: .9rem; color: rgba(255,255,255,.7); }
.footer__brand { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; color: var(--weiss); margin-bottom: .25rem; }
.footer__tag { margin-bottom: .5rem; }
.footer__small { margin: 0; }
.footer__links { display: grid; gap: .5rem; align-content: start; }
.footer__links a { color: rgba(255,255,255,.75); }
.footer__links a:hover { color: var(--weiss); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); } }

/* Landing pages: trades, feature blocks, comparisons, guides */
.split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }
.split .section__head { margin-bottom: 1.5rem; }
.points { display: grid; gap: 1rem; }
@media (min-width: 720px) { .points { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .points:has(> li:nth-child(3):last-child), .points:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); } }
.points--list { grid-template-columns: 1fr; }
.point { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 1.5rem; }
.point__title { font-size: 1.4rem; margin-bottom: .4rem; }
.point p { margin: 0; color: var(--ink-2); }
.section > .container + .container { margin-top: 2rem; }
.block__prose { max-width: 42rem; }
.block__prose p { color: var(--ink-2); font-size: 1.1rem; }
.block__prose + .checklist { margin-top: 1rem; }
.gauge-card { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.gauge-card__label { margin: 0; max-width: 22rem; color: var(--ink-2); }
.also { margin: 2rem 0 0; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.also a { font-weight: 600; }

.trades { display: grid; gap: 1rem; }
@media (min-width: 720px) { .trades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .trades { grid-template-columns: repeat(4, 1fr); } }
.trade { position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.5rem 1.5rem 3.5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); color: var(--ink); transition: border-color .2s, transform .2s; }
.trade:hover { text-decoration: none; background: var(--card-2); }
.trade__name { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.trade__body { color: var(--ink-2); }
.trade__go { position: absolute; left: 1.5rem; bottom: 1.25rem; color: var(--ink-2); transition: transform .2s, color .2s; }
.trade:hover .trade__go { transform: translate(3px, -3px); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .trade, .trade__go { transition: none; } .trade:hover, .trade:hover .trade__go { transform: none; } }

.compare--versus { min-width: 560px; }
.compare--versus th:first-child { width: 22%; }
.compare--versus td { width: 39%; color: var(--ink-2); }
.compare--versus .compare__us { color: var(--ink); font-weight: 500; }
.compare__name--us { color: var(--blau); }

.guides { display: grid; gap: 1rem; }
@media (min-width: 900px) { .guides { grid-template-columns: repeat(3, 1fr); } }
.guide-card { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.75rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); color: var(--ink); transition: border-color .2s; }
.guide-card:hover { text-decoration: none; border-color: var(--blau); }
.guide-card__title { font-size: 1.6rem; }
.guide-card p { margin: 0; color: var(--ink-2); }
.guide-card__meta { margin-top: auto; padding-top: .5rem; color: var(--ink-2); font-weight: 600; font-size: .95rem; }
.guide__head { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.guide__meta { margin: 1rem 0 0; color: var(--ink-2); font-size: .95rem; }
.guide__block { margin-bottom: 2.5rem; }
.guide__block h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin-bottom: .75rem; }
.guide__block .block__prose p { color: var(--ink); }
.guide__block .checklist--big { font-size: 1rem; }

.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; }
.trust li { display: inline-flex; align-items: center; gap: .4rem; }
.trust .icon { color: var(--blau); }

/* ---- Dark probe: lane lines, tags, grouped cards ---- */

/* Tag above a section heading: one or two words on a square blue plate in
   monospace, then two signal bars, a tall one and a short dim one. */
.tag { display: flex; align-items: center; gap: .3rem; margin: 0 0 1.1rem; font: 500 .8rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.tag span { padding: .4rem .55rem; background: var(--blau); color: var(--weiss); }
.tag::after {
  content: ""; width: 8px; height: 1.6em;
  background:
    linear-gradient(var(--blau), var(--blau)) 0 50% / 3px 70% no-repeat,
    linear-gradient(color-mix(in srgb, var(--blau) 75%, transparent), color-mix(in srgb, var(--blau) 75%, transparent)) 6px 50% / 2px 45% no-repeat;
}
.center > .tag, .mockup .tag, .sign--cta .tag { justify-content: center; }

/* Lane lines: hairlines frame the content column, sections are divided by
   dashed lines with the Autobahn lane-marking rhythm (gap twice the dash),
   and a small cross marks where they meet. */
main { position: relative; isolation: isolate; }
main > section + section { position: relative; }
main > section + section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 12px, transparent 12px 36px);
}
main > .hero + .strip::before, main > .hero + .strip::after { content: none; }
main:has(.mkb)::before { content: none; }
@media (min-width: 70rem) {
  main::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: var(--container); transform: translateX(-50%); border-inline: 1px solid var(--line); pointer-events: none; }
  main > section + section::after {
    content: ""; position: absolute; top: -5px; left: 50%; width: calc(var(--container) + 11px); height: 11px; transform: translateX(-50%); pointer-events: none;
    background:
      linear-gradient(var(--ink-2), var(--ink-2)) 0 5px / 11px 1px no-repeat,
      linear-gradient(var(--ink-2), var(--ink-2)) 5px 0 / 1px 11px no-repeat,
      linear-gradient(var(--ink-2), var(--ink-2)) 100% 5px / 11px 1px no-repeat,
      linear-gradient(var(--ink-2), var(--ink-2)) calc(100% - 5px) 0 / 1px 11px no-repeat;
  }
}

/* Grouped cards: one frame, hairline dividers, a dashed outer frame. Each
   card draws its right and bottom line as a shadow and the frame clips the
   outer ones, so a half-empty last row stays clean. */
.trades, .steps, .points { gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; outline: 1px dashed var(--line-strong); outline-offset: 6px; }
.trade, .step, .point { background: none; border: 0; border-radius: 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.trade:hover { background: none; }
.trade:hover { box-shadow: inset 0 3px 0 var(--blau), 1px 0 0 var(--line), 0 1px 0 var(--line); }
.steps + .center { margin-top: 2.5rem; }

/* Timeline on /how-it-works: the steps ride a dashed lane line, and
   scrolling draws a blue line down it. The timeline insets shrink the
   viewport to a line 60% down the screen: the blue tip sits on that line and
   each dot turns blue as it crosses it, so the two stay in step. overflow:
   clip (not hidden) keeps the list from becoming the dots' scroll container.
   Without scroll-driven animations, or with reduced motion, it's drawn. */
.steps--lane { --rail: 1.25rem; position: relative; overflow: clip; view-timeline: --lane block; view-timeline-inset: 60% 40%; }
.steps--lane::before, .steps--lane::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--rail); width: 2px; margin-left: -1px; pointer-events: none; }
.steps--lane::before { background: repeating-linear-gradient(to bottom, var(--line-strong) 0 12px, transparent 12px 36px); }
.steps--lane::after { background: var(--blau); }
.steps--lane .step { position: relative; padding-left: calc(var(--rail) * 2 + .5rem); }
.step__dot { position: absolute; z-index: 1; left: var(--rail); top: 2.2rem; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--blau); border-radius: 50%; background: var(--blau); }
.step__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .35rem; }
.step__head .step__title { margin: 0; }
.step__when { margin: 0; font: 500 .75rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
@media (min-width: 640px) { .steps--lane { --rail: 2rem; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps--lane::after { animation: lane-draw linear both; animation-timeline: --lane; }
    .step__dot { animation: lane-dot linear both; animation-timeline: view(block 60% 40%); }
    @keyframes lane-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
    @keyframes lane-dot { from { border-color: var(--line-strong); background: var(--card); } }
  }
}