/* 45weg.nl
 *
 * The site is the app's instrument panel at page scale. Near-black chrome
 * carries the structure, the bright surfaces are the "dial" the rider reads,
 * and the plate colour says which set of rules is in force.
 *
 * Every colour here is copied from app/lib/core/theme/tokens.dart. They were
 * measured against the surfaces they sit on, so none of them is a taste
 * decision and none of them may be nudged by eye. Two consequences shape the
 * whole sheet: yellow is only ever a fill under near-black ink, and blue and
 * purple are only ever ink on a bright surface or a fill under pale text.
 */

@font-face{font-family:Archivo;src:url('/assets/Archivo-Variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}

:root{
  --face:#0a0c0d;--raised:#16191b;--hairline:#2a2f33;
  --paper:#f3f1ec;--paper-dim:#b9bdc0;
  --yellow:#f2c200;--on-yellow:#0a0c0d;
  --blue:#1256b8;--on-blue:#fafaf8;
  --route:#5b21b6;--travelled:#9aa0a6;
  --alarm:#e8503f;--sign-red:#c1121f;--sign-face:#fafaf8;
  --ink:#0a0c0d;--muted:#62686b;--line:#d4d2ca;
  --accent:var(--yellow);--on-accent:var(--on-yellow);
  /* The keyboard focus ring. A token rather than a literal because the ring was
     plate yellow everywhere, which made it 1:1 and invisible on the four yellow
     panels, two of which hold a link. Any surface that changes the ground under
     a control changes this with it. */
  --focus:var(--yellow);
  --r-pill:999px;--r-card:24px;--r-control:16px;--r-plate:4px;
  --max:1240px;--gutter:clamp(20px,4.4vw,64px);--bar:76px;
  --edge:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));
  --quick:160ms;--settle:320ms;--ease:cubic-bezier(.22,.8,.28,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--face);color:var(--paper);font-family:Archivo,sans-serif;margin:0;overflow-x:hidden}
button{font:inherit}
img{display:block;max-width:100%}
a{color:inherit}
a,button{touch-action:manipulation}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{list-style:none;padding:0}
p{line-height:1.55}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.ticker,.launch,.legal-summary,.legal-next,.hud-turn{--focus:var(--on-yellow)}
::selection{background:var(--yellow);color:var(--on-yellow)}

/* Display type. Width does the work a second typeface would normally do, which
   is how the app keeps one instrument looking like one instrument. */
h1,h2,h3{font-variation-settings:'wdth' 92;letter-spacing:-.015em;line-height:.84;margin:0}
h1{font-size:clamp(3.5rem,7.6vw,7.2rem);font-variation-settings:'wdth' 86;line-height:.79}
h2{font-size:clamp(2.9rem,5.9vw,5.6rem)}
.legend,.eyebrow{color:var(--paper-dim);font-size:.68rem;font-weight:800;letter-spacing:.16em;line-height:1.2;margin:0;text-transform:uppercase}
.legend.accent,.eyebrow.accent{color:var(--yellow)}
.lede{color:var(--paper-dim);font-size:clamp(1.02rem,1.25vw,1.18rem);max-width:46ch}
.section-note{color:var(--paper-dim);font-size:1.02rem;max-width:38ch}
b,strong{font-variant-numeric:tabular-nums}

.skip-link{background:var(--yellow);border-radius:var(--r-pill);color:var(--on-yellow);font-weight:800;left:16px;padding:14px 20px;position:fixed;top:-100px;z-index:100}
.skip-link:focus{top:16px}

/* ---------- chrome bar ---------- */
.chrome-bar{align-items:center;background:var(--face);border-bottom:1px solid var(--hairline);color:var(--paper);display:grid;grid-template-columns:auto 1fr auto;height:var(--bar);padding:0 var(--edge);position:sticky;top:0;z-index:60}
/* Over the dark home page the bar can float; over a paper document it must be
   opaque or it turns grey. */
.home .chrome-bar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:rgba(10,12,13,.82)}
.brand{align-items:center;display:inline-flex;font-size:1.2rem;font-variation-settings:'wdth' 100;font-weight:850;gap:11px;letter-spacing:-.02em;text-decoration:none}
.brand img{border-radius:9px;height:38px;width:38px}
.chrome-nav{display:flex;gap:6px;justify-content:center}
.chrome-nav a{border-radius:var(--r-pill);color:var(--paper-dim);font-size:.72rem;font-weight:800;letter-spacing:.1em;padding:11px 16px;text-decoration:none;text-transform:uppercase;transition:background var(--quick) ease,color var(--quick) ease}
.chrome-nav a:hover,.chrome-nav a:focus-visible{background:var(--raised);color:var(--paper)}
.app-store-link{border-radius:10px;display:inline-block;line-height:0;text-decoration:none;transition:opacity var(--quick) ease,transform var(--quick) ease}
.app-store-link:hover,.app-store-link:focus-visible{opacity:.86;transform:translateY(-2px)}
.app-store-link img{height:58px;max-width:none;width:auto}
.app-store-link.is-compact img{height:40px}

