/*
 * Veyro – designsystem
 * Farver, skrift og mål kommer fra snippets/theme-styles.liquid (Temaindstillinger) og samles her
 * som fælles variabler. Alle sider bruger de samme variabler og komponenter.
 * Struktur: 1 reset · 2 variabler · 3 typografi · 4 layout · 5 komponenter · 6 header og footer
 *           7 sektioner · 8 designkoncepter · 9 formularer · 10 dokumenter · 11 handel · 12 cookies · 13 bevægelse
 */

/* 1 ─ Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* 2 ─ Variabler */
:root {
  /* Farver */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --fg: var(--color-ink);
  --muted: var(--color-muted);
  --line: rgba(var(--ink-rgb), .13);
  --line-strong: rgba(var(--ink-rgb), .26);
  --tint: rgba(var(--ink-rgb), .045);
  --accent: var(--color-accent);
  --accent-ink: var(--color-accent-ink);
  --accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000);
  --accent-soft: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  --accent-text: color-mix(in srgb, var(--color-accent) 45%, #000); /* orange tone til tekst med god kontrast */

  /* Skrift: én familie (Inter Tight) og tre vægte */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: var(--heading-weight, 600);
  --fs-body: calc(clamp(1rem, .955rem + .2vw, 1.125rem) * var(--body-scale, 1));
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-small: .9375rem;
  --fs-xs: .875rem;
  --fs-xl: calc(clamp(2.375rem, 1.6rem + 3.2vw, 4.25rem) * var(--heading-scale, 1));
  --fs-lg: calc(clamp(1.875rem, 1.4rem + 1.8vw, 2.875rem) * var(--heading-scale, 1));
  --fs-md: calc(clamp(1.375rem, 1.2rem + .7vw, 1.75rem) * var(--heading-scale, 1));
  --fs-sm: calc(clamp(1.125rem, 1.08rem + .2vw, 1.25rem) * var(--heading-scale, 1));
  --lh-body: 1.6;
  --lh-heading: 1.12;
  --ls-heading: -.022em;
  --measure: 66ch;

  /* Bredder og afstande */
  --page: var(--page-width, 1280px);
  --gutter: clamp(16px, 4vw, 40px);
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;
  --section-y: calc(clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem) * var(--section-spacing, 1));
  --col-gap: clamp(1.5rem, 1rem + 2.4vw, 4rem);
  --header-h: 72px;

  /* Kanter, hjørner og fokus */
  --border: 1px solid var(--line);
  --radius-sm: 6px;
  --radius: var(--radius-button, 10px);
  --radius-lg: var(--radius-card, 16px);
  --focus: 2px solid var(--fg);
  --focus-offset: 3px;

  /* Bevægelse: korte overgange, ingen scroll-effekter */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* 3 ─ Typografi */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, h5, .t-xl, .t-lg, .t-md, .t-sm, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
.t-xl, .h-display { font-size: var(--fs-xl); line-height: 1.04; letter-spacing: -.03em; }
.t-lg, .h1, .h2 { font-size: var(--fs-lg); }
.t-md, .h3 { font-size: var(--fs-md); }
.t-sm, .h4 { font-size: var(--fs-sm); letter-spacing: -.012em; line-height: 1.25; }
.h5 { font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3; }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg); }
.small { font-size: var(--fs-small); }
.muted { color: var(--muted); }
.label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); letter-spacing: .01em; margin-bottom: var(--sp-3); }
.eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); margin-bottom: var(--sp-3); }
strong, b { font-weight: var(--fw-bold); }

.rte > * + * { margin-top: .85em; }
.rte ul, .rte ol { padding-left: 1.2em; }
.rte li + li { margin-top: .35em; }
.rte a { text-decoration: underline; }
.rte a:hover { text-decoration-thickness: 2px; }
.rte--long { max-width: var(--measure); }
.rte--long h2 { font-size: var(--fs-md); margin-top: 2.2em; scroll-margin-top: calc(var(--header-h) + 20px); }
.rte--long h3 { font-size: var(--fs-sm); margin-top: 1.8em; }
.rte--long h2 + *, .rte--long h3 + * { margin-top: .6em; }
code, pre { font-family: var(--font-mono); font-size: .9em; }

/* 4 ─ Layout */
.container { width: 100%; max-width: calc(var(--page) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(52rem + var(--gutter) * 2); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .5); }
.section + .section { padding-top: calc(var(--section-y) * .75); }
.section + .section--tight, .section--tight + .section { padding-top: calc(var(--section-y) * .5); }
.main:focus { outline: none; }
.head { max-width: 46rem; margin-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 3rem); }
.head__title + .head__text { margin-top: var(--sp-4); }
.head__text { color: var(--muted); font-size: var(--fs-lead); line-height: 1.55; max-width: 60ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-6); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 5 ─ Komponenter */
.skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 200; padding: .75rem 1rem; background: var(--fg); color: var(--bg); border-radius: var(--radius); }
.skip-link:focus { top: var(--sp-3); }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); border-radius: 2px; }

/* Knapper: primær (orange) til hovedhandlingen, sekundær med kant */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.3em;
  font-family: var(--font-body); font-size: 1rem; font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -.005em;
  text-decoration: none; text-align: center;
  color: var(--fg); background: transparent;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--secondary { background: transparent; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .btn--secondary:hover { background: var(--tint); border-color: var(--fg); }
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn--sm { min-height: 42px; padding: .55em 1em; font-size: .9375rem; }
.btn--lg { min-height: 54px; padding: .8em 1.5em; }
.btn--block { width: 100%; }
.btn--link { min-height: 44px; padding: .5em 0; border: 0; text-decoration: underline; text-underline-offset: .25em; }
.btn__icon .icon { width: 1em; height: 1em; }
.link-button { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.arrow-link { display: inline-block; padding-block: .55em; font-weight: var(--fw-medium); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .3em; }
.arrow-link::after { content: '→'; display: inline-block; margin-left: .4em; transition: transform var(--dur) var(--ease); }
.arrow-link:hover { text-decoration-color: currentColor; }
@media (hover: hover) { .arrow-link:hover::after { transform: translateX(3px); } }

/* Mærkater: kun til status (På vej) og til at markere eksempler (Designkoncept, Demo) */
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: .1rem .6rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.2; white-space: nowrap; color: var(--fg); background: var(--surface); }
.badge--coming { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-text); }
.badge--on-dark { background: transparent; border-color: rgba(var(--dark-ink-rgb), .3); color: var(--color-dark-ink); }

/* Lister */
.ticks { list-style: none; padding: 0; display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.6em; }
.ticks li::before { content: ''; position: absolute; left: .2em; top: .5em; width: .62em; height: .34em; border-left: 2px solid var(--fg); border-bottom: 2px solid var(--fg); transform: rotate(-45deg); }
.dashes { list-style: none; padding: 0; display: grid; gap: .5rem; }
.dashes li { position: relative; padding-left: 1.4em; }
.dashes li::before { content: '–'; position: absolute; left: 0; color: var(--muted); }

.card { background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }

.table { width: 100%; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.table caption { text-align: left; font-size: var(--fs-xs); color: var(--muted); padding-bottom: var(--sp-3); }
.table th, .table td { padding: .7rem 0; border-bottom: var(--border); text-align: left; font-weight: var(--fw-regular); }
.table thead th { font-weight: var(--fw-medium); color: var(--muted); border-bottom-color: var(--line-strong); }
.table .num { text-align: right; }

.breadcrumbs { margin-bottom: var(--sp-6); font-size: var(--fs-xs); color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; }
.breadcrumbs li + li::before { content: '/'; margin-right: .4rem; opacity: .6; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--fg); text-decoration: underline; }

.facts { display: grid; border-top: var(--border); }
.facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-4); padding-block: var(--sp-4); border-bottom: var(--border); }
.facts dt { font-weight: var(--fw-medium); }
.facts dd { color: var(--muted); }


/* Logo */
.logo { display: inline-flex; align-items: baseline; text-decoration: none; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 1.5rem; letter-spacing: -.035em; line-height: 1; color: var(--fg); }
.logo__dot { color: var(--accent); }
.logo__image { width: var(--logo-width); height: auto; }

