/* Microting marketing site — built on eForm design tokens
   Tokens live in tokens.css. This file is layout + marketing-specific patterns. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
.mono, code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.86em; letter-spacing: 0.01em; }
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  font-size: 22px;
  user-select: none;
}

/* ────────────────────────────────────────────────────────────
   Topbar — mirrors .top-app-bar pattern from the design manual
   ────────────────────────────────────────────────────────────*/
#modul-kalender, #modul-time, #modul-workspace, #modul-adhoc { scroll-margin-top: 96px; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface-container));
  border-bottom: 1px solid var(--md-surface-variant);
  backdrop-filter: saturate(180%) blur(8px);
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--md-on-surface);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #961b1e;
  color: #ffffff;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
[data-theme="dark"] .brand-mark { background: #961b1e; color: #ffffff; }
.nav-main {
  display: flex;
  gap: 4px;
  margin-left: 12px;
  flex: 1;
}
.nav-main a {
  color: var(--md-on-surface);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
}
.nav-main a:hover { background: var(--md-surface-variant); text-decoration: none; }
.nav-main a.active { color: var(--md-primary); }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.lang-btn {
  border: 1px solid var(--md-outline-variant);
  background: transparent;
  color: var(--md-on-surface-variant);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lang-btn:hover { background: var(--md-surface-variant); }

/* Buttons — mirror .btn-filled / .btn-tonal / .btn-outlined / .btn-text */
.btn {
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: filter 0.18s ease, background-color 0.18s ease, transform 0.05s ease;
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover { filter: brightness(0.97); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-filled { background: var(--md-primary); color: var(--md-on-primary); }
.btn-tonal { background: var(--md-secondary-container); color: var(--md-on-surface); }
.btn-outlined {
  background: transparent;
  border: 1px solid var(--md-outline);
  color: var(--md-on-surface);
}
.btn-text { background: transparent; color: var(--md-primary); padding-left: 8px; padding-right: 8px; }
.btn-lg { padding: 13px 22px; font-size: 1rem; }
.btn .material-symbols-outlined { font-size: 18px; }

/* Mobile menu */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--md-on-surface);
  padding: 6px;
}

/* ────────────────────────────────────────────────────────────
   Hero
   ────────────────────────────────────────────────────────────*/
.hero {
  position: relative;
  padding: 64px 24px 48px;
  overflow: hidden;
}
.hero::before {
  /* Decorative tinted shape — uses primary-container at low strength */
  content: "";
  position: absolute;
  inset: -120px -120px auto auto;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at 30% 30%,
    color-mix(in srgb, var(--md-primary) 28%, transparent) 0%,
    transparent 60%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 44px;
}
.hero-copy { max-width: 840px; }
.hero-copy .hero-cta,
.hero-copy .hero-meta { justify-content: center; }
.hero-copy p.lede { margin-left: auto; margin-right: auto; }
.hero-visual { width: 100%; }
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero-actions .hero-cta { margin-bottom: 0; justify-content: center; }
.hero-actions .hero-meta { justify-content: center; }

/* Product showcase frame — app-window chrome on the real screenshot */
.hero-showcase {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid var(--md-surface-variant);
  background: var(--md-surface-container);
  box-shadow: var(--md-shadow-lg);
  overflow: hidden;
}
.hero-showcase-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface-container));
  border-bottom: 1px solid var(--md-surface-variant);
}
.hero-showcase-dots { display: flex; gap: 7px; }
.hero-showcase-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--md-surface-variant); }
.hero-showcase-url {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  max-width: 360px;
  margin: 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--md-surface);
  border: 1px solid var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  font-size: 0.8rem;
}
.hero-showcase-url .material-symbols-outlined { font-size: 15px; color: var(--md-primary); }
.hero-showcase-url .mono { color: var(--md-on-surface); }
.hero-showcase-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
}
.hero-showcase-tag .status-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--status-aktiv-bg);
  color: var(--status-aktiv-fg);
}
.hero-showcase-figure { margin: 0; position: relative; background: #ffffff; }
.hero-showcase-figure img { display: block; width: 100%; height: auto; }
.hero-showcase-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-top: 1px solid var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  font-size: 0.84rem;
}
.hero-showcase-caption .cap-item { display: inline-flex; align-items: center; gap: 6px; }
.hero-showcase-caption .material-symbols-outlined { font-size: 17px; color: var(--md-primary); }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--md-primary-container) 65%, var(--md-surface));
  color: var(--md-on-surface);
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 20px;
}
.hero-eyebrow-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  display: inline-grid;
  place-items: center;
}
.hero-eyebrow-dot .material-symbols-outlined { font-size: 13px; }
.hero-eyebrow-flag {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--md-on-surface) 12%, transparent);
}
.hero-eyebrow-flag svg { display: block; border-radius: 3px; }
.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0 0 20px;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--md-primary); }
.hero p.lede {
  font-size: 1.1rem;
  color: var(--md-on-surface-variant);
  margin: 0 auto 28px;
  max-width: 56ch;
  text-align: center;
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-meta { display: flex; gap: 18px 28px; flex-wrap: wrap; align-items: center; }
.hero-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--md-on-surface-variant);
  font-size: 0.88rem;
}
.hero-meta-item .material-symbols-outlined {
  font-size: 18px;
  color: var(--md-primary);
}

/* ────────────────────────────────────────────────────────────
   Kundekort — Google Maps + nøgletal
   ────────────────────────────────────────────────────────────*/
.map-card {
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
  overflow: hidden;
  box-shadow: var(--md-shadow);
  background: var(--md-surface-container);
}
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--md-surface-variant);
}
/* På telefon er kortet smalt, så det skal være højere for at hele landet
   kan være der — se også initKundekort() i site.js, der sænker zoom. */
