:root {
    --ink: #080808;
    --ink-soft: #111113;
    --paper: #f6f2ea;
    --white: #ffffff;
    --muted: rgba(255, 255, 255, 0.64);
    --line: rgba(255, 255, 255, 0.13);
    --orange: #ff5125;
    --orange-hot: #ff6b35;
    --max: 1320px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background: var(--ink);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    overflow-x: clip;
    background: var(--ink);
    color: var(--white);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(calc(100% - 48px), var(--max));
    margin: 0 auto;
    padding: 22px 0;
    pointer-events: none;
}

.site-header a {
    pointer-events: auto;
}

.brand img {
    display: block;
    width: 70px;
    height: auto;
    transition: filter 240ms ease, opacity 240ms ease;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.prototype-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--orange);
    padding: 0 24px;
    color: var(--white);
    font-size: 15px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 12px 40px rgba(255, 81, 37, 0.22);
    transition: transform 180ms ease, background 180ms ease;
}

.button:hover {
    background: var(--orange-hot);
    transform: translateY(-2px);
}

.button-small {
    min-height: 42px;
    padding: 0 18px;
    font-size: 13px;
}

.app-store-badge {
    position: relative;
    display: block;
    width: 190px;
    aspect-ratio: 2945 / 986;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 11px;
    transition: transform 180ms ease, filter 180ms ease;
}

.app-store-badge:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.app-store-badge img {
    position: absolute;
    display: block;
    width: 130.4%;
    max-width: none;
    height: auto;
    transform: translate(-11.54%, -27.18%);
}

.app-store-badge-small {
    width: 132px;
    border-radius: 8px;
}

.map-journey {
    position: relative;
    z-index: 1;
    background: #080808;
    isolation: isolate;
}

.journey-visual {
    position: sticky;
    z-index: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin-bottom: -100vh;
    margin-bottom: -100dvh;
    background: #080808;
    overflow: hidden;
    isolation: isolate;
    will-change: border-radius;
}

.journey-map {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: saturate(0.9) contrast(1.06);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 700ms ease;
}

.journey-map.is-loaded {
    opacity: 1;
}

.journey-map::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.055) 0,
            rgba(255, 255, 255, 0.055) 1px,
            transparent 1px,
            transparent 4px
        ),
        rgba(0, 0, 0, 0.34);
    pointer-events: none;
}

.journey-map .mapboxgl-canvas {
    outline: 0;
}

.journey-map .mapboxgl-ctrl-bottom-left,
.journey-map .mapboxgl-ctrl-bottom-right {
    z-index: 3;
    top: auto;
    bottom: 18px;
}

.journey-map .mapboxgl-ctrl-bottom-left {
    right: auto;
    left: 18px;
}

.journey-map .mapboxgl-ctrl-bottom-right {
    right: 18px;
}

.journey-map .mapboxgl-ctrl-attrib {
    background: rgba(8, 8, 8, 0.54);
    color: rgba(255, 255, 255, 0.66);
}

.journey-map .mapboxgl-ctrl-attrib a {
    color: rgba(255, 255, 255, 0.76);
}

.journey-map .mapboxgl-ctrl {
    pointer-events: auto;
}

.hero {
    position: relative;
    z-index: 3;
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    overflow: hidden;
    padding: 116px max(24px, calc((100vw - var(--max)) / 2)) 94px;
    background: transparent;
    isolation: isolate;
}

.hero-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    text-align: center;
    text-shadow: 0 4px 34px rgba(0, 0, 0, 0.7);
}

.kicker {
    margin-bottom: 20px;
    color: var(--orange);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

h1,
h2 {
    font-weight: 950;
    letter-spacing: -0.065em;
    line-height: 0.91;
}

h1 {
    font-size: clamp(52px, 6.8vw, 104px);
}

h1 span {
    display: block;
}

.accent {
    color: var(--orange);
}

.hero-lead {
    max-width: 520px;
    margin: 30px auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.42;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.98), 0 1px 5px #000;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: center;
    margin-top: 28px;
}

.text-link {
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.text-link span {
    display: inline-block;
    margin-left: 6px;
    color: var(--orange);
}

.phone-shell {
    position: relative;
    width: clamp(260px, 25vw, 370px);
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: clamp(45px, 4vw, 60px);
    background: linear-gradient(145deg, #2d2d31, #070708 38%, #1b1b1f);
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.65), -30px 18px 80px rgba(255, 81, 37, 0.15);
}

.phone-shell::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: inherit;
    pointer-events: none;
}

.phone-shell img {
    display: block;
    width: 100%;
    aspect-ratio: 1242 / 2688;
    border-radius: clamp(35px, 3.4vw, 49px);
    object-fit: cover;
}

.phone-island {
    position: absolute;
    z-index: 4;
    width: 31%;
    height: 3.1%;
    left: 50%;
    top: 2.2%;
    border-radius: 999px;
    background: #030303;
    transform: translateX(-50%);
}

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 27px;
    animation: scrollCuePulse 2.4s ease-in-out infinite;
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.scroll-cue span {
    width: 34px;
    height: 1px;
    background: var(--orange);
}

/* Teksten ånder: den lyser op og synker en anelse, så øjet fanger den og
   forstår, at vejen går nedad. translateX(-50%) skal med i hvert trin -
   det er den, der holder hintet centreret. */
@keyframes scrollCuePulse {
    0%,
    100% {
        color: rgba(255, 255, 255, 0.34);
        transform: translate(-50%, 0);
    }

    50% {
        color: rgba(255, 255, 255, 0.98);
        transform: translate(-50%, 5px);
    }
}

.route-story {
    position: relative;
    z-index: 1;
    min-height: 580svh;
    margin-top: 0;
    background: transparent;
    color: var(--white);
}

.story-stage {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.phone-ambient-light {
    --ambient-scale: 0.7;
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: 216%;
    height: 168%;
    border-radius: 50%;
    -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%20216%20168'%20preserveAspectRatio='none'><defs><mask%20id='h'><rect%20width='216'%20height='168'%20fill='#fff'/><rect%20x='85.5'%20y='34'%20width='45'%20height='64.3'%20rx='4.73'%20ry='3.09'%20fill='#000'/></mask></defs><rect%20width='216'%20height='168'%20fill='#fff'%20mask='url%28%23h%29'/></svg>");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,<svg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%20216%20168'%20preserveAspectRatio='none'><defs><mask%20id='h'><rect%20width='216'%20height='168'%20fill='#fff'/><rect%20x='85.5'%20y='34'%20width='45'%20height='64.3'%20rx='4.73'%20ry='3.09'%20fill='#000'/></mask></defs><rect%20width='216'%20height='168'%20fill='#fff'%20mask='url%28%23h%29'/></svg>");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mix-blend-mode: screen;
    opacity: 0;
    transform: translate(-50%, -50%);
    transform-origin: 50% 55%;
    pointer-events: none;
}

.phone-ambient-light::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 42% 48% at 50% 42%, rgba(255, 188, 112, 0.32) 0%, rgba(255, 119, 45, 0.12) 46%, transparent 76%),
        radial-gradient(ellipse 46% 42% at 40% 72%, rgba(255, 139, 51, 0.16) 0%, rgba(255, 93, 27, 0.06) 45%, transparent 72%);
    filter: blur(20px) saturate(1.14);
    transform: scale(var(--ambient-scale));
    transform-origin: 50% 55%;
}

