/* ==========================================================================
   PinPoints — shared stylesheet for all public pages (EN + DE).
   Palette from the app asset catalog (see legal-sources.md, "Brand colours"):
   BrandPurple #591DBB (light) / #8E65D1 (dark appearance) = accent,
   BrandPurpleSoft #241476 (dark appearance) for deep gradients, on a dark
   violet-tinted background. Buttons use a slightly lifted tint of the accent
   (#9A74DB) so dark button text keeps WCAG AA contrast.
   Static HTML/CSS + small vanilla JS (assets/site.js). No framework, no build
   step, no web fonts (system font stack; nothing is loaded from third parties).
   Everything works without JS: hidden-until-revealed states only apply when
   <html> has the "js" class, and prefers-reduced-motion turns all motion off.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}

:root{
  --bg:#0f0c17; --bg-alt:#15111f; --bg-soft:#1f1930;
  --border:rgba(205,196,230,.14); --border-strong:rgba(205,196,230,.3);
  --text:#ece8f4; --text-dim:#c4bdd6; --text-faint:#8f88a3;
  --accent:#8e65d1; --accent-hover:#b59be8; --accent-2:#591dbb; --accent-rgb:142,101,209;
  --accent-soft:#241476; --btn:#9a74db; --btn-hover:#ad8ce4;
  --pin:#f2edfb; --pin-rgb:242,237,251; --on-accent:#12082a;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --max:1200px; --pad:clamp(1.25rem,4vw,2.5rem);
}
html,body{background:var(--bg);color:var(--text)}
body{font-family:var(--font);font-size:17px;line-height:1.5;letter-spacing:-.014em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--btn);color:var(--on-accent)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.accent{color:var(--accent-hover)}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hover)}
.kicker::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
h2.title{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-.035em;font-weight:700;margin:.8rem 0 1rem}
.lead{color:var(--text-dim);font-size:clamp(1rem,1.4vw,1.2rem);max-width:38rem}
section{position:relative}

/* ---------- Scroll progress ---------- */
.progress{position:fixed;inset:0 auto auto 0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent-2),var(--accent));z-index:100;box-shadow:0 0 12px rgba(var(--accent-rgb),.6)}

/* ---------- Floating pill nav (Bevel / Superpower) ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:90;width:max-content;display:flex;align-items:center;gap:1.4rem;padding:.45rem .5rem .45rem .9rem;border-radius:999px;background:rgba(21,17,31,.6);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--border);box-shadow:0 10px 40px rgba(0,0,0,.25);transition:background .3s,padding .3s}
.nav.is-scrolled{background:rgba(15,12,23,.86)}
.nav__brand{display:flex;align-items:center;gap:.55rem;font-weight:700;letter-spacing:-.02em}
.nav__brand img{width:28px;height:28px;border-radius:8px}
.nav__links{display:flex;gap:1.2rem;font-size:.9rem;color:var(--text-dim)}
.nav__links a:hover{color:var(--text)}
.nav__cta{font-size:.88rem;font-weight:600;padding:.55rem 1rem;border-radius:999px;background:var(--btn);color:var(--on-accent);transition:background .2s,transform .2s}
.nav__cta:hover{background:var(--btn-hover);transform:translateY(-1px)}

/* ---------- Store badges ---------- */
.badges{display:flex;flex-wrap:wrap;gap:.75rem}
.badge{display:inline-flex;align-items:center;gap:.65rem;padding:.7rem 1.15rem .7rem 1rem;border-radius:14px;background:#fff;color:#0f0c17;transition:transform .25s var(--ease-out),box-shadow .25s}
.badge--ghost{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--border-strong)}
.badge svg{width:22px;height:22px}
.badge small{display:block;font-size:.66rem;line-height:1;opacity:.7}
.badge b{display:block;font-size:1.05rem;line-height:1.15;letter-spacing:-.02em}
.badge:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(var(--accent-rgb),.25)}

/* ---------- Device frame (one component for every mockup) ----------
   Bezel and screen radius are in cqw = % of the phone's own width, so the
   screenshot (720×1564, iPhone 6.9" ratio 1320×2868) fills the display exactly. Percentage
   padding would resolve against the parent and squeeze/crop the screen.
   Outer radius = screen radius + bezel: 11.2 + 3.4 = 14.6cqw → 14.6% / 6.97%. */
