/* ==========================================================================
   Exklusive Rentals: site styles (v3). Reads only tokens.css.
   The first live build's character (dark ground, wide display face,
   photographic hero) on a real system: sentence case, named roles, an 8-point
   scale, one action colour, status colours. Interactive pieces: the car
   switcher under the hero, the rate estimator, fleet cards that flick through
   their photos on hover, and a lightbox on the fleet page.
   ========================================================================== */

/* ---- Reset and base ---- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;overflow-x:clip;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--header-h) + var(--space-s));color-scheme:dark}
body{min-height:100svh;display:flex;flex-direction:column;padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px);background:var(--color-paper);color:var(--color-ink-2);font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
a,button{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{color:var(--color-ink);line-height:var(--leading-snug);text-wrap:balance;overflow-wrap:anywhere}
h1,h2{font-family:var(--font-display);font-weight:var(--weight-display)}
h1{font-size:var(--display-1);font-stretch:var(--stretch-display);letter-spacing:var(--tracking-display);line-height:var(--leading-tight)}
h2{font-size:var(--display-2);font-stretch:var(--stretch-h2);letter-spacing:var(--tracking-h2);line-height:1.1}
h3{font-family:var(--font-sans);font-weight:var(--weight-strong);font-size:var(--display-3);letter-spacing:var(--tracking-h3)}
h4{font-family:var(--font-sans);font-weight:var(--weight-strong);font-size:var(--text-s)}
p,li{text-wrap:pretty}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-s)}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--gutter);top:-100%;z-index:100;padding:var(--space-xs) var(--space-s);background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius-s);font-weight:var(--weight-strong)}
.skip-link:focus{top:var(--space-xs)}
.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.container--narrow{width:min(100% - 2*var(--gutter),var(--container-narrow));margin-inline:auto}
main{flex:1}

/* ---- Text roles ---- */
.lede{font-size:var(--text-lg);line-height:var(--leading-body);color:var(--color-muted);max-width:var(--measure)}
.muted{color:var(--color-muted)}
.meta{font-size:var(--text-sm);color:var(--color-muted)}
.fine{font-size:var(--text-xs);line-height:1.6;color:var(--color-muted)}
.site-footer .fine{color:var(--color-onyx-muted)}
.link{font-weight:var(--weight-medium);color:var(--color-blue);display:inline-flex;align-items:center;gap:.35rem;min-height:24px}
.prose{max-width:var(--measure)}
.prose>*+*{margin-top:var(--space-s)}
.prose h2{margin-top:var(--space-xl);font-size:var(--display-3);font-family:var(--font-sans);font-weight:var(--weight-strong);font-stretch:100%;letter-spacing:var(--tracking-h3)}
.prose h3{margin-top:var(--space-l)}
.prose ul{padding-left:1.2em}
.prose li+li{margin-top:var(--space-xs)}
.prose a,.a a,.fine a,.list a,.form-out a,.est-note a{color:var(--color-blue);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}