@media (max-width: 700px) {
  .map-embed { aspect-ratio: 3 / 4; }
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-stats {
  display: grid;
  /* Three, because the fourth card ("Udførte opgaver") is commented out in
     index.html. A fixed four-column grid would leave a quarter-width hole on
     the right, next to a visible card border, directly under the full-width
     map. Put this back to 4 when that card is uncommented. */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.map-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 22px 24px;
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
  background: var(--md-surface-container);
}
.map-stat .material-symbols-outlined {
  font-size: 24px;
  color: var(--md-primary);
  margin-bottom: 10px;
}
.map-stat strong {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--md-on-surface);
  font-variant-numeric: tabular-nums;
}
.map-stat > span:last-child {
  font-size: 0.92rem;
  color: var(--md-on-surface-variant);
}
.map-card + .map-stats { margin-top: 20px; }
/* Three cards want three columns or one, never two: a 2-column grid leaves a
   half-width hole in the bottom-right, which is more conspicuous than the
   desktop case because a lone card sits under a full pair. The three-across
   layout holds down to ~620px (the numbers are clamped at 1.8rem and the
   longest label is "Medarbejdere"), below which they stack. Was
   repeat(2, 1fr) when the band had four cards and tiled 2x2. */
@media (max-width: 620px) {
  .map-stats { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────
   Trust band
   ────────────────────────────────────────────────────────────*/
.trust-band {
  border-top: 1px solid var(--md-surface-variant);
  border-bottom: 1px solid var(--md-surface-variant);
  background: var(--md-surface-container);
}
.trust-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
}
.stat strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--md-on-surface);
}
.stat span {
  font-size: 0.86rem;
  color: var(--md-on-surface-variant);
}

/* ────────────────────────────────────────────────────────────
   Section scaffolding
   ────────────────────────────────────────────────────────────*/
section.section {
  padding: 80px 24px;
  position: relative;
}
section.section.alt {
  background: var(--md-surface-container);
  border-top: 1px solid var(--md-surface-variant);
  border-bottom: 1px solid var(--md-surface-variant);
}
/* Alternating section backgrounds */
section.section.bg-blue {
  background: color-mix(in srgb, var(--md-primary) 7%, var(--md-surface));
  border-top: 1px solid color-mix(in srgb, var(--md-primary) 12%, var(--md-surface-variant));
  border-bottom: 1px solid color-mix(in srgb, var(--md-primary) 12%, var(--md-surface-variant));
}
section.section.bg-white {
  background: var(--md-surface);
}
.section-inner { max-width: 1280px; margin: 0 auto; }
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 36px;
}
.section-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 6px;
  text-wrap: balance;
  max-width: 22ch;
}
.section-head p {
  font-size: 1.02rem;
  color: var(--md-on-surface-variant);
  margin: 0;
  max-width: 56ch;
}
.eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-primary);
  margin-bottom: 10px;
}

/* ────────────────────────────────────────────────────────────
   Products
   ────────────────────────────────────────────────────────────*/
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.product-card {
  background: var(--md-surface-container);
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  text-align: left;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.product-card:hover {
  border-color: color-mix(in srgb, var(--md-primary) 40%, var(--md-surface-variant));
  box-shadow: var(--md-shadow);
}
.product-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-primary-container) 55%, var(--md-surface));
  color: var(--md-primary);
  display: grid;
  place-items: center;
}
.product-icon .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}
.product-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
}
.product-card p {
  font-size: 0.92rem;
  color: var(--md-on-surface-variant);
  margin: 0;
}
.product-card p:has(+ .card-list) { margin-bottom: 10px; }
.card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.card-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  color: var(--md-on-surface-variant);
  line-height: 1.35;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--md-primary);
}
.product-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Pin the footer to the bottom so the chip and "Læs mere" line up across the
     row instead of floating at whatever height each card's text happens to end.
     `margin-top: auto` on the last flex child eats the slack.

     This replaces a `flex: 1` on `.product-card p` that never worked: the
     paragraph sits inside a plain <div> wrapper, so it is not a flex child of
     the card and could not absorb anything. The intent was right and the rule
     was in the wrong place — which is why the footers have always drifted.
     Doing it here also survives the cards having different innards: Workspace
     has a <ul> after its <p>, and Arkiv now has a footer with only a chip. */
  margin-top: auto;
}
.product-card-foot .more {
  font-size: 0.84rem;
  color: var(--md-primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.product-card-foot .more a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}
.product-card-foot .more a:hover { text-decoration: underline; }
.product-card-foot .more:hover .material-symbols-outlined { transform: translateX(2px); }
.product-card-foot .more .material-symbols-outlined { transition: transform 0.18s ease; font-size: 16px; }
.product-card .ejendom-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--md-surface-variant);
  color: var(--md-on-surface);
  font-size: 0.72rem;
  font-weight: 500;
}
.ejendom-chip--live {
  background: color-mix(in srgb, var(--status-aktiv-bg) 16%, var(--md-surface-container)) !important;
  color: var(--status-aktiv-bg) !important;
}
[data-theme="dark"] .ejendom-chip--live {
  background: color-mix(in srgb, var(--status-aktiv-bg) 30%, var(--md-surface-container)) !important;
  color: #a5d6a7 !important;
}
.ejendom-chip--soon {
  background: color-mix(in srgb, var(--status-afventer-bg) 28%, var(--md-surface-container)) !important;
  color: var(--md-on-surface) !important;
}
.ejendom-chip--offer {
  background: color-mix(in srgb, var(--md-primary) 12%, var(--md-surface-container)) !important;
  color: var(--md-primary) !important;
  font-weight: 600 !important;
}
[data-theme="dark"] .ejendom-chip--offer {
  background: color-mix(in srgb, var(--md-primary) 26%, var(--md-surface-container)) !important;
  color: var(--md-on-surface) !important;
}
.product-card--soon { opacity: 0.92; }
.product-card--soon .product-icon {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
}
.soon-ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--status-afventer-bg) 85%, #fff);
  color: var(--status-afventer-fg);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* AI badge on a module icon */
