:root {
  --bg: #FBF8F3;
  --surface: #FFFFFF;
  --ink: #2C2420;
  --muted: #7A6D65;
  --gold: #B8934A;
  --gold-ink: #8C6B2F;
  --border: #E8E0D8;
  --dark: #1A1714;
  --dark-surface: #24211D;
  --dark-border: #38332C;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }

a:focus-visible, .cta-btn:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-align: center;
  margin-bottom: 12px;
}

.eyebrow-sm {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gold-ink);
  text-transform: uppercase;
}

.dark .eyebrow, .dark .eyebrow-sm { color: var(--gold); }

.section { padding: 80px 24px; }
.section-inner { max-width: 1080px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-header h2 { font-size: 34px; margin-bottom: 12px; }
.section-header p {
  color: var(--muted);
  font-size: 15px;
  max-width: 480px;
  margin: 0 auto;
}

.dark { background: var(--dark); color: #F2EEE7; }
.dark .section-header p { color: #B8AFA2; }

.cta-btn {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--gold-ink);
  color: var(--gold-ink);
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.cta-btn:hover { background: var(--gold-ink); color: #fff; }
.dark .cta-btn { border-color: var(--gold); color: var(--gold); }
.dark .cta-btn:hover { background: var(--gold); color: var(--dark); }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}
.logo .wordmark { font-family: Georgia, serif; }
.logo .wordmark .accent { color: var(--gold-ink); font-style: italic; }
nav a { margin-left: 28px; font-size: 14px; color: var(--ink); }
nav a:hover { color: var(--gold-ink); }

/* "Event typer" — a <details> dropdown so all six event-type page links
   live under one nav item instead of six, no JS needed (same pattern as
   the FAQ/pricing toggles elsewhere on this site). display: inline-block
   so it sits in nav's normal inline flow alongside the plain <a> links
   rather than dropping to its own line (details is block-level by
   default). */
.nav-dropdown {
  display: inline-block;
  position: relative;
  margin-left: 28px;
  vertical-align: middle;
}
.nav-dropdown summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: " ▾"; font-size: 10px; }
.nav-dropdown:hover summary,
.nav-dropdown[open] summary { color: var(--gold-ink); }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  z-index: 20;
}
.nav-dropdown-menu a {
  margin-left: 0;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--bg); color: var(--gold-ink); }

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
footer .logo { font-size: 14px; }

@media (max-width: 720px) {
  header { flex-direction: column; gap: 12px; }
  nav a { margin: 0 10px; }
  footer { flex-direction: column; gap: 8px; text-align: center; }
}

.hero {
  text-align: center;
  padding: 96px 24px 64px;
}
.hero h1 {
  font-size: 48px;
  line-height: 1.15;
  max-width: 720px;
  margin: 0 auto 24px;
}
.hero p.lead {
  color: var(--muted);
  font-size: 17px;
  max-width: 560px;
  margin: 0 auto 32px;
}
.hero .price-line { font-size: 14px; color: var(--muted); }
.hero .price-line strong { color: var(--ink); }

/* Event-type grid — six clickable tiles, each linking to that event
   type's own sales page (bryllup.html etc., see index.html). Portrait
   (3/4) tiles read as a "browse this category" grid rather than the
   cinematic 16/9 the old auto-cycling hero slider used — appropriate
   here since these are real navigation, not an ambient photo showcase. */
