/* ============================================================
   Design system
   Type scale, spacing and motion follow Apple HIG principles:
   size-dependent tracking, compositor-only animation,
   translucent chrome, full reduced-motion support.
   ============================================================ */

:root {
  /* Ink */
  --ink-900: #0A0A0B;
  --ink-800: #17181A;
  --ink-700: #2A2C30;
  --ink-500: #6B6F76;
  --ink-400: #8A8E96;
  --ink-300: #B8BCC2;
  --ink-200: #DCDEE2;
  --ink-100: #EFF0F2;
  --ink-50:  #F7F7F8;
  --paper:   #FFFFFF;

  /* Accent */
  --gold:      #F5B301;
  --gold-soft: #FFC02E;
  --green:      #14724A;   /* primær */
  --green-deep: #0E5637;
  --green-tint: #EAF6EF;   /* lys flade */
  --ink:        #0E1110;   /* tekstsort */

  /* Google */
  --g-blue:   #4285F4;
  --g-green:  #34A853;
  --g-yellow: #FBBC05;
  --g-red:    #EA4335;

  /* Surfaces */
  --surface:      #FFFFFF;
  --surface-sunk: #F6F7F6;
  --surface-card: var(--paper);
  --hairline:     rgba(14, 17, 16, 0.10);
  --hairline-strong: rgba(14, 17, 16, 0.18);
  --text:      var(--ink);
  --text-soft: #5A6260;
  --text-faint:#858C8A;

  --chrome-bg:  rgba(255, 255, 255, 0.72);
  --chrome-brd: rgba(0, 0, 0, 0.07);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
  --shadow-md: 0 4px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.05);
  --shadow-xl: 0 40px 90px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.07);

  /* Spacing — 4px base */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;
  --s-32: 8rem;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px;

  --w-page: 1120px;
  --w-text: 42rem;

  /* Motion — spring-like, compositor friendly */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-spring:cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 560ms;
}