.phone-ambient-light::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 47%;
    width: 42%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 153, 68, 0.22), rgba(255, 84, 25, 0.05) 46%, transparent 72%);
    filter: blur(26px);
    transform: translate(-50%, -50%) scale(var(--ambient-scale));
    transform-origin: 50% 50%;
}

.story-phone {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: auto;
    bottom: -18svh;
    width: min(clamp(480px, 42vw, 680px), 79svh);
    aspect-ratio: 2 / 3;
    transform: translateX(-49.75%);
    transform-origin: 49.75% 33.15%;
}

.phone-perspective {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
    transform-origin: 49.75% 33.15%;
}

.hand-device {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 50px 60px rgba(33, 26, 19, 0.24));
    transform-origin: 49.75% 33.15%;
}

.hand-phone-screen {
    position: absolute;
    z-index: 1;
    left: 27.5%;
    top: 0;
    width: 45%;
    height: 64.3%;
    overflow: hidden;
    border-radius: 10.5% / 4.8%;
    clip-path: inset(0.5px round 10.5% / 4.8%);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    isolation: isolate;
    contain: paint;
    transform: translateZ(0);
    pointer-events: none;
}

.route-ready-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    transform: scale(0.985);
    transform-origin: 50% 50%;
    pointer-events: none;
    user-select: none;
}

.run-scroll-video {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #050505;
    border-radius: inherit;
    object-fit: fill;
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(5%) scale(1.025) translateZ(0);
    transform-origin: 50% 100%;
    will-change: clip-path, opacity, transform;
    pointer-events: none;
}

.hand-device-art {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.story-counter {
    position: absolute;
    z-index: 5;
    right: max(24px, calc((100vw - var(--max)) / 2));
    bottom: 31px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.story-counter [data-current-step] {
    color: var(--orange);
}

.story-counter i {
    width: 42px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.story-steps {
    position: relative;
    z-index: 2;
    margin-top: -100svh;
    pointer-events: none;
}

.story-route-intro {
    height: 60svh;
}

.story-step {
    display: flex;
    min-height: 120svh;
    align-items: center;
    width: min(calc(100% - 48px), var(--max));
    margin: 0 auto;
}

.story-step[data-story-step="1"] {
    min-height: 70svh;
}

.story-step[data-story-step="3"] {
    min-height: 210svh;
}

.story-step-right {
    justify-content: flex-end;
}

.story-copy-card {
    width: min(34vw, 450px);
    padding: 4px 0 6px 26px;
    border-left: 2px solid var(--orange);
    color: var(--white);
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.58);
}

.scene-number {
    margin-bottom: 18px;
    color: var(--orange);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.story-copy-card h2 {
    font-size: clamp(43px, 4.6vw, 72px);
}

.story-copy-card > p:last-child {
    max-width: 38ch;
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 16px;
    line-height: 1.55;
}

.runnart-story {
    position: relative;
    z-index: 4;
    height: 280svh;
    margin-top: -100svh;
    background: transparent;
}

.runnart-stage {
    position: sticky;
    top: 0;
    display: grid;
    height: 100svh;
    grid-template-columns: minmax(310px, 0.72fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: clamp(40px, 7vw, 120px);
    overflow: hidden;
    border-radius: 0;
    background:
        radial-gradient(circle at 72% 34%, rgba(255, 81, 37, 0.16), transparent 34%),
        var(--ink);
    padding: 110px max(24px, calc((100vw - var(--max)) / 2)) 70px;
    box-shadow: 0 -34px 80px rgba(0, 0, 0, 0.24);
    will-change: transform;
}

.runnart-copy {
    position: relative;
    z-index: 3;
}

.runnart-copy h2,
.watch-copy h2,
.finale-copy h2 {
    font-size: clamp(54px, 6.7vw, 104px);
}

.runnart-copy > p:not(.kicker),
.watch-copy > p:not(.kicker),
.finale-copy > p:not(.kicker) {
    max-width: 440px;
    margin: 28px 0;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.5;
}

.runnart-canvas {
    position: relative;
    z-index: 2;
    width: min(55vw, 720px);
    aspect-ratio: 1;
    justify-self: center;
}

.runnart-canvas::before,
.runnart-canvas::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
}

.runnart-canvas::before {
    inset: 5%;
    border: 1px solid rgba(255, 255, 255, 0.11);
}

.runnart-canvas::after {
    inset: 19%;
    border: 1px dashed rgba(255, 81, 37, 0.25);
}

.runnart-canvas svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 26px rgba(255, 81, 37, 0.3));
}

.runnart-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
}

.art-caption {
    position: absolute;
    z-index: 4;
    display: flex;
    min-width: 130px;
    justify-content: space-between;
    gap: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    padding: 16px 18px;
    font-size: 12px;
    backdrop-filter: blur(16px);
}

.art-caption span {
    color: rgba(255, 255, 255, 0.47);
}

.art-caption-one { right: 8%; top: 21%; transform: rotate(5deg); }
.art-caption-two { right: 38%; bottom: 12%; transform: rotate(-4deg); }

.feed-story {
    height: 600svh;
}

.feed-stage {
    grid-template-columns: minmax(450px, 0.96fr) minmax(320px, 0.62fr);
    gap: clamp(46px, 7vw, 120px);
    background: #080808;
    isolation: isolate;
}

.route-maker-map {
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: 0;
    filter: saturate(0.72) brightness(0.64) contrast(1.08);
    transition: opacity 700ms ease;
}

.route-maker-map.is-loaded {
    opacity: 0.72;
}

.route-maker-map .mapboxgl-canvas {
    filter: contrast(1.05);
}

.route-maker-map .mapboxgl-ctrl-bottom-left,
.route-maker-map .mapboxgl-ctrl-bottom-right {
    z-index: 7;
    opacity: 0.56;
}

.route-maker-map .mapboxgl-ctrl-attrib {
    background: rgba(8, 8, 8, 0.64) !important;
    color: rgba(255, 255, 255, 0.62);
}

.route-maker-map .mapboxgl-ctrl-attrib a {
    color: rgba(255, 255, 255, 0.72);
}

.feed-stage::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 7, 7, 0.99) 0%, rgba(7, 7, 7, 0.94) 31%, rgba(7, 7, 7, 0.72) 51%, rgba(7, 7, 7, 0.18) 76%, rgba(7, 7, 7, 0.42) 100%),
        radial-gradient(circle at 78% 48%, rgba(255, 81, 37, 0.18), transparent 31%);
    pointer-events: none;
}

.feed-stage::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.035) 0,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px,
        transparent 6px
    );
    pointer-events: none;
}

.feed-wordmark {
    position: absolute;
    z-index: 2;
    left: -0.04em;
    bottom: 0.02em;
    color: transparent;
    font-size: clamp(110px, 16vw, 300px);
    font-weight: 950;
    letter-spacing: -0.08em;
    line-height: 0.72;
    white-space: nowrap;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.045);
    transform: rotate(-3deg);
}

.feed-copy-stack {
    position: relative;
    z-index: 4;
    width: min(100%, 660px);
    align-self: center;
}

.feed-section-heading {
    margin: 0 auto clamp(24px, 3.4vh, 42px);
    text-align: center;
}

.feed-section-heading h2 {
    max-width: 620px;
    margin: 12px auto 0;
    color: var(--white);
    font-size: clamp(38px, 4.35vw, 68px);
    line-height: 0.92;
}