.product-icon--ai { position: relative; overflow: visible; }
.product-icon--ai .ai-badge {
  position: absolute;
  bottom: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--md-primary), #7c4dff);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  box-shadow: var(--md-shadow);
  border: 1.5px solid var(--md-surface-container);
}
.product-icon--ai .ai-badge .material-symbols-outlined {
  font-size: 12px;
  color: #fff;
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}

/* ────────────────────────────────────────────────────────────
   Steps "Sådan kommer du i gang"
   ────────────────────────────────────────────────────────────*/
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 24px;
  background: var(--md-surface);
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.step-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--md-primary);
  letter-spacing: 0.06em;
}
.step h3 { font-size: 1.05rem; margin: 0; font-weight: 600; }
.step p { margin: 0; color: var(--md-on-surface-variant); font-size: 0.94rem; }
.step-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  color: var(--md-primary);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}
.step-link:hover { text-decoration: underline; }
.step-link .material-symbols-outlined { font-size: 18px; }
.step-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--md-primary-container) 50%, var(--md-surface));
  color: var(--md-primary);
}

/* ────────────────────────────────────────────────────────────
   Pain / painkiller — Platformen (splitkort med pil)
   ────────────────────────────────────────────────────────────*/
.pain-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
  margin-bottom: 40px;
}
.pain-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--md-radius);
  overflow: hidden;
  border: 1px solid var(--md-surface-variant);
}
.pain-side {
  padding: 24px 32px;
  font-size: 0.94rem;
  line-height: 1.5;
}
.pain-side p { margin: 0; }
.pain-side strong {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.75;
}
.pain-side--pain {
  background: color-mix(in srgb, var(--status-udgaet-bg, #fce8e6) 65%, var(--md-surface));
  color: #7a2118;
}
.pain-side--fix {
  background: var(--md-primary);
  color: var(--md-on-primary, #fff);
}
.pain-side--fix strong { opacity: 0.85; }
.pain-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--md-surface);
  color: var(--md-primary);
  border: 2px solid var(--md-primary);
  display: grid;
  place-items: center;
  box-shadow: var(--md-shadow);
}
.pain-arrow .material-symbols-outlined { font-size: 20px; }
@media (max-width: 760px) {
  .pain-card { grid-template-columns: 1fr; }
  .pain-side--pain { position: relative; }
  .pain-arrow { display: none; }
  .pain-side--pain::after {
    content: "\e5cf";
    font-family: "Material Symbols Outlined";
    font-size: 20px;
    line-height: 1;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--md-surface);
    color: var(--md-primary);
    border: 2px solid var(--md-primary);
    display: grid;
    place-items: center;
    box-shadow: var(--md-shadow);
    z-index: 2;
  }
}

/* ────────────────────────────────────────────────────────────
   Cases
   ────────────────────────────────────────────────────────────*/
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.case-card {
  background: var(--md-surface-container);
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
  padding: 24px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.case-card:hover {
  box-shadow: var(--md-shadow);
  border-color: color-mix(in srgb, var(--md-primary) 30%, var(--md-surface-variant));
}
.case-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--md-primary-container);
  color: var(--md-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
[data-theme="dark"] .case-avatar { color: var(--md-on-primary); }
.case-body { min-width: 0; }
.case-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.case-card h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.case-card blockquote {
  margin: 0 0 14px;
  font-size: 0.96rem;
  color: var(--md-on-surface);
  line-height: 1.5;
}
.case-card .who {
  font-size: 0.84rem;
  color: var(--md-on-surface-variant);
}
.case-card .who strong { color: var(--md-on-surface); font-weight: 600; }

/* ────────────────────────────────────────────────────────────
   Partners
   ────────────────────────────────────────────────────────────*/
.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.partner-card {
  background: var(--md-surface-container);
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 200px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.partner-card:hover {
  border-color: color-mix(in srgb, var(--md-primary) 35%, var(--md-surface-variant));
  box-shadow: var(--md-shadow);
  transform: translateY(-2px);
}
.partner-logo {
  height: 64px;
  display: grid;
  place-items: center;
  width: 100%;
}
.partner-logo svg { display: block; max-height: 100%; max-width: 100%; }
.partner-logo img { display: block; max-height: 52px; max-width: 80%; width: auto; height: auto; object-fit: contain; }
.partner-meta {
  text-align: center;
}
.partner-text {
  width: 100%;
  background: var(--md-surface);
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
  padding: 14px 16px;
}
.partner-text p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--md-on-surface-variant);
  text-align: left;
}
.partner-meta strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.partner-meta span {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--md-on-surface-variant);
}
.partner-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--md-surface-variant);
  color: var(--md-on-surface);
  font-size: 0.72rem;
  font-weight: 500;
}

/* Dark mode: invert logo glyph fills that rely on dark ink */
[data-theme="dark"] .partner-logo .ink { fill: var(--md-on-surface); }
[data-theme="dark"] .partner-logo .ink-stroke { stroke: var(--md-on-surface); }
.partner-logo .ink { fill: #1f1f1f; }
.partner-logo .ink-stroke { stroke: #1f1f1f; }

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

/* ────────────────────────────────────────────────────────────
   Prisberegner
   ────────────────────────────────────────────────────────────*/
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 16px;
  align-items: start;
}
.calc-card {
  background: var(--md-surface);
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
  padding: 24px;
}
[data-theme="dark"] .calc-card { background: var(--md-surface-container); }
.calc-card-title,
.calc-summary-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calc-card-title {
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 600;
}
.calc-card-title .material-symbols-outlined { color: var(--md-primary); font-size: 20px; }
.calc-field { display: grid; gap: 6px; margin-bottom: 16px; }
.calc-field > label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
}
.calc-stepper {
  display: grid;
  /* minmax(0, 1fr), never a bare 1fr. `1fr` is shorthand for minmax(auto, 1fr),
     and that `auto` floor is the item's min-content width — for a bare <input>
     that is its default ~20-character box, about 271px here. The track then
     refuses to shrink, the grid overflows its own border-box, and `overflow:
     hidden` below (which the rounded corners need) clips the overflow away.
     Only the right-hand end is clipped, so the effect was: minus visible,
     plus gone, on every phone. Desktop had room and never showed it. */
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 0;
  border: 1px solid var(--md-outline);
  border-radius: 4px;
  overflow: hidden;
  background: var(--md-surface-container);
}
.calc-step {
  border: none;
  background: var(--md-surface-variant);
  color: var(--md-on-surface);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}