.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 720px;
  margin: 0 auto 32px;
}
.event-box {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: transform 200ms ease;
}
.event-box:hover,
.event-box:focus-visible { transform: translateY(-4px); }
.event-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
}
.event-box-label {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

@media (max-width: 720px) {
  .event-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Event-type & "Sådan virker det"/"Print & QR" subpages — a single large
   photo under the hero text (no caption overlay; the H1 already says
   what it is), and a closing CTA band before the footer that links back
   to index.html's #pris rather than duplicating the pricing cards. */
.page-hero-photo {
  max-width: 720px;
  margin: 0 auto 32px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.page-hero-photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.cta-band { text-align: center; }
.cta-band .section-header { margin-bottom: 24px; }

@media (max-width: 720px) {
  .page-hero-photo img { aspect-ratio: 4 / 3; }
}

/* "Sådan virker det" — alternating photo/text rows instead of a uniform
   numbered-badge grid, one row per step. .how-row--reverse flips which
   side the photo sits on; on narrow screens both collapse to the same
   stacked order (flex-direction: column ignores row-reverse), so no
   separate mobile rule is needed for that part. */
.how-row {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 56px;
}
.how-row:last-child { margin-bottom: 0; }
.how-row--reverse { flex-direction: row-reverse; }
.how-row-media { flex: 1 1 320px; display: flex; justify-content: center; }
.how-row-text { flex: 1 1 320px; }
.how-row-num {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--gold-ink);
  margin-bottom: 8px;
}
.dark .how-row-num { color: var(--gold); }
.how-row-text h3 { font-size: 24px; margin: 0 0 10px; }
.dark .how-row-text h3 { color: #F2EEE7; }
.how-row-text p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
.dark .how-row-text p { color: #B8AFA2; }
.how-row-photo {
  width: 100%;
  max-width: 380px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.how-row-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* A real phone frame for actual product screenshots (the guest-side
   steps) — distinct from .how-row-photo's plain rounded rectangle
   (used for the host-side steps, real event photography, not UI). */
.phone-frame {
  position: relative;
  width: 240px;
  background: #17140f;
  border-radius: 36px;
  padding: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
}
.phone-frame::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 18px;
  background: #17140f;
  border-radius: 0 0 12px 12px;
  z-index: 1;
}
/* No forced aspect-ratio/object-fit: the real screenshots are cropped
   close to their relevant UI already (see images/app/), each to a
   different natural height — forcing a uniform tall phone-screen ratio
   here would crop back into the content that framing was chosen to
   show. */
.phone-frame img {
  width: 100%;
  display: block;
  border-radius: 22px;
}

/* Trin 1's card — no real screenshot to show yet at "open the link", so
   a QR code on the portal's own background reads better than a phone
   frame: #F7F3EE is the Test Portal's actual page background color
   (sampled live via getComputedStyle, not guessed), so this card looks
   like it belongs to the same portal the other two phone frames are
   screenshots of. */
.qr-card {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  background: #F7F3EE;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  box-sizing: border-box;
}
.qr-card svg {
  width: 140px;
  height: 140px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.qr-card .qr-link {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--gold-ink);
  text-decoration: underline;
  text-decoration-color: rgba(184, 147, 74, 0.4);
  text-underline-offset: 3px;
}

@media (max-width: 720px) {
  .how-row, .how-row--reverse { flex-direction: column; gap: 24px; margin-bottom: 40px; }
}

.preview-wrap { padding: 0 24px 96px; }

/* Photo fan — real portal screenshots, laid out like a hand of cards.
   Used on the "Sådan ser det ud" section; kept as a flexbox row with
   negative margins (not absolute positioning) so it degrades to a
   plain horizontal-scroll strip on small screens. */
.showcase-fan {
  display: flex;
  justify-content: center;
  max-width: 1300px;
  margin: 0 auto;
  padding: 56px 20px 32px;
}
.showcase-tile {
  flex: 0 0 190px;
  width: 190px;
  height: 300px;
  margin-left: -8px;
  border: 6px solid var(--surface);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 20px 45px -18px rgba(44, 36, 32, 0.35), 0 2px 6px rgba(44, 36, 32, 0.08);
  overflow: hidden;
  transform-origin: bottom center;
  transition: transform 0.2s ease, z-index 0.2s ease;
}
.showcase-tile:first-child { margin-left: 0; }
.showcase-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Program/Menu/Gæstebog/Sangønsker screenshots are wide, short crops with
   their text starting at the left edge — center-cropping (the default)
   pushes past it into empty space, so anchor those four left instead. */
.showcase-tile:nth-child(3) img,
.showcase-tile:nth-child(4) img,
.showcase-tile:nth-child(5) img,
.showcase-tile:nth-child(6) img { object-position: left; }
.showcase-tile:nth-child(1) { transform: rotate(-13deg) translateY(26px); z-index: 1; }
.showcase-tile:nth-child(2) { transform: rotate(-8deg) translateY(10px); z-index: 2; }
.showcase-tile:nth-child(3) { transform: rotate(-3deg); z-index: 3; }
.showcase-tile:nth-child(4) { transform: rotate(2deg) translateY(-4px); z-index: 4; }
.showcase-tile:nth-child(5) { transform: rotate(7deg) translateY(2px); z-index: 3; }
.showcase-tile:nth-child(6) { transform: rotate(12deg) translateY(14px); z-index: 2; }
.showcase-tile:nth-child(7) { transform: rotate(17deg) translateY(30px); z-index: 1; }
.showcase-tile:hover { transform: translateY(-14px) rotate(0deg) scale(1.05); z-index: 10; }

@media (max-width: 900px) {
  .showcase-fan {
    justify-content: flex-start;
    overflow-x: auto;
    gap: 14px;
    padding: 32px 20px 24px;
    -webkit-overflow-scrolling: touch;
  }
  .showcase-tile,
  .showcase-tile:first-child,
  .showcase-tile:nth-child(n) {
    flex: 0 0 160px;
    width: 160px;
    height: 252px;
    margin-left: 0;
    transform: none;
  }
  .showcase-tile:hover { transform: none; }
}

.preview-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.06);
  padding: 40px 32px;
  position: relative;
}
.preview-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
  top: 16px;
  left: 16px;
}
.preview-header { text-align: center; margin-bottom: 20px; }
.preview-header .couple-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  margin: 6px 0 4px;
}
.preview-header .date { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.preview-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.preview-tabs span {
  cursor: pointer;
  border-bottom: 2px solid transparent;
  padding-bottom: 12px;
  margin-bottom: -13px;
  transition: color 200ms ease, border-color 200ms ease;
}
.preview-tabs .active {
  color: var(--gold-ink);
  border-bottom-color: var(--gold-ink);
}

/* Showcase slides — one absolutely-positioned slide per feature, "showing"
   toggled by the script in index.html. .preview-stage's min-height keeps the
   card from collapsing while slides are absolutely positioned within it —
   sized to fit Galleri's 8-image grid, the tallest slide at the card's full
   720px desktop width (~365px measured; 210px only fit the narrower
   prototype card and let the grid's second row spill out of the card).
   Shorter slides stay top-aligned (not centered) — same starting position
   every time, rather than each slide floating at a different height. */
.preview-stage { position: relative; min-height: 380px; }
.preview-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.preview-slide.showing { opacity: 1; pointer-events: auto; }
.preview-slide.showing > * {
  animation: preview-reveal-up 420ms ease both;
}
.preview-slide.showing > *:nth-child(1) { animation-delay: 0ms; }
.preview-slide.showing > *:nth-child(2) { animation-delay: 60ms; }
.preview-slide.showing > *:nth-child(3) { animation-delay: 120ms; }
.preview-slide.showing > *:nth-child(4) { animation-delay: 180ms; }
.preview-slide.showing > *:nth-child(5) { animation-delay: 240ms; }
@keyframes preview-reveal-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .preview-slide.showing > * { animation: none; opacity: 1; transform: none; }
}