/* ---- Layout ---- */
.section{padding-block:var(--space-section)}
.section--panel{background:var(--color-paper-2);border-block:1px solid var(--color-line)}
.section--tight{padding-block:var(--space-m) 0}
.head{display:grid;gap:var(--space-s);margin-bottom:var(--space-xl);max-width:var(--container-narrow)}
.head .lede{margin-top:0}
.two{display:grid;gap:var(--space-xl)}
@media (min-width:56rem){.two{grid-template-columns:1fr 1fr;gap:var(--space-2xl)}}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-l)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 1.25rem;border:1px solid var(--color-blue-fill);border-radius:var(--radius-s);background:var(--color-blue-fill);color:var(--color-on-fill);font-weight:var(--weight-strong);font-size:var(--text-s);line-height:1.25;text-align:center;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.btn:active{background:var(--color-blue-deep);border-color:var(--color-blue-deep);transform:scale(.98)}
.btn--secondary{background:transparent;border-color:var(--color-line-strong);color:var(--color-ink)}
.btn--secondary:active{background:var(--color-paper-3)}
.btn svg{width:1.1rem;height:1.1rem;flex:none}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--color-blue-deep);border-color:var(--color-blue-deep)}
  .btn--secondary:hover{background:var(--color-surface);border-color:var(--color-muted)}
}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:50;background:var(--color-header);border-bottom:1px solid var(--color-line);transition:box-shadow var(--dur-base) var(--ease-out)}
.site-header.is-scrolled{box-shadow:var(--shadow-card)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:var(--space-m);min-height:var(--header-h)}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{height:2.5rem;width:auto}
.foot .brand img{height:auto;width:9rem}
.nav{display:none;gap:var(--space-l)}
.nav a{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-ink-2);min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent;transition:color var(--dur-fast)}
.nav a[aria-current="page"]{color:var(--color-ink);border-bottom-color:var(--color-blue)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--color-ink)}}
.nav a:active{color:var(--color-ink)}
.site-header .btn{display:none;min-height:2.5rem;padding:.5rem 1rem;font-size:var(--text-sm)}
.nav-toggle{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;background:none;border:1px solid var(--color-line-strong);border-radius:var(--radius-s);color:var(--color-ink);transition:background-color var(--dur-fast)}
.nav-toggle:active{background:var(--color-surface)}
.nav-toggle .x{display:none}
.nav-toggle[aria-expanded="true"] .x{display:block}
.nav-toggle[aria-expanded="true"] .bars{display:none}
@media (min-width:56rem){.nav{display:flex}.nav-toggle{display:none}.site-header .btn{display:inline-flex}}
.mobile-nav{border-top:1px solid var(--color-line);padding-block:var(--space-xs) var(--space-m)}
.mobile-nav ul{list-style:none;padding:0;display:grid}
.mobile-nav li a{font-size:var(--text-lg);font-weight:var(--weight-medium);color:var(--color-ink);min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--color-line)}
.mobile-nav .btn{display:inline-flex;margin-top:var(--space-s)}

/* ---- Hero: headline left, the fleet slideshow with its switcher right ---- */
.hero{padding-block:var(--space-xl) var(--space-section);background:var(--color-paper)}
@media (min-width:56rem){.hero{padding-block:var(--space-2xl) var(--space-section)}}
.hero .container{display:grid;gap:var(--space-xl);align-items:center}
@media (min-width:56rem){.hero .container{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--space-2xl)}}
.hero h1{max-width:16ch}
.hero .lede{margin-top:var(--space-m)}
.hero .actions{margin-top:var(--space-l)}
.facts{margin-top:var(--space-xl);padding-top:var(--space-m);border-top:1px solid var(--color-line);display:grid;gap:var(--space-s) var(--space-l);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.facts dt{font-size:var(--text-xs);color:var(--color-muted)}
.facts dd{margin-top:var(--space-2xs);font-size:var(--text-s);font-weight:var(--weight-medium);color:var(--color-ink)}
.hero-visual{display:grid;gap:var(--space-s)}
.hero .media{--ratio:4/5;border-radius:var(--radius-l);box-shadow:var(--shadow-hero)}
@media (min-width:56rem){.hero .media{--ratio:5/5}}
/* the switcher: one tab per car; the active tab's bar fills over the slide's hold time */
.switcher{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xs)}
@media (min-width:40rem){.switcher{grid-template-columns:repeat(3,1fr)}}
@media (min-width:56rem){.switcher{grid-template-columns:repeat(5,1fr)}}
.switcher button{position:relative;display:grid;gap:var(--space-2xs);justify-items:start;padding:var(--space-xs) var(--space-xs) var(--space-s);min-height:44px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-s);color:var(--color-muted);text-align:left;overflow:hidden;transition:border-color var(--dur-fast),color var(--dur-fast),background-color var(--dur-fast)}
.switcher button[aria-selected="true"]{color:var(--color-ink);border-color:var(--color-line-strong);background:var(--color-paper-3)}
.switcher button:active{background:var(--color-paper-3)}
@media (hover:hover) and (pointer:fine){.switcher button:hover{color:var(--color-ink);border-color:var(--color-line-strong)}}
.switcher .sw-name{font-size:var(--text-sm);font-weight:var(--weight-medium)}
.switcher .sw-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--color-blue);transform:scaleX(0);transform-origin:left}
.switcher button[aria-selected="true"] .sw-bar{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){.js .switcher button[aria-selected="true"] .sw-bar{animation:sw-fill var(--slide-hold) linear forwards}}
@keyframes sw-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-car{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-xs) var(--space-s);min-height:24px}
/* inner pages */
.page-hero{padding-block:var(--space-xl);border-bottom:1px solid var(--color-line)}
@media (min-width:56rem){.page-hero{padding-block:var(--space-2xl) var(--space-xl)}}
.page-hero h1{max-width:20ch}
.page-hero .lede{margin-top:var(--space-m)}
.page-hero .actions{margin-top:var(--space-l)}

