/* ═══════════════════════════════════════════════════════════════
   CONNECTIFY NORDIC — home.css  (KUN forsiden / index.html)
   Det som er unikt for forsiden: heroen med tegnet showcase. Alt felles
   (tokens, flater, knapper, skjermbilderamme, lister, rullebånd,
   avslutning) ligger i light.css, som lastes FØR denne fila. HVER regel
   her starter med .page-home. Klasser med prefikset hm- finnes bare på
   forsiden.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.page-home .hm-hero {
  padding: clamp(7.5rem, 11vw, 9.5rem) 0 clamp(3rem, 6vw, 5rem);
}
.page-home .hm-h1-accent {
  color: var(--lt-accent);
}
.page-home .hm-hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 6rem);
}
.page-home .hm-hero-side {
  display: grid;
  gap: 1.75rem;
  padding-bottom: 0.375rem;
}

/* ═══════════════════════════════════════
   HERO-SHOWCASE (.hm-sc)
   Tegnet nettleservindu + telefon som veksler mellom to lysbilder
   (1 Plan & Time, 2 Reise & Utlegg). Aktivt lysbilde styres av
   data-hm-slide på roten, som home.js setter. Uten JS står verdien
   på 1 og fanene er skjult.

   SKALERING: vindu og telefon er hver sin container. Den indre
   boksen setter font-size i cqw slik at 1em = 10px ved full bredde
   (800px vindu, 190px telefon). ALT inni måles i em, så tegningen
   krymper proporsjonalt. Sett font-size kun på tekstelementer, ikke
   på bokser med barn som også har font-size (em ganges opp).

   App-fargene (--hm-a-*) gjelder kun tegningen og står på roten.
═══════════════════════════════════════ */
.page-home .hm-sc {
  --hm-a-bar: var(--lt-navy);
  --hm-a-bg: #F4F6F9;
  --hm-a-surface: var(--lt-surface);
  --hm-a-line: var(--lt-line);
  --hm-a-ink: var(--lt-ink);
  --hm-a-muted: #64748B;
  --hm-a-on-bar: #C9D6EC;
  --hm-a-cyan: var(--lt-accent-on-dark);
  --hm-a-blue: var(--lt-primary);
  --hm-a-blue-tint: #E3EFF9;
  --hm-a-sky: #0EA5E9;
  --hm-a-sky-tint: #DCEFFB;
  --hm-a-sky-fill: #C3E4F8;
  --hm-a-sky-line: #9AD3F2;
  --hm-a-amber: #E99B0C;
  --hm-a-amber-tint: #FBF0D9;
  --hm-a-green: #12B76A;
  --hm-a-green-tint: #DDF5E8;
  --hm-a-red: #E5484D;
  --hm-a-v1: #9ADBF8;
  --hm-a-v2: #C7A2F6;
  --hm-a-v3: #A6F4BD;
  --hm-a-td: #EBD3AE;
  --hm-a-kl: #E084F4;
  --hm-a-weekend: #F3F5F8;
  --hm-a-mobile-bg: #EEF4FC;
  --hm-sc-dur: 700ms;

  /* Venstrestilt: starter i samme venstrekant som H1. */
  max-width: 1040px;
  margin: clamp(2rem, 3.5vw, 3rem) 0 0;
}
.page-home .hm-sc-sprite {
  position: absolute;
}
.page-home .hm-sc .hm-ico {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-home .hm-sc .hm-ico--fill {
  fill: currentColor;
  stroke: none;
}

/* Scene: 80:19 i bredde og 40:19 mot 1:2 i format gir lik høyde. */
.page-home .hm-sc-stage {
  display: grid;
  grid-template-columns: minmax(0, 80fr) minmax(0, 19fr);
  align-items: end;
  gap: clamp(1.25rem, 4.8vw, 3.125rem);
}

/* Veksling: sporet er to ruter bredt og flyttes en rute. */
.page-home .hm-sc-view {
  overflow: hidden;
}
.page-home .hm-sc-track {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform var(--hm-sc-dur) var(--lt-ease);
}
.page-home .hm-sc-pane {
  flex: 0 0 50%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  transition: opacity var(--hm-sc-dur) var(--lt-ease),
              visibility 0s linear 0s;
}
.page-home .hm-sc-pane--2,
.page-home .hm-sc[data-hm-slide="2"] .hm-sc-pane--1 {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hm-sc-dur) var(--lt-ease),
              visibility 0s linear var(--hm-sc-dur);
}
.page-home .hm-sc[data-hm-slide="2"] .hm-sc-track {
  transform: translateX(-50%);
}
.page-home .hm-sc[data-hm-slide="2"] .hm-sc-pane--2 {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--hm-sc-dur) var(--lt-ease),
              visibility 0s linear 0s;
}

