/* ─────────────────────────────────────────────────────────────
   Føniks v2 · landingsside (utkast, 23.10.2026)
   Munin-språket i Føniks' farger: én natt i Deep med nordlys i mint, glass, rolig bevegelse uten zoom.
   Alle farger er tokens i :root (Engine-reglene), ingen important-unntak, ingen opacity: 0 utenfor .reveal
   (skjulte tilstander bruker visibility, clip-path, transform og filter: opacity()).
   ───────────────────────────────────────────────────────────── */
@font-face { font-family: 'Red Hat Display'; src: url(fonts/red-hat-display.woff2) format('woff2'); font-weight: 500 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(fonts/dm-sans.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  /* Engine-variablene */
  --color-bg: #03202a;
  --color-surface: #082f3a;
  --color-text: #f5f6f0;
  --color-text-muted: #b7cbd0;
  --color-accent: #6ae6ad;
  --color-accent-muted: #245548;
  --font-display: 'Red Hat Display', Arial, sans-serif;
  --font-body: 'DM Sans', Arial, sans-serif;

  /* Profilen (Digitale tjenester) */
  --deep: #0b2936;
  --deep-2: #082f3a;
  --deep-3: #0c3e4b;
  --navy: #103442;
  --paper: #f3f3ed;
  --mint: #6ae6ad;
  --mint-hover: #8ef0c3;
  --mint-soft: #b8f5d8;
  --aqua: #7fe9f2;
  --green: #176b50;
  --white: #f5f6f0;
  --grey: #b7cbd0;
  --grey-dim: rgb(183 203 208 / 0.72);
  --lead: #cfe0e2;

  /* Natten */
  --night: #03202a;
  --night-deep: #021720;
  --night-top: #053845;
  --ray: rgb(160 255 215 / 0.42);
  --ray-2: rgb(120 235 255 / 0.30);
  --ray-0: rgb(150 255 210 / 0);
  --scene-top: #0a5262;
  --scene-mid: #052c37;
  --aurora-1: rgb(52 240 170 / 0.34);
  --aurora-2: rgb(0 214 160 / 0.24);
  --aurora-3: rgb(24 178 236 / 0.28);
  --aurora-0: rgb(52 240 170 / 0);
  --star: rgb(220 245 235 / 0.9);
  --glow: rgb(52 240 170 / 0.45);
  --glow-soft: rgb(20 210 150 / 0.24);
  --glow-0: rgb(20 210 150 / 0);

  /* Glass */
  --glass-a: rgb(255 255 255 / 0.07);
  --glass-b: rgb(255 255 255 / 0.02);
  --glass-edge: rgb(140 240 200 / 0.18);
  --glass-top: rgb(200 255 232 / 0.32);
  --glass-hover: rgb(255 255 255 / 0.12);
  --shadow: rgb(0 10 14 / 0.6);
  --veil: rgb(3 32 42 / 0.96);
  --bar-bg: #03202a;
  --bar: rgb(3 32 42 / 0.82);
  --hair: rgb(140 240 200 / 0.1);

  /* «Slik fungerer det»: hvert kort har sin svake tone, og fornyelsen har det ene varme glimtet */
  --tone-a: rgb(52 240 170 / 0.16);
  --tone-b: rgb(24 178 236 / 0.16);
  --tone-c: rgb(255 181 71 / 0.13);
  --tone-0: rgb(52 240 170 / 0);
  --ember: #ffb547;
  /* Ilden (fra Føniks-profilmanualen): bare i gjenfødselen, aldri som flammer rundt kundens nettside */
  --fire-gold: #ffd08a;
  --fire-amber: #ffb547;
  --fire-ember: #ff8a45;
  --fire-glow: rgb(255 170 80 / 0.42);
  --fire-glow-soft: rgb(255 160 70 / 0.18);
  --fire-0: rgb(255 160 70 / 0);
  --nt-bg: rgb(16 52 66 / 0.94);
  --nt-solid: #123b4a;
  /* Den nye, premium utgaven i fornyelsen */
  --pr-paper: #f7f5ef;
  --pr-ink: #0f2a33;
  --pr-muted: #5f6f74;
  --pr-line: #e2ded2;
  --pr-accent: #176b50;
  --pr-img-1: #efe6d8;
  --pr-img-2: #ddc8ab;
  --pr-img-3: #c7a988;
  --pr-window: #fffaf0;
  --pr-window-glow: rgb(255 244 220 / 0.85);
  --pr-window-glow-0: rgb(255 244 220 / 0);
  --pr-tub: #ffffff;
  --pr-tub-shade: rgb(120 90 60 / 0.18);
  --pr-plant: #2f6b4f;
  --pr-plant-2: #4f9a72;
  --pr-float: #ffffff;
  --ed-b-paper: #f6f4ec;
  --ed-b-ink: #103442;
  --ed-b-accent: #176b50;
  --ed-b-art-1: #6ae6ad;
  --ed-b-art-2: #176b50;

  /* Føniksen i «Møt Føniks»: lyset den reiser seg fra, og glansen over brettene */
  --orb-1: rgb(106 230 173 / 0.5);
  --orb-2: rgb(52 220 170 / 0.14);
  --orb-0: rgb(52 220 170 / 0);
  --sheen: rgb(230 255 245 / 0.55);
  --sheen-0: rgb(230 255 245 / 0);

  /* Den gamle nettsiden i scenen: en ekte WordPress-side fra 2017 */
  --old-page: #d8d8d6;
  --old-page-2: #cfcfcc;
  --old-box: #ffffff;
  --old-strip: #1f4e79;
  --old-strip-ink: #dbe6f1;
  --old-blue: #2a6db0;
  --old-orange: #e2822b;
  --old-ink: #555555;
  --old-head: #333333;
  --old-line: #e3e3e3;
  --old-text-line: #d4d4d4;
  --old-tile: #e6ecef;
  --old-grout: #c3ced5;
  --old-shade: rgb(20 30 40 / 0.5);
  --old-foot: #3b3b3b;
  --old-foot-ink: #b5b5b5;
  --old-cookie: rgb(0 0 0 / 0.82);
  --old-white: #ffffff;
  --old-news: #f6f6f6;
  /* Den nye nettsiden i scenen: slik Føniks lager dem (Deep, mint, Papir) */
  --nw-hero-1: #0b3d4a;
  --nw-hero-2: #062631;
  --nw-glow: rgb(106 230 173 / 0.22);
  --nw-glow-0: rgb(106 230 173 / 0);
  --nw-line-dark: rgb(183 230 208 / 0.16);
  --nw-paper: #f3f3ed;
  --nw-card: #ffffff;
  --nw-ink: #103442;
  --nw-muted: #4c6369;
  --nw-line: #e1e5de;
  --nw-mint-tint: #e3f8ee;
  --nw-p-tile: #dfeae8;
  --nw-p-grout: #b9cbc8;
  --nw-p-light: rgb(255 255 255 / 0.8);
  --nw-p-sun: rgb(255 214 150 / 0.9);
  --nw-p-warm-1: #f2c79a;
  --nw-p-warm-2: #c9845a;
  --nw-p-pipe: #b87333;
  --nw-p-pipe-2: #8a9aa3;
  --nw-p-cool-1: #c9d6dc;
  --nw-p-cool-2: #8fa5ae;

  /* Fuglen: brettene (filer/foniks-symbol-deep.svg) */
  --fb-1a: #176b50; --fb-1b: #6ae6ad;
  --fb-2a: #12533f; --fb-2b: #4fcf95;
  --fb-6a: #0f4636; --fb-6b: #1f8a64;
  --fb-7a: #6ae6ad; --fb-7b: #b8f5d8;

  /* Himmelen i script.js (r,g,b): stjernene og linjene, lyset i dem, og de tre nordlysgardinene */
  --sky-tint: 150, 235, 205;
  --sky-light: 225, 255, 240;
  --sky-curtain-1: 52, 240, 170;
  --sky-curtain-strength: 0.38;
  --sky-curtain-2: 24, 190, 230;
  --sky-curtain-3: 150, 255, 210;

  --haze-0: rgb(3 30 38 / 0);
  --haze-1: rgb(3 30 38 / 0.55);
  --haze-2: rgb(2 22 30 / 0.94);

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --top-h: 72px;
  /* Skjemakortet (papir) */
  --card-ink: #103442;
  --card-muted: #4c6369;
  --card-line: #d6dcd3;
  --card-field: #ffffff;
  --card-focus: #176b50;
  --card-ring: rgb(23 107 80 / 0.18);
  --card-chip-on: #103442;
  --card-err: #a3261b;
  --card-err-bg: #fbe9e5;
  --card-err-ring: rgb(163 38 27 / 0.16);
  --card-shadow: rgb(0 12 16 / 0.55);
  --card-tint: #e2efe7;
  --card-hover: rgb(16 52 66 / 0.18);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.32s;
}

/* ---------- Grunnlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--white); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.defs { position: absolute; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--mint); color: var(--navy); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }

/* Fuglen: hvert brett har sin overgang (linearGradient i symbolet ville gitt like id-er flere steder, så brettene
   tegnes med flate toner fra brettets lyse og mørke ende) */
.fb { stroke-width: 0.25; stroke-linejoin: round; }
.fb-1 { fill: var(--fb-1b); stroke: var(--fb-1b); }
.fb-2 { fill: var(--fb-2b); stroke: var(--fb-2b); }
.fb-3 { fill: var(--fb-1b); stroke: var(--fb-1b); }
.fb-4 { fill: var(--fb-2a); stroke: var(--fb-2a); }
.fb-5 { fill: var(--fb-1a); stroke: var(--fb-1a); }
.fb-6 { fill: var(--fb-6b); stroke: var(--fb-6b); }
.fb-7 { fill: var(--fb-7b); stroke: var(--fb-7b); }

/* ---------- Knapper ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn--mint { background: var(--mint); color: var(--navy); box-shadow: 0 10px 36px -10px var(--glow); }
.btn--mint:hover { background: var(--mint-hover); box-shadow: 0 14px 44px -10px var(--glow); }
.btn--glass { background: var(--glass-a); color: var(--white); border-color: var(--glass-edge); }
.btn--glass:hover { background: var(--glass-hover); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--block { width: 100%; }

/* ---------- Menyen ---------- */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding-top: env(safe-area-inset-top); }
.top__in { display: flex; align-items: center; gap: 24px; min-height: var(--top-h); }
.top__brand img { height: 24px; width: auto; }
.top__nav { display: flex; gap: 2px; margin-left: auto; }
.top__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 0.9375rem; font-weight: 500; color: var(--grey); text-decoration: none; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.top__nav a:hover { color: var(--white); background: var(--glass-b); }
.top__end { display: flex; align-items: center; gap: 10px; }
.top__tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 0.9375rem; font-weight: 600; color: var(--white); text-decoration: none; transition: background var(--dur) var(--ease); }
.top__tel:hover { background: var(--glass-b); }
.top__tel svg { width: 16px; height: 16px; color: var(--mint); }
.top__menu { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-a); color: var(--white); font: 600 0.9375rem var(--font-body); cursor: pointer; }
.top__menu svg { width: 18px; height: 18px; }

/* Den enkle linjen når helten er passert */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1; padding-top: env(safe-area-inset-top); background: var(--bar-bg); border-bottom: 1px solid var(--glass-edge); transform: translateY(-100%); visibility: hidden; transition: transform 0.4s var(--ease), visibility 0s linear 0.4s; }
.top[data-past] .bar { transform: none; visibility: visible; transition: transform 0.4s var(--ease), visibility 0s; }
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.bar__brand img { height: 28px; width: auto; }
.bar__end { display: flex; align-items: center; gap: 10px; }

/* Menyvinduet (telefon) */
.meny { width: min(100% - 24px, 420px); max-height: calc(100dvh - 24px); margin: 12px 12px auto auto; padding: 18px; border-radius: 24px; border: 1px solid var(--glass-edge); background: var(--deep-2); color: var(--white); box-shadow: 0 30px 80px var(--shadow); }
.meny::backdrop { background: var(--veil); }
.meny__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.meny__top img { height: 28px; width: auto; }
.meny__x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-edge); background: var(--glass-a); color: var(--white); cursor: pointer; }
.meny__x svg { width: 18px; height: 18px; }
.meny__links { display: grid; margin: 6px 0 18px; }
.meny__links a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--glass-edge); font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.meny__tel { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 8px; font-weight: 600; text-decoration: none; }
.meny__tel svg { width: 16px; height: 16px; color: var(--mint); }
.meny__lang { display: flex; justify-content: center; gap: 18px; margin-top: 10px; font-size: 0.9375rem; }
.meny__lang a { display: inline-flex; align-items: center; min-height: 44px; color: var(--grey); }

@media (max-width: 1023px) {
  .top__nav { display: none; }
  .top__end { margin-left: auto; }
  .top__end .top__tel, .top__end .btn { display: none; }
  .top__menu { display: inline-flex; }
}
@media (max-width: 639px) {
  .bar__end .top__tel { display: none; }
  .bar__end .top__menu { display: none; }
}
@media (min-width: 640px) and (max-width: 1023px) { .bar__end .top__menu { display: inline-flex; } }

/* ---------- Himmelen: Munins stjernefelt og nordlys, i Føniks' farger (script.js tegner i canvas.sky) ---------- */
.sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ---------- Helten ---------- */
.f { display: block; }
.hero { position: relative; overflow: hidden; padding: calc(var(--top-h) + clamp(32px, 7vh, 88px)) 0 clamp(48px, 7vh, 88px);
  background: radial-gradient(1200px 620px at 50% 0%, var(--glow-soft), var(--glow-0) 70%), linear-gradient(180deg, var(--night-top), var(--night) 72%); }
.hero__in { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-a); font-size: 0.9375rem; color: var(--white); text-decoration: none; transition: background var(--dur) var(--ease); }
.pill:hover { background: var(--glass-hover); }
.pill svg { width: 16px; height: 16px; }
.pill__tag { padding: 4px 11px; border-radius: 999px; background: var(--mint); color: var(--navy); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 640px) { .lead > span { display: block; } }
.note { margin-top: 16px; font-size: 0.9375rem; color: var(--grey); }
.note span + span::before { content: "·"; margin: 0 0.5em; }
.pill__short { display: none; }
.h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 1.6rem + 4.6vw, 5.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; color: var(--white); }
.h1 > span { display: block; }
.glow { background: linear-gradient(90deg, var(--white) 0%, var(--mint) 42%, var(--aqua) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 0.08em 0.18em 0.02em; margin: 0 -0.08em -0.18em -0.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { max-width: 40ch; margin-top: 22px; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--lead); }
.price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 8px; margin-top: 22px; color: var(--white); }
.price__from { font-size: 1.125rem; color: var(--grey); }
.price b { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; }
.price__unit { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.price__small { font-size: 0.9375rem; color: var(--grey); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--grey); }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { width: 16px; height: 16px; color: var(--mint); }

/* ---------- Scenen: en nettside som får nytt liv ---------- */
.scene { position: relative; width: min(1100px, 100%); aspect-ratio: 1100 / 650; margin: clamp(56px, 8vh, 88px) 0 0; isolation: isolate; container-type: inline-size; text-align: left; }
/* Kortet: en rund nattscene med en blek måne og to åser. Vinduet stiger opp av det og stikker over kanten, som i Munins film. */
.scene__card { position: absolute; left: 0; right: 0; top: 16%; bottom: 0; overflow: hidden; border-radius: 28px;
  background: radial-gradient(70% 80% at 20% 0%, var(--aurora-1), var(--aurora-0) 70%), radial-gradient(60% 80% at 94% 0%, var(--aurora-3), var(--aurora-0) 70%), linear-gradient(180deg, var(--scene-top), var(--scene-mid) 72%, var(--night-deep));
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top), 0 50px 120px -40px var(--shadow); }
.scene__moon { position: absolute; right: 3.6%; top: 12%; width: 7.4cqw; height: 7.4cqw; border-radius: 50%; background: radial-gradient(circle at 38% 34%, var(--white), var(--mint-soft) 58%, var(--mint) 100%); box-shadow: 0 0 4cqw 1cqw var(--glow-soft); }
.scene__hill { position: absolute; left: -8%; right: 34%; bottom: -16%; height: 42%; border-radius: 50%; background: var(--scene-mid); }
.scene__hill--2 { left: 38%; right: -12%; bottom: -22%; background: var(--night-deep); }
.scene__haze { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; z-index: 2; border-radius: 0 0 28px 28px; pointer-events: none;
  background: linear-gradient(180deg, var(--haze-0), var(--haze-1) 55%, var(--haze-2)); }
.win { position: absolute; left: 11.5%; right: 11.5%; top: 0; bottom: 0; z-index: 1; border-radius: 1.4cqw 1.4cqw 0 0; overflow: hidden; background: var(--deep-2); border: 1px solid var(--glass-edge); border-bottom: 0; box-shadow: 0 -1cqw 5cqw -1cqw var(--shadow); }
.win__bar { display: flex; align-items: center; gap: 0.6cqw; height: 4cqw; padding: 0 1.4cqw; background: var(--deep-3); }
.win__bar i { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: var(--grey-dim); }
.win__url { display: inline-flex; align-items: center; gap: 0.5cqw; margin: 0 auto; padding: 0.35cqw 1.4cqw; border-radius: 999px; background: var(--glass-a); font-size: 1.1cqw; color: var(--grey); }
.win__url svg { width: 1cqw; height: 1cqw; color: var(--mint); }
.win__view { position: relative; height: calc(100% - 4cqw); overflow: hidden; }

/* Den gamle siden: fast bredde (som 960 px den gangen) midt på en grå flate */
.old { position: absolute; inset: 0; overflow: hidden; background: repeating-linear-gradient(45deg, var(--old-page) 0 2px, var(--old-page-2) 2px 4px); color: var(--old-ink); font-family: Arial, Helvetica, sans-serif; }
.old__box { display: grid; grid-template-rows: auto auto minmax(13cqw, 1fr) auto auto auto; width: 84%; height: 100%; margin: 0 auto; background: var(--old-box); box-shadow: 0 0 1.2cqw var(--old-shade); }
.old__strip { display: flex; align-items: center; justify-content: space-between; height: 2.4cqw; padding: 0 1.6cqw; background: var(--old-strip); color: var(--old-strip-ink); font-size: 0.8cqw; }
.old__fb { display: grid; place-items: center; width: 1.5cqw; height: 1.5cqw; border-radius: 0.2cqw; background: var(--old-blue); color: var(--old-white); font: 700 1cqw Arial, sans-serif; font-style: normal; }
.old__head { display: flex; align-items: center; justify-content: space-between; height: 5.6cqw; padding: 0 1.6cqw; border-bottom: 1px solid var(--old-line); }
.old__logo { display: flex; align-items: center; gap: 0.7cqw; }
.old__logo svg { width: 2.6cqw; height: 2.6cqw; }
.old__drop { fill: var(--old-blue); }
.old__logo span { display: grid; line-height: 1.15; }
.old__logo b { font-size: 1.35cqw; letter-spacing: 0.02em; color: var(--old-head); }
.old__logo em { font-size: 0.8cqw; color: var(--old-ink); }
.old__nav { display: flex; gap: 1.5cqw; font-size: 0.8cqw; font-weight: 700; color: var(--old-head); }
.old__nav span { padding: 0.5cqw 0; }
.old__nav .on { color: var(--old-orange); border-bottom: 0.2cqw solid var(--old-orange); }
.old__slide { position: relative; min-height: 13cqw; overflow: hidden; }
.old__tiles { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, var(--old-grout) 0 0.2cqw, transparent 0.2cqw 3cqw), repeating-linear-gradient(90deg, var(--old-grout) 0 0.2cqw, var(--old-tile) 0.2cqw 3cqw); filter: blur(0.08cqw) saturate(0.6); }
.old__shade { position: absolute; inset: 0; background: var(--old-shade); }
.old__caption { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1cqw; color: var(--old-white); }
.old__caption b { font-size: 2.1cqw; font-weight: 400; letter-spacing: 0.18em; }
.old__caption em { padding: 0.5cqw 1.2cqw; background: var(--old-orange); font-size: 0.8cqw; font-style: normal; font-weight: 700; letter-spacing: 0.08em; }
.old__arr { position: absolute; top: 50%; left: 1cqw; translate: 0 -50%; font: 400 2.4cqw Arial, sans-serif; font-style: normal; color: var(--old-white); }
.old__arr--r { left: auto; right: 1cqw; }
.old__dots { position: absolute; left: 50%; bottom: 1cqw; translate: -50% 0; display: flex; gap: 0.5cqw; }
.old__dots i { width: 0.7cqw; height: 0.7cqw; border-radius: 50%; border: 1px solid var(--old-white); }
.old__dots .on { background: var(--old-white); }
.old__boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; padding: 2cqw 1.6cqw; }
.old__boxes div { display: grid; justify-items: center; gap: 0.55cqw; text-align: center; }
.old__ico { display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; margin-bottom: 0.3cqw; border-radius: 50%; background: var(--old-blue); }
.old__ico svg { width: 1.8cqw; height: 1.8cqw; fill: var(--old-white); }
.old__boxes b { font-size: 1cqw; letter-spacing: 0.06em; color: var(--old-head); }
.old__boxes i { width: 80%; height: 0.45cqw; background: var(--old-text-line); }
.old__boxes i + i { width: 60%; }
.old__boxes em { font-size: 0.8cqw; font-style: normal; color: var(--old-blue); }
.old__foot { padding: 1cqw 1.6cqw; background: var(--old-foot); color: var(--old-foot-ink); font-size: 0.75cqw; }
.old__more { display: grid; grid-template-columns: 2fr 1fr; gap: 2cqw; padding: 0 1.6cqw 2cqw; }
.old__welcome { display: grid; gap: 0.6cqw; align-content: start; padding-top: 1.4cqw; border-top: 1px solid var(--old-line); }
.old__welcome b { margin-bottom: 0.3cqw; font-size: 1.15cqw; color: var(--old-head); }
.old__welcome i { height: 0.45cqw; background: var(--old-text-line); }
.old__welcome i.short { width: 55%; }
.old__news { display: grid; gap: 0.5cqw; align-content: start; padding: 1.4cqw; background: var(--old-news); border: 1px solid var(--old-line); }
.old__news b { font-size: 0.85cqw; letter-spacing: 0.06em; color: var(--old-head); }
.old__news p { display: grid; font-size: 0.85cqw; color: var(--old-blue); text-decoration: underline; }
.old__news em { font-style: normal; font-size: 0.7cqw; color: var(--old-ink); text-decoration: none; }
.old__cookie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 1.2cqw; padding: 0.9cqw; background: var(--old-cookie); color: var(--old-white); font-size: 0.85cqw; }
.old__cookie em { padding: 0.3cqw 1cqw; background: var(--old-blue); font-style: normal; font-weight: 700; }