/* ---- Media slots ---- */
.media{position:relative;overflow:hidden;aspect-ratio:var(--ratio,4/3);border-radius:var(--radius-m);background:var(--color-paper-3);isolation:isolate}
.media>img,.media>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%)}
.media:not(:has(img))::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-m);text-align:center;white-space:pre-line;font-size:var(--text-sm);color:var(--color-muted)}
.hero-slides .slide{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-slide) var(--ease-out)}
.hero-slides .slide.is-active{opacity:1}
.hero-slides .slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){.hero-slides .slide>img{transform:scale(1.06);transition:transform var(--dur-drift) linear}.hero-slides .slide.is-active>img{transform:scale(1)}}
.media--portrait{--ratio:4/5}
.media--wide{--ratio:16/9}
.media--cinema{--ratio:21/9}
.media--bleed{border-radius:0}

/* ---- Requirements row ---- */
.reqs{border-block:1px solid var(--color-line);background:var(--color-paper-2)}
.reqs ul{list-style:none;padding:0;display:grid;gap:var(--space-xs) var(--space-l);grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));padding-block:var(--space-m)}
.reqs li{display:flex;gap:var(--space-xs);align-items:center;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-ink);min-height:2rem}
.reqs i{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--color-blue-soft);color:var(--color-blue-ink);display:grid;place-items:center}
.reqs i::before{content:"";width:.5rem;height:.3rem;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-1px) rotate(-45deg)}

/* ---- Plan cards (insurance options) ---- */
.rates{display:grid;gap:var(--space-s)}
@media (min-width:56rem){.rates{grid-template-columns:repeat(3,1fr);gap:var(--space-m)}}
.rate{padding:var(--space-m);display:grid;gap:var(--space-s);align-content:start;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-m);box-shadow:var(--shadow-card)}
.rate--best{border-color:var(--color-blue);box-shadow:0 0 0 1px var(--color-blue),var(--shadow-card)}
.rate .num{font-size:var(--text-sm);color:var(--color-muted)}
.rate h3{margin-top:calc(-1 * var(--space-xs))}
.rate p{color:var(--color-ink-2);font-size:var(--text-sm)}
.price{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap;padding-top:var(--space-s);border-top:1px solid var(--color-line);margin-top:var(--space-2xs)}
.price b,.price-line b,.est-out b{font-family:var(--font-display);font-stretch:var(--stretch-h2);font-size:var(--display-num);font-weight:var(--weight-display);letter-spacing:var(--tracking-h2);color:var(--color-ink);line-height:1}
.price b.wk{font-size:var(--display-3);margin-left:var(--space-xs)}
.price span{color:var(--color-muted);font-size:var(--text-sm)}
.price small{width:100%;margin-top:var(--space-xs);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-ink-2)}
.rate--best .price small{color:var(--color-blue)}
.rates+.fine{margin-top:var(--space-m);max-width:var(--measure)}