.calc-step:hover { background: color-mix(in srgb, var(--md-primary) 16%, var(--md-surface-variant)); }

/* On a touch device the buttons are a fingertip target, not a cursor target.
   The row is otherwise as tall as the input's line box — 23px — which is under
   the 24x24 WCAG 2.5.8 AA minimum and well under Apple's 44x44 guidance.
   Scoped to coarse pointers so the desktop calculator is unchanged; the grid
   row stretches, so the input grows to match without a rule of its own. */
@media (pointer: coarse) {
  .calc-step { min-height: 44px; }
}
.calc-step .material-symbols-outlined { font-size: 18px; }
.calc-stepper input {
  border: none;
  border-radius: 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  background: var(--md-surface-container);
  -moz-appearance: textfield;
}
.calc-stepper input::-webkit-outer-spin-button,
.calc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-stepper input:focus { outline: 2px solid var(--md-primary); outline-offset: -2px; }

/* Deaktiveret felt (medarbejdere uden timeregistrering) */
.calc-field.is-disabled { opacity: 0.55; }
.calc-field.is-disabled .calc-stepper {
  background: var(--md-surface-variant);
  cursor: not-allowed;
}
.calc-field.is-disabled .calc-step { cursor: not-allowed; }
.calc-stepper input:disabled { background: var(--md-surface-variant); cursor: not-allowed; }
.calc-field-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--md-on-surface-variant);
}
.calc-field-hint .material-symbols-outlined { font-size: 15px; color: var(--status-afventer-bg); }

.calc-addons {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--md-surface-variant);
}
.calc-addons-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin-bottom: 10px;
}
.calc-addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--md-surface-variant);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--md-surface-container);
  transition: border-color 0.15s ease;
}
.calc-addon:has(input:checked) {
  border-color: var(--md-primary);
  background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface-container));
}
.calc-addon-text { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.calc-addon-text .material-symbols-outlined { color: var(--md-primary); font-size: 20px; }
/* Låste moduler (fast del af løsningen) */
.calc-addon--locked { cursor: default; }
.calc-addon--locked .switch { opacity: 0.55; }
.calc-addon--locked .switch .slider { cursor: not-allowed; }
.calc-addon-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 12px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
}
.calc-addon-lock .material-symbols-outlined { font-size: 14px; color: var(--md-on-surface-variant); }
.calc-addon-soon {
  margin-left: auto;
  margin-right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  background: color-mix(in srgb, var(--status-afventer-bg) 28%, var(--md-surface-container));
  color: var(--md-on-surface);
}

/* Timeregistrering — chevron-accordion med medarbejder-felt */
.calc-addon-acc { margin-bottom: 8px; }
.calc-addon-acc .calc-addon { margin-bottom: 0; }
.calc-addon-chevron {
  margin-left: auto;
  margin-right: 12px;
  color: var(--md-on-surface-variant);
  transition: transform 0.18s ease;
}
.calc-addon-acc:has(#calc-timereg:checked) .calc-addon-chevron { transform: rotate(180deg); }
.calc-addon-acc:has(#calc-timereg:checked) .calc-addon {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.calc-addon-panel {
  display: none;
  padding: 16px 14px;
  border: 1px solid var(--md-primary);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface-container));
}
.calc-addon-acc:has(#calc-timereg:checked) .calc-addon-panel { display: block; }
.calc-addon-panel .calc-field { margin-bottom: 0; }

/* Summary card */
.calc-summary {
  background: var(--md-surface-container);
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
  padding: 24px;
  box-shadow: var(--md-shadow);
  position: sticky;
  top: 84px;
}
.calc-summary-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--md-surface-variant);
  margin-bottom: 16px;
}
.calc-summary-label {
  font-size: 0.84rem;
  color: var(--md-on-surface-variant);
  margin-bottom: 6px;
}
.calc-summary-price {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--md-on-surface);
}
.calc-summary-price small {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--md-on-surface-variant);
  margin-left: 4px;
}
.calc-breakdown {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.calc-breakdown li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
}
.calc-breakdown .lbl { color: var(--md-on-surface-variant); }
.calc-breakdown .lbl .qty {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82em;
  color: var(--md-on-surface);
}
.calc-breakdown .amt { font-weight: 600; white-space: nowrap; }
.calc-breakdown li.muted { opacity: 0.45; }
.calc-annual {
  background: var(--md-surface);
  border: 1px solid var(--md-surface-variant);
  border-radius: 8px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
[data-theme="dark"] .calc-annual { background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface)); }
.calc-annual-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--md-on-surface-variant);
}
.calc-strike { text-decoration: line-through; }
.calc-annual-row--main {
  font-size: 1.05rem;
  color: var(--md-on-surface);
  padding-top: 8px;
  border-top: 1px solid var(--md-surface-variant);
}
.calc-annual-row--main strong:last-child {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--md-primary);
}
.calc-annual-row--save { color: var(--status-aktiv-bg); font-weight: 600; }
[data-theme="dark"] .calc-annual-row--save { color: #a5d6a7; }
.calc-cta { width: 100%; justify-content: center; }
.calc-econ {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.calc-econ li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--md-surface);
  border: 1px solid var(--md-surface-variant);
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--md-on-surface-variant);
}
[data-theme="dark"] .calc-econ li { background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface)); }
.calc-econ .econ-lbl { display: grid; gap: 1px; }
.calc-econ .econ-lbl small {
  font-size: 0.74rem;
  color: var(--md-on-surface-variant);
  opacity: 0.85;
}
.calc-econ li strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--md-on-surface);
  white-space: nowrap;
}
.calc-econ li.econ-featured {
  background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface-container));
  border-color: color-mix(in srgb, var(--md-primary) 35%, var(--md-surface-variant));
  color: var(--md-on-surface);
}
.calc-econ li.econ-featured strong {
  font-size: 1.35rem;
  color: var(--md-primary);
}
.calc-disclaimer {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--md-on-surface-variant);
  text-align: center;
}