.device{position:relative;container-type:inline-size;display:grid;border-radius:14.6%/6.97%;background:linear-gradient(145deg,#423a52,#14111b 40%,#2a2436);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 40px 80px -20px rgba(0,0,0,.6),0 0 60px -10px rgba(var(--accent-rgb),.25)}
.device img{grid-area:1/1;width:93.2cqw;max-width:none;height:auto;aspect-ratio:720/1564;margin:3.4cqw;object-fit:cover;object-position:top center;border-radius:11.2cqw;background:#14111b}
.device picture{display:contents}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:grid;align-items:center;padding:7rem 0 6rem;overflow:hidden;isolation:isolate}
.hero__glow{position:absolute;inset:-20% -10% auto;height:120%;z-index:-2;background:radial-gradient(50% 45% at 70% 35%,rgba(var(--accent-rgb),.28),transparent 70%),radial-gradient(40% 40% at 15% 70%,rgba(89,29,187,.3),transparent 70%)}
/* Route: a dotted line from pin to pin (the app icon motif). The dots drift
   along the line, the pins drop in and then bob gently. Only transforms and
   opacity animate. Reduced motion: everything still. */
.route{position:absolute;left:0;right:0;bottom:clamp(1rem,3vw,2rem);height:120px;z-index:-1;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.route svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route__line{fill:none;stroke:rgba(var(--accent-rgb),.75);stroke-width:3;stroke-linecap:round;stroke-dasharray:0 14;animation:route-dots 1.4s linear infinite}
.route__pin{position:absolute;width:26px;height:34px;margin:-34px 0 0 -13px;color:var(--pin);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));animation:pin-bob 4s ease-in-out infinite}
.route__pin svg{position:static}
.route__pin--a{left:12%;top:72%}
.route__pin--b{left:38%;top:34%;animation-delay:-1.3s}
.route__pin--c{left:63%;top:66%;animation-delay:-2.6s;color:var(--accent-hover)}
.route__pin--d{left:88%;top:30%;animation-delay:-.7s}
@keyframes route-dots{to{stroke-dashoffset:-14}}
@keyframes pin-bob{50%{transform:translateY(-6px)}}
@keyframes drift{to{transform:translateX(-50%)}}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.2rem,4.3vw,4.1rem);line-height:.98;letter-spacing:-.045em;word-spacing:.06em;font-weight:800;margin:1.1rem 0 1.4rem}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em;white-space:nowrap}
.hero h1 .line > span{display:inline-block;transform:translateY(105%);animation:rise 1s var(--ease-out) forwards}
.hero h1 .line:nth-child(2) > span{animation-delay:.12s}
.hero h1 .line:nth-child(3) > span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.hero__sub{color:var(--text-dim);font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:33rem;margin-bottom:2rem}
.fade-in{opacity:0;animation:fadeUp .9s var(--ease-out) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.platforms{margin-top:1.6rem;font-size:.85rem;color:var(--text-faint);display:flex;gap:.5rem;flex-wrap:wrap}
.platforms span{padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border)}