/* Ingen dark mode: siden er hvid uanset systemets tema, som chippy. */
:root { color-scheme: only light; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 100%/1.6 "Schibsted Grotesk", -apple-system, BlinkMacSystemFont,
        "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  background: var(--surface);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--g-blue); outline-offset: 3px; border-radius: 4px; }

/* ---------- Type ---------- */
/* Tracking is size-dependent, never uniform: large type gets negative
   tracking and tight leading, body copy sits near zero. */
.display {
  font-size: clamp(2.3rem, 4.2vw, 3.125rem);
  line-height: 1.04;
  letter-spacing: -0.037em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
h1, .h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
/* Section headings carry more weight than the hero here — big and bold,
   with tracking tightening as the size grows. */
h2, .h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.07;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-size: 1.31rem;
  line-height: 1.26;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0;
}
p { margin: 0; letter-spacing: -0.003em; }
.lede {
  font-size: clamp(1.06rem, 1.9vw, 1.28rem);
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--text-soft);
  text-wrap: pretty;
}
.eyebrow {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.small { font-size: .875rem; line-height: 1.55; color: var(--text-soft); }
.tiny  { font-size: .78rem;  line-height: 1.5;  color: var(--text-faint); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--s-6); }
.section { padding-block: clamp(var(--s-16), 9vw, var(--s-32)); }
.section--tight { padding-block: clamp(var(--s-12), 6vw, var(--s-20)); }
.section--sunk { background: var(--surface-sunk); }
.prose { max-width: var(--w-text); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { margin-top: var(--s-12); }
.prose h3 { margin-top: var(--s-8); }
.prose ul, .prose ol { padding-left: 1.15rem; margin-block: 0; }
.prose li + li { margin-top: var(--s-2); }
.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--s-6); }
.stack-8 { display: flex; flex-direction: column; gap: var(--s-8); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.center { text-align: center; }
.center .lede, .center .prose { margin-inline: auto; }
.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

/* ---------- Hero ----------
   White page, copy on the left, a large rounded photo on the right.
   No dark container — the page itself is the surface. */
.heroblock { position: relative; background: var(--surface); }
.heroblock__in {
  max-width: var(--w-page); margin-inline: auto;
  padding: clamp(var(--s-10), 5vw, var(--s-16)) var(--s-6) clamp(var(--s-12), 6vw, var(--s-20));
}
.heroblock__grid {
  display: grid; gap: clamp(var(--s-8), 4vw, var(--s-12));
  align-items: center; grid-template-columns: 1fr;
}
@media (min-width: 940px) { .heroblock__grid { grid-template-columns: 1fr 1.08fr; } }

.hero__eyebrow { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.hero__eyebrow .stars { color: var(--green); }
.hero__eyebrow span:last-child { font-size: .95rem; font-weight: 600; letter-spacing: -.012em; }

/* Price sits beside the call to action, not above it. */
.hero__buy { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.hero__price { line-height: 1.05; }
.hero__price small { display: block; font-size: .95rem; font-weight: 600; color: var(--text-soft); }
.hero__price strong { font-size: 2.375rem; font-weight: 800; letter-spacing: -.035em; }

.ticks { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.ticks span { display: inline-flex; align-items: center; gap: var(--s-2); font-size: .95rem; font-weight: 600; }
.ticks svg { color: var(--green); flex: none; }

.hero__media { border-radius: 22px; overflow: hidden; aspect-ratio: 5 / 4; background: var(--surface-sunk); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Customer logo marquee ----------
   Two identical tracks slide as one; when the first has moved exactly its own
   width, the second is in the same place, so the loop has no seam. Only
   transform animates. */
.marquee { overflow: hidden; position: relative; padding-block: var(--s-6); }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 7rem; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--surface), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }
.marquee__row { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__track { display: flex; align-items: center; gap: clamp(var(--s-8), 5vw, var(--s-16)); padding-right: clamp(var(--s-8), 5vw, var(--s-16)); }
.marquee__item {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--text-faint); white-space: nowrap; flex: none;
  transition: color var(--t-fast) var(--ease-out);
}
.marquee:hover .marquee__item { color: var(--text-soft); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* No sliding for anyone who asked for less motion — it becomes a plain row. */
@media (prefers-reduced-motion: reduce) {
  .marquee__row { animation: none; flex-wrap: wrap; width: auto; }
  .marquee__track:nth-child(2) { display: none; }
  .marquee::before, .marquee::after { display: none; }
}

/* Empty state: the section is built, the names are not in yet. */
.marquee--empty {
  border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg);
  padding: var(--s-8); text-align: center;
}
.marquee--empty p { color: var(--text-faint); font-size: .86rem; max-width: 34rem; margin-inline: auto; }

/* ---------- Benefit bar under the hero ---------- */
.benefits { background: var(--surface-sunk); border-block: 1px solid var(--hairline); }
.benefits__in {
  max-width: var(--w-page); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.benefit { display: flex; gap: var(--s-4); padding: var(--s-8) var(--s-6); }
.benefit + .benefit { border-left: 1px solid var(--hairline); }
@media (max-width: 960px) { .benefit + .benefit { border-left: 0; border-top: 1px solid var(--hairline); } }
.benefit__ico {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--green-tint); color: var(--green);
}
.benefit h3 { font-size: 1.22rem; }
.benefit p { margin-top: var(--s-2); font-size: .9rem; line-height: 1.5; color: var(--text-soft); }

/* ---------- Chrome ---------- */
/* Chrome is a translucent material the page scrolls *under*, not an opaque
   bar it scrolls behind. Larger surfaces read as thicker glass, so the nav
   sheet below blurs harder than the bar itself. */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--chrome-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  /* Bright top edge — light catching the near side of the material */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
/* A scroll edge effect, not a 1px rule. The boundary only appears where
   content actually passes beneath the floating chrome, and it fades rather
   than drawing a hard line across the page. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.055), transparent);
  opacity: 0; transition: opacity var(--t-base) var(--ease-out);
}
.topbar[data-scrolled="true"]::after { opacity: 1; }
/* Vibrancy: over a translucent, shifting backdrop, flat grey text loses
   legibility. Slightly heavier weight and a touch more tracking hold up. */
.topbar .nav a, .topbar .brand { font-weight: 560; letter-spacing: -.006em; }
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding-block: 18px;
  max-width: var(--w-page); margin-inline: auto; padding-inline: var(--s-6);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 800; letter-spacing: -.03em; font-size: 1.1rem;
}
.brand__mark { width: 30px; height: 30px; border-radius: 9px; flex: none; }

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav a {
  padding: 8px 14px; border-radius: var(--r-full);
  font-size: .905rem; font-weight: 500; letter-spacing: -.004em;
  color: var(--text); white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.nav a:hover { background: var(--surface-sunk); }
.nav a[aria-current="page"] { font-weight: 700; }

/* ---------- Announcement bar ---------- */
.announce {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-8); flex-wrap: wrap;
  min-height: 38px; padding: var(--s-2) var(--s-6);
  background: var(--green); color: var(--green-tint);
  font-size: .8rem; font-weight: 600;
}
.announce span { display: inline-flex; align-items: center; gap: var(--s-2); }
.announce svg { flex: none; opacity: .85; }
@media (max-width: 560px) { .announce { gap: var(--s-5); font-size: .76rem; } }
.topbar__cta { display: flex; align-items: center; gap: var(--s-2); }
.burger { display: none; width: 40px; height: 40px; place-items: center; border-radius: var(--r-sm); }
.burger:hover { background: var(--hairline); }
.burger span { display: block; width: 17px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out); }
.burger span + span { margin-top: 4.5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 60px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-3) var(--s-6) var(--s-6);
    background: var(--chrome-bg);
    backdrop-filter: blur(34px) saturate(190%);
    -webkit-backdrop-filter: blur(34px) saturate(190%);
    box-shadow: 0 20px 40px rgba(0,0,0,.10);
    border-bottom: 1px solid var(--chrome-brd);
    /* Anchored to the control that opened it, and it materialises — blur and
       scale arrive together — rather than plainly fading in. It leaves along
       the same path it entered by. */
    transform-origin: top right;
    transform: translateY(-10px) scale(.97); opacity: 0; pointer-events: none;
    transition: opacity var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out),
                backdrop-filter var(--t-base) var(--ease-out);
  }
  .nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: var(--s-3) 0; font-size: 1rem; border-bottom: 1px solid var(--hairline); border-radius: 0; }
  .burger { display: grid; }
  .topbar__cta .btn--ghost { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--green); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: .68rem 1.3rem; border-radius: var(--r-full);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .9rem; font-weight: 700; letter-spacing: -.004em;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  will-change: transform;
}
.btn:hover { background: var(--green-deep); opacity: 1; }
.btn:active { transform: scale(.972); }
.btn--sm { padding: .5rem 1rem; font-size: .86rem; }
.btn--lg { padding: .875rem 1.625rem; font-size: .97rem; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.btn--ghost:hover { background: var(--surface-sunk); }
.btn--ghost:hover { background: var(--hairline); opacity: 1; }
.btn--gold { --btn-bg: var(--gold); --btn-fg: #17181A; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* Feedback on the press itself, not on release. */
.card--lift:active { transform: translateY(-1px) scale(.995); transition-duration: 100ms; }
.card__ico {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: var(--s-4);
  background: var(--surface-sunk); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* ---------- Photo slot ----------
   Drops a real product photo in when one exists; until then it shows a
   labelled placeholder rather than a broken image. */
.photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-sunk); aspect-ratio: 4 / 3;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--empty { display: grid; place-items: center; text-align: center; padding: var(--s-6); }
.photo--empty p { color: var(--text-faint); font-size: .82rem; max-width: 18rem; }

/* ---------- Stat cards ---------- */
.stat {
  background: linear-gradient(158deg, rgba(27,158,90,.09), rgba(27,158,90,.02) 46%, rgba(255,255,255,.5));
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 22px;
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-sm);
}
.stat__n {
  font-size: clamp(2.6rem, 5.6vw, 3.75rem);
  line-height: 1; font-weight: 700; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: .06em;
}
.stat__n small { font-size: .3em; font-weight: 560; letter-spacing: -0.01em; color: var(--text-faint); }
.stat__label { margin-top: var(--s-3); font-size: 1.02rem; letter-spacing: -.012em; }
.stat__note { margin-top: var(--s-5); font-size: .82rem; color: var(--text-soft); }


/* ---------- Product cards ---------- */
.prod {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: 22px; overflow: hidden;
}
.prod__media { background: var(--surface-sunk); padding: var(--s-8); display: grid; place-items: center; }
.prod__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.prod__foot { margin-top: auto; padding-top: var(--s-4); }

/* ---------- Order form ---------- */
.order__grid { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 900px) { .order__grid { grid-template-columns: 1fr 22rem; } }

.ofield { border: 0; padding: 0; margin: 0; }
.ofield legend { padding: 0; margin-bottom: var(--s-2); }

.inp {
  width: 100%; margin-top: var(--s-1);
  padding: .68rem .85rem; font: inherit; font-size: .95rem;
  color: var(--text); background: var(--surface-card);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.inp:focus { outline: none; border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(66,133,244,.18); }
.inp[aria-invalid="true"] { border-color: var(--g-red); }
textarea.inp { resize: vertical; min-height: 5rem; }

.qty { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.qty__preset {
  padding: .5rem .9rem; border-radius: var(--r-full);
  font-size: .88rem; font-weight: 560; font-variant-numeric: tabular-nums;
  background: var(--surface-card); color: var(--text-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.qty__preset:hover { color: var(--text); background: var(--surface-sunk); }
.qty__preset:active { transform: scale(.95); }
.qty__preset.is-on { background: var(--text); color: var(--surface); box-shadow: none; }

.opt {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-md); cursor: pointer;
  background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--hairline);
  transition: box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.opt:hover { background: var(--surface-sunk); }
.opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--text); }
.opt input { margin-top: .25rem; accent-color: var(--text); flex: none; }

.order__sum { position: sticky; top: 84px; }
.sumbox {
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: 22px; padding: var(--s-6);
}
.sumbox h3 { margin-bottom: var(--s-4); }
.sumrow {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-2); font-size: .93rem; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.sumrow--total {
  font-size: 1.28rem; font-weight: 640; letter-spacing: -.02em;
  color: var(--text); padding-top: var(--s-4);
}
.formnote {
  margin-top: var(--s-5); padding: var(--s-4);
  border-radius: var(--r-md); font-size: .9rem;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent);
}
.formnote--err {
  background: color-mix(in srgb, var(--g-red) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-red) 32%, transparent);
}

