/* Hallmark · macrostructure: Workbench, with a Feature Stack section · tone: technical · anchor hue: map blue (#1366c7)
 * nav: N1a (two destinations) · footer: Ft2 inline · audit + fix pass 2026-10-06
 * pre-emit critique: P5 H4 E4 S5 R4 V5 · contrast: pass (40–41) · mobile: pass (34, 49, 50–57)
 */
/* Luftrom — the page performs the app's one action: pick a spot, see the verdict.
   Palette from the app: map-blue ground, accent blue, restricted-zone magenta, eight zone colours. */
:root {
  --sky: #dfe7ee; --sky-2: #eef3f7; --sky-line: #c3d1dc;
  --paper: #ffffff; --ink: #14212b; --muted: #56697a;
  --accent: #1366c7; --accent-ink: #0e4f9c; --on-accent: #ffffff; --ring: #b0216e;
  --z-airport: #d62929; --z-restricted: #b0216e; --z-prison: #8c3b3b; --z-nature-ban: #29804f;
  --z-sensor: #6b4d94; --z-airport-info: #f2941f; --z-danger: #e3bd33; --z-nature: #7ab86b;
  /* The reticle sits on the map screenshot, which is light in both themes. */
  --reticle: rgba(20, 33, 43, .85); --reticle-halo: rgba(255, 255, 255, .9);
  --shadow-phone: 0 40px 80px -30px rgba(20, 33, 43, .55), 0 0 0 1px rgba(20, 33, 43, .08);
  --shadow-shot: 0 20px 40px -20px rgba(20, 33, 43, .5);
  --font-body: "Barlow", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Barlow Condensed", "Barlow", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --phone-r: 44px; --measure: 62ch; --stick-top: 92px;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.2, .9, .25, 1.05);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --sky: #0f1922; --sky-2: #141f2a; --sky-line: #22323f; --paper: #172431; --ink: #e7eef4; --muted: #9db0c0;
  --accent: #3e8dff; --accent-ink: #8ab9ff; --on-accent: #0f1922; --ring: #e04e9c; } }
:root[data-theme="dark"] {
  --sky: #0f1922; --sky-2: #141f2a; --sky-line: #22323f; --paper: #172431; --ink: #e7eef4; --muted: #9db0c0;
  --accent: #3e8dff; --accent-ink: #8ab9ff; --on-accent: #0f1922; --ring: #e04e9c; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* clip, never hidden: hidden on body makes it a scroll container and position: sticky stops working. */
html, body { overflow-x: clip; }
body { margin: 0; background: var(--sky); color: var(--ink); font: 1.0625rem/1.55 var(--font-body); }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.01em; margin: 0; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
h1 { font-size: clamp(3.4rem, 8vw, 6rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: .75rem; }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1rem; max-width: var(--measure); }
.lede { font-size: 1.25rem; line-height: 1.45; }
.wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
html:not([data-lang="en"]) [data-lang="en"] { display: none !important; }
html[data-lang="en"] [data-lang="nb"] { display: none !important; }

/* Header: sticky, turns to glass once the page scrolls */
.top { position: sticky; top: 0; z-index: 20; transition: background-color .3s, box-shadow .3s, backdrop-filter .3s; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; }
.top.scrolled { background: color-mix(in srgb, var(--sky) 72%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 var(--sky-line); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand span { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.top nav { display: flex; align-items: center; gap: 1.25rem; }
.top nav > a { font-weight: 500; text-decoration: none; }
.top nav > a:hover { text-decoration: underline; }
.lang { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--sky-line); border-radius: 999px; padding: 2px; background: color-mix(in srgb, var(--paper) 55%, transparent); }
.lang::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 999px; background: var(--ink); transition: transform .35s var(--ease-out); }
html[data-lang="en"] .lang::before { transform: translateX(100%); }
.lang button { position: relative; z-index: 1; font: inherit; font-weight: 600; font-size: .875rem; border: 0; background: transparent; color: var(--muted); padding: .3rem .8rem; border-radius: 999px; cursor: pointer; transition: color .25s; }
.lang button[aria-pressed="true"] { color: var(--sky); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem; min-height: calc(100svh - 70px); padding: 1rem 0 3rem; }
.hero .copy p { max-width: 32rem; }
.hero h1 { margin-bottom: 1rem; }
.h1 .w { display: inline-block; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 1.75rem; }
.pill { display: inline-flex; align-items: center; gap: .5rem; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; padding: .85rem 1.3rem; border-radius: 999px; }
.pill.soon { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.pill svg { width: 18px; height: 18px; }

.stage { position: relative; display: grid; place-items: center; padding: 1rem 0; }
.rings { position: absolute; width: 190%; height: 190%; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
.rings circle { fill: none; stroke: var(--ring); stroke-width: 1.5; transform-origin: 50% 50%; transform-box: fill-box; opacity: .22; }
.phone { position: relative; width: min(300px, 76vw); aspect-ratio: 660 / 1434; border-radius: var(--phone-r); overflow: hidden; background: var(--sky);
  box-shadow: var(--shadow-phone); }
.phone .layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone .sheet { top: auto; height: auto; }
.reticle { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; border: 2px solid var(--reticle); box-shadow: 0 0 0 1px var(--reticle-halo); pointer-events: none; }
.reticle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--reticle); }
.replay { position: absolute; right: 0; bottom: .25rem; font: inherit; font-size: .875rem; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--sky-line); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; }
.replay:hover { color: var(--ink); border-color: var(--ink); }

/* The check, played on load. Without JS everything is already in its final state. */
.js .stage.play .phone { animation: phone-in 1.2s var(--ease-out) both; }
.js .stage.play .map { animation: map-zoom 1.6s var(--ease-out) both; }
.js .stage.play .reticle { animation: reticle 1.2s var(--ease-out) .9s both; }
.js .stage.play .sheet { animation: sheet-up .8s var(--spring) 2s both; }
.js .stage.play .rings circle { animation: ripple 2.2s var(--ease-out) 1.1s both; }
.js .stage.play .rings circle:nth-child(2) { animation-delay: 1.35s; }
.js .stage.play .rings circle:nth-child(3) { animation-delay: 1.6s; }
.js .hero.play .h1 .w { animation: word-in .7s var(--ease-out) both; animation-delay: calc(.15s + var(--i) * 90ms); }
.js .hero.play .lede, .js .hero.play .sub, .js .hero.play .actions { animation: fade-up .8s var(--ease-out) both; animation-delay: .8s; }
.js .hero.play .sub { animation-delay: .95s; } .js .hero.play .actions { animation-delay: 1.1s; }
@keyframes phone-in { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes map-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes reticle { 0% { opacity: 0; transform: scale(2.2); } 60% { opacity: 1; transform: scale(1); } 80% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes sheet-up { from { transform: translateY(104%); } to { transform: translateY(0); } }
@keyframes ripple { 0% { transform: scale(.08); opacity: .55; } 100% { transform: scale(1); opacity: .16; } }
@keyframes word-in { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Contour band between hero and content; lines draw in once on view */
.contours { display: block; width: 100%; height: 120px; color: var(--sky-line); }
.contours path { fill: none; stroke: currentColor; stroke-width: 1.2; }
.js .contours path { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.js .contours.in path { animation: draw 2.4s var(--ease-out) forwards; }
.js .contours.in path:nth-child(2) { animation-delay: .15s; } .js .contours.in path:nth-child(3) { animation-delay: .3s; } .js .contours.in path:nth-child(4) { animation-delay: .45s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Sections */
section { padding: 4.5rem 0; }
section.band { background: var(--sky-2); }

/* How it works: steps drive a sticky phone; the gauge sticks beside them and climbs to 120 m.
   Each step is taller than the reading band, so the column outruns the phone and the phone has room to stick. */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 3rem 5rem; align-items: start; margin-top: 1.5rem; }
.steps { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.25rem; }
.gauge { --rail-h: min(782px, 100svh - 8rem); grid-column: 1; grid-row: 1 / span 3; align-self: start; position: sticky; top: var(--stick-top); height: var(--rail-h); width: 3rem; }
.gauge .rail { position: absolute; left: 1.45rem; top: 0; bottom: 0; width: 2px; background: var(--sky-line); }
.gauge .fill { position: absolute; left: 1.45rem; bottom: 0; width: 2px; height: var(--p, 0%); background: var(--accent); transition: height .2s linear; }
.gauge .tick { position: absolute; left: 0; width: 3rem; text-align: center; font: 600 .75rem/1 var(--font-display); color: var(--muted); letter-spacing: .04em; background: var(--sky-2); padding: .2rem 0; }
.gauge .tick.t0 { bottom: -.2rem; } .gauge .tick.t60 { top: 50%; translate: 0 -50%; } .gauge .tick.t120 { top: -.2rem; }
.gauge .marker { position: absolute; left: .55rem; width: 1.8rem; text-align: center; bottom: var(--p, 0%); translate: 0 50%; font: 700 .8rem/1 var(--font-display); color: var(--on-accent); background: var(--accent); border-radius: 4px; padding: .25rem 0; transition: bottom .2s linear; }
.step { grid-column: 2; min-height: 60svh; padding: 1.25rem 0 3.5rem; transition: color .5s; }
.step:last-child { padding-bottom: 1rem; }
/* Dim with colour, not opacity: --muted keeps the inactive steps above 4.5:1. */
.js .steps.tracking .step:not(.active) { color: var(--muted); }
.step h3 { margin-bottom: .35rem; }
.step p { margin-bottom: 0; }
.step .inline-shot { display: none; }
.sticky { position: sticky; top: var(--stick-top); }
.sticky .phone { width: min(100%, (100svh - 8rem) * 660 / 1434); margin-inline: auto; }
.sticky .phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); transform: scale(1.02); }
.sticky .phone img.on { opacity: 1; transform: none; }
.note { color: var(--muted); font-size: .95rem; margin-top: 1.5rem; max-width: 60ch; }

/* Zone legend */
.legend { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.legend li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--sky-line); align-items: start; }
.legend .sw { width: 1.4rem; height: 1.4rem; border-radius: 7px; margin-top: .15rem; }
.legend strong { display: block; font-weight: 600; }
.legend small { color: var(--muted); font-size: .95rem; }

/* Data */
.data { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 1rem; }
.data th, .data td { text-align: left; padding: .8rem .75rem .8rem 0; border-bottom: 1px solid var(--sky-line); vertical-align: top; }
.data th { font-weight: 600; color: var(--muted); font-size: .9rem; }
.data td.k { font-weight: 600; white-space: nowrap; }

/* FAQ with animated open */
.faq { margin-top: 1rem; }
details { border-bottom: 1px solid var(--sky-line); }
summary { cursor: pointer; padding: 1.05rem 0; font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--muted); transition: transform .35s var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
.faq-body { overflow: hidden; }
.faq-body p { color: var(--muted); padding-bottom: 1rem; }

/* Contact and footer */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 1rem; }
.mail { display: inline-block; font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 600; text-decoration: none; }
footer { padding: 2.5rem 0 3rem; border-top: 1px solid var(--sky-line); color: var(--muted); font-size: .95rem; }
footer p { max-width: none; margin-bottom: .5rem; }

/* Privacy document */
.doc { padding: 2.5rem 0 3rem; }
.doc header { margin-bottom: 2rem; }
.doc header p { color: var(--muted); }
.doc article { max-width: var(--measure); }
.doc h2 { font-size: 1.6rem; margin: 2rem 0 .5rem; }
.doc ul { padding-left: 1.2rem; } .doc li { margin-bottom: .35rem; }
.doc code { font-family: var(--font-mono); font-size: .9em; background: color-mix(in srgb, var(--paper) 70%, transparent); padding: .05em .35em; border-radius: 4px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 1.5rem 0 1rem; gap: 0; }
  /* The stage is below the copy on phones: clip the rings to it and play the check when it scrolls into view. */
  .stage { order: 2; margin: 1rem -1.25rem 0; padding: 2rem 1.25rem 3rem; overflow: clip; }
  .rings { width: 150%; height: 150%; }
  .replay { right: 1.25rem; bottom: .75rem; }
  .how-grid { grid-template-columns: 1fr; gap: 0; }
  .sticky, .gauge { display: none; }
  .steps { display: block; counter-reset: step; }
  .step { min-height: 0; padding: 1.5rem 0 2.25rem; border-bottom: 1px solid var(--sky-line); }
  .step:last-child { border-bottom: 0; }
  .step h3::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-right: .6rem; border-radius: 50%; background: var(--ink); color: var(--sky); font-size: 1rem; vertical-align: .1em; }
  .js .steps.tracking .step:not(.active) { color: inherit; }
  .step .inline-shot { display: block; width: min(220px, 62vw); margin-top: 1.25rem; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-shot); }  .legend, .contact-grid { grid-template-columns: 1fr; }
  h1 { font-size: clamp(3rem, 13vw, 4.5rem); }
  /* "Personvernerklæring" is one long word: step the document title down so it fits a 320 px screen whole. */
  .doc h1 { font-size: clamp(2.25rem, 11vw, 4.5rem); }
  .data thead { display: none; }
  .data tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--sky-line); }
  .data td { display: block; border: 0; padding: 0; }
  .data td.k { grid-column: 1 / -1; white-space: normal; }
  .mail { font-size: clamp(1.4rem, 6.5vw, 2.2rem); overflow-wrap: anywhere; }
}
@media (max-width: 520px) { .top nav > a { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .stage.play *, .js .hero.play * , .js .contours.in path { animation: none !important; }
  .js .contours path { stroke-dashoffset: 0; }
  .sticky .phone img, .lang::before, .step, .gauge .fill, .gauge .marker { transition: none; }
}

/* Share landing (s/): a spot shared from the app, or a notice that the link is broken, then the App Store button.
   Loaded without the web fonts, so the font tokens fall back to the system face. */
.share { max-width: 40rem; padding: 3rem 0 4.5rem; }
.share section { padding: 0; }
.share [hidden] { display: none !important; }
.share h1 { font-size: clamp(2.6rem, 9vw, 4rem); margin-bottom: 1rem; }
.share .coord { font-family: var(--font-mono); font-size: 1.125rem; }
.share .actions { margin-top: 1.25rem; }
.share .get { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--sky-line); }