/* Den nye siden: slik Føniks lager dem. Mørk helt i Deep med mint og booking rett i helten, så lyse tjenestekort. */
.new { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--nw-paper); color: var(--nw-ink); font-family: var(--font-body); clip-path: inset(0 0 0 0); }
.nw-hero { position: relative; padding-bottom: 2.6cqw; color: var(--white); background: radial-gradient(60% 90% at 20% 0%, var(--nw-glow), var(--nw-glow-0) 70%), linear-gradient(160deg, var(--nw-hero-1), var(--nw-hero-2)); }
.nw-nav { display: flex; align-items: center; gap: 2cqw; height: 5cqw; padding: 0 9cqw 0 2.6cqw; border-bottom: 1px solid var(--nw-line-dark); font-size: 1.05cqw; color: var(--grey); }
.nw-logo { display: inline-flex; align-items: center; gap: 0.6cqw; margin-right: auto; font-family: var(--font-display); font-size: 1.45cqw; font-weight: 800; letter-spacing: -0.02em; color: var(--white); }
.nw-logo svg { width: 1.8cqw; height: 1.8cqw; fill: var(--mint); }
.nw-nav em { padding: 0.55cqw 1.2cqw; border-radius: 999px; background: var(--mint); color: var(--navy); font-style: normal; font-weight: 700; }
.nw-main { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3cqw; align-items: center; padding: 3.2cqw 2.6cqw 0; }
.nw-text { display: grid; justify-items: start; gap: 1.2cqw; }
.nw-chip { display: inline-flex; align-items: center; gap: 0.6cqw; padding: 0.4cqw 1cqw; border-radius: 999px; border: 1px solid var(--nw-line-dark); background: var(--glass-a); font-size: 0.95cqw; color: var(--white); }
.nw-chip i { width: 0.7cqw; height: 0.7cqw; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0.8cqw var(--glow); }
.nw-h { font-family: var(--font-display); font-size: 3.3cqw; font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; }
.nw-h span { background: linear-gradient(90deg, var(--mint), var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 0.06em 0.16em 0; margin: 0 -0.06em -0.16em 0; }
.nw-sub { font-size: 1.2cqw; color: var(--grey); }
.nw-btns { display: flex; gap: 0.8cqw; font-size: 1.1cqw; font-weight: 700; }
.nw-btns em { padding: 0.9cqw 1.7cqw; border-radius: 999px; background: var(--mint); color: var(--navy); font-style: normal; box-shadow: 0 1cqw 2.4cqw -1cqw var(--glow); }
.nw-btns span { padding: 0.9cqw 1.7cqw; border-radius: 999px; border: 1px solid var(--nw-line-dark); background: var(--glass-a); }
.nw-ticks { display: flex; gap: 1.6cqw; font-size: 0.95cqw; color: var(--grey); }
.nw-ticks span::before { content: "✓"; margin-right: 0.4cqw; color: var(--mint); }
.nw-book { display: grid; gap: 1cqw; padding: 1.6cqw; border-radius: 1.4cqw; background: var(--nw-card); color: var(--nw-ink); box-shadow: 0 2cqw 4cqw -1.6cqw var(--shadow); }
.nw-book__h { font-family: var(--font-display); font-size: 1.35cqw; font-weight: 800; }
.nw-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6cqw; }
.nw-days span { display: grid; justify-items: center; padding: 0.6cqw 0; border-radius: 0.8cqw; border: 1px solid var(--nw-line); font-family: var(--font-display); font-size: 1.25cqw; font-weight: 800; }
.nw-days small { font-family: var(--font-body); font-size: 0.8cqw; font-weight: 500; color: var(--nw-muted); }
.nw-days .on { background: var(--nw-ink); border-color: var(--nw-ink); color: var(--white); }
.nw-days .on small { color: var(--mint); }
.nw-times { display: flex; gap: 0.6cqw; }
.nw-times span { flex: 1; padding: 0.55cqw 0; border-radius: 999px; border: 1px solid var(--nw-line); text-align: center; font-size: 0.95cqw; font-weight: 600; }
.nw-times .on { background: var(--nw-mint-tint); border-color: var(--mint); }
.nw-field { padding: 0.75cqw 1cqw; border-radius: 0.8cqw; border: 1px solid var(--nw-line); font-size: 0.95cqw; color: var(--nw-muted); }
.nw-send { padding: 0.85cqw; border-radius: 999px; background: var(--mint); color: var(--navy); text-align: center; font-size: 1.05cqw; font-weight: 700; }
.nw-lower { display: grid; align-content: start; gap: 1.4cqw; padding: 2cqw 2.6cqw; }
.nw-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; align-content: start; }
.nw-sec { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.6cqw; }
.nw-sec b { font-family: var(--font-display); font-size: 1.4cqw; font-weight: 800; letter-spacing: -0.02em; }
.nw-sec span { font-size: 0.95cqw; font-weight: 600; color: var(--green); }
.nw-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; }
.nw-jobs > span { display: grid; gap: 0.3cqw; }
.nw-photo { display: block; height: 9cqw; margin-bottom: 0.4cqw; border-radius: 1.1cqw; }
.nw-photo--bad { background: radial-gradient(40% 50% at 70% 35%, var(--nw-p-light), transparent 70%), repeating-linear-gradient(0deg, var(--nw-p-grout) 0 0.15cqw, transparent 0.15cqw 2.2cqw), repeating-linear-gradient(90deg, var(--nw-p-grout) 0 0.15cqw, var(--nw-p-tile) 0.15cqw 2.2cqw); }
.nw-photo--varme { background: radial-gradient(30% 40% at 30% 40%, var(--nw-p-sun), transparent 70%), linear-gradient(160deg, var(--nw-p-warm-1), var(--nw-p-warm-2)); }
.nw-photo--ror { background: linear-gradient(90deg, transparent 18%, var(--nw-p-pipe) 18% 22%, transparent 22% 48%, var(--nw-p-pipe-2) 48% 51%, transparent 51%), linear-gradient(180deg, var(--nw-p-cool-1), var(--nw-p-cool-2)); }
.nw-jobs b { font-family: var(--font-display); font-size: 1.15cqw; }
.nw-jobs em { font-size: 0.9cqw; font-style: normal; color: var(--nw-muted); }
.nw-services div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.4cqw 1cqw; padding: 1.2cqw; border-radius: 1.1cqw; background: var(--nw-card); border: 1px solid var(--nw-line); }
.nw-ico { grid-row: span 2; display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 0.9cqw; background: var(--nw-mint-tint); }
.nw-ico svg { width: 1.7cqw; height: 1.7cqw; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nw-services b { font-family: var(--font-display); font-size: 1.15cqw; }
.nw-services i { height: 0.5cqw; width: 80%; border-radius: 1cqw; background: var(--nw-line); }

/* Mintlinjen som løfter den nye siden opp, med fuglen på vei opp */
.scan { position: absolute; inset: 0; pointer-events: none; transform: translateY(100%); visibility: hidden; }
.scan::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: linear-gradient(90deg, var(--glow-0), var(--mint) 20%, var(--mint-soft) 80%, var(--mint)); box-shadow: 0 0 1.6cqw 0.4cqw var(--glow); }
.scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9cqw; background: linear-gradient(180deg, var(--glow-soft), var(--glow-0)); }
.scan__bird { position: absolute; z-index: 1; right: 4cqw; top: -5cqw; width: 4.6cqw; height: 4.6cqw; filter: drop-shadow(0 0 1.2cqw var(--glow)); }

/* Årstallet, stempelet og det som følger med */
.year { position: absolute; left: 2.6cqw; bottom: 3cqw; z-index: 3; display: flex; align-items: center; gap: 0.8cqw; padding: 0.6cqw 0.6cqw 0.6cqw 1.4cqw; border-radius: 999px; background: var(--veil); border: 1px solid var(--glass-edge); font-size: 1.2cqw; color: var(--grey); }
.year b { display: grid; place-items: center; min-width: 5.4cqw; padding: 0.35cqw 0.9cqw; border-radius: 999px; font-family: var(--font-display); font-size: 1.5cqw; font-weight: 800; }
.year__old { background: var(--glass-a); color: var(--white); }
.year .year__new { display: none; background: var(--mint); color: var(--navy); }
.stamp { position: absolute; right: 7cqw; top: -2.6cqw; z-index: 3; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--mint); color: var(--navy); border: 0.35cqw solid var(--deep); box-shadow: 0 1.2cqw 3cqw -0.6cqw var(--shadow);
  font-family: var(--font-display); font-size: 1.7cqw; font-weight: 800; line-height: 1; text-align: center; transform: rotate(-12deg); visibility: hidden; filter: opacity(0); }
.chips { position: absolute; right: 2.6cqw; bottom: 12cqw; z-index: 3; display: grid; gap: 0.9cqw; margin: 0; padding: 0; list-style: none; }
.chips li { display: flex; align-items: center; gap: 0.8cqw; padding: 0.9cqw 1.6cqw 0.9cqw 1.1cqw; border-radius: 999px; background: var(--veil); border: 1px solid var(--glass-edge); box-shadow: 0 1.2cqw 3cqw -1cqw var(--shadow); font-size: 1.25cqw; font-weight: 600; color: var(--white); visibility: hidden; transform: translateX(1.6cqw); filter: opacity(0); }
.chips svg { width: 1.4cqw; height: 1.4cqw; padding: 0.25cqw; border-radius: 50%; background: var(--mint); color: var(--navy); }

/* Stegene (script.js): 0 gammel side, 1 linjen løfter den nye opp, 2 nytt liv, 3 det som følger med */
.scene[data-step="0"] .new { clip-path: inset(100% 0 0 0); }
.scene[data-step="1"] .new { clip-path: inset(0 0 0 0); transition: clip-path 1.8s cubic-bezier(0.45, 0, 0.25, 1); }
.scene[data-step="1"] .scan { visibility: visible; transform: translateY(0); transition: transform 1.8s cubic-bezier(0.45, 0, 0.25, 1); }
.scene[data-step="2"] .year__old, .scene[data-step="3"] .year__old { display: none; }
.scene[data-step="2"] .year .year__new, .scene[data-step="3"] .year .year__new { display: grid; }
.scene[data-step="2"] .stamp, .scene[data-step="3"] .stamp { visibility: visible; filter: opacity(1); transform: rotate(-8deg); transition: filter 0.5s var(--ease), transform 0.6s var(--ease); }
.scene[data-step="3"] .chips li { visibility: visible; filter: opacity(1); transform: none; transition: filter 0.5s var(--ease), transform 0.6s var(--ease); }
.scene[data-step="3"] .chips li:nth-child(2) { transition-delay: 0.25s; }
.scene[data-step="3"] .chips li:nth-child(3) { transition-delay: 0.5s; }
.scene .win__view { transition: filter 0.6s var(--ease); }
.scene[data-blur] .win__view, .scene[data-blur] .year, .scene[data-blur] .stamp, .scene[data-blur] .chips { filter: blur(1.2cqw) opacity(0.6); transition: filter 0.6s var(--ease); }
.scene[data-instant] *, .scene[data-instant] { transition: none; }

/* ---------- Bevis: ekte nettsider rett under helten ---------- */
.proof { position: relative; padding: clamp(40px, 6vh, 72px) 0 clamp(72px, 10vh, 120px); }
.proof__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 22px; }
.proof__h { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; }
.proof__note { font-size: 0.9375rem; color: var(--grey); }
.sites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.sites a, .sites__item { display: grid; gap: 4px; text-decoration: none; }
.sites__shot { display: block; overflow: hidden; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--glass-edge); background: var(--deep-2); box-shadow: 0 24px 50px -30px var(--shadow); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sites__shot img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.sites a:hover .sites__shot { transform: translateY(-4px); border-color: var(--mint); }
.sites b { font-size: 1rem; font-weight: 700; color: var(--white); }
.sites__url { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9375rem; color: var(--grey); }
.sites__url svg { width: 14px; height: 14px; }
@media (max-width: 1023px) { .sites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .sites { display: flex; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sites::-webkit-scrollbar { display: none; }
  .sites li { flex: 0 0 78%; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
}

/* Plassen til runde 2–5 */
.next { padding: 48px 0 96px; }
.next__in { padding: 28px; border-radius: 20px; border: 1px dashed var(--glass-edge); color: var(--grey); text-align: center; }

/* Bunnen */
.foot { border-top: 1px solid var(--glass-edge); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 0.875rem; color: var(--grey); }

/* ---------- Telefon ---------- */
@media (max-width: 639px) {
  .h1 { font-size: clamp(1.75rem, 10.5vw, 3rem); }
  .btn { white-space: normal; text-align: center; }
  .price b { font-size: clamp(1.6rem, 9vw, 2.75rem); }
  .cta { width: 100%; }
  .cta .btn { width: 100%; }
  .trust { display: grid; justify-content: center; gap: 4px; }
  .pill { font-size: 0.875rem; gap: 8px; }
  .pill > svg { display: none; }
  .pill__long { display: none; }
  .pill__short { display: inline; }
  .note { display: grid; gap: 2px; }
  .note span + span::before { content: none; }
  /* Mobil: toppfeltet bare med prisen, og to av løftene (Nicolay, 24. oktober 2026) */
  .hero .lead span + span, .hero .note span:first-child { display: none; }
  .scene { aspect-ratio: 1 / 1.12; }
  .scene__card { top: 12%; border-radius: 22px; }
  .scene__haze { border-radius: 0 0 22px 22px; height: 20%; }
  .scene__moon { display: none; }
  .win { left: 5%; right: 5%; border-radius: 3cqw 3cqw 0 0; }
  .win__bar { height: 7cqw; gap: 1.2cqw; padding: 0 3cqw; }
  .win__bar i { width: 1.8cqw; height: 1.8cqw; }
  .win__url { font-size: 2.6cqw; padding: 0.8cqw 3cqw; gap: 1cqw; }
  .win__url svg { width: 2.2cqw; height: 2.2cqw; }
  .win__view { height: calc(100% - 7cqw); }
  /* Den nye siden viser sin egen mobilutgave; den gamle står klemt, slik gamle sider gjør på telefon */
  .nw-nav { height: 10cqw; padding: 0 22cqw 0 4cqw; font-size: 2.6cqw; }
  .nw-logo { font-size: 3.6cqw; gap: 1.4cqw; }
  .nw-logo svg { width: 4cqw; height: 4cqw; }
  .nw-nav span { display: none; }
  .nw-nav em { padding: 1.2cqw 2.4cqw; }
  .nw-main { grid-template-columns: 1fr; gap: 4cqw; padding: 5cqw 4cqw 0; }
  .nw-text { gap: 2.4cqw; }
  .nw-chip { font-size: 2.6cqw; gap: 1.4cqw; padding: 1cqw 2.4cqw; }
  .nw-chip i { width: 1.8cqw; height: 1.8cqw; }
  .nw-h { font-size: 7.4cqw; }
  .nw-sub { font-size: 3cqw; }
  .nw-btns { gap: 2cqw; font-size: 2.8cqw; }
  .nw-btns em, .nw-btns span { padding: 2.2cqw 3.6cqw; }
  .nw-ticks, .nw-book, .nw-services { display: none; }
  .year { top: auto; bottom: 4cqw; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 3cqw; gap: 2cqw; padding: 1.4cqw 1.4cqw 1.4cqw 3.4cqw; }
  .year b { font-size: 3.6cqw; min-width: 13cqw; padding: 0.8cqw 2cqw; }
  .stamp { width: 19cqw; height: 19cqw; font-size: 3.6cqw; right: 1cqw; top: -5cqw; border-width: 0.8cqw; }
  .chips { left: 8cqw; right: auto; bottom: 14cqw; gap: 1.6cqw; }
  .chips li { font-size: 2.9cqw; gap: 1.6cqw; padding: 1.5cqw 3.2cqw 1.5cqw 1.8cqw; }
  .chips svg { width: 3.2cqw; height: 3.2cqw; padding: 0.5cqw; }
  .chips li:nth-child(3) { display: none; }
}

/* ---------- Felles for seksjonene ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.h2 { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; color: var(--white); text-wrap: balance; }
.h2 .glow { display: block; }
.sub { margin-top: 14px; max-width: 46ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; color: var(--grey); }
html[data-js] .reveal:not([data-shown]) { opacity: 0; transform: translateY(16px); }
.reveal { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
@media (prefers-reduced-motion: reduce) { html[data-js] .reveal:not([data-shown]) { opacity: 1; transform: none; } .reveal { transition: none; } }

/* ---------- Runde 2: Hvor gammel er nettsiden deres? ---------- */
.age { position: relative; padding: clamp(72px, 11vh, 128px) 0; }
.age__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.years { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; border: 0; }
.years label { position: relative; cursor: pointer; }
.years input { position: absolute; inset: 0; margin: 0; -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer; }
.years span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-b); font-weight: 600; font-size: 0.9375rem; color: var(--grey); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.years label:hover span { color: var(--white); background: var(--glass-a); }
.years input:checked + span { background: var(--mint); border-color: transparent; color: var(--navy); box-shadow: 0 10px 30px -12px var(--glow); }
.years input:focus-visible + span { outline: 3px solid var(--mint); outline-offset: 3px; }
.years__hint { margin-top: 14px; font-size: 0.9375rem; color: var(--grey-dim); }
.age-card { position: relative; overflow: hidden; display: grid; gap: 22px; padding: clamp(24px, 3.4vw, 40px); border-radius: 28px;
  background: radial-gradient(circle at 100% 0%, var(--glow-soft), var(--glow-0) 60%), linear-gradient(180deg, var(--glass-a), var(--glass-b));
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top), 0 40px 100px -48px var(--shadow); }
.age-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
.age-card__n { font-family: var(--font-display); font-size: clamp(3.4rem, 2.4rem + 3vw, 4.75rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.05em;
  background: linear-gradient(90deg, var(--mint), var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 0.06em 0.12em 0; margin-bottom: -0.12em; }
.age-card__n small { margin-left: 6px; font-size: 1.375rem; letter-spacing: -0.01em; }
.age-card__hook { flex: 1 1 220px; font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--white); }
.age-card__bar { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; font-weight: 600; color: var(--grey); }
.age-card__track { position: relative; flex: 1; height: 4px; border-radius: 4px; background: var(--glass-edge); }
.age-card__fill { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, var(--green), var(--mint)); transform-origin: left center; }
.age-card__dots i { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--night), 0 0 14px var(--glow); }
.age-card__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.age-card__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.age-card__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(180deg, var(--deep-3), var(--deep-2)); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top); color: var(--mint); }
.age-card__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.age-card__list p { font-size: 1rem; line-height: 1.5; color: var(--white); }
.age-card__list time { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--mint); }
.age-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-top: 20px; border-top: 1px solid var(--glass-edge); }
.age-card__punch { flex: 1 1 260px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--white); }
@media (min-width: 1000px) { .age__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---------- Runde 2: Møt Føniks ---------- */
.meet { position: relative; padding: clamp(64px, 10vh, 112px) 0 clamp(80px, 12vh, 136px); overflow-x: clip; }
.meet__head { text-align: center; }
.meet__head .h2 { max-width: 18ch; margin-inline: auto; }
.meet__stage { position: relative; margin-top: clamp(32px, 5vh, 56px); display: grid; justify-items: center; gap: 36px; }
.meet__stars { display: none; }
.meet__stars circle { fill: var(--mint-soft); opacity: 0.5; }
.bird { display: block; width: min(340px, 82vw); height: auto; overflow: visible; }
.gs-g { stop-color: var(--fb-1a); } .gs-m { stop-color: var(--fb-1b); } .gs-gd { stop-color: var(--fb-2a); } .gs-ml { stop-color: var(--fb-2b); }
.gs-gdd { stop-color: var(--fb-6a); } .gs-gm { stop-color: var(--fb-6b); } .gs-s { stop-color: var(--fb-7b); }
.gs-orb1 { stop-color: var(--orb-1); } .gs-orb2 { stop-color: var(--orb-2); } .gs-orb0 { stop-color: var(--orb-0); }
.gs-sh { stop-color: var(--sheen); } .gs-sh0 { stop-color: var(--sheen-0); }
.bird__ring { fill: none; stroke: var(--glass-edge); stroke-width: 0.45; }
.bird__wing { transform-box: fill-box; transform-origin: 100% 100%; }
.bird__tail { transform-box: fill-box; transform-origin: 100% 0%; }
.bird__sheen { transform-box: fill-box; transform-origin: center; transform: skewX(-20deg); }
.feats { list-style: none; margin: 0; padding: 0; width: 100%; }
.feat { display: grid; }
.feat__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--mint);
  background: radial-gradient(120% 90% at 50% 0%, var(--glow-soft), var(--glow-0) 60%), linear-gradient(180deg, var(--deep-3), var(--deep-2));
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top), 0 18px 36px -20px var(--glow);
  transition: translate var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.feat__ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat b { font-family: var(--font-display); font-size: 1.1875rem; letter-spacing: -0.01em; color: var(--white); }
.cap { display: grid; font-size: 0.9375rem; line-height: 1.45; color: var(--grey); }
.cap > span { white-space: nowrap; }
.feat:hover .feat__ico { translate: 0 -4px; border-color: var(--mint); }
@media (max-width: 1099px) {
  .feats { max-width: 760px; display: grid; gap: 22px 40px; }
  .feat { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; align-items: center; text-align: left; }
  .feat__ico { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 17px; }
  .feat b { align-self: end; }
  .feat .cap { align-self: start; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat:last-child { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 699px) { .feats { max-width: 520px; } .cap > span { white-space: normal; } }
@media (min-width: 1100px) {
  .meet__stage { --orb: clamp(460px, 38vw, 560px); display: block; height: max(calc(var(--orb) + 20px), 560px); }
  .meet__stars { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .bird { position: absolute; left: 50%; top: 50%; width: var(--orb); translate: -50% -50%; }
  .feats { position: absolute; inset: 0; }
  .feat { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; justify-items: center; text-align: center; }
  .feat b { margin-top: 16px; }
  .feat .cap { margin-top: 4px; }
  .feat:nth-child(1) { --x: 19%; --y: 13%; }
  .feat:nth-child(2) { --x: 85%; --y: 28%; }
  .feat:nth-child(3) { --x: 10%; --y: 50%; }
  .feat:nth-child(4) { --x: 85%; --y: 72%; }
  .feat:nth-child(5) { --x: 19%; --y: 87%; }
  .feat:nth-child(odd) .feat__ico { rotate: -4deg; }
  .feat:nth-child(even) .feat__ico { rotate: 4deg; }
  .feat.reveal:nth-child(2) { transition-delay: 0.1s; } .feat.reveal:nth-child(3) { transition-delay: 0.2s; }
  .feat.reveal:nth-child(4) { transition-delay: 0.3s; } .feat.reveal:nth-child(5) { transition-delay: 0.4s; }
}
.quiet { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 36px; margin-top: clamp(64px, 9vh, 104px); padding: 36px 0 0; list-style: none; }
.quiet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--glow-0), var(--glass-edge) 20%, var(--glass-edge) 80%, var(--glow-0)); }
.quiet li { display: flex; align-items: flex-start; gap: 14px; }
.quiet svg { flex: none; width: 26px; height: 26px; margin-top: 2px; fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quiet p { display: grid; gap: 2px; }
.quiet b { font-size: 0.9375rem; font-weight: 700; color: var(--white); }
.quiet span { font-size: 0.9375rem; line-height: 1.5; color: var(--grey); }
@media (min-width: 700px) { .quiet { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; } }
@media (min-width: 1240px) { .quiet { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--wrap); } }
@media (prefers-reduced-motion: no-preference) {
  .bird__orb { animation: orb 9s ease-in-out infinite alternate; }
  .bird__fly { animation: fly 7s ease-in-out infinite alternate; }
  .bird__wing { animation: wing 6s ease-in-out infinite; }
  .bird__tail { animation: tail 7s ease-in-out infinite alternate; }
  .bird__sheen { animation: sheen 10s linear 1.5s infinite; }
  .meet__stars .tw { animation: twinkle 4s ease-in-out infinite alternate; }
  .meet__stars .tw--2 { animation-duration: 5.2s; animation-delay: -1.7s; } .meet__stars .tw--3 { animation-duration: 4.6s; animation-delay: -3s; } .meet__stars .tw--4 { animation-duration: 6s; animation-delay: -2.2s; }
  @media (min-width: 1100px) {
    .feat__ico { animation: float 4.6s ease-in-out infinite alternate; }
    .feat:nth-child(2) .feat__ico { animation-duration: 5.3s; animation-delay: -2.1s; } .feat:nth-child(3) .feat__ico { animation-duration: 5s; animation-delay: -3.4s; }
    .feat:nth-child(4) .feat__ico { animation-duration: 4.2s; animation-delay: -1.2s; } .feat:nth-child(5) .feat__ico { animation-duration: 5.6s; animation-delay: -4s; }
  }
  .meet[data-idle] :is(.bird__orb, .bird__fly, .bird__wing, .bird__tail, .bird__sheen, .tw, .feat__ico) { animation-play-state: paused; }
}
@keyframes orb { from { opacity: 0.65; } to { opacity: 1; } }
@keyframes fly { from { transform: translateY(3px); } to { transform: translateY(-4px); } }
@keyframes wing { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } }
@keyframes tail { from { transform: rotate(-2deg); } to { transform: rotate(3deg); } }
@keyframes sheen { 0% { transform: translateX(0) skewX(-20deg); } 26%, 100% { transform: translateX(150px) skewX(-20deg); } }
@keyframes float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes twinkle { from { opacity: 0.2; } to { opacity: 0.85; } }