@media (max-width: 1024px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-summary { position: static; }
}

/* ────────────────────────────────────────────────────────────
   Pricing teaser
   ────────────────────────────────────────────────────────────*/
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.price-card {
  background: var(--md-surface-container);
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.price-card.featured {
  border-color: var(--md-primary);
  box-shadow: var(--md-shadow-lg);
}
.price-card.featured::before {
  content: "Populær";
  position: absolute;
  top: -10px;
  right: 20px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.price-card h3 { font-size: 1.05rem; font-weight: 600; margin: 0; }
.price-card .price {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}
.price-card .price small {
  font-size: 0.86rem;
  color: var(--md-on-surface-variant);
  font-weight: 400;
  margin-left: 4px;
}
.price-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; flex: 1; }
.price-list li {
  display: flex;
  gap: 10px;
  font-size: 0.92rem;
  align-items: flex-start;
}
.price-list .material-symbols-outlined {
  color: var(--md-primary);
  font-size: 18px;
  margin-top: 2px;
}
.price-list li.off {
  color: var(--md-on-surface-variant);
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--md-on-surface-variant) 60%, transparent);
}
.price-list li.off .material-symbols-outlined {
  color: var(--md-outline);
  text-decoration: none;
}
.pricing-extra {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.pricing-extra-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--md-surface-container);
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
}
.pricing-extra-item .material-symbols-outlined {
  color: var(--md-primary);
  font-size: 24px;
  flex-shrink: 0;
}
.pricing-extra-item strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.pricing-extra-item span {
  font-size: 0.9rem;
  color: var(--md-on-surface-variant);
}
@media (max-width: 1024px) {
  .pricing-extra { grid-template-columns: 1fr; }
}
.price-card .btn { width: 100%; justify-content: center; }

/* ────────────────────────────────────────────────────────────
   Contact
   ────────────────────────────────────────────────────────────*/
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.contact-card {
  background: var(--md-surface-container);
  border: 1px solid var(--md-surface-variant);
  border-radius: var(--md-radius);
  padding: 28px;
}
.contact-card h3 { margin: 0 0 6px; font-size: 1.2rem; }
.contact-card p.muted { margin: 0 0 18px; color: var(--md-on-surface-variant); }
.contact-phone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--md-primary-container) 35%, var(--md-surface));
  border-radius: var(--md-radius);
  margin-bottom: 18px;
}
.contact-phone .material-symbols-outlined { color: var(--md-primary); font-size: 26px; }
.contact-phone strong { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; }
.contact-phone span { display: block; font-size: 0.84rem; color: var(--md-on-surface-variant); }
.people-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--md-surface-variant);
}
.person:last-child { border-bottom: none; }
.person-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--md-surface-variant);
  color: var(--md-on-surface);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.84rem;
}
.person-name { font-weight: 500; }
.person-role { font-size: 0.84rem; color: var(--md-on-surface-variant); }

/* Form */
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .form-row-2col { grid-template-columns: 1fr; } }
.contact-form .field { display: grid; gap: 6px; margin-bottom: 14px; }
.contact-form label { font-size: 0.84rem; color: var(--md-on-surface-variant); font-weight: 500; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  border: 1px solid var(--md-outline);
  border-radius: 4px;
  padding: 11px 12px;
  font: inherit;
  background: var(--md-surface);
  color: var(--md-on-surface);
}
.contact-form textarea { resize: vertical; min-height: 100px; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: 2px solid var(--md-primary);
  outline-offset: -1px;
  border-color: var(--md-primary);
}
.consent-row { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; color: var(--md-on-surface-variant); margin-bottom: 14px; }
.consent-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--md-primary); }
.form-submit-row { display: flex; justify-content: flex-end; gap: 10px; }

/* ────────────────────────────────────────────────────────────
   Footer
   ────────────────────────────────────────────────────────────*/
