/* L: the site's shared look (spec docs/superpowers/specs/2026-11-01-website-redesign-l-design.md).
   Tokens, type, the bar, the page head, the forecourt sign, the stamps, handwritten notes and the footer, for every
   page. The landing and the stats pages add their own on top. Day and night follow data-theme on <html>. */

:root, [data-theme="day"] {
  --page:#ffffff; --pale:#f4f5f1; --ink:#0f1210; --muted:#4b524d; --faint:#737b75; --line:rgba(15,18,16,.14);
  --green:#34a853; --green-tx:#1b7a3a; --deep:#1b5e20; --amber:#ea8600; --amber-tx:#a35400; --red:#d93025; --red-tx:#b3261e;
  --yellow:#ffd60a; --ev:#2a6fdb; --ev-tx:#1f57b8; --pen:#1f3f8a; --ctx:rgba(15,18,16,.1); --live:#1b7a3a;
  --paper-stamp:#ffffff; --shadow:rgba(15,18,16,.18); --dark:#0f1210;
  /* the names the pages and the stats styles were written against, now in L's colours */
  --sky:var(--page); --paper:var(--page); --ink-dim:var(--muted); --ink-faint:var(--faint);
  --brand:var(--green-tx); --brand-bright:var(--green); --annot:var(--pen); --warm:var(--yellow);
  --tier-mid:var(--amber-tx); --tier-high:var(--red-tx);
  --hill-1:#eef0ea; --hill-2:#e3e7df; --hill-3:#d5dbd2; --hill-4:#c6cec3; --road:#4b524d; --road-line:#ffffff;
  color-scheme:light;
}
[data-theme="night"] {
  --page:#0b0d0c; --pale:#141816; --ink:#f5f6f4; --muted:#a9b1ac; --faint:#7d857f; --line:rgba(245,246,244,.13);
  --green:#3ddc7a; --green-tx:#3ddc7a; --deep:#0c2a14; --amber:#ffb340; --amber-tx:#ffb340; --red:#ff6b5e; --red-tx:#ff6b5e;
  --yellow:#ffd84d; --ev:#4b8dff; --ev-tx:#7fb0ff; --pen:#a9c1ff; --ctx:rgba(245,246,244,.09); --live:#2a9d58;
  --paper-stamp:#e9ece8; --shadow:rgba(0,0,0,.6); --dark:#000000;
  --hill-1:#141816; --hill-2:#1a1f1c; --hill-3:#222824; --hill-4:#2a312c; --road:#a9b1ac; --road-line:#0b0d0c;
  color-scheme:dark;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
/* clip, not hidden: hidden makes <body> a scroll box of its own, and then nothing sticks (the bar, Privacy's
   contents, the landing's pinned phone; L shipped that way on 2026-11-01 until the motion work found it) */
html, body { overflow-x:clip; max-width:100%; }
body { background:var(--page); color:var(--ink); font:400 18px/1.55 'Schibsted Grotesk', system-ui, sans-serif; -webkit-font-smoothing:antialiased; transition:background .25s, color .25s; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
:focus-visible { outline:3px solid var(--green); outline-offset:3px; border-radius:6px; }
main:focus { outline:none; }
.mono { font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
.annot, .hand { font-family:'Caveat', cursive; font-weight:700; color:var(--pen); }
.serif { font-family:'Fraunces', serif; }
.container { max-width:1240px; margin:0 auto; padding:0 36px; }
.visually-hidden, .vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
h1, h2, h3 { font-weight:900; letter-spacing:-.045em; word-spacing:.12em; line-height:.94; text-wrap:balance; }
.dot { color:var(--green); }
.day-only { display:initial; } .night-only { display:none; }
[data-theme="night"] .day-only { display:none; }
[data-theme="night"] .night-only { display:initial; }

/* kicker: a green dot and a few words above a heading (the landing's sections) */
.kick-l { display:inline-flex; align-items:center; gap:10px; font:700 1.02rem/1.2 'Schibsted Grotesk', sans-serif; color:var(--ink); margin-bottom:18px; }
.kick-l::before { content:""; width:12px; height:12px; border-radius:50%; background:var(--green); flex:none; }
/* a page's own kicker is a handwritten note above its heading, arrow and all, as the words have always had it */
.page-kick { display:block; font:700 1.65rem/1.1 'Caveat', cursive; color:var(--pen); margin-bottom:12px; transform:rotate(-1.5deg); transform-origin:left; }

/* the bar (body > nav on the landing, nav.site elsewhere) */
nav.site, body > nav { position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--page) 88%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); transition:background .25s; }
@supports not (background: color-mix(in srgb, red 50%, blue)) { nav.site, body > nav { background:var(--page); } }
.nav-inner { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:84px; padding-top:14px; padding-bottom:14px; }
.wordmark { font-family:'Fraunces', serif; font-weight:600; font-size:1.75rem; color:var(--ink); letter-spacing:-.02em; }
.nav-right { display:flex; gap:26px; align-items:center; font-weight:700; font-size:1rem; color:var(--ink); }
.nav-right .nav-link:hover { color:var(--green-tx); }
.nav-right a[aria-current="page"] { color:var(--ink); text-decoration:underline; text-decoration-color:var(--green); text-decoration-thickness:3px; text-underline-offset:8px; }
.pill { display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--page); font-weight:800; padding:11px 20px 11px 16px; border-radius:999px; font-size:.95rem; white-space:nowrap; }
.pill::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--green); flex:none; }
.pill:active { transform:translateY(1px); }
.theme-toggle { width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; background:var(--pale); color:var(--ink); display:grid; place-items:center; }
.theme-toggle:hover { color:var(--green-tx); }
.theme-toggle svg { width:20px; height:20px; }
.skip-link { position:absolute; top:-100%; left:16px; z-index:200; background:var(--ink); color:var(--page); padding:10px 20px; border-radius:999px; font-weight:800; font-size:.9rem; }
.skip-link:focus { top:12px; }
@media (max-width:900px) {
  .nav-right .nav-link { display:none; }
  .nav-inner { min-height:70px; gap:12px; }
  .wordmark { font-size:1.55rem; }
  .pill { padding:9px 14px 9px 12px; font-size:.9rem; }
}

