/* ==========================================================================
   Tacc – landing page
   Detaljerne (linjer, chips, CTA, ord-hjul) er målt fra Hero-V1.png.
   Skala, margener og breakpoints følger ornn.com:
     ≥1728 px   stor desktop   pris 80 · overskrift 58
     1200–1727  desktop        pris 70 · overskrift 46   (designets 1512-bredde)
     810–1199   tablet         pris 62 · overskrift 36
     <810       mobil          pris 62 · overskrift 34 · margen 16
   Alle typografiske størrelser styres af variablerne i :root nedenfor.
   ========================================================================== */

:root {
  --font: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", system-ui, sans-serif;

  --hero-bg: #0f1519;   /* Mineral-skifer (kundeportalens mørke tema) */
  --white: #fff;
  --black: #000;
  --ink: #22201e;
  --ink-muted: #6f6c69;
  --hair: #e8e6e3;
  --hair-strong: #d9d8d6; /* sektionslinjer (designets #d9d9d9) */
  /* Filmkorn (heroen og kortenes billeder) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --on-dark-muted: rgba(255, 255, 255, .62); /* læsbar på både skifer og mineralgrøn glød */
  /* Glas: sløret, mættet baggrund, lys top og en kant, der fanger lyset oppe til venstre */
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .045) 100%);
  --glass-fill-hover: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .08) 100%);
  --glass-blur: blur(18px) saturate(170%) brightness(1.08);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 10px 28px -14px rgba(0, 0, 0, .7);
  --glass-rim: linear-gradient(145deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .14) 36%, rgba(255, 255, 255, .05) 62%, rgba(255, 255, 255, .3));

  --gutter: 24px;
  --col-gap: 12px;

  /* Typeskala (desktop 1200–1727) – overskrives pr. breakpoint nederst */
  --fs-display: 70px;   /* prisen – sidens største element, som hos Ornn */
  --fs-h1: 46px;        /* "Ja Tacc til fremtidens bogholderi" (Ornns overskriftsstørrelse) */
  --fs-lead: 18px;      /* "Fremtidens bogholderi?" m.fl. (Ornns brødtekst) */
  --fs-ui: 16px;        /* knapper, labels */
  --fs-h2: 46px;        /* "Tacc, fordi du er …" */
  --fs-h2-sub: 34px;    /* brødtekst ved siden af h2 */

  /* Komponentmål (referencer: Harvey 48, Wonderful 50, Pennylane 52, ElevenLabs 44) */
  --cta-h: 48px;
  --chip-h: 36px;
  --gap-kicker: 22px;   /* kicker → prisen */
  --gap-action: 36px;   /* prisen → bilag-knapperne */
  --gap-cta: 32px;      /* overskrift → CTA */

  /* Hvor indholdet starter i heroen (Ornn: ca. en fjerdedel nede + header) */
  --bar-h: 0px;         /* bar øverst over headeren (announcement fjernet 2/11-2026; Ornn: 36 px) */
  --hero-top: calc(25.3vh + 70px - var(--bar-h));

  --intro-delay: 1.5s;  /* heroens indgang venter på logo-introen (0 når den springes over) */

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--hero-bg);
}
body {
  margin: 0;
  /* Mørk som heroen: iPhone-Safari farver statuslinjen og værktøjslinjen efter siden, og
     den elastiske overrulning viser mørkt i stedet for hvidt. Lyse sektioner har egen baggrund. */
  background: var(--hero-bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, dl, dd, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul { list-style: none; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Logo-intro (kører én gang) ----------
   Bevægelsen kommer fra tacc-mark.js (intro.js). CSS står kun for fladen, størrelsen og udtoningen.
   Uden JS toner fladen selv ud efter 2 s; intro.js overtager med .is-running og afslutter med .is-done. */
.no-intro { --intro-delay: 0s; }
.no-intro .intro { display: none; }
.intro {
  position: fixed; inset: 0; z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--hero-bg);
  color: var(--white);           /* mærket tegnes i tekstens farve */
  pointer-events: none;
  animation: intro-out .4s var(--ease-in-out) 2s forwards;
}
.intro.is-running { animation: none; }
.intro.is-done { animation: intro-out .4s var(--ease-in-out) forwards; }
.intro-mark { width: 76px; height: 76px; }
.intro.is-done .intro-mark { animation: intro-mark-out .4s var(--ease-in-out) forwards; }
@keyframes intro-mark-out { to { transform: scale(.94); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

.skip-link {
  position: absolute; z-index: 100; top: 12px; left: 12px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--white); color: var(--black);
  font-size: 14px; font-weight: 500; text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Header ---------- */
.site-header {
  position: absolute; z-index: 10; inset: var(--bar-h) 0 auto 0;
  padding: 30px var(--gutter) 0;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  color: var(--white);
  pointer-events: none;
}
.brand { display: inline-block; pointer-events: auto; border-radius: 4px; }
.brand-logo { width: 114px; height: auto; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--bar-h));
  min-height: calc(100svh - var(--bar-h));
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--white);
}

.hero-media,
.hero-canvas,
.hero-grain {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
}
/* Levende baggrund (WebGL, se main.js). Billedet under er plakat/fallback. */
.hero-canvas {
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}
.hero-canvas.is-ready { opacity: 1; }
.hero.has-shader .hero-media img { animation: none; }
/* Plakatbilledet er shaderens første frame i Mineral, så overgangen til den levende baggrund er usynlig */
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  animation: curtain-in 1.6s var(--ease-out) var(--intro-delay) both;
}
/* Fin, skarp filmkorn ovenpå billedet – holder teksturen sprød på retina */
.hero-grain {
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: var(--grain);
  background-size: 180px 180px;
}