/* 6 ─ Header og footer */
.site-header { position: relative; z-index: 50; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.site-header--sticky { position: sticky; top: 0; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--header-h); }
.site-header .logo { margin-right: auto; }
.nav { display: none; }
.nav__list { display: flex; gap: .25rem; }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .75rem; border-radius: var(--radius-sm); font-size: .9875rem; font-weight: var(--fw-medium); text-decoration: none; color: var(--fg); }
.nav__link:hover { background: var(--tint); }
.nav__link[aria-current='page'], .nav__link[data-active] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: .45em; }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); }
.site-header__login { display: none; }
.site-header__cart { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .6rem; font-size: .9375rem; font-weight: var(--fw-medium); text-decoration: none; border-radius: var(--radius-sm); }
.site-header__cart:hover { background: var(--tint); }
.site-header__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: .75rem; font-weight: var(--fw-bold); }
.nav-toggle { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .4rem .7rem; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: .9375rem; font-weight: var(--fw-medium); }
.nav-toggle__bars { display: grid; gap: 5px; width: 16px; }
.nav-toggle__bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-nav { position: fixed; inset: var(--header-h) 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-top: var(--border); padding-block: var(--sp-4) var(--sp-7); }
.mobile-nav__list { margin-bottom: var(--sp-5); }
.mobile-nav__link { display: flex; align-items: center; min-height: 56px; border-bottom: var(--border); font-size: 1.25rem; font-weight: var(--fw-medium); text-decoration: none; }
.mobile-nav__link[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.mobile-nav__meta { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); color: var(--muted); }
.mobile-nav__meta a { display: inline-flex; min-height: 44px; align-items: center; }
.nav-open body { overflow: hidden; }
@media (max-width: 419px) { .site-header__cta { display: none; } }
@media (min-width: 990px) {
  .nav { display: block; margin-right: auto; }
  .nav-toggle, .mobile-nav { display: none !important; }
  .site-header .logo { margin-right: var(--sp-4); }
  .site-header__login { display: inline-flex; }
}

.site-footer { background: var(--color-dark-bg); color: var(--color-dark-ink); padding-block: clamp(3rem, 2.4rem + 2.4vw, 4.5rem) var(--sp-5); --fg: var(--color-dark-ink); --muted: var(--color-dark-muted); --line: rgba(var(--dark-ink-rgb), .14); --line-strong: rgba(var(--dark-ink-rgb), .3); }
.site-footer :focus-visible { outline-color: var(--color-dark-ink); }
.site-footer__grid { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1 / -1; max-width: 26rem; }
.site-footer__tagline { margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-small); }
.site-footer__heading { font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: .01em; color: var(--muted); margin-bottom: var(--sp-3); }
.site-footer__col ul { display: grid; gap: .1rem; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--fs-small); text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; }
.site-footer__contact { grid-column: 1 / -1; }
.site-footer__address { margin-top: var(--sp-3); font-style: normal; font-size: var(--fs-small); color: var(--muted); line-height: 1.6; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: var(--border); font-size: var(--fs-xs); color: var(--muted); }
.site-footer__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.site-footer__meta a, .site-footer__meta button { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--fs-xs); color: var(--muted); }
.site-footer__meta a:hover, .site-footer__meta button:hover { color: var(--fg); }
@media (min-width: 750px) { .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .site-footer__contact { grid-column: auto; } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); } .site-footer__brand { grid-column: auto; } }

/* 7 ─ Sektioner */

/* Forsidens top og sidetoppe */
.home-hero { padding-block: clamp(2rem, 1.2rem + 3vw, 4rem) var(--section-y); }
.home-hero__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
.home-hero__title { max-width: 14ch; }
.home-hero__text .lead { margin-top: var(--sp-5); max-width: 36rem; color: var(--muted); }
.home-hero__facts { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 990px) { .home-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.page-hero { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.page-hero__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
.page-hero__title { max-width: 18ch; }
.page-hero__text { margin-top: var(--sp-5); max-width: 40rem; color: var(--muted); }
.page-hero__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-small); color: var(--muted); }
.page-hero__rule { margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0; border: 0; border-top: var(--border); }
.page-hero__note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 990px) { .page-hero--split .page-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .page-hero--split .page-hero__aside:has(.facts) { padding-left: var(--sp-6); } }

