/* ShowMe HMS-kurs
   Formsystem: knapper = pill (999px), kort = 18px, felt og listerader = 12px.
   Aksentfargen er turkisen fra logoen og brukes alene gjennom hele siden. */

:root {
  /* Ingen rene svarte eller hvite flater. Alle nøytraler er trukket
     et lite hakk mot petrol, så de hører hjemme sammen med turkisen. */
  --ink: #07222a;
  --ink-2: #0e3440;
  --ink-3: #15464f;
  --paper: #fdfefe;
  --paper-2: #f3f7f8;
  --paper-3: #e9f0f2;
  --line: #dbe5e8;
  --line-strong: #c2d2d7;
  --text: #0b1f26;
  --on-ink: #f4fafb;
  --muted: #55707a;
  /* Brukes på små etiketter og hjelpetekst, så den må holde AA (4.5:1)
     også mot de tonede flatene. */
  --muted-2: #5a7079;
  --brand: #2fb5d2;
  --brand-deep: #0b6e86;
  --brand-dark: #095668;
  --brand-soft: #e2f4f8;
  --danger: #b4423a;
  --ok: #17795f;

  --r-card: 18px;
  --r-field: 12px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(7, 34, 42, 0.06), 0 2px 8px rgba(7, 34, 42, 0.05);
  --shadow-md: 0 2px 6px rgba(7, 34, 42, 0.06), 0 18px 40px -18px rgba(7, 34, 42, 0.28);
  --shadow-lg: 0 4px 12px rgba(7, 34, 42, 0.07), 0 40px 80px -32px rgba(7, 34, 42, 0.38);

  --header-h: 74px;

  /* Alt som kommer inn på skjermen bremser ned mot slutten. Ingen bounce. */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: var(--ease-out-expo);

  /* Varigheter: trykk-respons, tilstandsbytte, layoutbytte, innmarsj. */
  --t-press: 130ms;
  --t-state: 200ms;
  --t-layout: 300ms;
  --t-enter: 620ms;

  --wrap: 1280px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv05' 1;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 28px;
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: var(--on-ink);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand img { height: 42px; width: auto; }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  text-decoration: none;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.site-nav a:hover { background: var(--paper-2); }

.site-nav .nav-login {
  border: 1px solid var(--line-strong);
  margin-left: 8px;
}
.site-nav .nav-login:hover { border-color: var(--brand-deep); color: var(--brand-dark); }

.site-nav .nav-cta {
  background: var(--ink);
  color: var(--on-ink);
  margin-left: 4px;
}
.site-nav .nav-cta:hover { background: var(--ink-3); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}

/* ------------------------------------------------------------------ hero */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100dvh - var(--header-h));
  border-bottom: 1px solid var(--line);
}

.hero__left {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 76px) clamp(28px, 4.4vw, 72px);
  overflow: hidden;
}

.hero__left::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('../assets/img/hero-industri.jpg');
  background-size: cover;
  background-position: 62% 50%;
  opacity: 0.2;
}

.hero__left::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 8% 8%, rgba(47, 181, 210, 0.24), transparent 58%),
    linear-gradient(104deg, rgba(7, 34, 42, 0.96) 42%, rgba(7, 34, 42, 0.74) 100%);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a6dcea;
  border: 1px solid rgba(166, 220, 234, 0.32);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.hero h1 {
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  margin-bottom: 22px;
}

/* Ingen max-width her: det lengste ordet i rotasjonen,
   «arbeidsmiljøutvalg», er bredere enn resten og ble klippet av pillen
   når overskriften var bundet til en fast tegnbredde. */
.hero h1 .line-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.28em;
  max-width: 100%;
}

.rotate { max-width: 100%; }

.hero__sub {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  color: #c3d8de;
  max-width: 44ch;
  line-height: 1.55;
}