/* ---- The rate estimator ---- */
.estimate{margin-top:var(--space-xl);display:grid;gap:var(--space-l);padding:var(--space-m);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-m)}
@media (min-width:56rem){.estimate{grid-template-columns:7fr 5fr;gap:var(--space-2xl);padding:var(--space-l)}}
.estimate .field+.field{margin-top:var(--space-m)}
.estimate h3+.meta{margin-top:var(--space-xs);margin-bottom:var(--space-m)}
.seg{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.seg label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:.5rem .9rem;border:1px solid var(--color-line-strong);border-radius:var(--radius-s);background:var(--color-paper);color:var(--color-ink-2);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.seg input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg label:has(input:checked){background:var(--color-blue-soft);border-color:var(--color-blue);color:var(--color-ink)}
.seg label:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px}
.seg label:active{background:var(--color-paper-3)}
@media (hover:hover) and (pointer:fine){.seg label:hover{border-color:var(--color-muted);color:var(--color-ink)}}
.range{display:grid;gap:var(--space-xs)}
.range output{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-ink)}
.range input[type=range]{width:100%;accent-color:var(--color-blue-fill);min-height:44px;margin:0}
.est-out{display:grid;align-content:center;gap:var(--space-xs);padding:var(--space-m);border-radius:var(--radius-m);background:var(--color-paper);border:1px solid var(--color-line)}
.est-out .meta{color:var(--color-muted)}
.est-out b{transition:opacity var(--dur-fast)}
.est-out.is-busy b{opacity:.5}
.est-note{font-size:var(--text-sm);color:var(--color-ink-2);margin-top:var(--space-xs)}

/* ---- Lists ---- */
.list{list-style:none;padding:0;margin-top:var(--space-m);display:grid;gap:var(--space-xs)}
.list li{display:flex;gap:var(--space-s);align-items:flex-start;color:var(--color-ink-2)}
.list li::before{content:"";flex:none;width:.375rem;height:.375rem;margin-top:.6em;border-radius:50%;background:var(--color-blue)}
.checks{list-style:none;padding:0;display:grid;gap:var(--space-s);margin-top:var(--space-m)}
.checks li{display:flex;gap:var(--space-s);color:var(--color-ink-2)}
.checks svg{flex:none;width:1.5rem;height:1.5rem;padding:.25rem;border-radius:50%;background:var(--color-blue-soft);color:var(--color-blue-ink);margin-top:.05rem}

/* ---- Feature (road test) ---- */
.feature{display:grid;gap:var(--space-xl);align-items:center}
@media (min-width:56rem){.feature{grid-template-columns:5fr 7fr;gap:var(--space-3xl)}}
.feature .media{border-radius:var(--radius-l);box-shadow:var(--shadow-raised)}
.price-line{display:flex;align-items:baseline;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-m)}
.price-line span{font-size:var(--text-s);color:var(--color-muted)}