/* Pakker */
.packages__head { display: grid; gap: var(--sp-4); margin-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 3rem); }
.packages__head .head { margin-bottom: 0; }
.packages__terms { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; }
.packages__terms li { display: inline-flex; align-items: center; min-height: 34px; padding: .2rem .8rem; border-radius: 999px; background: var(--surface); border: var(--border); font-size: var(--fs-small); font-weight: var(--fw-medium); }
@media (min-width: 990px) { .packages__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .packages__terms { justify-content: flex-end; max-width: 30rem; } }
.packages__note { margin-top: var(--sp-6); max-width: var(--measure); color: var(--muted); font-size: var(--fs-small); }
.pc-grid { display: grid; gap: var(--sp-4); list-style: none; padding: 0; }
@media (min-width: 990px) { .pc-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } .pc-grid--coming { --cols: 2; } }
.pc { display: flex; flex-direction: column; gap: var(--sp-4); padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--surface); border: var(--border); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--header-h) + 20px); }
.pc:target { border-color: var(--fg); }
.pc__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.pc__name { font-size: var(--fs-md); }
.pc__desc { color: var(--muted); }
.pc__price { display: grid; gap: .1rem; padding-block: var(--sp-4); border-block: var(--border); }
.pc__price-label { font-size: var(--fs-xs); color: var(--muted); }
.pc__amount { display: flex; align-items: baseline; gap: .25rem; }
.pc__amount strong { font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem); line-height: 1.05; letter-spacing: -.03em; }
.pc__interval { font-size: var(--fs-small); color: var(--muted); }
.pc__vat { font-size: var(--fs-xs); color: var(--muted); }
.pc__list-title { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); margin-bottom: calc(var(--sp-2) * -1); }
.pc__list { font-size: var(--fs-small); }
.pc__list--limits { list-style: none; padding: 0; display: grid; gap: .45rem; }
.pc__list--limits li { padding: .55rem .75rem; border-radius: var(--radius-sm); background: var(--tint); }
.pc__note { font-size: var(--fs-small); color: var(--muted); }
.pc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: auto; padding-top: var(--sp-2); }
.pc__details { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.pc--coming { background: transparent; border-style: dashed; border-color: var(--line-strong); }
@media (min-width: 750px) and (max-width: 989px) {
  .packages--summary .pc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: var(--sp-6); align-content: start; }
  .packages--summary .pc > * { grid-column: 1; }
  .packages--summary .pc__list { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
  .packages--summary .pc > .pc__actions { grid-column: 2; }
}

/* Punkter med tekst */
.info__list { list-style: none; padding: 0; }
.info--rows .info__item { display: grid; gap: var(--sp-2) var(--col-gap); padding-block: var(--sp-5); border-top: var(--border); }
.info--rows .info__item:last-child { border-bottom: var(--border); }
@media (min-width: 750px) { .info--rows .info__item { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.info--grid .info__list { display: grid; gap: var(--sp-6) var(--col-gap); }
@media (min-width: 750px) { .info--grid .info__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .info--grid .info__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.info--grid .info__item { padding-top: var(--sp-4); border-top: 2px solid var(--fg); }
.info--split .info__inner { display: grid; gap: var(--sp-6) var(--col-gap); }
.info--split .info__item { padding-block: var(--sp-5); border-top: var(--border); }
@media (min-width: 990px) {
  .info--split .info__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .info--split .info__head { position: sticky; top: calc(var(--header-h) + 2rem); }
  .info--split .info__note { grid-column: 2; }
}
.info__title { font-size: var(--fs-sm); }
.info__item .info__text { color: var(--muted); }
.info--grid .info__text, .info--split .info__text { margin-top: var(--sp-2); }
.info__tag { display: block; width: fit-content; margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); letter-spacing: .01em; }
.info__note { margin-top: var(--sp-6); max-width: var(--measure); font-size: var(--fs-small); color: var(--muted); }

/* Ydelse: tre visninger */
.service__head { max-width: 44rem; }
.service__head .lead { margin-top: var(--sp-4); color: var(--muted); }
.service__body { display: grid; gap: var(--sp-5) var(--col-gap); margin-top: var(--sp-6); }
.service__q { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); letter-spacing: .01em; margin-bottom: var(--sp-3); }
.service__part .rte { max-width: 60ch; }
.service__part--next .actions { margin-top: var(--sp-4); }
.service--split .service__part { padding-top: var(--sp-5); border-top: var(--border); }
@media (min-width: 990px) {
  .service--split .service__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
  .service--split .service__head { position: sticky; top: calc(var(--header-h) + 2rem); }
  .service--split .service__body { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service--split .service__part--audience, .service--split .service__part--next { grid-column: 1 / -1; }
}
.service--columns .service__body { padding-top: var(--sp-5); border-top: 2px solid var(--fg); }
@media (min-width: 750px) { .service--columns .service__body { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service--columns .service__part--next { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .service--columns .service__body { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service--columns .service__part--next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); padding-top: var(--sp-5); border-top: var(--border); }
  .service--columns .service__part--next .service__q, .service--columns .service__part--next .actions { margin: 0; }
}
.service--compact .service__inner { padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); background: var(--surface); border: var(--border); border-radius: var(--radius-lg); }
@media (min-width: 750px) { .service--compact .service__body { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service--compact .service__part--next { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .service--compact .service__body { grid-template-columns: repeat(3, minmax(0, 1fr)); } .service--compact .service__part--next { grid-column: auto; } }

/* Trin */
.steps__list { list-style: none; padding: 0; display: grid; gap: var(--sp-5); }
.steps__item { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: var(--sp-4); }
.steps__num { grid-row: span 2; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--fg); font-weight: var(--fw-bold); font-size: .9375rem; background: var(--bg); position: relative; z-index: 1; }
.steps__title { font-size: var(--fs-sm); padding-top: .45rem; }
.steps__text { margin-top: var(--sp-2); color: var(--muted); }
.steps__item:not(:last-child)::before { content: ''; position: absolute; left: 19.5px; top: 40px; bottom: calc(var(--sp-5) * -1); width: 1px; background: var(--line-strong); }
@media (min-width: 990px) {
  .steps__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .steps__item { grid-template-columns: 1fr; align-content: start; }
  .steps__num { grid-row: auto; margin-bottom: var(--sp-4); }
  .steps__title { padding-top: 0; }
  .steps__item:not(:last-child)::before { left: 40px; right: calc(var(--sp-5) * -1); top: 19.5px; bottom: auto; width: auto; height: 1px; }
}
.steps__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: var(--border); }
.steps__foot .rte { max-width: 64ch; color: var(--muted); font-size: var(--fs-small); }

/* Kommende løsninger */
.coming__inner { display: grid; gap: var(--sp-6) var(--col-gap); }
.coming__box { padding: clamp(1.25rem, 1rem + 2vw, 3rem); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.coming__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-small); color: var(--muted); }
.coming__head .rte { margin-top: var(--sp-4); color: var(--muted); max-width: 52ch; }
.coming__note { font-size: var(--fs-small); color: var(--muted); max-width: var(--measure); }
@media (min-width: 990px) { .coming__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .coming__note { grid-column: 2; } }

/* Drift: lagerdemo */
.drift__inner { display: grid; gap: var(--sp-6) var(--col-gap); align-items: start; }
.drift__legend { list-style: none; padding: 0; display: grid; gap: var(--sp-3); font-size: var(--fs-small); color: var(--muted); }
.drift__legend strong { color: var(--fg); }
@media (min-width: 990px) { .drift__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .drift__legend-m { display: none; } }
.app { background: var(--color-dark-surface); color: var(--color-dark-ink); border-radius: var(--radius-lg); padding: var(--sp-5); --fg: var(--color-dark-ink); --muted: var(--color-dark-muted); --line: rgba(var(--dark-ink-rgb), .14); }
.app :focus-visible { outline-color: var(--color-dark-ink); }
.app__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-bottom: var(--sp-4); border-bottom: var(--border); font-weight: var(--fw-medium); }
.app__table { width: 100%; font-size: var(--fs-small); font-variant-numeric: tabular-nums; margin-top: var(--sp-2); }
.app__table th, .app__table td { padding: .7rem .5rem; border-bottom: var(--border); text-align: left; vertical-align: top; font-weight: var(--fw-regular); }
.app__table th:first-child, .app__table td:first-child { padding-left: 0; }
.app__table th:last-child, .app__table td:last-child { padding-right: 0; }
.app__table thead th { font-weight: var(--fw-medium); }
.app__table .num { text-align: right; }
.app__table small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.app__note { display: block; font-size: .8125rem; color: var(--muted); font-weight: var(--fw-regular); }
.app__note--low { color: #FFB59A !important; }
.app__table tr.is-low td:first-child { box-shadow: inset 3px 0 0 #FFB59A; padding-left: .7rem; }
.app__table tr.is-highlight td { background: rgba(var(--color-accent-rgb), .16); }
.app .is-changing { opacity: .2; transition: opacity 160ms var(--ease); }
.app__action { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); padding: var(--sp-4); border-radius: var(--radius); background: rgba(var(--dark-ink-rgb), .06); }
.app__what { font-weight: var(--fw-medium); }
.app__try { display: grid; gap: var(--sp-2); justify-items: start; }
.app__status { font-size: var(--fs-xs); color: var(--muted); min-height: 1.4em; }
@media (min-width: 600px) { .app__action { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .app__try { justify-items: end; text-align: right; } }
@media (max-width: 599px) { .app { padding: var(--sp-4); } .app__table thead .app__note { display: none; } }

/* FAQ */
.faq__inner { display: grid; gap: var(--sp-6) var(--col-gap); }
.faq__intro .head { margin-bottom: var(--sp-3); }
@media (min-width: 990px) { .faq__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } .faq__intro { position: sticky; top: calc(var(--header-h) + 2rem); } }
.faq__list { border-top: var(--border); }
.faq__item { border-bottom: var(--border); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 64px; padding-block: var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: -.01em; line-height: 1.35; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .3em; }
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; translate: -50% -50%; transition: rotate var(--dur) var(--ease); }
.faq__icon::after { rotate: 90deg; }
.faq__item[open]:not(.is-closing) .faq__icon::after { rotate: 0deg; }
.faq__answer { padding-bottom: var(--sp-5); max-width: 62ch; color: var(--muted); }

/* Kontaktformular og testkundeformular */
.contact__inner, .assessment__inner { display: grid; gap: var(--sp-7) var(--col-gap); align-items: start; }
.contact__aside .head { margin-bottom: var(--sp-6); }
.contact__next { margin-bottom: var(--sp-6); }
.contact__next-title { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); margin-bottom: var(--sp-3); letter-spacing: .01em; }
.contact__next ol { display: grid; gap: var(--sp-4); }
.contact__next li { display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-3); }
.contact__next strong { display: block; font-weight: var(--fw-medium); }
.contact__next span:not(.contact__step-num) { color: var(--muted); font-size: var(--fs-small); }
.contact__step-num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--fg); font-size: .8125rem; font-weight: var(--fw-bold); }
.contact__direct { padding-top: var(--sp-5); border-top: var(--border); display: grid; gap: var(--sp-1); justify-items: start; }
.contact__direct-title { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); margin-bottom: var(--sp-2); letter-spacing: .01em; }
.contact__direct-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--fw-medium); font-size: 1.125rem; text-decoration: none; }
.contact__direct-link:hover { text-decoration: underline; }
.contact__form-wrap, .assessment__card { background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
@media (min-width: 990px) {
  .contact__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .contact__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
  .assessment__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .assessment__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* Afslutning og kort besked */
.cta__box { display: grid; gap: var(--sp-5) var(--col-gap); padding-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-top: 2px solid var(--fg); }
.cta__content .rte { margin-top: var(--sp-4); color: var(--muted); max-width: 52ch; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.cta__alt { flex-basis: 100%; font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 990px) { .cta__box { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.note__box { display: grid; gap: var(--sp-4) var(--sp-6); padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--surface); border: var(--border); border-radius: var(--radius-lg); }
.note__content .rte { margin-top: var(--sp-2); color: var(--muted); max-width: 64ch; }
.note__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); }
@media (min-width: 990px) { .note__box { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.trustpilot__widget { margin-top: var(--sp-4); }
.trustpilot__note { margin-top: var(--sp-2); }

/* Tekst, brugere, 404 */
.rich-text__inner { max-width: 52rem; }
.rich-text .actions { margin-top: var(--sp-5); }
.staff__inner { display: grid; gap: var(--sp-6) var(--col-gap); align-items: start; }
.staff__table-wrap { padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--surface); border: var(--border); border-radius: var(--radius-lg); }
.staff__table th[scope='row'] { font-weight: var(--fw-medium); }
.staff__note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--muted); }
@media (min-width: 990px) { .staff__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .staff .head { margin-bottom: 0; } }
.not-found__inner { max-width: 46rem; }
.not-found .lead { margin-top: var(--sp-5); color: var(--muted); }
.not-found__links { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: var(--border); }
.not-found__links ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3); }
.not-found__links a { display: inline-flex; align-items: center; min-height: 44px; }