.hero__usp {
  list-style: none;
  margin: clamp(26px, 3.4vw, 38px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.hero__usp li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.92rem;
  color: #cfe4e9;
}

.hero__usp svg { flex: none; color: var(--brand); }

.hero__right {
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(26px, 3.4vw, 52px) clamp(20px, 3vw, 52px);
}

/* rotating text (port av React Bits RotatingText) */

.rotate {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  background: var(--brand);
  color: var(--ink);
  border-radius: 14px;
  padding: 0.04em 0.3em 0.1em;
}

.rotate__word { display: inline-flex; overflow: hidden; padding-bottom: 0.06em; }
.rotate__char { display: inline-block; will-change: transform; }
.rotate__space { white-space: pre; }

/* --------------------------------------------------------- booking card */

.booking {
  width: 100%;
  max-width: 560px;
  scroll-margin-top: calc(var(--header-h) + 20px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  max-height: min(760px, calc(100dvh - var(--header-h) - 56px));
  overflow: hidden;
}

.booking__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}

.booking__title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.booking__title span {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 2px;
}

.steps {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.steps__dot {
  width: 22px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--paper-3);
  transition: background 0.3s var(--ease), width 0.3s var(--ease);
}
.steps__dot.is-done { background: var(--brand); }
.steps__dot.is-active { background: var(--brand-deep); width: 34px; }

.booking__body {
  position: relative;
  overflow-y: auto;
  /* Panelet glir inn fra siden. Uten clip ville overflow-y:auto gjort
     overflow-x til auto og gitt en horisontal scrollbar under animasjonen. */
  overflow-x: clip;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  /* Høydemorfen mellom steg er en layoutendring. Containment holder
     rekalkuleringen inne i kortet i stedet for hele siden. */
  contain: layout paint;
}

/* Ingen av panelene skal kunne dra kortet sideveis. */
.booking__body > * { max-width: 100%; }

.panel {
  padding: 20px 22px 22px;
}

.panel[hidden] { display: none; }

/* Stegbyttet skal føles som ett kort som bytter innhold, ikke som en
   overgang man venter på. Under 300 ms.

   Panelet forskyves oppover, aldri sideveis eller nedover. Kroppen er en
   scrollport, og alt som stikker ut mot slutten av en akse blir scrollbart:
   en sidelengs innmarsj gjorde kortet horisontalt scrollbart i de 260 ms
   animasjonen varte. Overskudd mot startkanten teller derimot ikke med i
   scrollområdet, så denne retningen kan ikke skape samme problem.
   Hvilken vei man er på vei, leses av stegprikkene og «Steg N av M». */
.panel--enter,
.panel--back { animation: panel-in 240ms var(--ease-out-quart) both; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.panel__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 12px;
}

/* søkefelt + dropdown */

.search {
  position: relative;
}

.search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-field);
  padding: 0 14px;
  background: var(--paper);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.search__field:focus-within {
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.search__field svg { flex: none; color: var(--muted-2); }

.search__field input {
  flex: 1;
  border: 0;
  outline: none;
  background: none;
  padding: 14px 0;
  font-size: 1rem;
}

.search__field input::placeholder { color: var(--muted-2); }

.search__list {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-field);
  background: var(--paper);
  max-height: 336px;
  overflow-y: auto;
}

.search__list[hidden] { display: none; }

/* Når lista er åpen henger den sammen med søkefeltet som én form.
   Ellers står det en boks oppå en boks inne i kortet. */