.route-methods {
    display: flex;
    max-width: 480px;
    flex-direction: column;
    gap: 8px;
    margin: 0 auto;
}

.feed-chapter {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
    transition: color 220ms ease;
}

.route-method-question {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(11, 11, 11, 0.72);
    padding: 7px 11px;
    backdrop-filter: blur(14px);
    transition: border-color 220ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.route-method-question span {
    display: grid;
    width: 28px;
    flex: 0 0 28px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--orange);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.06em;
}

.route-method-question h3 {
    font-size: clamp(13px, 1vw, 16px);
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.feed-chapter > p:last-child {
    max-height: 0;
    max-width: 55ch;
    overflow: hidden;
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 260ms ease, margin 260ms ease, opacity 200ms ease, transform 260ms ease;
}

.feed-chapter.is-active {
    color: var(--white);
}

.feed-chapter.is-active .route-method-question {
    border-color: rgba(255, 81, 37, 0.86);
    background: rgba(255, 81, 37, 0.93);
    box-shadow: 0 18px 48px rgba(255, 81, 37, 0.18);
}

.feed-chapter.is-active .route-method-question span {
    background: var(--white);
    color: var(--orange);
}

.feed-chapter.is-active > p:last-child {
    max-height: 160px;
    margin-top: 10px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.88);
    opacity: 1;
    transform: translateY(0);
}

.feed-video-wrap {
    position: relative;
    z-index: 3;
    height: min(84svh, 920px);
    aspect-ratio: 9 / 19.5;
    justify-self: center;
    overflow: visible;
    translate: 0 -11svh;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}

.feed-video-glow {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 55%;
    width: 82%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 81, 37, 0.18);
    filter: blur(86px);
    transform: translate(-50%, -50%);
}

.feed-device {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    border: clamp(6px, 0.55vw, 9px) solid #09090a;
    border-radius: clamp(38px, 3.8vw, 58px);
    background: #09090a;
    box-shadow:
        0 42px 80px rgba(0, 0, 0, 0.52),
        0 0 0 2px rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    transform: translateZ(0);
}

.feed-phone-screen {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    background: #0a0a0c;
    transform: translateZ(0);
    isolation: isolate;
}

.feed-scroll-video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0a0a0c;
    object-fit: cover;
    transform: translateZ(0);
}

.feed-device-island {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 1.45%;
    width: 31%;
    height: 3.7%;
    border-radius: 999px;
    background: #050506;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    transform: translateX(-50%);
    pointer-events: none;
}

.feed-counter {
    position: absolute;
    z-index: 5;
    right: max(24px, calc((100vw - var(--max)) / 2));
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.feed-counter [data-feed-step] {
    color: var(--orange);
}

.feed-counter i {
    width: 42px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.watch-story {
    position: relative;
    z-index: 3;
    height: 720svh;
    margin-top: -100svh;
    background: transparent;
    color: var(--ink);
}

.watch-stage {
    position: sticky;
    z-index: 1;
    top: 0;
    height: 100svh;
    overflow: hidden;
    border-radius: 0;
    background: #f3f1eb;
    isolation: isolate;
    will-change: transform;
}

.watch-map {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(1) invert(1) contrast(0.72) brightness(1.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 700ms ease;
}

.watch-map.is-loaded {
    opacity: 0.46;
}

.watch-map-filter {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(8, 8, 8, 0.045) 0,
            rgba(8, 8, 8, 0.045) 1px,
            transparent 1px,
            transparent 5px
        ),
        rgba(246, 242, 234, 0.44);
    pointer-events: none;
}

.kicker-dark {
    color: var(--ink);
}

.watch-copy {
    position: absolute;
    z-index: 5;
    right: max(24px, calc((100vw - var(--max)) / 2));
    top: clamp(94px, 12vh, 138px);
    width: min(42vw, 580px);
    text-align: right;
    text-shadow: 0 2px 22px rgba(246, 242, 234, 0.88);
}

.watch-copy h2 {
    color: var(--ink);
    font-size: clamp(54px, 6.7vw, 104px);
}

.watch-copy h2 span,
.watch-copy-card h3 span {
    color: var(--orange);
}

.watch-copy > p:not(.kicker) {
    max-width: 420px;
    margin: 24px 0 0 auto;
    color: rgba(8, 8, 8, 0.66);
    font-size: 18px;
    line-height: 1.5;
}

.watch-hand-scene {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 57%;
    width: clamp(780px, 86vw, 1320px);
    aspect-ratio: 3 / 2;
    translate: 0 -50%;
    filter: drop-shadow(0 38px 50px rgba(23, 19, 14, 0.16));
    isolation: isolate;
    will-change: transform, opacity;
}

.watch-hand-focus {
    position: absolute;
    inset: 0;
    transform-origin: 40% 48%;
    will-change: transform;
}

.watch-hand-art {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.watch-screen {
    position: absolute;
    z-index: 2;
    left: 34.375%;
    top: 38.575%;
    width: 11.39%;
    height: 20.9%;
    overflow: hidden;
    border-radius: 0;
    background: #09090b;
    -webkit-mask: url("/assets/apple-watch-screen-mask.png?v=1") center / 100% 100% no-repeat;
    mask: url("/assets/apple-watch-screen-mask.png?v=1") center / 100% 100% no-repeat;
    transform: translateZ(0);
    transform-origin: 50% 50%;
    isolation: isolate;
    pointer-events: none;
}

.watch-screen img,
.watch-screen video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.watch-scroll-video {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    background: #09090b;
    object-fit: fill !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}

.watch-screen.is-video-ready .watch-scroll-video {
    opacity: 1;
}

.watch-screen-fallback {
    transition: opacity 180ms ease;
}

.watch-screen.is-video-ready .watch-screen-fallback {
    opacity: 0;
}

.watch-counter {
    position: absolute;
    z-index: 6;
    right: max(24px, calc((100vw - var(--max)) / 2));
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(8, 8, 8, 0.45);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.watch-counter [data-watch-step] {
    color: var(--orange);
}

.watch-counter i {
    width: 42px;
    height: 1px;
    background: rgba(8, 8, 8, 0.2);
}

.watch-steps {
    position: relative;
    z-index: 2;
    margin-top: -100svh;
    pointer-events: none;
}

.watch-intro-space {
    height: 185svh;
}

.watch-outro-space {
    height: 60svh;
}

.watch-step {
    min-height: 95svh;
    width: min(calc(100% - 48px), var(--max));
    margin: 0 auto;
}

.watch-copy-card {
    position: fixed;
    z-index: 7;
    left: max(24px, calc((100vw - var(--max)) / 2));
    top: 11vh;
    width: auto;
    max-width: calc(100vw - 48px);
    padding: 4px 0 5px 24px;
    border-left: 2px solid var(--orange);
    text-shadow: 0 3px 24px rgba(246, 242, 234, 0.95);
    opacity: 0;
    will-change: transform, opacity;
}

.watch-step:nth-of-type(even) .watch-copy-card {
    top: auto;
    bottom: 10vh;
}

.watch-copy-card h3 {
    font-size: clamp(39px, 4.6vw, 72px);
    letter-spacing: -0.055em;
    line-height: 0.95;
    white-space: nowrap;
}

.watch-copy-card > p:last-child:not(.scene-number) {
    max-width: 34ch;
    margin-top: 18px;
    color: rgba(8, 8, 8, 0.68);
    font-size: 15px;
    line-height: 1.5;
}

.feature-statement {
    position: relative;
    z-index: 6;
    height: 420svh;
    margin-top: -100svh;
    background: transparent;
    color: var(--ink);
}

.feature-statement-stage {
    position: sticky;
    top: 0;
    display: flex;
    width: 100%;
    height: 100svh;
    align-items: center;
    overflow: hidden;
    border-radius: 0;
    background: var(--paper);
    box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.18);
    will-change: transform;
}

.feature-statement-stage > .kicker {
    position: absolute;
    left: max(24px, calc((100vw - var(--max)) / 2));
    top: 11vh;
}

.statement-lines {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.statement-marquee {
    width: 100%;
    overflow: hidden;
}

.statement-track {
    display: flex;
    width: max-content;
    align-items: center;
    will-change: transform;
}

.statement-segment {
    display: flex;
    min-width: 100vw;
    min-height: clamp(108px, 17svh, 180px);
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-around;
    gap: clamp(22px, 2.2vw, 44px);
    box-sizing: border-box;
    padding: 0 clamp(28px, 3vw, 64px);
    white-space: nowrap;
    font-size: clamp(50px, 6vw, 108px);
    font-weight: 950;
    letter-spacing: -0.065em;
    line-height: 0.98;
}

.statement-lines i {
    color: var(--orange);
    font-style: normal;
}

.feature-socials {
    position: absolute;
    left: 50%;
    bottom: max(28px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
}

.feature-socials a {
    display: grid;
    width: 42px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(8, 8, 8, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.42);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.feature-socials a:hover {
    border-color: var(--orange);
    background: rgba(255, 81, 37, 0.1);
    transform: translateY(-2px);
}

.feature-socials img {
    width: 17px;
    height: 17px;
    filter: brightness(0);
}

.faq-section {
    position: relative;
    z-index: 7;
    will-change: transform;
    /* Høj wrapper med en sticky scene indeni - samme opbygning som ur- og
       rutebyggerscenerne. Fladen lander, står stille mens indholdet kommer,
       og slipper først når den næste flade skal rejse sig over den. */
    height: 260svh;
    margin-top: -100svh;
    background: transparent;
}

.faq-stage {
    /* Samme opbygning som ur- og rutebyggerscenerne: sticky med top: 0.
       Det kræver, at hele listen kan være på én skærm - derfor er intet
       spørgsmål åbent fra start, og luften er strammet. Så kan fladen stå
       helt stille, mens slutsektionen rejser sig, uden at noget skal
       animeres pr. frame. */
    position: sticky;
    top: 0;
    display: grid;
    height: 100svh;
    align-content: start;
    overflow: hidden auto;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 81, 37, 0.14), transparent 26%),
        radial-gradient(circle at 86% 82%, rgba(255, 81, 37, 0.08), transparent 30%),
        #0b0b0c;
    padding: 5vh max(24px, calc((100vw - var(--max)) / 2));
    color: var(--white);
    box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.2);
    will-change: transform;
}

.faq-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.025) 0,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px,
        transparent 7px
    );
    pointer-events: none;
}