/* 8 ─ Designkoncepter: skærmbilleder af demoerne i public/demo, vist i et diskret browservindue */
.concept { min-width: 0; }
.concept__cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.browser { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(var(--ink-rgb), .05), 0 14px 32px -24px rgba(var(--ink-rgb), .3); }
.browser__bar { display: flex; align-items: center; justify-content: center; height: 28px; padding-inline: var(--sp-4); background: color-mix(in srgb, var(--color-bg) 70%, #d9d4c8); border-bottom: 1px solid var(--line); }
.browser__url { padding: .05rem .8rem; border-radius: 999px; background: var(--surface); font-size: .75rem; color: var(--muted); letter-spacing: .01em; }
.browser__shot { display: block; color: inherit; }
.browser__shot img { display: block; width: 100%; height: auto; background: var(--tint); transition: opacity .2s; }
.browser__shot:hover img { opacity: .94; }
.concept__cap .badge { white-space: normal; }
.concept__cap .arrow-link { margin-left: auto; font-size: var(--fs-small); color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .browser__shot img { transition: none; } }

/* Eksempelsider: tekst ved siden af et stort udsnit */
.concepts__list { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); }
.concepts__item { display: grid; gap: var(--sp-6) var(--col-gap); align-items: center; scroll-margin-top: calc(var(--header-h) + 20px); }
.concepts__text h3 { margin-bottom: var(--sp-4); }
.concepts__text .rte { color: var(--muted); }
.concepts__text .ticks { margin-top: var(--sp-5); font-size: var(--fs-small); }
.concepts__text .arrow-link { margin-top: var(--sp-4); }
.concepts__more { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
@media (min-width: 990px) {
  .concepts__item { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .concepts__item:nth-child(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .concepts__item:nth-child(even) .concepts__text { order: 2; }
}

/* 9 ─ Formularer */
.form { display: grid; gap: var(--sp-5); }
.form__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 750px) { .form__grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.form__legend { margin-bottom: calc(var(--sp-2) * -1); }
.field { display: grid; gap: .45rem; min-width: 0; }
.field label, .field legend { font-weight: var(--fw-medium); font-size: var(--fs-small); }
.field__opt { font-weight: var(--fw-regular); color: var(--muted); }
.req { color: var(--color-error); }
.field input:not([type='checkbox']):not([type='radio']), .field select, .field textarea, .cart__qty {
  width: 100%; min-height: 50px; padding: .75rem .95rem;
  font-size: 1rem; /* forhindrer zoom på iOS */
  background: #fff; color: var(--color-ink);
  border: 1px solid var(--line-strong); border-radius: 8px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field ::placeholder { color: rgba(var(--ink-rgb), .5); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(var(--ink-rgb), .45); }
.field input:focus, .field select:focus, .field textarea:focus, .cart__qty:focus { outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), .4); }
.field [aria-invalid='true'], .has-error input, .has-error select, .has-error textarea { border-color: var(--color-error) !important; }
.field__error { display: flex; gap: .4rem; color: var(--color-error); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.field__error::before { content: '!'; display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--color-error); color: #fff; font-size: .7rem; font-weight: var(--fw-bold); margin-top: .1rem; }
.select { position: relative; }
.select select { padding-right: 2.75rem; cursor: pointer; }
.select .icon { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.field--check { grid-template-columns: 22px 1fr; align-items: start; gap: .75rem; }
.field--check input { width: 22px; height: 22px; margin: .15rem 0 0; accent-color: var(--color-ink); cursor: pointer; }
.field--check label { font-weight: var(--fw-regular); font-size: var(--fs-small); color: var(--muted); }
.field--check label a { color: var(--fg); }
.field--check .field__error { grid-column: 2; }
.form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.form__note { text-align: center; margin-top: calc(var(--sp-2) * -1); }
.form__error-summary { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); border: 1px solid var(--color-error); background: color-mix(in srgb, var(--color-error) 7%, #fff); }
.form__error-summary:focus { outline: 2px solid var(--color-error); outline-offset: 2px; }
.form__error-title { font-weight: var(--fw-bold); margin-bottom: .4rem; color: var(--color-error); }
.form__error-summary ul { padding-left: 1.1rem; display: grid; gap: .2rem; }
.form__error-summary a { color: var(--color-ink); }
.form-status { display: flex; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--radius); }
.form-status:focus { outline: 2px solid currentColor; outline-offset: 3px; }
.form-status .h4 { margin-bottom: .35rem; }
.form-status--success { background: color-mix(in srgb, var(--color-success) 9%, #fff); border: 1px solid var(--color-success); }
.form-status__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--color-success); color: #fff; }
.form-status--error { background: color-mix(in srgb, var(--color-error) 7%, #fff); border: 1px solid var(--color-error); }
.form-status--error .h4 { color: var(--color-error); }
.form-status--error ul { padding-left: 1.1rem; margin-bottom: .5rem; }
.btn[aria-busy='true'] { cursor: progress; }
.icon { flex: none; }

/* 10 ─ Dokumenter: vilkår, politikker og aftaler */
.doc__head { max-width: 52rem; margin-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 3rem); }
.doc__version { margin-top: var(--sp-4); display: inline-flex; padding: .35rem .8rem; border-radius: var(--radius-sm); background: var(--surface); border: var(--border); font-size: var(--fs-xs); color: var(--muted); }
.doc__grid { display: grid; gap: var(--sp-6) var(--col-gap); align-items: start; }
.doc__toc-box { padding: var(--sp-3) var(--sp-5); background: var(--surface); border: var(--border); border-radius: var(--radius-lg); }
.doc__toc-box summary { min-height: 44px; display: flex; align-items: center; font-weight: var(--fw-medium); cursor: pointer; }
.doc__toc ol { display: grid; gap: .1rem; margin-top: var(--sp-2); font-size: var(--fs-small); }
.doc__toc a { display: block; padding: .3rem 0; text-decoration: none; color: var(--muted); line-height: 1.35; }
.doc__toc a:hover { color: var(--fg); text-decoration: underline; }
.doc__body { max-width: 68ch; }
.doc__related { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: var(--border); }
.doc__related-title { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); margin-bottom: var(--sp-3); }
.doc__related ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.doc__related a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 990px) {
  .doc--toc .doc__grid { grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr); }
  .doc__toc { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; }
  .doc__toc-box { padding: 0; background: none; border: 0; }
  .doc__toc-box summary { list-style: none; font-size: var(--fs-xs); color: var(--muted); min-height: 44px; margin-bottom: var(--sp-2); }
  .doc__toc-box summary::-webkit-details-marker { display: none; }
}

/* 11 ─ Handel: abonnementer og kurv (kun når admin har gjort et abonnement aktivt) */
.product__inner { display: grid; gap: var(--sp-7); }
.product--no-media .product__inner { max-width: 44rem; }
.product__image { width: 100%; border-radius: var(--radius-lg); }
.product__info .h1 { margin-bottom: var(--sp-4); }
.product__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; margin-bottom: var(--sp-6); }
.product__price-current { font-size: 1.6rem; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.product__per { font-size: 1rem; color: var(--muted); }
.product__form { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.product__buttons { display: grid; gap: var(--sp-3); }
.product__note { margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); border: var(--border); border-radius: var(--radius); background: var(--surface); }
.product__quote { display: grid; gap: var(--sp-2); justify-items: start; margin-bottom: var(--sp-6); }
.product__price + .sub-terms { margin: calc(var(--sp-4) * -1) 0 var(--sp-6); }
.product__no-payment { margin: calc(var(--sp-4) * -1) 0 var(--sp-5); }
@media (min-width: 990px) { .product__inner { grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); } .product--no-media .product__inner { grid-template-columns: 1fr; } .product__media { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.sub-terms { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-xs); color: var(--muted); }
.sub-terms svg { flex: none; margin-top: .2em; }
.sub-terms--sm { margin-top: .25rem; }
.sub-buy { display: grid; gap: var(--sp-2); justify-items: center; }
.sub-buy > *, .sub-buy__form { width: 100%; }
.sub-buy__quote { width: auto !important; }
.cart .h1 { margin-bottom: var(--sp-6); }
.cart__table { width: 100%; margin-bottom: var(--sp-6); }
.cart__table th { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-medium); text-align: left; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-strong); }
.cart__table td { padding-block: var(--sp-4); border-bottom: var(--border); vertical-align: top; }
.cart__right { text-align: right !important; }
.cart__right .small { display: block; }
.cart__title { font-weight: var(--fw-bold); text-decoration: none; display: block; }
.cart__qty { max-width: 90px; }
.cart__summary { display: grid; justify-items: end; gap: var(--sp-3); margin-top: var(--sp-6); text-align: right; }
.cart__summary .sub-terms { justify-content: flex-end; text-align: right; }
.cart__subtotal { font-size: 1.2rem; display: flex; gap: var(--sp-4); }
.cart__request { margin-top: var(--sp-7); }
.cart__request .h3 { margin-bottom: var(--sp-2); }
.cart__request-text { margin-bottom: var(--sp-5); }
.cart__quote { margin-top: var(--sp-5); }
.cart__quote a { font-weight: var(--fw-bold); }
.cart__empty-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-7); }