/* the page head, in place of the old hills strip: kicker, a 900 heading ending on its dot, an intro */
.l-head { padding:72px 0 56px; }
.l-head h1 { font-size:clamp(2.7rem, 6.4vw, 5.6rem); }
/* a heading with no stop of its own ("Privacy") still ends on L's green full stop */
.l-head h1.dotted::after, h1.dotted::after { content:""; display:inline-block; width:.17em; height:.17em; margin-left:.05em; border-radius:50%; background:var(--green); }
.l-head .intro, .l-head .strip-intro { max-width:680px; margin-top:22px; color:var(--muted); font-size:1.22rem; line-height:1.5; }
.l-head.pale { background:var(--pale); }
@media (max-width:760px) { .l-head { padding:44px 0 40px; } .l-head .intro, .l-head .strip-intro { font-size:1.1rem; } }

/* content pages */
main.prose { background:var(--page); padding:0 0 110px; transition:background .25s; }
main.prose h1 { font-size:clamp(2.7rem, 6.4vw, 5.6rem); margin-bottom:12px; }
main.prose h2 { font-size:clamp(1.7rem, 3.2vw, 2.5rem); margin:56px 0 14px; }
main.prose h3 { font-size:1.3rem; letter-spacing:-.025em; margin:30px 0 8px; }
main.prose p, main.prose li { color:var(--muted); max-width:680px; }
main.prose p { margin-bottom:14px; }
main.prose ul, main.prose ol { padding-left:22px; margin-bottom:14px; }
main.prose strong { color:var(--ink); font-weight:700; }
main.prose a { color:var(--green-tx); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
main.prose a.btn-contact, main.prose a.contact-email { color:var(--page); text-decoration:none; }

/* the forecourt's price sign (from C): a dark face under a green canopy with a yellow stripe, LED figures */
.l-sign { position:relative; width:214px; filter:drop-shadow(0 18px 22px var(--shadow)); }
.l-sign .face { background:#0f1411; border-radius:12px 12px 6px 6px; overflow:hidden; color:#cfd8d2; }
.l-sign .canopy { height:20px; background:#1b5e20; border-bottom:6px solid #ffd60a; }
.l-sign .body { padding:12px 14px 14px; }
.l-sign .led, .l-sign b { font-family:'Geist Mono', monospace; font-weight:600; color:#4dff96; font-variant-numeric:tabular-nums; }
[data-theme="night"] .l-sign .led, [data-theme="night"] .l-sign b { text-shadow:0 0 12px rgba(77,255,150,.6); }
[data-theme="night"] .l-sign .face { box-shadow:0 0 30px rgba(77,255,150,.12); }
.l-sign .posts { display:flex; justify-content:center; gap:78px; }
.l-sign .posts i { width:12px; height:46px; background:linear-gradient(90deg, #6b736d, #9aa39c 40%, #5c635e); }

/* stamps (from H): perforated paper round a coloured face, a country's shape in white */
.l-stamp { --r:5px; display:block; padding:10px; background:var(--paper-stamp); filter:drop-shadow(0 8px 10px var(--shadow));
  -webkit-mask:radial-gradient(circle var(--r) at var(--r) var(--r), #0000 96%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2 * var(--r) + 4px) calc(2 * var(--r) + 4px) round, linear-gradient(#000 0 0) content-box;
  -webkit-mask-composite:source-over;
  mask:radial-gradient(circle var(--r) at var(--r) var(--r), #0000 96%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2 * var(--r) + 4px) calc(2 * var(--r) + 4px) round, linear-gradient(#000 0 0) content-box;
  mask-composite:add; }
.l-stamp .face { display:flex; flex-direction:column; justify-content:space-between; height:10.4em; padding:.55em .6em; color:#fff; background:var(--face, #1b5e20); }
.l-stamp .v { font-weight:900; font-size:1.5em; line-height:1; letter-spacing:-.03em; }
.l-stamp .art { width:6em; height:4.6em; margin:0 auto; background:#fff; opacity:.94; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.l-stamp .nm { font-weight:700; font-size:.7em; line-height:1.1; text-transform:uppercase; letter-spacing:.12em; text-align:center; }
/* each country's stamp: its face colour and its shape, cut from the landing map (scripts/build-drive-shapes.mjs);
   the sizes put the country's box in a 6em by 4.6em window. data-cc on a stamp, data-stop on the map's list. */
[data-cc="gb"], [data-stop="gb"] { --face:#1b5e20; --shape:url(/drive/shapes/gb.svg); --shape-size:10.597em 9.534em; --shape-pos:0.151em 0.180em; }
[data-cc="fr"], [data-stop="fr"] { --face:#1f57b8; --shape:url(/drive/shapes/fr.svg); --shape-size:11.453em 10.305em; --shape-pos:-1.602em -3.658em; }
[data-cc="it"], [data-stop="it"] { --face:#b3261e; --shape:url(/drive/shapes/it.svg); --shape-size:10.776em 9.695em; --shape-pos:-3.920em -4.949em; }
[data-cc="es"], [data-stop="es"] { --face:#a35400; --shape:url(/drive/shapes/es.svg); --shape-size:14.490em 13.037em; --shape-pos:-1.143em -8.459em; }
[data-cc="pt"], [data-stop="pt"] { --face:#1b5e20; --shape:url(/drive/shapes/pt.svg); --shape-size:21.860em 19.667em; --shape-pos:-0.459em -14.168em; }
[data-cc="hr"], [data-stop="hr"] { --face:#1f57b8; --shape:url(/drive/shapes/hr.svg); --shape-size:27.131em 24.409em; --shape-pos:-16.948em -13.454em; }
[data-cc="lt"], [data-stop="lt"] { --face:#a35400; --shape:url(/drive/shapes/lt.svg); --shape-size:36.689em 33.009em; --shape-pos:-30.426em -5.231em; }
[data-cc="all"], [data-stop="all"] { --face:#0f1210; --shape:url(/drive/shapes/live.svg); --shape-size:contain; --shape-pos:center; }
.l-stamp .art { -webkit-mask-image:var(--shape); mask-image:var(--shape); -webkit-mask-size:var(--shape-size); mask-size:var(--shape-size); -webkit-mask-position:var(--shape-pos); mask-position:var(--shape-pos); }

/* a handwritten note with a pen arrow; the arrow never lands on a phone's screen */
.l-note { position:relative; font-family:'Caveat', cursive; font-weight:700; color:var(--pen); line-height:1.05; }

/* the footer: ink, whatever the theme */
footer.site, body > footer { background:var(--dark); color:#b9c0bb; padding:44px 0 52px; font-size:.92rem; transition:background .25s; }
.hill-foot { display:none; }
.foot-row { display:flex; justify-content:space-between; gap:18px 26px; flex-wrap:wrap; align-items:center; }
footer .wordmark { color:#f5f6f4; font-size:1.45rem; }
footer .annot { color:#b9c0bb; font-family:'Schibsted Grotesk', sans-serif; font-weight:500; font-size:.95rem !important; }
.foot-links { display:flex; flex-wrap:wrap; gap:8px 22px; color:#f5f6f4; font-weight:700; font-size:.95rem; align-items:center; }
.foot-links a:hover { color:#3ddc7a; }
.foot-div { width:1px; height:18px; background:#5d655f; display:inline-block; }
.x-link svg { width:16px; height:16px; display:block; }
.legal { font-size:.78rem; color:#9aa29c; margin-top:18px; max-width:620px; line-height:1.6; }
.legal.maker { margin-top:4px; }
.maker a { color:#f5f6f4; text-decoration:underline; text-decoration-color:#5d655f; text-decoration-thickness:1px; text-underline-offset:3px; }
.maker a:hover { color:#3ddc7a; }
@media (max-width:640px) {
  .foot-links { gap:0 22px; }
  .foot-links a { display:inline-flex; align-items:center; min-height:44px; }
  .x-link { min-width:44px; justify-content:center; }
  .x-link svg { width:19px; height:19px; }
}


/* Motion (motion.js, spec docs/superpowers/specs/2026-11-01-website-motion-design.md). Only what motion.js has
   marked (.rv, below the first screen, .motion on <html>) starts hidden, and .in shows it. Movement uses
   opacity, clip-path and the separate translate and scale properties, so an element's own rotation stays and
   nothing shifts the layout. Apple's devices (.fade) only fade. */
.motion .rv { --d:calc(var(--i, 0) * 90ms); transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d), translate .8s cubic-bezier(.2,.7,.2,1) var(--d); }
.motion .rv.write { transition:none; }
.motion .rv.rise:not(.in) { opacity:0; translate:0 16px; }
/* live figures count up (motion.js) with digits of one width, so the words beside them stay put */
[data-live] { font-variant-numeric:tabular-nums; }
.motion .rv.fade { transition:opacity 1s ease var(--d); }
.motion .rv.fade:not(.in) { opacity:0; }
/* hidden by opacity, not by the clip: a browser counts a fully clipped element as off screen and never reveals it */
.motion .rv.write:not(.in) { opacity:0; }
.motion .rv.write.in { animation:write 1s cubic-bezier(.45,.05,.3,1) var(--d) backwards; }
@keyframes write { from { clip-path:inset(-.4em 100% -.4em -.4em); } to { clip-path:inset(-.4em -.4em -.4em -.4em); } }
/* a heading's green full stop lands last: a shadow of it drops into place, then the stop itself stands there, so
   only paint changes (moving the stop would shift the layout) */
.motion h2.rv.in .dot { animation:land .6s cubic-bezier(.3,1.6,.5,1) calc(var(--d) + .45s) backwards; }
@keyframes land {
  from { color:transparent; text-shadow:0 -.7em 0 transparent; }
  70% { color:transparent; text-shadow:0 .06em 0 var(--dot-c, var(--green)); }
  to { color:transparent; text-shadow:0 0 0 var(--dot-c, var(--green)); }
}
/* our circles behind the phones grow in; the phone itself only fades */
.motion .rv.grow::before { transition:scale 1s cubic-bezier(.2,.8,.2,1) var(--d), opacity .8s ease var(--d); }
.motion .rv.grow:not(.in)::before { scale:.82; opacity:0; }
/* the stamps settle one by one, as if stuck on by hand */
.motion .rv.stamps:not(.in) .dv-stop { opacity:0; }
.motion .rv.stamps.in .dv-stop { animation:settle .55s cubic-bezier(.3,1.4,.5,1) calc(var(--k, 0) * 70ms) backwards; }
@keyframes settle { from { opacity:0; translate:0 -22px; rotate:7deg; } }
/* a chart's line draws itself left to right */
.motion .rv.draw:not(.in) svg { clip-path:inset(0 100% 0 0); }
.motion .rv.draw.in svg { clip-path:inset(0 0 0 0); transition:clip-path 1.6s cubic-bezier(.45,.05,.3,1) .2s; }

@media (max-width:420px) { .container { padding:0 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } html { scroll-behavior:auto; } }