/* ---------- Trust row ---------- */
.trust {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8);
  justify-content: center; align-items: center;
  padding-block: var(--s-8);
  border-block: 1px solid var(--hairline);
}
.trust span { display: inline-flex; align-items: center; gap: var(--s-2); font-size: .88rem; color: var(--text-soft); }
.trust svg { color: var(--green); flex: none; }

/* ---------- Cookie consent ----------
   Refusing is exactly as prominent as accepting — same size, same weight,
   same position. That is the legal requirement, not a style choice. */
.cookie {
  position: fixed; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 80;
  max-width: 34rem; margin-inline: auto;
  background: var(--chrome-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hairline);
  transform: translateY(calc(100% + var(--s-6))); opacity: 0;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.cookie[data-show="true"] { transform: none; opacity: 1; }
.cookie__in { padding: var(--s-5); display: grid; gap: var(--s-4); }
.cookie__txt p { margin-top: var(--s-2); font-size: .88rem; line-height: 1.5; color: var(--text-soft); }
.cookie__btns { display: flex; gap: var(--s-2); }
.cookie__btns .btn { flex: 1; }          /* equal weight, both options */
.cookie__link { font-size: .78rem; color: var(--text-faint); text-decoration: underline; justify-self: start; }
.cookie__link:hover { color: var(--text); }
@media (prefers-reduced-transparency: reduce) { .cookie { background: var(--surface); backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .cookie { transition: opacity 200ms ease; transform: none; } }

/* Skip link — first stop for keyboard users. */
.skip {
  position: absolute; left: var(--s-3); top: var(--s-3); z-index: 100;
  padding: .6rem 1rem; border-radius: var(--r-md);
  background: var(--text); color: var(--surface); font-size: .9rem; font-weight: 560;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease-out);
}
.skip:focus { transform: none; }

/* ---------- Sticky bottom CTA ---------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center; gap: var(--s-5);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-6);
  background: rgba(16,17,19,.86); color: #F5F5F7;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transform: translateY(105%);
  transition: transform var(--t-base) var(--ease-out);
}
.stickybar[data-show="true"] { transform: none; }
.stickybar p { font-size: .89rem; color: rgba(245,245,247,.78); }
.stickybar .btn { --btn-bg: #fff; --btn-fg: #101113; }
@media (prefers-reduced-transparency: reduce) { .stickybar { background: #101113; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .stickybar { transition: opacity 200ms ease; } }

/* ---------- Steps ---------- */
.step__n {
  width: 30px; height: 30px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center;
  background: var(--text); color: var(--surface);
  font-size: .84rem; font-weight: 640; font-variant-numeric: tabular-nums;
}

/* ---------- Pricing ---------- */
.tiers { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-card); }
.tier {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  transition: background var(--t-fast) var(--ease-out);
}
.tier + .tier { border-top: 1px solid var(--hairline); }
.tier:hover { background: var(--surface-sunk); }
.tier__q { font-weight: 560; }
.tier__save { font-size: .8rem; color: var(--green); font-weight: 560; }
.tier__p { font-weight: 620; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.tier__p small { font-weight: 450; color: var(--text-faint); letter-spacing: 0; }
.tier[data-featured] { background: var(--surface-sunk); }
.badge {
  display: inline-block; padding: .2rem .55rem; border-radius: var(--r-full);
  font-size: .7rem; font-weight: 620; letter-spacing: .04em; text-transform: uppercase;
  background: var(--text); color: var(--surface);
}
.badge--soft { background: var(--hairline); color: var(--text-soft); }

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid var(--hairline); }
.acc__item { border-bottom: 1px solid var(--hairline); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; text-align: left;
  font-size: 1.02rem; font-weight: 560; letter-spacing: -.012em;
  transition: color var(--t-fast) var(--ease-out), opacity 100ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.acc__btn:hover { color: var(--text-soft); }
.acc__btn:active { opacity: .55; }        /* on press, not on release */
.acc__sign { position: relative; width: 15px; height: 15px; flex: none; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.6px; border-radius: 2px;
  background: var(--text-faint); transform: translateY(-50%);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.acc__sign::after { transform: translateY(-50%) rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--ease-out); }
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: var(--s-5); color: var(--text-soft); max-width: 46rem; }
.acc__panel p + p { padding-bottom: var(--s-5); margin-top: calc(var(--s-4) * -1 + var(--s-4)); }