.faq-heading,
.faq-list {
    position: relative;
    z-index: 1;
}

.faq-heading {
    text-align: center;
}

.faq-heading h2 {
    margin-top: 14px;
    font-size: clamp(50px, 6.2vw, 94px);
    letter-spacing: -0.075em;
    line-height: 0.82;
    text-transform: uppercase;
}

.faq-heading h2 span {
    color: var(--orange);
}

.faq-list {
    display: flex;
    width: min(100%, 780px);
    flex-direction: column;
    gap: 10px;
    margin: clamp(52px, 7vh, 78px) auto 0;
}

.faq-item {
    color: rgba(255, 255, 255, 0.66);
}

.faq-item summary {
    position: relative;
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(255, 81, 37, 0.24);
    border-radius: 16px;
    background: rgba(255, 81, 37, 0.09);
    padding: 10px 12px 10px 20px;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 850;
    letter-spacing: -0.025em;
    list-style: none;
    cursor: pointer;
    transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    border-color: rgba(255, 81, 37, 0.58);
    background: rgba(255, 81, 37, 0.15);
    transform: translateY(-1px);
}

.faq-item summary:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 4px;
}

.faq-toggle {
    position: relative;
    display: block;
    width: 34px;
    flex: 0 0 34px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--orange);
}

.faq-toggle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transition: transform 220ms ease;
    transform: translate(-50%, -68%) rotate(45deg);
}

.faq-item[open] summary {
    border-color: var(--orange);
    background: var(--orange);
    color: var(--white);
}

.faq-item[open] .faq-toggle {
    background: var(--white);
}

.faq-item[open] .faq-toggle::before {
    border-color: var(--ink);
    transform: translate(-50%, -32%) rotate(225deg);
}

.faq-answer {
    max-width: 730px;
    padding: 20px 24px 28px;
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(15px, 1.08vw, 17px);
    line-height: 1.62;
}

.faq-answer p + p {
    margin-top: 13px;
}

.faq-answer a {
    color: var(--orange-hot);
    font-weight: 750;
}

.finale {
    position: relative;
    z-index: 8;
    height: 250svh;
    margin-top: -100svh;
    background: transparent;
}

.finale-stage {
    position: sticky;
    top: 0;
    display: grid;
    height: 100svh;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
    align-items: center;
    gap: clamp(56px, 8vw, 130px);
    overflow: hidden;
    border-radius: 0;
    background: #080808;
    padding: 90px max(24px, calc((100vw - var(--max)) / 2));
    isolation: isolate;
    box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.22);
    will-change: transform;
}

.finale-map {
    position: absolute;
    z-index: -4;
    inset: 0;
    opacity: 0;
    filter: saturate(0.72) brightness(0.62) contrast(1.08);
    transition: opacity 700ms ease;
}

.finale-map.is-loaded {
    opacity: 0.82;
}

.finale-map .mapboxgl-ctrl-bottom-left,
.finale-map .mapboxgl-ctrl-bottom-right {
    opacity: 0.48;
}

.finale-stage::before {
    content: "";
    position: absolute;
    z-index: -3;
    inset: 0;
    background:
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 6px),
        linear-gradient(90deg, rgba(5, 5, 6, 0.98) 0%, rgba(5, 5, 6, 0.91) 32%, rgba(5, 5, 6, 0.55) 58%, rgba(5, 5, 6, 0.28) 100%);
    pointer-events: none;
}

.finale-stage::after {
    content: "";
    position: absolute;
    z-index: -2;
    width: 58vw;
    aspect-ratio: 1;
    right: -18vw;
    top: 50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 81, 37, 0.24), transparent 66%);
    transform: translateY(-50%);
}

.finale-phone {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    transform: rotate(3.5deg);
}

.finale-phone .phone-shell {
    width: min(clamp(300px, 28vw, 440px), 50svh);
    box-shadow:
        0 62px 120px rgba(0, 0, 0, 0.72),
        -28px 18px 85px rgba(255, 81, 37, 0.2);
}

.finale-copy {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
}

.finale-copy h2 {
    max-width: 760px;
    font-size: clamp(62px, 7.2vw, 118px);
    line-height: 0.86;
}

.finale-copy > p:not(.kicker) {
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.68);
    font-size: clamp(17px, 1.35vw, 21px);
}

.finale-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 34px;
}