.search:has(.search__list:not([hidden])) {
  border-radius: var(--r-field);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.search:has(.search__list:not([hidden])) .search__field {
  border-color: var(--brand-deep);
  border-bottom-color: var(--line);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}

.search:has(.search__list:not([hidden])) .search__list {
  margin-top: 0;
  border-color: var(--brand-deep);
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.search__group {
  padding: 12px 14px 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 11px 14px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.14s var(--ease);
}

.opt:hover,
.opt.is-active { background: var(--brand-soft); }

.opt__main { flex: 1; min-width: 0; }

.opt__name,
.opt__meta { display: block; }

.opt__name {
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.opt__meta {
  font-size: 0.83rem;
  color: var(--muted);
  margin-top: 1px;
}

.opt__price {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.92rem;
}

.opt__empty {
  padding: 18px 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
}

.badge--nett { background: var(--brand-soft); color: var(--brand-dark); }
.badge--oppmote { background: #eceff0; color: var(--ink-3); }
.badge--en { background: #f4efe4; color: #7a5b1b; }
.badge--warn { background: #f7e9e7; color: #96382f; }

.quick {
  margin-top: 20px;
  animation: quick-in 240ms var(--ease-out-quart) both;
}

@keyframes quick-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.quick__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}

.quick__rows { display: flex; flex-direction: column; }
.quick__rows .opt { padding-inline: 10px; }
.quick__rows .opt + .opt { border-top: 1px solid var(--line); border-radius: 0; }

.chip {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), color 0.16s var(--ease);
}

.chip:hover { border-color: var(--brand-deep); color: var(--brand-dark); }
.chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

/* valgt kurs */

.chosen {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: var(--r-field);
  margin-bottom: 18px;
}

.chosen__main { flex: 1; min-width: 0; }
.chosen__name { font-weight: 700; letter-spacing: -0.015em; }
.chosen__meta { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }

.link-btn {
  border: 0;
  background: none;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Egen knapp, ikke en lenke i en setning, så den trenger trykkflate. */
  min-height: 36px;
  padding: 4px 6px;
  margin: -4px -6px;
}
.link-btn:hover { color: var(--ink); }
.link-btn:active { transform: scale(0.97); }

/* datoliste */

.places {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 4px;
  scrollbar-width: thin;
}

.dates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.date-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-field);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.date-opt:hover { border-color: var(--brand); }
.date-opt.is-on {
  border-color: var(--brand-deep);
  background: var(--brand-soft);
}

.date-opt__day {
  flex: none;
  width: 52px;
  text-align: center;
  line-height: 1.1;
}
.date-opt__day b {
  display: block;
  font-size: 1.28rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.date-opt__day span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.date-opt__main { flex: 1; min-width: 0; }
.date-opt__place { font-weight: 600; }
.date-opt__note { font-size: 0.84rem; color: var(--muted); }

/* Haken sitter alltid i markupen og fades inn på det valgte tidspunktet,
   slik at raden ikke hopper i bredden når man velger. */
.date-opt__free {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-deep);
  color: var(--on-ink);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity var(--t-state) var(--ease-out-quart),
    transform var(--t-state) var(--ease-out-quart);
}

@media (hover: hover) and (pointer: fine) {
  .date-opt:hover .date-opt__free { opacity: 0.22; transform: scale(0.92); }
}

.date-opt.is-on .date-opt__free {
  opacity: 1;
  transform: none;
}

.month-head {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 14px 0 2px;
}
.month-head:first-child { margin-top: 0; }

.note {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--brand-soft);
  border-radius: var(--r-field);
  font-size: 0.92rem;
  color: var(--brand-dark);
  line-height: 1.5;
}
.note svg { flex: none; margin-top: 2px; }
.note strong { color: var(--ink); }

/* felter */

.field { display: flex; flex-direction: column; gap: 6px; }

.field > label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

/* Bare direkte barn. Søkefeltet for bedrift ligger inni en .field for å
   få etiketten sin, og skal ikke arve rammen. Ellers får man en boks
   inni boksen. */
.field > input,
.field > textarea {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-field);
  padding: 11px 13px;
  background: var(--paper);
  outline: none;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.field > input:focus,
.field > textarea:focus {
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.field > input[aria-invalid='true'] { border-color: var(--danger); }

.field__error {
  font-size: 0.82rem;
  color: #b4423a;
  min-height: 0;
}

.field__hint {
  font-size: 0.82rem;
  color: var(--muted-2);
}

/* valgt bedrift fra Enhetsregisteret */

.picked {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1.5px solid var(--brand);
  background: var(--brand-soft);
  border-radius: var(--r-field);
  animation: picked-in 0.34s var(--ease) both;
}

@keyframes picked-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.picked__icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--paper);
  color: var(--brand-dark);
  display: grid;
  place-items: center;
}

.picked__main { flex: 1; min-width: 0; }
.picked__name { display: block; font-weight: 600; letter-spacing: -0.01em; }
.picked__meta {
  display: block;
  font-size: 0.84rem;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}

/* laster fra Enhetsregisteret */

.skeleton-list { padding: 8px 14px 12px; }

.skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 0;
}
.skeleton-row + .skeleton-row { border-top: 1px solid var(--line); }

.skeleton-bar {
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--paper-3) 25%, var(--paper-2) 37%, var(--paper-3) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-row .skeleton-bar:last-child { height: 8px; opacity: 0.7; }

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.stack { display: flex; flex-direction: column; gap: 14px; }

.attendee {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  animation: row-in 0.32s var(--ease) both;
}

@keyframes row-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.attendee__remove {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  border-radius: var(--r-field);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--muted);
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.attendee__remove:hover { border-color: #b4423a; color: #b4423a; }

.add-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--line-strong);
  background: none;
  border-radius: var(--r-field);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--brand-dark);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.add-row:hover { border-color: var(--brand-deep); background: var(--brand-soft); }

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
}

.check input {
  margin: 2px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--brand-deep);
  flex: none;
}

.check a { color: var(--brand-dark); }

/* prislinje */

.booking__bar {
  border-top: 1px solid var(--line);
  padding: 14px 22px 16px;
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

.sum { flex: 1; min-width: 0; }

.sum__label {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sum__value {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sum__value small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: var(--r-pill);
  padding: 13px 24px;
  font-weight: 600;
  font-size: 0.96rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-state) var(--ease-out-quart),
    transform var(--t-press) var(--ease-out-quart),
    color var(--t-state) var(--ease-out-quart),
    border-color var(--t-state) var(--ease-out-quart);
}

/* Alt som kan trykkes gir etter under fingeren. */
.btn:active,
.chip:active,
.add-row:active,
.nav-toggle:active { transform: scale(0.97); }

.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { background: var(--ink-3); }
.btn--primary:disabled {
  background: var(--paper-3);
  color: var(--muted-2);
  cursor: not-allowed;
}

.btn--brand { background: var(--brand); color: var(--ink); }
.btn--brand:hover { background: #4cc6e0; }

.btn--ghost {
  background: none;
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--back {
  background: none;
  border: 0;
  color: var(--muted);
  padding: 13px 6px;
  font-weight: 600;
  cursor: pointer;
}
.btn--back:hover { color: var(--ink); }

/* kvittering */

.receipt { text-align: left; }

.receipt__mark {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  animation: pop 0.5s var(--ease) both;
}

/* Kvitteringen ses én gang per påmelding, så den tåler et lite
   overskudd. Starter fra 0.86, ikke fra ingenting. */
@keyframes pop {
  0% { transform: scale(0.86); opacity: 0; }
  55% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); }
}

.receipt h3 { font-size: 1.5rem; margin-bottom: 8px; }

.receipt__lead { color: var(--muted); margin-bottom: 20px; }

.receipt__box {
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  overflow: hidden;
  margin-bottom: 18px;
}

.receipt__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 15px;
  font-size: 0.92rem;
}
.receipt__row + .receipt__row { border-top: 1px solid var(--line); }
.receipt__row dt { color: var(--muted); margin: 0; }
.receipt__row dd { margin: 0; font-weight: 600; text-align: right; }
.receipt__row--total { background: var(--paper-2); font-size: 1rem; }