/* Product hero: text first on narrow screens, media beside it when wide */
.grid--product { grid-template-columns: 1fr; }
.grid--product__media { order: 2; }
.grid--product__info  { order: 1; }
@media (min-width: 860px) {
  .grid--product { grid-template-columns: 1fr 1fr; }
  .grid--product__media { order: 1; position: sticky; top: 84px; }
  .grid--product__info  { order: 2; }
}

/* ---------- The card object — real 3D, draggable ----------
   Two faces plus four edge strips give it genuine thickness, so it reads
   as an object rather than a picture. Rotation is driven entirely from JS
   springs (see app.js) — no CSS transition on the transform, because a
   transition would fight the physics and break interruptibility. */
.stage {
  display: grid; place-items: center; gap: var(--s-5);
  padding: var(--s-10) 0;
}
.card3d-wrap {
  position: relative;
  width: min(100%, 23rem); aspect-ratio: 85.6 / 54;
  perspective: 1500px;
  touch-action: none;               /* we own the gesture */
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.card3d-wrap[data-grabbing="true"] { cursor: grabbing; }
/* The object acknowledges the grab the instant the pointer goes down. */
.card3d-wrap[data-grabbing="true"] .card3d__shadow { opacity: .28; }
.card3d {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -22deg));
  will-change: transform;
}
.card3d__face {
  position: absolute; inset: 0;
  border-radius: 13px; overflow: hidden;
  backface-visibility: hidden;
  box-shadow: 0 22px 48px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.14);
}
.card3d__face--front { transform: translateZ(1.3px); }
.card3d__face--back  { transform: rotateY(180deg) translateZ(1.3px); }