/* Fades som hos Ornn: lyset glider ind under baren i toppen og toner helt ud
   i den nederste halvdel, så baggrunden aldrig skæres af ved heroens kant.
   Ét pseudo-element med to gradienter (sidste barn → ligger over lærred og korn,
   under indholdet). Farven er --hero-bg (#0f1519) med alfa, så kurven kan være blød. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(15, 21, 25, 1) 0%,
      rgba(15, 21, 25, .6) 35%,
      rgba(15, 21, 25, 0) 100%) top / 100% 96px no-repeat,
    linear-gradient(to bottom,
      rgba(15, 21, 25, 0) 0%,
      rgba(15, 21, 25, .16) 22%,
      rgba(15, 21, 25, .45) 48%,
      rgba(15, 21, 25, .78) 74%,
      rgba(15, 21, 25, .95) 90%,
      rgba(15, 21, 25, 1) 100%) bottom / 100% 50% no-repeat;
}

@keyframes curtain-in {
  from { filter: brightness(.35); }
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: var(--hero-top) var(--gutter) 0;
}

.hero-intro,
.hero-pricing {
  position: relative;
  padding-top: 34px;
}
/* Kraftig hvid linje over prisen – overskriften til venstre står frit */
.hero-pricing::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  background: var(--white);
  transform-origin: 0 50%;
  animation: rule-in 1.2s var(--ease-out) calc(.12s + var(--intro-delay)) both;
}
@keyframes rule-in { from { transform: scaleX(0); } }

.hero-intro { grid-column: 1 / 3; }
.hero-pricing { grid-column: 3; }

.eyebrow {
  display: block;
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.hero-title { font-weight: 400; }
/* ™ som i logoet: lille, hævet til versalhøjden, uden at ændre linjehøjden */
.tm {
  position: relative;
  top: -1.56em;
  margin-left: .08em;
  font-size: .3em;     /* ≈ 16 % af versalhøjden, som i logoet */
  letter-spacing: 0;
  line-height: 0;
}
.display {
  display: block;
  /* Overskriftens versaltop flugter med versaltoppen på "Bogholder inkl. regnskabsprogram"
     i højre kolonne (Helvetica Neue: versalhøjde 0,714; grundlinje ved line-height/2 + 0,3695) */
  margin-top: calc(var(--fs-lead) * .2555 - var(--fs-h1) * .1805);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
}

/* ---------- CTA ---------- */
.hero-action {
  display: flex;
  margin-top: var(--gap-cta);
}
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: var(--cta-h);
  padding: 0 5px 0 24px;
  border: 0;
  /* Alle knapper er piller (CTA'en som i designet) */
  border-radius: 999px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--white);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background .35s var(--ease-out), transform .35s var(--ease-out);
}
/* Sidens primære handling: lidt mere fylde i glasset end bilag-knapperne */
.cta { background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .08) 100%); }
.cta:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .15) 55%, rgba(255, 255, 255, .11) 100%); }
/* Glaskanten: en 1 px gradient-ramme lavet med en maske, så den kan være lysest oppe til venstre */
.cta::before,
.tier span::before {
  content: "";
  position: absolute; inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.cta:active { transform: scale(.98); }
.cta-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--cta-h) - 10px); height: calc(var(--cta-h) - 10px);
  overflow: hidden;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
}
.cta-icon svg { grid-area: 1 / 1; width: 16px; height: 16px; transition: transform .45s var(--ease-out); }
.cta-icon svg + svg { transform: translate(-150%, 150%); }
.cta:hover .cta-icon svg:first-child,
.cta:focus-visible .cta-icon svg:first-child { transform: translate(150%, -150%); }
.cta:hover .cta-icon svg + svg,
.cta:focus-visible .cta-icon svg + svg { transform: none; }