/* ---------- hero ---------- */
.hero{align-items:center;display:grid;gap:clamp(40px,5vw,86px);grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr);margin:0 auto;max-width:var(--max);min-height:calc(100svh - var(--bar));padding:clamp(56px,7vw,104px) var(--gutter) clamp(84px,9vw,128px);position:relative}
.hero:before{background:radial-gradient(120% 90% at 12% 0%,rgba(242,194,0,.09),transparent 62%),radial-gradient(90% 80% at 100% 100%,rgba(91,33,182,.16),transparent 60%);content:"";inset:0;pointer-events:none;position:absolute;z-index:-1}
.hero-copy>*+*{margin-top:26px}
.hero-copy h1 em{color:var(--yellow);font-style:normal}
.hero-actions{align-items:center;display:flex;flex-wrap:wrap;gap:16px}
.ghost-pill{align-items:center;border:1px solid var(--hairline);border-radius:var(--r-pill);color:var(--paper);display:inline-flex;font-size:.74rem;font-weight:800;gap:12px;letter-spacing:.12em;min-height:58px;padding:0 26px;text-decoration:none;text-transform:uppercase;transition:background var(--quick) ease,border-color var(--quick) ease}
.ghost-pill:hover,.ghost-pill:focus-visible{background:var(--raised);border-color:var(--paper-dim)}
.hero-facts{border-top:1px solid var(--hairline);display:grid;gap:20px;grid-template-columns:repeat(3,auto);justify-content:start;padding-top:22px}
.hero-facts div{padding-right:clamp(18px,3vw,44px)}
.hero-facts div+div{border-left:1px solid var(--hairline);padding-left:clamp(18px,3vw,44px)}
.hero-facts dt{color:var(--paper-dim);font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hero-facts b{display:block;font-size:1.5rem;font-variation-settings:'wdth' 104;font-weight:800;margin-top:8px}

.hero-stage{aspect-ratio:5/6;border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:0 40px 90px rgba(0,0,0,.55);isolation:isolate;overflow:hidden;position:relative}
.hero-photo{height:100%;inset:0;object-fit:cover;object-position:58% center;position:absolute;width:100%;z-index:-3}
.hero-stage:after{background:linear-gradient(180deg,rgba(7,9,9,.72),rgba(7,9,9,.34) 42%,rgba(7,9,9,.86));content:"";inset:0;position:absolute;z-index:-2}
.route-draw{height:100%;inset:0;position:absolute;width:100%;z-index:-1}
.route-draw path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.route-casing{stroke:var(--face);stroke-width:26}
.route-line{stroke:var(--route);stroke-width:14}
.route-start{fill:var(--sign-face);stroke:var(--face);stroke-width:5}
.route-start-core{fill:var(--blue)}
.route-end{fill:var(--sign-face);stroke:var(--face);stroke-width:5}
.route-end-core{fill:var(--alarm)}

.hud{inset:14px;pointer-events:none;position:absolute}
.hud-top{align-items:center;background:rgba(10,12,13,.9);border:1px solid var(--hairline);border-radius:var(--r-pill);display:flex;justify-content:space-between;padding:12px 20px}
.hud-top b{color:var(--yellow);font-size:1.15rem;font-variation-settings:'wdth' 104}
.hud-turn{align-items:center;background:var(--yellow);border-radius:var(--r-card);box-shadow:0 18px 32px rgba(0,0,0,.36);color:var(--on-yellow);display:flex;gap:16px;margin-top:12px;padding:18px 22px}
.hud-arrow{font-size:2.4rem;line-height:1}
.hud-turn b{display:block;font-size:2.1rem;font-variation-settings:'wdth' 104;letter-spacing:-.02em;line-height:.9}
.hud-turn span{display:block;font-size:.9rem;font-weight:750;margin-top:6px}
.hud-turn small{font-size:.72rem;font-weight:650;opacity:.78}
.hud-bottom{align-items:center;background:rgba(10,12,13,.94);border:1px solid var(--hairline);border-radius:var(--r-card);bottom:0;display:flex;gap:14px;left:0;padding:14px 18px;position:absolute;right:0}
.hud-bottom>div{flex:1}
.hud-bottom strong{display:block;font-size:1rem}
.hud-bottom small{color:var(--paper-dim);font-size:.65rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}

/* The licence plate. Tight corners on purpose: it is a real object, and
   rounding it further stops it looking like one. */
.plate{align-items:center;background:var(--accent);border-radius:var(--r-plate);color:var(--on-accent);display:inline-flex;font-size:.92rem;font-variant-numeric:tabular-nums;font-weight:900;gap:8px;height:36px;letter-spacing:.02em;overflow:hidden;padding-right:12px}
.plate i{align-self:stretch;background:var(--blue);color:var(--on-blue);display:flex;align-items:center;font-size:.5rem;font-style:normal;font-weight:800;letter-spacing:.04em;padding:0 5px}
.plate-yellow{--accent:var(--yellow);--on-accent:var(--on-yellow)}
.plate-blue{--accent:var(--blue);--on-accent:var(--on-blue)}
.plate-blue i{background:rgba(250,250,248,.22);color:var(--on-blue)}

/* The Dutch speed-limit sign, and the one place red belongs. */
.speed-sign{align-items:center;background:var(--sign-face);border:7px solid var(--sign-red);border-radius:50%;color:var(--ink);display:inline-flex;height:56px;justify-content:center;width:56px}
.speed-sign b{font-size:1.25rem;font-variation-settings:'wdth' 100;font-weight:900}
.speed-sign.is-large{border-width:11px;height:112px;width:112px}
.speed-sign.is-large b{font-size:2.6rem;letter-spacing:-.03em}
.speed-sign.is-void{background:var(--line);border-color:var(--muted)}
.speed-sign.is-void b{font-size:1.7rem}

/* ---------- ticker ---------- */
.ticker{background:var(--yellow);border-block:1px solid var(--on-yellow);color:var(--on-yellow);overflow:hidden;padding:16px 0;position:relative}
/* The line scrolls by itself and never stops, which WCAG 2.2.2 says a reader
   must be able to halt. Opaque and hard against the end of the bar, so the text
   passes behind it rather than under it. Built by main.js: without JavaScript
   there is nothing here to pause. */
.ticker-stop{align-items:center;background:var(--yellow);border:0;border-inline-start:1px solid var(--on-yellow);color:var(--on-yellow);cursor:pointer;display:flex;font-size:.8rem;inset-block:0;inset-inline-end:0;justify-content:center;letter-spacing:.1em;line-height:1;position:absolute;width:56px}
/* The duplicate half of the track carries no meaning of its own. It is hidden
   from assistive technology in the markup; display:contents keeps the flex row
   measuring exactly as it did before the wrapper existed. */
.ticker-copy{display:contents}
.ticker-track{align-items:center;animation:slide 42s linear infinite;display:flex;gap:34px;width:max-content}
.ticker-track span{align-items:center;display:inline-flex;font-size:.78rem;font-weight:850;gap:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ticker-sign{display:block;height:30px;width:auto}
.ticker-track i{font-size:.4rem;font-style:normal;opacity:.6}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- section scaffolding ---------- */
.switchboard,.product,.answers,.privacy,.faq{padding:clamp(84px,10vw,146px) var(--edge)}
.section-head{display:grid;gap:0 6vw;grid-template-columns:minmax(0,1fr) minmax(240px,.6fr);margin-bottom:clamp(44px,5vw,72px)}
.section-head .legend,.section-head .eyebrow{grid-column:1/-1;margin-bottom:20px}
.section-head .section-note{align-self:end;padding-bottom:10px}

/* ---------- vehicle switchboard ---------- */
.switchboard{background:var(--face);border-top:1px solid var(--hairline)}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.tab{align-items:center;background:transparent;border:1px solid var(--hairline);border-radius:var(--r-pill);color:var(--paper-dim);cursor:pointer;display:inline-flex;font-size:.8rem;font-weight:800;gap:12px;letter-spacing:.06em;min-height:60px;padding:0 24px 0 14px;transition:background var(--quick) ease,border-color var(--quick) ease,color var(--quick) ease}
.tab:hover{background:var(--raised);color:var(--paper)}
.tab[aria-selected="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.tab-plate{height:32px;font-size:.78rem}
.tab-plate.plate-blue i{background:rgba(250,250,248,.24)}

.dial{background:var(--paper);border-radius:var(--r-card);color:var(--ink);display:grid;gap:clamp(26px,3vw,44px) clamp(30px,4vw,64px);grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);overflow:hidden;padding:clamp(28px,3.6vw,54px);padding-left:calc(clamp(28px,3.6vw,54px) + 12px);position:relative}
.dial:before{background:var(--accent);content:"";inset:0 auto 0 0;position:absolute;width:12px}
.dial[data-plate="blue"]{--accent:var(--blue);--on-accent:var(--on-blue)}
.dial[data-plate="yellow"]{--accent:var(--yellow);--on-accent:var(--on-yellow)}
.dial .legend{color:var(--muted)}
.dial-id{grid-column:1;grid-row:1}
.dial-id h3{font-size:clamp(2.3rem,3.6vw,3.4rem);margin:18px 0 12px}
.dial-blurb{color:var(--muted);font-size:.98rem;margin-top:18px;max-width:38ch}
.dial-speeds{align-items:start;display:flex;gap:clamp(20px,3vw,40px);grid-column:1;grid-row:2}
.speed-block{text-align:center;width:112px}
.speed-block .legend{margin-top:14px}
.access-list{align-self:start;border-top:2px solid var(--ink);grid-column:2;grid-row:1/3}
.access-row{align-items:center;border-bottom:1px solid var(--line);display:grid;gap:18px;grid-template-columns:46px 88px minmax(0,1fr) auto;min-height:84px;padding:14px 0}
.access-mark{align-items:center;border:2px solid var(--ink);border-radius:50%;display:flex;font-size:1.35rem;font-weight:900;height:46px;justify-content:center;width:46px}
/* The sign column is one width for signs of two shapes: G11 and G12a are round
   and G13 is a wide plate, so the box is sized and the drawing fits itself into
   it rather than each drawing setting its own column. */
.access-sign{align-items:center;display:flex;height:54px;justify-content:center;width:88px}
.access-sign img{display:block;height:auto;max-height:100%;max-width:100%;width:auto}
.access-sign.is-unsigned{color:var(--line);font-size:1.1rem}
.access-what b{display:block;font-size:1.15rem;font-variation-settings:'wdth' 100}
.access-what small{color:var(--muted);font-size:.8rem;font-weight:650}
.access-state{font-size:.7rem;font-weight:850;letter-spacing:.12em;text-align:right;text-transform:uppercase}
.is-must .access-mark{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.is-shut .access-mark{background:var(--alarm);border-color:var(--alarm);color:var(--sign-face)}
.dial-foot{border-top:1px solid var(--line);color:var(--muted);font-size:.86rem;grid-column:1/-1;max-width:70ch;padding-top:22px}

/* ---------- product ---------- */
.product{background:var(--raised);border-top:1px solid var(--hairline);display:grid;gap:clamp(48px,6vw,110px);grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);position:relative}
.product-copy{align-self:center;max-width:52ch}
.product-copy h2{margin:20px 0 24px}
.product-copy>p{color:var(--paper-dim);font-size:1.04rem}
.product-points{border-top:1px solid var(--hairline);margin-top:38px}
.product-points li{border-bottom:1px solid var(--hairline);display:grid;gap:6px;padding:20px 0}
.product-points b{font-size:1.02rem}
.product-points span{color:var(--paper-dim);font-size:.9rem}
.device{justify-self:center;max-width:392px;text-align:center}
.device-shell{background:var(--face);border:1px solid var(--hairline);border-radius:42px;box-shadow:0 36px 80px rgba(0,0,0,.6);overflow:hidden;padding:11px}
.device-shell img{border-radius:32px;height:auto;width:100%}
.device figcaption{margin-top:20px}
.callouts{display:grid;gap:12px;margin-top:30px}
.callout{align-items:center;display:flex;gap:14px}
.callout:before{border-radius:2px;content:"";height:4px;width:34px}
.callout span{color:var(--paper-dim);font-size:.76rem;font-weight:750;letter-spacing:.05em}
.callout-line:before{background:var(--route)}
.callout-plate:before{background:var(--yellow)}
.callout-eta:before{background:var(--paper-dim)}

/* ---------- answers ---------- */
.answers{background:var(--face);border-top:1px solid var(--hairline)}
.answer-stack{border-top:2px solid var(--hairline)}
.answer{align-items:center;border-bottom:1px solid var(--hairline);display:grid;gap:clamp(18px,2.4vw,38px);grid-template-columns:44px 68px minmax(0,1fr);padding:clamp(26px,3vw,40px) 0}
.answer h3{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:10px}
.answer p{color:var(--paper-dim);font-size:.96rem;max-width:56ch}
.answer-mark{align-items:center;border:3px solid currentColor;border-radius:50%;display:flex;font-size:1.7rem;font-weight:900;height:60px;justify-content:center;width:60px}
.is-yes .answer-mark{color:var(--yellow)}
.is-no{background:var(--raised);border-radius:var(--r-control);margin-inline:calc(clamp(14px,2vw,26px)*-1);padding-inline:clamp(14px,2vw,26px)}
.is-no .answer-mark{color:var(--alarm)}
.is-unknown .answer-mark{color:var(--paper-dim)}

/* ---------- moment ---------- */
.moment{align-items:end;color:var(--paper);display:grid;isolation:isolate;min-height:clamp(520px,72vh,760px);overflow:hidden;padding:0 var(--edge) clamp(64px,8vw,112px);position:relative}
.moment>img{height:100%;inset:0;object-fit:cover;object-position:62% center;position:absolute;width:100%;z-index:-3}
.moment:after{background:linear-gradient(180deg,rgba(7,9,9,.32),rgba(7,9,9,.86));content:"";inset:0;position:absolute;z-index:-2}
.moment-copy{max-width:640px}
.moment-copy h2{margin:20px 0 24px}
.moment-copy p{font-size:1.06rem;max-width:48ch}

/* ---------- privacy ---------- */
.privacy{background:var(--blue);color:var(--on-blue);display:grid;gap:clamp(40px,7vw,120px);grid-template-columns:minmax(0,1fr) minmax(300px,.72fr)}
.privacy .legend{color:var(--on-blue);margin-bottom:20px}
.privacy-copy{align-self:end}
.privacy-copy p{font-size:1.06rem;max-width:48ch}
.reveal-link{align-items:center;border-bottom:2px solid currentColor;display:flex;font-size:.76rem;font-weight:850;gap:44px;justify-content:space-between;letter-spacing:.12em;margin-top:28px;padding-bottom:12px;text-decoration:none;text-transform:uppercase;transition:gap var(--quick) ease}
.reveal-link:hover,.reveal-link:focus-visible{gap:64px}

/* ---------- questions ---------- */
.faq{background:var(--face);border-top:1px solid var(--hairline);display:grid;gap:clamp(40px,6vw,110px);grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr)}
.faq .section-head{display:block;margin-bottom:0}
.questions{border-top:2px solid var(--hairline)}
.questions details{border-bottom:1px solid var(--hairline)}
.questions summary{align-items:center;cursor:pointer;display:flex;font-size:clamp(1.02rem,1.5vw,1.24rem);font-weight:750;gap:20px;justify-content:space-between;list-style:none;min-height:86px;padding:18px 0}
.questions summary::-webkit-details-marker{display:none}
.questions summary span{align-items:center;border:1px solid var(--hairline);border-radius:50%;display:flex;flex:none;font-size:1.35rem;font-weight:400;height:38px;justify-content:center;transition:transform var(--settle) var(--ease);width:38px}
.questions details[open] summary span{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow);transform:rotate(45deg)}
.questions details p{color:var(--paper-dim);font-size:.94rem;max-width:62ch;padding:0 0 28px}