/* Kanterne. Hver strimmel er lige så tyk som kortet og roteres om sin EGEN
   midterakse — derfor ligger den præcis i kortets kant i stedet for at stikke ud. */
.card3d__edge { position: absolute; background: linear-gradient(#D8DADD, #9EA2A7); }
.card3d__edge--t, .card3d__edge--b { left: 0; right: 0; height: 2.6px; transform: rotateX(90deg); }
.card3d__edge--l, .card3d__edge--r { top: 0; bottom: 0; width: 2.6px;  transform: rotateY(90deg); }
.card3d__edge--t { top: -1.3px; }
.card3d__edge--b { bottom: -1.3px; }
.card3d__edge--l { left: -1.3px; }
.card3d__edge--r { right: -1.3px; }

/* Glans følger rotationen — sat fra JS så lyset "sidder fast" i rummet */
.card3d__glare {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    var(--glare-angle, 114deg),
    rgba(255,255,255,var(--glare-a, .30)) 0%,
    rgba(255,255,255,.04) 36%,
    transparent 58%);
  mix-blend-mode: screen;
}
.card3d__shadow {
  position: absolute; left: 6%; right: 6%; bottom: -11%;
  height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.34), transparent 72%);
  filter: blur(14px);
  transform: scale(var(--shadow-s, 1));
  opacity: var(--shadow-o, .85);
  will-change: transform, opacity;
}
.card3d__hint {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: 0; font-size: .8rem; color: var(--text-faint);
  transition: opacity var(--t-base) var(--ease-out);
}
.card3d__hint[data-hidden="true"] { opacity: 0; }