/* Galleri */
.preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.preview-grid div { aspect-ratio: 1; border-radius: 6px; background-size: cover; background-position: center; }
.preview-grid .pg1 { background-color: #C9897A; background-image: url(images/gallery-1.jpg); }
.preview-grid .pg2 { background-color: #7A9E7E; background-image: url(images/gallery-2.jpg); }
.preview-grid .pg3 { background-color: #B8934A; background-image: url(images/gallery-3.jpg); }
.preview-grid .pg4 { background-color: #6A8FA8; background-image: url(images/gallery-4.jpg); }
.preview-grid .pg5 { background-color: #9B7EC8; background-image: url(images/gallery-5.jpg); }
.preview-grid .pg6 { background-color: #C1653A; background-image: url(images/gallery-6.jpg); }
.preview-grid .pg7 { background-color: #6E9E70; background-image: url(images/gallery-7.jpg); }
.preview-grid .pg8 { background-color: #D2A45E; background-image: url(images/gallery-8.jpg); }
.preview-live { display: flex; justify-content: flex-end; margin-top: 16px; }
.preview-live span {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--gold-ink);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
}

/* Program */
.pv-program-row { display: grid; grid-template-columns: 44px 16px 1fr; gap: 0 10px; margin-bottom: 14px; }
.pv-program-time { font-size: 12px; color: var(--muted); text-align: right; padding-top: 2px; }
.pv-program-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); margin: 4px auto 0; }
.pv-program-title { font-size: 14px; font-weight: 600; }
.pv-program-desc { font-size: 12px; color: var(--muted); }

/* Menu */
.pv-menu-title {
  text-align: center;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 24px;
  color: var(--gold-ink);
  margin-bottom: 12px;
}
.pv-menu-cat { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; margin: 10px 0 4px; }
.pv-menu-dish { font-size: 13px; }
.pv-menu-desc { font-size: 11px; color: var(--muted); font-style: italic; }

/* Sangønsker */
.pv-song-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #2A2A28;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
}
.pv-song-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pv-song-icon { width: 28px; height: 28px; border-radius: 6px; background: #F2DED9; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.pv-song-title { font-size: 13px; }
.pv-song-artist { font-size: 11px; color: var(--muted); }

/* Gæstebog */
.pv-book-entry { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.pv-book-name { font-size: 11px; font-weight: 700; color: var(--gold-ink); text-transform: uppercase; letter-spacing: 0.5px; }
.pv-book-msg { font-size: 13px; margin-top: 4px; line-height: 1.4; }

/* Progress dots — each fills over the slide's on-screen duration so a
   visitor can see how long until the next slide, and jump to any slide. */
.preview-progress { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.preview-progress-dot {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.preview-progress-dot .fill {
  position: absolute;
  inset: 0;
  background: var(--gold-ink);
  transform: scaleX(0);
  transform-origin: left;
}

@media (max-width: 720px) {
  .hero h1 { font-size: 32px; }
  /* Stays 4 columns (not 2) even on narrow screens — the slides share one
     fixed-height stage (see .preview-stage) so the gallery grid can't grow
     taller than the other slides without overflowing the card. */
  .preview-tabs { gap: 10px 14px; }
  .preview-card { padding: 32px 20px; }
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--dark-border);
  border: 1px solid var(--dark-border);
}
.feature-card { background: var(--dark); padding: 28px 24px; }
.feature-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: var(--gold);
}
.feature-card h3 { font-size: 16px; color: #F2EEE7; margin-bottom: 6px; }
.feature-card p { font-size: 13px; color: #B8AFA2; margin: 0; }

@media (max-width: 720px) {
  .features-grid { grid-template-columns: 1fr; }
}


/* Print materials ("Fra skærm til print") — each slide shows a printed
   card (menukort/fotokort/bordsøgning) visually ejecting from a thin
   "printer slot" bar above it, see @keyframes print-eject below. */
.print-stage { position: relative; display: flex; justify-content: center; padding-top: 20px; }
.print-slot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 10px;
  background: var(--dark-border);
  border-radius: 3px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
  z-index: 2;
}
.print-card {
  position: relative;
  z-index: 1;
  width: 220px;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 30px rgba(0,0,0,0.12);
  padding: 24px 18px;
  text-align: center;
}
/* clip-path reveals the card top-down, from behind .print-slot, so it
   reads as sliding out of the slot rather than just fading in. */
.preview-slide.showing .print-card {
  animation: print-eject 620ms cubic-bezier(0.19, 1, 0.22, 1) both;
}
@keyframes print-eject {
  0% { transform: translateY(-16px) scale(0.94); opacity: 0; clip-path: inset(0 0 100% 0); }
  55% { opacity: 1; clip-path: inset(0 0 0% 0); }
  100% { transform: translateY(0) scale(1); opacity: 1; clip-path: inset(0 0 0% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .preview-slide.showing .print-card { animation: none; }
}

.print-qr { width: 64px; height: 64px; margin: 14px auto; display: block; }

.pv-photo-kicker { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.pv-photo-name { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 19px; margin: 10px 0 2px; }
.pv-photo-date { font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.pv-photo-rule { width: 40px; height: 1px; background: var(--gold); margin: 16px auto; }
.pv-photo-scan { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

.pv-seating-hint { font-size: 11px; color: var(--muted); margin: 0 0 14px; }
.pv-seating-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}
.pv-seating-result strong { color: var(--gold-ink); }

/* Sized to the tallest slide (Fotokort, ~279px measured) so the absolutely-
   positioned slides don't overflow the card — see .preview-stage comment. */
.preview-stage-print { min-height: 300px; }

.pricing-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  flex-wrap: wrap;
}
.pricing-card {
  position: relative;
  flex: 1 1 380px;
  max-width: 380px;
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: 14px;
  padding: 36px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
/* Tier 2 — same card, a gold border and a "Mest populær" badge are the
   only visual difference; no separate price-discount styling anymore
   (see .pricing-card .intro-badge, reused here instead of the old
   "Tilbud" badge that sat under the price). The badge floats above the
   card, centered on its top edge, instead of sitting inline before the
   eyebrow — inline, it pushed Tier 2's eyebrow/title/price down relative
   to Tier 1's, breaking the row-by-row alignment the two cards otherwise
   share. */
.pricing-card--featured { border-color: var(--gold); }
.pricing-card--featured .intro-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-surface);
}
.pricing-card .eyebrow-sm { margin-bottom: 10px; }
.pricing-card h3 { color: #F2EEE7; font-size: 20px; margin-bottom: 20px; }
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}
.pricing-card .amount { font-family: Georgia, serif; font-size: 48px; color: #fff; }
.pricing-card .intro-badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 3px 12px;
}
.pricing-card .duration { font-size: 12px; color: #B8AFA2; margin: 8px 0 24px; }
.pricing-list {
  flex: 1;
  list-style: none;
  padding: 20px 0 0;
  margin: 0 0 20px;
  border-top: 1px solid var(--dark-border);
  text-align: left;
}
.pricing-list li {
  font-size: 13px;
  color: #D8D2C8;
  padding: 6px 0;
  display: flex;
  gap: 8px;
}
.pricing-list li::before { content: "✓"; color: var(--gold); }
/* A row the OTHER tier has and this one doesn't — kept in place (same row
   order on both cards) rather than omitted, so the two cards line up for
   direct comparison instead of reading as two unrelated lists. */
.pricing-list li.is-absent { color: #6B655C; text-decoration: line-through; }
.pricing-list li.is-absent::before { content: "–"; color: #6B655C; }

/* The shared baseline (identical on both tiers) collapses behind a native
   <details> toggle so the always-visible rows above stay the differences
   that actually matter for comparing Tier 1 vs Tier 2 — no JS needed. */
.pricing-more { margin-bottom: 20px; }
.pricing-more summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--gold);
  list-style: none;
}
.pricing-more summary::-webkit-details-marker { display: none; }
.pricing-more summary::after { content: " ▾"; }
.pricing-more[open] summary::after { content: " ▴"; }
.pricing-list--sub { margin-bottom: 0; }

.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.faq-item summary {
  cursor: pointer;
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--gold); font-size: 20px; flex-shrink: 0; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 12px 0 0; }

.kontakt { text-align: center; }
.kontakt h2 { font-size: 30px; margin-bottom: 12px; }
.kontakt p { color: var(--muted); margin-bottom: 24px; }

.contact-form {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
}
.tier-note {
  text-align: center;
  font-size: 13px;
  color: var(--gold-ink);
  font-weight: 600;
  margin: -8px 0 4px;
  min-height: 18px;
}
.contact-form button {
  align-self: center;
  margin-top: 4px;
}
.contact-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  text-align: center;
  font-size: 13px;
  margin: 4px 0 0;
  min-height: 18px;
}
.form-status.success { color: #3b6d11; }
.form-status.error { color: #a32d2d; }
.form-fallback {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.form-fallback a { color: var(--gold-ink); text-decoration: underline; }