/* ── Nettleservindu ── */
.page-home .hm-win {
  container-type: inline-size;
  aspect-ratio: 40 / 19;
  overflow: hidden;
  border: 1px solid var(--lt-edge);
  border-radius: var(--lt-radius);
  background: var(--hm-a-surface);
}
.page-home .hm-win-in {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  color: var(--hm-a-ink);
  font-size: clamp(3px, 0.9vw, 10px);
  font-size: 1.25cqw;
  line-height: 1.25;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.page-home .hm-win-chrome {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 2em;
  padding: 0 0.9em;
  border-bottom: 1px solid var(--hm-a-line);
  background: var(--lt-bg);
}
.page-home .hm-win-chrome i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--lt-line-strong);
}
.page-home .hm-win-chrome span {
  width: 26em;
  height: 1.1em;
  margin: 0 auto;
  border-radius: 0.55em;
  background: var(--hm-a-surface);
  transform: translateX(-1.4em);
}

.page-home .hm-app {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  grid-template-rows: 2.8em minmax(0, 1fr);
  min-height: 0;
}
.page-home .hm-app-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0 1em 0 0.7em;
  background: var(--hm-a-bar);
  color: var(--lt-on-dark);
}
.page-home .hm-app-menu {
  font-size: 1.2em;
}
.page-home .hm-app-mark {
  width: auto;
  height: 1.5em;
  margin-left: 0.5em;
}
.page-home .hm-app-word {
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.page-home .hm-app-word span {
  color: var(--hm-a-cyan);
}
.page-home .hm-app-bell {
  position: relative;
  display: flex;
  margin-left: auto;
  padding-right: 1em;
  border-right: 1px solid var(--lt-line-on-dark);
  font-size: 1.1em;
}
.page-home .hm-app-bell::after,
.page-home .hm-app-nav--badge::after,
.page-home .hm-mh-bell::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0.9em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--hm-a-red);
}
.page-home .hm-app-av {
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  margin-left: 0.6em;
  border-radius: 50%;
  background: var(--hm-a-blue-tint);
  color: var(--hm-a-blue);
  font-size: 0.55em;
  font-weight: 700;
}
.page-home .hm-app-user {
  display: grid;
}
.page-home .hm-app-user b {
  font-size: 0.6em;
  font-weight: 700;
}
.page-home .hm-app-user span {
  color: var(--hm-a-on-bar);
  font-size: 0.5em;
}
.page-home .hm-app-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 0;
  background: var(--hm-a-bar);
  color: var(--hm-a-on-bar);
}
.page-home .hm-app-nav {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.4em;
  transition: background-color 300ms var(--lt-ease), color 300ms var(--lt-ease);
}
.page-home .hm-app-nav .hm-ico {
  font-size: 1.15em;
}
.page-home .hm-app-nav--badge::after {
  top: 0.2em;
  right: 0.2em;
}
.page-home .hm-app-nav--end {
  margin-top: auto;
}
.page-home .hm-app-nav--plan,
.page-home .hm-sc[data-hm-slide="2"] .hm-app-nav--reise {
  background: rgba(255, 255, 255, 0.1);
  color: var(--hm-a-cyan);
}
.page-home .hm-sc[data-hm-slide="2"] .hm-app-nav--plan {
  background: none;
  color: var(--hm-a-on-bar);
}
.page-home .hm-app-main {
  min-width: 0;
  background: var(--hm-a-bg);
}
.page-home .hm-app-main .hm-sc-pane {
  padding: 0.8em 1em 0;
}