.timeline {
  list-style: none;
  margin: 0 0 20px;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--paper-3);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.timeline li { position: relative; font-size: 0.92rem; color: var(--muted); }

.timeline li::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper-3);
  border: 2px solid var(--paper);
}
.timeline li:first-child::before { background: var(--brand); }
.timeline li b { color: var(--text); display: block; font-weight: 600; }

.code-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-field);
  margin-bottom: 18px;
}
.code-line span { font-size: 0.85rem; color: var(--muted); }
.code-line b {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------ referanser */

.proof {
  padding: clamp(44px, 5vw, 64px) 0 clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--line);
}

.proof__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: 34px;
}

.proof__title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stats li { display: flex; align-items: baseline; gap: 9px; }

.stats b {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stats span { font-size: 0.9rem; color: var(--muted); }

.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 68px;
  align-items: center;
  height: 64px;
  animation: marquee 46s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee img {
  height: 40px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.66;
  transition: filter 0.24s var(--ease), opacity 0.24s var(--ease);
}

.marquee img.is-tall { height: 60px; }

.marquee img:hover { filter: none; opacity: 1; }

/* ------------------------------------------------------------ vertikaler */

.section { padding: clamp(64px, 7.5vw, 108px) 0; }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }

.section__head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 52px); }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: 14px;
}

.section h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.85rem);
  margin-bottom: 16px;
}

.section__lead {
  color: var(--muted);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  max-width: 58ch;
}

.tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.track {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: box-shadow 0.28s var(--ease), transform 0.28s var(--ease);
}

.track__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-3);
}

.track__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

/* Hover-effekter som flytter noe holdes unna touch, der de ellers
   ville utløst seg selv på det første trykket. */
@media (hover: hover) and (pointer: fine) {
  .track:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .track:hover .track__media img { transform: scale(1.04); }
}

.track__body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
}

.track h3 { font-size: 1.45rem; }

.track__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.track__points li {
  display: flex;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--muted);
}
.track__points svg { flex: none; margin-top: 4px; color: var(--brand-deep); }

.track__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 6px;
}

.track__price {
  font-size: 0.9rem;
  color: var(--muted);
}
.track__price b {
  display: block;
  font-size: 1.3rem;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ kursliste
   To grupper som speiler de to sporene, ikke ti like bokser. Radene har
   ingen egen ramme før pekeren treffer dem, så lista leses som en meny. */

.courses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.course-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 4px;
}

.course-group__head h3 {
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}

.course-group__head p {
  font-size: 0.9rem;
  color: var(--muted);
}

.course-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.course-group li + li { border-top: 1px solid var(--line); }

/* Raden har to mål: lenken dekker hele flaten via et pseudoelement,
   og påmeldingsknappen ligger over den. */
.course-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 16px;
  padding: 17px 14px 17px 12px;
  margin-inline: -12px;
  border-radius: var(--r-field);
  transition: background var(--t-state) var(--ease-out-quart),
    box-shadow var(--t-state) var(--ease-out-quart);
}

.course-row__link {
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.course-row__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.course-row__name {
  display: block;
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.015em;
}

.course-row__meta {
  display: block;
  font-size: 0.87rem;
  color: var(--muted);
  margin-top: 2px;
}

.course-row__price {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.course-row__price small {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0;
}

.course-row__book {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--brand-dark);
  border-radius: var(--r-pill);
  padding: 8px 15px;
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-state) var(--ease-out-quart),
    border-color var(--t-state) var(--ease-out-quart),
    color var(--t-state) var(--ease-out-quart),
    transform var(--t-press) var(--ease-out-quart);
}

.course-row__book svg { transition: transform var(--t-state) var(--ease-out-quart); }
.course-row__book:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .course-row:hover {
    background: var(--paper);
    box-shadow: var(--shadow-sm);
  }
  .course-row__book:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
  }
  .course-row__book:hover svg { transform: translateX(3px); }
}