/* ---------- Runde 3: Slik fungerer det ---------- */
.how { position: relative; padding: clamp(80px, 12vh, 136px) 0 clamp(72px, 10vh, 120px); overflow-x: clip; }
.how__head { display: grid; justify-items: center; text-align: center; }
.how__head .h2 { max-width: 20ch; }
.steps { display: grid; gap: clamp(20px, 3vw, 32px); margin-top: clamp(40px, 6vh, 64px); }
.step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; padding: clamp(26px, 4vw, 56px); border-radius: 28px;
  background: radial-gradient(70% 90% at 0% 0%, var(--tone), var(--tone-0) 70%), linear-gradient(180deg, var(--glass-a), var(--glass-b));
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top); }
.step--a { --tone: var(--tone-a); }
.step--b { --tone: var(--tone-b); }
.step--c { --tone: var(--tone-c); }
.step__text { display: grid; justify-items: start; gap: 14px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); }
.kicker span { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--glass-a); border: 1px solid var(--glass-edge); letter-spacing: 0.04em; color: var(--white); }
.step--c .kicker { color: var(--ember); }
.h3 { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: var(--white); text-wrap: balance; }
.step__p { max-width: 44ch; font-size: 1.0625rem; line-height: 1.55; color: var(--grey); }
.point { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.9375rem; font-weight: 600; color: var(--white); }
.point svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--mint); color: var(--navy); }
.step__viz { position: relative; container-type: inline-size; }
@media (min-width: 900px) {
  .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .step .step__viz { margin-right: calc(-1 * clamp(26px, 4vw, 56px) - clamp(20px, 3vw, 44px)); }
  .step--flip .step__text { order: 2; }
  .step--flip .step__viz { margin-right: 0; margin-left: calc(-1 * clamp(26px, 4vw, 56px) - clamp(20px, 3vw, 44px)); }
}

/* Små nettsider i visualiseringene (i cqw av visualiseringen) */
.vz-win { overflow: hidden; border-radius: 2.4cqw; border: 1px solid var(--glass-edge); background: var(--deep-2); box-shadow: 0 6cqw 12cqw -4cqw var(--shadow); }
.vz-win__bar { display: flex; align-items: center; gap: 1cqw; height: 6cqw; padding: 0 2.4cqw; background: var(--deep-3); }
.vz-win__bar i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--grey-dim); }
.vz-win__bar span { margin: 0 auto; padding: 0.5cqw 2.2cqw; border-radius: 999px; background: var(--glass-a); font-size: 1.8cqw; color: var(--grey); }
.vz-site { display: grid; gap: 3cqw; padding: 4cqw 5cqw 7cqw; background: radial-gradient(60% 90% at 20% 0%, var(--nw-glow), var(--nw-glow-0) 70%), linear-gradient(160deg, var(--nw-hero-1), var(--nw-hero-2)); color: var(--white); }
.vz-site__nav { display: flex; align-items: center; gap: 2.4cqw; margin-bottom: 1.4cqw; font-family: var(--font-display); font-size: 2.6cqw; font-weight: 800; }
.vz-site__nav b { margin-right: auto; }
.vz-site__nav span { width: 6cqw; height: 1cqw; border-radius: 1cqw; background: var(--glass-edge); }
.vz-site__nav em { width: 12cqw; height: 3.8cqw; border-radius: 999px; background: var(--mint); }
.vz-site__h { font-family: var(--font-display); font-size: 6.4cqw; font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; }
.vz-site__h span { color: var(--mint); }
.vz-site__l { width: 70%; height: 1.4cqw; border-radius: 1cqw; background: var(--glass-edge); }
.vz-site__l--s { width: 48%; }
.vz-site__b { display: flex; gap: 1.6cqw; margin-top: 1cqw; }
.vz-site__b em { width: 20cqw; height: 5.4cqw; border-radius: 999px; background: var(--mint); }
.vz-site__b span { width: 14cqw; height: 5.4cqw; border-radius: 999px; border: 1px solid var(--glass-edge); }

/* 01 Utkastet: utkastet, et stempel og valget */
.vz-draft { position: relative; padding-top: 2cqw; }
.vz-stamp { position: absolute; right: -2cqw; top: -2cqw; padding: 1.8cqw 3.6cqw; border-radius: 999px; background: var(--mint); color: var(--navy); font-family: var(--font-display); font-size: 3.4cqw; font-weight: 800; transform: rotate(6deg); box-shadow: 0 2cqw 5cqw -2cqw var(--shadow); }
.vz-choice { position: absolute; left: 8cqw; right: 8cqw; bottom: 0; display: grid; gap: 1.6cqw; padding: 3.2cqw 3.6cqw; border-radius: 3cqw; background: var(--nw-card); color: var(--nw-ink); box-shadow: 0 4cqw 8cqw -3cqw var(--shadow); }
.vz-choice > p:first-child { font-family: var(--font-display); font-size: 3cqw; font-weight: 800; }
.vz-choice__btns { display: flex; gap: 1.6cqw; font-size: 2.2cqw; font-weight: 700; }
.vz-choice__btns em { flex: 1.3; padding: 1.8cqw; border-radius: 999px; background: var(--mint); color: var(--navy); font-style: normal; text-align: center; }
.vz-choice__btns span { flex: 1; padding: 1.8cqw; border-radius: 999px; border: 1px solid var(--nw-line); text-align: center; }
.vz-choice__note { font-size: 2cqw; color: var(--nw-muted); }

/* 02 Driften: én pris, samme hver måned i 24 måneder */
.vz-run { display: grid; justify-items: center; gap: 4cqw; padding: 9cqw 6cqw; border-radius: 3cqw; text-align: center;
  background: radial-gradient(70% 70% at 50% 0%, var(--tone-b), var(--tone-0) 70%), linear-gradient(180deg, var(--deep-3), var(--deep-2));
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top), 0 6cqw 12cqw -4cqw var(--shadow); }
.vz-run__price { font-family: var(--font-display); font-size: 13cqw; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--white); }
.vz-run__price small { font-size: max(0.9375rem, 4cqw); font-weight: 700; letter-spacing: -0.01em; color: var(--grey); }
.vz-run__dots { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1.2cqw; width: 100%; }
.vz-run__dots i { aspect-ratio: 1; border-radius: 50%; background: var(--mint); box-shadow: 0 0 1.4cqw var(--glow-soft); }
.vz-run__l { font-size: max(0.875rem, 3cqw); color: var(--grey); }

/* 03 Fornyelsen: valget i teksten, nettsiden i visualiseringen */
.seg { display: inline-flex; gap: 4px; margin-top: 6px; padding: 5px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-b); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; margin: 0; -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; font-size: 0.9375rem; font-weight: 700; color: var(--grey); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg input:checked + span { background: var(--mint); color: var(--navy); }
.seg input:focus-visible + span { outline: 3px solid var(--mint); outline-offset: 2px; }
.seg__desc { max-width: 46ch; font-size: 1rem; line-height: 1.55; color: var(--grey); }
.seg__desc b { display: block; margin-bottom: 2px; color: var(--white); }
.step--c[data-mode="ny"] .seg__desc--opp, .step--c[data-mode="opp"] .seg__desc--ny { display: none; }
.vz-renew { position: relative; padding-top: 2cqw; }
.vz-ed { position: relative; display: grid; overflow: hidden; }
.vz-ed > .vz-site { grid-area: 1 / 1; }
.vz-site--b { background: var(--ed-b-paper); color: var(--ed-b-ink); }
.vz-site--b .vz-site__h span { color: var(--ed-b-accent); }
.vz-site--b .vz-site__h { max-width: 58%; }
.vz-site--b .vz-site__nav span, .vz-site--b .vz-site__l { background: var(--nw-line); }
.vz-site--b .vz-site__nav em, .vz-site--b .vz-site__b em { background: var(--ed-b-accent); }
.vz-site--b .vz-site__b span { border-color: var(--nw-line); }
.vz-site__art { position: absolute; right: 5cqw; top: 14cqw; width: 24cqw; height: 20cqw; border-radius: 3cqw; background: radial-gradient(circle at 70% 30%, var(--ed-b-art-1), var(--ed-b-art-2)); }
.vz-site--b { position: relative; }
.step--c[data-mode="opp"] .vz-site--b { visibility: hidden; }
.step--c[data-mode="ny"] .vz-site--a { visibility: hidden; }
.vz-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--glow-0), var(--mint) 20%, var(--mint-soft) 80%, var(--glow-0)); box-shadow: 0 0 2.4cqw 0.6cqw var(--glow); visibility: hidden; }
.vz-badge { position: absolute; right: -2cqw; top: -2cqw; display: grid; place-items: center; width: 17cqw; height: 17cqw; border-radius: 50%; background: var(--mint); color: var(--navy); border: 0.7cqw solid var(--night); font-family: var(--font-display); font-size: 3.2cqw; font-weight: 800; text-align: center; line-height: 1; transform: rotate(-10deg); box-shadow: 0 2cqw 5cqw -2cqw var(--shadow); }
.step--c[data-mode="ny"] .vz-badge--opp, .step--c[data-mode="opp"] .vz-badge--ny { display: none; }

/* Under kortene: det som alltid er med, halv pris og at fornyelsen er frivillig */
.renew { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 64px; margin-top: clamp(48px, 7vh, 80px); padding-top: 36px; }
.renew::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--glow-0), var(--glass-edge) 20%, var(--glass-edge) 80%, var(--glow-0)); }
.renew__label { margin-bottom: 14px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.renew__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.renew__chips li { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--white); }
.renew__chips svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--mint); color: var(--navy); }
.renew__half > p:first-child { font-size: 1.0625rem; line-height: 1.55; color: var(--grey); }
.renew__half b { color: var(--white); }
.renew__line { position: relative; height: 4px; margin: 26px 0 40px; border-radius: 4px; background: var(--glass-edge); }
.renew__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 4px; background: linear-gradient(90deg, var(--green), var(--mint)); }
.renew__dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px var(--glow-soft), 0 0 18px var(--glow); }
.renew__line p { position: absolute; left: 0; right: 0; top: 14px; display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--grey); }
.renew__mid { color: var(--mint); font-weight: 700; }
.renew__note { font-size: 0.875rem; line-height: 1.55; color: var(--grey-dim); }
.loop { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: clamp(40px, 6vh, 64px); font-family: var(--font-display); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); font-weight: 700; color: var(--white); text-align: center; }
.loop svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1000px) { .renew { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 639px) { .renew__chips { grid-template-columns: 1fr; } .seg { display: grid; width: 100%; border-radius: 24px; } .seg span { justify-content: center; width: 100%; } }

/* ---------- Runde 3b (Nicolay: «both too simple, and too busy»): tre like fliser side om side, hver med ett ekte bilde
   øverst (et utkast med varsel, to varsler fra nettsiden, to utgaver av siden) og en overskrift og én setning under. ---------- */
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: clamp(40px, 6vh, 64px); }
.tile { display: grid; align-content: start; overflow: hidden; border-radius: 28px;
  background: radial-gradient(90% 60% at 50% 0%, var(--tone), var(--tone-0) 70%), linear-gradient(180deg, var(--glass-a), var(--glass-b));
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top); transition: border-color var(--dur) var(--ease); }
.tile:hover { border-color: var(--mint); }
.tile--a { --tone: var(--tone-a); } .tile--b { --tone: var(--tone-b); } .tile--c { --tone: var(--tone-c); }
.tile__viz { position: relative; aspect-ratio: 13 / 10; overflow: hidden; container-type: inline-size; }
.tile__label { display: flex; align-items: center; gap: 10px; margin: 26px 28px 0; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.tile__label span { color: var(--grey); letter-spacing: 0.04em; }
.tile--c .tile__label { color: var(--ember); }
.tile__h { margin: 8px 28px 0; font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; color: var(--white); }
.tile__p { margin: 10px 28px 30px; font-size: 1rem; line-height: 1.55; color: var(--grey); }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 999px) { .tiles { max-width: 560px; margin-inline: auto; } }

/* Små, ekte nettsider (i cqw av bildet) */
.th { display: grid; gap: 2.6cqw; padding: 4.4cqw 5cqw 8cqw; border-radius: 3.4cqw 3.4cqw 0 0; border: 1px solid var(--glass-edge); border-bottom: 0; box-shadow: 0 6cqw 12cqw -4cqw var(--shadow); font-family: var(--font-body); }
.th--dark { color: var(--white); background: radial-gradient(60% 90% at 20% 0%, var(--nw-glow), var(--nw-glow-0) 70%), linear-gradient(160deg, var(--nw-hero-1), var(--nw-hero-2)); }
.th--light { color: var(--ed-b-ink); background: var(--ed-b-paper); }
.th__nav { display: flex; align-items: center; gap: 3cqw; margin-bottom: 1.4cqw; font-size: 2.7cqw; white-space: nowrap; color: var(--grey); }
.th--light .th__nav { color: var(--nw-muted); }
.th__nav b { display: inline-flex; align-items: center; gap: 1.2cqw; margin-right: auto; font-family: var(--font-display); font-size: 3.6cqw; font-weight: 800; color: inherit; }
.th--dark .th__nav b { color: var(--white); }
.th__nav b svg { width: 3.6cqw; height: 3.6cqw; fill: var(--mint); }
.th--light .th__nav b svg { fill: var(--ed-b-accent); }
.th__nav em { padding: 1.2cqw 2.4cqw; border-radius: 999px; background: var(--mint); color: var(--navy); font-style: normal; font-weight: 700; }
.th--light .th__nav em { background: var(--ed-b-accent); color: var(--white); }
.th__chip { display: inline-flex; align-items: center; gap: 1.2cqw; justify-self: start; padding: 0.9cqw 2.2cqw; border-radius: 999px; border: 1px solid var(--nw-line-dark); font-size: 2.5cqw; }
.th__chip i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--mint); }
.th__h { font-family: var(--font-display); font-size: 7.2cqw; font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; }
.th--dark .th__h span { background: linear-gradient(90deg, var(--mint), var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.th--light .th__h span { color: var(--ed-b-accent); }
.th__sub { font-size: 2.9cqw; color: var(--grey); }
.th--light .th__sub { color: var(--nw-muted); }
.th__btns { display: flex; gap: 1.6cqw; font-size: 2.7cqw; font-weight: 700; }
.th__btns em { padding: 1.8cqw 3.2cqw; border-radius: 999px; background: var(--mint); color: var(--navy); font-style: normal; }
.th--light .th__btns em { background: var(--ed-b-accent); color: var(--white); }
.th__btns span { padding: 1.8cqw 3.2cqw; border-radius: 999px; border: 1px solid var(--nw-line-dark); }
.th__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3cqw; align-items: center; }
.th__row > div { display: grid; gap: 2.6cqw; }
.th__art { aspect-ratio: 1; border-radius: 3cqw; background: radial-gradient(circle at 70% 30%, var(--ed-b-art-1), var(--ed-b-art-2)); }

/* Varsler, som på telefonen */
.nt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2.6cqw; align-items: start; padding: 3.2cqw 3.6cqw; border-radius: 4cqw;
  background: var(--nt-bg); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top), 0 5cqw 10cqw -3cqw var(--shadow); }
