/* Unitrice — forside. Designgrunnlag: retning 2a (web/Unitrice designgrunnlag.zip). */

:root {
  --navy: #0f172a;
  --accent: #28864b;
  --accent-soft: #4ade80;
  --accent-deep: #1d6b3c;
  --red: #dc2626;
  --canvas: #f8fafc;
  --line: #e2e8f0;
  --text: #475569;
  --text-soft: #64748b;
  --text-faint: #64748b;
  --live: #28864b;
  --building: #b45309;

  --wrap: 1280px;
  --pad-x: clamp(20px, 4.4vw, 56px);
  --pad-y: clamp(52px, 6.4vw, 82px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--canvas);
  color: var(--navy);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); }

/* ── Typografi ──────────────────────────────────────────── */

.kicker {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.kicker--red { color: var(--red); }
/* Større kicker for paret Problemet / Løsningen: leseren skal se at det er PROBLEMET som vises. */
.kicker--stor { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .1em; }
.kicker--orange { color: #c2410c; }

h1, h2, h3, .cond {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .98;
}

h1 { font-size: clamp(48px, 8vw, 104px); line-height: .9; max-width: 15ch; }
h2 { font-size: clamp(34px, 4.6vw, 56px); }
h3 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1; }

.lead { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--text); }
.body { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.55; color: var(--text); }
.small { font-size: 15px; line-height: 1.5; color: var(--text-soft); }

/* ── Knapper ────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 19px);
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-deep); }
.btn--outline { background: #fff; border: 2px solid var(--navy); color: var(--navy); padding: 13px 28px; }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--sm { font-size: 17px; padding: 11px 22px; }

/* ── Merkelapper ────────────────────────────────────────── */

.tag {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag--live { background: var(--live); }
.tag--building { background: var(--building); }
.tag--ghost { background: none; border: 1px solid rgba(255,255,255,.3); color: #cbd5e1; }

/* ── Nav ────────────────────────────────────────────────── */

.nav {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--pad-x);
  max-width: var(--wrap);
  margin: 0 auto;
}
.nav__logo { height: 32px; width: auto; display: block; }
.nav__links {
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #334155;
}
.nav__links a:hover { color: var(--accent); }
.nav__login { color: var(--accent-deep); }

/* ── Hero ───────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff, var(--canvas));
  padding: clamp(56px, 7vw, 90px) 0 var(--pad-y);
}
.hero__blob {
  position: absolute;
  border-radius: 48px;
  pointer-events: none;
}
.hero__blob--accent {
  top: -80px; right: -60px;
  width: 460px; height: 460px;
  background: var(--accent); opacity: .07;
  transform: rotate(16deg);
}
.hero__blob--alt {
  top: 120px; right: 180px;
  width: 180px; height: 180px;
  background: var(--navy); opacity: .06;
  transform: rotate(-12deg);
  border-radius: 32px;
}
.hero > .wrap { position: relative; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: var(--accent-deep);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
}
.hero h1 { margin: 22px 0 0; }
.hero h1 .accent-1 { color: var(--accent); }
.hero h1 .accent-2 { color: var(--accent-deep); }
.hero .lead { max-width: 56ch; margin-top: 24px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: clamp(36px, 4.5vw, 58px);
}
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
}
.stat__value {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 31px;
  text-transform: uppercase;
  color: var(--accent);
}
.stat__label { color: var(--text-soft); font-size: 15px; }

/* ── Generiske seksjoner ────────────────────────────────── */

.section { padding: var(--pad-y) 0; }
.section--white { background: #fff; border-top: 1px solid var(--line); }
.section--canvas { background: var(--canvas); border-top: 1px solid var(--line); }
/* Mørk flate, ikke grønn: hvit tekst på green-600 gir bare ~3:1 kontrast.
   I cockpit er grønn en knappe-/aksentfarge, ikke en stor bakgrunnsflate. */
.section--dark { background: var(--navy); color: #fff; }
.section--center { text-align: center; }
.section--center h2 { margin: 12px auto 0; max-width: 22ch; }
.section--center .body { max-width: 72ch; margin: 16px auto 0; }

.section__head { margin-bottom: 38px; }
.section__head h2 { margin-top: 12px; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.4vw, 56px);
  align-items: center;
}
.split--top { align-items: start; }
.split--wide-left { grid-template-columns: 1.1fr 1fr; }
.split--narrow-left { grid-template-columns: .85fr 1.15fr; }

/* ── Problem-flisene ────────────────────────────────────── */

.strike-list { display: flex; flex-wrap: wrap; gap: 12px; }
.strike-list span {
  background: var(--canvas);
  border: 1px solid var(--line);
  color: #64748b;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: line-through;
}

/* ── Løsning: tre kort ──────────────────────────────────── */

.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 44px;
  text-align: left;
}
.trio__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
}
.trio__card--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.trio__card h3 { font-size: 25px; }
.trio__card--navy h3 { color: var(--accent-soft); }
.trio__card p { font-size: 16px; line-height: 1.5; margin-top: 8px; color: var(--text-soft); }
.trio__card--navy p { color: #cbd5e1; }

/* ── Modulkort ──────────────────────────────────────────── */

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 18px;
}
.module {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.module:hover { border-color: var(--accent); box-shadow: 0 14px 30px rgba(22,163,74,.14); }
.module__thumb {
  height: 118px;
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 11px, #e2e8f0 11px, #e2e8f0 22px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
}
.module__slug { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-faint); }
.module__body { padding: 20px; }
.module__body h3 { font-size: 23px; }
.module__body p { color: var(--text-soft); font-size: 14px; line-height: 1.5; margin-top: 6px; }