footer.site-footer {
  background: var(--md-surface-container);
  border-top: 1px solid var(--md-surface-variant);
  padding: 48px 24px 24px;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-col h4 {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-col a {
  color: var(--md-on-surface);
  font-size: 0.92rem;
}
.footer-col a:hover { color: var(--md-primary); text-decoration: none; }
.footer-brand p {
  color: var(--md-on-surface-variant);
  font-size: 0.9rem;
  margin: 12px 0 0;
  max-width: 36ch;
}
.footer-legal {
  max-width: 1280px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--md-surface-variant);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: var(--md-on-surface-variant);
  font-size: 0.84rem;
  flex-wrap: wrap;
}
.footer-legal a { color: var(--md-on-surface-variant); }
.footer-legal a:hover { color: var(--md-primary); }
.footer-legal .legal-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ────────────────────────────────────────────────────────────
   Snackbar (cookie/info)
   ────────────────────────────────────────────────────────────*/
.snackbar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(24px);
  background: #323232;
  color: #fff;
  padding: 12px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  z-index: 60;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: var(--md-shadow);
}
.snackbar.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.snackbar button { background: transparent; border: 1px solid #555; color: #fff; padding: 5px 10px; font-size: 0.84rem; border-radius: 4px; cursor: pointer; }

/* ────────────────────────────────────────────────────────────
   Mobile
   ────────────────────────────────────────────────────────────*/
@media (max-width: 1040px) {
  /* Collapse the nav into a dropdown before the row can overflow */
  .nav-main {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px 16px 14px;
    background: var(--md-surface-container);
    border-bottom: 1px solid var(--md-surface-variant);
    box-shadow: var(--md-shadow);
  }
  .nav-main.open { display: flex; }
  .nav-main a { padding: 12px; border-radius: 8px; }
  .menu-toggle { display: inline-flex; }
  .topbar { position: sticky; }
  .topbar-actions .btn-tonal { display: none; }
}
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .cases-grid, .pricing-grid, .contact-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .section-head { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero { padding: 40px 20px 32px; }
  section.section { padding: 56px 20px; }
  .products-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .hero-showcase-tag { display: none; }
}
@media (max-width: 420px) {
  .topbar-actions .btn-filled .material-symbols-outlined { display: none; }
}

/* ────────────────────────────────────────────────────────────
   Legal pages (terms / privacy / GDPR)
   Kun brugt af de tre juridiske sider; teksten er engelsk og
   sidder i <article class="legal-prose" lang="en">.
   ────────────────────────────────────────────────────────────*/
.legal-prose{max-width:760px;color:var(--md-on-surface);text-wrap:pretty}
.legal-prose h1{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:0 0 20px}
.legal-prose h2{font-size:1.3rem;font-weight:700;line-height:1.3;margin:52px 0 14px;padding-top:24px;border-top:1px solid var(--md-surface-variant)}
.legal-prose h2:first-of-type{margin-top:40px}
.legal-prose h3{font-size:.95rem;font-weight:700;line-height:1.45;margin:30px 0 10px;color:var(--md-primary)}
.legal-prose p{font-size:.95rem;line-height:1.7;color:var(--md-on-surface-variant);margin:0 0 16px}
.legal-prose ul,.legal-prose ol{margin:0 0 16px;padding-left:26px}
.legal-prose li{font-size:.95rem;line-height:1.7;color:var(--md-on-surface-variant);margin:0 0 8px}
.legal-prose li>p{margin:10px 0 0}
.legal-prose a:not(.btn){color:var(--md-primary)}
.legal-prose strong{color:var(--md-on-surface);font-weight:700}
.legal-prose hr{border:0;border-top:1px solid var(--md-surface-variant);margin:44px 0}
.legal-prose hr+h2,.legal-prose hr+h2:first-of-type{border-top:0;margin:0 0 14px;padding-top:0}
.legal-prose .legal-toc{list-style:none;padding-left:0;border-left:3px solid var(--md-surface-variant);padding:4px 0 4px 18px}
.legal-prose .legal-toc li{margin:0 0 6px}
.legal-prose .legal-date{font-size:.88rem}
.legal-table-wrap{overflow-x:auto;margin:0 0 20px}
.legal-prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
.legal-prose th,.legal-prose td{border:1px solid var(--md-outline-variant);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.6;color:var(--md-on-surface-variant)}
.legal-prose th{background:var(--md-surface-variant);color:var(--md-on-surface);font-weight:700}
.legal-draft{border:2px dashed var(--md-alert);border-radius:var(--md-radius);padding:20px 22px 4px;margin:32px 0}
.legal-draft>h3:first-child{margin-top:0;color:var(--md-alert)}
.legal-draft-flag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--md-alert);border:1px solid var(--md-alert);border-radius:999px;padding:3px 10px;margin-bottom:12px}

/* ==========================================================================
   Product composition — desktop screenshot + overlaid phones + arrows
   ==========================================================================
   The story these images tell is "a task planned at the desk shows up in the
   worker's pocket". A flat screenshot cannot say that, so the hero is
   composed from layers: a clean desktop capture, clean phone captures with no
   bezel of their own, CSS bezels, and an SVG arrow overlay.

   This follows the convention .hero-showcase-bar already established —
   pixels in the PNG, chrome in the DOM. Keeping the bezels and arrows out of
   the PNG means re-running the capture harness never re-renders them, and the
   arrows stay crisp and themeable at any width.
   ========================================================================== */

.stage {
  position: relative;
  /* Pinned so percentages in the SVG map linearly to viewBox units at every
     width. Without a fixed ratio the arrows drift as the page resizes. */
  aspect-ratio: 16 / 9;
  width: 100%;
}
.stage-screenshot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

/* --- Phone layer -------------------------------------------------------- */