.nt__ico { display: grid; place-items: center; width: 8.4cqw; height: 8.4cqw; border-radius: 2.2cqw; background: var(--mint); color: var(--navy); }
.nt__ico svg { width: 5cqw; height: 5cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nt__ico--bird { background: var(--deep); }
.nt__ico--bird svg { width: 6cqw; height: 6cqw; }
.nt p { display: grid; gap: 0.6cqw; }
.nt b { font-size: max(0.8125rem, 3.4cqw); font-weight: 700; color: var(--white); }
.nt p span { font-size: max(0.75rem, 3cqw); line-height: 1.35; color: var(--grey); }
.nt em { font-size: max(0.6875rem, 2.6cqw); font-style: normal; color: var(--grey-dim); }

/* 01: utkastet, med varselet foran */
.tz { position: absolute; inset: 0; }
.tz--draft .th { position: absolute; left: 9cqw; right: 9cqw; top: 10cqw; }
.tz--draft .nt { position: absolute; left: 5cqw; right: 5cqw; bottom: 6cqw; }

/* 02: to varsler fra nettsiden */
.tz--run { display: grid; align-content: center; gap: 3cqw; padding: 0 7cqw; }
.nt--b { margin: 0 3cqw; filter: brightness(0.92); }
/* 03: to utgaver, den nye foran */
.tz__back, .tz__front { position: absolute; }
.tz__back { left: 15cqw; right: 15cqw; top: 9cqw; }
.tz__front { left: 7cqw; right: 7cqw; top: 22cqw; }
.tz__back .th { filter: brightness(0.75) saturate(0.85); }
.yr { position: absolute; top: -3.6cqw; left: 4cqw; padding: 1cqw 2.6cqw; border-radius: 999px; background: var(--veil); border: 1px solid var(--glass-edge); font-family: var(--font-display); font-size: max(0.75rem, 3cqw); font-weight: 800; color: var(--white); }
.yr--new { left: auto; right: 4cqw; background: var(--mint); border-color: transparent; color: var(--navy); }

/* ---------- Runde 3c (Nicolay: «three different cards … vertically stacked … elegantly animated»; «a fiery accent … tastefully»):
   tre store kort under hverandre, med bildene fra flisene. Hvert kort spiller historien sin én gang når det kommer fram, og
   igjen neste gang. Ilden er bare i gjenfødselen: lyset under den nye siden, gløden og noen få glør som stiger. ---------- */
.step__viz { aspect-ratio: 13 / 10; overflow: hidden; border-radius: 24px; border: 1px solid var(--glass-edge);
  background: radial-gradient(80% 60% at 50% 0%, var(--tone), var(--tone-0) 70%), linear-gradient(180deg, var(--deep-3), var(--night-deep));
  box-shadow: inset 0 1px 0 var(--glass-top), 0 40px 90px -40px var(--shadow); }
.step { padding: clamp(26px, 4vw, 56px); }
.step .step__p { max-width: 42ch; }
@media (min-width: 900px) { .step { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.nt b { font-size: clamp(0.8125rem, 3.1cqw, 1.0625rem); }
.nt p span { font-size: clamp(0.75rem, 2.8cqw, 0.9375rem); }
.nt em { font-size: clamp(0.6875rem, 2.4cqw, 0.8125rem); }
.nt__ico { width: clamp(30px, 7.6cqw, 44px); height: clamp(30px, 7.6cqw, 44px); border-radius: 22%; }
.nt__ico svg { width: 58%; height: 58%; }
.tz--run { padding: 0 9cqw; }
.nt--b { filter: none; }
.yr--new { background: linear-gradient(90deg, var(--fire-gold), var(--fire-amber) 55%, var(--fire-ember)); color: var(--navy); box-shadow: 0 1cqw 4cqw -1cqw var(--fire-glow); }

/* Gløden og glørne i fornyelsen */
.tz__glow { position: absolute; left: -15%; right: -15%; bottom: -36cqw; height: 64cqw; border-radius: 50%; background: radial-gradient(closest-side, var(--fire-glow), var(--fire-glow-soft) 55%, var(--fire-0)); }
.em { position: absolute; z-index: 3; bottom: 3cqw; left: var(--x); width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: radial-gradient(circle, var(--fire-gold) 0 35%, var(--fire-ember) 60%, var(--fire-0) 72%); filter: opacity(0); }

/* Historiene: synlig sluttbilde uten skript og med redusert bevegelse */
html[data-js] .step[data-story]:not([data-play]) .an { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .step[data-play] .an { animation: st-up 0.8s var(--ease) var(--d, 0s) both; }
  .step[data-play] .an--down { animation-name: st-down; }
  .step[data-play] .an--clip { animation: st-clip 1s cubic-bezier(.4, 0, .2, 1) var(--d, 0s) both; }
  .step[data-play] .an--rise { animation: st-rise 1.6s cubic-bezier(.3, 0, .15, 1) var(--d, 0s) both; }
  .step[data-play] .tz__glow { animation: st-glow 2.6s ease-out 0.4s both; }
  .step[data-play] .em { animation: st-ember var(--t, 6s) ease-in var(--d, 0s) infinite; }
  .step[data-idle] .em { animation-play-state: paused; }
}
@keyframes st-up { from { transform: translateY(18px); filter: opacity(0); } to { transform: none; filter: opacity(1); } }
@keyframes st-down { from { transform: translateY(-18px); filter: opacity(0); } to { transform: none; filter: opacity(1); } }
@keyframes st-clip { from { clip-path: inset(-20% 100% -30% 0); } to { clip-path: inset(-20% -5% -30% 0); } }
@keyframes st-rise { from { transform: translateY(70cqw); } to { transform: none; } }
@keyframes st-glow { 0% { filter: opacity(0.3); } 45% { filter: opacity(1) brightness(1.25); } 100% { filter: opacity(0.75); } }
@keyframes st-ember { 0% { transform: translate(0, 0); filter: opacity(0); } 15% { filter: opacity(0.85); } 100% { transform: translate(var(--dx, 2cqw), -46cqw); filter: opacity(0); } }

/* Ilden i helten: linjen som løfter den nye siden er et gyllent lys, og «Nytt liv!» er glød */
.scan::before { background: linear-gradient(90deg, var(--fire-0), var(--fire-gold) 18%, var(--fire-amber) 55%, var(--fire-ember) 85%, var(--fire-0)); box-shadow: 0 0 1.6cqw 0.4cqw var(--fire-glow); }
.scan::after { background: linear-gradient(180deg, var(--fire-glow-soft), var(--fire-0)); }
.scan__bird { filter: drop-shadow(0 0 1.2cqw var(--fire-glow)); }
.stamp { background: linear-gradient(135deg, var(--fire-gold), var(--fire-amber) 50%, var(--fire-ember)); box-shadow: 0 1.2cqw 3cqw -0.6cqw var(--shadow), 0 0 3cqw -0.6cqw var(--fire-glow); }
.scan .em { bottom: auto; top: -0.6cqw; z-index: 2; width: 0.7cqw; height: 0.7cqw; }
@media (prefers-reduced-motion: no-preference) { .scene[data-step="1"] .scan .em { animation: scan-ember 1.6s ease-out var(--d, 0s) both; } }
@keyframes scan-ember { 0% { transform: none; filter: opacity(0); } 20% { filter: opacity(1); } 100% { transform: translate(var(--dx, 0), -9cqw); filter: opacity(0); } }

/* Ilden i «Møt Føniks»: en varm glød under fuglen, og noen få glør som stiger */
.bird__bed { fill: url(#mf-bed); }
.gs-f1 { stop-color: var(--fire-amber); stop-opacity: 0.55; } .gs-f2 { stop-color: var(--fire-ember); stop-opacity: 0.18; } .gs-f0 { stop-color: var(--fire-ember); stop-opacity: 0; }
.fe { fill: var(--fire-gold); filter: opacity(0); }
@media (prefers-reduced-motion: no-preference) {
  .fe { animation: bird-ember var(--t, 7s) ease-in var(--d, 0s) infinite; }
  .bird__bed { animation: bed 5s ease-in-out infinite alternate; }
  .meet[data-idle] :is(.fe, .bird__bed) { animation-play-state: paused; }
}
@keyframes bird-ember { 0% { transform: translate(0, 0); filter: opacity(0); } 20% { filter: opacity(0.9); } 100% { transform: translate(var(--dx, 2px), -70px); filter: opacity(0); } }
@keyframes bed { from { filter: opacity(0.7); } to { filter: opacity(1); } }
.lock { display: grid; justify-items: center; margin-bottom: 3cqw; color: var(--white); }
.lock span { font-size: clamp(0.8125rem, 3cqw, 1.0625rem); font-weight: 600; color: var(--grey); }
.lock b { font-family: var(--font-display); font-size: 17cqw; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.step__p { font-size: 1.125rem; }
@media (max-width: 639px) { .step--b .step__viz { aspect-ratio: 4 / 5; } .lock b { font-size: 15cqw; } }

/* Runde 3d (Nicolay: «the browser window in the hero needs to move up a bit and not hit the bottom edge, more like Munin»):
   kortet går videre ned enn vinduet, så åsene og natten synes under, og vinduet har runde hjørner hele veien rundt.
   Årstallet står midt under vinduet. */
.scene { aspect-ratio: 1100 / 700; }
.scene__card { top: 10%; }
.win { bottom: 15%; border-bottom: 1px solid var(--glass-edge); border-radius: 1.4cqw; box-shadow: 0 3cqw 7cqw -2cqw var(--shadow); }
.scene__haze { display: none; }
.year { left: 50%; bottom: 2.6cqw; transform: translateX(-50%); white-space: nowrap; }
.chips { bottom: 17cqw; }
@media (max-width: 639px) {
  .scene { aspect-ratio: 1 / 1.22; }
  .scene__card { top: 9%; }
  .win { bottom: 15%; border-radius: 3cqw; }
  .year { bottom: 4cqw; }
  .chips { bottom: 22cqw; }
}

/* Runde 3e (Nicolay: «These elements needs to be better connected. Have the proposed design fill the frame, and the notification
   appear above it»): utkastet fyller bildet som en hel side, og varselet ligger oppå den nederste delen. */
.tz--draft .th { top: 7cqw; left: 7cqw; right: 7cqw; bottom: 0; align-content: start; }
.th__svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin: 3cqw -5cqw 0; padding: 4cqw 5cqw 0; background: var(--nw-paper); }
.th__svc span { display: flex; align-items: center; gap: 1.6cqw; padding: 2.4cqw; border-radius: 2cqw; background: var(--nw-card); border: 1px solid var(--nw-line); }
.th__svc-ico { flex: none; width: 4.6cqw; height: 4.6cqw; border-radius: 1.4cqw; background: var(--nw-mint-tint); }
.th__svc b { font-family: var(--font-display); font-size: 2.6cqw; font-weight: 700; color: var(--nw-ink); white-space: nowrap; }
.tz--draft .nt { left: 13cqw; right: 13cqw; bottom: 9cqw; z-index: 2; box-shadow: inset 0 1px 0 var(--glass-top), 0 4cqw 12cqw -2cqw var(--shadow), 0 0 0 1px var(--glass-edge); }
/* 3e, andre forsøk: siden fyller rammen kant til kant, og varselet faller ned oppå den øverst, som på en telefon */
.tz--draft .th { inset: 0; padding: 22cqw 6cqw 0; border: 0; border-radius: 0; gap: 2.4cqw; box-shadow: none; }
.tz--draft .th__nav { position: absolute; left: 6cqw; right: 6cqw; top: 5cqw; margin: 0; }
.tz--draft .th__h { font-size: 6.8cqw; }
.th__svc { margin: 3cqw -6cqw 0; padding: 4cqw 6cqw 6cqw; }
.tz--draft .nt { top: 4.5cqw; bottom: auto; left: 9cqw; right: 9cqw; background: var(--nt-solid); box-shadow: 0 3cqw 10cqw -1cqw var(--shadow), 0 0 0 1px var(--glass-edge); }

/* Runde 3f (Nicolay: «This should fill the frame as well, then become new. Make the new site look even more premium and refined»):
   den gamle siden fyller rammen, og den nye stiger opp over den bak en gyllen linje, som i helten. */
.rn-old .th, .rn-new { position: absolute; inset: 0; }
.rn-old .th { padding: 22cqw 6cqw 0; border: 0; border-radius: 0; gap: 2.4cqw; box-shadow: none; align-content: start; }
.rn-old .th__nav { position: absolute; left: 6cqw; right: 6cqw; top: 5cqw; margin: 0; }
.rn-old .th__h { font-size: 6.8cqw; }
.rn-line { position: absolute; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; }
.rn-line::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: linear-gradient(90deg, var(--fire-0), var(--fire-gold) 18%, var(--fire-amber) 55%, var(--fire-ember) 85%, var(--fire-0)); box-shadow: 0 0 2.4cqw 0.6cqw var(--fire-glow); }
.rn-line::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12cqw; background: linear-gradient(180deg, var(--fire-glow-soft), var(--fire-0)); }
.tz--renew .yr { top: auto; bottom: 4cqw; left: 50%; right: auto; transform: translateX(-50%); z-index: 3; }
.yr--old { visibility: hidden; }

/* Den nye siden: varmt papir, mye luft, et lyst bad og en ledig tid */
.pr { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--pr-paper); color: var(--pr-ink); font-family: var(--font-body); }
.pr__nav { display: flex; align-items: center; gap: 3.2cqw; padding: 4.6cqw 6cqw 0; font-size: 2.4cqw; color: var(--pr-muted); white-space: nowrap; }
.pr__nav b { display: inline-flex; align-items: center; gap: 1.2cqw; margin-right: auto; font-family: var(--font-display); font-size: 3.4cqw; font-weight: 800; letter-spacing: -0.03em; color: var(--pr-ink); }
.pr__nav b span { font-weight: 500; color: var(--pr-accent); }
.pr__mark { width: 3cqw; height: 3cqw; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pr-accent); }
.pr__nav em { padding: 1.4cqw 2.8cqw; border-radius: 999px; background: var(--pr-ink); color: var(--pr-paper); font-style: normal; font-weight: 700; }
.pr__hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 4cqw; align-items: center; padding: 5cqw 6cqw 4cqw; }
.pr__text { display: grid; gap: 2.4cqw; justify-items: start; }
.pr__kicker { font-size: 2cqw; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pr-accent); }
.pr__h { font-family: var(--font-display); font-size: 6.6cqw; font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; }
.pr__h span { color: var(--pr-accent); }
.pr__sub { max-width: 30ch; font-size: 2.5cqw; line-height: 1.5; color: var(--pr-muted); }
.pr__act { display: flex; align-items: center; gap: 3cqw; margin-top: 0.6cqw; font-size: 2.5cqw; font-weight: 700; white-space: nowrap; }
.pr__act em { display: inline-flex; gap: 1.2cqw; padding: 1.9cqw 3.4cqw; border-radius: 999px; background: var(--pr-accent); color: var(--pr-paper); font-style: normal; box-shadow: 0 2cqw 4cqw -2cqw var(--pr-accent); }
.pr__act em i { font-style: normal; }
.pr__act span { padding-bottom: 0.3cqw; border-bottom: 1px solid var(--pr-ink); color: var(--pr-ink); }
.pr__img { position: relative; align-self: stretch; min-height: 34cqw; overflow: hidden; border-radius: 3cqw; background: linear-gradient(180deg, var(--pr-img-1) 0%, var(--pr-img-2) 62%, var(--pr-img-3) 62.5%, var(--pr-img-2) 100%); }
.pr__win { position: absolute; left: 14%; top: 10%; width: 40%; height: 44%; border-radius: 1.4cqw; background: var(--pr-window); box-shadow: 0 0 8cqw 3cqw var(--pr-window-glow); }
.pr__win::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 0.5cqw; background: var(--pr-img-2); }
.pr__tub { position: absolute; left: 8%; right: 28%; bottom: 14%; height: 22%; border-radius: 2cqw 2cqw 5cqw 5cqw; background: var(--pr-tub); box-shadow: 0 2cqw 3cqw -1cqw var(--pr-tub-shade); }
.pr__plant { position: absolute; right: 9%; bottom: 14%; width: 11%; height: 30%; }
.pr__plant::before, .pr__plant::after { content: ""; position: absolute; bottom: 30%; border-radius: 50% 0; }
.pr__plant::before { left: 0; width: 70%; height: 60%; background: var(--pr-plant); transform: rotate(-12deg); }
.pr__plant::after { right: 0; width: 70%; height: 75%; background: var(--pr-plant-2); transform: rotate(18deg); }
.pr__float { position: absolute; left: 6%; bottom: 7%; display: flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 2.4cqw 1.6cqw 1.8cqw; border-radius: 2cqw; background: var(--pr-float); box-shadow: 0 2.4cqw 5cqw -2cqw var(--pr-tub-shade); font-size: 2.3cqw; font-weight: 700; color: var(--pr-ink); white-space: nowrap; }
.pr__float i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0.8cqw var(--nw-mint-tint); }
.pr__float span { display: grid; }
.pr__float small { font-size: 1.8cqw; font-weight: 500; color: var(--pr-muted); }
.pr__svc { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 6cqw; padding: 3cqw 0 13cqw; border-top: 1px solid var(--pr-line); font-family: var(--font-display); font-size: 2.6cqw; font-weight: 700; }
.pr__svc span { display: flex; align-items: baseline; gap: 1.4cqw; }
.pr__svc span + span { padding-left: 3cqw; border-left: 1px solid var(--pr-line); }
.pr__svc small { font-family: var(--font-body); font-size: 1.9cqw; font-weight: 600; color: var(--pr-muted); }

@media (prefers-reduced-motion: no-preference) {
  .step[data-play] .an--wipe { animation: st-wipe 1.7s cubic-bezier(.45, 0, .25, 1) var(--d, 0s) both; }
  .step[data-play] .rn-line { animation: st-line 1.7s cubic-bezier(.45, 0, .25, 1) 0.8s both; }
  .step[data-play] .an--out { animation: st-out 0.6s ease-out var(--d, 0s) both; }
}
@keyframes st-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes st-line { 0% { visibility: visible; transform: translateY(100%); } 92% { visibility: visible; transform: translateY(0); filter: opacity(1); } 100% { visibility: hidden; transform: translateY(0); filter: opacity(0); } }
@keyframes st-out { 0% { visibility: visible; filter: opacity(1); } 100% { visibility: hidden; filter: opacity(0); } }

/* ---------- Runde 3g (Nicolay: «The sizes of the Munin cards are better suited for laptops … Make all sections fit better for a
   MacBook Pro 14"»): kortene får Munins mål (1140 px, bilder i 16:9, store overskrifter over to linjer), og bildene er tegnet om
   for det bredere formatet. «Møt Føniks» er litt lavere. Målt i 1512 × 860. ---------- */
.steps { max-width: 1140px; margin-inline: auto; gap: clamp(28px, 4vw, 48px); }
.step { gap: 32px; padding: 32px clamp(24px, 4vw, 56px); border-radius: 32px; }
.step__text { gap: 16px; max-width: 34ch; }
.step .h3 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.06; letter-spacing: -0.03em; }
.step .step__p { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; }
@media (min-width: 900px) {
  .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 72px); }
  .step__viz { aspect-ratio: 16 / 9; }
  .step .step__viz { margin-right: calc(-1 * clamp(24px, 4vw, 56px) - clamp(24px, 3vw, 48px)); }
  .step--flip .step__viz { margin-right: 0; margin-left: calc(-1 * clamp(24px, 4vw, 56px) - clamp(24px, 3vw, 48px)); }
  /* 01: litt mindre side under varselet */
  .tz--draft .th { padding-top: 18.5cqw; gap: 1.8cqw; }
  .tz--draft .th__h { font-size: 5.6cqw; }
  .tz--draft .th__sub { font-size: 2.4cqw; }
  .tz--draft .nt { top: 3.6cqw; }
  /* 02: mindre klokke, så låseskjermen får plass */
  .lock { margin-bottom: 1.6cqw; }
  .lock b { font-size: 10cqw; }
  .tz--run { gap: 2cqw; padding: 0 14cqw; }
  /* 03: den gamle siden og den nye i det brede formatet */
  .rn-old .th { padding-top: 13cqw; gap: 1.8cqw; }
  .rn-old .th__nav { top: 4cqw; }
  .rn-old .th__h { font-size: 5.6cqw; }
}
/* Den nye siden i fornyelsen: én rad med tekst og bilde, plass til årstallet under */
.pr { grid-template-rows: auto minmax(0, 1fr); }
.pr__nav { padding-top: 4cqw; font-size: 2.2cqw; }
.pr__nav b { font-size: 3.1cqw; }
.pr__nav em { padding: 1.2cqw 2.4cqw; }
.pr__hero { grid-template-columns: 1.2fr 0.8fr; gap: 4cqw; align-items: stretch; padding: 4cqw 6cqw 11cqw; }
.pr__text { align-content: center; gap: 2cqw; }
.pr__kicker { font-size: 1.8cqw; white-space: nowrap; }
.pr__h { font-size: 4.7cqw; }
.pr__sub { font-size: 2.2cqw; max-width: 34ch; }
.pr__act { font-size: 2.2cqw; gap: 2.6cqw; }
.pr__act em { padding: 1.6cqw 3cqw; }
.pr__img { min-height: 0; }
.pr__float { font-size: 2cqw; padding: 1.3cqw 2cqw 1.3cqw 1.5cqw; }
.pr__float small { font-size: 1.6cqw; }
.tz--renew .yr { bottom: 3cqw; }

/* «Møt Føniks»: litt lavere scene */
.meet { padding: clamp(56px, 8vh, 96px) 0 clamp(64px, 9vh, 104px); }
.meet__stage { margin-top: clamp(24px, 4vh, 40px); }
@media (min-width: 1100px) {
  .meet__stage { --orb: clamp(400px, 31vw, 480px); height: max(calc(var(--orb) + 10px), 480px); }
}
.quiet { margin-top: clamp(40px, 6vh, 72px); padding-top: 28px; }
@media (min-width: 900px) {
  .tz--draft .nt { left: 4cqw; right: 4cqw; }
  .tz--run { gap: 1.6cqw; padding: 0 12cqw; }
  .tz--run .nt { padding: 2.2cqw 2.8cqw; gap: 2cqw; }
  .tz--run .nt p span { font-size: clamp(0.75rem, 2.3cqw, 0.875rem); }
  .tz--run .nt b { font-size: clamp(0.8125rem, 2.6cqw, 1rem); }
  .lock span { font-size: clamp(0.75rem, 2.2cqw, 0.875rem); }
  .lock b { font-size: 9cqw; }
  .pr__hero { padding-bottom: 12.5cqw; }
  .tz--renew .yr { bottom: 2.4cqw; }
}
.tz--renew .yr { left: auto; right: 3.6cqw; bottom: 3.2cqw; transform: none; }
.proof { padding: clamp(32px, 5vh, 56px) 0 clamp(24px, 4vh, 48px); }
.age { padding: clamp(56px, 8vh, 96px) 0; }
/* 01: varselet øverst til høyre, som på Mac, så siden synes */
@media (min-width: 900px) {
  .tz--draft .th { padding-top: 14cqw; }
  .tz--draft .nt { left: auto; right: 3cqw; top: 3cqw; width: 52cqw; padding: 2.2cqw 2.6cqw; gap: 1.8cqw; }
  .tz--draft .nt p span { font-size: clamp(0.75rem, 2.2cqw, 0.875rem); }
  .tz--draft .nt b { font-size: clamp(0.8125rem, 2.5cqw, 1rem); }
  .tz--draft .th__nav em { visibility: hidden; }
}
@media (min-width: 900px) { .tz--draft .th__svc { display: none; } .tz--draft .th { align-content: start; } }

/* ---------- Runde 4: kundene, priser og spørsmål (målt i 1512 × 860) ---------- */
.sec-head { display: grid; justify-items: center; gap: 18px; text-align: center; }

/* Kundene: to sitater i glass, bildet til venstre */
.say { padding: clamp(80px, 11vh, 128px) 0 clamp(56px, 8vh, 96px); }
.quotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 1140px; margin: clamp(36px, 5vh, 56px) auto 0; }
.quote { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; overflow: hidden; border-radius: 28px; border: 1px solid var(--glass-edge);
  background: radial-gradient(90% 70% at 100% 0%, var(--glow-soft), var(--glow-0) 70%), linear-gradient(180deg, var(--glass-a), var(--glass-b)); box-shadow: inset 0 1px 0 var(--glass-top); }
.quote__img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; object-position: center 30%; }
.quote__body { display: grid; align-content: space-between; gap: 22px; padding: clamp(24px, 3vw, 40px); }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); font-weight: 700; line-height: 1.32; letter-spacing: -0.015em; color: var(--white); }
.quote mark { background: none; color: var(--mint); }
.quote figcaption { display: grid; gap: 2px; font-size: 0.9375rem; color: var(--grey); }
.quote figcaption b { font-size: 1rem; color: var(--white); }
.quote figcaption a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--grey); }
.quote figcaption a svg { width: 14px; height: 14px; }
@media (min-width: 900px) {
  .quotes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .quote { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .quote__img { max-height: none; }
}

/* Priser */
.prices { position: relative; padding: clamp(64px, 9vh, 104px) 0 clamp(72px, 10vh, 120px); }
.pay { display: grid; justify-items: center; gap: 10px; }
.seg--pay { margin: 0; }
.pay__why { font-size: 0.9375rem; color: var(--grey); }
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 980px; margin: clamp(32px, 5vh, 48px) auto 0; overflow: hidden; border-radius: 28px;
  border: 1px solid var(--glass-edge); background: linear-gradient(180deg, var(--glass-a), var(--glass-b)); box-shadow: inset 0 1px 0 var(--glass-top), 0 40px 100px -48px var(--shadow); }
.plan { display: grid; align-content: start; gap: 12px; padding: clamp(28px, 3.6vw, 44px); }
.plan + .plan { border-top: 1px solid var(--glass-edge); }
.plan--main { background: radial-gradient(80% 70% at 100% 0%, var(--glow-soft), var(--glow-0) 70%); }
.plan__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--white); }
.plan__tag { margin-top: -6px; font-size: 0.9375rem; color: var(--grey); }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; color: var(--white); }
.plan__price small { font-size: 1rem; color: var(--grey); }
.plan__price b { font-family: var(--font-display); font-size: clamp(2.75rem, 2rem + 2.4vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.plan__price span { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--grey); }
.plan__meta { font-size: 0.9375rem; color: var(--grey); }
.plan__drift { font-size: 0.9375rem; font-weight: 600; color: var(--white); }
.plan__list { display: grid; gap: 10px; margin: 6px 0 10px; padding: 14px 0 0; border-top: 1px solid var(--glass-edge); list-style: none; }
.plan__list li { display: flex; align-items: center; gap: 10px; font-size: 1rem; color: var(--white); }
.plan__list svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--mint); color: var(--navy); }
@media (min-width: 700px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); }
  .plan { grid-row: span 8; grid-template-rows: subgrid; row-gap: 12px; }
  .plan + .plan { border-top: 0; border-left: 1px solid var(--glass-edge); }
}

/* Kampanjesiden: en stille rad under */
.camp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 28px; align-items: center; max-width: 980px; margin: 18px auto 0; padding: 22px clamp(24px, 3vw, 36px); border-radius: 22px; border: 1px solid var(--glass-edge); background: var(--glass-b); }
.camp__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.camp__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--white); }
.camp__text { font-size: 0.9375rem; line-height: 1.55; color: var(--grey); }
.camp__text b { color: var(--white); }
.camp__link { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; font-weight: 700; color: var(--mint); text-decoration: none; white-space: nowrap; }
.camp__link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.camp__link:hover svg { transform: translateX(3px); }
@media (min-width: 900px) {
  .camp { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .camp__label { grid-column: 1; grid-row: 1; }
  .camp__name { grid-column: 1; grid-row: 2; }
  .camp__text { grid-column: 2; grid-row: 1 / span 2; max-width: 60ch; }
  .camp__link { grid-column: 3; grid-row: 1 / span 2; }
}
.prices .renew { max-width: 980px; margin: clamp(48px, 7vh, 72px) auto 0; }
.prices[data-mode="samlet"] .renew { filter: opacity(0.4); }

/* Sammenligningen: en kort tabell */
.vs { max-width: 980px; margin: clamp(48px, 7vh, 72px) auto 0; }
.vs__head { margin-bottom: 14px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--white); }
.vs__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.vs__table th, .vs__table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--glass-edge); vertical-align: top; }
.vs__table thead th { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.vs__table tbody th { font-weight: 600; color: var(--grey); }
.vs__table td { color: var(--grey); }
.vs__table .vs__us { color: var(--white); font-weight: 600; background: var(--glass-b); }
.vs__table thead .vs__us { color: var(--mint); }
.vs__note { margin-top: 14px; font-size: 0.875rem; color: var(--grey-dim); }
.vs__note a { color: var(--mint); }
@media (max-width: 699px) {
  .vs__table thead { display: none; }
  .vs__table tr { display: grid; grid-template-columns: 1fr; padding: 12px 0; border-bottom: 1px solid var(--glass-edge); }
  .vs__table th, .vs__table td { padding: 2px 0; border: 0; background: none; }
  .vs__table td::before { content: attr(data-l) ": "; color: var(--grey-dim); }
}

/* Spørsmål: overskriften til venstre, glassrader til høyre */
.faq { padding: clamp(56px, 8vh, 96px) 0 clamp(72px, 10vh, 120px); }
.faq__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 72px; align-items: start; }
.faq__head .sub a { color: var(--mint); white-space: nowrap; }
.faq__list { display: grid; gap: 10px; }
.faq__list details[data-faq] { border: 1px solid transparent; border-radius: 18px; background: var(--glass-b); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.faq__list details[data-faq]:hover { background: var(--glass-a); }
.faq__list details[data-faq][open] { background: var(--glass-a); border-color: var(--glass-edge); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 12px 18px 12px 24px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--white); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list details[data-faq] > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--glass-edge); font-weight: 500; color: var(--mint); transition: transform var(--dur) var(--ease); }
.faq__list details[data-faq][open] > summary::after { transform: rotate(45deg); }
.faq__list details[data-faq] > div { padding: 0 24px 22px; }
.faq__list details[data-faq] > div p { max-width: 62ch; font-size: 1rem; line-height: 1.6; color: var(--grey); }
.faq__list details[data-faq] > div p + p { margin-top: 10px; }
.faq__more { display: grid; gap: 10px; }
.faq__more > summary { justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-b); font-family: var(--font-body); font-size: 0.9375rem; color: var(--mint); justify-self: center; }
.faq__more[open] > summary { order: 2; }
.faq__more[open] > summary::before { content: "Vis færre spørsmål"; }
.faq__more[open] > summary { font-size: 0; }
.faq__more[open] > summary::before { font-size: 0.9375rem; }
@media (min-width: 1000px) {
  .faq__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .faq__head { position: sticky; top: 112px; }
}
@media (prefers-reduced-motion: no-preference) {
  .faq__list { interpolate-size: allow-keywords; }
  .faq__list details[data-faq]::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
  .faq__list details[data-faq][open]::details-content { block-size: auto; }
}
.quote figcaption a { justify-self: start; min-height: 0; padding: 4px 0; }
.faq__head .h2 { font-size: clamp(2rem, 1.3rem + 1.8vw, 2.75rem); }

@media (max-width: 639px) { .seg--pay { display: inline-flex; width: auto; border-radius: 999px; } .seg--pay span { width: auto; } }

