/* ─── Site header · tone system driven by data-tone / data-plate ───────────── */
:root{--container-max:1200px;--gutter:clamp(20px,5vw,72px);--header-h:72px;--ink:#161513;--paper:#FAF8F2;--near-black:#0B0D12;--near-white:#F5F2EA}
@media (max-width:899px){:root{--header-h:60px}}
.skip{position:fixed;left:var(--gutter);top:-100px;z-index:200;padding:10px 14px;border-radius:8px;background:var(--ink);color:var(--paper);font:600 14px/1 'Schibsted Grotesk',system-ui,sans-serif;text-decoration:none;transition:top .15s ease}
.skip:focus-visible{top:12px;outline:2px solid var(--paper);outline-offset:2px}
.sh{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:100;font-family:'Schibsted Grotesk',system-ui,sans-serif;--sh-brand:#fff;--sh-fg:var(--ink);--sh-btn-bg:var(--ink);--sh-btn-fg:var(--paper)}
.sh[data-tone="light"]{--sh-brand:var(--ink)}
.sh[data-tone="dark"]{--sh-brand:var(--near-white);--sh-fg:var(--near-white);--sh-btn-bg:var(--paper);--sh-btn-fg:var(--ink)}
.sh[data-open]{--sh-brand:var(--ink);--sh-fg:var(--ink)}
.sh::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:rgba(250,248,242,.85);border-bottom:1px solid rgba(22,21,19,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .2s ease,background-color .2s ease,border-color .2s ease}
.sh[data-plate="paper"]::before{opacity:1}
.sh[data-plate="ink"]::before{opacity:1;background:rgba(11,13,18,.7);border-bottom-color:rgba(255,255,255,.1)}
.sh__in{position:relative;z-index:2;width:min(100% - 2*var(--gutter),var(--container-max));margin-inline:auto;height:100%;display:flex;align-items:center;justify-content:space-between}
.sh__brand{display:flex;align-items:center;gap:10px;font:700 16px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.01em;color:var(--sh-brand);text-decoration:none;transition:color .2s ease}
.sh__brand:hover{color:var(--sh-brand)}
.sh__right{display:flex;align-items:center;color:var(--sh-fg);transition:color .2s ease}
.sh__nav{display:flex;align-items:center;gap:32px}
.sh__link{position:relative;font:500 15px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.01em;text-decoration:none;color:color-mix(in oklab,var(--sh-fg) 65%,transparent);transition:color .15s ease}
.sh__link:hover,.sh__link[aria-current]{color:var(--sh-fg)}
.sh__link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .2s ease}
.sh__link:hover::after{transform:scaleX(1);transform-origin:left}
.sh__signin{margin-left:28px}
.sh__btn{margin-left:20px;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--sh-btn-bg);color:var(--sh-btn-fg);font:600 14px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.01em;text-decoration:none;transition:background-color .2s ease,color .2s ease,transform .1s ease}
.sh__btn:hover{background:color-mix(in oklab,var(--sh-btn-bg) 92%,var(--sh-btn-fg));color:var(--sh-btn-fg)}
.sh__btn:active{transform:scale(.98)}
.sh :focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.sh__btn:focus-visible{border-radius:999px}
.sh__menu{display:none;position:relative;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--sh-fg);cursor:pointer}
.sh__menu span{position:absolute;left:12px;top:50%;width:20px;height:2px;margin-top:-1px;border-radius:1px;background:currentColor;transition:transform .2s ease}
.sh__menu span:first-child{transform:translateY(-4px)}
.sh__menu span:last-child{transform:translateY(4px)}
.sh__menu[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.sh__menu[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
.sh__sheet{position:fixed;inset:0;z-index:1;display:none;flex-direction:column;justify-content:center;gap:28px;padding:calc(var(--header-h) + 24px) var(--gutter) 48px;background:var(--paper);color:var(--ink)}
.sh[data-open] .sh__sheet{display:flex}
.sh__sheet a{opacity:0;animation:shFade .3s ease both;animation-delay:calc(var(--i) * 30ms)}
.sh__sheet .sh__link{font-size:28px;letter-spacing:-.02em;align-self:flex-start;color:var(--ink)}
.sh__sheet .sh__link::after{bottom:-8px}
.sh__sheet .sh__signin{margin:0}
.sh__sheet .sh__btn{margin:12px 0 0;align-self:flex-start;height:48px;padding:0 24px;font-size:16px}
@keyframes shFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Collapse: 1100px, raised from 900px — between 900 and 1100 the right cluster lands in the
   hero's aurora→cream transition zone where ink@65% drops below 4.5:1. */
@media (max-width:1100px){.sh__nav,.sh__right>.sh__signin,.sh__right>.sh__btn{display:none}.sh__menu{display:block}}
@media (prefers-reduced-motion:reduce){.sh__link::after,.sh__menu span,.sh__btn{transition:none}.sh__sheet a{animation:shFadeO .2s ease both}@keyframes shFadeO{from{opacity:0}to{opacity:1}}}

/* ─── A page that covers the whole screen (06.10.2026) ───
   Only under html.fx-cover, which site-header.js sets together with viewport-fit=cover (?fx=cover: a trial, not the
   default yet). A covering page lies under an iPhone's notch or Dynamic Island in landscape, so:
   - --gutter is never narrower than the screen's safe area at the sides. Everything that hangs on it keeps clear: the
     header row, the hero's copy and film, every content column, the footers, the phone menu's sides, the legal column.
   - what sits at the very top (the header row, the phone's Features sheet, the focused skip link) starts below a top
     inset. Insurance: Safari gives a tab none (0 in iOS 18.4's Simulator, upright and on its side); a site opened from
     the Home Screen, or a later Safari, may.
   Not written into the plain rules above, because the insets are not 0 without viewport-fit=cover: on its side, iOS
   18.4 Safari reports 47 px at each side of an iPhone 12 although it already keeps the page out from under the notch,
   and every column would be inset twice. When viewport-fit=cover becomes the default (the viewport tag in both pages'
   <head> and in scripts/build-legal-pages.js), take "html.fx-cover" off these rules and off the ones in consent.css
   and get-started.css. The selectors are heavier than site-header.css's .mh and .mh-fp, which load after this sheet. */
html.fx-cover{--gutter:max(clamp(20px,5vw,72px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
html.fx-cover .mh{top:env(safe-area-inset-top,0px)}
html.fx-cover .skip:focus-visible{top:calc(12px + env(safe-area-inset-top,0px))}
@media (max-width:799px){html.fx-cover .mh-fp{padding-top:env(safe-area-inset-top,0px)}}

/* ─── Safari's bars on an iPhone stay clear glass (06.10.2026) ───
   iOS 26 Safari shows the page through its two bars, unless it finds a position:fixed or position:sticky box under the
   middle of the screen's top or bottom edge (one hit test per edge, 4 px in). Then it lays a solid colour over that bar
   (the box's background-color, or the page's cream) and keeps it after the box has gone. The landing page pins
   screen-sized scenes on purpose (the hero's stage, the first night window, the windows' fixed skies), so two empty
   boxes on <html> sit exactly on those two points. Safari's test takes only the topmost box at the point, and a hit on
   a pseudo-element counts as its element, <html>, which is neither fixed nor sticky: nothing to extend, both bars stay
   glass. Read from WebKit's source (LocalFrameView::fixedContainerEdges, the same in Safari 26.0 to 27.0), not
   documented by Apple and not seen on a phone when written: if a later Safari tests differently, the bars behave as
   they did without these boxes.
   - They paint nothing and take no taps (pointer-events:none: Safari's test ignores that property, a finger doesn't).
   - z-index 99: under the header (100), so the phone's full-screen menu still darkens the bars, as it should; over the
     cookie card (90). Nothing else pinned may get a z-index of 99 or more.
   - iOS only: -webkit-touch-callout exists in no other browser, so a computer gets nothing.
   - ?fx=bars (site-header.js) takes them away, to compare the bars with and without on one build. */
@supports (-webkit-touch-callout:none){
html:not(.fx-bars)::before,html:not(.fx-bars)::after{content:"";position:fixed;left:calc(50% - 8px);width:16px;height:10px;z-index:99;pointer-events:none}
html:not(.fx-bars)::before{top:0}
html:not(.fx-bars)::after{bottom:0}
}