/* ---- Fleet cards: hover flicks through the car's photos ---- */
.fleet{display:grid;gap:var(--space-m);grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
.car{display:grid;gap:var(--space-xs);align-content:start;padding:var(--space-xs) var(--space-xs) var(--space-m);border:1px solid var(--color-line);border-radius:var(--radius-m);background:var(--color-surface);box-shadow:var(--shadow-card);transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.car>*:not(.media){margin-inline:var(--space-s)}
.car:active{border-color:var(--color-line-strong)}
@media (hover:hover) and (pointer:fine){.car:hover{box-shadow:var(--shadow-raised);border-color:var(--color-line-strong);transform:translateY(-2px)}}
.car .media{border-radius:var(--radius-s);margin-bottom:var(--space-xs)}
.car .media img{transition:opacity var(--dur-base) var(--ease-out)}
.car .media.is-swapping img{opacity:.85}
.car .media .count{position:absolute;right:var(--space-xs);bottom:var(--space-xs);z-index:1;padding:.15rem .5rem;border-radius:var(--radius-pill);background:var(--color-paper);color:var(--color-ink-2);font-size:var(--text-xs);font-weight:var(--weight-medium)}
.car h3{margin-top:var(--space-2xs)}
.car .link{margin-top:var(--space-xs);font-size:var(--text-sm)}
.avail{display:inline-flex;align-items:center;gap:.4rem;justify-self:start;padding:.2rem .6rem;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--weight-strong);background:var(--color-paper-3);color:var(--color-ink-2)}
.avail::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor}
.avail.is-ok{background:var(--color-ok-soft);color:var(--color-ok)}
.avail.is-out{background:var(--color-red-soft);color:var(--color-red)}
.avail--big{margin-top:var(--space-m)}
/* fleet page: one car per section */
.vehicle{display:grid;gap:var(--space-l);padding-block:var(--space-2xl);border-top:1px solid var(--color-line)}
.vehicle:first-of-type{border-top:0}
@media (min-width:56rem){.vehicle{grid-template-columns:5fr 7fr;gap:var(--space-2xl);align-items:start}}
.vehicle h2{margin-top:var(--space-xs)}
.vehicle .lede{margin-top:var(--space-s)}
.spec{list-style:none;padding:0;margin-top:var(--space-m);display:grid;border-top:1px solid var(--color-line)}
.spec li{display:flex;justify-content:space-between;gap:var(--space-s);padding:var(--space-xs) 0;border-bottom:1px solid var(--color-line);font-size:var(--text-sm)}
.spec li span:first-child{color:var(--color-muted)}
.spec li span:last-child{color:var(--color-ink);font-weight:var(--weight-medium);text-align:right}
.gallery{display:grid;gap:var(--space-xs);grid-template-columns:repeat(2,1fr);margin-top:var(--space-xs)}
@media (min-width:40rem){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery .media{border-radius:var(--radius-s)}
.gallery .g-a{grid-column:1/-1}
.g-link{display:block;position:relative;border-radius:var(--radius-s);transition:transform var(--dur-base) var(--ease-out)}
.g-link::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;transition:border-color var(--dur-fast)}
.g-link:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.g-link:hover::after{border-color:var(--color-blue)}.g-link:hover .media img{transform:scale(1.03)}}
.g-link .media img{transition:transform var(--dur-reveal) var(--ease-out)}

/* ---- Lightbox (fleet photos) ---- */
.lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;color:var(--color-ink)}
.lightbox::backdrop{background:rgba(5,9,18,.92)}
.lightbox .lb-frame{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr auto;gap:var(--space-s);padding:var(--space-s)}
.lightbox .lb-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-s);min-height:44px}
.lightbox .lb-title{font-size:var(--text-sm);color:var(--color-ink-2)}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;border-radius:var(--radius-m);object-fit:contain}
.lightbox .lb-stage{display:grid;place-items:center;min-height:0}
.lightbox .lb-nav{display:flex;justify-content:center;gap:var(--space-xs)}
.lightbox button{min-width:44px;min-height:44px;padding:.5rem .9rem;border:1px solid var(--color-line-strong);border-radius:var(--radius-s);background:var(--color-surface);color:var(--color-ink);font-weight:var(--weight-medium)}
.lightbox button:active{background:var(--color-paper-3)}
@media (hover:hover) and (pointer:fine){.lightbox button:hover{border-color:var(--color-muted)}}

/* ---- Steps ---- */
.steps{display:grid;gap:var(--space-m);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));counter-reset:n}
.step{counter-increment:n;display:grid;gap:var(--space-xs);align-content:start;padding:var(--space-m);border:1px solid var(--color-line);border-radius:var(--radius-m);background:var(--color-surface);box-shadow:var(--shadow-card)}
.step::before{content:counter(n);width:2rem;height:2rem;margin-bottom:var(--space-xs);border-radius:50%;display:grid;place-items:center;background:var(--color-blue-soft);color:var(--color-blue-ink);font-size:var(--text-sm);font-weight:var(--weight-strong)}
.step p{color:var(--color-ink-2);font-size:var(--text-sm)}