.finale-actions > img {
    /* Samme højde som App Store-badgen ved siden af, så de læses som ét par.
       Højden er regnet ud af badgens billedforhold i stedet for skrevet af. */
    height: calc(190px * 986 / 2945);
    width: auto;
    border-radius: 12px;
}

.seo-bridge {
    position: relative;
    z-index: 9;
    margin-top: -100svh;
    border-radius: clamp(52px, 6.5vw, 96px) clamp(52px, 6.5vw, 96px) 0 0;
    padding: 15vh max(24px, calc((100vw - var(--max)) / 2)) 16vh;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.18);
    will-change: transform;
}

.seo-intro {
    display: grid;
    grid-template-columns: minmax(440px, 0.95fr) minmax(320px, 0.7fr);
    align-items: end;
    gap: clamp(44px, 8vw, 140px);
}

.seo-intro .kicker {
    grid-column: 1 / -1;
    margin-bottom: -24px;
}

.seo-intro h2 {
    font-size: clamp(54px, 6.4vw, 104px);
    letter-spacing: -0.075em;
    line-height: 0.88;
}

.seo-intro h2 span {
    color: var(--orange);
}

.seo-intro > p:last-child {
    max-width: 54ch;
    padding-bottom: 6px;
    color: rgba(8, 8, 8, 0.64);
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.58;
}

.seo-editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(72px, 10vh, 120px);
    border: 1px solid rgba(8, 8, 8, 0.14);
    border-radius: 30px;
    overflow: hidden;
    background: rgba(8, 8, 8, 0.14);
}

.seo-story {
    min-height: 390px;
    background: rgba(255, 255, 255, 0.3);
    padding: clamp(32px, 4vw, 62px);
}