.course-row:focus-within {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------- undersider: topp og smuler */

.page-head {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: clamp(32px, 4vw, 52px) 0 clamp(36px, 4.5vw, 60px);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span[aria-hidden] { color: var(--line-strong); }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }

.page-head h1 {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  max-width: 20ch;
}

.page-head__lead {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
}

.page-head__facts {
  list-style: none;
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}

.page-head__facts li { display: flex; align-items: baseline; gap: 9px; }
.page-head__facts b { font-size: 1.5rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.page-head__facts span { font-size: 0.9rem; color: var(--muted); }

.course-head__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* --------------------------------------------------------- kursoversikt */

.course-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.course-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 24px 24px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-state) var(--ease-out-quart),
    box-shadow var(--t-state) var(--ease-out-quart),
    transform var(--t-state) var(--ease-out-quart);
}

.course-tile__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.course-tile__duration { font-size: 0.85rem; color: var(--muted); }

.course-tile__name {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.course-tile__tagline {
  color: var(--muted);
  font-size: 0.94rem;
  flex: 1;
}

.course-tile__foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.course-tile__price {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.course-tile__price small { font-weight: 500; color: var(--muted); letter-spacing: 0; }

.course-tile__when { font-size: 0.86rem; color: var(--brand-dark); }

.course-tile__go {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity var(--t-state) var(--ease-out-quart),
    transform var(--t-state) var(--ease-out-quart);
}

.course-tile:focus-visible .course-tile__go { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .course-tile:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .course-tile:hover .course-tile__go { opacity: 1; transform: none; }
}

@media (hover: none) {
  .course-tile__go { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- kursdetalj */

.course-detail { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 6vw, 88px); }

.course-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}

.course-detail__intro {
  font-size: clamp(1.08rem, 1.4vw, 1.24rem);
  line-height: 1.55;
  max-width: 62ch;
}

.course-block { margin-top: clamp(32px, 4vw, 48px); }

.course-block h2 {
  font-size: 1.22rem;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}

.topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 28px;
}

.topic-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.97rem;
}
.topic-list svg { flex: none; margin-top: 4px; color: var(--brand-deep); }

.course-detail__outcome {
  font-size: 1.05rem;
  color: var(--text);
  max-width: 62ch;
  padding: 18px 20px;
  background: var(--brand-soft);
  border-radius: var(--r-field);
}

.course-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px 32px;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.course-facts h3 {
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}

.course-facts p { color: var(--muted); font-size: 0.95rem; }
.course-facts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.course-facts li { color: var(--muted); font-size: 0.95rem; }

.date-preview { list-style: none; margin: 0; padding: 0; }

.date-preview li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  font-size: 0.96rem;
}
.date-preview li + li { border-top: 1px solid var(--line); }
.date-preview span { color: var(--muted); }
.date-preview b { font-weight: 600; }

.date-preview__more { margin-top: 14px; font-size: 0.88rem; color: var(--muted); }

.course-detail__side {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.course-detail__side .booking { max-width: none; }

/* Pris og påmeldingssnarvei i sidetoppen, så de er synlige med en gang
   også når kortet har havnet under innholdet på smale skjermer. */
.course-head__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: clamp(22px, 3vw, 30px);
  padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid var(--line-strong);
}

.course-head__price span {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 2px;
}

.course-head__price b {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.course-head__price b small {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

/* På brede skjermer står påmeldingskortet allerede ved siden av, og da
   er snarveien bare støy. */
.course-head__cta { display: none; }

@media (max-width: 1080px) {
  .course-head__cta { display: inline-flex; }
}

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 3.5vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-2);
}

.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------- kontakt */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.contact-side { display: flex; flex-direction: column; gap: 18px; }

.contact-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  padding: clamp(26px, 3.4vw, 40px);
}

.contact-form h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }

.contact-form__lead {
  color: var(--muted);
  margin: 10px 0 26px;
  max-width: 54ch;
}

.subject { border: 0; margin: 0; padding: 0; }

.subject legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  padding: 0;
  margin-bottom: 8px;
}

.subject__options { display: flex; flex-wrap: wrap; gap: 8px; }

.subject__option {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 8px 15px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color var(--t-state) var(--ease-out-quart),
    background var(--t-state) var(--ease-out-quart),
    color var(--t-state) var(--ease-out-quart);
}

.subject__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.subject__option:hover { border-color: var(--brand-deep); }
.subject__option:has(input:focus-visible) { outline: 2px solid var(--brand-deep); outline-offset: 2px; }

.subject__option.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.contact-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.contact-form__foot p { color: var(--muted); font-size: 0.92rem; }
.contact-form__foot a { color: var(--brand-dark); }

.contact-form--sent { animation: panel-in 320ms var(--ease-out-quart) both; }

/* ------------------------------------------------------- bedriftsinternt */