.hero__stage{position:relative;height:min(78vh,680px);perspective:1400px}
.hero__phone{position:absolute;left:50%;top:50%;width:min(300px,62%);transform:translate(-50%,-50%) translateY(calc(var(--sy,0) * -60px)) rotateY(calc(var(--mx,0) * 10deg - 8deg)) rotateX(calc(var(--my,0) * -8deg + 4deg));transition:transform .5s var(--ease-out);transform-style:preserve-3d}
.hero__phone--back{width:min(250px,52%);left:22%;top:56%;filter:brightness(.7);transform:translate(-50%,-50%) translateY(calc(var(--sy,0) * -20px)) rotateY(14deg) rotateZ(-6deg)}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-radius:16px;background:rgba(31,25,48,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-strong);font-size:.82rem;box-shadow:0 18px 40px rgba(0,0,0,.35);animation:bob 6s ease-in-out infinite;transform:translateY(calc(var(--sy,0) * var(--depth,-80px)))}
.chip i{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(var(--accent-rgb),.22);color:var(--accent-hover);font-style:normal}
.chip b{display:block;font-weight:600;line-height:1.2}
.chip small{color:var(--text-dim)}
.chip--1{top:12%;right:2%;--depth:-140px}
.chip--2{top:52%;right:-2%;animation-delay:-2s;--depth:-60px}
.chip--3{bottom:8%;left:14%;animation-delay:-4s;--depth:-110px}
@keyframes bob{50%{translate:0 -10px}}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--border);background:var(--bg-alt);overflow:hidden;padding:1.1rem 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{display:flex;gap:2.5rem;width:max-content;animation:drift 40s linear infinite}
.marquee span{display:flex;align-items:center;gap:2.5rem;font-weight:600;color:var(--text-dim);white-space:nowrap}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- Word reveal statement ---------- */
.statement{padding:clamp(6rem,14vw,11rem) 0}
.statement p{font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.12;letter-spacing:-.035em;font-weight:700;max-width:22ch}
.statement .w{opacity:.16;transition:opacity .35s}
.statement .w.on{opacity:1}

/* ---------- Sticky feature scroll (Oura / Fey) ---------- */
.tour{padding:4rem 0 6rem}
.tour__head{margin-bottom:3rem}
.tour__grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.tour__sticky{position:sticky;top:12vh;height:76vh;display:grid;place-items:center}
.tour__sticky .device{width:min(330px,80%)}
.tour__sticky .device img{opacity:0;transition:opacity .6s var(--ease-out)}
.tour__sticky .device img.on{opacity:1}
.tour__ring{position:absolute;width:min(520px,110%);aspect-ratio:1;border-radius:50%;border:1px dashed rgba(var(--accent-rgb),.25);animation:spin 60s linear infinite}
.tour__ring::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.12)}
@keyframes spin{to{transform:rotate(1turn)}}
.step{min-height:76vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .5s}
.js .step{opacity:.25}
.js .step.on{opacity:1}
.step__num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent-hover);font-size:.9rem;letter-spacing:.06em}
.step h3{font-size:clamp(1.6rem,2.8vw,2.4rem);letter-spacing:-.03em;line-height:1.1;margin:.6rem 0 .9rem}
.step p{color:var(--text-dim);max-width:30rem}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.tags span{font-size:.8rem;padding:.35rem .75rem;border-radius:999px;background:rgba(var(--accent-rgb),.1);color:var(--accent-hover);border:1px solid rgba(var(--accent-rgb),.25)}
.step .device--inline{display:none}

/* ---------- Bento (Bevel) ---------- */
.bento{padding:6rem 0}
.bento__grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(240px,auto);gap:1rem;margin-top:3rem}
.card{position:relative;overflow:hidden;border-radius:28px;padding:1.6rem;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid var(--border);transition:transform .4s var(--ease-out),border-color .3s;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--cx,50%) var(--cy,50%),rgba(var(--accent-rgb),.18),transparent 60%)}
.card:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.card:hover::before{opacity:1}
.card h3{font-size:1.3rem;letter-spacing:-.025em;margin-bottom:.4rem}
.card p{color:var(--text-dim);font-size:.95rem;max-width:26rem}
/* Peek phones: centred in their column, cut off only at the card's bottom edge
   behind a fade. Negative bottom margin keeps the phone from growing the card. */
.card .peek{transition:transform .6s var(--ease-out)}
.card:hover .peek{transform:translateY(-3%)}
.c-a,.c-b{padding-bottom:0}
.c-a::after,.c-b::after{content:"";position:absolute;inset:auto 0 0;height:30%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(24,19,37,0),rgba(24,19,37,.94) 88%)}
.c-a{grid-column:span 4;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;padding-right:52%}
.c-a .peek{position:absolute;top:2rem;left:50%;right:0;margin:0 auto;width:min(250px,34%)}
.c-b{grid-column:span 2;grid-row:span 2}
.c-b .peek{width:min(230px,64%);margin:1.6rem auto -100%}
.c-c,.c-d,.c-e{grid-column:span 2}
.icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.18);color:var(--accent-hover);margin-bottom:1rem}
.icon svg{width:22px;height:22px}