/* Runde 4b (Nicolay: «the two below is very busy and noisy»): halv pris som én rolig linje, med en ren tidslinje */
.half { display: grid; justify-items: center; gap: 0; max-width: 760px; margin: clamp(56px, 8vh, 88px) auto 0; text-align: center; }
.half__text { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; color: var(--grey); text-wrap: balance; }
.half__text b { color: var(--white); }
.half__line { position: relative; width: 100%; height: 4px; margin: 36px 0 52px; border-radius: 4px; background: var(--glass-edge); }
.half__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 4px; background: linear-gradient(90deg, var(--green), var(--mint)); }
.half__dot { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px var(--glow-soft), 0 0 20px var(--glow); }
.half__l { position: absolute; top: 18px; font-size: 0.9375rem; color: var(--grey); white-space: nowrap; }
.half__l--a { left: 0; }
.half__l--b { left: 50%; transform: translateX(-50%); font-weight: 700; color: var(--mint); }
.half__l--c { right: 0; }
.half__note { max-width: 58ch; font-size: 0.9375rem; line-height: 1.6; color: var(--grey); }
.half__note a { color: var(--mint); white-space: nowrap; }
.prices[data-mode="samlet"] .half { filter: opacity(0.4); }

/* Spørsmål: overskriften brytes heller enn å klippes, og kolonnen er bredere på skjerm */
.faq__head .h2 { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.5rem); text-wrap: balance; }
.faq__head .h2 .glow { white-space: normal; }
@media (min-width: 1000px) { .faq__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 56px; } }

/* Runde 4d (Nicolay): halv pris på to linjer, og valget ved fornyelse i stedet for «Og slik fortsetter det» */
.half { max-width: 900px; }
.half__text b, .half__text span { display: block; }
.half__text { text-wrap: pretty; }
.choice { display: grid; justify-items: center; gap: 6px; max-width: 760px; margin-top: clamp(40px, 6vh, 64px); text-align: center; }
.choice b { font-family: var(--font-display); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); font-weight: 700; line-height: 1.4; color: var(--white); text-wrap: balance; }
.choice span { font-size: 0.9375rem; line-height: 1.55; color: var(--grey); }
.choice { max-width: 940px; }

/* ---------- Runde 5a: valget ved fornyelse som en gaffel under kort 03 ---------- */
.fork { position: relative; max-width: 1000px; margin-top: 8px; }
.fork__lines { display: block; width: 100%; height: clamp(70px, 9vw, 120px); overflow: visible; }
.fork__path { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--glow)); }
.fork__dot { fill: var(--mint); }
.fork__head { position: absolute; left: 50%; top: 0; transform: translate(14px, 8px); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); white-space: nowrap; }
.fork__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.opt { display: grid; align-content: start; gap: 8px; padding: 0 0 28px; overflow: hidden; border-radius: 28px; border: 1px solid var(--glass-edge);
  background: radial-gradient(90% 60% at 50% 0%, var(--glow-soft), var(--glow-0) 70%), linear-gradient(180deg, var(--glass-a), var(--glass-b)); box-shadow: inset 0 1px 0 var(--glass-top); }
.opt__viz { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; margin-bottom: 14px; }
.opt__h { margin: 0 28px; font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 800; letter-spacing: -0.025em; color: var(--white); }
.opt__p { margin: 0 28px; max-width: 40ch; font-size: 1rem; line-height: 1.55; color: var(--grey); }
.ov { position: absolute; inset: 0; }
.ov .th { position: absolute; inset: auto 0 0 0; padding-bottom: 6cqw; }
.ov--new .ov__a { position: absolute; left: 14cqw; right: 14cqw; top: 9cqw; bottom: 0; }
.ov--new .ov__a .th { filter: brightness(0.7) saturate(0.8); }
.ov--new .ov__b { position: absolute; left: 7cqw; right: 7cqw; top: 22cqw; bottom: 0; }
.ov--up .ov__a { position: absolute; left: 7cqw; right: 7cqw; top: 9cqw; bottom: 0; }
.ov .th__h { font-size: 5.6cqw; }
.ov__scan { position: absolute; left: 7cqw; right: 7cqw; top: 9cqw; height: 2px; background: linear-gradient(90deg, var(--glow-0), var(--mint) 20%, var(--mint-soft) 80%, var(--glow-0)); box-shadow: 0 0 2cqw 0.4cqw var(--glow); visibility: hidden; }
.ov__chips { position: absolute; right: 4cqw; bottom: 5cqw; display: grid; gap: 1.6cqw; margin: 0; padding: 0; list-style: none; }
.ov__chips li { display: flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 2.6cqw 1.4cqw 1.6cqw; border-radius: 999px; background: var(--veil); border: 1px solid var(--glass-edge); font-size: clamp(0.75rem, 2.8cqw, 0.9375rem); font-weight: 600; color: var(--white); }
.ov__chips svg { width: clamp(14px, 3.4cqw, 18px); height: clamp(14px, 3.4cqw, 18px); padding: 2px; border-radius: 50%; background: var(--mint); color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  html[data-js] .fork:not([data-drawn]) .fork__path { stroke-dasharray: 900; stroke-dashoffset: 900; }
  .fork[data-drawn] .fork__path { stroke-dasharray: 900; animation: fork-draw 1.4s cubic-bezier(.45, 0, .25, 1) both; }
  .fork[data-drawn] .ov--up .ov__scan { animation: ov-scan 1.8s cubic-bezier(.45, 0, .25, 1) 0.9s both; }
  .fork[data-drawn] .ov--new .ov__b { animation: ov-rise 1.4s cubic-bezier(.3, 0, .15, 1) 0.9s both; }
  .fork[data-drawn] .ov__chips li { animation: st-up 0.7s var(--ease) both; }
  .fork[data-drawn] .ov__chips li:nth-child(1) { animation-delay: 1.9s; } .fork[data-drawn] .ov__chips li:nth-child(2) { animation-delay: 2.1s; } .fork[data-drawn] .ov__chips li:nth-child(3) { animation-delay: 2.3s; }
}
@keyframes fork-draw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@keyframes ov-scan { 0% { visibility: visible; transform: translateY(0); } 95% { visibility: visible; transform: translateY(46cqw); } 100% { visibility: hidden; transform: translateY(46cqw); } }
@keyframes ov-rise { from { transform: translateY(40cqw); } to { transform: none; } }
@media (max-width: 699px) {
  .fork__lines { display: none; }
  .fork__head { position: static; transform: none; display: block; margin: 28px 0 14px; text-align: center; }
  .fork__opts { grid-template-columns: 1fr; }
}
/* Linjeskiftene Nicolay valgte; på smale skjermer bryter teksten selv */
.opt__p { max-width: none; }
@media (max-width: 899px) { .opt__p br { display: none; } }

/* FAQ: spørsmålene bak «Vis 8 spørsmål til» ligger i details-innholdet, ikke i griden, så de fikk ingen avstand */
.faq__more > details[data-faq] + details[data-faq] { margin-top: 10px; }

/* ---------- Runde 5: skjemaet og folkene som ringer ---------- */
.ask { position: relative; padding: clamp(80px, 11vh, 128px) 0 clamp(96px, 12vh, 144px); }
.ask::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 72% 52%, var(--glow-soft), var(--glow-0) 70%); }
.ask__in { position: relative; display: grid; gap: 48px; }
.ask__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.ask__facts li { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--glass-edge); }
.ask__facts b { font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--white); }
.ask__facts span { font-size: 0.9375rem; line-height: 1.4; color: var(--grey); }
.folk { margin-top: 40px; }
.folk__h { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.folk__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.folk__list li { display: flex; align-items: center; gap: 14px; }
.folk__list img { width: 60px; height: 60px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--night), 0 0 0 3px var(--glass-edge); }
.folk__list p { display: grid; line-height: 1.35; }
.folk__list b { font-size: 1rem; color: var(--white); }
.folk__list span { font-size: 0.875rem; color: var(--grey); }
.folk__list a { justify-self: start; font-size: 0.9375rem; font-weight: 700; color: var(--mint); text-decoration: none; }
.folk__list a:hover { text-decoration: underline; }

.card { position: relative; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: var(--paper); color: var(--card-ink); box-shadow: 0 40px 90px -40px var(--card-shadow), 0 0 0 1px var(--glass-edge); }
.card :focus-visible { outline-color: var(--card-focus); }
.card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.card__h { font-family: var(--font-display); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); font-weight: 800; letter-spacing: -0.025em; color: var(--card-ink); }
.card__steps { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 600; color: var(--card-muted); }
.card__steps i { position: relative; width: 56px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--card-line); }
.card__steps b { position: absolute; inset: 0; border-radius: 4px; background: var(--card-focus); transform: scaleX(0.5); transform-origin: left; transition: transform 0.4s var(--ease); }
.card__sum { display: none; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--card-err-bg); color: var(--card-err); font-size: 0.9375rem; font-weight: 600; line-height: 1.45; }
.card__sum.show { display: block; }
.card__sum a { color: inherit; }
.card__step { display: grid; gap: 16px; min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.card__step[hidden] { display: none; }
.card__lead { float: left; width: 100%; margin-bottom: 2px; padding: 0; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; color: var(--card-ink); }
.card__lead + * { clear: both; }
.fl { display: grid; gap: 6px; min-width: 0; }
.fl label, .fl__label { font-size: 0.9375rem; font-weight: 600; color: var(--card-ink); }
.opt-tag { font-weight: 400; color: var(--card-muted); }
.fl input, .fl textarea { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--card-line); background: var(--card-field); font: inherit; font-size: 1rem; color: var(--card-ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fl textarea { min-height: 96px; padding: 14px 16px; resize: vertical; }
.fl input::placeholder, .fl textarea::placeholder { color: var(--card-muted); }
.fl input:focus, .fl textarea:focus { outline: none; border-color: var(--card-focus); box-shadow: 0 0 0 4px var(--card-ring); }
.fl [aria-invalid="true"] { border-color: var(--card-err); }
.fl__err { display: none; font-size: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--card-err); }
.fl__err.show { display: block; }
.fl__pair { display: grid; gap: 16px; }
@media (min-width: 480px) { .fl__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fl__hint { margin-top: -8px; font-size: 0.875rem; color: var(--card-muted); }
.btn--ink { background: var(--card-ink); color: var(--white); box-shadow: 0 14px 30px -16px var(--card-shadow); }
.btn--ink svg { color: var(--mint); }
.btn--ink:hover { background: var(--deep-3); }
.btn--ink[disabled] { cursor: progress; transform: none; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick label { position: relative; }
.pick input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); }
.pick span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--card-line); background: var(--card-field); font-size: 0.9375rem; font-weight: 600; color: var(--card-ink); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pick label:hover span { border-color: var(--card-focus); }
.pick input:checked + span { background: var(--card-chip-on); border-color: var(--card-chip-on); color: var(--white); }
.pick input:focus-visible + span { outline: 3px solid var(--card-focus); outline-offset: 2px; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.card__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.card__back { min-height: 44px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--card-muted); cursor: pointer; }
.card__back:hover { color: var(--card-ink); text-decoration: underline; }
.card__priv { margin-top: 18px; font-size: 0.8125rem; line-height: 1.5; color: var(--card-muted); }
.card__priv a { color: var(--card-ink); }

/* Sendt: merket «Helt ny!» lander, med et glimt av ild rundt (den eneste fornyelsen på siden som skjer på ekte) */
.done { display: grid; justify-items: center; gap: 10px; padding: clamp(12px, 3vw, 32px) 4px; text-align: center; }
.done[hidden] { display: none; }
.done__stamp { position: relative; display: grid; place-items: center; width: 128px; height: 128px; margin-bottom: 14px; border-radius: 50%; background: var(--mint); color: var(--card-ink); box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--card-line), 0 18px 40px -16px var(--fire-glow); transform: rotate(-8deg); }
.done__stamp span { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; }
.done__stamp .de { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--fire-amber); box-shadow: 0 0 10px 2px var(--fire-glow); visibility: hidden; }
.done__h { font-family: var(--font-display); font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--card-ink); text-wrap: balance; }
.done__p { max-width: 40ch; font-size: 1rem; line-height: 1.55; color: var(--card-muted); }
.done__x { margin-top: 6px; font-weight: 700; color: var(--card-ink); }
@media (prefers-reduced-motion: no-preference) {
  .done:not([hidden]) .done__stamp { animation: done-stamp 0.7s cubic-bezier(.2, .9, .25, 1.2) both; }
  .done:not([hidden]) .de { animation: done-ember 1.5s cubic-bezier(.2, .6, .3, 1) 0.35s both; }
  .done .de--1 { --dx: -78px; --dy: -64px; } .done .de--2 { --dx: 70px; --dy: -78px; background: var(--fire-gold); }
  .done .de--3 { --dx: 92px; --dy: 6px; background: var(--fire-ember); } .done .de--4 { --dx: -88px; --dy: 18px; background: var(--fire-gold); }
  .done .de--5 { --dx: 8px; --dy: -104px; }
  .done:not([hidden]) .done__h, .done:not([hidden]) .done__p, .done:not([hidden]) .done__x { animation: st-up 0.6s var(--ease) both; }
  .done:not([hidden]) .done__h { animation-delay: 0.25s; } .done:not([hidden]) .done__p { animation-delay: 0.35s; } .done:not([hidden]) .done__x { animation-delay: 0.45s; }
}
@keyframes done-stamp { from { transform: translateY(-18px) rotate(-34deg); filter: opacity(0); } to { transform: rotate(-8deg); filter: opacity(1); } }
@keyframes done-ember { 0% { visibility: visible; transform: translate(-50%, -50%); filter: opacity(0); } 20% { filter: opacity(1); } 100% { visibility: hidden; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.4); filter: opacity(0); } }

@media (min-width: 1000px) {
  .ask__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
}
.fl input[aria-invalid="true"]:focus, .fl textarea[aria-invalid="true"]:focus { border-color: var(--card-err); box-shadow: 0 0 0 4px var(--card-err-ring); }
.fl__hint.is-err { font-weight: 600; color: var(--card-err); }
.ask .sub { text-wrap: pretty; }
@media (min-width: 1000px) { .ask__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) {
  .card__actions { flex-direction: column-reverse; align-items: stretch; }
  .card__back { align-self: center; }
}
.done__p { text-wrap: pretty; }
.done__x { text-wrap: balance; }

/* ---------- Runde 6: QA (24.10.2026) ---------- */
/* Ingen enslige ord på siste linje: brødtekst brytes «pent», korte tekster balanseres. Bare text-wrap-style, så
   white-space: nowrap fortsatt gjelder der det står (kortformen text-wrap nullstiller nowrap). Tall og enheter, «i» og «å»
   og telefonnumre er bundet med hardt mellomrom i selve teksten. */
p, li, dd, blockquote, figcaption, label, summary, .cap > span { text-wrap-style: pretty; }
figcaption b, figcaption span, .quote figcaption a, .plan__tag, .ask__facts span, .folk__list b, .opt__h, .proof__note,
.years__hint, .age-card__hook, .age-card__punch, .pay__why, .fl__hint { text-wrap-style: balance; }
/* Helten: én setning per linje på alle skjermer */
.lead > span { display: block; }
/* Halv pris: to setninger, to linjer */
.half__text b, .half__text span { display: block; text-wrap-style: balance; }
/* Smale telefoner: knappene i priskortene får plass på én linje */
@media (max-width: 374px) {
  .plan { padding-inline: 22px; }
  .btn--block { padding-inline: 18px; gap: 8px; }
}
/* Sitatene side om side: bildet øverst, så sitatet får hele bredden i stedet for en smal søyle */
@media (min-width: 900px) {
  .quote { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .quote__img { height: clamp(220px, 20vw, 280px); max-height: none; }
  .quote blockquote p { font-size: clamp(1.25rem, 0.9rem + 0.7vw, 1.5rem); }
}
/* Bunnen: kontakt, vilkår, personvern og språk */
.foot__in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px; }
.foot__nav, .foot__lang { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.foot__nav a, .foot__lang a { display: inline-flex; align-items: center; min-height: 32px; color: var(--grey); text-decoration: none; }
.foot__nav a:hover, .foot__lang a:hover { color: var(--white); text-decoration: underline; }
.foot__lang a { font-size: 0.8125rem; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8125rem; }
@media (min-width: 900px) {
  .foot__in { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 40px; }
  .foot__lang { grid-column: 3; grid-row: 1; }
  .foot__legal { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--glass-edge); justify-self: stretch; justify-content: space-between; }
}
@media (pointer: coarse) { .foot__nav a, .foot__lang a { min-height: 44px; } }
.card__sum { text-wrap-style: pretty; }
/* 320 px: logoen og knappen i linjen øverst får plass ved siden av hverandre */
@media (max-width: 359px) {
  .bar__brand img { height: 24px; }
  .bar .btn--sm { padding-inline: 14px; }
}
/* 320–374 px: varslene i kort 01 og 02 fikk minstestørrelsen på teksten i en for smal ramme. Bredere varsler, en høyere
   låseskjerm, og utkastvarselet uten undertekst (kortet sier det samme rett over). */
@media (max-width: 374px) {
  .step--b .step__viz { aspect-ratio: 3 / 4; }
  .tz--run { padding: 0 5cqw; }
  .tz--draft .nt { left: 5cqw; right: 5cqw; }
  .tz--draft .nt p span { display: none; }
}
/* Smale telefoner: de to linjene i hver fordel flyter som én setning, så «ha det,» ikke blir stående alene.
   Fra 360 px får hver setning sin egen linje, som på større skjermer. */
@media (max-width: 359px) {
  .cap { display: block; text-wrap-style: pretty; }
  .cap > span { display: inline; }
  .cap > span + span::before { content: " "; }
}
/* Årene som et rutenett: 3 + 3 + 3 i en smal spalte, 5 + 4 i en bred, så «2024+» aldri står alene på en rad */
.years { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 540px; }
.years span { width: 100%; justify-content: center; padding: 0 10px; }
.age__ask { container-type: inline-size; }
.years span { white-space: nowrap; }
@container (min-width: 470px) { .years { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Skjemaet: på telefon og nettbrett kommer kortet rett etter overskriften, så «Få et gratis utkast» lander ved første
   felt. Tallene og folkene følger etter. På store skjermer står de til venstre for kortet som før. */
.ask__in { grid-template-areas: "head" "card" "more"; gap: 32px; }
.ask__head { grid-area: head; }
.ask .card { grid-area: card; }
.ask__more { grid-area: more; margin-top: 16px; }
.ask__more .ask__facts { margin-top: 0; }
@media (min-width: 1000px) {
  .ask__in { grid-template-areas: "head card" "more card"; grid-template-rows: auto auto; column-gap: 72px; row-gap: 32px; align-items: start; }
  .ask__head { align-self: end; }
  .ask .card { align-self: center; }
  .ask__more { margin-top: 0; }
}
/* Steg 01: et naturlig neste steg rett etter løftet */
.step__cta { grid-column: auto; grid-row: auto; margin-top: -2px; }
/* Gaffelen: den tredje veien, stille under de to kortene */
.fork__keep { margin: 22px auto 0; max-width: 60ch; font-size: 0.9375rem; line-height: 1.5; text-align: center; color: var(--grey); text-wrap-style: balance; }
.ask__facts li { align-content: start; }
.card__lead small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; color: var(--card-muted); }
/* Bildet øverst er bredt og lavt: portrettet beskjæres høyere opp, så hele ansiktet og capsen er med */
@media (min-width: 900px) { .quote__img { object-position: center 12%; } }
/* Telefon og nettbrett: knappene lander med overskriften rett under linjen øverst, ikke under et tomrom */
@media (max-width: 999px) { .ask { scroll-margin-top: calc(-1 * clamp(80px, 11vh, 128px) + 24px); } }
/* Priskortene: hva det blir til sammen med drift, ved 24 mnd */
.plan__sum { display: block; margin-top: 2px; font-size: 0.9375rem; font-weight: 400; color: var(--grey); }
.plan__sum[hidden] { display: none; }
/* Telefon: de tre tallene ved skjemaet som en liste, tall til venstre og forklaring til høyre */
@media (max-width: 599px) {
  .ask__facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ask__facts li { grid-template-columns: 4.25rem minmax(0, 1fr); align-items: baseline; column-gap: 12px; padding: 12px 0; }
  .ask__facts li:last-child { border-bottom: 1px solid var(--glass-edge); }
  .ask__facts b { font-size: 1.5rem; }
}

/* ---------- Veiviseren i skjemaet (24.10.2026, runde 2): tre trykk med bilder, anbefalingen med en liten nettside, så kontaktinfo ---------- */
.card [hidden] { display: none; }
.wz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.wz-back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-left: -6px; padding: 0 8px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--card-muted); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.wz-back svg { width: 16px; height: 16px; transform: scaleX(-1); }
.wz-back:hover { background: var(--card-tint); color: var(--card-ink); }
.wz-back:focus-visible { outline: 3px solid var(--card-focus); outline-offset: 2px; }
.wz-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--card-focus); }
.wz-count { margin-left: auto; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; color: var(--card-focus); white-space: nowrap; }
.wz-bar { position: relative; height: 4px; margin-top: 10px; overflow: hidden; border-radius: 4px; background: var(--card-line); }
.wz-bar b { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, var(--card-focus), var(--mint)); transform: scaleX(0.25); transform-origin: left; transition: transform 0.4s var(--ease); }

.q { gap: 16px; margin-top: 20px; }
.q__h { font-family: var(--font-display); font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; color: var(--card-ink); text-wrap: balance; }
.q__h:focus { outline: none; }
.q__h:focus-visible { outline: 3px solid var(--card-focus); outline-offset: 4px; border-radius: 6px; }
.q__opts { display: grid; gap: 10px; }
.q-opt, .q-age, .q-pay { position: relative; width: 100%; border: 1px solid var(--card-line); background: var(--card-field); font: inherit; color: var(--card-ink); text-align: left; cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.q-opt:hover, .q-age:hover, .q-pay:hover { border-color: var(--card-focus); box-shadow: 0 12px 26px -18px var(--card-shadow); transform: translateY(-2px); }
.q-opt:focus-visible, .q-age:focus-visible, .q-pay:focus-visible { outline: 3px solid var(--card-focus); outline-offset: 2px; }
.q-opt[aria-pressed="true"], .q-age[aria-pressed="true"], .q-pay[aria-pressed="true"] { border-color: var(--card-focus); box-shadow: 0 0 0 3px var(--card-ring); }

/* Hva trenger dere: bilde, kort tittel og én linje */
.q-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 18px; }
.q-vis { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 14px; background: var(--card-tint); }
.q-vis svg { width: 44px; height: 42px; overflow: visible; }
.qv-page { fill: var(--card-field); stroke: var(--card-ink); stroke-width: 1.4; }
.qv-sub { fill: var(--card-field); stroke: var(--card-ink); stroke-width: 1.2; }
.qv-line { fill: none; stroke: var(--card-focus); stroke-width: 1.4; stroke-linecap: round; }
.qv-bar { fill: var(--card-line); }
.qv-hero { fill: var(--mint); }
.qv-btn { fill: var(--card-focus); }
.qv-flag { fill: var(--card-focus); }
.qv-pole { fill: var(--card-ink); }
.q-txt { display: grid; gap: 2px; min-width: 0; }
.q-txt b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.015em; }
.q-txt small { font-size: 0.9375rem; line-height: 1.4; color: var(--card-muted); text-wrap: pretty; }
.q-go { width: 18px; height: 18px; color: var(--card-focus); transition: transform var(--dur) var(--ease); }
.q-opt:hover .q-go { transform: translateX(3px); }

/* Hvor gammel: årstall med en liten krok */
.q__opts--age { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.q-age { display: grid; align-content: center; gap: 2px; min-height: 72px; padding: 12px 14px; border-radius: 16px; }
.q-age b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.015em; }
.q-age small { font-size: 0.875rem; line-height: 1.35; color: var(--card-muted); }
.q-age--wide { grid-column: 1 / -1; min-height: 60px; }