.inhouse {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--paper);
}

.inhouse__media { position: relative; min-height: 400px; }
.inhouse__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.inhouse__body {
  padding: clamp(30px, 4vw, 54px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.inhouse__body h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tags li {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 0.87rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------- why */

.why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

.why__quote {
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.why__quote em {
  font-style: normal;
  color: var(--brand-dark);
}

.why__source {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--muted);
}

.why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.why__list li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.why__list li:first-child { padding-top: 0; }
.why__list li:last-child { border-bottom: 0; padding-bottom: 0; }

.why__list h3 { font-size: 1.08rem; margin-bottom: 6px; }
.why__list p { color: var(--muted); font-size: 0.95rem; }

/* ------------------------------------------------------------------- faq */

.faq-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  font-weight: 600;
  position: relative;
  letter-spacing: -0.01em;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.24s var(--ease);
}

.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }

.faq details p {
  color: var(--muted);
  padding: 0 20px 18px 0;
  font-size: 0.96rem;
  animation: fade-in 0.3s var(--ease) both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 30px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-card h3 { font-size: 1.3rem; }

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 600;
  /* Trykkflaten skal være minst 44px høy på touch. */
  min-height: 44px;
  padding: 4px 0;
  margin: -4px 0;
}
.contact-list a:hover { color: var(--brand-dark); }
.contact-list svg { color: var(--brand-deep); flex: none; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--ink);
  color: #c3d8de;
  padding: clamp(48px, 6vw, 76px) 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer h4 {
  color: var(--on-ink);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer a { text-decoration: none; font-size: 0.94rem; }
.site-footer a:hover { color: var(--on-ink); }

.footer-logo {
  height: 44px;
  width: auto;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.footer-about { font-size: 0.94rem; max-width: 34ch; line-height: 1.6; }

.footer-bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  font-size: 0.87rem;
  color: #8fa8b0;
}

.footer-bottom a { color: #8fa8b0; }
.credit a { color: #a6dcea; text-decoration: none; font-weight: 600; }
.credit a:hover { color: var(--on-ink); }

/* -------------------------------------------------------------- reveal */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-enter) var(--ease-out-expo),
    transform var(--t-enter) var(--ease-out-expo);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- portal */

.portal-main {
  min-height: calc(100dvh - var(--header-h));
  background: var(--paper-2);
  padding: clamp(36px, 5vw, 72px) 0 80px;
}

.login-card {
  max-width: 460px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-card h1 { font-size: 1.6rem; }
.login-card p { color: var(--muted); font-size: 0.95rem; }

.portal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.portal-head h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.portal-head p { color: var(--muted); margin-top: 8px; }

/* ------------------------------------------------------------ faner */

.portal-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}

.portal-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 12px 4px 14px;
  margin-right: 22px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-state) var(--ease-out-quart);
}

.portal-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-state) var(--ease-out-quart);
}

.portal-tab:hover { color: var(--text); }
.portal-tab.is-on { color: var(--text); }
.portal-tab.is-on::after { transform: scaleX(1); }

.portal-tab span {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--paper-3);
  color: var(--muted);
}
.portal-tab.is-on span { background: var(--brand-soft); color: var(--brand-dark); }

.portal-body { animation: panel-in 240ms var(--ease-out-quart) both; }

/* ---------------------------------------------------- mine kurs-lista */

.enrol-group + .enrol-group { margin-top: 34px; }

.enrol-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 12px;
}

.enrol-group__head h2 { font-size: 1.1rem; }
.enrol-group__head p { color: var(--muted); font-size: 0.9rem; }

.enrol-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.enrol {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color var(--t-state) var(--ease-out-quart),
    box-shadow var(--t-state) var(--ease-out-quart);
}

@media (hover: hover) and (pointer: fine) {
  .enrol:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
}

.enrol__main { flex: 1; min-width: 0; }
.enrol__main h3 { font-size: 1.12rem; margin: 6px 0 4px; letter-spacing: -0.02em; }
.enrol__main p { color: var(--muted); font-size: 0.9rem; }

.enrol__mark {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--muted);
}
.enrol__mark.status--fullfort { background: var(--brand-soft); color: var(--brand-dark); }
.enrol__mark.status--kommende { background: var(--paper-3); color: var(--ink-3); }

.enrol__actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.enrol__actions .btn { padding: 10px 18px; font-size: 0.9rem; }

.status {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
}