/* ── Lysbilde 1 (web): turnusoversikten ── */
.page-home .hm-tn {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  height: 100%;
}
.page-home .hm-tn-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.45em;
}
.page-home .hm-tn-field {
  display: grid;
  gap: 0.2em;
}
.page-home .hm-tn-field > span {
  color: var(--hm-a-ink);
  font-size: 0.5em;
  font-weight: 600;
}
.page-home .hm-tn-field > b,
.page-home .hm-tn-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 0.8em;
  border: 1px solid var(--hm-a-line);
  border-radius: 0.6em;
  background: var(--hm-a-surface);
  font-size: 0.55em;
  font-weight: 600;
  line-height: 1.2;
}
.page-home .hm-tn-field > b {
  gap: 0.9em;
  font-weight: 500;
}
.page-home .hm-tn-field .hm-ico,
.page-home .hm-tn-btn--search {
  color: var(--hm-a-muted);
}
.page-home .hm-tn-btn--sel {
  gap: 1.6em;
  margin-left: auto;
  font-weight: 500;
}
.page-home .hm-tn-btn--search {
  width: 19em;
  font-weight: 400;
}
.page-home .hm-tn-grid {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 0.6em 0.6em 0 0;
  background: var(--hm-a-surface);
}
.page-home .hm-tn-wk {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(11em + (100% - 11em) * 5 / 14);
  width: calc((100% - 11em) / 7);
  background: var(--hm-a-weekend);
}
.page-home .hm-tn-wk--2 {
  left: calc(11em + (100% - 11em) * 12 / 14);
}
.page-home .hm-tn-row {
  position: relative;
  display: grid;
  grid-template-columns: 11em repeat(14, minmax(0, 1fr));
  align-items: center;
  height: 2.6em;
  border-bottom: 1px solid var(--hm-a-line);
}
.page-home .hm-tn-row > * {
  grid-row: 1;
  min-width: 0;
}
.page-home .hm-tn-row--head > span {
  padding-left: 0.6em;
  color: var(--hm-a-muted);
  font-size: 0.48em;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.page-home .hm-tn-corner {
  padding-left: 1.3em;
  font-size: 0.62em;
  font-weight: 700;
}
.page-home .hm-tn-who {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-left: 0.8em;
}
.page-home .hm-tn-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  background: var(--hm-a-blue-tint);
  color: var(--hm-a-blue);
  font-size: 0.48em;
  font-weight: 700;
}
.page-home .hm-tn-nm {
  font-size: 0.6em;
  font-weight: 600;
}
.page-home .hm-tn-s {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 2.1em;
  margin: 0 0.15em;
  padding: 0 0.45em;
  overflow: hidden;
  border-radius: 0.35em;
}
.page-home .hm-tn-s b {
  font-size: 0.56em;
  font-weight: 700;
  line-height: 1.2;
}
.page-home .hm-tn-s span {
  font-size: 0.46em;
  line-height: 1.2;
  opacity: 0.72;
}
.page-home .hm-tn-s--v1 { background: var(--hm-a-v1); }
.page-home .hm-tn-s--v2 { background: var(--hm-a-v2); }
.page-home .hm-tn-s--v3 { background: var(--hm-a-v3); }
.page-home .hm-tn-s--td { background: var(--hm-a-td); }
.page-home .hm-tn-s--kl { background: var(--hm-a-kl); }
/* Startdag (1 til 14) og lengde. Kolonne 1 er navnet, derfor +1. */
.page-home .hm-d1 { grid-column-start: 2; }
.page-home .hm-d2 { grid-column-start: 3; }
.page-home .hm-d4 { grid-column-start: 5; }
.page-home .hm-d5 { grid-column-start: 6; }
.page-home .hm-d6 { grid-column-start: 7; }
.page-home .hm-d7 { grid-column-start: 8; }
.page-home .hm-d8 { grid-column-start: 9; }
.page-home .hm-d12 { grid-column-start: 13; }
.page-home .hm-d13 { grid-column-start: 14; }
.page-home .hm-d14 { grid-column-start: 15; }
.page-home .hm-w2 { grid-column-end: span 2; }
.page-home .hm-w5 { grid-column-end: span 5; }