@media (hover: none) { .card3d__hint svg { display: none; } }

/* ---------- Misc ---------- */
.hairline { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .34rem .8rem; border-radius: var(--r-full);
  background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: .81rem; font-weight: 520; color: var(--text-soft);
}
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.note {
  border-left: 2px solid var(--hairline-strong); padding: var(--s-1) 0 var(--s-1) var(--s-4);
  color: var(--text-soft); font-size: .92rem;
}
.tbl { font-size: .93rem; }
.tbl th, .tbl td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.tbl th { font-weight: 600; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; color: var(--text-faint); }
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--hairline); background: var(--surface-sunk); padding-block: var(--s-16) var(--s-10); }
.foot__grid { display: grid; gap: var(--s-8); grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot__grid { grid-template-columns: 1fr; } }
.foot h4 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--s-4); font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.foot a { font-size: .91rem; color: var(--text-soft); transition: color var(--t-fast) var(--ease-out); }
.foot a:hover { color: var(--text); }
.foot__legal { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

/* Payment badges — plain text chips, so there are no third-party logo files
   to keep licensed and up to date. */
.pay { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-12); }
.pay span {
  padding: .3rem .6rem; border-radius: var(--r-sm);
  font-size: .72rem; font-weight: 560; letter-spacing: .01em;
  color: var(--text-soft); background: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal] { transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Reduced motion is not "no feedback" — it's a gentler, non-vestibular
   equivalent. Cross-fades replace slides and springs; overshoot is dropped;
   opacity and colour changes that aid comprehension stay. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .nav {
    transform: none !important;
    transition: opacity 200ms ease !important;
  }
  .btn:active, .card--lift:hover, .acc__btn:active { transform: none; }
  .card3d { transform: rotateX(6deg) rotateY(-14deg); }
  .card3d__hint { display: none; }
}

/* Frostier, not see-through. Raise the background, drop the blur. */
@media (prefers-reduced-transparency: reduce) {
  .topbar, .nav {
    background: var(--surface);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .topbar { border-bottom: 1px solid var(--hairline-strong); }
  .topbar::after { display: none; }
  .card3d__glare { display: none; }
}

/* Near-solid backgrounds with a defined, contrasting border. */
@media (prefers-contrast: more) {
  :root {
    --hairline: rgba(0,0,0,.42);
    --hairline-strong: rgba(0,0,0,.68);
    --text-soft: var(--ink-800);
    --text-faint: var(--ink-700);
    --chrome-bg: var(--surface);
  }