.seo-number {
    color: var(--orange);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.seo-story h3 {
    max-width: 15ch;
    margin-top: 34px;
    font-size: clamp(30px, 3vw, 48px);
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.seo-story > p:not(.seo-number) {
    max-width: 58ch;
    margin-top: 22px;
    color: rgba(8, 8, 8, 0.64);
    font-size: 16px;
    line-height: 1.6;
}

.seo-story > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    text-decoration-color: rgba(255, 81, 37, 0.55);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.seo-story > a span {
    color: var(--orange);
}

.seo-topic-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(30px, 6vw, 96px);
    margin-top: clamp(72px, 10vh, 118px);
}

.seo-topic-group {
    display: flex;
    flex-direction: column;
}

.seo-topic-group h3 {
    margin-bottom: 16px;
    color: var(--orange);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.seo-topic-group a {
    border-top: 1px solid rgba(8, 8, 8, 0.14);
    padding: 15px 2px;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 780;
    text-decoration: none;
    transition: color 180ms ease, padding-left 180ms ease;
}

.seo-topic-group a:last-child {
    border-bottom: 1px solid rgba(8, 8, 8, 0.16);
}

.seo-topic-group a:hover {
    padding-left: 10px;
    color: var(--orange);
}

.site-footer {
    /* De frosne flader bliver hængende resten af siden. Footeren skal ligge
       over dem, ikke bagved. */
    position: relative;
    z-index: 10;
    display: grid;
    gap: 26px;
    padding: 42px max(24px, calc((100vw - var(--max)) / 2)) 38px;
    border-top: 1px solid var(--line);
    background: var(--ink);
    color: rgba(255, 255, 255, 0.46);
    font-size: 12px;
}

.footer-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 28px;
}

.footer-line-base {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer img {
    display: block;
    width: 78px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 22px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color 180ms ease;
}

.footer-links a:hover {
    color: var(--orange);
}

.footer-line-base .footer-socials {
    justify-self: start;
}

.footer-mail {
    justify-self: end;
    color: rgba(255, 255, 255, 0.62);
    font-weight: 700;
    text-decoration: none;
    transition: color 180ms ease;
}

.footer-mail:hover {
    color: var(--orange);
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 9px;
}

.footer-socials a {
    display: grid;
    width: 38px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.footer-socials a:hover {
    border-color: rgba(255, 81, 37, 0.8);
    background: rgba(255, 81, 37, 0.16);
    transform: translateY(-2px);
}

.footer-socials img {
    width: 16px;
    height: 16px;
}

@media (max-width: 850px) {
    .site-header {
        width: calc(100% - 32px);
        padding-top: 16px;
    }

    .hero {
        align-content: center;
        padding: 118px 20px 92px;
    }

    h1 {
        font-size: clamp(42px, 11.5vw, 68px);
    }

    .phone-shell {
        width: min(67vw, 310px);
    }

    .scroll-cue {
        display: none;
    }

    .route-story {
        min-height: 580svh;
        margin-top: 0;
    }

    .story-phone {
        top: auto;
        bottom: -9svh;
        width: 122vw;
    }

    .story-step {
        width: calc(100% - 32px);
        align-items: flex-end;
        padding-bottom: 9vh;
    }

    .story-step-right {
        justify-content: flex-start;
    }

    .story-copy-card {
        width: min(100%, 430px);
        padding: 2px 0 3px 20px;
    }

    .story-copy-card h2 {
        font-size: clamp(38px, 11vw, 55px);
    }

    .story-copy-card > p:last-child {
        margin-top: 15px;
        font-size: 14px;
    }

    .story-counter {
        right: 18px;
        bottom: 22px;
    }

    .runnart-stage {
        grid-template-columns: 1fr;
        align-content: center;
        gap: 14px;
        padding: 100px 20px 40px;
    }

    .runnart-copy h2,
    .watch-copy h2,
    .finale-copy h2 {
        font-size: clamp(49px, 13vw, 78px);
    }

    .runnart-copy > p:not(.kicker) {
        margin: 18px 0;
        font-size: 16px;
    }

    .runnart-canvas {
        width: min(90vw, 500px);
        justify-self: center;
    }

    .art-caption-one { right: 4%; top: 52%; }
    .art-caption-two { left: 6%; right: auto; bottom: 4%; }

    .feed-story {
        height: 560svh;
    }

    .feed-stage {
        display: block;
        padding: 82px 18px 54px;
    }

    .feed-copy-stack {
        z-index: 5;
        width: min(72vw, 500px);
        min-height: 0;
        padding-top: 2vh;
    }

    .feed-section-heading {
        margin-bottom: 20px;
    }

    .feed-section-heading h2 {
        font-size: clamp(38px, 9vw, 58px);
    }

    .route-methods {
        gap: 6px;
    }

    .route-method-question {
        min-height: 44px;
        gap: 9px;
        padding: 7px 10px;
    }

    .route-method-question span {
        width: 26px;
        flex-basis: 26px;
        font-size: 8px;
    }

    .route-method-question h3 {
        font-size: 13px;
    }

    .feed-chapter > p:last-child {
        margin-right: 12px;
        margin-left: 45px;
        font-size: 11px;
    }

    .feed-chapter.is-active > p:last-child {
        max-height: 150px;
        margin-bottom: 10px;
    }

    .feed-video-wrap {
        position: absolute;
        right: -24vw;
        bottom: 2svh;
        height: min(78svh, 720px);
        translate: 0 -3svh;
    }

    .feed-stage::before {
        background:
            linear-gradient(90deg, rgba(7, 7, 7, 0.99) 0%, rgba(7, 7, 7, 0.94) 50%, rgba(7, 7, 7, 0.46) 76%, rgba(7, 7, 7, 0.54) 100%),
            radial-gradient(circle at 78% 48%, rgba(255, 81, 37, 0.15), transparent 31%);
    }

    .feed-counter {
        right: 18px;
        bottom: 20px;
    }

    .watch-story {
        height: 720svh;
        margin-top: -100svh;
    }

    .watch-copy {
        left: 20px;
        right: 20px;
        top: 88px;
        width: auto;
        max-width: 560px;
        text-align: left;
    }

    .watch-copy > p:not(.kicker) {
        max-width: 340px;
        margin: 18px 0 0;
        font-size: 16px;
    }

    .watch-hand-scene {
        top: 60%;
        left: -8vw;
        width: 100vw;
    }

    .watch-step {
        width: calc(100% - 32px);
    }

    .watch-copy-card {
        left: 16px;
        top: 11vh;
        width: auto;
        max-width: calc(100vw - 32px);
        padding-left: 20px;
    }

    .watch-step:nth-of-type(even) .watch-copy-card {
        top: auto;
        bottom: 9vh;
    }

    .watch-copy-card h3 {
        font-size: clamp(38px, 11vw, 55px);
        white-space: normal;
    }

    .watch-counter {
        right: 18px;
        bottom: 22px;
    }

    .statement-segment {
        min-height: 16svh;
        gap: 18px;
        padding: 0 20px;
        font-size: clamp(38px, 10.5vw, 64px);
    }

    .feature-statement-stage > .kicker {
        left: 20px;
        top: 12vh;
    }

    .faq-stage {
        position: static;
        height: auto;
        min-height: 100svh;
        overflow: visible;
        padding: 96px 20px 104px;
    }

    .faq-section {
        /* Mobil: listen kan ikke være i én skærm, så scenen ruller med. Uden
           en sticky flade er padding fint til at give plads. */
        height: auto;
        padding-bottom: 100svh;
    }

    .faq-heading h2 {
        font-size: clamp(46px, 13vw, 68px);
    }

    .faq-list {
        gap: 10px;
        margin-top: 64px;
    }

    .faq-item summary {
        min-height: 58px;
        gap: 14px;
        border-radius: 14px;
        padding: 9px 10px 9px 16px;
        font-size: 14px;
    }

    .faq-toggle {
        width: 32px;
        flex-basis: 32px;
    }

    .faq-answer {
        padding: 20px 18px 28px;
        font-size: 15px;
    }

    .finale {
        /* Scenen stables på mobil og er kun ~1,3 skærm høj. Uden en skærms
           tilkørsel begynder papirfladen at rejse sig, før slutsektionen er
           landet. Samme regel som FAQ: wrapper = scene + én skærm. */
        height: auto;
        padding-bottom: 100svh;
    }

    .finale-stage {
        position: static;
        display: flex;
        height: auto;
        min-height: 135svh;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 34px;
        padding: 112px 20px 76px;
    }

    .finale-phone {
        order: 2;
        align-self: center;
        transform: rotate(2deg);
    }

    .finale-copy {
        order: 1;
        width: 100%;
    }

    .finale-copy h2 {
        max-width: 9ch;
        font-size: clamp(52px, 14.5vw, 78px);
    }

    .finale-copy > p:not(.kicker) {
        max-width: 29ch;
        margin-top: 20px;
        font-size: 16px;
    }

    .finale-actions {
        margin-top: 26px;
    }

    .finale-phone .phone-shell {
        width: min(67vw, 310px);
    }

    .finale-stage::before {
        background:
            repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 6px),
            linear-gradient(180deg, rgba(5, 5, 6, 0.97) 0%, rgba(5, 5, 6, 0.84) 43%, rgba(5, 5, 6, 0.35) 100%);
    }

    .seo-bridge {
        padding: 110px 20px;
    }

    .seo-intro,
    .seo-editorial-grid,
    .seo-topic-groups {
        grid-template-columns: 1fr;
    }

    .seo-intro {
        gap: 30px;
    }

    .seo-intro .kicker {
        margin-bottom: 0;
    }

    .seo-intro h2 {
        font-size: clamp(50px, 14vw, 76px);
    }

    .seo-editorial-grid {
        margin-top: 68px;
    }

    .seo-story {
        min-height: 0;
        padding: 34px 26px 40px;
    }

    .seo-story h3 {
        margin-top: 24px;
    }

    .seo-topic-groups {
        gap: 46px;
        margin-top: 72px;
    }

    .site-footer {
        gap: 22px;
        padding: 34px 20px 30px;
    }

    .footer-line,
    .footer-line-base {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 18px;
    }

    .footer-links {
        justify-content: flex-start;
        gap: 9px 18px;
    }

    .footer-mail,
    .footer-line-base .footer-socials {
        justify-self: start;
    }
}

@media (max-width: 520px) {
    .brand img {
        width: 64px;
    }

    .button-small {
        min-height: 38px;
        padding: 0 14px;
    }

    .hero-actions {
        justify-content: center;
    }

    .story-phone {
        top: auto;
        bottom: -8svh;
        width: 128vw;
    }

    .story-step {
        padding-bottom: 7vh;
    }

    .art-caption {
        display: none;
    }

    .feed-stage {
        padding: 76px 16px 24px;
    }

    .feed-copy-stack {
        width: 100%;
        height: 100%;
        padding-top: 0;
    }

    .feed-section-heading {
        width: 100%;
        margin: 0;
        text-align: left;
    }

    .feed-section-heading .kicker {
        margin-bottom: 11px;
        font-size: 9px;
    }

    .feed-section-heading h2 {
        margin: 0;
        font-size: clamp(29px, 8.4vw, 38px);
        line-height: 0.92;
    }

    .route-methods {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 24px;
        width: auto;
        gap: 5px;
        margin: 0;
    }

    .route-method-question {
        min-height: 37px;
        gap: 7px;
        padding: 6px 7px;
    }

    .route-method-question span {
        width: 23px;
        flex-basis: 23px;
    }

    .route-method-question h3 {
        font-size: 13.5px;
    }

    .feed-chapter {
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
    }

    .route-method-question {
        border-radius: 12px;
        background: rgba(7, 7, 7, 0.82);
        backdrop-filter: blur(12px);
    }

    .feed-chapter > p:last-child {
        margin-right: 10px;
        margin-left: 10px;
        font-size: 12.5px;
        line-height: 1.52;
    }

    .feed-chapter.is-active > p:last-child {
        max-height: 190px;
        margin-top: 7px;
        margin-bottom: 8px;
    }

    .feature-socials {
        bottom: max(20px, env(safe-area-inset-bottom));
    }

    .feature-socials a {
        width: 38px;
    }

    /* Telefonen fylder pladsen mellem overskriften og kortstakken ud i stedet
       for at have en fast højde, der kan lægge sig oven i dem begge.
       Højden giver bredden, så skærmen selv beholder 9:19,5. */
    .feed-video-wrap {
        left: 16px;
        right: 16px;
        top: 172px;
        bottom: 338px;
        width: auto;
        height: auto;
        aspect-ratio: auto;
        translate: none;
    }

    /* content-box: rammen ligger uden om skærmen i stedet for at æde af den,
       så selve skærmen holder 9:19,5 og ikke kommer til at se smal ud.
       Højden er givet af pladsen, og bredden følger af forholdet. */
    .feed-device {
        box-sizing: content-box;
        left: 50%;
        right: auto;
        width: auto;
        aspect-ratio: 9 / 19.5;
        border-width: 4px;
        border-radius: 26px;
        translate: -50%;
    }

    /* Uden blur (slået fra på mobil) skal gløden selv tone ud. */
    .feed-video-glow {
        width: 52%;
        background: radial-gradient(circle, rgba(255, 81, 37, 0.24), transparent 68%);
    }

    .feed-wordmark {
        display: none;
    }

    .feed-counter {
        right: 14px;
        bottom: 18px;
    }

    .watch-hand-scene {
        top: 62%;
        left: -10vw;
        width: 110vw;
    }

    .finale-actions > img {
        display: none;
    }

    .finale-stage {
        min-height: 132svh;
        gap: 28px;
        padding-top: 104px;
    }

    .finale-phone .phone-shell {
        width: min(72vw, 292px);
    }
}

/* Lave telefoner: overskrift, telefon og fire kort kan ikke fylde lige meget.
   Telefonen giver plads, så intet lapper over noget andet. */
@media (max-width: 520px) and (max-height: 740px) {
    .feed-stage {
        padding: 68px 16px 18px;
    }

    .route-methods {
        gap: 4px;
    }

    .route-method-question {
        min-height: 33px;
        padding: 5px 7px;
    }

    .route-method-question h3 {
        font-size: 12.5px;
    }

    .feed-chapter > p:last-child {
        font-size: 11.5px;
        line-height: 1.45;
    }

    .feed-chapter.is-active > p:last-child {
        max-height: 150px;
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .feed-video-wrap {
        top: 156px;
        bottom: 296px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .runnart-story {
        height: auto;
        min-height: auto;
        margin-top: 0;
    }

    .feature-statement {
        height: auto;
        margin-top: 0;
    }

    .feature-statement-stage {
        position: relative;
        min-height: 100svh;
    }

    .feed-story {
        min-height: 100svh;
    }

    .feed-chapter:first-child {
        opacity: 1;
    }

    .watch-story {
        height: auto;
        min-height: auto;
        margin-top: 0;
    }

    .watch-stage {
        position: relative;
        min-height: 100svh;
        border-radius: 0;
        transform: none;
    }

    .watch-steps {
        display: none;
    }

    .runnart-stage {
        position: relative;
        min-height: 100svh;
        border-radius: 0;
        transform: none;
    }

    .runnart-story {
        padding-bottom: 80px;
    }

    .route-ready-overlay {
        opacity: 0;
        transform: none;
    }

    .run-scroll-video {
        opacity: 1;
        clip-path: inset(0);
        transform: translateZ(0);
    }

    .phone-ambient-light {
        --ambient-scale: 1;
        opacity: 0;
        transform: translate(-50%, -50%);
    }
}

/* ------------------------------------------------------------------ */
/* Landingssider: samme filmiske ramme, men med sidens eget SEO-indhold */
/* ------------------------------------------------------------------ */

/* Heroen på en landingsside bærer sidens rigtige H1, som er længere end
   forsidens to korte linjer. Derfor sin egen skala i stedet for forsidens. */
.hero-page h1 {
    max-width: 17ch;
    margin: 0 auto;
    font-size: clamp(38px, 4.6vw, 78px);
    line-height: 0.94;
}

.hero-page .hero-lead {
    max-width: 620px;
}

.hero-secondary {
    display: inline-flex;
    /* Samme mål OG samme form som App Store-badgen ved siden af: 190px bred,
       lige så høj som badgens billedforhold gør den, og samme hjørneradius.
       Forskellen er farven - badgen er sort, denne er Runnr-orange. Længere
       labels får lov at vokse i bredden i stedet for at presse teksten. */
    min-width: 190px;
    height: calc(190px * 986 / 2945);
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 11px;
    padding: 0 22px;
    background: var(--orange);
    color: var(--white);
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(255, 81, 37, 0.26);
    transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.hero-secondary:hover {
    background: var(--orange-hot);
    box-shadow: 0 14px 38px rgba(255, 81, 37, 0.34);
    transform: translateY(-2px);
}

.hero-note {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.05em;
}

/* Brødkrummen bor øverst på papirfladen, hvor den kan læses - heroen er
   fuldt kortbillede og har ikke plads til den. */
.page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: clamp(38px, 6vh, 62px);
    color: rgba(8, 8, 8, 0.42);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.page-breadcrumb a {
    color: rgba(8, 8, 8, 0.62);
    text-decoration: none;
    transition: color 180ms ease;
}

.page-breadcrumb a:hover {
    color: var(--orange);
}

.seo-block {
    margin-top: clamp(70px, 10vh, 118px);
}

.seo-block > h2,
.seo-block > h3 {
    max-width: 22ch;
    font-size: clamp(31px, 3.3vw, 54px);
    font-weight: 950;
    letter-spacing: -0.055em;
    line-height: 0.97;
}

.seo-block-sub {
    max-width: 62ch;
    margin-top: 20px;
    color: rgba(8, 8, 8, 0.62);
    font-size: clamp(17px, 1.3vw, 21px);
    line-height: 1.55;
}

.seo-prose p {
    max-width: 74ch;
    margin-top: 20px;
    color: rgba(8, 8, 8, 0.7);
    font-size: 17px;
    line-height: 1.68;
}

.seo-prose a,
.seo-block-sub a,
.seo-intro a {
    color: var(--ink);
    font-weight: 800;
    text-decoration-color: rgba(255, 81, 37, 0.55);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.seo-prose a:hover,
.seo-block-sub a:hover {
    color: var(--orange);
}

/* Fremhævet panel: erstatter .text-panel fra den gamle problem-sektion. */
.seo-panel {
    margin-top: clamp(38px, 5vh, 56px);
    border: 1px solid rgba(8, 8, 8, 0.14);
    border-radius: 30px;
    padding: clamp(30px, 3.6vw, 54px);
    background: rgba(255, 255, 255, 0.42);
}

.seo-panel > h2,
.seo-panel > h3 {
    max-width: 20ch;
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 950;
    letter-spacing: -0.05em;
    line-height: 1.02;
}

.seo-panel p {
    max-width: 70ch;
    margin-top: 16px;
    color: rgba(8, 8, 8, 0.66);
    font-size: 17px;
    line-height: 1.62;
}

/* Kort på papirfladen: 3 trin fra den gamle .steps-sektion. */
.seo-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(38px, 5vh, 58px);
    border: 1px solid rgba(8, 8, 8, 0.14);
    border-radius: 30px;
    overflow: hidden;
    background: rgba(8, 8, 8, 0.14);
}

.seo-step {
    background: rgba(255, 255, 255, 0.32);
    padding: clamp(28px, 3vw, 46px);
}

.seo-step-num {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--orange);
    color: var(--white);
    font-size: 14px;
    font-weight: 950;
}

.seo-step > h3,
.seo-step > h2 {
    margin-top: 24px;
    font-size: clamp(21px, 1.7vw, 27px);
    font-weight: 950;
    letter-spacing: -0.04em;
    line-height: 1.06;
}

.seo-step p {
    max-width: 42ch;
    margin-top: 14px;
    color: rgba(8, 8, 8, 0.64);
    font-size: 15px;
    line-height: 1.6;
}

/* Mindre kort: den gamle .grid.compact-grid. */
.seo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: clamp(38px, 5vh, 58px);
}

.seo-card {
    border: 1px solid rgba(8, 8, 8, 0.13);
    border-radius: 24px;
    padding: clamp(26px, 2.6vw, 38px);
    background: rgba(255, 255, 255, 0.42);
}

.seo-card > h3,
.seo-card > h2 {
    font-size: clamp(19px, 1.5vw, 24px);
    font-weight: 950;
    letter-spacing: -0.04em;
    line-height: 1.08;
}

.seo-card p {
    margin-top: 13px;
    color: rgba(8, 8, 8, 0.64);
    font-size: 15px;
    line-height: 1.6;
}

/* Interne links med beskrivelse: den gamle .route-link-grid. */
.seo-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    margin-top: clamp(38px, 5vh, 58px);
    border: 1px solid rgba(8, 8, 8, 0.14);
    border-radius: 26px;
    overflow: hidden;
    background: rgba(8, 8, 8, 0.14);
}

.seo-link {
    display: block;
    background: rgba(255, 255, 255, 0.32);
    padding: 26px 28px;
    text-decoration: none;
    transition: background 180ms ease, padding-left 180ms ease;
}

.seo-link:hover {
    background: rgba(255, 255, 255, 0.68);
    padding-left: 36px;
}

.seo-link strong {
    display: block;
    font-size: clamp(17px, 1.3vw, 20px);
    font-weight: 900;
    letter-spacing: -0.03em;
}

.seo-link small {
    display: block;
    margin-top: 8px;
    color: rgba(8, 8, 8, 0.58);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
}

.seo-link:hover strong {
    color: var(--orange);
}

/* Figurgitteret på GPS-art-siden. */
.seo-art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    margin-top: clamp(38px, 5vh, 58px);
}

.seo-art-tile {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(8, 8, 8, 0.13);
    border-radius: 22px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.42);
}