/* Betaling: prisen stort */
.q-pay { display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: 18px; }
.q-pay small { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--card-focus); }
.q-pay b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.q-pay__fra, .q-pay__u { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--card-muted); }
.q-pay__note { font-size: 0.875rem; line-height: 1.4; color: var(--card-muted); text-wrap: pretty; }
.q__note { margin-top: -4px; font-size: 0.8125rem; color: var(--card-muted); }

.q__skip { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--card-focus); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; text-align: left; text-wrap: balance; }
.q__skip:hover { color: var(--card-ink); }

/* Anbefalingen: en liten nettside av riktig type stiger opp, så navn og pris */
.rec__vis { position: relative; display: grid; justify-items: center; height: 150px; margin: 0 0 4px; overflow: hidden; border-radius: 18px;
  background: radial-gradient(80% 90% at 50% 0%, var(--glow-soft), var(--glow-0) 70%), linear-gradient(180deg, var(--deep), var(--night)); }
.rv-stage { position: relative; width: min(300px, 86%); height: 100%; container-type: inline-size; }
.rv-page { position: absolute; left: 0; right: 0; top: 20px; padding-bottom: 6cqw; }
.rv-page .th__h { font-size: 6.2cqw; }
.rv-flag { position: absolute; right: -4%; top: 8px; z-index: 1; padding: 5px 12px; border-radius: 999px; background: var(--mint); color: var(--navy); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; visibility: hidden; transform: rotate(4deg); }
[data-rec-vis="kampanje"] .rv-flag { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .rec__vis--in .rv-page { animation: rv-rise 0.6s cubic-bezier(.2, .8, .2, 1) 0.05s both; }
  .rec__vis--in .rv-subs > span { animation: st-up 0.45s var(--ease) both; }
  .rec__vis--in .rv-subs > span:nth-child(1) { animation-delay: 0.35s; } .rec__vis--in .rv-subs > span:nth-child(2) { animation-delay: 0.45s; } .rec__vis--in .rv-subs > span:nth-child(3) { animation-delay: 0.55s; }
  .rec__vis--in .rv-flag { animation: st-up 0.5s var(--ease) 0.45s both; }
  .q--in { animation: q-in 0.32s var(--ease) both; }
}
@keyframes rv-rise { from { transform: translateY(110px); } to { transform: none; } }
@keyframes q-in { from { transform: translateY(10px); filter: opacity(0); } to { transform: none; filter: opacity(1); } }
.rec__label { margin-bottom: -10px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--card-focus); }
.rec__h { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem); }
.rec__hva { margin-top: -8px; font-size: 1rem; line-height: 1.5; color: var(--card-muted); text-wrap: pretty; }
.rec__pris { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--card-line); background: var(--card-field); }
.rec__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-family: var(--font-display); color: var(--card-ink); }
.rec__big b { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.rec__big small, .rec__big span { font-size: 1rem; font-weight: 600; color: var(--card-muted); }
.rec__linje { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; color: var(--card-muted); text-wrap: pretty; }
.rec__hvorfor { padding-left: 14px; border-left: 3px solid var(--card-focus); font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--card-ink); text-wrap: pretty; }
.rec__trygg { margin-top: -6px; text-align: center; font-size: 0.875rem; color: var(--card-muted); text-wrap: balance; }
.rec__andre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 14px; border-top: 1px solid var(--card-line); font-size: 0.9375rem; color: var(--card-muted); }
.rec__andre > div { display: flex; flex-wrap: wrap; gap: 8px; }
.rec__bytt { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--card-line); background: var(--card-field); font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--card-ink); cursor: pointer; transition: border-color var(--dur) var(--ease); }
.rec__bytt:hover { border-color: var(--card-focus); }
.rec__bytt:focus-visible { outline: 3px solid var(--card-focus); outline-offset: 2px; }

/* Kontaktinfo */
.q__valg { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: -4px; padding: 8px 14px; border-radius: 12px; background: var(--card-tint); font-size: 0.9375rem; font-weight: 600; color: var(--card-ink); }
.q__valg button, .fl__more { justify-self: start; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--card-focus); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.q__valg button:hover, .fl__more:hover { color: var(--card-ink); }
.fl__more { min-height: 44px; margin-top: -6px; }
.fl__opt { font-weight: 400; color: var(--card-muted); }

/* Kortet står fast øverst når høyden endrer seg mellom stegene, i stedet for å sentreres på nytt */
@media (min-width: 1000px) { .ask .card { align-self: start; } .ask__head { align-self: start; } }
/* Smale skjermer: mindre luft i kortet, og svarene i én kolonne */
@media (max-width: 400px) {
  .card { padding: 20px 16px 22px; border-radius: 24px; }
  .q-opt { gap: 10px; padding: 10px 10px 10px 10px; }
  .q-vis { width: 48px; height: 48px; border-radius: 12px; }
  .q-vis svg { width: 36px; height: 34px; }
}
@media (max-width: 339px) {
  .card .btn--block { padding-inline: 14px; font-size: 1rem; }
  .wz-label { display: none; }
  .q__opts--age { grid-template-columns: minmax(0, 1fr); }
  .q-go { display: none; }
  .q-opt { grid-template-columns: auto minmax(0, 1fr); }
}
/* Etiketten over gaffelen får bryte på svært smale skjermer */
@media (max-width: 699px) { .fork__head { white-space: normal; text-wrap: balance; } }
/* Svært smale skjermer: lange ord og bundne tall får bryte i stedet for å skyve siden ut */
.faq__list > *, .faq__more > * { min-width: 0; }
.faq__list p, .faq__list summary, .age-card__list p { overflow-wrap: break-word; }

/* Nettside med undersider: forsiden til venstre, undersidene som kort til høyre (én nettside, ikke flere) */
[data-rec-vis="nettside"] .rv-page { right: 36%; }
[data-rec-vis="nettside"] .rv-page .th__nav span, [data-rec-vis="nettside"] .rv-page .th__nav em { display: none; }
[data-rec-vis="nettside"] .rv-page .th__h { font-size: 5.4cqw; }
.rv-subs { position: absolute; right: 0; top: 26px; width: 29%; display: none; gap: 2.6cqw; }
[data-rec-vis="nettside"] .rv-subs { display: grid; }
.rv-subs::before { content: ""; position: absolute; left: -4cqw; top: 5cqw; bottom: 5cqw; width: 1.5px; background: var(--mint); }
.rv-subs > span { position: relative; display: flex; align-items: center; gap: 1.6cqw; padding: 2.2cqw 2.4cqw; border-radius: 2.4cqw; background: var(--ed-b-paper); color: var(--ed-b-ink); font-size: 3.3cqw; font-weight: 700; white-space: nowrap; box-shadow: 0 2cqw 5cqw -2cqw var(--shadow); }
.rv-subs > span::before { content: ""; position: absolute; left: -4cqw; top: 50%; width: 4cqw; height: 1.5px; background: var(--mint); }
.rv-subs > span::after { content: ""; order: -1; flex: none; width: 2.4cqw; height: 2.4cqw; border-radius: 0.8cqw; background: var(--ed-b-accent); }

/* Betaling: Føniks er det merkede valget (natt, fuglen og fordelene), «alt på én gang» et stille alternativ under */
.q-pay__name { font-size: 0.9375rem; font-weight: 700; color: var(--card-ink); }
.q-pay--foniks { gap: 8px; padding: 18px 18px 20px; border-color: var(--glass-edge); color: var(--white);
  background: radial-gradient(90% 80% at 100% 0%, var(--glow-soft), var(--glow-0) 70%), linear-gradient(160deg, var(--deep-3), var(--deep)); box-shadow: 0 18px 40px -24px var(--card-shadow); }
.q-pay--foniks:hover { border-color: var(--mint); box-shadow: 0 22px 44px -22px var(--card-shadow); }
.q-pay--foniks[aria-pressed="true"] { border-color: var(--mint); box-shadow: 0 0 0 3px var(--glow-soft); }
.q-pay--foniks:focus-visible { outline-color: var(--mint); }
.q-pay__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; color: var(--white); }
.q-pay__bird { width: 30px; height: 30px; flex: none; }
.q-pay__brand em { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--mint); color: var(--navy); font-family: var(--font-body); font-size: 0.75rem; font-style: normal; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.q-pay--foniks .q-pay__name { color: var(--grey); font-weight: 600; }
.q-pay--foniks b { color: var(--white); }
.q-pay--foniks .q-pay__fra, .q-pay--foniks .q-pay__u { color: var(--grey); }
.q-pay__list { display: grid; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--glass-edge); }
.q-pay__list > span { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.9375rem; line-height: 1.4; color: var(--white); text-wrap: pretty; }
.q-pay__list svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--mint); color: var(--navy); }
.q-pay--once { gap: 4px; padding: 14px 16px; }
.q-pay--once b { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); }

/* Anbefalingen: Føniks-merket over prisen når de har valgt fast månedspris */
.rec__brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--card-line); font-size: 0.875rem; line-height: 1.35; color: var(--card-muted); text-wrap: pretty; }
.rec__brand svg { width: 26px; height: 26px; flex: none; }
.rec__brand b { font-family: var(--font-display); font-weight: 800; color: var(--card-ink); }

/* ---------- Anbefalingen som det store øyeblikket (24.10.2026) ---------- */
.ask .card { view-transition-name: wz-card; }
.rec { gap: 18px; }
.rec__body { display: grid; gap: 16px; align-content: start; min-width: 0; }
.rec__vis { height: 240px; }
.rv-page { top: 44px; }
.rv-line { position: absolute; left: -10%; right: -10%; top: -2px; height: 3px; border-radius: 3px; visibility: hidden;
  background: linear-gradient(90deg, var(--fire-0), var(--mint) 22%, var(--fire-gold) 62%, var(--fire-0)); box-shadow: 0 0 16px 2px var(--fire-glow); }
.rv-em { position: absolute; top: -3px; left: var(--x); width: 5px; height: 5px; border-radius: 50%; background: var(--fire-gold); box-shadow: 0 0 8px 2px var(--fire-glow); visibility: hidden; }
.rv-stamp { position: absolute; right: -7%; top: 18px; z-index: 2; display: grid; place-items: center; width: clamp(58px, 22cqw, 84px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--deep);
  background: linear-gradient(135deg, var(--fire-gold), var(--fire-amber) 50%, var(--fire-ember)); box-shadow: 0 10px 24px -10px var(--shadow), 0 0 26px -6px var(--fire-glow);
  font-family: var(--font-display); font-size: clamp(0.875rem, 4.6cqw, 1.25rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; text-align: center; color: var(--navy); transform: rotate(-8deg); }
[data-rec-vis="nettside"] .rv-stamp { right: 30%; }
.rv-year { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 6px 5px 12px; border-radius: 999px; background: var(--veil); border: 1px solid var(--glass-edge); font-size: 0.8125rem; font-weight: 600; color: var(--grey); white-space: nowrap; }
.rv-year[data-old] { padding-left: 6px; }
.rv-year b { padding: 3px 10px; border-radius: 999px; font-family: var(--font-display); font-size: 0.875rem; font-weight: 800; }
.rv-year__old { color: var(--grey); text-decoration: line-through; text-decoration-color: var(--fire-ember); }
.rv-year__arrow { font-style: normal; color: var(--mint); }
.rv-year__new { background: linear-gradient(90deg, var(--fire-gold), var(--fire-amber) 55%, var(--fire-ember)); color: var(--navy); }
.rv-year:not([data-old]) .rv-year__old, .rv-year:not([data-old]) .rv-year__arrow, .rv-year[data-old] .rv-year__label { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .rec__vis--in .rv-page { animation: rv-up 0.95s cubic-bezier(.25, .8, .2, 1) 0.1s both; }
  .rec__vis--in .rv-line { animation: rv-line 1.6s ease-out 0.1s both; }
  .rec__vis--in .rv-em { animation: rv-em 1.5s ease-out calc(var(--d) + 0.55s) both; }
  .rec__vis--in .rv-year__old { animation: rv-old 1.2s ease-out both; }
  .rec__vis--in .rv-year__arrow, .rec__vis--in .rv-year__new { animation: st-up 0.45s var(--ease) 1s both; }
  .rec__vis--in .rv-stamp { animation: rv-stamp 0.6s cubic-bezier(.2, .9, .25, 1.15) 1.15s both; }
  .rec__vis--in .rv-subs > span:nth-child(1) { animation-delay: 1.05s; } .rec__vis--in .rv-subs > span:nth-child(2) { animation-delay: 1.15s; } .rec__vis--in .rv-subs > span:nth-child(3) { animation-delay: 1.25s; }
  .rec__vis--in .rv-flag { animation-delay: 1.1s; }
  .rec__vis--in ~ .rec__body > * { animation: st-up 0.5s var(--ease) both; }
  .rec__vis--in ~ .rec__body > :nth-child(1) { animation-delay: 0.35s; } .rec__vis--in ~ .rec__body > :nth-child(2) { animation-delay: 0.42s; }
  .rec__vis--in ~ .rec__body > :nth-child(3) { animation-delay: 0.5s; } .rec__vis--in ~ .rec__body > :nth-child(4) { animation-delay: 0.6s; }
  .rec__vis--in ~ .rec__body > :nth-child(5) { animation-delay: 0.75s; } .rec__vis--in ~ .rec__body > :nth-child(n+6) { animation-delay: 0.85s; }
}
@keyframes rv-up { from { transform: translateY(240px); } to { transform: none; } }
@keyframes rv-line { 0% { visibility: visible; filter: opacity(1); } 65% { filter: opacity(1); } 100% { visibility: hidden; filter: opacity(0); } }
@keyframes rv-em { 0% { visibility: visible; transform: translate(0, 0); filter: opacity(0); } 15% { filter: opacity(1); } 100% { visibility: hidden; transform: translate(4px, -60px); filter: opacity(0); } }
@keyframes rv-old { 0%, 70% { color: var(--white); text-decoration-color: var(--fire-0); } 100% { color: var(--grey); text-decoration-color: var(--fire-ember); } }
@keyframes rv-stamp { from { transform: translateY(-16px) rotate(-34deg); filter: opacity(0); } to { transform: rotate(-8deg); filter: opacity(1); } }

/* Store skjermer: kortet fyller bredden, scenen til venstre og anbefalingen til høyre */
@media (min-width: 1000px) {
  .ask[data-wide] .ask__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card" "more"; }
  .ask[data-wide] .ask__more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
  .ask[data-wide] .ask__more .folk { margin-top: 0; }
  .ask[data-wide] .card { padding: clamp(28px, 2.6vw, 40px); }
  .ask[data-wide] .rec { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: clamp(32px, 3.4vw, 56px); align-items: center; }
  .ask[data-wide] .rec__vis { height: auto; min-height: 460px; align-self: stretch; border-radius: 22px; }
  .ask[data-wide] .rv-stage { width: min(460px, 80%); }
  .ask[data-wide] .rv-page { top: 96px; }
  .ask[data-wide] .rv-year { font-size: 0.9375rem; padding: 7px 8px 7px 14px; }
  .ask[data-wide] .rv-year b { font-size: 1rem; padding: 4px 12px; }
  .ask[data-wide] .rec__h { font-size: clamp(2.5rem, 1.8rem + 1.6vw, 3.5rem); }
  .ask[data-wide] .rec__big b { font-size: clamp(2.75rem, 2rem + 1.8vw, 3.75rem); }
  @keyframes rv-up { from { transform: translateY(420px); } to { transform: none; } }
}
::view-transition-group(wz-card) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* Scenen i anbefalingen, runde 2: nattehimmel med nordlys og stjerner, et ekte nettleservindu som stiger opp fra bunnen */
.rec__vis { --top: 54px;
  background: radial-gradient(55% 45% at 25% 0%, var(--aurora-1), var(--aurora-0) 70%), radial-gradient(45% 40% at 90% 5%, var(--aurora-3), var(--aurora-0) 70%), radial-gradient(70% 60% at 50% 100%, var(--glow-soft), var(--glow-0) 70%), linear-gradient(180deg, var(--night-top), var(--night)); }
.rec__vis::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(1.4px 1.4px at 8% 22%, var(--star), var(--glow-0)), radial-gradient(1px 1px at 19% 9%, var(--star), var(--glow-0)), radial-gradient(1.6px 1.6px at 34% 16%, var(--star), var(--glow-0)),
    radial-gradient(1px 1px at 52% 7%, var(--star), var(--glow-0)), radial-gradient(1.3px 1.3px at 67% 19%, var(--star), var(--glow-0)), radial-gradient(1px 1px at 81% 11%, var(--star), var(--glow-0)),
    radial-gradient(1.5px 1.5px at 93% 26%, var(--star), var(--glow-0)), radial-gradient(1px 1px at 4% 48%, var(--star), var(--glow-0)), radial-gradient(1.2px 1.2px at 96% 52%, var(--star), var(--glow-0)); }
.rv-stage { width: min(330px, 88%); }
.rv-page { top: var(--top); bottom: 0; padding-top: 0; overflow: hidden; }
.rv-bar { display: flex; align-items: center; gap: 1.3cqw; margin: 0 -5cqw 3cqw; padding: 2.2cqw 3cqw; border-bottom: 1px solid var(--nw-line); background: var(--nw-paper); }
.rv-bar i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: var(--card-line); }
.rv-bar span { margin: 0 auto; padding: 0.8cqw 4cqw; border-radius: 999px; background: var(--card-field); font-size: 2.4cqw; color: var(--card-muted); }
.rv-page .th__svc { margin: 4cqw -5cqw 0; padding: 4cqw 5cqw; }
.rv-line { top: -1px; }
.rv-em { top: -2px; }
.rv-year { top: 14px; bottom: auto; left: 14px; }
.rv-stamp { top: calc(var(--top) - 26px); right: -6%; }
[data-rec-vis="nettside"] .rv-stamp { right: 28%; }
.rv-subs { top: calc(var(--top) + 18%); }
.rv-flag { top: calc(var(--top) - 34px); right: 18%; }
@media (min-width: 1000px) {
  .ask[data-wide] .rec__vis { --top: 92px; }
  .ask[data-wide] .rv-stage { width: min(500px, 84%); }
  .ask[data-wide] .rv-year { top: 22px; left: 22px; }
}

/* Mobil: «Helt ny!» står fritt (ikke over årstallet), og Føniks-linjen i prisen trenger ingen strek under */
.rec__brand { margin: 10px 0 0; padding: 10px 0 0; border-bottom: 0; border-top: 1px solid var(--card-line); }
@media (max-width: 999px) {
  .rv-stamp { top: calc(var(--top) + 6px); right: -5%; }
  [data-rec-vis="nettside"] .rv-stamp { right: 30%; top: calc(var(--top) - 22px); }
  .rv-year { max-width: 64%; }
}

/* ======================================================================================================================
   Veiviseren som eget lag (24.10.2026, runde 3). Hele skjermen, fast størrelse: stegene ligger oppå hverandre i samme rute og
   glir inn og ut, så ingenting rundt flytter seg. Natt med nordlys, store svarkort med hake, anbefalingen som det store
   øyeblikket, papir der man skriver.
   ====================================================================================================================== */
html[data-tk] { overflow: hidden; }
html[data-tk] body { padding-right: var(--sbw, 0px); }

/* Inngangen på siden: står stille */
.ask .tke { grid-area: card; align-self: start; }
.tke { display: grid; gap: 14px; padding: clamp(22px, 2.6vw, 34px); border-radius: 28px; border: 1px solid var(--glass-edge);
  background: radial-gradient(90% 70% at 100% 0%, var(--glow-soft), var(--glow-0) 70%), linear-gradient(180deg, var(--glass-a), var(--glass-b)); box-shadow: inset 0 1px 0 var(--glass-top), 0 30px 70px -40px var(--shadow); }
.tke__kick { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.tke__h { margin-top: -6px; font-family: var(--font-display); font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--white); }
.tke__opts { display: grid; gap: 10px; }
.tke-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 64px; padding: 8px 16px 8px 8px; border-radius: 18px; border: 1px solid var(--glass-edge); background: var(--glass-b);
  font: inherit; color: var(--white); text-align: left; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tke-opt:hover { background: var(--glass-a); border-color: var(--mint); }
.tke-opt:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.tke-opt b { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; }
.tke-opt > svg { width: 18px; height: 18px; color: var(--mint); transition: transform var(--dur) var(--ease); }
.tke-opt:hover > svg { transform: translateX(3px); }
.tke-opt__vis { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--paper); }
.tke-opt__vis svg { width: 36px; height: 34px; overflow: visible; }
.tke .btn { margin-top: 6px; }
.tke__small { text-align: center; font-size: 0.875rem; color: var(--grey); }
.tke__small a { color: var(--mint); }

/* Selve laget */
.tk { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
  background: var(--night); color: var(--white); font-family: var(--font-body); }
.tk[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.tk::backdrop { background: var(--night); }
@media (prefers-reduced-motion: no-preference) {
  .tk[open] { animation: tk-open 0.4s cubic-bezier(.3, .8, .2, 1) both; }
  .tk[open]::backdrop { animation: tk-fade 0.4s ease both; }
  .tk[data-closing] { animation: tk-close 0.3s cubic-bezier(.5, 0, .7, .4) both; }
  .tk[data-closing]::backdrop { animation: tk-fade 0.3s ease reverse both; }
}
@keyframes tk-open { from { clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); } to { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); } }
@keyframes tk-close { from { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); } to { clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); } }
@keyframes tk-fade { from { background: var(--glow-0); } to { background: var(--night); } }

.tk__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(1200px 520px at 50% -10%, var(--glow-soft), var(--glow-0) 70%), linear-gradient(180deg, var(--night-top), var(--night) 60%); }
.tk__aur { position: absolute; width: 70vmax; height: 34vmax; border-radius: 50%; filter: blur(60px); }
.tk__aur--1 { left: -18vmax; top: -16vmax; background: var(--aurora-1); }
.tk__aur--2 { right: -20vmax; top: -12vmax; background: var(--aurora-3); }
.tk__stars { position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 8% 22%, var(--star), var(--glow-0)), radial-gradient(1px 1px at 19% 9%, var(--star), var(--glow-0)), radial-gradient(1.6px 1.6px at 34% 16%, var(--star), var(--glow-0)),
  radial-gradient(1px 1px at 52% 7%, var(--star), var(--glow-0)), radial-gradient(1.3px 1.3px at 67% 19%, var(--star), var(--glow-0)), radial-gradient(1px 1px at 81% 11%, var(--star), var(--glow-0)),
  radial-gradient(1.5px 1.5px at 93% 26%, var(--star), var(--glow-0)), radial-gradient(1px 1px at 4% 48%, var(--star), var(--glow-0)), radial-gradient(1.2px 1.2px at 96% 52%, var(--star), var(--glow-0)),
  radial-gradient(1px 1px at 14% 78%, var(--star), var(--glow-0)), radial-gradient(1.3px 1.3px at 88% 84%, var(--star), var(--glow-0)), radial-gradient(1px 1px at 44% 92%, var(--star), var(--glow-0)); }
@media (prefers-reduced-motion: no-preference) {
  .tk__aur--1 { animation: tk-aur 18s ease-in-out infinite alternate; }
  .tk__aur--2 { animation: tk-aur 22s ease-in-out -7s infinite alternate-reverse; }
}
@keyframes tk-aur { from { transform: translate(0, 0) rotate(-6deg); } to { transform: translate(8vmax, 4vmax) rotate(6deg); } }