/* ---------- Carousel (Oura) ---------- */
.gallery{padding:5rem 0 6rem;background:var(--bg-alt);border-block:1px solid var(--border)}
.gallery__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.arrows{display:flex;gap:.5rem}
.arrows button{width:46px;height:46px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;transition:background .2s}
.arrows button:hover{background:rgba(var(--accent-rgb),.15)}
.rail{--edge:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:2.5rem var(--edge) 1rem;scrollbar-width:none;scroll-padding:0 var(--edge)}
.rail::-webkit-scrollbar{display:none}
.slide{flex:0 0 clamp(200px,22vw,260px);scroll-snap-align:start}
.slide .device{transition:transform .5s var(--ease-out)}
.slide:hover .device{transform:translateY(-8px) rotate(-1deg)}
.slide h3{margin-top:1.1rem;font-size:1rem;letter-spacing:-.02em}
.slide p{font-size:.85rem;color:var(--text-dim)}

/* ---------- Privacy ---------- */
.privacy{padding:6rem 0}
.privacy__box{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:center;border-radius:32px;padding:clamp(1.8rem,4vw,3rem);background:radial-gradient(80% 120% at 0% 0%,rgba(var(--accent-rgb),.16),transparent 60%),var(--bg-soft);border:1px solid var(--border)}
.shield{width:120px;height:120px;border-radius:36px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.18);color:var(--accent-hover);animation:pulse 3.5s ease-in-out infinite}
.shield svg{width:56px;height:56px}
@keyframes pulse{50%{box-shadow:0 0 0 18px rgba(var(--accent-rgb),0)}0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.25)}}
.privacy ul{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 2rem;margin-top:1.4rem}
.privacy li{color:var(--text-dim);font-size:.95rem;padding-left:1.6rem;position:relative}
.privacy li::before{content:"";position:absolute;left:0;top:.45em;width:.8rem;height:.45rem;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.privacy li b{color:var(--text)}

/* ---------- FAQ ---------- */
.faq{padding:2rem 0 6rem}
.faq__list{max-width:820px;margin:2.5rem auto 0}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0;font-weight:600;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);margin-right:4px;transform:rotate(45deg);transition:transform .3s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{color:var(--text-dim);padding:0 0 1.3rem;max-width:42rem}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease-out),content-visibility .4s allow-discrete}
.faq details[open]::details-content{block-size:auto}
:root{interpolate-size:allow-keywords}

/* ---------- Final CTA (Headspace) ---------- */
.cta{padding:2rem var(--pad) 6rem}
.cta__box{position:relative;overflow:hidden;max-width:var(--max);margin:0 auto;border-radius:40px;padding:clamp(3rem,8vw,6rem) var(--pad) clamp(9rem,16vw,12rem);text-align:center;isolation:isolate;background:linear-gradient(180deg,var(--accent-2),var(--accent-soft) 55%,var(--bg-soft))}
.cta__box img.icon-big{width:96px;height:96px;border-radius:24px;margin:0 auto 1.4rem;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.cta__box h2{font-size:clamp(2.4rem,6vw,4.8rem);letter-spacing:-.045em;line-height:1;font-weight:800}
.cta__box p{color:#e2d9f5;max-width:34rem;margin:1rem auto 2rem}
.cta__box .badges{justify-content:center}
.cta__box .route{bottom:1.25rem}

/* ---------- Footer (VanMoof) ---------- */
footer{padding:4rem 0 2rem;border-top:1px solid var(--border)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.foot h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:.9rem}
.foot a{display:block;color:var(--text-dim);font-size:.92rem;padding:.2rem 0}
.foot a:hover{color:var(--text)}
.foot p{color:var(--text-dim);font-size:.92rem;max-width:22rem;margin-top:.8rem}
.wordmark{font-size:clamp(4rem,17vw,15rem);font-weight:800;letter-spacing:-.06em;line-height:.85;margin:3rem 0 1.5rem;background:linear-gradient(180deg,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.02));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.foot__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--text-faint)}