/* ---- Quotes ---- */
.reviews{display:grid;gap:var(--space-m);grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.review{display:grid;gap:var(--space-s);padding:var(--space-m);border:1px solid var(--color-line);border-radius:var(--radius-m);background:var(--color-surface);align-content:start}
.review p{color:var(--color-ink);font-size:var(--text-base)}
.review cite{font-style:normal;font-size:var(--text-sm);color:var(--color-muted)}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--color-line)}
.faq details{border-bottom:1px solid var(--color-line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:var(--space-s);align-items:center;padding-block:var(--space-s);cursor:pointer;font-weight:var(--weight-medium);font-size:var(--text-base);color:var(--color-ink);min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.5rem;height:.5rem;margin-right:.25rem;border-right:2px solid var(--color-blue);border-bottom:2px solid var(--color-blue);transform:rotate(45deg);transition:transform var(--dur-base) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding-bottom:var(--space-m);color:var(--color-ink-2);max-width:var(--measure)}

/* ---- Contact rows ---- */
.channels{list-style:none;padding:0;display:grid;gap:var(--space-xs);margin-top:var(--space-m)}
.channels a,.channels .pay{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);padding:var(--space-s) var(--space-m);border:1px solid var(--color-line);border-radius:var(--radius-m);background:var(--color-surface);min-height:3.5rem;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.channels a:active{background:var(--color-paper-3)}
@media (hover:hover) and (pointer:fine){.channels a:hover{border-color:var(--color-blue);background:var(--color-paper-3)}}
.channels b{font-weight:var(--weight-medium);color:var(--color-ink)}
.channels span{font-size:var(--text-sm);color:var(--color-muted);text-align:right}

/* ---- Closing band: the one inverse band, in the brand blue ---- */
.cta{padding:var(--space-2xl) var(--space-m);border-radius:var(--radius-l);text-align:center;display:grid;justify-items:center;gap:var(--space-s);background:var(--color-band);color:var(--color-on-fill)}
@media (min-width:56rem){.cta{padding:var(--space-3xl) var(--space-2xl)}}
.cta h2{color:var(--color-on-fill);max-width:18ch}
.cta .lede{color:var(--color-on-fill);text-align:center}
.cta .actions{margin-top:var(--space-s);justify-content:center}
.cta .btn{background:var(--color-on-fill);border-color:var(--color-on-fill);color:var(--color-blue-deep)}
.cta .btn:active{background:var(--color-paper-3);color:var(--color-ink)}
.cta .btn--secondary{background:transparent;border-color:var(--color-on-fill);color:var(--color-on-fill)}
.cta .btn--secondary:active{background:rgba(255,255,255,.15)}
@media (hover:hover) and (pointer:fine){.cta .btn:hover{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-blue-deep)}.cta .btn--secondary:hover{background:rgba(255,255,255,.12);border-color:var(--color-on-fill);color:var(--color-on-fill)}}

/* ---- Footer ---- */
.site-footer{background:var(--color-onyx);color:var(--color-onyx-muted);border-top:1px solid var(--color-onyx-line);padding-block:var(--space-2xl) var(--space-m)}
.foot{display:grid;gap:var(--space-xl) var(--space-l);grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr))}
.foot h2{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-strong);font-stretch:inherit;letter-spacing:inherit;line-height:var(--leading-snug);color:var(--color-onyx-ink);margin-bottom:var(--space-xs)}
.foot p,.foot a{font-size:var(--text-sm);color:var(--color-onyx-muted)}
.foot a{display:inline-flex;min-height:28px;align-items:center;transition:color var(--dur-fast)}
.foot a:active{color:var(--color-onyx-ink)}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--color-onyx-ink)}}
.foot ul{list-style:none;padding:0;display:grid;gap:var(--space-2xs)}
.foot .brand p{margin-top:var(--space-s);max-width:28ch}
.footer-base{margin-top:var(--space-2xl);padding-top:var(--space-m);border-top:1px solid var(--color-onyx-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-xs) var(--space-m)}

/* ---- Notices ---- */
.notice{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-s) var(--space-m);padding:var(--space-m);border-radius:var(--radius-m);background:var(--color-blue-soft);color:var(--color-ink-2);border:1px solid var(--color-line)}
.notice p{max-width:var(--measure)}
.notice b{color:var(--color-ink);font-weight:var(--weight-strong)}
.notice.is-urgent{background:var(--color-red-soft)}