.tk__top { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: calc(14px + env(safe-area-inset-top)) clamp(16px, 3vw, 32px) 14px; }
.tk__logo { height: 28px; width: auto; }
.tk__prog { display: flex; gap: 6px; }
.tk__prog i { width: clamp(22px, 4vw, 44px); height: 4px; border-radius: 4px; background: var(--glass-edge); transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.tk__prog i.on { background: var(--mint); }
.tk__prog i.now { box-shadow: 0 0 12px var(--glow); }
.tk__prog i[hidden] { display: none; }
.tk__x { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 18px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-a);
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--white); cursor: pointer; transition: background var(--dur) var(--ease); }
.tk__x:hover { background: var(--glass-hover); }
.tk__x svg { width: 16px; height: 16px; }
.tk__x:focus-visible, .tk__back:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

.tk__form { position: relative; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.tk__stage { position: relative; display: grid; min-height: 0; }
.tk-step { grid-area: 1 / 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--glass-edge) transparent; }
.tk-step[hidden] { display: none; }
.tk-step[data-anim^="out"] { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .tk-step[data-anim="in-fwd"] { animation: tk-in-r 0.4s cubic-bezier(.2, .8, .2, 1) both; }
  .tk-step[data-anim="out-fwd"] { animation: tk-out-l 0.32s cubic-bezier(.5, 0, .75, .4) both; }
  .tk-step[data-anim="in-back"] { animation: tk-in-l 0.4s cubic-bezier(.2, .8, .2, 1) both; }
  .tk-step[data-anim="out-back"] { animation: tk-out-r 0.32s cubic-bezier(.5, 0, .75, .4) both; }
}
@keyframes tk-in-r { from { transform: translateX(48px); filter: opacity(0); } to { transform: none; filter: opacity(1); } }
@keyframes tk-in-l { from { transform: translateX(-48px); filter: opacity(0); } to { transform: none; filter: opacity(1); } }
@keyframes tk-out-l { from { transform: none; filter: opacity(1); } to { transform: translateX(-48px); filter: opacity(0); } }
@keyframes tk-out-r { from { transform: none; filter: opacity(1); } to { transform: translateX(48px); filter: opacity(0); } }
.tk-step__in { display: grid; align-content: start; gap: 14px; width: min(1080px, 100% - 2 * clamp(16px, 4vw, 48px)); margin: clamp(12px, 6vh, 64px) auto clamp(24px, 4vh, 48px); }
.tk-step__in--narrow { width: min(600px, 100% - 2 * clamp(16px, 4vw, 48px)); }
.tk-kick { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); }
.tk-h { font-family: var(--font-display); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; color: var(--white); text-wrap: balance; }
.tk-h:focus { outline: none; }
.tk-h:focus-visible { outline: 3px solid var(--mint); outline-offset: 6px; border-radius: 8px; }
.tk-sub { max-width: 52ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.tk-link { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--mint); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; text-align: left; }
.tk-link:hover { color: var(--white); }

/* Felles for svarkortene: glass, løft ved hover, mint ring og hake når valgt, de andre dempes et øyeblikk */
.tk-opt, .tk-year, .tk-none, .tk-pay { position: relative; border: 1px solid var(--glass-edge); background: linear-gradient(180deg, var(--glass-a), var(--glass-b)); box-shadow: inset 0 1px 0 var(--glass-top);
  font: inherit; color: var(--white); text-align: left; cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease), background var(--dur) var(--ease); }
.tk-opt:hover, .tk-year:hover, .tk-none:hover, .tk-pay:hover { transform: translateY(-3px); border-color: var(--mint); box-shadow: inset 0 1px 0 var(--glass-top), 0 24px 50px -28px var(--glow); }
.tk-opt:focus-visible, .tk-year:focus-visible, .tk-none:focus-visible, .tk-pay:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.tk-opt[aria-pressed="true"], .tk-year[aria-pressed="true"], .tk-none[aria-pressed="true"], .tk-pay[aria-pressed="true"] { border-color: var(--mint); box-shadow: inset 0 1px 0 var(--glass-top), 0 0 0 3px var(--glow-soft), 0 24px 50px -28px var(--glow); }
[data-picked] :is(.tk-opt, .tk-year, .tk-none, .tk-pay):not([aria-pressed="true"]) { filter: opacity(0.4); }
.tk-check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: var(--navy); visibility: hidden; transform: scale(0.6); filter: opacity(0); transition: transform 0.3s cubic-bezier(.3, 1.4, .5, 1), filter 0.2s ease, visibility 0s 0.3s; }
.tk-check svg { width: 16px; height: 16px; }
[aria-pressed="true"] > .tk-check { visibility: visible; transform: none; filter: opacity(1); transition: transform 0.3s cubic-bezier(.3, 1.4, .5, 1), filter 0.2s ease, visibility 0s; }

/* 1. Hva trenger dere: tre store kort med en tegning av sidetypen */
.tk-opts { display: grid; gap: 14px; margin-top: clamp(8px, 2vh, 20px); }
.tk-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 44px 12px 12px; border-radius: 22px; }
.tk-opt__vis { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 16px; background: radial-gradient(80% 80% at 50% 0%, var(--mint-soft), var(--paper) 70%); }
.tk-opt__vis svg { width: 56px; height: 54px; overflow: visible; }
.tk-opt__txt { display: grid; gap: 4px; }
.tk-opt__txt b { font-family: var(--font-display); font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; }
.tk-opt__txt small { font-size: 0.9375rem; line-height: 1.45; color: var(--grey); text-wrap: pretty; }
@media (min-width: 760px) {
  .tk-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-opt { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; padding: 14px 14px 24px; border-radius: 26px; }
  .tk-opt__vis { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 18px; }
  .tk-opt__vis svg { width: 46%; height: auto; }
  .tk-opt__txt { padding: 0 8px; }
  .tk-check { top: 22px; right: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tk-opt:hover .tk-opt__vis svg { animation: tk-bob 1.2s ease-in-out infinite alternate; }
}
@keyframes tk-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* 2. Hvor gammel: en tidslinje med årstallene */
.tk-years { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(8px, 2vh, 20px); }
.tk-years__line { display: none; }
.tk-year { display: grid; align-content: start; gap: 4px; min-height: 96px; padding: 16px 16px 18px; border-radius: 20px; }
.tk-year__dot { display: none; }
.tk-year b { font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }
.tk-year small { font-size: 0.9375rem; line-height: 1.35; color: var(--grey); }
.tk-none { display: grid; gap: 2px; justify-self: start; margin-top: 4px; padding: 14px 56px 14px 18px; border-radius: 18px; }
.tk-none b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; }
.tk-none small { font-size: 0.875rem; color: var(--grey); }
.tk-none .tk-check { top: 50%; margin-top: -14px; }
@media (min-width: 760px) {
  .tk-years { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-top: 22px; }
  .tk-years__line { display: block; position: absolute; left: 24px; right: 24px; top: 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--grey-dim), var(--mint)); }
  .tk-year { min-height: 132px; padding-top: 22px; }
  .tk-year__dot { display: block; position: absolute; left: 22px; top: -22px; width: 14px; height: 14px; border-radius: 50%; background: var(--night); border: 2px solid var(--mint); }
  .tk-year[aria-pressed="true"] .tk-year__dot { background: var(--mint); box-shadow: 0 0 14px var(--glow); }
}

/* 3. Betaling: Føniks er det merkede valget */
.tk-pays { display: grid; gap: 14px; margin-top: clamp(8px, 2vh, 20px); }
.tk-pay { display: grid; align-content: start; gap: 8px; padding: 20px 22px 22px; border-radius: 24px; }
.tk-pay--foniks { border-color: var(--mint); background: radial-gradient(90% 80% at 100% 0%, var(--glow-soft), var(--glow-0) 70%), linear-gradient(160deg, var(--deep-3), var(--deep)); }
.tk-pay__brand { display: flex; align-items: center; gap: 10px; padding-right: 40px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }
.tk-pay__bird { width: 34px; height: 34px; flex: none; }
.tk-pay__brand em { padding: 3px 10px; border-radius: 999px; background: var(--mint); color: var(--navy); font-family: var(--font-body); font-size: 0.75rem; font-style: normal; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.tk-pay__name { font-size: 1rem; font-weight: 600; color: var(--grey); }
.tk-pay__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-family: var(--font-display); font-size: clamp(2.25rem, 1.7rem + 2vw, 3.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.tk-pay__fra, .tk-pay__u { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--grey); }
.tk-pay__list { display: grid; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--glass-edge); }
.tk-pay__list > span { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 1rem; line-height: 1.4; text-wrap: pretty; }
.tk-pay__list svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--mint); color: var(--navy); }
.tk-pay--once .tk-pay__price { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.tk-pay__note { font-size: 0.9375rem; line-height: 1.45; color: var(--grey); text-wrap: pretty; }
@media (min-width: 760px) { .tk-pays { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }

/* 4. Anbefalingen: scenen og svaret side om side */
.tk-rec { gap: 24px; }
.tk-rec .rec__vis { margin: 0; height: clamp(250px, 44vh, 420px); border-radius: 24px; border: 1px solid var(--glass-edge); --top: 60px; }
.tk-rec .rv-stage { width: min(460px, 84%); }
.tk-rec__body { display: grid; align-content: start; gap: 14px; min-width: 0; }
.tk-rec__h { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); background: linear-gradient(90deg, var(--white) 0%, var(--mint) 60%, var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.tk-rec__hva { margin-top: -4px; font-size: 1.0625rem; line-height: 1.5; color: var(--lead); text-wrap: pretty; }
.tk-rec__pris { padding: 18px 20px; border-radius: 20px; border: 1px solid var(--glass-edge); background: linear-gradient(180deg, var(--glass-a), var(--glass-b)); box-shadow: inset 0 1px 0 var(--glass-top); }
.tk-rec__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-family: var(--font-display); }
.tk-rec__big b { font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.tk-rec__big small, .tk-rec__big span { font-size: 1.0625rem; font-weight: 600; color: var(--grey); }
.tk-rec__linje { margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.tk-rec__brand { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--glass-edge); font-size: 0.9375rem; color: var(--grey); text-wrap: pretty; }
.tk-rec__brand svg { width: 28px; height: 28px; flex: none; }
.tk-rec__brand b { font-family: var(--font-display); color: var(--white); }
.tk-rec__hvorfor { padding-left: 14px; border-left: 3px solid var(--mint); font-size: 1.0625rem; font-weight: 600; line-height: 1.45; color: var(--white); text-wrap: pretty; }
.tk-rec__cta { min-height: 58px; font-size: 1.125rem; }
.tk-rec__andre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 0.9375rem; color: var(--grey); }
.tk-rec__andre > div { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-chip { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-a); font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--white); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.tk-chip:hover { border-color: var(--mint); background: var(--glass-hover); }
.tk-chip:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .rec__vis--in ~ .tk-rec__body > * { animation: st-up 0.5s var(--ease) both; }
  .rec__vis--in ~ .tk-rec__body > :nth-child(1) { animation-delay: 0.3s; } .rec__vis--in ~ .tk-rec__body > :nth-child(2) { animation-delay: 0.38s; }
  .rec__vis--in ~ .tk-rec__body > :nth-child(3) { animation-delay: 0.46s; } .rec__vis--in ~ .tk-rec__body > :nth-child(4) { animation-delay: 0.56s; }
  .rec__vis--in ~ .tk-rec__body > :nth-child(5) { animation-delay: 0.7s; } .rec__vis--in ~ .tk-rec__body > :nth-child(n+6) { animation-delay: 0.85s; }
}
@media (min-width: 900px) {
  .tk-rec { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: center; }
  .tk-rec .rec__vis { height: clamp(380px, 62vh, 560px); --top: 96px; }
  .tk-rec .rv-stage { width: min(500px, 84%); }
  .tk-rec .rv-year { top: 22px; left: 22px; font-size: 0.9375rem; }
  .tk-rec .rv-year b { font-size: 1rem; padding: 4px 12px; }
  .tk-rec .rv-stamp { top: calc(var(--top) - 30px); }
  .tk-rec [data-rec-vis="nettside"] .rv-stamp { right: 28%; }
}

/* 5. Kontakt: papirkortet */
.tk-valg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; justify-self: start; padding: 8px 16px 8px 10px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-a); font-size: 0.9375rem; font-weight: 600; }
.tk-valg svg { width: 24px; height: 24px; flex: none; }
.tk-valg button { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--mint); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tk-paper { display: grid; gap: 16px; margin-top: 6px; padding: clamp(20px, 3vw, 32px); border-radius: 26px; background: var(--paper); color: var(--card-ink); box-shadow: 0 40px 90px -40px var(--card-shadow); }
.tk-paper :focus-visible { outline-color: var(--card-focus); }
.tk-paper .card__sum { margin-top: 0; }
.tk-paper .btn--ink { min-height: 56px; margin-top: 4px; }
.tk-paper__trygg { margin-top: -6px; text-align: center; font-size: 0.875rem; color: var(--card-muted); text-wrap: balance; }
.tk-paper .card__priv { margin-top: 0; }
.tk-paper .fl__more { margin-top: -6px; }

/* 6. Takk: «Helt ny!» lander med glør */
.tk-done { justify-items: center; text-align: center; margin-top: clamp(32px, 12vh, 140px); }
.tk-done__stamp { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin-bottom: 12px; border-radius: 50%; border: 5px solid var(--deep);
  background: linear-gradient(135deg, var(--fire-gold), var(--fire-amber) 50%, var(--fire-ember)); box-shadow: 0 0 60px -10px var(--fire-glow), 0 20px 40px -18px var(--shadow); color: var(--navy); transform: rotate(-8deg); }
.tk-done__stamp span { font-family: var(--font-display); font-size: 2.125rem; font-weight: 800; line-height: 0.92; letter-spacing: -0.03em; }
.tk-done__stamp .de { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--fire-gold); box-shadow: 0 0 12px 3px var(--fire-glow); visibility: hidden; }
.tk-done__h { max-width: 18ch; }
.tk-done__sub { display: block; margin-top: 0.35em; font-size: 0.5em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--lead); }
.tk-done__p { max-width: 46ch; font-size: 1.0625rem; line-height: 1.55; color: var(--lead); text-wrap: pretty; }
.tk-done__x { font-weight: 700; color: var(--white); text-wrap: balance; }
.tk-done .btn { margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .tk-step--done:not([hidden]) .tk-done__stamp { animation: done-stamp 0.7s cubic-bezier(.2, .9, .25, 1.2) 0.15s both; }
  .tk-step--done:not([hidden]) .de { animation: done-ember 1.6s cubic-bezier(.2, .6, .3, 1) 0.5s both; }
  .tk-done .de--1 { --dx: -110px; --dy: -80px; } .tk-done .de--2 { --dx: 96px; --dy: -104px; } .tk-done .de--3 { --dx: 128px; --dy: 10px; }
  .tk-done .de--4 { --dx: -124px; --dy: 24px; } .tk-done .de--5 { --dx: 8px; --dy: -140px; }
  .tk-step--done:not([hidden]) .tk-done > :not(.tk-done__stamp) { animation: st-up 0.55s var(--ease) both; }
  .tk-step--done:not([hidden]) .tk-done > :nth-child(2) { animation-delay: 0.45s; } .tk-step--done:not([hidden]) .tk-done > :nth-child(3) { animation-delay: 0.55s; }
  .tk-step--done:not([hidden]) .tk-done > :nth-child(n+4) { animation-delay: 0.65s; }
}

/* Bunnen: tilbake og en trygg linje */
.tk__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px clamp(16px, 3vw, 32px) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--bar); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tk__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass-a); font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--white); cursor: pointer; }
.tk__back svg { width: 16px; height: 16px; transform: scaleX(-1); }
.tk__back[hidden] { display: none; }
.tk__trust { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 0.875rem; color: var(--grey); text-align: right; text-wrap: balance; }
.tk__trust svg { width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 50%; background: var(--glass-a); color: var(--mint); }

@media (max-width: 599px) {
  .tk__top { grid-template-columns: auto 1fr auto; }
  .tk__prog { justify-content: center; }
  .tk__x { padding: 0; width: 44px; justify-content: center; }
  .tk__x span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tk__trust { font-size: 0.8125rem; }
  .tk__trust svg { display: none; }
  .tk-step__in { gap: 12px; }
  .tk-opt__vis { width: 64px; height: 64px; }
  .tk-opt__vis svg { width: 46px; height: 44px; }
}
@media (max-width: 359px) {
  .tk__prog i { width: 16px; }
  .tk-years { grid-template-columns: minmax(0, 1fr); }
  .tk-year { min-height: 0; }
}

/* Skjult er skjult i laget, også der en regel setter display */
.tk [hidden] { display: none; }
/* Den lille nettsiden måler seg selv, så den ikke beskjæres når undersidene står ved siden av */
.rv-page { container-type: inline-size; }
.rv-page .th__nav { font-size: 3.4cqw; }
.rv-page .th__nav b { font-size: 4.4cqw; }
.rv-page .th__h { font-size: 7.4cqw; }
[data-rec-vis="nettside"] .rv-page .th__h { font-size: 8cqw; }
.rv-page .th__btns { font-size: 3.4cqw; }
.rv-page .th__svc b { font-size: 3.2cqw; }
.rv-bar { margin: 0 -5cqw 4cqw; }
.rv-bar span { font-size: 3cqw; }
/* Lave skjermer: mindre luft over overskriften */
@media (max-height: 760px) { .tk-step__in { margin-top: clamp(8px, 3vh, 28px); } .tk-h { font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem); } }
/* Nettside med undersider: forsiden er smalere, så teksten skaleres opp og bildet legger seg under teksten */
[data-rec-vis="nettside"] .rv-page .th__nav { font-size: 5cqw; }
[data-rec-vis="nettside"] .rv-page .th__nav b { font-size: 6.4cqw; }
[data-rec-vis="nettside"] .rv-page .th__nav b svg { width: 5.4cqw; height: 5.4cqw; }
[data-rec-vis="nettside"] .rv-page .th__h { font-size: 11cqw; }
[data-rec-vis="nettside"] .rv-page .th__btns { font-size: 5cqw; }
[data-rec-vis="nettside"] .rv-page .th__row { grid-template-columns: minmax(0, 1fr); gap: 5cqw; }
[data-rec-vis="nettside"] .rv-page .th__row > div { gap: 4cqw; }
[data-rec-vis="nettside"] .rv-page .th__art { aspect-ratio: 16 / 10; }
[data-rec-vis="nettside"] .rv-page .th__svc { display: none; }
[data-rec-vis="nettside"] .rv-bar span { font-size: 4.4cqw; }
/* Telefon: knappen i anbefalingen står fast nederst mens man leser */
@media (max-width: 899px) {
  .tk-rec .rec__vis { height: 230px; --top: 52px; }
  .tk-rec__cta { position: sticky; bottom: 12px; z-index: 2; box-shadow: 0 14px 30px -10px var(--shadow), 0 10px 36px -10px var(--glow); }
}

/* ---------- Veiviseren, runde 4: nettsiden deres tar form mens de svarer (Nicolay: «still not impressive enough») ---------- */
.tk__body { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.tk__body > .tk__stage { grid-row: 2; }
.tk-pv { grid-row: 1; position: relative; display: grid; place-items: center; height: clamp(190px, 30vh, 320px); padding: 4px clamp(16px, 4vw, 48px) 0; }
.tk-scene { width: auto; height: 100%; max-width: 100%; margin: 0; }
.tk-scene .scene__card { border: 1px solid var(--glass-edge); }

/* Navnet */
.tk-name { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: clamp(4px, 1.5vh, 16px); }
.tk-name input { width: 100%; min-height: 64px; padding: 0 20px; border-radius: 18px; border: 1px solid var(--glass-edge); background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); font-weight: 700; letter-spacing: -0.01em; color: var(--white); caret-color: var(--mint); box-shadow: inset 0 1px 0 var(--glass-top); }
.tk-name input::placeholder { color: var(--grey-dim); font-weight: 600; }
.tk-name input:focus { outline: none; border-color: var(--mint); box-shadow: inset 0 1px 0 var(--glass-top), 0 0 0 4px var(--glow-soft); }
.tk-name .btn { min-height: 64px; padding: 0 28px; }
@media (max-width: 479px) { .tk-name { grid-template-columns: minmax(0, 1fr); } }

/* Det som henger på scenen: sidetypen til venstre, prisen til høyre */
.pv-type { position: absolute; left: 0.6cqw; top: 26%; z-index: 4; display: grid; gap: 1cqw; margin: 0; padding: 0; list-style: none; }
.pv-type li { justify-self: start; padding: 0.9cqw 1.8cqw 0.9cqw 1.4cqw; border-radius: 999px; background: var(--veil); border: 1px solid var(--glass-edge); box-shadow: 0 1.2cqw 3cqw -1cqw var(--shadow);
  font-size: max(0.6875rem, 1.35cqw); font-weight: 700; color: var(--white); white-space: nowrap; }
.pv-type li::before { content: ""; display: inline-block; width: 0.9cqw; height: 0.9cqw; margin-right: 0.8cqw; border-radius: 50%; background: var(--mint); vertical-align: middle; }
[data-type="nettside"] .pv-type li:not(:first-child) { margin-left: 2.4cqw; }
[data-type="nettside"] .pv-type li:first-child { background: var(--mint); color: var(--navy); border-color: transparent; }
[data-type="nettside"] .pv-type li:first-child::before { background: var(--navy); }
[data-type="kampanje"] .pv-type li:first-child { background: var(--fire-amber); color: var(--navy); border-color: transparent; }
[data-type="kampanje"] .pv-type li:first-child::before { background: var(--navy); }
.pv-price { position: absolute; right: 0.6cqw; top: 30%; z-index: 4; display: flex; align-items: baseline; gap: 0.6cqw; padding: 1.2cqw 2cqw; border-radius: 1.6cqw; background: var(--mint); color: var(--navy);
  box-shadow: 0 1.6cqw 4cqw -1cqw var(--shadow); transform: rotate(4deg); font-family: var(--font-display); }