.seo-art-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Landingssidernes tekstkort genbruger forsidens .seo-story, men beholder
   sidens eget overskriftsniveau. */
.seo-story h2 {
    max-width: 15ch;
    margin-top: 34px;
    font-size: clamp(30px, 3vw, 48px);
    font-weight: 950;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.seo-story > p:not(.seo-number) a {
    color: var(--ink);
    font-weight: 800;
    text-decoration-color: rgba(255, 81, 37, 0.55);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* FAQ-spørgsmålene beholder deres h3, så sidens overskriftsstruktur er
   den samme som før. */
.faq-item summary h3 {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

@media (max-width: 850px) {
    .hero-page h1 {
        max-width: 14ch;
        font-size: clamp(34px, 9.4vw, 56px);
    }

    .hero-page .hero-actions {
        flex-wrap: wrap;
        gap: 16px;
    }

    .page-breadcrumb {
        margin-bottom: 32px;
    }

    .seo-block {
        margin-top: 64px;
    }

    .seo-steps,
    .seo-links {
        grid-template-columns: 1fr;
    }

    .seo-art-grid {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        gap: 9px;
    }

    .seo-story h2 {
        margin-top: 24px;
    }
}

/* Landingssidernes egne overskrifter er længere sætninger end forsidens to
   ord, så FAQ- og slutsektionen får en skala, teksten kan være i. */
.faq-heading-page h2 {
    max-width: 16ch;
    margin-inline: auto;
    font-size: clamp(38px, 4.4vw, 72px);
    line-height: 0.88;
}

.finale-page h2 {
    max-width: 13ch;
    font-size: clamp(46px, 5.2vw, 84px);
    line-height: 0.9;
}

/* Et ulige antal tekstkort skal ikke efterlade et hul i gitteret. */
.seo-editorial-grid > .seo-story:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (max-width: 850px) {
    .faq-heading-page h2 {
        max-width: 13ch;
        font-size: clamp(34px, 9vw, 52px);
    }

    .finale-page h2 {
        max-width: 12ch;
        font-size: clamp(40px, 11vw, 62px);
    }
}

/* Knapper fra de gamle sektioner bliver til tekstlinks på papirfladen. */
.seo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: clamp(28px, 4vh, 40px);
}

.seo-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 900;
    text-decoration-color: rgba(255, 81, 37, 0.55);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: color 180ms ease;
}

.seo-action span {
    color: var(--orange);
}

.seo-action:hover {
    color: var(--orange);
}

/* Trinlister fra sidens eget indhold. */
.seo-list {
    max-width: 70ch;
    margin-top: 24px;
    padding-left: 22px;
    color: rgba(8, 8, 8, 0.7);
    font-size: 17px;
    line-height: 1.68;
}

.seo-list li {
    margin-top: 12px;
    padding-left: 6px;
}

.seo-list li::marker {
    color: var(--orange);
    font-weight: 950;
}

.seo-list strong {
    color: var(--ink);
    font-weight: 900;
}

/* ------------------------------------------------------------------ */
/* Indflyvning: fladen dækker siden, mens kortene starter op            */
/* ------------------------------------------------------------------ */

/* Første load tegner fire WebGL-kort op på én gang, og det ses. Fladen
   her dækker over opstarten og løfter sig som sidens øvrige flader, med
   en bue i underkanten.

   Bemærk de to ens keyframes: "introHold" kører af sig selv efter 4
   sekunder, så fladen ALDRIG kan blive hængende og dække siden, hvis
   JavaScript fejler. Svarer siden hurtigere, skifter script.js til
   "introLift", som kører med det samme. */
.page-intro {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--ink);
    animation: introHold 820ms cubic-bezier(0.76, 0, 0.24, 1) 4s forwards;
    will-change: transform;
}