/* ---------- launch ---------- */
.launch{align-items:center;background:var(--yellow);color:var(--on-yellow);display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;padding:clamp(64px,8vw,110px) var(--edge)}
.launch-copy img{background:var(--face);border-radius:16px;margin-bottom:24px;padding:9px}
.launch-copy .legend{color:rgba(10,12,13,.68);margin-bottom:16px}
.launch h2{font-size:clamp(2.8rem,5.4vw,5.4rem)}

/* ---------- footer ---------- */
/* The colour is not decoration. .legal-page sets the page text to --ink, which
   is the same near-black as --face, so the wordmark in here was 1:1 against
   its own background on every document page. .chrome-bar states its colour for
   the same reason. */
.site-footer{background:var(--face);border-top:1px solid var(--hairline);color:var(--paper);display:grid;gap:26px;grid-template-columns:1fr auto;padding:clamp(48px,5vw,72px) var(--edge) 32px}
.footer-lead p{color:var(--paper-dim);font-size:.86rem;margin-top:14px;max-width:34ch}
.site-footer nav{display:flex;gap:26px;justify-content:flex-end;padding-top:10px}
.site-footer nav a{color:var(--paper-dim);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-decoration:none;text-transform:uppercase}
.site-footer nav a:hover,.site-footer nav a:focus-visible{color:var(--paper)}
.copyright{border-top:1px solid var(--hairline);color:var(--paper-dim);font-size:.7rem;grid-column:1/-1;margin-top:14px;padding-top:24px}