/* ── Lagverktøy-panel ───────────────────────────────────── */

.panel-team {
  margin-top: 34px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 18px;
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3.2vw, 38px);
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(24px, 3vw, 34px);
  align-items: center;
}
.panel-team > div > .small { color: var(--text); }
.panel-team__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.panel-team__card { background: #fff; border: 1px solid #fed7aa; border-radius: 14px; padding: 24px;
                    display: flex; flex-direction: column; align-items: flex-start; }
.panel-team__card .cond { font-size: 25px; }
.panel-team__card p { margin-top: 7px; color: var(--text); flex: 1; }
.panel-team__card .btn { margin-top: 16px; }
.panel-team__ingress { margin-top: 12px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; font-weight: 600; color: var(--navy); }
.panel-team__lenke { display: inline-block; margin-top: 12px; font-weight: 700; color: #c2410c; text-decoration: underline; text-underline-offset: 3px; }
.panel-team__lenke:hover { color: #9a3412; }
.panel-team .small .panel-team__lenke { margin-top: 0; }
#lag { scroll-margin-top: 24px; }

/* Stripe i helten: lag og foreninger kan starte selv. Samme oransje som panelet den peker til. */
.lagstripe {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin-top: 22px; padding: 10px 16px 10px 10px;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 14px;
  color: var(--navy); font-weight: 600; line-height: 1.35;
  transition: border-color .18s, box-shadow .18s;
}
.lagstripe:hover { border-color: #c2410c; box-shadow: 0 8px 20px rgba(194, 65, 12, .12); }
.lagstripe__merke {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: #c2410c; border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.lagstripe__pil { color: #c2410c; font-weight: 800; }
.module__lenke { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--accent); }
.module__lenke:hover { color: var(--accent-deep); text-decoration: underline; }

/* ── Spotlights (Plan / Kiosk) ──────────────────────────── */

.spotlight {
  margin-top: 20px;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.spotlight--plan { background: var(--canvas); border: 1px solid var(--line); margin-top: 34px; }
.spotlight--kiosk { background: var(--navy); color: #fff; }
.spotlight__text { padding: clamp(28px, 3.2vw, 38px) clamp(28px, 3.4vw, 40px); }
.spotlight__labels { display: flex; align-items: center; gap: 10px; }
.spotlight__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 11px;
  border-radius: 6px;
}
.spotlight__name--navy { background: var(--navy); }
.spotlight__name--red { background: var(--accent); }
.spotlight h3 { margin-top: 14px; }
.spotlight p { font-size: 17px; line-height: 1.5; margin-top: 12px; color: var(--text); }
.spotlight--kiosk p { color: #cbd5e1; }
.spotlight__thumb {
  background: repeating-linear-gradient(45deg, #e2e8f0, #e2e8f0 13px, #cbd5e1 13px, #cbd5e1 26px);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  min-height: 300px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #64748b;
}
.spotlight__thumb--dark {
  background: repeating-linear-gradient(45deg, #1e293b, #1e293b 13px, #334155 13px, #334155 26px);
  color: #cbd5e1;
}

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 22px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
  color: #334155;
  list-style: none;
}
.checks li::before { content: '✓ '; }
.checks--light { color: #cbd5e1; }

/* ── Integrasjoner (marquee) ────────────────────────────── */

.marquee-section {
  padding: 50px 0;
  background: var(--canvas);
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.marquee-section__label {
  text-align: center;
  color: var(--text-soft);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.marquee {
  display: flex;
  width: max-content;
  gap: 64px;
  padding-left: 64px;
  animation: marquee 26s linear infinite;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  text-transform: uppercase;
  color: var(--navy);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Pris ───────────────────────────────────────────────── */

.price-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 18px;
  align-items: stretch;
}
.price {
  border-radius: 18px;
  padding: clamp(28px, 3.2vw, 38px) clamp(28px, 3.4vw, 40px);
}
.price--free { background: #f0fdf4; border: 1px solid #bbf7d0; }
.price--full { background: var(--navy); color: #fff; }
.price__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 28px; text-transform: uppercase; }
.price__amount {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 6vw, 72px);
  line-height: .95;
  color: var(--accent);
  margin-top: 8px;
}
.price--full .price__amount { color: var(--accent-soft); display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.price__unit { font-weight: 700; font-size: 25px; color: #cbd5e1; padding-bottom: 8px; }
.price__desc { font-size: 17px; line-height: 1.55; margin-top: 12px; color: #334155; }
.price--full .price__desc { color: #cbd5e1; }
.price__rule { height: 1px; background: #bbf7d0; margin: 24px 0; border: 0; }
.price--full .price__rule { background: rgba(255,255,255,.16); }
.price__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 11px 20px;
  color: #334155;
  font-size: 16px;
  list-style: none;
}
.price--full .price__features { color: #e2e8f0; }
.price__features li::before { content: '✓ '; }
.price__note { color: #cbd5e1; font-size: 14px; line-height: 1.5; margin-top: 22px; }
.price .btn { margin-top: 26px; }

/* ── Automatikk-flyt ────────────────────────────────────── */

.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 12px;
}
.flow__step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  position: relative;
}
.flow__n {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--accent-deep);
}
.flow__step h3 { font-size: 22px; margin-top: 8px; color: var(--accent-deep); }
.flow__step p { color: var(--text); font-size: 16px; line-height: 1.55; margin-top: 8px; }

.cards-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px;
}
.card h3 { font-size: 22px; color: var(--accent-deep); }
.card p { color: var(--text); font-size: 16px; line-height: 1.55; margin-top: 10px; }

/* ── Personvern ─────────────────────────────────────────── */

.privacy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.privacy-card { background: var(--canvas); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.privacy-card h3 { font-size: 20px; }
.privacy-card p { color: var(--text); font-size: 15px; line-height: 1.5; margin-top: 6px; }

/* ── Pilot ──────────────────────────────────────────────── */

.pilot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pilot { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px; }
.pilot--now { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }
.pilot__year { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(52px, 5.5vw, 68px); line-height: 1; }
.pilot__year--past { color: var(--text-faint); }
.pilot__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 30px; text-transform: uppercase; margin-top: 4px; }
.pilot p { font-size: 16px; margin-top: 8px; color: var(--text-soft); }
.pilot--now p { color: #dcfce7; }

/* ── Demo-skjema ────────────────────────────────────────── */

.demo .kicker { color: var(--accent-soft); }
.demo h2 { margin-top: 14px; font-size: clamp(38px, 5vw, 60px); line-height: .95; }
.demo p { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: #cbd5e1; margin-top: 18px; max-width: 42ch; }

.form {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form input {
  background: var(--canvas);
  border: 1px solid #cbd5e1;
  color: var(--navy);
  font-family: inherit;
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  width: 100%;
}
.form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.form .btn { width: 100%; }
.form .form__hint { color: var(--text-soft); font-size: 13px; line-height: 1.45; margin-top: 0; max-width: none; }
.form__hint a { color: var(--accent-deep); font-weight: 600; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; }

.form .btn--outline { text-align: center; }
.form .form__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--navy);
}
.form__rule { border: 0; height: 1px; background: var(--line); margin: 4px 0; }

.form__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}
.form__label input { margin-top: 7px; }

/* Klubbsøk — resultatliste under søkefeltet. */
.clubresults { display: flex; flex-direction: column; gap: 2px; }
.clubresults:empty { display: none; }
.clubresults button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.clubresults button:hover { border-color: var(--accent); background: #f8fafc; }
.clubresults img, .clubresults .ph {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  background: #eef2f7;
  flex: 0 0 auto;
}
.clubchosen { color: #15803d; font-size: 14px; font-weight: 600; }
.clubchosen[hidden] { display: none; }

/* ── Footer ─────────────────────────────────────────────── */

.footer {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 34px 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 1fr 1fr 1fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}
.footer__brand p {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.55;
  margin-top: 14px;
  max-width: 38ch;
}
.footer__col h2 {
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--navy);
  margin-bottom: 12px;
}
.footer__col ul { list-style: none; display: grid; gap: 8px; }
.footer__col li { color: var(--text-soft); font-size: 15px; line-height: 1.45; }
.footer__col a:hover { color: var(--accent-deep); text-decoration: underline; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 14px;
}
.footer__logo { height: 30px; width: auto; display: block; }

/* ── Scroll-reveal ──────────────────────────────────────── */

/* Skjul først når JS har bekreftet at den kan avsløre igjen — uten JS er alt synlig. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px) scale(.99);
}
.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  /* --reveal-delay settes av JS: hvert søsken starter litt etter det forrige,
     slik at rader med kort ruller inn i kaskade i stedet for alle på én gang. */
  transition:
    opacity .62s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
    transform .62s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
}

/* ── Responsivt ─────────────────────────────────────────── */

@media (max-width: 900px) {
  .split, .split--wide-left, .split--narrow-left,
  .price-grid, .panel-team { grid-template-columns: 1fr; }

  .spotlight { grid-template-columns: 1fr; }
  /* Bildeflaten under teksten, også når den står først i kilden (Kiosk). */
  .spotlight--kiosk .spotlight__thumb { order: 2; }
  .spotlight__thumb { min-height: 200px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .section--center h2, .section--center .body { max-width: none; }
  .demo p { max-width: none; }
}

@media (max-width: 640px) {
  .nav__inner { flex-wrap: wrap; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .nav__logo { height: 26px; }
  .nav__links { order: 3; width: 100%; justify-content: space-between; gap: 10px; font-size: 16px; }
  .nav .btn--sm { font-size: 15px; padding: 9px 16px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__blob { display: none; }
  .cta-row .btn { flex: 1 1 100%; text-align: center; }
}

/* Bevisst valg 29.08.2026: siden tar ikke hensyn til prefers-reduced-motion.
   Her lå en blokk som stoppet marquee-en og nullet ut scroll-avsløringen når
   operativsystemet ba om mindre bevegelse. Den er fjernet fordi animasjonene
   skal vises likt for alle. Ikke legg den inn igjen uten å avklare det. */

/* ── Innlogging og klubbregistrering ────────────────────────
   /login, /registrer og kodebekreftelsen er egne sider på nettsiden, ikke
   løsrevne skjemaer. De bruker seksjonene og skjemastilen over; her er bare
   det som skiller dem: høyden som holder footeren under folden, en litt
   nedskalert h1, og tilbakemeldingsfeltene i skjemaet. */

.auth {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 96px);
  min-height: calc(100dvh - 96px);
}
.auth > .wrap { width: 100%; }
.auth--single > .wrap { max-width: 560px; }
.auth--single .form { margin-top: 26px; }

.auth__title { font-size: clamp(40px, 5.4vw, 72px); max-width: 13ch; margin-top: 12px; }
.auth--single .auth__title { max-width: none; }
.auth__intro .body { margin-top: 18px; max-width: 48ch; }
.auth--single .auth__intro .body { margin-left: auto; margin-right: auto; }
.auth__intro .small { margin-top: 20px; max-width: 48ch; }
.auth__intro .small a { color: var(--accent-deep); font-weight: 600; text-decoration: underline; }

.auth__points {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 26px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}
.auth__points li::before { content: '✓ '; color: var(--accent); font-weight: 700; }

.auth .form { border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(15, 23, 42, .08); }
.form__label .hint { color: var(--text-soft); font-weight: 400; }

.form__error, .form__ok {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.45;
}
.form__error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.form__ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--accent-deep); }

.form input.form__code {
  letter-spacing: .5em;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  padding-left: 16px;
}

@media (max-width: 900px) {
  .auth { display: block; min-height: 0; }
  .auth__title { max-width: none; }
}

/* ── Samtykkebanner ─────────────────────────────────────── */

.samtykke {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(920px, calc(100% - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .16);
  z-index: 50;
}
.samtykke[hidden] { display: none; }
.samtykke__innhold {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
}
.samtykke__tekst {
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.samtykke__tekst strong { color: var(--navy); }
.samtykke__tekst a { color: var(--accent-deep); text-decoration: underline; }
.samtykke .btn { flex: 0 0 auto; }

.footer__juridisk { display: flex; flex-wrap: wrap; gap: 16px; }
.footer__juridisk a { color: var(--accent-deep); }
.footer__juridisk a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .samtykke__innhold { flex-direction: column; align-items: stretch; gap: 14px; }
  .samtykke .btn { width: 100%; }
}
/* Forklaringen over adressefeltene i registreringen: hva vi fant, og hvorfor klubben
   bør se etter. Rolig tone — dette er en bekreftelse, ikke en feilmelding. */
.form__note {
  margin: 0 0 .6rem;
  padding: .6rem .75rem;
  border-radius: .5rem;
  background: rgba(20, 108, 67, .07);
  border: 1px solid rgba(20, 108, 67, .18);
  font-size: .86rem;
  line-height: 1.45;
  color: #2c3a33;
}
.form__label .hint { margin-left: .4rem; font-weight: 500; }

/* Klubbtype-valget i registreringsskjemaet. Kort med radio, ikke nedtrekk: valget styrer
   hvilken nettside klubben får, så det skal være synlig hva de to alternativene er. Selve
   radioknappen skjules visuelt (ikke display:none — den må kunne få tastaturfokus). */
.klubbtype { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.klubbtype legend { padding: 0; }
.klubbtype__valg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.klubbtype__kort {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'ikon navn' 'ikon tekst';
  align-items: center;
  gap: 2px 10px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
}
.klubbtype__kort:hover { border-color: var(--accent); background: #f8fafc; }
.klubbtype__kort input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.klubbtype__ikon { grid-area: ikon; display: flex; color: var(--text-soft); }
.klubbtype__kort:has(input:checked) .klubbtype__ikon { color: var(--accent); }
.klubbtype__navn {
  grid-area: navn;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--navy);
}
.klubbtype__tekst { grid-area: tekst; font-size: 13px; line-height: 1.35; color: var(--text-soft); }
/* «Annen forening» har en liste med resten av typene (lib/klubbtype.js). Den går over hele
   kortbredden under teksten, og forslaget fra Brønnøysund står valgt når et treff er valgt. */
.klubbtype__undertype {
  grid-column: 1 / -1;
  margin-top: 8px;
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
}
.klubbtype__kort:has(input:checked) {
  border-color: var(--accent);
  background: #f0fdf4;
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.klubbtype__kort:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(22, 163, 74, .25); }
@media (max-width: 480px) { .klubbtype__valg { grid-template-columns: 1fr; } }

/* Første steg i registreringen (/registrer): «Velg hva som passer dere best». Samme kort som typevalget,
   men som lenker. Det som følger med står over, så de ser hva de får før de velger. */
.typevalg__hode { max-width: 760px; margin-bottom: 34px; }
.typevalg .auth__title { max-width: 16ch; }
.typevalg__moduler { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.typevalg__moduler li {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: #f0fdf4;
  border: 1px solid rgba(20, 108, 67, .2);
  color: #14532d;
}
.typevalg__sporsmal {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 28px;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 4px;
}
.typevalg__gruppe { margin-top: 18px; }
.typevalg__gruppenavn {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 8px;
}
.typevalg__kort { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.typevalg__kort .klubbtype__kort { text-decoration: none; color: inherit; align-items: start; padding: 14px 16px; }
.typevalg__kort .klubbtype__kort:hover .klubbtype__ikon { color: var(--accent); }
.typevalg__bunn { margin-top: 28px; }

/* «KOM I GANG» GLIR INN (Ole 27.10). Fra «Prøv gratis» kom man til en side som ligner
   forsiden, og det føltes som om ingenting skjedde. Toppen glir inn, så spørsmålet med en
   grønn strek, og kortene ett og ett (--i settes i views.js). Fyllmodus «backwards»: før
   animasjonen starter er de skjult, etterpå står de som vanlig — kjøres den ikke, er
   innholdet synlig. */
@keyframes typevalg-inn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes typevalg-strek { from { width: 0; } to { width: 72px; } }
.typevalg__hode > * { animation: typevalg-inn .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.typevalg__hode > :nth-child(2) { animation-delay: .06s; }
.typevalg__hode > :nth-child(3) { animation-delay: .12s; }
.typevalg__hode > :nth-child(4) { animation-delay: .18s; }
.typevalg__moduler li { animation: typevalg-inn .4s ease-out backwards; animation-delay: calc(.25s + var(--i, 0) * 35ms); }
.typevalg__sporsmal { animation: typevalg-inn .5s cubic-bezier(.2, .7, .2, 1) .45s backwards; }
.typevalg__sporsmal::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--accent); animation: typevalg-strek .6s ease-out .9s backwards; }
.typevalg__gruppenavn { animation: typevalg-inn .4s ease-out .55s backwards; }
.typevalg__kort .klubbtype__kort { animation: typevalg-inn .45s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.6s + var(--i, 0) * 60ms); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.typevalg__kort .klubbtype__kort:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(15, 23, 42, .35); }

/* Typen valgt i første steg, øverst i skjemaet. */
.typevalgt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #f0fdf4;
}
.typevalgt .klubbtype__ikon { grid-area: auto; color: var(--accent); }
.typevalgt__navn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--navy);
  margin-right: 8px;
}
.typevalgt__bytt { font-size: 14px; }
.typevalgt .form__label { grid-column: 1 / -1; margin: 6px 0 0; }
.clubresults__tom { font-size: 14px; line-height: 1.45; color: var(--text-soft); margin: 4px 0 0; }

/* Klubbfargene i registreringsskjemaet. Fargeprøven og hex-feltet er to visninger av
   samme verdi: prøven for dem som bare vil peke, feltet for dem som har fargekoden fra
   klubbhåndboka. Feltet starter tomt fordi en fargevelger alltid har en verdi — uten
   tekstfeltet kunne skjemaet sendes uten at noen hadde valgt noe. */
.klubbfarger { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.klubbfarger legend { padding: 0; }
.klubbfarger__valg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.klubbfarger__felt { display: grid; gap: 4px; }
.klubbfarger__navn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--navy);
}
.klubbfarger__rad { display: flex; align-items: center; gap: 8px; }
/* `.form input { width: 100% }` er (0,1,1) og slår en ren klasse — fargeprøven ble 226px
   bred og fylte hele feltet. Derfor forelder-klassen foran, ikke !important. */
.klubbfarger__rad .klubbfarger__prove {
  flex: 0 0 auto;
  width: 44px;
  height: 42px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.klubbfarger__hex { flex: 1 1 auto; min-width: 0; text-transform: lowercase; }
@media (max-width: 480px) { .klubbfarger__valg { grid-template-columns: 1fr; } }

/* Valgt klubb vises med logoen fra klubbregisteret, ikke bare som tekst. */
.clubchosen { display: flex; align-items: center; gap: 8px; }
.clubchosen img { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }

/* Fargeprøven er stripete til klubben har valgt en farge. En fargevelger har alltid
   en verdi, så uten dette så feltet ferdig utfylt ut mens hex-feltet sto tomt. */
.klubbfarger__prove--tom::-webkit-color-swatch {
  background: repeating-linear-gradient(45deg, #e2e8f0 0 5px, #fff 5px 10px) !important;
}
.klubbfarger__prove--tom::-moz-color-swatch {
  background: repeating-linear-gradient(45deg, #e2e8f0 0 5px, #fff 5px 10px) !important;
}

/* «Send ny kode» på kodesiden: en knapp som ser ut som en lenke, i et skjema uten kort. */
.auth .form.form--bare { border: 0; box-shadow: none; background: none; padding: 8px 30px 0; margin-top: 0; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-deep); text-decoration: underline; cursor: pointer; }

/* Skjermbilder fra testklubben Rasta Tigers i modulkortene (26.9.2026). Bildet dekker
   hele flaten; slug-teksten skjules, men merkelappen ligger over bildet. Kilde og
   utsnitt: se img/moduler. Nye bilder tas fra Rasta Tigers (100495), aldri en kundeklubb. */
.module__thumb { position: relative; overflow: hidden; }
.module__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.spotlight__thumb--bilde { padding: 0; background: #fff; position: relative; overflow: hidden; }
.spotlight__thumb--bilde img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.module__thumb:has(.module__img) .module__slug { visibility: hidden; }
.module__thumb .tag { position: relative; z-index: 1; box-shadow: 0 2px 8px rgba(15,23,42,.18); }
.module__thumb:has(.module__img) { border-bottom: 1px solid var(--line); }

/* Tilleggene som prisliste: navn til venstre, pris til høyre, én rad per tillegg.
   Prisene har harde mellomrom, så «3 500 kr/år» aldri brytes over to linjer. */
.tillegg { list-style: none; margin: 0; padding: 0; display: grid; }
.tillegg li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid #cdeedd; font-size: 15px; color: var(--navy); }
.tillegg li:last-child { border-bottom: 0; }
.tillegg__navn small { display: block; font-size: 13px; color: var(--text-soft); margin-top: 2px; }
.tillegg__pris { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Demo-skjemaet i demo-kortet. */
.demoskjema { display: flex; flex-direction: column; gap: 12px; }
.demoskjema__rad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .demoskjema__rad { grid-template-columns: 1fr; } }
.form textarea { width: 100%; margin-top: 7px; background: var(--canvas); border: 1px solid #cbd5e1; color: var(--navy); font-family: inherit; font-size: 16px; padding: 12px 16px; border-radius: 8px; resize: vertical; }
.form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }

/* ── Hero: tilbudskort til høyre ────────────────────────── */

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.hero-card {
  background: var(--navy);
  color: #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
}
.hero-card__navn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.hero-card__liste {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin-top: 16px;
  color: #e2e8f0;
  font-size: 16px;
}
.hero-card__liste li::before { content: '✓ '; color: var(--accent-soft); font-weight: 700; }
.hero-card__pris {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  color: var(--accent-soft);
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-card__pris span { font-size: 24px; color: #cbd5e1; }
.hero-card__inkl { color: #cbd5e1; font-size: 15px; margin-top: 6px; }
.hero-card__knapp { display: flex; justify-content: center; width: 100%; margin-top: 20px; }
.hero-card__trygt {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin-top: 16px;
  color: #cbd5e1;
  font-size: 14px;
}
.hero-card__trygt li::before { content: '✓ '; color: var(--accent-soft); }

@media (max-width: 1140px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero-card { max-width: 480px; }
}
@media (max-width: 420px) {
  .hero-card__trygt { grid-template-columns: 1fr; }
}
.hero-card__bonus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px dashed rgba(74, 222, 128, .55);
  border-radius: 12px;
  background: rgba(74, 222, 128, .08);
}
.hero-card__bonus-navn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
}
.hero-card__bonus-merke {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.hero-card__bonus-navn { white-space: nowrap; }
@media (max-width: 420px) {
  .hero-card { padding: 22px; }
  .hero-card__bonus { gap: 8px; padding: 10px 12px; }
  .hero-card__bonus-navn { font-size: 17px; }
  .hero-card__bonus-merke { font-size: 12px; padding: 3px 8px; }
}
/* Trygghetspunktene brytes aldri inni seg: de flyter og sentreres under knappen. */
.hero-card__trygt { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.hero-card__trygt li { white-space: nowrap; }
.hero-card__trygt { display: grid; grid-template-columns: 1fr; justify-content: start; gap: 4px; }

/* Demo: teksten starter øverst og følger med mens skjemaet scrolles forbi. */
.demo .split > div:first-child { position: sticky; top: 110px; }

@media (max-width: 900px) {
  /* Ingressen ved seksjonstittelen står inline til høyre på bred skjerm; i én kolonne skal den under tittelen. */
  .section__head > p { justify-self: start !important; max-width: none !important; }
  .demo .split > div:first-child { position: static; }
}

/* Lagseksjonen står alene under hero; panelet trenger ikke avstanden det hadde i modullisten. */
.section--lag { padding: clamp(36px, 4.4vw, 56px) 0; }
.section--lag .panel-team { margin-top: 0; }

/* ── Modulkortene er lenker til modulsidene (/moduler/:slug) ── */
.module--lenke { display: flex; flex-direction: column; color: inherit; }
.module--lenke .module__body { display: flex; flex-direction: column; flex: 1; }
.module--lenke .module__body p { flex: 1; }
.module__mer { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--accent); }
.module--lenke:hover .module__mer { color: var(--accent-deep); text-decoration: underline; }
.moduler__alle { text-align: center; margin-top: 34px; }
/* «Savner du en modul?» står alltid sist (routes/moduler.js). Stiplet, så det ses som en åpning. */
.module--savner { border-style: dashed; border-color: #cfe8d7; background: #f6faf7; }
.module--savner .module__thumb { justify-content: center; align-items: center; background: #eaf6ee; border-bottom: 1px dashed #cfe8d7; }
.module--savner .module__thumb svg { width: 52px; height: 52px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; transition: transform .3s; }
.module--savner:hover .module__thumb svg { transform: rotate(90deg); }

/* ── Modulsidene (/moduler, /moduler/:slug — routes/moduler.js) ── */
.modulside { padding-top: clamp(36px, 5vw, 64px); }
.modulside__sti { font-size: 14px; color: var(--text-soft); margin-bottom: 26px; }
.modulside__sti a { color: var(--accent-deep); font-weight: 700; }
.modulside__sti a:hover { text-decoration: underline; }
/* H1 = kicker + navn, så Google leser hva modulen gjør. Ser ut som før: kicker over, navnet stort. */
.modulside__h1 { font-size: inherit; font-weight: inherit; line-height: 1.5; text-transform: none; max-width: none; margin: 0; }
.modulside__h1 > span { display: block; }
.modulside__tittel { font-size: clamp(44px, 6vw, 76px); font-weight: 800; text-transform: uppercase; line-height: .9; margin-top: 12px; max-width: none; }
.modulside__ingress { max-width: 56ch; margin-top: 18px; }
.modulside__les { list-style: none; max-width: 720px; margin-top: 18px; }
.modulside__les li { border-top: 1px solid var(--line); padding: 16px 0; }
.modulside__les a { font-size: 20px; font-weight: 700; color: var(--accent-deep); }
.modulside__les a:hover { text-decoration: underline; }
.modulside__les p { margin-top: 4px; color: var(--text-soft); }
.modulside__topp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.modulside__bilde { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 18px 44px rgba(15,23,42,.08); }
.modulside__bilde img { display: block; width: 100%; height: auto; }
.modulside__merke {
  display: inline-block; margin-top: 20px; padding: 6px 14px; border-radius: 999px;
  background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--accent-deep);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
}
.modulside__pris { margin-top: 12px; max-width: 56ch; font-size: 15px; line-height: 1.5; color: var(--text); }
.modulside__h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 24px; }
.modulside__punkter { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.modulside__punkt { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.modulside__punkt h3 { font-size: 22px; }
.modulside__punkt p { color: var(--text); font-size: 16px; line-height: 1.5; margin-top: 8px; }
.modulside__tillegg { margin-top: 22px; color: var(--text); font-size: 16px; }
.modulside__brikker { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.modulside__brikke { padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 700; color: var(--accent-deep); }
.modulside__brikke:hover { border-color: var(--accent); }
.modulside__cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.modulside__cta h2 { font-size: clamp(32px, 4vw, 48px); }
.modulside__cta p { color: #cbd5e1; margin-top: 10px; font-size: 18px; }
.modulside__cta-knapper { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--outline-lys { border: 2px solid rgba(255,255,255,.7); color: #fff; background: transparent; padding: 13px 28px; }
.btn--outline-lys:hover { border-color: #fff; }
.modulside__andre { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.modulside__andre a { font-weight: 700; color: var(--accent-deep); }
.modulside__andre a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .modulside__topp { grid-template-columns: 1fr; }
}

/* Tilbudskortet: hver modul på egen linje med kort forklaring, lenket til modulsiden. */
.hero-card__liste { grid-template-columns: 1fr; gap: 7px; font-size: 15px; }
.hero-card__liste li { display: flex; gap: 6px; }
.hero-card__liste li::before { flex: none; }
.hero-card__liste a { color: inherit; }
.hero-card__liste strong { color: #fff; font-weight: 700; }
.hero-card__liste span { color: #94a3b8; }
.hero-card__liste a:hover strong { color: var(--accent-soft); text-decoration: underline; }

/* Sikkerhetspunktene på modulsiden (Styrerom): grønn kant, så de skiller seg fra funksjonene. */
.modulside__punkt--trygg { border-left: 4px solid var(--accent); }

/* ── Kampdommer Elite: solid kort på forsiden (erstatter integrasjons-rullefeltet) ── */
.kd-kort {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center;
  background: var(--navy); color: #fff; border-radius: 22px;
  padding: clamp(28px, 4vw, 52px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
}
.kd-kort__merke {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--accent-soft); color: var(--navy);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase;
}
.kd-kort__tittel { font-size: clamp(38px, 5vw, 60px); margin-top: 16px; color: #fff; }
.kd-kort__ingress { color: #cbd5e1; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; margin: 16px 0 26px; max-width: 46ch; }
.kd-kort__liste { list-style: none; display: grid; gap: 12px; }
.kd-kort__liste li {
  display: flex; gap: 10px; padding: 14px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  color: #cbd5e1; font-size: 16px; line-height: 1.4;
}
.kd-kort__liste li::before { content: '✓'; color: var(--accent-soft); font-weight: 800; flex: none; }
.kd-kort__liste strong { color: #fff; font-weight: 700; }
@media (max-width: 900px) { .kd-kort { grid-template-columns: 1fr; } }

/* Registreringen bytter mellom klubbsøk og Brønnøysund-sporet med hidden-attributtet.
   Klassene over setter display (grid/flex) og ville ellers vunnet over [hidden]. */
.auth [hidden] { display: none !important; }

/* Foreningssidene (/for/korps osv., routes/foreninger.js) bruker modulsidens stiler.
   Dette er det lille som kommer i tillegg. */
.modulside__h3 { font-size: 22px; }
.modulside__lenke { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--accent-deep); }
.modulside__lenke:hover { text-decoration: underline; }
.forening__side { align-self: center; display: grid; gap: 16px; }
.forening__fremhevet > p { margin-top: 10px; }
/* Modulkortene som på forsiden (.fs-mods i forside.css), på mørk grønn flate. */
.forening__moduler { background: #0a2a1a; color: #fff; }
.forening__moduler .modulside__h2 { color: #fff; }
.forening__moduler .modulside__tillegg { color: #a9c2b2; }
.forening__mod-hode { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.forening__mod-hode p { color: #a9c2b2; font-size: 16px; }
.forening__mods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.forening__mod { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: #123824; border: 1px solid #2a4a38; color: #fff; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.forening__mod:hover { transform: translateY(-3px); border-color: #5f8a71; color: #fff; }
.forening__mod img { display: block; width: 100%; height: auto; aspect-ratio: 1044 / 435; object-fit: cover; object-position: left top; background: #f6faf7; }
.forening__mod img.til-hoyre { object-position: right top; }
.forening__mod > span { padding: 12px 14px 14px; }
.forening__mod b { display: block; font-size: 16px; line-height: 1.2; }
.forening__mod small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: #a9c2b2; }
.forening__mod--alle { justify-content: center; padding: 16px; background: transparent; border-style: dashed; }
@media (max-width: 980px) { .forening__mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.forening__grupper > p { margin-top: 18px; }
.forening__grupper .modulside__brikke { color: var(--navy); background: var(--canvas); }
.forening__merknad { margin-top: 16px; max-width: 760px; }
.forening__merknad > p { margin-top: 8px; color: var(--text); font-size: 16px; line-height: 1.55; }

/* «Åpner snart» (bygget, venter på en bryter) og «Kommer» (ikke bygget): stiplet kant og
   oransje kicker, så det aldri leses som noe som virker i dag. */
.modulside__snart { color: #c2410c; }
.modulside__punkt--snart { border-style: dashed; background: #fffdf8; }

/* «Penger tilbake for øvelsene» på korps- og korsidene (lib/foreninger.js STUDIETIMER). */
.forening__regneeksempel { margin-top: 16px; max-width: 760px; }
.forening__regneeksempel .forening__liten { font-size: 14px; color: var(--text-soft); }
.forening__lenker { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.forening__lenker a { font-weight: 700; color: var(--accent-deep); }
.forening__lenker a:hover { text-decoration: underline; }
.forening__regning { border-collapse: collapse; margin: 14px 0; width: 100%; font-size: 16px; }
.forening__regning th, .forening__regning td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.forening__regning th { font-weight: 600; color: var(--navy); }
.forening__regning td { color: var(--text); white-space: nowrap; }
.forening__regning td strong { color: var(--accent-deep); }
@media (max-width: 640px) { .forening__regning tr { display: grid; grid-template-columns: 1fr auto; } .forening__regning th { grid-column: 1 / -1; padding-bottom: 2px; border: 0; } }

/* ── Klubbappen i butikkene (06.11.2026, lib/appButikk.js) ── */
/* Offisielle merker i samme høyde. Footeren, toppen av klubbapp-siden, «Slik får medlemmene
   appen» og /app bruker dem. */
.appmerker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.appmerker a { display: block; line-height: 0; border-radius: 8px; }
.appmerker a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.appmerker img { height: 40px; width: auto; }
.appmerker--topp { margin-top: 18px; }
.footer__brand .footer__app { margin-top: 22px; margin-bottom: 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.appsteg__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.appsteg__liste { list-style: none; counter-reset: steg; display: grid; gap: 18px; margin: 4px 0 26px; padding: 0; }
.appsteg__liste li { counter-increment: steg; position: relative; padding-left: 52px; }
.appsteg__liste li::before {
  content: counter(steg); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--accent-deep);
  display: grid; place-items: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px;
}
.appsteg__liste h3 { font-size: 22px; }
.appsteg__liste p { color: var(--text); font-size: 16px; line-height: 1.5; margin-top: 4px; max-width: 46ch; }
.appsteg__del { margin-top: 16px; color: var(--text-soft); font-size: 15px; }
.appsteg__del a { color: var(--accent-deep); font-weight: 700; }
.appsteg__del a:hover { text-decoration: underline; }
.appsteg__bilder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.appsteg__bilder img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(15,23,42,.08); }
@media (max-width: 900px) {
  .appsteg__grid { grid-template-columns: 1fr; }
  .appsteg__bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
}
/* /app (routes/app-lenke.js): QR-koden for dem som åpner lenken på PC. */
.appqr { justify-self: center; width: min(100%, 300px); margin: 0; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 44px rgba(15,23,42,.08); text-align: center; }
.appqr svg { display: block; width: 100%; height: auto; }
.appqr figcaption { margin-top: 12px; color: var(--text-soft); font-size: 15px; }
/* Klubbapp-siden: administrasjonens bånd rett under toppen (routes/moduler.js, adminSeksjon).
   Det oransje merket med sort kant er fargen «Dine verktøy» har i appen. */
.modulside__admin .modulside__h2 { color: #fff; }
.modulside__admin-kicker { color: #fb923c; }
.modulside__admin-ingress { color: #cbd5e1; font-size: 18px; line-height: 1.55; max-width: 62ch; margin: -8px 0 28px; }
.modulside__punkt--admin { border-color: transparent; }
.modulside__punkt--admin h4 { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: 22px; line-height: 1; }
.modulside__punkt--admin h4::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 4px; background: #f97316; border: 2px solid #111827; }
.modulside__admin-merknad { margin-top: 22px; color: #cbd5e1; font-size: 16px; }
/* Én bolk per rolle i båndet: administrasjonen, så lederne for lag og grupper. */
.modulside__admin-gruppe { margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); }
.modulside__admin-gruppe h3 { color: #fff; font-size: clamp(26px, 2.8vw, 34px); }
.modulside__admin-hvem { color: #cbd5e1; font-size: 16px; line-height: 1.5; max-width: 62ch; margin: 8px 0 20px; }
/* Klubbapp-siden: egen app i butikkene, et tillegg (routes/moduler.js, egenAppSeksjon). */
.egenapp__boks { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 4vw, 44px); max-width: 860px; box-shadow: 0 18px 44px rgba(15,23,42,.06); }
.egenapp__boks > p:not(.kicker) { margin-top: 14px; color: var(--text); font-size: 17px; line-height: 1.6; max-width: 64ch; }
.egenapp__boks > p.egenapp__pris { margin-top: 20px; font-weight: 700; color: var(--navy); }