.page-intro.is-ready {
    animation: introLift 820ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.page-intro img {
    width: 92px;
    height: auto;
    animation: introPulse 1.5s ease-in-out infinite;
}

@keyframes introLift {
    to {
        border-radius: 0 0 46% 46% / 0 0 15% 15%;
        transform: translateY(-101%);
    }
}

@keyframes introHold {
    to {
        border-radius: 0 0 46% 46% / 0 0 15% 15%;
        transform: translateY(-101%);
    }
}

@keyframes introPulse {
    50% {
        opacity: 0.42;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-intro {
        animation: introHold 1ms linear 300ms forwards;
    }

    .page-intro.is-ready {
        animation: introLift 1ms linear forwards;
    }

    .page-intro img {
        animation: none;
    }
}

/* ------------------------------------------------------------------ */
/* Mobil: skær det tunge fra                                           */
/* ------------------------------------------------------------------ */

/* Store blur- og drop-shadow-filtre skal genberegnes, hver gang det, de
   ligger over, flytter sig - og på denne side flytter noget sig konstant.
   På en telefon er det nok til at forløbet hakker. Effekterne er pynt, så
   de ryger på mobil, hvor der ikke er kræfter til dem.

   backdrop-filter er samme historie: den tvinger browseren til at læse og
   sløre det, der ligger bagved, i hver frame. */
@media (max-width: 850px) {
    .phone-ambient-light,
    .phone-ambient-light::before,
    .phone-ambient-light::after,
    .feed-video-glow,
    .hand-device,
    .watch-map-filter,
    .runnart-canvas svg {
        filter: none;
    }

    .feed-chapter,
    .route-method-question,
    .faq-item summary,
    .hero-secondary {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Kortene bag ur-, rutebygger- og slutfladen oprettes ikke på mobil.
       Fladernes egen baggrund står tilbage, og den er allerede den rigtige. */
    .watch-map,
    .route-maker-map,
    .finale-map {
        display: none;
    }
}