/* ---------- legal pages ---------- */
/* Long-form reading happens on the bright surface, the way the map is the
   bright element inside the app's near-black chrome. */
.legal-page{background:var(--paper);color:var(--ink)}
.legal-hero{background:var(--face);color:var(--paper);padding:0 var(--edge)}
.privacy-document .legal-hero{background:var(--blue);color:var(--on-blue)}
.legal-hero-inner{align-items:end;display:grid;gap:clamp(40px,6vw,90px);grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);margin:0 auto;max-width:var(--max);min-height:clamp(420px,58vh,560px);padding:clamp(72px,8vw,110px) 0}
.legal-hero .legend,.legal-hero .eyebrow{color:inherit;margin-bottom:30px;opacity:.75}
.legal-hero h1{font-size:clamp(3.2rem,6.4vw,6.2rem)}
.legal-hero-copy{border-top:1px solid rgba(255,255,255,.42);padding-top:24px}
.legal-hero-copy p{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:790;line-height:1.08;margin-bottom:38px;max-width:20ch}
.legal-hero-copy span{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.legal-summary{background:var(--yellow);color:var(--on-yellow);display:grid;grid-template-columns:repeat(3,1fr);padding:0 var(--edge)}
.legal-summary article{padding:36px 34px 40px}
.legal-summary article+article{border-left:1px solid rgba(10,12,13,.32)}
.legal-summary span{font-size:.68rem;font-weight:900;letter-spacing:.12em}
.legal-summary strong{display:block;font-size:1.3rem;line-height:1.06;margin:54px 0 12px}
.legal-summary p{font-size:.86rem;max-width:32ch}
.legal-layout{display:grid;gap:clamp(48px,6vw,84px);grid-template-columns:250px minmax(0,760px);justify-content:center;margin:0 auto;max-width:var(--max);padding:clamp(72px,8vw,112px) var(--gutter) clamp(90px,10vw,150px)}
.legal-toc{align-self:start;border-top:3px solid var(--ink);position:sticky;top:calc(var(--bar) + 32px)}
.legal-toc>p{font-size:.68rem;font-weight:850;letter-spacing:.14em;padding:18px 0;text-transform:uppercase}
.legal-toc nav{border-top:1px solid var(--line);display:flex;flex-direction:column}
.legal-toc nav a{border-bottom:1px solid var(--line);color:var(--muted);font-size:.76rem;font-weight:700;padding:11px 0;text-decoration:none;transition:color var(--quick) ease}
.legal-toc nav a:hover,.legal-toc nav a:focus-visible{color:var(--ink)}
.legal-contact{display:flex;font-size:.7rem;font-weight:850;justify-content:space-between;letter-spacing:.1em;margin-top:28px;text-decoration:none;text-transform:uppercase}
.legal-content section{border-top:1px solid var(--ink);display:grid;gap:0 28px;grid-template-columns:52px minmax(0,1fr);padding:48px 0 58px;scroll-margin-top:calc(var(--bar) + 24px)}
.legal-number{font-size:.68rem;font-weight:900;letter-spacing:.1em;padding-top:9px}
/* The number owns column one; everything else stays in column two, including a
   heading that follows a label rather than the number. */
.legal-content h2{font-size:clamp(1.9rem,3vw,2.4rem);grid-column:2;margin-bottom:26px}
.legal-content h3{font-size:1.04rem;line-height:1.2;margin-bottom:10px}
.legal-content p,.legal-subsection{grid-column:2}
.legal-content p{color:#3f4446;font-size:.98rem;margin-bottom:18px}
.legal-content p:last-child{margin-bottom:0}
.legal-content a{text-decoration-thickness:1px;text-underline-offset:4px}
.legal-subsection{border-top:1px solid var(--line);padding:27px 0}
.legal-subsection:first-of-type{border-top:0;padding-top:0}
.legal-subsection p{margin-bottom:12px}
.legal-highlight{background:var(--blue);border-radius:var(--r-card);border-top:0!important;color:var(--on-blue);margin:26px -30px;padding:46px 30px 50px!important}
.legal-highlight p{color:var(--on-blue)}
.legal-action{align-items:center;border:1px solid rgba(250,250,248,.6);border-radius:var(--r-pill);display:flex;font-size:.7rem;font-weight:850;grid-column:2;justify-content:space-between;letter-spacing:.1em;margin-top:22px;min-height:56px;padding:0 24px;text-decoration:none!important;text-transform:uppercase}
.legal-content .priority{background:var(--face);border-radius:var(--r-card);border-top:0;color:var(--paper);margin:26px -30px;padding:48px 30px 52px}
.priority .legal-number,.priority .priority-label{color:var(--yellow)}
.priority .priority-label{font-size:.66rem;font-weight:850;letter-spacing:.12em;margin-bottom:20px;text-transform:uppercase}
.priority p{color:var(--paper)}
.legal-next{align-items:end;background:var(--yellow);color:var(--on-yellow);display:grid;gap:44px;grid-template-columns:1fr auto;padding:clamp(72px,8vw,104px) var(--edge)}
.legal-next .legend,.legal-next .eyebrow{color:rgba(10,12,13,.68);margin-bottom:20px}
.legal-next h2{font-size:clamp(2.4rem,4.4vw,4.4rem)}
.legal-next>a{align-items:center;border-bottom:2px solid var(--ink);display:flex;font-size:.76rem;font-weight:850;gap:42px;letter-spacing:.12em;padding-bottom:12px;text-decoration:none;text-transform:uppercase}
.legal-page .chrome-nav{justify-content:flex-end}
.legal-page .chrome-bar{grid-template-columns:auto 1fr}
.legal-page .chrome-nav a[aria-current="page"]{background:var(--raised);color:var(--paper)}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise 720ms both var(--ease)}
  .hero-copy>*:nth-child(2){animation-delay:80ms}
  .hero-copy>*:nth-child(3){animation-delay:150ms}
  .hero-copy>*:nth-child(4){animation-delay:220ms}
  .hero-copy>*:nth-child(5){animation-delay:290ms}
  .hero-stage{animation:rise 900ms 120ms both var(--ease)}
  .route-line,.route-casing{animation:draw 1900ms 320ms both cubic-bezier(.4,0,.2,1);stroke-dasharray:700;stroke-dashoffset:700}
  .route-casing{animation-delay:260ms}
  .route-start,.route-start-core{animation:pop 420ms 260ms both var(--ease)}
  .route-end,.route-end-core{animation:pop 420ms 2050ms both var(--ease)}
  .has-js .reveal{opacity:0;transform:translateY(30px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
  .has-js .reveal.is-in{opacity:1;transform:none}
  .has-js .reveal-stagger>*{opacity:0;transform:translateY(24px);transition:opacity 600ms var(--ease),transform 600ms var(--ease);transition-delay:calc(var(--i,0)*70ms)}
  .has-js .reveal-stagger.is-in>*{opacity:1;transform:none}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes pop{from{opacity:0;transform:scale(.4);transform-origin:center}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
}

/* ---------- narrower ---------- */
@media(max-width:1080px){
  .hero{gap:44px;grid-template-columns:minmax(0,1fr) minmax(280px,.86fr)}
  .hero-stage{aspect-ratio:4/5}
  .hud-turn{padding:14px 16px}
  .hud-turn b{font-size:1.7rem}
  .section-head,.product,.privacy,.faq{grid-template-columns:minmax(0,1fr)}
  .section-head .section-note{margin-top:22px;padding-bottom:0}
  .dial{grid-template-columns:minmax(0,1fr)}
  .dial-id,.dial-speeds,.access-list{grid-column:1;grid-row:auto}
  /* Without the width the figure is shrink-to-fit, and what it fits is the
     figcaption: the phone came out 293px wide inside 354px of column, chosen
     by the length of "Route preview, Amsterdam to Utrecht" and nothing else. */
  .device{justify-self:start;width:100%}
  .callouts{grid-column:1}
  .legal-hero-inner{grid-template-columns:minmax(0,1fr)}
  .legal-summary{grid-template-columns:1fr}
  .legal-summary article+article{border-left:0;border-top:1px solid rgba(10,12,13,.32)}
  .legal-summary strong{margin-top:32px}
  .legal-layout{grid-template-columns:minmax(0,1fr)}
  .legal-toc{position:static}
  /* Above 1080 the pull-out blocks bleed 30px into the gap beside a centred
     760px column. Below it the column runs to the gutter instead, so the bleed
     has to be the gutter: at a flat -30px they hung two pixels off the right
     edge of the page everywhere the gutter is narrower than that, which is
     every width from 621 to 681. */
  .legal-highlight,.legal-content .priority{margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)!important}
}

@media(max-width:820px){
  .chrome-nav{display:none}
  .chrome-bar{grid-template-columns:1fr auto}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-bottom:96px}
  .hero-stage{aspect-ratio:3/4;max-width:560px}
  .legal-page .chrome-nav{display:flex;gap:2px;justify-content:flex-end}
  .legal-page .chrome-nav a{padding:10px 10px}
}

@media(max-width:620px){
  :root{--gutter:18px;--bar:64px;--r-card:20px}
  h1{font-size:clamp(3.2rem,15vw,4.6rem)}
  h2{font-size:clamp(2.6rem,12.5vw,3.8rem)}
  /* The line breaks in the headings are authored for a wide column. On a phone
     two of them wrap again and leave one word alone on a line, which at 49px
     reads as a mistake. Balancing evens the fragments out; where it is not
     supported the heading falls back to the ragged wrap it has today. */
  h1,h2{text-wrap:balance}
  .brand img{height:34px;width:34px}
  .app-store-link img{height:52px}
  .app-store-link.is-compact img{height:36px}
  .hero{padding-top:44px}
  /* "Vehicle classes" takes two lines here and the other two labels take one,
     so the three figures sat on three different baselines. Stretching each
     column and pushing the figure to the bottom lines them up again. */
  .hero-facts{align-items:stretch;gap:12px}
  .hero-facts div{display:flex;flex-direction:column;justify-content:space-between;padding-right:14px}
  .hero-facts div+div{padding-left:14px}
  .hero-facts b{font-size:1.2rem}
  .hud{inset:10px}
  .hud-turn{gap:12px;margin-top:10px;padding:12px 14px}
  .hud-arrow{font-size:1.8rem}
  .hud-turn b{font-size:1.5rem}
  .hud-bottom{padding:12px 14px}
  .ticker-track{gap:24px}
  .ticker-track span{font-size:.68rem}
  .tabs{gap:8px}
  .tab{font-size:.74rem;min-height:54px;padding:0 18px 0 10px}
  .dial{padding:24px 20px 24px 32px}
  .dial:before{width:10px}
  .speed-sign.is-large{border-width:9px;height:92px;width:92px}
  .speed-sign.is-large b{font-size:2.1rem}
  .speed-block{width:92px}
  .access-row{gap:12px;grid-template-columns:40px 62px minmax(0,1fr);min-height:0;padding:18px 0}
  .access-mark{font-size:1.1rem;height:40px;width:40px}
  /* The state drops under the name rather than under the drawing, so the sign
     keeps its own column and the row still reads left to right. */
  .access-state{grid-column:3;text-align:left}
  .access-sign{height:44px;width:62px}
  .device-shell{border-radius:32px;padding:8px}
  .device-shell img{border-radius:26px}
  .answer{gap:12px 14px;grid-template-columns:40px minmax(0,1fr);padding:26px 0}
  .answer div{grid-column:1/-1}
  .answer-mark{font-size:1.3rem;height:52px;width:52px}
  .is-no{margin-inline:-14px;padding-inline:14px}
  .moment{min-height:520px}
  /* A row of text is a target here, not a button, so the height has to be
     stated. Both of these were 13px tall, which is a miss on a thumb. */
  .reveal-link{gap:18px;min-height:44px}
  .legal-contact{align-items:center;min-height:44px}
  .launch{align-items:flex-start;flex-direction:column;gap:32px}
  .site-footer{grid-template-columns:1fr}
  .site-footer nav{flex-wrap:wrap;gap:0 26px;justify-content:flex-start;padding-top:0}
  .site-footer nav a{align-items:center;display:inline-flex;min-height:44px}
  .legal-hero h1{font-size:clamp(2.9rem,13vw,3.9rem)}
  .legal-summary{padding:0}
  .legal-summary article{padding:26px 18px 30px}
  .legal-summary strong{font-size:1.14rem;margin-top:26px}
  .legal-content section{gap:0 16px;grid-template-columns:36px minmax(0,1fr);padding:38px 0 46px}
  .legal-action{align-items:flex-start;border-radius:var(--r-control);flex-direction:column;gap:10px;justify-content:center;padding:18px 20px}
  .legal-next{align-items:start;grid-template-columns:1fr}
  .legal-next>a{justify-content:space-between;width:100%}

  /* The five links a document page carries need 451px on their own, so beside
     the wordmark they ran off the right edge of a phone: the nav overlapped
     the wordmark, Contact was cut in half and the language switch was outside
     the viewport entirely. body has overflow-x:hidden, so nothing announced
     it, and a Dutch reader had no way back to English.
     The bar takes a second row here, and gives up sticking the way .legal-toc
     already does at this width. Two wrapped rows of links pinned to the top
     would eat 150px of a phone screen for the length of a long document, and
     the footer carries the same links for the way back. */
  .legal-page .chrome-bar{align-content:center;grid-template-columns:minmax(0,1fr);height:auto;justify-items:start;padding-block:10px;position:static;row-gap:4px}
  .legal-page .chrome-nav{flex-wrap:wrap;justify-content:flex-start;margin-left:-10px}
  .legal-page .chrome-nav a{align-items:center;display:inline-flex;min-height:44px}
}