/* ---------- Pris ---------- */
.price {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: var(--gap-kicker);
}
.price-amount {
  display: inline-flex;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.price-unit { font-size: 15px; letter-spacing: -.005em; }
/* 100+ bilag: "Få en pris" i stedet for et beløb */
.price.is-quote .price-unit { display: none; }

/* Ruller-cifre (bygges af main.js) */
.odo {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  /* lidt luft til glyffernes over/underkant uden at klippe */
  padding-block: .06em;
  margin-block: -.06em;
}
.odo-strip { display: flex; flex-direction: column; }
.odo-strip > span { display: block; height: 1em; line-height: 1; }

.tiers { min-width: 0; margin: var(--gap-action) 0 0; padding: 0; border: 0; }
.tiers-row {
  display: flex;
  flex-wrap: wrap;          /* fire bilag-knapper: er kolonnen for smal, rykker de ned under "Bilag/md." */
  align-items: center;
  gap: 12px 20px;
}
.tiers-label {
  flex: none;
  font-size: var(--fs-ui);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.tiers-options { display: flex; gap: 8px; }
.tier { position: relative; display: block; cursor: pointer; }
.tier input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.tier span {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 52px;
  height: var(--chip-h);
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.02em;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.tier:hover span { background: var(--glass-fill-hover); }
/* Valgt: massivt hvid, så den står som anker i glasset */
.tier input:checked + span { background: var(--white); color: var(--black); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55); }
.tier input:checked + span::before { opacity: 0; }
.tier input:active + span { transform: scale(.96); }
.tier input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 3px; }

/* ---------- Social proof ---------- */
.proof {
  margin-top: auto;
  padding: 64px 0 56px;
  text-align: center;
}
.proof-label {
  font-size: 13px;
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.marquee {
  display: flex;
  margin-top: 55px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-list {
  display: flex;
  flex: none;
  align-items: center;
  animation: marquee var(--marquee-duration, 40s) linear infinite;
}
/* Pause ved mus over – ikke ved tryk på telefon, hvor :hover bliver hængende */
@media (hover: hover) { .marquee:hover .marquee-list { animation-play-state: paused; } }
.marquee-item { flex: none; display: flex; align-items: center; padding: 0 var(--logo-gap, 28px); }
/* Logoerne er allerede hvide på gennemsigtig baggrund; --h sættes pr. logo i HTML */
.marquee-item img { display: block; width: auto; height: calc(var(--h, 26px) * var(--logo-scale, 1)); opacity: .9; }
@keyframes marquee { to { transform: translate3d(-100%, 0, 0); } }

/* ---------- Load-in ---------- */
.reveal { animation: rise 1s var(--ease-out) calc(var(--delay, 0ms) + var(--intro-delay)) both; }
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
}
/* Glas (backdrop-filter) kan ikke se igennem en forælder, der er halvgennemsigtig. Tonede
   containeren ind, ville knapperne være flade under hele fade'en og først slå om til glas til
   sidst. Containere med glasknapper glider derfor kun op, mens knapperne selv (og teksten ved
   siden af) toner ind med samme tid og forsinkelse. */
.reveal-glass { animation-name: rise-move; }
.reveal-glass :is(.cta, .tiers-label, .tier span) { animation: fade-in 1s var(--ease-out) calc(var(--delay, 0ms) + var(--intro-delay)) both; }
@keyframes rise-move {
  from { transform: translate3d(0, 16px, 0); }
}
/* Har skuffen været åben, står forsiden færdig. (På telefon er forsiden skjult, mens skuffen er
   åben, og uden dette ville indgangen spille forfra ved luk – med knapperne usynlige imens.) */
.has-opened :is(.reveal, .reveal-glass :is(.cta, .tiers-label, .tier span), .hero-media img),
.has-opened .hero-pricing::before { animation: none; }
@keyframes fade-in {
  from { opacity: 0; }
}

/* ==========================================================================
   Tacc, fordi du er …
   ========================================================================== */
.why {
  background: var(--white);
  color: var(--ink);
}
/* Brødteksten starter et fast stykke efter hjulets længste ord, så animationen har luft,
   og bruger resten af bredden (kolonne 1 = overskriftens egen bredde, låst af main.js) */
.why-inner {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: calc(var(--fs-h2) * 1.5);
  align-items: center;
  padding: 72px var(--gutter);
}
.why-title {
  grid-column: 1;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  white-space: nowrap;
}
/* Luft over/under linjen, så hjulets ord aldrig rammer kanten */
.why-line { display: block; padding-block: 3.1em; }
.wheel {
  position: relative;
  display: inline-block;
  vertical-align: top;
  min-width: var(--wheel-w, 0); /* sat af main.js: bredden af det længste ord */
}
/* Usynlig "afstandsholder" med det aktuelle ord – som pseudo-element, så det ikke står dobbelt i teksten */
.wheel::before { content: attr(data-word); visibility: hidden; }
.why-br { display: none; } /* linjeskift efter "Tacc," – kun på mobil */
.wheel-word {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 60%;
  will-change: transform, opacity;
}
.why-copy {
  grid-column: 2;
  max-width: 17em;
  font-size: var(--fs-h2-sub);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--black);
  text-wrap: balance;
}

/* Scroll-scene 1: sætningen fyldes ord for ord fra lysegrå til sort, mens man scroller.
   På desktop og tablet står sektionen fast i knap én skærmhøjde imens (sticky), så man
   læser i sit eget tempo; på mobil sker det, mens sektionen passerer. Scrollen styres aldrig.
   Uden understøttelse eller med "reducer bevægelse" står sætningen bare sort som før. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .why { view-timeline: --why block; }
    .why-word {
      animation: word-fill linear both;
      animation-timeline: --why;
      /* 12 ord fordelt over de første tre fjerdedele; den sidste fjerdedel er til at læse færdig */
      animation-range: contain calc(var(--i) * 5.5%) contain calc(var(--i) * 5.5% + 14%);
    }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 810px) and (min-height: 620px) {
    .why { height: 190svh; }
    .why-inner {
      position: sticky;
      top: 0;
      height: 100svh;
      align-content: center;
    }
  }
}
@keyframes word-fill {
  from { color: #c9c6c2; }
}

/* ==========================================================================
   Inklusiv regnskabsprogram
   ========================================================================== */
.features {
  background: var(--white);
  color: var(--ink);
  padding: 0 var(--gutter) 112px;
}

/* Sektionens overskriftslinje: etiket · prik og hårlinje · knap (samme mønster som designets "Pris" og "Sådan fungerer det") */
.section-head {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 40px;
}
.section-label {
  flex: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.section-rule {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--hair-strong);
}
.section-rule::before {
  content: "";
  position: absolute;
  top: -2.5px; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: inherit;
}
/* Mørk knap på lys flade, som skuffens "Book mit kald": Mineral-blæk med en svag glans foroven */
.section-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  background: #202d33 linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s;
}
.section-link:hover { background-color: #35434a; }

/* Tre store kort med smalle mellemrum, så billederne bærer sektionen */
.features-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  --panel-gap: var(--gutter); /* bruges også af scroll-scene 2, når panelet lukker sig */
  column-gap: var(--panel-gap);
  margin-top: 72px;
  list-style: none;
}
/* Hierarki via vægt og farve: titlen i medium sort, brødteksten lysere grå med luft */
.feature-title {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--black);
}
.feature-text {
  margin-top: 14px;
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* Billedet: en tegnet baggrund (assets/img/feature-*.webp), samme filmkorn som heroen,
   og et lille stykke produkt-UI ovenpå i HTML. Alt indeni skaleres med kortet som et
   billede (cqi = kortets bredde). Baggrundsfarven vises, mens billedet hentes. */
.feature-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 381 / 330;
  border-radius: 8px;
  container-type: inline-size;
  line-height: 1.3;
}
.feature-visual-invoice { background-color: #3f9a7c; }
.feature-visual-books { background-color: #7d96a0; }
.feature-visual-report { background-color: #0a1215; }
.feature-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.feature-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .2;
  mix-blend-mode: overlay;
  background-image: var(--grain);
  background-size: 180px 180px;
  pointer-events: none;
}
/* cqi virker først på børnene (et element kan ikke måle sig selv) */
.feature-visual > :not(img) { z-index: 2; }

/* Fakturering: et fakturavindue i portalens lyse UI, nedskaleret som et rigtigt skærmbillede */
.mock-window {
  position: absolute;
  top: 29%; left: 21%;
  width: 58%;
  border-radius: 1.6cqi;
  background: var(--white);
  font-size: 2.6cqi;
  box-shadow: 0 .4cqi 1cqi rgba(8, 38, 29, .12), 0 4cqi 10cqi -3cqi rgba(8, 38, 29, .5);
  color: #202d33;
  letter-spacing: -.005em;
}
.mock-window-head {
  display: flex;
  align-items: center;
  gap: 2.2cqi;
  height: 9cqi;
  padding: 0 3.4cqi;
  border-bottom: 1px solid #edf1f3;
}
.mock-icon {
  display: grid;
  place-items: center;
  width: 5cqi; height: 5cqi;
  border: 1px solid #e3e8eb;
  border-radius: 1.2cqi;
  background: #f6f8f9;
  color: #35434a;
}
.mock-icon svg { width: 2.8cqi; height: 2.8cqi; }
.mock-field {
  position: relative;
  margin: 3.6cqi;
  padding: 2.6cqi 3cqi 8cqi;
  border: 1px solid #e9edf0;
  border-radius: 1.2cqi;
  font-size: 2.45cqi;
  line-height: 1.55;
}
.mock-caret {
  display: inline-block;
  width: 1px; height: 1.15em;
  margin-left: .3cqi;
  vertical-align: -.2em;
  background: #202d33;
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret {
  50% { opacity: 0; }
}
.mock-send {
  position: absolute;
  right: 2.2cqi; bottom: 2.2cqi;
  display: grid;
  place-items: center;
  width: 4.4cqi; height: 4.4cqi;
  border-radius: 50%;
  background: #111;
  color: var(--white);
}
.mock-send svg { width: 2.6cqi; height: 2.6cqi; }

/* Bogføring: statuslinje med frostet spor og et fyld, der glider ud i en lys forkant */
.mock-status {
  position: absolute;
  top: 43%; left: 18%; right: 18%;
  color: rgba(255, 255, 255, .94);
}
.mock-status-line {
  display: flex;
  align-items: center;
  gap: 2.2cqi;
  padding-left: .6cqi;
  font-size: 3.1cqi;
  letter-spacing: -.005em;
  text-shadow: 0 1px 1.6cqi rgba(30, 50, 60, .25);
}
.mock-status-line svg { flex: none; width: 3.6cqi; height: 3.6cqi; opacity: .55; }
.mock-progress {
  display: block;
  height: 2.4cqi;
  margin-top: 4.2cqi;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 2px rgba(20, 40, 50, .12);
}
.mock-progress span {
  display: block;
  width: 75%; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, .3), #fff 92%);
  box-shadow: 0 0 2.4cqi rgba(255, 255, 255, .5);
}

/* Rapportering: kuglen er en del af billedet; nøgletallet står nede i hjørnet */
.mock-kpi {
  position: absolute;
  left: 7%; bottom: 8%;
  font-size: 3cqi;
  line-height: 1.4;
  color: rgba(255, 255, 255, .58);
}
.mock-kpi strong {
  display: block;
  font-weight: 500;
  color: rgba(255, 255, 255, .84);
}

/* Scroll-scene 2: "ét program, tre ting". Kortene kommer ind som ét samlet panel i næsten
   fuld bredde (ingen mellemrum, kun de yderste hjørner runde) og deler sig i tre kort, mens
   sektionen glider op. Kun desktop og tablet; på mobil står kortene under hinanden. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 810px) {
    .features { view-timeline: --panel block; overflow-x: clip; }
    .features-list,
    .feature,
    .feature-visual {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --panel;
      animation-range: cover 4% cover 36%;
    }
    .features-list { transform-origin: 50% 0; animation-name: panel-grow; }
    .feature:first-child { animation-name: panel-close-left; }
    .feature:last-child { animation-name: panel-close-right; }
    .feature:first-child .feature-visual { animation-name: corners-left; }
    .feature:nth-child(2) .feature-visual { animation-name: corners-middle; }
    .feature:last-child .feature-visual { animation-name: corners-right; }
  }
}
@keyframes panel-grow { from { transform: scale(1.07); } }
@keyframes panel-close-left { from { translate: var(--panel-gap) 0; } }
@keyframes panel-close-right { from { translate: calc(-1 * var(--panel-gap)) 0; } }
@keyframes corners-left { from { border-radius: 8px 0 0 8px; } }
@keyframes corners-middle { from { border-radius: 0; } }
@keyframes corners-right { from { border-radius: 0 8px 8px 0; } }

/* Når et kort er helt fremme, tænder det én gang (main.js sætter .is-armed og .is-on):
   UI'et glider op, fakturaen skrives linje for linje, fremdriften fyldes, og tallene
   tæller op; titel og tekst følger lige efter. Uden JS eller med "reducer bevægelse"
   står alt færdigt fra start. --d forskyder kortene, når de står side om side. */
.features.is-armed :is(.feature-visual > :not(img), .feature-title, .feature-text) {
  opacity: 0;
  translate: 0 12px;
  transition: opacity .7s var(--ease-out), translate .9s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--dd, 0s));
}
.features.is-armed .feature-title { --dd: .35s; }
.features.is-armed .feature-text { --dd: .45s; }
.features.is-armed .feature.is-on :is(.feature-visual > :not(img), .feature-title, .feature-text) {
  opacity: 1;
  translate: none;
}
.features.is-armed .mock-line {
  opacity: 0;
  transition: opacity .35s ease calc(var(--d, 0s) + .35s + var(--n) * .3s);
}
.features.is-armed .feature.is-on .mock-line { opacity: 1; }
.features.is-armed .mock-progress span {
  width: 0;
  transition: width 1.4s var(--ease-out) calc(var(--d, 0s) + .2s);
}
.features.is-armed .feature.is-on .mock-progress span { width: 75%; }
@media (min-width: 810px) {
  .feature:nth-child(2) { --d: .15s; }
  .feature:nth-child(3) { --d: .3s; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--hair);
  color: var(--ink-muted);
  font-size: 13px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--gutter);
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* ==========================================================================
   Book et kald (skuffe)
   Bygget efter platformens oprettelsesside (arbejdsrum 3, app/auth/opret):
   lys formular til venstre med samme typografi, felter med ikon og en
   handling i fuld bredde, og Mineral-gardinet til højre med abonnementet i
   et glaskort. Arket svæver 8 px fri af kanten som portalens skuffe.
   ========================================================================== */