.pv-price b { font-size: max(1.125rem, 3.4cqw); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.pv-price small, .pv-price span { font-size: max(0.6875rem, 1.3cqw); font-weight: 700; }
.pv-price::before { content: ""; position: absolute; left: 1.2cqw; top: 50%; width: 0.9cqw; height: 0.9cqw; margin-top: -0.45cqw; border-radius: 50%; background: var(--deep); }
.pv-price { padding-left: 3cqw; }
@media (prefers-reduced-motion: no-preference) {
  .pv-type li { animation: pv-pop 0.45s cubic-bezier(.2, .9, .3, 1.2) calc(var(--i) * 0.08s) both; }
  .pv-price:not([hidden]) { animation: pv-tag 0.5s cubic-bezier(.2, .9, .3, 1.2) both; }
}
@keyframes pv-pop { from { transform: translateX(-2cqw); filter: opacity(0); } to { transform: none; filter: opacity(1); } }
@keyframes pv-tag { from { transform: translateY(-3cqw) rotate(-10deg); filter: opacity(0); } to { transform: rotate(4deg); filter: opacity(1); } }
/* Når den nye siden er der, viker merkelappene for haken og «Helt ny!» */
.tk-scene[data-step="3"] .pv-price { top: 12%; right: 15cqw; transform: rotate(-3deg); }
.tk-scene[data-step="2"] .pv-price, .tk-scene[data-step="3"] .pv-price { animation: none; }

/* Ingen nettside: en tom fane i stedet for den gamle siden */
.pv-none { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 1cqw; background: var(--deep-2); color: var(--grey); text-align: center; font-size: max(0.75rem, 1.6cqw); }
.pv-none svg { width: 8cqw; height: 8cqw; filter: grayscale(1) brightness(0.8); }
.pv-none b { font-family: var(--font-display); font-size: max(0.875rem, 2.4cqw); color: var(--white); }
.tk-scene[data-none] .pv-none { display: grid; }
.tk-scene[data-none] .old { visibility: hidden; }
.tk-scene .nw-h__name { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.tk-scene[data-long] .nw-h { font-size: 3.3cqw; }

/* Stegene ved siden av forhåndsvisningen */
.tk__stage .tk-step__in { width: min(1000px, 100% - 2 * clamp(16px, 4vw, 48px)); }
@media (max-width: 639px) {
  .tk-pv { height: clamp(170px, 27vh, 240px); }
  .tk__form[data-at="kontakt"] .tk-pv, .tk__form[data-at="svar"] .tk-pv { height: clamp(220px, 34vh, 300px); }
  .tk__form[data-at="kontakt"] .tk-pv { display: none; }
  .pv-type li, .pv-price small, .pv-price span { font-size: 0.625rem; }
  .pv-price b { font-size: 1rem; }
}
@media (min-width: 1100px) {
  .tk__body { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-rows: minmax(0, 1fr); }
  .tk__body > .tk__stage { grid-row: 1; grid-column: 1; }
  .tk-pv { grid-row: 1; grid-column: 2; height: auto; padding: 0 clamp(24px, 3vw, 56px) 0 8px; }
  .tk-scene { width: 100%; height: auto; }
  .tk__stage .tk-step__in { width: min(600px, 100% - 2 * clamp(24px, 3vw, 56px)); margin-left: auto; margin-right: clamp(16px, 2vw, 40px); }
  .tk__stage .tk-step__in--narrow { width: min(560px, 100% - 2 * clamp(24px, 3vw, 56px)); }
  .tk-opts { grid-template-columns: minmax(0, 1fr); }
  .tk-opt { grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: 16px; padding: 12px 48px 12px 12px; border-radius: 22px; }
  .tk-opt__vis { width: 80px; height: 80px; aspect-ratio: auto; border-radius: 16px; }
  .tk-opt__vis svg { width: 58px; height: 56px; }
  .tk-opt__txt { padding: 0; }
  .tk-check { top: 50%; right: 14px; margin-top: -14px; }
  .tk-years { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
  .tk-years__line, .tk-year__dot { display: none; }
  .tk-year { min-height: 104px; padding-top: 16px; }
  .tk-pays { grid-template-columns: minmax(0, 1fr); }
  .tk-rec { grid-template-columns: minmax(0, 1fr); }
  .tk-rec__h { font-size: clamp(2.75rem, 1.8rem + 2.6vw, 4.25rem); }
}
/* Prisen henger på scenen mens man velger; i anbefalingen står den stort ved siden av, så lappen går */
.tk-scene[data-step="2"] .pv-price, .tk-scene[data-step="3"] .pv-price { display: none; }
/* Glimtet idet den nye siden er der */
@media (prefers-reduced-motion: no-preference) {
  .tk-scene[data-step="2"] .scene__card { animation: pv-glow 1.4s ease-out both; }
}
@keyframes pv-glow { 0% { box-shadow: 0 0 0 0 var(--fire-0); } 25% { box-shadow: 0 0 90px 10px var(--fire-glow); } 100% { box-shadow: 0 0 0 0 var(--fire-0); } }
@media (min-width: 1100px) {
  .tk__body { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .tk__stage .tk-step__in { width: min(560px, 100% - 2 * clamp(24px, 3vw, 48px)); }
}
@media (max-width: 639px) { .pv-type { display: none; } }

/* ======================================================================================================================
   Veiviseren, runde 5 (Nicolay: «way too busy. Make it fun, make it interactive»): rolige svarkort til venstre, en skisse av
   nettsiden deres til høyre som tegnes ferdig mens de svarer, og som blir en ekte nettside i anbefalingen.
   ====================================================================================================================== */
.tk__aur { filter: blur(70px) opacity(0.55); }
.tk__prog { display: block; width: clamp(110px, 22vw, 260px); height: 4px; overflow: hidden; border-radius: 4px; background: var(--glass-edge); }
.tk__prog b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--mint), var(--aqua)); transform: scaleX(0.06); transform-origin: left; transition: transform 0.5s var(--ease); }

/* Svarkortene: ikon, én linje, hake */
.tk .tk-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: clamp(6px, 1.6vh, 16px); }
.tk .tk-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 68px; padding: 12px 52px 12px 12px; border-radius: 18px; }
.tk .tk-opt__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--glass-a); border: 1px solid var(--glass-edge); color: var(--mint); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.tk .tk-opt__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tk .tk-opt__txt { display: grid; gap: 2px; padding: 0; }
.tk .tk-opt__txt b { font-family: var(--font-display); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 700; letter-spacing: -0.015em; }
.tk .tk-opt__txt small { font-size: 0.875rem; color: var(--grey); }
.tk .tk-opt .tk-check { top: 50%; right: 14px; margin-top: -14px; }
.tk .tk-opt[aria-pressed="true"] { background: linear-gradient(180deg, var(--tone-a), var(--glass-b)); }
.tk .tk-opt[aria-pressed="true"] .tk-opt__ic { background: var(--mint); color: var(--navy); }
.tk .tk-opts--years { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tk .tk-opt--year { grid-template-columns: minmax(0, 1fr); padding: 14px 44px 14px 18px; }
.tk .tk-opt--year:last-child { grid-column: 1 / -1; }
.tk .tk-opt--year .tk-opt__txt b { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); font-weight: 800; letter-spacing: -0.03em; }
.tk .tk-pays { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: clamp(6px, 1.6vh, 16px); }
.tk .tk-pay { gap: 6px; padding: 16px 52px 18px 18px; border-radius: 20px; }
.tk .tk-pay .tk-check { top: 18px; right: 16px; }
.tk .tk-pay__brand { padding-right: 0; font-size: 1.125rem; }
.tk .tk-pay__price { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); }
.tk .tk-pay__list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 2px; padding-top: 10px; }
.tk .tk-pay__list > span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.tk .tk-pay__list svg { width: 20px; height: 20px; padding: 3px; }
.tk .tk-pay--once .tk-pay__price { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.tk-sub--small { font-size: 0.875rem; }
[data-picked] :is(.tk-opt, .tk-pay):not([aria-pressed="true"]) { filter: opacity(0.35); }
@media (prefers-reduced-motion: no-preference) {
  .tk-step:not([hidden]) .tk-step__in > * { animation: st-up 0.45s var(--ease) both; }
  .tk-step:not([hidden]) .tk-step__in > :nth-child(2) { animation-delay: 0.04s; }
  .tk-step:not([hidden]) .tk-step__in > :nth-child(3) { animation-delay: 0.1s; }
  .tk-step:not([hidden]) .tk-step__in > :nth-child(n+4) { animation-delay: 0.16s; }
  .tk-step[data-anim^="out"] .tk-step__in > * { animation: none; }
}

/* Anbefalingen: navnet, prisen som teller opp, og knappen */
.tk .tk-rec { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tk-rec__hva { color: var(--lead); }
.tk .tk-rec__big { margin-top: 6px; }
.tk .tk-rec__big b { font-size: clamp(3rem, 2.2rem + 3vw, 4.75rem); }
.tk .tk-rec__linje { margin: -4px 0 6px; font-size: 1rem; color: var(--grey); }
.tk-rec__andre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 0.9375rem; color: var(--grey); }
.tk-rec__andre > span { display: flex; flex-wrap: wrap; gap: 8px; }

/* Kontakt */
.tk .tk-paper { gap: 14px; }
.tk .tk-paper .pick span { min-height: 40px; padding: 0 14px; font-size: 0.875rem; }
.tk .tk-paper .card__priv { text-wrap: pretty; }

/* ---------- Skissen ---------- */
.tk-pv { display: grid; place-items: center; align-content: center; gap: 14px; }
.bd { position: relative; width: min(640px, 100%); container-type: inline-size; }
.bd__win { position: relative; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 3cqw; background: var(--paper); border: 2px dashed var(--card-muted);
  box-shadow: 0 30px 70px -40px var(--shadow); transition: border-color 0.5s var(--ease), background 0.5s var(--ease); }
.bd__bar { display: flex; align-items: center; gap: 1.2cqw; height: 6.4cqw; padding: 0 2.6cqw; border-bottom: 2px dashed var(--card-line); transition: background 0.5s var(--ease), border-color 0.5s var(--ease); }
.bd__bar i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; border: 1.5px solid var(--card-muted); }
.bd__url { margin: 0 auto; padding: 0.6cqw 3cqw; border-radius: 999px; border: 1.5px dashed var(--card-line); font-size: max(0.625rem, 2.2cqw); color: var(--card-muted); }
.bd__page { position: absolute; left: 0; right: 0; top: 6.4cqw; bottom: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 3.4cqw; padding: 3cqw 4cqw 4cqw; color: var(--card-ink); transition: background 0.6s var(--ease), color 0.6s var(--ease); }
.bd__nav { display: flex; align-items: center; gap: 2.4cqw; font-size: max(0.625rem, 2.2cqw); }
.bd__logo { display: inline-flex; align-items: center; gap: 1.4cqw; min-width: 0; margin-right: auto; }
.bd__logo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: max(0.75rem, 2.8cqw); font-weight: 800; }
.bd__mark { display: grid; place-items: center; flex: none; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; border: 1.5px dashed var(--card-muted); font-family: var(--font-display); font-size: max(0.625rem, 2.6cqw); font-weight: 800; color: var(--card-muted); transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); }
.bd__tabs { display: flex; gap: 2cqw; color: var(--card-muted); }
.bd__tabs span { white-space: nowrap; }
.bd__navcta { padding: 0.9cqw 2cqw; border-radius: 999px; border: 1.5px dashed var(--card-muted); color: var(--card-muted); white-space: nowrap; }
.bd__hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.4cqw; align-items: center; min-height: 0; }
.bd__text { display: grid; gap: 2.2cqw; align-content: center; min-width: 0; }
.bd__h { min-width: 0; font-family: var(--font-display); font-size: 6cqw; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.bd[data-long] .bd__h { font-size: 4.6cqw; }
.bd:not([data-named]) .bd__h { color: var(--card-muted); }
.bd__caret { display: inline-block; width: 0.5cqw; height: 5cqw; margin-left: 0.6cqw; vertical-align: -0.6cqw; background: var(--card-focus); }
.bd__lines { display: grid; gap: 1.4cqw; }
.bd__lines i { display: block; height: 1.4cqw; border-radius: 1cqw; background: var(--card-line); }
.bd__lines i + i { width: 70%; }
.bd__cta { justify-self: start; padding: 1.4cqw 3cqw; border-radius: 999px; border: 1.5px dashed var(--card-muted); font-size: max(0.625rem, 2.2cqw); font-weight: 700; color: var(--card-muted); transition: background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.bd__img { position: relative; display: grid; place-items: center; height: 100%; min-height: 20cqw; overflow: hidden; border-radius: 2.4cqw; border: 1.5px dashed var(--card-muted); color: var(--card-muted); transition: background 0.5s var(--ease), border-color 0.5s var(--ease); }
.bd__img svg { width: 7cqw; height: 7cqw; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bd__img-cam { display: none; }
.bd__sun, .bd__hill { position: absolute; visibility: hidden; }
.bd__sun { right: 16%; top: 16%; width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--fire-gold); }
.bd__hill { left: -10%; right: 30%; bottom: -30%; height: 60%; border-radius: 50%; background: var(--green); }
.bd__hill--2 { left: 35%; right: -15%; bottom: -36%; background: var(--nw-hero-1); }
.bd__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; }
.bd__cards i { height: 7cqw; border-radius: 1.8cqw; border: 1.5px dashed var(--card-line); transition: background 0.5s var(--ease), border-color 0.5s var(--ease); }

/* Navnet er skrevet */
.bd[data-named] .bd__mark { border-style: solid; color: var(--card-ink); }
/* Sidetypen */
.bd[data-type] .bd__tabs span { color: var(--card-ink); }
.bd[data-type="kampanje"] .bd__cards { visibility: hidden; }
.bd[data-type="plakat"] .bd__cards i:nth-child(n+2) { visibility: hidden; }
.bd[data-type="plakat"] .bd__cards { grid-template-columns: minmax(0, 1fr); }
/* Logoen */
.bd[data-logo="har"] .bd__mark { border: 0; background: var(--card-ink); color: var(--paper); }
.bd[data-logo="ny"] .bd__mark, .bd[data-logo="ingen"] .bd__mark { border: 0; background: var(--mint); color: var(--navy); }
/* Bildene */
.bd[data-foto="har"] .bd__img, .bd[data-foto="noen"] .bd__img { border-style: solid; border-color: transparent; background: linear-gradient(180deg, var(--mint-soft), var(--paper)); }
.bd[data-foto="har"] .bd__img-ic, .bd[data-foto="noen"] .bd__img-ic { display: none; }
.bd[data-foto="har"] :is(.bd__sun, .bd__hill), .bd[data-foto="noen"] :is(.bd__sun, .bd__hill) { visibility: visible; }
.bd[data-foto="noen"] .bd__img { filter: saturate(0.4); }
.bd[data-foto="nye"] .bd__img { border-color: var(--card-focus); color: var(--card-focus); }
.bd[data-foto="nye"] .bd__img-ic { display: none; }
.bd[data-foto="nye"] .bd__img-cam { display: block; }
/* Det viktigste */
.bd[data-maal] .bd__cta { border-style: solid; border-color: transparent; background: var(--card-ink); color: var(--paper); }
.bd[data-maal="kontakt"] .bd__cta, .bd[data-maal="kontakt"] .bd__navcta { background: var(--mint); color: var(--navy); border-color: transparent; box-shadow: 0 0 0 1cqw var(--glow-soft); }
.bd__seo { position: absolute; left: 4cqw; top: -5cqw; z-index: 3; display: flex; align-items: center; gap: 1.2cqw; margin: 0; padding: 1cqw 2.4cqw; border-radius: 999px; background: var(--veil); border: 1px solid var(--glass-edge);
  font-size: max(0.6875rem, 2cqw); color: var(--white); visibility: hidden; }
.bd__seo b { color: var(--mint); }
.bd__seo i { font-style: normal; color: var(--grey); }
.bd[data-maal="funnet"] .bd__seo { visibility: visible; }
.bd[data-maal="proff"] .bd__h span { background: linear-gradient(90deg, var(--card-ink), var(--card-focus)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Prislappen */
.bd__price { position: absolute; right: -2cqw; bottom: 6cqw; z-index: 3; display: flex; align-items: baseline; gap: 0.8cqw; padding: 1.4cqw 2.4cqw 1.4cqw 3.4cqw; border-radius: 1.8cqw; background: var(--mint); color: var(--navy);
  box-shadow: 0 2cqw 5cqw -1.6cqw var(--shadow); transform: rotate(-4deg); font-family: var(--font-display); }
.bd__price::before { content: ""; position: absolute; left: 1.2cqw; top: 50%; width: 1cqw; height: 1cqw; margin-top: -0.5cqw; border-radius: 50%; background: var(--night); }
.bd__price b { font-size: max(1rem, 4.4cqw); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.bd__price small, .bd__price span { font-size: max(0.625rem, 1.8cqw); font-weight: 700; }
/* «Helt ny!» venter til skissen er ekte */
.bd__stamp { position: absolute; right: -3cqw; top: -4cqw; z-index: 4; display: grid; place-items: center; width: 15cqw; height: 15cqw; border-radius: 50%; border: 0.6cqw solid var(--night);
  background: linear-gradient(135deg, var(--fire-gold), var(--fire-amber) 50%, var(--fire-ember)); box-shadow: 0 0 6cqw -1cqw var(--fire-glow); color: var(--navy);
  font-family: var(--font-display); font-size: 3.2cqw; font-weight: 800; line-height: 0.95; text-align: center; transform: rotate(-8deg); visibility: hidden; }
/* Linja som feier over når skissen blir ekte */
.bd__sweep { position: absolute; left: -2%; right: -2%; top: 0; z-index: 2; height: 3px; border-radius: 3px; visibility: hidden; pointer-events: none;
  background: linear-gradient(90deg, var(--fire-0), var(--mint) 25%, var(--fire-gold) 60%, var(--fire-0)); box-shadow: 0 0 18px 3px var(--fire-glow); }
.bd__sweep i { position: absolute; top: -3px; left: var(--x); width: 6px; height: 6px; border-radius: 50%; background: var(--fire-gold); box-shadow: 0 0 10px 2px var(--fire-glow); }

/* Ekte: farger, bilder og hel strek */
.bd[data-real] .bd__win { border: 1px solid var(--glass-edge); background: var(--nw-paper); }
.bd[data-real] .bd__bar { border-bottom-color: transparent; background: var(--deep-3); }
.bd[data-real] .bd__bar i { border-color: var(--grey-dim); }
.bd[data-real] .bd__url { border-style: solid; border-color: transparent; background: var(--glass-a); color: var(--grey); }
.bd[data-real] .bd__page { background: radial-gradient(60% 70% at 15% 0%, var(--nw-glow), var(--nw-glow-0) 70%), linear-gradient(170deg, var(--nw-hero-1), var(--nw-hero-2) 62%, var(--nw-paper) 62.2%); color: var(--white); }
.bd[data-real] .bd__h, .bd[data-real]:not([data-named]) .bd__h { color: var(--white); }
.bd[data-real] .bd__h span { background: linear-gradient(90deg, var(--white), var(--mint) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bd[data-real] .bd__caret { visibility: hidden; }
.bd[data-real] .bd__lines i { background: var(--nw-line-dark); }
.bd[data-real] .bd__tabs, .bd[data-real] .bd__tabs span { color: var(--grey); }
.bd[data-real] .bd__mark { border: 0; background: var(--mint); color: var(--navy); }
.bd[data-real] .bd__navcta, .bd[data-real] .bd__cta { border: 0; background: var(--mint); color: var(--navy); }
.bd[data-real] .bd__img { border: 0; background: linear-gradient(180deg, var(--mint-soft), var(--nw-paper)); color: var(--card-focus); filter: none; }
.bd[data-real] .bd__img-ic, .bd[data-real] .bd__img-cam { display: none; }
.bd[data-real] :is(.bd__sun, .bd__hill) { visibility: visible; }
.bd[data-real] .bd__cards i { border: 1px solid var(--nw-line); background: var(--nw-card); }
.bd[data-real] .bd__stamp { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .bd[data-reborn] .bd__sweep { visibility: visible; animation: bd-sweep 0.9s cubic-bezier(.45, 0, .25, 1) both; }
  .bd[data-reborn] .bd__sweep i { animation: bd-ember 1.1s ease-out var(--d) both; }
  .bd[data-real] .bd__stamp { animation: bd-stamp 0.6s cubic-bezier(.2, .9, .25, 1.2) 0.15s both; }
  .bd--snap { animation: bd-snap 0.5s cubic-bezier(.2, .9, .3, 1.25) both; }
  .bd__caret { animation: bd-caret 1s steps(1) infinite; }
  .bd__note--in { animation: st-up 0.4s var(--ease) both; }
  .bd__tabs span { animation: st-up 0.4s var(--ease) calc(var(--i) * 0.07s) both; }
  .bd__price:not([hidden]) { animation: bd-tag 0.55s cubic-bezier(.2, .9, .3, 1.2) both; }
}
@keyframes bd-sweep { 0% { top: 0; } 100% { top: 100%; visibility: hidden; } }
@keyframes bd-ember { 0% { transform: translate(0, 0); filter: opacity(0); } 20% { filter: opacity(1); } 100% { transform: translate(4px, -40px); filter: opacity(0); } }
@keyframes bd-stamp { from { transform: translateY(-3cqw) rotate(-34deg); filter: opacity(0); } to { transform: rotate(-8deg); filter: opacity(1); } }
@keyframes bd-snap { 0% { transform: translateY(1.2cqw); filter: opacity(0.3); } 100% { transform: none; filter: opacity(1); } }
@keyframes bd-caret { 50% { visibility: hidden; } }
@keyframes bd-tag { from { transform: translateY(-4cqw) rotate(-16deg); filter: opacity(0); } to { transform: rotate(-4deg); filter: opacity(1); } }
.bd__note { max-width: 46ch; min-height: 1.5em; text-align: center; font-size: 1rem; font-weight: 600; color: var(--lead); text-wrap: balance; }

/* Plassering: telefon og nettbrett har skissen øverst, store skjermer til høyre */
.tk-pv { height: auto; padding: 8px clamp(16px, 4vw, 48px) 4px; }
.tk-pv .bd { width: min(520px, 100%); }
@media (max-width: 1099px) {
  .tk-pv .bd { width: min(440px, 100%, 34vh * 16 / 11); }
  .bd__note { font-size: 0.875rem; }
}
@media (max-width: 639px) {
  .tk-pv { gap: 8px; padding-top: 4px; }
  .tk-pv .bd { width: min(300px, 100%, 26vh * 16 / 11); }
  .bd__note { max-width: 32ch; font-size: 0.8125rem; min-height: 2.6em; }
}
@media (min-width: 1100px) {
  .tk-pv { height: auto; padding: 0 clamp(32px, 4vw, 72px) 0 8px; }
  .tk-pv .bd { width: min(660px, 100%); }
  .tk__body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.bd__seo svg { width: max(0.75rem, 2.2cqw); height: max(0.75rem, 2.2cqw); fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; }
.bd[data-real][data-type="plakat"] .bd__cards, .bd[data-real][data-type="kampanje"] .bd__cards { visibility: hidden; }
@media (min-width: 1100px) { .tk-done__stamp { display: none; } .tk-done { margin-top: clamp(32px, 16vh, 180px); } }
@container (max-width: 400px) { .bd__navcta { display: none; } .bd__tabs { gap: 1.6cqw; } }
/* Det gamle spørsmålet forsvinner raskt, så to spørsmål aldri står oppå hverandre */
@media (prefers-reduced-motion: no-preference) {
  .tk-step[data-anim="out-fwd"], .tk-step[data-anim="out-back"] { animation-duration: 0.18s; }
  .tk-step[data-anim="in-fwd"], .tk-step[data-anim="in-back"] { animation-delay: 0.1s; }
}

/* ---------- Skissen i en MacBook (24.10.2026, Nicolay: «place it inside a Macbook, so it looks like proper mockup») ----------
   Bildet er filer/macbook.webp (1029 × 631). Skjermen under kameraet: 10,01 % fra venstre, 10,11 % fra høyre, 4,75 % fra toppen
   og 13,15 % fra bunnen. Innholdet måler seg etter skjermen, så alt inni beholder størrelsene sine. */
.bd__dev { position: relative; }
.bd__mac { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px var(--shadow)); }
.bd__screen { position: absolute; left: 10.01%; right: 10.11%; top: 4.75%; bottom: 13.15%; overflow: hidden; border-radius: 0.4% 0.4% 0 0; container-type: inline-size; }
.bd__screen .bd__win { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.bd:not([data-real]) .bd__screen .bd__win { outline: 2px dashed var(--card-line); outline-offset: -8px; }
.bd__screen .bd__page { gap: 2.6cqw; padding: 2.4cqw 4cqw 3.4cqw; }
.bd__screen .bd__img { min-height: 16cqw; }
.bd__screen .bd__cards i { height: 6cqw; }
/* Det som henger utenpå: plassert etter maskinen */
.bd__stamp { right: 4%; top: -4%; width: 12cqw; height: 12cqw; font-size: 2.6cqw; }
.bd__price { right: 3%; bottom: 20%; }
.bd__seo { left: 12%; top: -6%; }
/* Størrelsen: litt mindre enn før */
.tk-pv .bd { width: min(580px, 100%); }
@media (max-width: 1099px) { .tk-pv .bd { width: min(420px, 100%, 30vh * 1.63); } }
@media (max-width: 639px) { .tk-pv .bd { width: min(320px, 100%, 25vh * 1.63); } }
@media (min-width: 1100px) {
  .tk-pv .bd { width: min(600px, 100%); }
  /* Venstre spalte: innholdet midt i høyden, på linje med maskinen */
  .tk-step { display: grid; }
  .tk__stage .tk-step__in { margin-top: auto; margin-bottom: auto; padding-block: clamp(16px, 4vh, 40px); }
}