/* ---------- Generic reveal ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav__links{display:none}
  .hero{padding-top:6.5rem}
  .hero__grid{grid-template-columns:1fr}
  .hero__stage{height:520px}
  .chip--1{top:-3%;right:0}
  .chip--2{right:0}
  .chip{max-width:min(78vw,300px)}
  .shield{width:76px;height:76px;border-radius:24px}
  .shield svg{width:38px;height:38px}
  .hero__phone{left:57%}
  .hero__phone--back{left:30%}
  .tour__grid{grid-template-columns:1fr;gap:0}
  .tour__sticky{display:none}
  .step,.js .step{min-height:auto;opacity:1;padding:2.5rem 0}
  .step .device--inline{display:block;width:min(240px,64%);margin:1.8rem auto 0}
  .bento__grid{grid-template-columns:1fr}
  .c-a,.c-b,.c-c,.c-d,.c-e{grid-column:auto;grid-row:auto}
  .c-a,.c-b{display:block;min-height:560px;padding-right:1.6rem}
  .c-a .peek,.c-b .peek{position:relative;top:auto;left:auto;right:auto;width:min(240px,66%);margin:1.6rem auto -100%}
  .privacy__box{grid-template-columns:1fr}
  .privacy ul{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .foot > div:first-child{grid-column:1/-1}
}

/* ---------- Accessibility helpers ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:.7rem 1.1rem;background:var(--btn);color:var(--on-accent);font-weight:600;border-radius:0 0 14px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Language switcher (EN | DE) ---------- */
.lang{display:flex;align-items:center;gap:1px;padding:3px;border-radius:999px;border:1px solid var(--border);font-size:.76rem;font-weight:700;letter-spacing:.06em}
.lang a{padding:.32rem .55rem;border-radius:999px;color:var(--text-dim);line-height:1;transition:color .2s,background .2s}
.lang a:hover{color:var(--text)}
.lang a[aria-current="page"]{background:rgba(var(--accent-rgb),.2);color:var(--text)}
.lang span{color:var(--text-faint);font-weight:400}