.signup {
  /* Portalens lyse Mineral-tokens (platform app/globals.css) */
  --m-paper: #f3f5f6;
  --m-surface-2: #edf1f3;
  --m-surface-3: #e0e6e9;
  --m-ink-strong: #202d33;
  --m-ink: #35434a;
  --m-muted: #5b6870;
  --m-hair: #dce3e7;
  --m-hair-strong: #b3c0c7;
  --m-edge: rgba(182, 197, 205, .4);
  --m-accent: #347966;
  --m-accent-soft: #eff6f4;
  --m-accent-border: #bad7ce;
  --m-danger: #a04740;
  --m-danger-edge: #ac4c45;
  /* Skuffens gardin er blåt: platformens valgt-række-blå (arbejdsrum 1: --portal-selection-tone,
     --match 20 % i #3478ed ≈ #3674d7). Plakaten er heroens shader med blå palet:
     #0d1420 → #1b3a70 → #3674d7 → #93b5f2 (assets/img/signup-poster-blaa-*.webp). */
  --m-blue-night: #0d1420;
  --m-glow: #93b5f2; /* flueben på gardinet (gardinets højlys) */
  position: fixed; inset: 0; z-index: 900;
  color: var(--m-ink);
}
/* Computer/tablet: siden bag skuffen står helt stille. main.js sætter body's top til den aktuelle
   rulleposition og ruller tilbage ved luk. (Telefon: se "Skuffen på telefon" under Mobil.) */