/* ── Lysbilde 2 (web): dashbordet i Reise & Utlegg ── */
.page-home .hm-rs {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  height: 100%;
}
.page-home .hm-rs-card {
  border-radius: 0.7em;
  background: var(--hm-a-surface);
}
.page-home .hm-rs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hm-a-line);
}
.page-home .hm-rs-tab {
  padding: 0.9em 1.2em;
  border-bottom: 2px solid var(--hm-a-blue);
  font-size: 0.6em;
  font-weight: 600;
}
.page-home .hm-rs-new {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 1.2em;
  border-radius: 0.6em;
  background: var(--hm-a-blue);
  color: var(--hm-a-surface);
  font-size: 0.58em;
  font-weight: 700;
}
.page-home .hm-rs-lbl {
  color: var(--hm-a-muted);
  font-size: 0.44em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-home .hm-rs-sub {
  color: var(--hm-a-muted);
  font-size: 0.5em;
}
.page-home .hm-rs-title {
  font-size: 0.68em;
  font-weight: 700;
}
.page-home .hm-rs-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7em;
}
.page-home .hm-rs-kpi {
  display: grid;
  gap: 0.1em;
  padding: 0.6em 0.9em;
}
.page-home .hm-rs-kpi b {
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.page-home .hm-rs-duo {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: 0.7em;
}
.page-home .hm-rs-resume,
.page-home .hm-rs-due {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6em 0.8em;
  padding: 0.7em 0.9em;
}
.page-home .hm-rs-ico {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 0.5em;
  background: var(--hm-a-blue-tint);
  color: var(--hm-a-blue);
}
.page-home .hm-rs-ico--amber {
  background: var(--hm-a-amber-tint);
  color: var(--hm-a-amber);
}
.page-home .hm-rs-resume-txt,
.page-home .hm-rs-due-txt {
  display: grid;
  gap: 0.15em;
  min-width: 0;
}
.page-home .hm-rs-resume-txt .hm-rs-sub {
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-home .hm-rs-resume-act {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.5em;
}
.page-home .hm-rs-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1em;
  border: 1px solid var(--hm-a-line);
  border-radius: 0.7em;
  font-size: 0.52em;
  font-weight: 600;
}
.page-home .hm-rs-chip--tint {
  border-color: var(--hm-a-blue-tint);
  background: var(--hm-a-blue-tint);
  color: var(--hm-a-blue);
}
.page-home .hm-rs-due {
  align-items: start;
}
.page-home .hm-rs-sum {
  color: var(--hm-a-muted);
  font-size: 0.6em;
}
.page-home .hm-rs-sum b {
  color: var(--hm-a-ink);
  font-size: 2.6em;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.page-home .hm-rs-chart {
  display: grid;
  padding: 0.7em 0.9em 0.6em;
}
.page-home .hm-rs-plot {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  gap: 0.3em 0.5em;
  margin-top: 0.7em;
}
.page-home .hm-rs-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 7em;
  margin: -0.3em 0;
}
.page-home .hm-rs-y span,
.page-home .hm-rs-x span {
  color: var(--hm-a-muted);
  font-size: 0.44em;
  font-variant-numeric: tabular-nums;
}
.page-home .hm-rs-area {
  position: relative;
  height: 7em;
}
.page-home .hm-rs-lines {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.page-home .hm-rs-lines i {
  height: 1px;
  background: var(--hm-a-line);
}
.page-home .hm-rs-bars,
.page-home .hm-rs-x {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.page-home .hm-rs-bars {
  position: absolute;
  inset: 0;
  align-items: end;
}
.page-home .hm-rs-bars i {
  width: 62%;
  margin: 0 auto;
  border-radius: 0.2em 0.2em 0 0;
  background: var(--hm-a-blue);
}
/* Okt til Sep, andel av 6 000 kr. */
.page-home .hm-rs-bars i:nth-child(1) { height: 35%; }
.page-home .hm-rs-bars i:nth-child(2) { height: 57%; }
.page-home .hm-rs-bars i:nth-child(3) { height: 25%; }
.page-home .hm-rs-bars i:nth-child(4) { height: 47%; }
.page-home .hm-rs-bars i:nth-child(5) { height: 65%; }
.page-home .hm-rs-bars i:nth-child(6) { height: 77%; }
.page-home .hm-rs-bars i:nth-child(7) { height: 52%; }
.page-home .hm-rs-bars i:nth-child(8) { height: 43%; }
.page-home .hm-rs-bars i:nth-child(9) { height: 87%; }
.page-home .hm-rs-bars i:nth-child(10) { height: 20%; }
.page-home .hm-rs-bars i:nth-child(11) { height: 68%; }
.page-home .hm-rs-bars i:nth-child(12) { height: 55%; }
.page-home .hm-rs-x {
  grid-column: 2;
  text-align: center;
}
.page-home .hm-rs-list {
  flex: 1;
  min-height: 0;
  border-radius: 0.7em 0.7em 0 0;
}
.page-home .hm-rs-list-head,
.page-home .hm-rs-item {
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 2.5em;
  padding: 0 0.9em;
}
.page-home .hm-rs-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-left: auto;
  color: var(--hm-a-blue);
  font-size: 0.52em;
  font-weight: 700;
}
.page-home .hm-rs-item {
  border-top: 1px solid var(--hm-a-line);
}
.page-home .hm-rs-item > .hm-ico {
  color: var(--hm-a-blue);
  font-size: 1.1em;
}
.page-home .hm-rs-item > b {
  font-size: 0.58em;
  font-weight: 600;
}
.page-home .hm-rs-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-left: auto;
  color: var(--hm-a-muted);
  font-size: 0.5em;
}
.page-home .hm-rs-status::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--hm-a-muted);
}
.page-home .hm-rs-status--ok::before {
  background: var(--hm-a-green);
}
.page-home .hm-rs-item > .hm-rs-amt {
  min-width: 6.5em;
  font-size: 0.6em;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Telefon ── */
.page-home .hm-ph {
  container-type: inline-size;
  aspect-ratio: 1 / 2;
}
.page-home .hm-ph-in {
  height: 100%;
  border: 0.5em solid var(--hm-a-bar);
  border-radius: 2.4em;
  background: var(--hm-a-mobile-bg);
  color: var(--hm-a-ink);
  font-size: clamp(3px, 0.9vw, 10px);
  font-size: 5.263cqw;
  line-height: 1.25;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.page-home .hm-ph-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.2em;
  padding: 0.3em 1.5em 0;
}
.page-home .hm-ph-status b {
  font-size: 0.62em;
  font-weight: 700;
}
.page-home .hm-ph-status i {
  width: 1.3em;
  height: 0.6em;
  border-radius: 0.2em;
  background: currentColor;
  opacity: 0.85;
}
.page-home .hm-ph-status--dark,
.page-home .hm-mh-top {
  background: var(--hm-a-bar);
  color: var(--lt-on-dark);
}
.page-home .hm-m-lbl {
  display: block;
  color: var(--hm-a-muted);
  font-size: 0.48em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-home .hm-m-lbl em {
  color: var(--hm-a-red);
  font-style: normal;
}
.page-home .hm-m-card {
  border-radius: 0.9em;
  background: var(--hm-a-surface);
}

/* ── Lysbilde 1 (mobil): Hjem ── */
.page-home .hm-mh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 0.9em 0.9em;
}
.page-home .hm-mh-top > .hm-ico {
  font-size: 1.3em;
}
.page-home .hm-mh-logo {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.page-home .hm-mh-logo img {
  width: auto;
  height: 1.1em;
}
.page-home .hm-mh-logo .hm-app-word {
  font-size: 0.66em;
}
.page-home .hm-mh-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.page-home .hm-mh-bell::after {
  top: 0.1em;
  right: 0.1em;
  width: 0.5em;
  height: 0.5em;
}
.page-home .hm-mh-body {
  display: grid;
  gap: 0.6em;
  padding: 0.9em 0.9em 0;
}
.page-home .hm-mh-body > .hm-m-lbl {
  margin-top: 0.9em;
}
.page-home .hm-mh-greet {
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.page-home .hm-mh-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: var(--hm-a-bar);
  color: var(--lt-on-dark);
  font-size: 0.85em;
  font-weight: 700;
}
.page-home .hm-mh-hello {
  display: grid;
}
.page-home .hm-mh-hello span {
  color: var(--hm-a-muted);
  font-size: 0.52em;
}
.page-home .hm-mh-hello b {
  font-size: 0.88em;
  font-weight: 700;
}
.page-home .hm-mh-set {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  margin-left: auto;
  border-radius: 50%;
  background: var(--hm-a-surface);
}
.page-home .hm-mh-next {
  position: relative;
  display: grid;
  gap: 0.15em;
  padding: 0.8em 0.9em 0.7em;
}
.page-home .hm-mh-code {
  position: absolute;
  top: 1.2em;
  right: 1.4em;
  padding: 0.35em 0.8em;
  border-radius: 0.5em;
  background: var(--hm-a-v1);
  font-size: 0.6em;
  font-weight: 700;
}
.page-home .hm-mh-next-k {
  font-size: 0.48em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-home .hm-mh-next-when {
  font-size: 0.85em;
  font-weight: 700;
}
.page-home .hm-mh-next-day {
  margin-top: 0.3em;
  font-size: 0.66em;
  font-weight: 500;
}
.page-home .hm-mh-next-time {
  color: var(--hm-a-muted);
  font-size: 0.66em;
}
.page-home .hm-mh-next-foot {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.9em;
  padding-top: 0.9em;
  border-top: 1px solid var(--hm-a-line);
  color: var(--hm-a-muted);
  font-size: 0.56em;
}
.page-home .hm-mh-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6em;
}
.page-home .hm-mh-tile {
  display: grid;
  justify-items: center;
  gap: 0.2em;
  padding: 0.7em 0.3em;
}
.page-home .hm-mh-tile-ico {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  margin-bottom: 0.2em;
  border-radius: 50%;
}
.page-home .hm-mh-tile-k {
  color: var(--hm-a-muted);
  font-size: 0.44em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-home .hm-mh-tile b {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.1;
}
.page-home .hm-mh-tile-s {
  color: var(--hm-a-muted);
  font-size: 0.5em;
}
.page-home .hm-mh-tile--green .hm-mh-tile-ico {
  background: var(--hm-a-green-tint);
}
.page-home .hm-mh-tile--green .hm-mh-tile-ico,
.page-home .hm-mh-tile--green b {
  color: var(--hm-a-green);
}
.page-home .hm-mh-tile--amber .hm-mh-tile-ico {
  background: var(--hm-a-amber-tint);
}
.page-home .hm-mh-tile--amber .hm-mh-tile-ico,
.page-home .hm-mh-tile--amber b {
  color: var(--hm-a-amber);
}
.page-home .hm-mh-reise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7em;
  padding: 0.8em 0.9em;
}
.page-home .hm-mh-reise-boxes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5em;
  white-space: normal;
}
.page-home .hm-mh-reise-box {
  display: grid;
  gap: 0.2em;
  height: 100%;
  padding: 0.7em;
  border-radius: 0.7em;
  background: var(--hm-a-mobile-bg);
}
.page-home .hm-mh-reise-box b {
  font-size: 0.8em;
  font-weight: 700;
}
.page-home .hm-mh-reise-ico {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.6em;
  background: var(--hm-a-sky-tint);
  color: var(--hm-a-sky);
}
.page-home .hm-mh-reise-txt {
  display: grid;
}
.page-home .hm-mh-reise-txt b {
  font-size: 0.7em;
  font-weight: 700;
}
.page-home .hm-mh-reise-txt span,
.page-home .hm-mh-reise-go {
  color: var(--hm-a-muted);
}
.page-home .hm-mh-reise-txt span {
  font-size: 0.52em;
}
.page-home .hm-mh-reise-go {
  margin-left: auto;
}

/* ── Lysbilde 2 (mobil): Ny utgift ── */
.page-home .hm-mu-top {
  position: relative;
  display: grid;
  place-items: center;
  height: 3.2em;
  border-bottom: 1px solid var(--hm-a-line);
}
.page-home .hm-mu-top b {
  font-size: 0.82em;
  font-weight: 700;
}
.page-home .hm-mu-back {
  position: absolute;
  left: 0.9em;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.6em;
  background: var(--hm-a-blue-tint);
}
.page-home .hm-mu-body {
  display: grid;
  justify-items: start;
  gap: 0.45em;
  padding: 0.7em 0.9em 0;
}
.page-home .hm-mu-body > .hm-m-lbl {
  margin-top: 0.7em;
}
.page-home .hm-mu-scan {
  display: grid;
  gap: 0.5em;
  width: 100%;
  padding: 0.8em 0.7em;
  border: 1px solid var(--hm-a-sky-line);
  border-radius: 0.9em;
  background: var(--hm-a-sky-tint);
  white-space: normal;
}
.page-home .hm-mu-scan-k {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  color: var(--hm-a-sky);
  font-size: 0.48em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-home .hm-mu-scan-k .hm-ico {
  font-size: 1.8em;
}
.page-home .hm-mu-scan-q {
  color: var(--hm-a-muted);
  font-size: 0.54em;
}
.page-home .hm-mu-opt {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.7em 0.6em;
  border: 1px solid var(--hm-a-surface);
  border-radius: 0.7em;
  background: var(--hm-a-surface);
}
.page-home .hm-mu-opt > i {
  flex: none;
  width: 0.9em;
  height: 0.9em;
  border: 1px solid var(--hm-a-muted);
  border-radius: 50%;
}
.page-home .hm-mu-opt > span {
  display: grid;
  gap: 0.1em;
}
.page-home .hm-mu-opt b {
  font-size: 0.54em;
  font-weight: 700;
}
.page-home .hm-mu-opt span span {
  color: var(--hm-a-muted);
  font-size: 0.48em;
}
.page-home .hm-mu-opt--on {
  border-color: var(--hm-a-sky);
  background: var(--hm-a-sky-fill);
}
.page-home .hm-mu-opt--on > i {
  border: 0.22em solid var(--hm-a-surface);
  background: var(--hm-a-sky);
  outline: 1px solid var(--hm-a-sky);
}
.page-home .hm-mu-ready {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.7em 1em;
  border: 1px solid var(--hm-a-line);
  border-radius: 0.9em;
  background: var(--hm-a-surface);
  font-size: 0.5em;
  font-weight: 500;
}
.page-home .hm-mu-ready i {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--hm-a-sky);
  color: var(--hm-a-surface);
}
.page-home .hm-mu-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9em 1em;
  border: 1px solid var(--hm-a-line);
  border-radius: 0.9em;
  background: var(--hm-a-surface);
  font-size: 0.62em;
}
.page-home .hm-mu-field .hm-ico {
  color: var(--hm-a-muted);
  font-size: 1.3em;
}
.page-home .hm-mu-hint {
  color: var(--hm-a-sky);
  font-size: 0.5em;
  font-weight: 500;
}
.page-home .hm-mu-save {
  display: grid;
  place-items: center;
  width: 100%;
  margin-top: 0.8em;
  padding: 1em;
  border-radius: 0.9em;
  background: var(--hm-a-sky);
  font-size: 0.7em;
  font-weight: 700;
}