.status--pagar { background: var(--brand-soft); color: var(--brand-dark); }
.status--fullfort { background: #e3f1eb; color: #14614c; }
.status--kommende { background: #eceff0; color: var(--ink-3); }
.status--behandles { background: #f4efe4; color: #7a5b1b; }

/* -------------------------------------------------------- fakturaer */

.invoice-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  padding: 24px 26px;
  border-radius: var(--r-card);
  background: var(--ink);
  color: var(--on-ink);
}

.invoice-summary.is-overdue { background: #5c2320; }

.invoice-summary__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #a6dcea;
}

.invoice-summary__value {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.invoice-summary p { color: #c3d8de; font-size: 0.94rem; max-width: 44ch; }

.invoice-list { list-style: none; margin: 20px 0 0; padding: 0; }

.invoice {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 6px 18px;
  padding: 15px 0;
}
.invoice + .invoice { border-top: 1px solid var(--line); }

.invoice__number {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.84rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.invoice__main { min-width: 0; }
.invoice__course { display: block; font-weight: 600; }
.invoice__meta { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 1px; }

.invoice__amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.status--betalt { background: #e3f1eb; color: #14614c; }
.status--ubetalt { background: var(--paper-3); color: var(--ink-3); }
.status--forfalt { background: #f7e9e7; color: #96382f; }

.portal-tab__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
}

/* Fem kolonner får ikke plass på nettbrett. Da brytes raden i tre linjer:
   fakturanummer, så kurs og beløp, så status og knapp. */
@media (max-width: 900px) {
  .invoice {
    grid-template-columns: 1fr auto;
    row-gap: 12px;
    padding: 18px 0;
  }
  .invoice__number { grid-column: 1 / -1; }
  .invoice__amount { justify-self: end; }
  .invoice .status { justify-self: start; }
  .invoice .doc__action { justify-self: end; }
}

/* ------------------------------------------------------ dokumentlista */

.doc-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.doc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}
.doc + .doc { border-top: 1px solid var(--line); }

.doc__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--brand-dark);
}

.doc__main { flex: 1; min-width: 0; }
.doc__name { display: block; font-weight: 600; }
.doc__meta { display: block; font-size: 0.86rem; color: var(--muted); margin-top: 1px; }

.doc__action {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  border-radius: var(--r-pill);
  padding: 9px 17px;
  font-size: 0.89rem;
  font-weight: 600;
  color: var(--brand-dark);
  cursor: pointer;
  transition: background var(--t-state) var(--ease-out-quart),
    border-color var(--t-state) var(--ease-out-quart),
    color var(--t-state) var(--ease-out-quart),
    transform var(--t-press) var(--ease-out-quart);
}

.doc__action:active { transform: scale(0.97); }

.people { list-style: none; margin: 0; padding: 0; }

.person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.person + .person { border-top: 1px solid var(--line); }

.person__main { flex: 1; min-width: 0; }
.person__name { display: block; font-weight: 600; font-size: 0.95rem; }
.person__mail {
  display: block;
  font-size: 0.84rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.person .doc__action { padding: 7px 14px; font-size: 0.84rem; }

/* --------------------------------------------- kursbevis og bekreftelse
   Samme ark brukes både i overlegget på skjerm og i utskriftsrammen, så
   det som vises er nøyaktig det som havner i PDF-en. */

.doc-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(7, 34, 42, 0.62);
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  animation: fade-in 200ms var(--ease-out-quart) both;
}

.doc-overlay__panel {
  width: min(1040px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: doc-in 260ms var(--ease-out-quart) both;
}

@keyframes doc-in {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to { opacity: 1; transform: none; }
}

.doc-overlay__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.doc-overlay__bar p { font-weight: 600; }
.doc-overlay__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-overlay__actions .btn { padding: 10px 18px; font-size: 0.9rem; }

.doc-overlay__scroll {
  overflow: auto;
  padding: clamp(14px, 2.5vw, 26px);
}

.sheet {
  max-width: 940px;
  margin: 0 auto;
  aspect-ratio: 297 / 210;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(26px, 4vw, 46px) clamp(28px, 4.6vw, 54px);
  display: flex;
  flex-direction: column;
  color: var(--text);
}

.sheet__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sheet__top img { height: 42px; width: auto; }

.sheet__code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: right;
}

.sheet h1 {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin: clamp(24px, 4vw, 40px) 0 0;
}

.sheet__name {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 12px;
  line-height: 1.1;
}
.sheet__name--small { font-size: clamp(1.3rem, 2.4vw, 1.85rem); }

.sheet__body {
  margin-top: 16px;
  font-size: clamp(0.95rem, 1.3vw, 1.06rem);
  line-height: 1.55;
  max-width: 62ch;
  color: var(--muted);
}
.sheet__body strong { color: var(--text); }
.sheet__body--small { font-size: 0.94rem; }

.sheet__rule { height: 3px; width: 72px; background: var(--brand); margin-top: 24px; }

.sheet__table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.94rem; }
.sheet__table th,
.sheet__table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sheet__table th {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.sheet__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet__table tfoot td { font-weight: 700; border-bottom: 0; }

.sheet__facts {
  margin: auto 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px 32px;
}
.sheet__facts dt {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.sheet__facts dd { margin: 0; font-weight: 600; font-size: 0.94rem; }

@media (max-width: 700px) {
  .sheet { aspect-ratio: auto; }
  .doc-overlay__actions { width: 100%; }
  .doc-overlay__actions .btn { flex: 1; }
}

@media (hover: hover) and (pointer: fine) {
  .doc__action:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
}

.portal-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: start;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px;
}

.card + .card { margin-top: 20px; }
.card h2 { font-size: 1.2rem; margin-bottom: 6px; }
.card h3 { font-size: 1.05rem; }

.course-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.ring { flex: none; }
.ring circle { fill: none; stroke-width: 7; }
.ring__bg { stroke: var(--paper-3); }
.ring__fg {
  stroke: var(--brand);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s var(--ease);
}
.ring text {
  font-size: 17px;
  font-weight: 700;
  fill: var(--text);
  text-anchor: middle;
  dominant-baseline: middle;
}

.modules { list-style: none; margin: 0; padding: 0; }

.module {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}
.module + .module { border-top: 1px solid var(--line); }

.module__mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--paper-3);
  color: var(--muted-2);
  font-size: 0.78rem;
  font-weight: 700;
}
.module.is-done .module__mark { background: var(--brand-soft); color: var(--brand-dark); }
.module.is-now .module__mark { background: var(--ink); color: var(--on-ink); }

.module__name { flex: 1; font-weight: 500; }
.module.is-done .module__name { color: var(--muted); }
.module__meta { font-size: 0.84rem; color: var(--muted); flex: none; }

.access-bar {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--paper-3);
  overflow: hidden;
  margin: 12px 0 8px;
}
.access-bar span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }

.meta-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.meta-list li { display: flex; justify-content: space-between; gap: 16px; font-size: 0.92rem; }
.meta-list dt, .meta-list span:first-child { color: var(--muted); }
.meta-list b { font-weight: 600; }

.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__left { padding-block: clamp(36px, 6vw, 64px); }
  .hero__right { padding-block: 28px; }
  .booking { max-width: 620px; max-height: none; }
  .booking__body { max-height: none; }
  .why, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .course-detail__grid { grid-template-columns: minmax(0, 1fr); }
  .course-detail__side { position: static; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .inhouse { grid-template-columns: minmax(0, 1fr); }
  .inhouse__media { min-height: 280px; }
  .portal-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 20px;
    gap: 2px;
    box-shadow: var(--shadow-md);
  }
  .site-nav[hidden] { display: none; }
  .site-nav a { padding: 13px 14px; }
  .site-nav .nav-login, .site-nav .nav-cta { margin-left: 0; margin-top: 8px; text-align: center; }
  .nav-toggle { display: block; }
  .tracks, .courses { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .wrap { padding-inline: 20px; }

  /* På mobil skal toppen av påmeldingskortet være synlig uten å scrolle,
     så heroen komprimeres og fordelene legges på to kompakte linjer. */
  .hero__left { padding-block: 28px 30px; }
  .hero__eyebrow { margin-bottom: 16px; padding: 6px 13px; font-size: 0.72rem; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); margin-bottom: 14px; }
  .hero__sub { font-size: 0.98rem; }
  .hero__usp { margin-top: 20px; gap: 8px 18px; }
  .hero__usp li { font-size: 0.85rem; }
  .hero__right { padding-block: 22px 30px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }

  /* Kursnavnet får hele bredden, merkelapp og pris legger seg under. */
  .opt { flex-wrap: wrap; row-gap: 6px; }
  .opt__main { flex: 1 1 100%; }
  .opt__price { margin-left: auto; }

  .attendee { grid-template-columns: 1fr auto; }
  .attendee .field:nth-child(2) { grid-column: 1 / -1; }
  .booking__head { padding: 16px 18px 12px; }
  .panel { padding: 18px 18px 20px; }
  .booking__bar { padding: 13px 18px 15px; flex-wrap: wrap; }
  .booking__bar .btn { flex: 1; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { gap: 10px 26px; }
  .stats b { font-size: 1.25rem; }

  /* Kursraden i Min side stables, med knappene på egen linje. */
  .enrol { flex-wrap: wrap; gap: 14px 16px; }
  .enrol__main { flex: 1 1 60%; }
  .enrol__actions { flex: 1 1 100%; }
  .enrol__actions .btn { flex: 1; }

  .doc { flex-wrap: wrap; }
  .doc__main { flex: 1 1 60%; }
  .doc__action { flex: 1 1 100%; justify-content: center; }

  .portal-tab { margin-right: 14px; font-size: 0.94rem; }

  /* Prisen får egen linje under navnet, knappen blir stående til høyre. */
  .course-row {
    grid-template-columns: 1fr auto;
    row-gap: 10px;
  }
  .course-row__link { grid-column: 1 / -1; }
  .course-row__price { text-align: left; }
  .course-row__price small { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}