/* ---------- Mobile menu (pure <details>, works without JS) ---------- */
.menu{display:none;position:relative}
.menu summary{list-style:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--border-strong)}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{position:relative;display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transition:background .2s}
.menu summary i::before,.menu summary i::after{content:"";position:absolute;left:0;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease-out)}
.menu summary i::before{top:-5px}
.menu summary i::after{top:5px}
.menu[open] summary i{background:transparent}
.menu[open] summary i::before{transform:translateY(5px) rotate(45deg)}
.menu[open] summary i::after{transform:translateY(-5px) rotate(-45deg)}
.menu__panel{position:absolute;right:-.5rem;top:calc(100% + 14px);min-width:230px;display:grid;padding:.5rem;border-radius:22px;background:rgba(15,12,23,.97);border:1px solid var(--border-strong);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.menu__panel a{padding:.75rem 1rem;border-radius:14px;color:var(--text-dim);font-size:.95rem}
.menu__panel a:hover{background:rgba(var(--accent-rgb),.12);color:var(--text)}
.menu__panel a.menu__cta{margin-top:.3rem;background:var(--btn);color:var(--on-accent);font-weight:600;text-align:center}

/* ---------- Document pages (legal, guide, comparison) ---------- */
.doc{position:relative;isolation:isolate;padding:8.5rem 0 5rem;overflow:hidden}
.doc::before{content:"";position:absolute;inset:-30% -10% auto;height:620px;z-index:-1;pointer-events:none;background:radial-gradient(45% 55% at 75% 30%,rgba(var(--accent-rgb),.2),transparent 70%),radial-gradient(35% 45% at 10% 50%,rgba(89,29,187,.22),transparent 70%)}
.doc__inner{max-width:800px;margin:0 auto;padding:0 var(--pad)}
.doc__head{padding-bottom:2rem;margin-bottom:2.2rem;border-bottom:1px solid var(--border)}
.doc h1{font-size:clamp(2.2rem,5.2vw,3.7rem);line-height:1.04;letter-spacing:-.042em;font-weight:800;margin:.9rem 0 1rem;overflow-wrap:break-word;hyphens:auto}
.doc__meta{color:var(--text-faint);font-size:.9rem}
.doc__lead{color:var(--text-dim);font-size:clamp(1.05rem,1.5vw,1.2rem);margin-top:1rem}
.toc{margin:0 0 2.5rem;padding:1.3rem 1.5rem;border-radius:22px;background:rgba(255,255,255,.035);border:1px solid var(--border)}
.toc h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:.7rem}
.toc ol{list-style:decimal;padding-left:1.3rem;columns:2 16rem;column-gap:2rem;color:var(--text-faint);font-size:.93rem}
.toc--numbered ol{list-style:none;padding-left:0}
.toc li{padding:.18rem 0;break-inside:avoid}
.toc a{color:var(--text-dim)}
.toc a:hover{color:var(--text)}
.prose{color:var(--text-dim)}
.prose h2{color:var(--text);font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.2;letter-spacing:-.03em;margin:3rem 0 1rem;scroll-margin-top:6.5rem}
.prose h3{color:var(--text);font-size:1.1rem;letter-spacing:-.015em;margin:1.8rem 0 .6rem;scroll-margin-top:6.5rem}
.prose p{margin:0 0 1rem}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.3rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:.4rem 0;padding-left:.2rem}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent-hover);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.prose a:hover{color:var(--text)}
.prose strong,.prose b{color:var(--text);font-weight:600}
.prose address{font-style:normal;color:var(--text);margin:0 0 1rem;line-height:1.65}
.prose a[href^="mailto:"],.prose code{white-space:nowrap;hyphens:none}
.prose code{font:500 .88em ui-monospace,SFMono-Regular,Menlo,monospace;padding:.1em .35em;border-radius:6px;background:rgba(255,255,255,.07);color:var(--text)}
.callout{margin:1.6rem 0;padding:1.1rem 1.3rem;border-radius:0 18px 18px 0;border-left:3px solid var(--accent);background:rgba(var(--accent-rgb),.08);color:var(--text)}
.callout p:last-child{margin-bottom:0}
.callout--warn{border-left-color:#ffb15c;background:rgba(255,177,92,.08)}
.table-wrap{margin:1.6rem 0;overflow-x:auto;border:1px solid var(--border);border-radius:18px;-webkit-overflow-scrolling:touch}
.table-wrap table{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem}
.table-wrap th,.table-wrap td{padding:.8rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.table-wrap thead th{color:var(--text);font-weight:600;background:rgba(255,255,255,.04)}
.table-wrap tbody th{color:var(--text);font-weight:600}
.table-wrap td{color:var(--text-dim)}
.table-wrap tr:last-child>*{border-bottom:0}
.table-wrap--fit table{min-width:0}
.doc__cta{margin-top:3.5rem;padding:clamp(1.6rem,4vw,2.4rem);border-radius:28px;background:radial-gradient(80% 120% at 0% 0%,rgba(var(--accent-rgb),.18),transparent 60%),var(--bg-soft);border:1px solid var(--border)}
.doc__cta h2{margin-top:0}
.doc__cta .badges{margin-top:1.2rem}
.doc__back{display:inline-flex;margin-top:2.5rem;font-size:.92rem;color:var(--accent-hover)}
.doc__back:hover{color:var(--text)}

/* ---------- Footer extras ---------- */
.foot__bottom a{color:var(--text-dim)}
.foot__bottom a:hover{color:var(--text)}

/* ---------- Responsive additions ---------- */
@media (max-width:900px){
  .menu{display:block}
  .nav{gap:.9rem}
}
@media (max-width:600px){
  .hero h1 .line{white-space:normal}
  .hero{padding-bottom:7rem}
  .route{height:92px}
  .route__pin--a{left:8%}
  .route__pin--d{left:92%}
  .wordmark{margin-top:2.5rem}
  .table-wrap{overflow:visible}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap th,.table-wrap td{display:block;min-width:0}
  .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table-wrap tr{padding:.85rem 1rem;border-bottom:1px solid var(--border)}
  .table-wrap tr:last-child{border-bottom:0}
  .table-wrap th,.table-wrap td{padding:0;border:0}
  .table-wrap tbody th{margin-bottom:.2rem}
}
@media (max-width:480px){
  .nav{gap:.7rem;padding-left:.75rem}
  .nav .nav__cta{display:none}
  .foot{grid-template-columns:1fr}
}

/* ---------- Reduced motion: everything static, nothing hidden ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.fade-in{opacity:1;transform:none}
  .hero h1 .line > span{transform:none}
  .statement .w{opacity:1}
  /* No scroll-driven screen swap: every step shows its own screen */
  .tour__grid{grid-template-columns:1fr}
  .tour__sticky{display:none}
  .tour__grid > div{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:2rem 4rem}
  .step,.js .step{min-height:auto;opacity:1;padding:1rem 0;justify-content:flex-start}
  .step .device--inline{display:block;width:min(240px,64%);margin:1.8rem auto 0}
}
.privacy__more{margin-top:1.4rem;font-size:.95rem}
.privacy__more a{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
html:not(.js) .arrows{display:none}


/* ---------- PinPoints extras ---------- */
.note{margin-top:1rem;font-size:.82rem;color:var(--text-faint)}
.redirect{min-height:100svh;display:grid;place-items:center;text-align:center;padding:2rem var(--pad)}
.redirect p{color:var(--text-dim);margin-top:.6rem}
.redirect a{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}

/* ---------- Pins demo (interactive micro-illustration) ----------
   Without JS the pre-set pins, the route and the example totals are shown as a
   static picture; with JS a tap on the map adds a stop (up to 6) and the two
   mode buttons switch between straight line and street-like legs. */
.demo{padding:5rem 0 6rem}
.demo__box{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;border-radius:32px;padding:clamp(1.4rem,4vw,3rem);background:radial-gradient(70% 120% at 100% 0%,rgba(var(--accent-rgb),.16),transparent 60%),var(--bg-soft);border:1px solid var(--border)}
.demo__text p{color:var(--text-dim);margin-top:.4rem;max-width:30rem}
.demo__modes{display:inline-flex;gap:2px;padding:3px;margin-top:1.4rem;border-radius:999px;border:1px solid var(--border-strong)}
.demo__modes button{padding:.45rem .9rem;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--text-dim);transition:background .2s,color .2s}
.demo__modes button[aria-pressed="true"]{background:var(--btn);color:var(--on-accent)}
html:not(.js) .demo__modes,html:not(.js) .demo__reset,html:not(.js) .demo__hint{display:none}
.demo__stats{display:flex;gap:2rem;margin-top:1.4rem}
.demo__stats b{display:block;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.demo__stats small{color:var(--text-faint);font-size:.82rem}
.demo__reset{margin-top:1.2rem;font-size:.88rem;color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
.demo__map{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;cursor:crosshair;touch-action:manipulation;background:
  linear-gradient(rgba(205,196,230,.06) 1px,transparent 1px) 0 0/10% 12.5%,
  linear-gradient(90deg,rgba(205,196,230,.06) 1px,transparent 1px) 0 0/10% 12.5%,
  radial-gradient(60% 50% at 30% 30%,rgba(89,29,187,.28),transparent 70%),
  radial-gradient(50% 60% at 80% 80%,rgba(36,20,118,.6),transparent 70%),#17122a;border:1px solid var(--border)}
.demo__map svg{position:absolute;inset:0;width:100%;height:100%}
.demo__leg{fill:none;stroke:var(--accent-hover);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.demo__leg--air{stroke-dasharray:2 8}
.demo__pin{transform-box:fill-box;transform-origin:50% 100%;animation:pin-drop .5s var(--ease-out) both}
.demo__pin path{fill:var(--pin)}
.demo__pin text{fill:var(--accent-2);font:700 11px var(--font);text-anchor:middle}
@keyframes pin-drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.demo__hint{position:absolute;left:.9rem;bottom:.8rem;padding:.35rem .7rem;border-radius:999px;background:rgba(15,12,23,.8);font-size:.78rem;color:var(--text-dim);pointer-events:none}
@media (max-width:900px){
  .demo__box{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .demo__pin{transform:none;opacity:1}
}