@media (min-width: 810px) {
  .signup-open,
  .signup-open body { overflow: hidden; }
  .signup-open body { position: fixed; left: 0; right: 0; width: 100%; }
}
.signup[hidden] { display: none; }
/* Mens skuffen lukker (eller lige er ved at åbne), går tryk igennem til siden bag den,
   så CTA'en virker straks igen og ikke sluges af baggrunden, der toner ud */
.signup:not(.is-open) { pointer-events: none; }
.signup-backdrop {
  position: absolute; inset: 0;
  touch-action: none;
  background: rgba(6, 10, 12, .4);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .18s ease-out;
}
.signup.is-open .signup-backdrop { opacity: 1; }
.signup-panel {
  position: absolute; top: 8px; right: 8px; bottom: 8px;
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  width: min(1000px, calc(100vw - 16px));
  overflow: hidden;
  border: 1px solid var(--m-edge);
  border-top-color: #fff;
  border-radius: 18px;
  background: var(--m-paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 12px -8px rgba(32, 59, 69, .12), 0 12px 48px rgba(20, 20, 22, .18);
  opacity: 0;
  transform: translateX(24px);
  /* Portalens bevægelse: ind 240 ms, ud 160 ms */
  transition: opacity .16s cubic-bezier(.4, 0, 1, 1), transform .16s cubic-bezier(.4, 0, 1, 1);
}
.signup.is-open .signup-panel {
  opacity: 1;
  transform: none;
  transition-duration: .24s;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1);
}
.signup :is(button, input):focus-visible { outline: 1.5px solid var(--m-muted); outline-offset: 1px; }
.signup :is(.signup-field, .signup-submit, .signup-badge-circle) svg {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Luk: en glascirkel i hjørnet, oven på gardinet */
.signup-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.signup-close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.signup .signup-close:focus-visible { outline-color: #fff; }

/* ---------- Venstre side: formularen ---------- */
.signup-main {
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 26px 40px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.signup-head { flex: none; display: flex; align-items: center; min-height: 36px; color: var(--m-ink-strong); }
.signup-head .brand-logo { width: 100px; }
.signup-content {
  width: 100%; max-width: 380px;
  margin: auto;
  padding: 36px 0 32px;
}
.signup-title,
.signup-done-title {
  margin-bottom: 16px;
  font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em;
  color: var(--m-ink-strong);
  text-wrap: balance;
  outline: none;
}
.signup-done-text {
  max-width: 365px;
  margin-bottom: 32px;
  font-size: 14px; line-height: 1.65;
  color: var(--m-muted);
}
.signup-done-text strong { font-weight: 500; color: var(--m-ink); }

.signup-form { display: flex; flex-direction: column; gap: 18px; }
.signup-form[hidden] { display: none; }
.signup-label { display: block; padding: 0; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--m-ink); }
.signup-field { position: relative; display: block; margin-top: 9px; }
.signup-field svg {
  position: absolute; top: 50%; left: 14px;
  transform: translateY(-50%);
  color: var(--m-muted);
  pointer-events: none;
}
.signup-field input {
  display: block;
  width: 100%; height: 46px;
  padding: 0 15px 0 41px;
  border: 1px solid var(--m-hair);
  border-radius: 8px;
  background: #fff;
  color: var(--m-ink);
  font: inherit;
  font-size: 14px; font-weight: 400;
  transition: border-color .15s;
}
.signup-field input::placeholder { color: var(--m-muted); opacity: 1; }
.signup-field input:hover { border-color: var(--m-hair-strong); }
/* Skrivefelter markeres neutralt; grøn er for status og aktive valg */
.signup .signup-field input:focus { outline: none; border-color: var(--m-muted); }
.signup-field input[aria-invalid="true"] { border-color: var(--m-danger-edge); }
.signup-error { font-size: 13px; line-height: 18px; color: var(--m-danger); }
.signup-error[hidden] { display: none; }
.signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bilag: en segmentkontrol i feltets højde, synkront med heroens bilag-knapper */
.signup-seg { min-width: 0; margin: 0; padding: 0; border: 0; }
.signup-seg-track {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 46px;
  margin-top: 9px;
  padding: 3px;
  border: 1px solid var(--m-hair);
  border-radius: 999px;
  background: var(--m-surface-2);
}
.signup-seg label { position: relative; display: flex; }
.signup-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.signup-seg span {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--m-muted);
  white-space: nowrap;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.signup-seg input:hover + span { color: var(--m-ink-strong); }
.signup-seg input:checked + span {
  background: #fff;
  color: var(--m-ink-strong);
  box-shadow: 0 0 0 1px rgba(20, 20, 22, .06), 0 1px 2px rgba(20, 20, 22, .08);
}
.signup-seg input:focus-visible { outline: none; }
.signup-seg input:focus-visible + span { outline: 1.5px solid var(--m-muted); outline-offset: 1px; }

/* Handlingen: fuld bredde med pil som oprettelsens "Fortsæt", men som pille */
.signup-submit {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--m-ink-strong) linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 1px 2px rgba(32, 45, 51, .04);
  color: #fff;
  font: inherit;
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s;
}
.signup-submit:hover { background-color: var(--m-ink); }
.signup-submit[disabled] { cursor: progress; opacity: .8; }
.signup .signup-submit:focus-visible { outline-offset: 3px; }
.signup-reassure { margin-top: -4px; text-align: center; font-size: 12px; line-height: 18px; color: var(--m-muted); }

.signup-foot { flex: none; text-align: center; font-size: 12px; line-height: 18px; color: var(--m-muted); }
.signup-foot a { color: var(--m-ink-strong); font-weight: 500; text-decoration: none; white-space: nowrap; }
.signup-foot a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Kvittering: cirklen popper, fluebenet tegnes, derefter glider teksten frem (oprettelsens timing) */
.signup.is-done .signup-intro { display: none; }
.signup-done[hidden] { display: none; }
.signup-badge {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 32px;
  font-size: 13px; line-height: 18px;
  color: var(--m-accent);
}
.signup-badge-circle {
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--m-accent-border);
  border-radius: 50%;
  background: var(--m-accent-soft);
  animation: signup-circle-in .32s cubic-bezier(.22, 1, .36, 1) both;
}
.signup-badge-circle path { stroke-dasharray: 32; animation: signup-check-in .2s ease-out 40ms both; }
.signup-badge-text { animation: signup-fade-in .22s ease-out both; }
.signup-done :is(.signup-done-title, .signup-done-text, .signup-submit) { animation: signup-reveal .42s ease .2s both; }
@keyframes signup-circle-in { from { opacity: 0; transform: scale(.8); } }
@keyframes signup-check-in { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
@keyframes signup-fade-in { from { opacity: 0; } }
@keyframes signup-reveal { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Højre side: Mineral-gardinet med abonnementet ---------- */
.signup-visual {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 64px 9% 28px;
  overflow: hidden;
  background: var(--m-blue-night) url("/assets/img/signup-poster-blaa-640.webp") center / cover no-repeat;
  background-image: image-set(url("/assets/img/signup-poster-blaa-640.webp") 1x, url("/assets/img/signup-poster-blaa-1000.webp") 2x);
  color: #fff;
}
/* Samme nedtoning som oprettelsen og samme filmkorn som heroen, tonet mod gardinets mørke blå */
.signup-visual::before,
.signup-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.signup-visual::before { background: linear-gradient(180deg, rgba(13, 20, 32, .2) 0%, rgba(13, 20, 32, .08) 30%, rgba(13, 20, 32, .47) 62%, var(--m-blue-night) 100%); }
.signup-visual::after { opacity: .22; mix-blend-mode: overlay; background-image: var(--grain); }
.signup-visual-content {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.signup-visual-title {
  margin-bottom: 28px;
  text-align: center;
  font-size: 34px; font-weight: 400; line-height: 1.12; letter-spacing: -.02em;
}

/* Glaskortet: oprettelsens "Dit bogholderteam sørger for", her med abonnementets linjer */
.signup-glass {
  width: 100%; max-width: 400px;
  padding: 6px 20px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-top-color: rgba(255, 255, 255, .4);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 15px 35px -20px rgba(0, 0, 0, .53);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.signup-glass > div {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 0;
  font-size: 14px; line-height: 20px;
}
.signup-glass > div + div { border-top: 1px solid rgba(255, 255, 255, .09); }
.signup-glass dt { display: flex; align-items: center; gap: 12px; }
.signup-glass dd { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.signup-glass dt svg { flex: none; fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.signup-glass small { margin-left: 4px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.signup-glass-head { font-size: 13px !important; color: rgba(255, 255, 255, .7); }
.signup-incl { display: flex; }
.signup-incl svg { fill: none; stroke: var(--m-glow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.signup-glass-total { padding: 16px 0 18px !important; }
.signup-glass-total dt { display: block; font-weight: 500; }
.signup-glass-total dd { font-size: 32px; line-height: 1; letter-spacing: -.03em; }
.signup-glass-total dd small { margin-left: 5px; font-size: 14px; letter-spacing: 0; }
.signup-glass-total.is-quote dd { font-size: 20px; letter-spacing: -.01em; }
.signup-glass-total.is-quote small { display: none; }

/* Kims citat mellem overskriften og formularen (lys side) */
.signup-person { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; }
.signup-person img { flex: none; border-radius: 50%; }
.signup-person figcaption { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--m-ink-strong); }
.signup-person q { quotes: "»" "«"; }
.signup-person span { display: block; font-size: 12px; font-weight: 400; line-height: 18px; color: var(--m-muted); }

/* Logoerne er hvide som i heroen */
.signup-logos { flex: none; margin: 28px -9% 0; text-align: center; }
.signup-logos .proof-label { font-size: 12px; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .65); }
.signup-logos .marquee { margin-top: 18px; --logo-scale: .7; --logo-gap: 18px; }
.signup-logos .marquee-item img { opacity: .82; }

/* Lave skærme: lidt mindre luft, så handlingen kan ses uden at rulle */
@media (min-width: 810px) and (max-height: 820px) {
  .signup-main { padding-block: 20px 14px; }
  .signup-content { padding-block: 14px 10px; }
  .signup-title { margin-bottom: 12px; font-size: 30px; }
  .signup-person { margin-bottom: 22px; }
  .signup-form { gap: 14px; }
  .signup-visual { padding-top: 48px; }
  .signup-visual-title { margin-bottom: 22px; font-size: 30px; }
  .signup-glass > div { padding-block: 12px; }
}
/* Skærmtastatur på iPad: luft i bunden svarende til tastaturet (main.js sætter --kb), så formularen
   kan rulles, til knappen står over tastaturet. Uden tastatur er --kb 0. */
@media (min-width: 810px) {
  .signup-panel .signup-main { padding-bottom: calc(20px + var(--kb, 0px)); }
}

/* ==========================================================================
   Stor desktop (≥1728)
   ========================================================================== */
@media (min-width: 1728px) {
  :root {
    --fs-display: 80px;
    --fs-h1: 58px;
    --fs-lead: 20px;
    --fs-h2: 58px;
    --cta-h: 52px;
    --chip-h: 38px;
    --gap-kicker: 24px;
    --gap-action: 40px;
    --fs-h2-sub: 42px;
  }
  .feature-title { font-size: 22px; }
}

/* ==========================================================================
   Tablet (810–1199)
   ========================================================================== */
@media (max-width: 1199px) {
  :root {
    --fs-display: 62px;
    --fs-h1: 36px;
    --fs-lead: 17px;
    --fs-h2: 36px;
    --fs-h2-sub: 26px;
  }
  :root { --gap-kicker: 18px; --gap-action: 30px; --gap-cta: 28px; }

  /* Stablet: overskrift-blokken og brødteksten centreres. Blokken har fast bredde
     (hjulet er låst til det længste ord), mens linjerne i den står venstrestillet. */
  .why-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 40px; padding-block: 56px 96px; }
  .why-title {
    grid-column: 1;
    width: max-content;
    max-width: 100%;
    font-size: min(var(--fs-h2), calc((100vw - 2 * var(--gutter)) / 14.6));
  }
  .why-copy { grid-column: 1; max-width: 560px; text-align: center; }

  .features-list { --panel-gap: 16px; margin-top: 64px; }
  .feature-title { margin-top: 22px; font-size: 19px; }
}

/* Smal tablet: prisblokken får en halv kolonne i stedet for en tredjedel */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-intro { grid-column: 1; }
  .hero-pricing { grid-column: 2; }
}

/* ==========================================================================
   Mobil (<810)
   ========================================================================== */
@media (max-width: 809px) {
  :root {
    --gutter: 16px;
    /* Tre linjer overskrift på 46 px vejer op mod prisen; prisen er stadig størst */
    --fs-display: 58px;
    --fs-h1: 46px;
    --gap-cta: 26px;
    --fs-lead: 17px;
    --chip-h: 40px;      /* større trykflade på telefon */
    --fs-ui: 15px;
    --fs-h2: 34px;
    --fs-h2-sub: 22px;
  }

  .site-header { padding-top: 24px; }
  .brand-logo { width: 96px; }


  /* Telefon: hele forsiden skal være på én skærm i Safaris lille viewport (svh), så den ikke kan
     rulles. Overskrift, pris og afstande skalerer derfor med skærmhøjden på lave telefoner. */
  :root {
    --fs-h1: min(46px, 6.2svh);
    --fs-display: min(58px, 7.8svh);
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(28px, 5svh, 48px);
    /* Indholdet starter under logoet og balancerer mellem logo og logoer i bunden */
    padding-top: clamp(76px, calc(14svh - var(--bar-h)), 170px);
  }
  .hero-intro, .hero-pricing { grid-column: 1; padding-top: 26px; }
  .hero-intro { padding-top: 0; }

  /* Stablet: ingen tværgående linjer at flugte med, så afstandene sættes direkte */

  .price { margin-top: 16px; gap: 14px; }
  .tiers { margin-top: 24px; }
  .tiers-row { gap: 16px; }
  .tier span { min-width: 58px; font-size: 15px; }
  .tiers-options { gap: 10px; }

  .proof { padding: clamp(20px, 4svh, 52px) 0 clamp(14px, 2.6svh, 30px); }
  .marquee { margin-top: clamp(16px, 3svh, 30px); --logo-scale: .8; --logo-gap: 20px; }

  /* Sektion 2 på mobil: "Tacc," på første linje, "fordi du er {ord}" på anden.
     Hjulets ord over midten får dermed plads i rummet til højre for "Tacc,",
     så den fulde tromle fra desktop kan køre. Skriften skaleres, så det
     længste ord ("content creator") altid kan være på linjen. */
  .why-br { display: inline; }
  .why-inner { row-gap: 32px; padding-block: 64px 80px; }
  .why-title { font-size: min(var(--fs-h2), calc((100vw - 2 * var(--gutter)) / 11.6)); }
  .why-line { padding-block: 2.2em 3.1em; }

  /* Kortene stables; overskriftslinjen bliver lidt mindre, så den kan være på én linje */
  .features { padding-bottom: 72px; }
  .section-head { gap: 14px; min-height: 36px; }
  .section-label { font-size: 13px; }
  .section-link { height: 36px; padding: 0 16px; font-size: 13px; }
  .features-list { grid-template-columns: minmax(0, 1fr); row-gap: 48px; margin-top: 40px; }
  .feature-title { margin-top: 20px; }

  .footer-inner { flex-direction: column; gap: 4px; }

  /* Skuffen på telefon: arket glider op over forsiden som et fast lag, og når det står, bliver det
     en almindelig side (html.signup-open, sat af main.js): forsiden skjules, og arket ruller med
     dokumentet, så iPhone selv holder feltet fri af tastaturet. (Et fast lag under indtastning gav
     hop ved tastaturforslag og en luk-knap, der ikke reagerede.) Arket ligger samme sted i begge
     tilstande, så skiftet ikke kan ses. Formularen øverst, gardinet med abonnementet under den. */
  .signup-panel {
    top: max(8px, env(safe-area-inset-top)); right: 0; bottom: 0; left: 0;
    display: block;
    width: auto;
    overflow: hidden;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    opacity: 1;
    transform: translateY(100%);
  }
  .signup .signup-panel,
  .signup.is-open .signup-panel { transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
  .signup-open :is(.site-header, main, .intro, .skip-link) { display: none; }
  /* Træk ned fra toppen lukker arket (main.js) i stedet for at genindlæse siden – også midt i
     trækket og lukningen, hvor forsiden er fremme bag arket igen */
  .signup-shown { overscroll-behavior-y: none; }
  .signup-open .signup { position: relative; inset: auto; }
  .signup-open .signup-backdrop { display: none; }
  .signup-open .signup-panel {
    position: relative; inset: auto;
    margin-top: max(8px, env(safe-area-inset-top));
    overflow: clip; /* runde hjørner uden at blive en rullecontainer */
  }
  /* Luk sidder øverst i arket og ruller med. (Klæbet til toppen endte den under iPhones
     statuslinje, når siden var rullet, og dér går tryk til iOS i stedet for knappen.) */
  .signup-close {
    position: absolute; top: 10px; right: 10px;
    border-color: transparent;
    background: color-mix(in srgb, var(--m-paper) 86%, transparent);
    color: var(--m-muted);
  }
  .signup-close:hover { background: var(--m-surface-2); color: var(--m-ink-strong); }
  .signup .signup-close:focus-visible { outline-color: var(--m-muted); }
  .signup-main { overflow: visible; padding: 0 20px 28px; background: var(--m-paper); }
  /* Topbjælken med logo og luk ligger øverst i arket og ruller med (se luk ovenfor) */
  .signup-head { min-height: 56px; }
  .signup-head .brand-logo { width: 90px; }
  .signup-content { max-width: 400px; padding: 28px 0 24px; }
  .signup-title, .signup-done-title { font-size: 30px; }
  .signup-field input { font-size: 16px; } /* 16 px: iOS zoomer ikke ind ved fokus */
  .signup-visual { padding: 52px 20px 0; }
  .signup-visual-title { font-size: 28px; }
  .signup-logos { margin-inline: -20px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* Smalle telefoner */
@media (max-width: 479px) {
  /* De fire bilag-knapper står på én linje ned til 360 px; smallere rykker de ned under "Bilag/md." */
  .tiers-row { gap: 12px 8px; }
  .tiers-options { gap: 6px; }
  .tier span { min-width: 54px; padding: 0 9px; }
  .section-head { gap: 8px; }
  .section-label { font-size: 12px; letter-spacing: .01em; }
  .section-link { padding: 0 14px; }
}

/* Kort landskab (telefon på tværs): ingen tvungen fuld højde */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; }
}

/* ---------- Respekter "reducer bevægelse" ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .marquee { overflow-x: auto; }
}