/* ── Faner og pauseknapp ── */
/* min-height holder av plassen til home.js viser fanene. */
.page-home .hm-sc-bar {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  margin-top: 0.75rem;
}
.page-home .hm-sc-ctl {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.page-home .hm-sc-ctl[hidden],
.page-home .hm-sc-toggle[hidden] {
  display: none;
}
.page-home .hm-sc-tabs {
  display: flex;
  gap: 1.5rem;
}
.page-home .hm-sc-tab {
  position: relative;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--lt-muted);
  font-size: var(--lt-fs-small);
  font-weight: 600;
  line-height: 1;
  transition: color 180ms var(--lt-ease);
}
.page-home .hm-sc-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.1875rem;
  left: 0;
  height: 2px;
  background: var(--lt-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--lt-ease);
}
.page-home .hm-sc-tab:hover,
.page-home .hm-sc-tab[aria-selected="true"] {
  color: var(--lt-ink);
}
.page-home .hm-sc-tab[aria-selected="true"]::after {
  transform: scaleX(1);
}
.page-home .hm-sc-toggle {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--lt-line-strong);
  border-radius: 50%;
  background: none;
  color: var(--lt-ink);
  font-size: 0.9375rem;
  transition: background-color 180ms var(--lt-ease),
              border-color 180ms var(--lt-ease);
}
.page-home .hm-sc-toggle:hover {
  border-color: var(--lt-muted);
  background: var(--lt-surface);
}
.page-home .hm-sc-tab:focus-visible,
.page-home .hm-sc-toggle:focus-visible {
  outline: 2px solid var(--lt-primary);
  outline-offset: 3px;
}
.page-home .hm-sc-toggle-play,
.page-home .hm-sc-toggle[data-hm-state="stopped"] .hm-sc-toggle-pause {
  display: none;
}
.page-home .hm-sc-toggle[data-hm-state="stopped"] .hm-sc-toggle-play {
  display: block;
}

/* ═══════════════════════════════════════
   RESPONSIVT
═══════════════════════════════════════ */
@media (max-width: 860px) {
  .page-home .hm-hero-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-home .hm-hero-side {
    padding-bottom: 0;
  }
  /* Berøringsmål på 44px. */
  .page-home .hm-sc-tab,
  .page-home .hm-sc-toggle {
    height: 2.75rem;
  }
  .page-home .hm-sc-toggle {
    width: 2.75rem;
  }
  .page-home .hm-sc-bar {
    min-height: 2.75rem;
  }
}

@media (max-width: 560px) {
  .page-home .hm-hero {
    padding-top: 6.5rem;
  }
  /* Kun nettleservinduet. Mobilappen har egen seksjon lenger ned. */
  .page-home .hm-sc-stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-home .hm-ph {
    display: none;
  }
  .page-home .hm-win {
    border-radius: var(--lt-radius-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hm-sc-track,
  .page-home .hm-sc-pane,
  .page-home .hm-sc[data-hm-slide="2"] .hm-sc-pane,
  .page-home .hm-app-nav,
  .page-home .hm-sc-tab,
  .page-home .hm-sc-tab::after,
  .page-home .hm-sc-toggle {
    transition: none;
  }
}