.stage-phone {
  position: absolute;
  width: 21%;
  /* 1236x2745 capture; the bezel adds a little around it. */
  aspect-ratio: 1236 / 2745;
  border-radius: 14px;
  padding: 1.15% 0.75%;
  background: #14161a;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .32),
    0 3px 9px rgba(0, 0, 0, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.stage-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  background: #fff;
}
/* The speaker slot. Small, but without it the bezel reads as a plain frame. */
.stage-phone::before {
  content: "";
  position: absolute;
  top: 0.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 0.5%;
  min-height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
/* Phone A hangs off the bottom-left corner, B sits upper-right over the weekend
   columns, which are empty — so the diagonal costs the least real content.
   The width is what sets the height too (fixed aspect ratio): at 21% a phone is
   already 83% of the stage's height, so two phones fully inside the frame can
   only be staggered by the ~17% of slack that is left, and at that stagger they
   read as two panels side by side rather than as a composition.
   The mockup solves it by letting the left phone hang off the frame, and that
   IS available here: `.hero-showcase` is `overflow: hidden` for its rounded
   corners, so phone A's bottom two thirds are clipped by the frame. The
   clipping is the effect, not a bug — it is what puts the two phones on a real
   diagonal and what stops A from covering Monday's morning.

   A IS CLIPPED AT THE BOTTOM ONLY, AND THAT IS THE WHOLE OF IT. `left` was
   -2%, which also ran the phone off the left edge and sliced its bezel and the
   `Peter Hansen` avatar down the middle. A device cut on two sides stops
   reading as a device; it reads as a texture pasted over the corner. At 2% the
   left bezel, the speaker slot and the avatar are all whole, the phone still
   hangs off the bottom, and the diagonal is unchanged.

   What survives the clip is the point of phone A and is therefore a constraint,
   not an outcome: the red `Forfaldne opgaver (3)` banner sits at 12.6-18.5% of
   the phone's own height and the first overdue entry ends at 45%, so `top` must
   stay at or below 58% (58 + 82.9 x 0.45 = 95%) for the banner AND one entry to
   be readable. Lower it further and the entry goes; raise it and the phone
   stops hanging off the frame.

   ARROW 1 IS AIMED AT THAT BANNER. Its `data-to` in site.js's
   getKalenderStage() is a stage percentage, so both numbers below move it —
   re-measure rather than nudging the arrow by eye. */
.stage-phone-a { left: 2%; top: 58%; }
.stage-phone-b { left: 73.5%; top: 0%; }

/* Ad-hoc's single phone. Both numbers are pinned by content in the two PNGs
   rather than chosen for balance, so re-measure if either capture changes.

   `left` is bounded from BELOW by the desktop's `Sidste frist` column, which
   the comparison page calls the page's point. Its bar-plus-track runs
   x 66.67-77.32% on every row of assets/adhoc-desktop.png, so a phone starting
   any earlier eats the thing the image is there to show — and the first thing
   it eats is not slack grey: rows 1 and 2 are overdue and due-today, so their
   bars are FULL, and 77% (the value this started at) clipped the right tip of
   the very row the arrow points from. It is bounded from ABOVE by the frame:
   77.4% + the 21% phone width leaves a 1.6% margin, and closing that further
   would clip the right bezel.

   THE PHONE IS CLIPPED AT THE BOTTOM ONLY, like phone A above, and for the
   same reason: a device cut on two sides reads as a texture rather than a
   device. That rules out the arrangement the page's own drawing uses, which
   runs its phone off the right edge — at this width the clip would land at
   about 88% of the phone's own width and cut the red `Haster` badge, the one
   feature of the card that carries its own colour.

   `top` has a window of about 12 points, and 27.69% is one of the two table
   rules inside it.

   The window's floor is the hang itself: a phone is 21 x 3.9483 = 82.91% of
   the stage's height, so anything above 17.09% stops overlapping the frame's
   lower edge at all. Its ceiling is the card, which is FAR taller than it
   looks — the orange rail runs from 13.77% to 87.18% of the screenshot and the
   last line, `Oprettet af: Peter Hansen`, sits at 85.1%. The bezel insets the
   screenshot by 1.15% of the stage's WIDTH top and bottom, which is 2.04% of
   its height (the stage being 16:9), leaving 78.82% for the screenshot itself.
   So the card's lower edge lands at `top` + 2.04 + 0.8718 x 78.82 = `top` +
   70.77, and `top` must stay at or below 29.2% for the whole card to be read.
   An earlier 34.5% cut the last three rails off — `Tildelt til: Torben
   Nielsen` among them, which is the very field the arrow's story turns on.

   Inside 17.1-29.2% assets/adhoc-desktop.png has TWO rules, 23.61% and 27.69%,
   and both are legal by the paragraph above. Landing on a rule at all is what
   makes the phone occlude the table's right-hand columns cleanly rather than
   slicing some row's `Åben` chip and `Færdiggør opgaven` button in half — the
   same defect as a half-cut phone, one scale down. Choosing 27.69% over 23.61%
   is the separate decision: 23.61% is the rule ABOVE the column headers, so it
   would bury `Oprettet`, `Status` and `Handlinger` along with their data,
   and the comparison page's copy for this image leans on those headings
   staying legible above the phone. 27.69% is the rule below them.

   WHAT HANGS OFF THE FRAME IS NOT JUST BEZEL, and the earlier claim that it
   was is worth correcting rather than deleting, because the number looks
   reassuring and is not. The screenshot's own lower edge is at 108.56%, so of
   the 10.60 points below the frame, 8.56 are screenshot and only 2.04 are
   bezel. The card ends at 98.45% and is safe, but the app's floating `+`
   button sits at 98.22-103.02% and is therefore cut about halfway down. That
   is accepted, not overlooked: the FAB clears the frame only at `top` >= 29.5%,
   which is past the card's 29.2% ceiling AND off the rules, so no value
   satisfies both. A pale lavender disc cut at the frame's edge costs less than
   a sliced table row or a clipped card.

   THE ARROW IS AIMED AT THE CARD TITLE. Its `data-to` in site.js's
   getAdhocStage() is a stage percentage, so both numbers below move it —
   re-measure rather than nudging the arrow by eye. */
.stage-phone-adhoc { left: 77.4%; top: 27.69%; }

/* Timeregistrering's single phone. The one stage of the three where the whole
   device fits, and that is worth keeping rather than trading away.

   `left` is bounded from BELOW by the day columns worth reading. The grid is
   Navn (to 15.91%) then five equal days: Monday 15.91-32.56%, Tuesday to
   49.20%, `I dag` to 65.85%, Thursday to 82.49%, Friday to 99.14%. Monday and
   Tuesday carry the completed green cells, `I dag` carries the live column and
   the week's one red cell — so the phone starts at 77.5%, inside Thursday,
   covering all of Friday and Thursday's right edge. Thursday and Friday are
   plan-only and identical to each other; they are the two columns that cost
   nothing, exactly as the Kalender hero covers the weekend.

   `top` is 17.59%, the rule along the TOP of the table header, and at this one
   the arithmetic is unusually kind: the phone's own content — app bar, summary
   card, day card, and the bottom navigation bar at 86.45-99.96% of the
   screenshot — lands at 98.4%, so the ENTIRE app screen is inside the frame
   and only about half a point of bezel is clipped.

   That is why this phone is not made to hang the way the other two do. The
   alternative rules are 21.76% and 37.59%, and both give a proper overhang by
   cutting the bottom navigation off — trading the one signal that says "this
   is a whole application, with other sections" for a visual flourish the page
   does not need. The device reads as complete here, which is also what the
   page's own drawing shows.

   THE ARROW IS AIMED AT `Min uge til dato`. Its `data-to` in site.js's
   getTimeStage() is a stage percentage, so both numbers below move it —
   re-measure rather than nudging the arrow by eye. */
.stage-phone-time { left: 77.5%; top: 17.59%; }

/* --- The front page's hand ----------------------------------------------
   A cutout PNG instead of a CSS bezel, because the page's drawing puts the
   phone in a photographed hand and that is the thing worth keeping from it.

   THE APERTURE IS MEASURED, not eyeballed — and measured with one more step
   than is obvious. `assets/hand-phone.webp` is 350x350 with a transparent
   screen hole; flood-filling transparency in from the border marks the OUTSIDE,
   and what is left enclosed is the screen.

   BUT THE ENCLOSED TRANSPARENCY IS TWO REGIONS, NOT ONE. Besides the screen
   (x 89-209, y 11-268, area 30353) there is a 7x30 gap at x 215-221 between the
   phone's right rim and a fingertip. Taking the bounding box of both together
   gives a width of 133 instead of 121 — 38.00% instead of 34.57% — and that is
   what this rule said at first. The result was not subtle once looked for: the
   capture rendered ~10% too wide, so the red `Forfaldne opgaver` bar and the
   day header painted straight past the phone's rim onto the calendar behind it.
   Take the LARGEST connected component, not the bbox of all of them.

   AND IT WOULD BE HARDER TO SPOT TODAY. That defect was obvious because a red
   banner overspilled onto a pale calendar. Farestalden's board colour is now
   `#C62828`, so the week behind the phone is largely red as well and the same
   overspill would blend into it. Re-measure from the cutout; do not trust the
   eye on this one.

   Re-measure if the cutout is ever replaced; nothing here would notice a
   different phone.

   THE CUTOUT'S LICENCE IS UNVERIFIED. It was supplied from a Desktop and this
   repository holds no record of a grant. See assets/IMAGE-SOURCES.md, which
   also records that it is mirrored from the original and is upscaled ~2.2x in
   the composite.

   The screenshot is positioned to that hole and the cutout is painted OVER it,
   so the aperture's rounded corners need no mask: the phone body is opaque
   there and covers them.

   `object-position: top` with `cover` is deliberate. The aperture is 121x258,
   an aspect of 0.469, against the capture's 1236x2745 = 0.450 — so filling it
   side to side leaves about 4% of the capture below the screen's lower edge.
   That is not a crop to apologise for: a list on a phone IS cut off by the
   bottom of the screen, and anchoring to the top is what keeps the header, the
   red overdue banner and the first cards in view. */
.stage-hand {
  position: absolute;
  width: 46%;
  aspect-ratio: 1 / 1;
}
/* Scoped under `.stage-hand` on purpose, not written as bare classes.
   `.hero-showcase-figure img` earlier in this file is (0,1,1) and would
   otherwise win over a single class — which it did: the screenshot rendered at
   the hand's full width and twice its height, spilling across the frame, with
   the cutout floating on top of it. `.stage-phone img` is scoped the same way
   for the same reason. */
.stage-hand img.stage-hand-screen,
.stage-hand img.stage-hand-cutout {
  position: absolute;
  display: block;
}
.stage-hand img.stage-hand-screen {
  left: 25.43%;
  top: 3.14%;
  width: 34.57%;
  height: 73.71%;
  object-fit: cover;
  object-position: top;
  background: #fff;
}
.stage-hand img.stage-hand-cutout {
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Right-hand side, and sized so the WRIST ACTUALLY LEAVES THE FRAME.
   That is arithmetic, not taste: the cutout is square, so at `width: W` the
   element is `W * 16/9` of the stage's height, and `top + W * 1.778` has to
   exceed 100. At the first values — 40% wide, top 12% — it came to 83%, and the
   arm ended in a hard horizontal cut in mid-air over white calendar, 107px
   above the frame's edge. 46% at top 22% comes to 103.8%.

   The desktop capture's own content stops at 15:00, so the hand covers the
   empty afternoon and the Saturday column — the cheapest real estate on the
   page. Note it is ONE weekend column, not two: the phone's left edge lands at
   stage x ~79%, and Sunday runs from 84% to 97.5%.

   THE PHONE'S RED AND THE CALENDAR'S RED MEAN DIFFERENT THINGS, and this rule
   puts them side by side. Farestalden is `#C62828` and the grid paints any
   not-done task in its board colour, so the week behind the hand reads red for
   "ikke udført". The banner inside the hand says `Forfaldne opgaver` and is
   genuinely overdue; the grid's current-time line is red and is not a task at
   all. Nothing in CSS can separate the three. The alt text in site.js's
   getForsideStage() and the copy in tools/shots/compare/build_compare.py are
   what carry the distinction — do not let either drift into calling the grid's
   red "overskredet". */
.stage-forside-hand { right: -2%; top: 22%; }

/* --- Arrow overlay ------------------------------------------------------ */

.stage-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
/* A wider casing stroke UNDER the coloured one. The arrows cross both a white
   calendar grid and a near-black phone bezel; a single stroke disappears
   against one or the other. */
.stage-arrow-casing {
  fill: none;
  stroke: #fff;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.stage-arrow-line {
  fill: none;
  stroke: var(--md-primary);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The head is its own path, not an SVG <marker>: markers paint at the end
   vertex regardless of dashing, so with any draw-on animation the head would
   sit at the destination from the first frame. */
.stage-arrow-head { fill: var(--md-primary); stroke: none; }
.stage-arrow-head-casing { fill: #fff; stroke: #fff; stroke-width: 5; stroke-linejoin: round; opacity: .92; }

/* --- Calibration helper (#calibrate) ------------------------------------ */

.stage-grid { display: none; }
.stage.is-calibrating .stage-grid { display: block; }
.stage.is-calibrating { outline: 2px dashed var(--md-primary); }

/* --- Narrow screens ------------------------------------------------------
   The phones reflow BELOW the screenshot rather than hiding: on a phone, the
   mobile half of the story is the half that matters most. The arrows are
   decorative and drop out, which the caption row already covers in text. */

@media (max-width: 760px) {
  .stage { aspect-ratio: auto; }
  .stage-arrows { display: none; }
  .stage-phones-reflow {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 14px 12px 4px;
  }
  .stage-phone {
    position: static;
    width: 42%;
    max-width: 190px;
  }
}
@media (min-width: 761px) {
  .stage-phones-reflow { display: contents; }
}