/* ---- Form (waitlist) ---- */
.form{display:grid;gap:var(--space-m);min-width:0}
.form fieldset{margin:0;min-width:0;padding:var(--space-m);border:1px solid var(--color-line);border-radius:var(--radius-m);background:var(--color-surface);display:grid;gap:var(--space-m)}
.form legend{padding:0 var(--space-xs);font-size:var(--display-3);font-weight:var(--weight-strong);color:var(--color-ink);letter-spacing:var(--tracking-h3)}
.field{display:grid;gap:var(--space-xs)}
.field>span{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-ink)}
.field input:not([type=radio]):not([type=checkbox]):not([type=range]),.field select,.field textarea,.form-out textarea{width:100%;min-height:3rem;padding:.7rem .9rem;font:inherit;font-size:16px;line-height:1.4;color:var(--color-ink);background:var(--color-paper);border:1px solid var(--color-line-strong);border-radius:var(--radius-s);color-scheme:dark}
.field textarea{resize:vertical}
.field :is(input,select,textarea):focus-visible,.choice:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}
.choices{display:grid;gap:var(--space-xs)}
.choice{display:flex;align-items:center;gap:var(--space-xs);min-height:44px;padding:.5rem .75rem;border:1px solid var(--color-line-strong);border-radius:var(--radius-s);background:var(--color-paper);color:var(--color-ink);font-size:var(--text-sm);cursor:pointer;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.choice input{width:1.15rem;height:1.15rem;margin:0;flex:none;accent-color:var(--color-blue-fill)}
.choice:active{background:var(--color-paper-3)}
.choice:has(input:checked){border-color:var(--color-blue);background:var(--color-blue-soft)}
.choice--consent{align-items:flex-start;padding:var(--space-s)}
.choice--consent input{margin-top:.15rem}
.form .actions{margin-top:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-out{display:grid;gap:var(--space-s);padding:var(--space-m);border-radius:var(--radius-m);background:var(--color-surface);border:1px solid var(--color-blue)}
.form-out b{color:var(--color-ink)}
@media (hover:hover) and (pointer:fine){.choice:hover{border-color:var(--color-muted)}}

/* ---- Page transitions: content swaps in place under the fixed header (js/main.js); native
   view transitions animate the swap where supported, a short fade elsewhere ---- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  ::view-transition-group(site-header){animation-duration:0s}
  ::view-transition-old(root){animation:page-out var(--dur-leave) var(--ease-out) both}
  ::view-transition-new(root){animation:page-in var(--dur-page) var(--ease-out) both}
  .js main{transition:opacity var(--dur-page) var(--ease-out),transform var(--dur-page) var(--ease-out)}
  .js main.is-leaving{opacity:0;transition-duration:var(--dur-leave)}
  .js main.is-entering{opacity:0;transform:translateY(var(--reveal-distance));transition:none}
}
.nav-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--color-blue);z-index:60;opacity:0;pointer-events:none;transition:opacity var(--dur-fast)}
.js.is-navigating .nav-progress{opacity:1;animation:nav-progress 1.2s var(--ease-out) forwards}
@keyframes nav-progress{from{width:0}to{width:85%}}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0;transform:translateY(var(--reveal-distance))}}

/* ---- Motion: only with JS on and motion allowed ---- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .js [data-reveal]{opacity:0;transform:translateY(var(--reveal-distance));transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
  .js [data-reveal].is-in{opacity:1;transform:none}
  /* The hero lede is the largest text on first paint: it never starts hidden, it only rises */
  .js .hero .lede[data-reveal]{opacity:1}
  .js .media[data-reveal]{opacity:0;transform:none;transition:opacity var(--dur-reveal) var(--ease-out)}
  .js .media[data-reveal]>picture>img,.js .media[data-reveal]>img{transform:scale(1.04);transition:transform 1.2s var(--ease-out)}
  .js .media[data-reveal].is-in{opacity:1}
  .js .media[data-reveal].is-in>picture>img,.js .media[data-reveal].is-in>img{transform:scale(1)}
  /* the hero headline: each word lifts out of its line as the page opens */
  .js h1[data-split]{opacity:1;transform:none}
  .js h1[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
  .js h1[data-split] .w>span{display:inline-block;transform:translateY(110%);transition:transform var(--dur-words) var(--ease-out);transition-delay:calc(var(--i,0) * 55ms + 60ms)}
  .js h1[data-split].is-in .w>span{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}