/* 12 ─ Cookiebanner (afvis og accepter er lige synlige) */
.cookie { position: fixed; z-index: 90; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); max-width: 480px; max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: 0 20px 60px -24px rgba(var(--ink-rgb), .4); }
.cookie__inner { padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.cookie__text { color: var(--muted); }
.cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cookie__actions .btn { width: 100%; }
.cookie__actions [data-cookie-action='accept'], .cookie__actions [data-cookie-action='reject'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cookie__actions [data-cookie-action='customize'], .cookie__actions [data-cookie-action='save'] { grid-column: 1 / -1; grid-row: 2; }
.toggle { display: grid; grid-template-columns: 44px 1fr; gap: .9rem; align-items: start; padding: .8rem 0; border-bottom: var(--border); cursor: pointer; position: relative; }
.toggle input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.toggle__ui { position: relative; width: 44px; height: 26px; border-radius: 999px; background: rgba(var(--ink-rgb), .2); transition: background-color var(--dur); }
.toggle__ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform var(--dur) var(--ease); }
.toggle input:checked + .toggle__ui { background: var(--color-ink); }
.toggle input:checked + .toggle__ui::after { transform: translateX(18px); }
.toggle input:disabled + .toggle__ui { opacity: .55; }
.toggle input:focus-visible + .toggle__ui { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.toggle strong { display: block; font-size: var(--fs-small); }
.toggle .small { display: block; }
.cookie .toggle__ui { background: color-mix(in srgb, var(--fg) 25%, transparent); }
.cookie .toggle input:checked + .toggle__ui { background: var(--fg); }
.cookie .toggle input:checked + .toggle__ui::after { background: var(--bg); }
.cookie .toggle input:focus-visible + .toggle__ui { outline-color: var(--fg); }
@media (min-width: 600px) { .cookie { left: var(--sp-5); bottom: var(--sp-5); } }

/* 13 ─ Bevægelse og print. Siden virker helt uden animation. */
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .site-header, .site-footer, .cookie, .btn, .doc__toc { display: none !important; }
  .section { padding-block: 1rem; }
  body { background: #fff; }
}

/* 14 ─ Veyro: personligt bureau, projekter før produktkort. */
:root {
  --bg: #202020;
  --surface: #171717;
  --fg: #f6f5f2;
  --muted: #b8b8b5;
  --line: #ffffff24;
  --line-strong: #ffffff55;
  --radius: var(--radius-button, 10px);
  --radius-lg: var(--radius-card, 16px);
  --page: 1200px;
  --header-h: 88px;
  --fs-body: calc(1rem * var(--body-scale, 1));
  --fs-lead: clamp(1.0625rem, 1rem + .2vw, 1.2rem);
  --fs-xl: calc(clamp(2.5rem, 1.15rem + 4.1vw, 4.8rem) * var(--heading-scale, 1));
  --fs-lg: calc(clamp(1.9rem, 1.3rem + 1.7vw, 2.9rem) * var(--heading-scale, 1));
  --section-y: clamp(3.5rem, 6vw, 5.75rem);
}
body { line-height: 1.7; }
h1,h2,h3,.t-xl,.t-lg,.t-md { font-weight: 600; letter-spacing: -.045em; }
.t-xl { line-height: 1.13; letter-spacing: -.055em; }
.t-lg { line-height: 1.2; }
.btn { min-height: 48px; border-radius: var(--radius); font-size: .875rem; font-weight: 600; padding: .85rem 1.35rem; }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.btn--secondary { background: #171717; border-color: var(--line); }
.btn--sm { min-height: 44px; }
.arrow-link { font-size: .875rem; font-weight: 600; }
.arrow-link::after { content: '→'; }
.studio-label { color: var(--muted); font-size: .875rem; font-weight: 500; margin-bottom: 1.25rem; }
.site-header { border-bottom-color: var(--line); background: #171717; }
.site-header__inner { gap: 1.5rem; }
.site-header .logo { font-size: 1.6rem; gap: .55rem; }
.logo__mark { width: 26px; height: 24px; color: var(--accent); flex: none; align-self: center; }
.logo__dot { margin-left: -.5rem; }
.nav__link { font-size: .8125rem; padding-inline: .6rem; border-radius: 8px; }
.site-header__login { color: var(--muted); }
.nav__link[aria-current='page'],.nav__link[data-active] { text-decoration: none; background: var(--accent-soft); }
.nav-toggle { border-color: var(--line); }
.mobile-nav { background: #171717; }
.mobile-nav__link { font-size: 1.2rem; border: 0; border-radius: 12px; padding-inline: 1rem; margin-bottom: .25rem; }
.mobile-nav__link[aria-current='page'] { text-decoration: none; background: var(--accent-soft); }
.mobile-nav__meta { padding-inline: 1rem; }
.home-hero { padding: clamp(2.5rem, 5vw, 4.75rem) 0 0; }
.home-hero__intro { position: relative; }
.home-hero__title { max-width: 1100px; position: relative; z-index: 1; }
.home-hero__title > span { color: var(--fg); background: none; }
.hero-mobile-break { display: none; }
.v-signature { position: absolute; right: 0; top: 1rem; width: 115px; color: var(--accent); opacity: .9; transform: rotate(-4deg); }
.home-hero__bottom { display: grid; gap: 1.75rem; margin-block: 2rem 3rem; align-items: start; }
.home-hero__bottom > .lead { max-width: 57ch; color: var(--muted); font-size: 1.0625rem; line-height: 1.8; }
.home-hero__next .actions { margin-top: 0; gap: .65rem; }
.home-hero__facts { font-size: .6875rem; color: var(--muted); margin-top: 1rem; max-width: none; }
.home-hero__project { padding: 1.5rem; border-radius: 24px; background: #282828; }
.project-heading { display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; color: #b8b8b5; margin: 0 .25rem 1rem; }
.project-heading > span:last-child { text-align: right; }
.home-hero__project .browser { border: 0; border-radius: 14px; box-shadow: 0 8px 24px #20242b0a; }
.home-hero__project .browser__bar { display: none; }
.home-hero__project .browser__shot img { aspect-ratio: 2.1; object-fit: cover; object-position: top; width: 100%; }
.concept__cap { font-size: .75rem; line-height: 1.65; color: var(--muted); align-items: center; gap: .5rem 1rem; }
.concept__cap .badge { font-size: .6875rem; border-radius: 6px; background: transparent; border: 0; padding: 0; min-height: 0; color: var(--muted); }
.concept__cap .arrow-link { font-size: .75rem; margin-left: auto; color: var(--fg); }
.home-hero__project .concept__cap > span:not(.badge) { display: none; }
.browser { border-radius: 14px; box-shadow: none; border-color: var(--line); }
.browser__bar { background: #f4f5f7; height: 26px; }
.browser__url { background: transparent; font-size: .625rem; }
.head { max-width: 47rem; }
.head__text { font-size: 1rem; line-height: 1.8; max-width: 58ch; }
.template-index .concepts > .container > .head { max-width: none; display: grid; gap: 1rem 3rem; align-items: end; }
.template-index .concepts__list { display: grid; gap: 2.5rem; }
.template-index .concepts__item { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; padding: 0; border: 0; }
.template-index .concepts__item .concept { order: -1; min-width: 0; }
.template-index .concepts__item .browser__bar { display: none; }
.template-index .concepts__item .browser__shot img { aspect-ratio: 1.5; object-fit: cover; object-position: top; }
.template-index .concepts__text { order: 0; }
.concepts__text .label { color: var(--muted); font-size: .75rem; margin-bottom: .5rem; }
.concepts__text h3 { font-size: 1.6rem; margin-bottom: .75rem; }
.concepts__text .rte { font-size: .9375rem; }
.template-index .concepts__text .ticks { display: none; }
.template-index .concepts__text .arrow-link { margin-top: .75rem; }
.template-index .concepts__more { margin-top: 2rem; }
.booking-flow { background: #333333; padding-block: var(--section-y); }
.booking-flow__inner { display: grid; gap: 2.5rem 4rem; align-items: center; }
.booking-flow__copy > .rte { color: var(--muted); font-size: .9375rem; margin-top: 1.25rem; max-width: 48ch; }
.booking-flow__steps { padding: 0; display: grid; gap: 1rem; margin: 1.5rem 0 1rem; }
.booking-flow__steps li { display: block; }
.booking-flow__steps li > span { display: none; }
.booking-flow__steps strong { font-size: .9375rem; font-weight: 600; }
.booking-flow__steps p { margin-top: .25rem; font-size: .875rem; color: var(--muted); }
.booking-flow__figure { min-width: 0; }
.booking-flow__figure > figcaption { color: var(--muted); font-size: .6875rem; margin-top: .75rem; }
.booking-preview { background: #171717; color: var(--fg); border-radius: 20px; box-shadow: 0 10px 30px #20242b08; overflow: hidden; }
.booking-preview__bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; font-size: .75rem; border-bottom: var(--border); }
.booking-preview__bar .badge { background: #f5f6f8; color: var(--muted); font-size: .625rem; border: 0; }
.booking-preview__body { padding: 1.5rem 2rem; }
.booking-preview__label { font-size: .75rem; color: var(--muted); margin-bottom: .5rem; }
.booking-preview h3 { font-size: 1.8rem; margin-bottom: .4rem; }
.booking-preview__body > .muted { font-size: .875rem; }
.booking-preview__date { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-block: 1.5rem; font-size: .75rem; }
.booking-preview__date strong { display: block; font-size: 1rem; }
.booking-preview__time { padding: .5rem .75rem; background: #f3f5f8; border-radius: 8px; }
.booking-preview__confirmation { display: flex; gap: .75rem; align-items: center; border-radius: 12px; background: #eaf2eb; color: #294d30; padding: 1rem; font-size: .8125rem; }
.booking-preview__confirmation > span { font-size: 1.2rem; }
.booking-preview__confirmation p { font-size: .6875rem; margin-top: .1rem; }
.booking-preview__calendar { padding: 1rem 1.5rem 1.5rem; font-size: .75rem; }
.booking-preview__calendar > span { color: var(--muted); }
.booking-preview__calendar > div { display: flex; gap: 1rem; align-items: start; margin-top: .75rem; }
.booking-preview__calendar > div > span { padding-top: .7rem; }
.booking-preview__calendar > div > div { display: grid; gap: .2rem; flex: 1; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: .7rem 1rem; }
.packages__head { gap: 1.5rem; }
.packages__terms { gap: .3rem 1.25rem; }
.packages__terms li { border: 0; padding: 0; border-radius: 0; background: transparent; font-size: .75rem; color: var(--muted); }
.packages__terms li::before { content: '✓'; margin-right: .4rem; }
.packages--summary .pc-grid { display: block; }
.packages .pc-grid { padding: .5rem 2rem; }
.pc-grid { gap: 0; background: #171717; border-radius: 24px; padding: .5rem 2rem; }
.pc { border: 0; border-radius: 0; background: transparent; padding: 2rem 0; display: grid; gap: 1.25rem 2rem; }
.pc + .pc { border-top: var(--border); }
.pc__intro { min-width: 0; }
.pc__name { font-size: 1.5rem; letter-spacing: -.035em; }
.pc__desc { margin-top: .65rem; font-size: .875rem; line-height: 1.8; max-width: 49ch; }
.pc__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; border: 0; padding: 0; margin-top: .8rem; }
.pc__amount { gap: .25rem; }
.pc__amount strong { font-size: 1.35rem; letter-spacing: -.03em; font-weight: 600; }
.pc__interval,.pc__vat,.pc__price-label { font-size: .6875rem; color: var(--muted); }
.pc__content { min-width: 0; font-size: .875rem; }
.pc__scope > summary { cursor: pointer; font-size: .8125rem; font-weight: 600; padding-block: .35rem; }
.pc__scope[open] > summary { margin-bottom: .75rem; }
.pc__list { font-size: .8125rem; gap: .5rem; padding: 0; border: 0; }
.pc__list.ticks li { padding-left: 1rem; }
.pc__list.ticks li::before { width: 4px; height: 4px; background: #7b8593; top: .7em; left: 0; border: 0; border-radius: 50%; transform: none; }
.pc__list-title { margin-bottom: .75rem; font-size: .75rem; color: var(--fg); }
.pc__content > * + .pc__list-title { margin-top: 1.5rem; }
.pc__list--limits li { padding: .65rem .8rem; background: #292929; border-radius: 8px; }
.pc__note { font-size: .8125rem; margin-top: 1rem; }
.pc__actions { display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 0; }
.pc__actions .btn { width: auto; min-height: 44px; padding: .5rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: .8125rem; color: var(--fg); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--line-strong); }
.pc__actions .btn:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.pc__details { font-size: .75rem; color: var(--muted); min-height: 44px; align-self: center; }
.pc--coming { border-style: solid; }
.coming__box .pc-grid { background: transparent; padding: 0; border-radius: 0; }
.coming__box { padding: 1.5rem 2rem; background: #252525; border: 0; border-radius: 24px; }
.coming__head .t-lg { font-size: 2rem; }
.coming__note { font-size: .8125rem; }
.steps { background: transparent; }
.steps__list { gap: 2rem; }
.steps__item { display: block; }
.steps__num { width: 30px; height: 30px; font-family: var(--font-body); font-size: .6875rem; background: #282828; border: 0; color: var(--muted); margin-bottom: .75rem; }
.steps__item:not(:last-child)::before { display: none; }
.steps__title { font-size: 1.15rem; padding: 0; }
.steps__text { font-size: .875rem; line-height: 1.9; }
.steps__foot { border: 0; margin-top: 2.5rem; padding-top: 0; }
.steps__foot .rte { font-size: .8125rem; }
.page-hero { padding-top: 2.5rem; }
.page-hero__title { max-width: 21ch; font-size: clamp(2.5rem, 4.3vw, 4rem); }
.page-hero__text { font-size: 1.0625rem; line-height: 1.85; max-width: 53ch; }
.page-hero__rule { display: none; }
.breadcrumbs { font-size: .6875rem; color: var(--muted); }
.facts { background: #171717; border: 0; border-radius: 18px; padding: .5rem 1.5rem; }
.facts > div { padding-block: 1rem; border: 0; font-size: .8125rem; }
.facts > div + div { border-top: var(--border); }
.info--rows .info__item,.info--split .info__item { border-color: var(--line); }
.info--grid .info__item { border: 0; padding-top: 0; }
.info__title { font-size: 1.25rem; }
.info__text,.service__part .rte { font-size: .9375rem; line-height: 1.85; }
.info__tag { color: var(--muted); font-size: .75rem; }
.service--compact .service__inner { background: #171717; border: 0; border-radius: 24px; }
.service--columns .service__body { border-top-width: 1px; }
.faq__list { border-top: 0; }
.faq__item { border-color: var(--line); }
.faq__item summary { font-size: 1rem; min-height: 76px; font-weight: 500; }
.faq__icon { border: 0; background: #333333; width: 30px; height: 30px; }
.faq__answer { font-size: .875rem; line-height: 1.85; }
.contact,.assessment { background: #252525; }
.contact__form-wrap,.assessment__card { border: 0; border-radius: 24px; background: #171717; }
.contact__next { margin-bottom: 1.5rem; }
.contact__step-num { background: #383838; border: 0; color: #b8b8b5; }
.contact__next strong { font-size: .875rem; }
.contact__next span:not(.contact__step-num) { font-size: .8125rem; }
.contact__next-title,.contact__direct-title { font-size: .75rem; }
.contact__direct-link { font-size: 1rem; }
.field label { font-size: .8125rem; }
.field input:not([type='checkbox']):not([type='radio']),.field select,.field textarea { border-color: #555555; background: #222222; border-radius: 10px; }
.field input:focus,.field select:focus,.field textarea:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.contact__aside .head__text { font-size: .9375rem; }
.contact__form-wrap .form__note { font-size: .6875rem; }
.doc__title { font-size: var(--fs-lg); }
.doc__body { font-size: .9375rem; line-height: 1.9; }
.doc__toc-box,.staff__table-wrap,.note__box { background: #171717; border: 0; border-radius: 16px; }
.cta__box { background: #171717; border: 0; padding: 2rem; border-radius: 24px; }
.site-footer { background: #f6f5f2; --fg: #202020; --muted: #b3bdca; --line: #ffffff24; --line-strong: #ffffff40; }
.footer-invitation { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid #ffffff24; }
.footer-invitation > p { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; letter-spacing: -.04em; }
.footer-invitation em { font-family: var(--font-heading); font-style: normal; font-weight: 600; color: #d5dde7; }
.footer-invitation .arrow-link { font-size: .875rem; }
.site-footer__brand .logo { font-size: 1.8rem; }
.site-footer__heading { font-size: .75rem; font-weight: 600; color: #171717; }
.site-footer__col a { font-size: .8125rem; min-height: 40px; }
.site-footer__tagline,.site-footer__address { font-size: .8125rem; }
.site-footer__bottom,.site-footer__meta a,.site-footer__meta button { font-size: .6875rem; }
.site-footer .logo__dot { margin-left: 0; }
.cookie { border-radius: 20px; }
.cookie__text { font-size: .875rem; }
.cookie .btn { font-size: .8125rem; }
@media (min-width: 750px) {
  .home-hero__bottom { grid-template-columns: minmax(0,1fr) auto; gap: 4rem; }
  .home-hero__next { padding-top: .2rem; }
  .template-index .concepts > .container > .head { grid-template-columns: 1fr 1fr; }
  .template-index .concepts .head__text { margin-top: 0; }
  .template-index .concepts__list { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
  .template-index .concepts__item:last-child { padding-top: 5rem; }
  .packages--summary .pc { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items: start; }
  .packages--summary .pc > * { grid-column: auto; }
  .packages--summary .pc > .pc__intro { grid-column: 1; grid-row: 1 / span 2; }
  .packages--summary .pc > .pc__content { grid-column: 2; grid-row: 1; }
  .packages--summary .pc > .pc__actions { grid-column: 2; grid-row: 2; }
  .steps__list { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-flow: row; }
}
@media (min-width: 990px) {
  .home-hero__title { font-size: 4.1rem; max-width: 1080px; }
  .v-signature { top: 1.5rem; width: 105px; }
  .booking-flow__inner { grid-template-columns: 1.1fr 1fr; }
  .packages__head { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
  .packages--detail .pc-grid { display: block; }
  .pc--detail { grid-template-columns: minmax(0, .8fr) minmax(0,1.2fr); column-gap: 4rem; }
  .pc--detail .pc__intro { grid-column: 1; grid-row: 1; }
  .pc--detail .pc__content { grid-column: 2; grid-row: 1 / span 2; }
  .pc--detail .pc__actions { grid-column: 1; grid-row: 2; align-self: start; }
  .coming__box .pc-grid { display: block; }
  .coming .pc { display: block; }
  .coming .pc__content { margin-block: 1rem; }
  .coming .pc__actions { margin-top: .75rem; }
  .steps .container { display: grid; grid-template-columns: 1fr 1.5fr; column-gap: 4rem; }
  .steps__head { grid-column: 1; grid-row: 1 / span 2; }
  .steps__list,.steps__foot { grid-column: 2; }
  .steps__foot { display: block; }
  .steps__foot .btn { margin-top: 1rem; }
}
@media (max-width: 989px) {
  .v-signature { width: 80px; top: 1rem; right: .5rem; }
  .home-hero__title { max-width: 90%; }
  .home-hero__bottom { margin-bottom: 2rem; }
}
@media (max-width: 599px) {
  :root { --header-h: 72px; --gutter: 22px; }
  .home-hero { padding-top: 2rem; }
  .studio-label { font-size: .75rem; margin-bottom: 1.2rem; }
  .home-hero__title { font-size: 2.25rem; max-width: none; letter-spacing: -.045em; line-height: 1.19; }
  .hero-mobile-break { display: block; }
  .v-signature { width: 42px; top: -.1rem; right: 0; }
  .home-hero__bottom { margin-top: 1.5rem; gap: 1.4rem; }
  .home-hero__bottom > .lead { font-size: .9375rem; line-height: 1.85; }
  .home-hero__facts { font-size: .75rem; line-height: 1.9; }
  .home-hero__project { padding: .75rem; border-radius: 18px; }
  .project-heading { font-size: .625rem; margin: .15rem .2rem .65rem; }
  .project-heading > span:first-child { max-width: 23ch; }
  .home-hero__project .browser { border-radius: 10px; }
  .home-hero__project .browser__shot img { aspect-ratio: 780 / 1280; object-fit: cover; object-position: top; }
  .home-hero__project .concept__cap { gap: .4rem; margin-top: .65rem; }
  .home-hero__project .concept__cap .badge { font-size: .6875rem; }
  .home-hero__project .concept__cap .arrow-link { font-size: .75rem; flex-basis: auto; }
  .template-index .concepts__item .browser__shot img { aspect-ratio: 1.2; }
  .concepts__text h3 { font-size: 1.45rem; }
  .concept__cap .arrow-link { flex-basis: 100%; margin-left: 0; }
  .booking-preview__body { padding: 1.25rem; }
  .booking-preview__bar,.booking-preview__calendar { padding-inline: 1.25rem; }
  .booking-flow__copy .studio-label { font-size: .6875rem; }
  .packages .pc-grid { padding-inline: 1.25rem; }
  .pc-grid { padding-inline: 1.25rem; border-radius: 20px; }
  .pc { gap: 1rem; padding-block: 1.5rem; }
  .pc__desc { font-size: .8125rem; }
  .pc__actions { gap: .25rem 1rem; }
  .pc__actions .btn { font-size: .75rem; }
  .pc__details { font-size: .6875rem; }
  .page-hero { padding-block: 1.5rem 2.5rem; }
  .page-hero__title { font-size: 2.4rem; }
  .page-hero__text { font-size: .9375rem; }
  .breadcrumbs { margin-bottom: 1.5rem; }
  .contact__form-wrap,.assessment__card { padding: 1.25rem; border-radius: 20px; }
  .coming__box { padding: .5rem 1.25rem; border-radius: 20px; }
  .footer-invitation { padding-bottom: 2rem; margin-bottom: 2rem; }
  .footer-invitation > p { font-size: 2rem; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .logo__mark { transition: transform 180ms ease; }
  .logo:hover .logo__mark { transform: rotate(-7deg); }
  .btn { transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; }
  .btn:hover { transform: translateY(-1px); }
}
@media print { .v-signature { display: none; } }

/* Tabellerne skal kunne rummes med den bredere bureau-typografi. */
.drift__inner > *, .page-hero__grid > *, .coming__inner > * { min-width: 0; }
@media (max-width: 599px) {
  .app__table { table-layout: fixed; font-size: .75rem; }
  .app__table th,.app__table td { overflow-wrap: anywhere; padding-inline: .3rem; }
  .app__table th:first-child { width: 37%; }
  .app__table small { font-size: .6875rem; }
}

/* 15 ─ Immersive studio direction. Original V artwork; no external animation dependencies. */
:root { --accent-text: #ff986b; --accent-soft: #42291f; --tint: #ffffff08; --page: 1440px; --radius: 999px; }
body { background: #202020; color: #f6f5f2; }
h1,h2,h3,.t-xl,.t-lg,.t-md { font-weight: 500; }
.site-header { background: #202020eF; border: 0; backdrop-filter: blur(16px); }
.site-header .logo__mark { color: #f6f5f2; }
.site-header .logo__text,.site-header .logo__dot { display: none; }
.site-header .logo__mark { width: 38px; height: 36px; }
.nav__link { border-radius: 999px; }
.btn { border-radius: 999px; font-weight: 500; }
.btn--primary { color: #171717; }
.btn--secondary { background: transparent; color: #f6f5f2; border-color: #ffffff55; }
.home-hero { padding-top: 0; }
.studio-stage { min-height: 680px; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 410px auto; align-items: end; isolation: isolate; }
.studio-stage::before { content: ''; position: absolute; inset: -90px -30px 0; background-image: radial-gradient(#ffffff14 .7px, transparent .8px); background-size: 5px 5px; z-index: -2; mask-image: linear-gradient(#000, #0008 65%, transparent); pointer-events: none; }
.studio-art { position: absolute; width: 58%; left: 10%; top: -75px; z-index: -1; opacity: .7; pointer-events: none; transform: rotate(-12deg); }
.studio-message { grid-column: 2; grid-row: 1; align-self: center; padding: 0 0 0 2rem; }
.studio-message .studio-label { font-size: .75rem; margin-bottom: 1.2rem; }
.home-hero__title { font-size: clamp(2.5rem, 3.8vw, 3.8rem); line-height: 1.08; letter-spacing: -.055em; max-width: 15ch; font-weight: 500; }
.home-hero__title > span { color: #b0b0ad; }
.studio-action { grid-column: 1; grid-row: 1; padding-bottom: 2.2rem; }
.studio-price { display: grid; line-height: 1.2; gap: .25rem; }
.studio-price > span { font-size: .75rem; color: #c4c4c1; }
.studio-price strong { font-size: 3.7rem; font-weight: 400; letter-spacing: -.06em; }
.studio-price small { font-size: 1.3rem; color: #b8b8b5; letter-spacing: -.03em; }
.studio-action .actions { margin-top: 1.1rem; }
.studio-action .btn::before { content: '↗'; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f6f5f2; color: #252525; margin-right: .5rem; }
.studio-action .btn { padding: .45rem 1.1rem .45rem .45rem; }
.studio-wordmark { grid-column: 1 / -1; font-size: clamp(100px, 22.8vw, 330px); font-weight: 400; letter-spacing: -.085em; line-height: .95; border-top: 1px solid #ffffff24; padding-block: 1.5rem 2rem; }
.studio-introduction { background: linear-gradient(115deg,#121212,#2a2a2a); border-radius: 36px; padding: 3rem; display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; margin: 2rem 0 5rem; }
.studio-introduction h2 { font-size: clamp(1.7rem,2.8vw,2.7rem); line-height: 1.15; }
.studio-introduction h2 span { color: #aaa; }
.studio-introduction .rte { max-width: 48ch; margin-top: 1.5rem; color: #b8b8b5; font-size: .9375rem; }
.studio-introduction > .arrow-link { grid-column: 2; justify-self: end; }
.home-hero__project { border-radius: 32px; }
.booking-flow { background: #252525; }
.booking-preview { --fg: #20242b; --muted: #59616c; color: #20242b; background: #fff; }
.booking-preview__bar,.booking-preview__calendar,.booking-preview__body { background: #f5f5f2; color: #20242b; }
.pc-grid,.contact__form-wrap,.assessment__card,.coming__box,.cta__box { border-radius: 30px; }
.pc__name { font-size: 1.8rem; }
.pc__amount strong { font-size: 1.8rem; font-weight: 400; }
.faq__icon { color: #fff; }
.site-footer { background: #151515; --fg: #f6f5f2; }
.site-footer__heading { color: #f6f5f2; }
.site-footer::after { content: 'VEYRO'; display: block; font-size: 23vw; letter-spacing: -.085em; line-height: 1; padding: 2rem var(--gutter) 0; color: #f6f5f2; }
@media (prefers-reduced-motion: no-preference) { .studio-art { animation: v-float 14s ease-in-out infinite alternate; } @keyframes v-float { to { transform: translateY(16px) rotate(-5deg); } } }
@media (max-width: 749px) {
 .studio-stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; padding-top: 2rem; }
 .studio-message { grid-column: 1; grid-row: 1; padding: 0; }
 .home-hero__title { font-size: clamp(2.4rem,7.5vw,3.8rem); max-width: 16ch; }
 .studio-art { top: 50px; left: 24%; width: 76%; opacity: .35; }
 .studio-action { grid-column: 1; grid-row: 2; padding-block: 3rem 2rem; }
 .studio-wordmark { grid-row: 3; font-size: 22vw; padding-block: 1rem; }
 .studio-introduction { grid-template-columns: 1fr; padding: 1.5rem; gap: 1rem; margin-block: 2rem 3rem; border-radius: 24px; }
 .studio-introduction > .arrow-link { grid-column: 1; }
 .studio-introduction .studio-label { margin: 0; }
 .studio-price strong { font-size: 3rem; }
 .home-hero__facts { font-size: .6875rem; }
 .studio-action .actions { gap: .5rem; }
 .studio-action .btn { font-size: .75rem; }
}
.studio-stage { overflow: clip; }
.studio-wordmark { font-size: clamp(100px, 29.5vw, 420px); }
.site-footer::after { font-size: 29vw; }
@media (max-width: 749px) { .studio-wordmark { font-size: 28.5vw; } }
:root { --radius: 12px; }
.field ::placeholder { color: #a3a3a0; opacity: 1; }
.field__error { color: #ff9e8f; }
.form__error-summary { background: #342221; border-color: #ff9e8f; color: #ffb5aa; border-radius: 12px; }
.form__error-summary a { color: #f6f5f2; }
.booking-preview { --accent-soft: #fce7dc; }
.form__error-summary p,.form__error-summary h2 { color: #ffb5aa; }