/* ===========================================================================
   The sales page in Lys. Colours, radii, shadows and type steps come from
   lys-tokens.css (a copy of apps/web's one token file, made by build.mjs);
   the few values only this page needs are the --s- tokens just below, each
   named with what it is for. No raw number sits in a rule further down.

   The picture to hold it against is docs/skisser/lys/skjermbilder/
   referanse-1.png: a white 40px frame on cool grey, a cyan hero card with
   line-art people, hairline stat cards with one peach and one purple
   variant, a 28px arrow circle in the corner of a card.
   ========================================================================= */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}
/* The dashboard's handwriting (next/font's Caveat 600 in apps/web), for the
   one word the drawing writes by hand. The latin subset holds æøå. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/caveat-semibold-latin.woff2") format("woff2");
}

:root {
  --s-wrap: min(90vw, var(--l-max));                 /* the one content width */
  --s-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);  /* between sections */
  --s-h1: clamp(2.125rem, 1.4rem + 3.1vw, 3.625rem); /* 34–58, the hero line */
  --s-h2: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);   /* 26–40, section titles */
  --s-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /* 17–20, card titles */
  --s-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);/* 17–20, the hero sentence */
  --s-price: clamp(3rem, 2.2rem + 3.4vw, 4.75rem);   /* 48–76, «1 490» */
  --s-hair: 1px;                                     /* card borders */
  --s-ring: 2px;                                     /* the focus ring's offset line */
  --s-dot: 0.5rem;                                   /* status dots */
  --s-hero-art: 17rem;                               /* the tradesperson on a phone */
  --s-hero-art-lg: 23rem;                            /* … and from 64rem up */
  --s-call-w: 16.5rem;                               /* the floating «ringer» card */
  --s-measure: 38rem;                                /* a readable line of prose */
  --s-measure-sm: 30rem;
  --s-wiggle: 14deg;                                 /* how far the ringing handset tips */
  --s-ring-scale: 1.9;                               /* how far a ring wave spreads */
  --s-ring-time: 1.6s;
  --s-switch-w: 2.75rem;                             /* a settings toggle in the mock phone */
  --s-switch-h: 1.5rem;
  --s-knob: 1.125rem;
  --s-knob-gap: 0.1875rem;                           /* knob to track edge */
  --s-step: 2rem;                                    /* the «01» circle on a step card */
  --s-mock-side: 11.5rem;                            /* the mock app's sidebar */
  --s-mock-rail: 4rem;                               /* the same menu as icons, on a tablet */
  --s-mock-skjerm: 34rem;                            /* each desk screen's height, the overview's */
  --s-mock-orb: 5.5rem;                              /* the assistant's orb */
  --s-phone-skjerm: 30rem;                           /* the phone's screen above its tabs */
  --s-mock-figur: 6.5rem;                            /* the trade's figure beside «God dag» */
  --s-mock-ikon: 2rem;                               /* a key figure's big icon */
  --s-mock-ring: 7rem;                               /* the booking ring */
  --s-mock-hjelper: 4.25rem;                         /* the helper beside the phone's «I dag» */
  --s-mock-bitte: 0.625rem;                          /* the phone's tab labels, five abreast */
  --s-tkort-ikon: 2.125rem;                          /* a list card's drawing on the mock phone: the dashboard's 46 px at the mock's 3/4 */
  --s-tkort-pil: 1.75rem;                            /* … and its white arrow circle (36 px there) */
  --s-kal-ikon: 1.5rem;                              /* a calendar card's drawing, and a step's (32 px there) */
  --s-jobbkort: 78%;                                 /* a job card in a step's row: the next one peeks in, so the row reads as one to swipe */
  --s-hand: "Caveat", cursive;                       /* the dashboard's handwriting, for «haster!» on a card */
  --s-phone-w: 19rem;                                /* the mock phone */
  --s-phone-r: 2.5rem;
  --s-phone-bezel: 0.5rem;
  --s-notch-w: 5rem;
  --s-notch-h: 0.375rem;
  --s-chart-min: 6.5rem;                             /* the bar chart's height when it has no tall card to fill */
  --s-plus: 0.875rem;                                /* the plus that turns on an open question */
  --s-contact-art: 15rem;                            /* the trade's figure in the contact card, by height */
  --s-rise: 1.25rem;                                 /* how far a section travels as it scrolls into view */
  --s-rise-time: 560ms;                              /* … and how long it takes; --l-t-slow reads as a jump over that distance */
  --s-stagger: 70ms;                                 /* between cards that arrive together */
}

/* The dashboard's motion tokens (the shared contract: tokens.css gains
   --l-lift, --l-lift-sm, --l-press, --l-sh-hover and --l-nudge). lys-tokens.css
   is a copy of tokens.css that build.mjs refreshes, so the site cannot add
   them there by hand, and until that copy carries them the site needs its
   own. They sit in a cascade layer on purpose: an unlayered declaration beats
   a layered one whatever the order, so the day lys-tokens.css declares the
   same names, the dashboard's values win and this block goes quiet instead
   of quietly overriding them. */
@layer site-fallback {
  :root {
    --l-lift: -2px;         /* a card rising under the pointer */
    --l-lift-sm: -1px;      /* a button or pill doing the same, less */
    --l-press: .98;         /* the scale of anything held down */
    --l-sh-hover: 0 18px 44px rgba(29, 29, 79, .11), 0 3px 8px rgba(29, 29, 79, .05);  /* one step above --l-sh-card */
    --l-nudge: 3px;         /* how far an arrow leans toward where it goes */
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--l-bg);
  color: var(--l-ink);
  font-family: var(--l-font);
  font-size: var(--l-t-body);
  line-height: var(--l-lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: var(--s-hair); height: var(--s-hair); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: var(--s-ring) solid var(--l-purple); outline-offset: var(--s-ring); }
[id] { scroll-margin-top: var(--l-s-6); }

.skip {
  position: absolute; left: var(--l-s-4); top: var(--l-s-4); z-index: var(--l-z-toast);
  padding: var(--l-s-3) var(--l-s-5); border-radius: var(--l-r-pill);
  background: var(--l-ink); color: var(--l-on-fill); font-weight: var(--l-w-semi);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---- the frame: one white sheet on grey, like the reference's app ---- */
.frame {
  margin: var(--l-frame-inset);
  background: var(--l-frame);
  border-radius: var(--l-r-frame);
  box-shadow: var(--l-sh-frame);
  overflow: hidden;
  padding-block-end: var(--l-s-7);
}
.wrap { width: var(--s-wrap); margin-inline: auto; }

/* ---- header ---- */
.top {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  gap: var(--l-s-4);
  padding-block: var(--l-s-6) var(--l-s-4);
}
.logo {
  display: inline-flex; align-items: center; gap: var(--l-s-2);
  font-size: var(--l-t-lg); font-weight: var(--l-w-black); letter-spacing: var(--l-ls-tight);
  text-decoration: none; min-height: var(--l-touch);
}
.logo svg { width: var(--l-icon-lg); height: var(--l-icon-lg); }
/* The founder's wordmark: sized by height, it carries its own handset descender. */
.logo__ordmerke { height: 2.25rem; width: auto; display: block; }
.logo b { color: var(--l-purple); }
/* DOM order is logo, menu, button (the order a keyboard should meet them);
   on a phone the button rides up beside the logo and the menu wraps below */
.top__cta { grid-row: 1; grid-column: 2; }
.nav {
  grid-row: 2; grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--l-s-2);
}
.nav a {
  display: inline-flex; align-items: center; gap: var(--l-s-2);
  min-height: var(--l-touch); padding-inline: var(--l-s-4);
  border-radius: var(--l-r-hero); background: var(--l-panel);
  font-size: var(--l-t-sm); font-weight: var(--l-w-med); text-decoration: none;
}
.nav a:hover { background: var(--l-frame); box-shadow: var(--l-sh-active); }
.nav svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--l-s-2);
  min-height: var(--l-control); padding-inline: var(--l-s-6);
  border-radius: var(--l-r-pill); border: var(--s-hair) solid transparent;
  background: var(--l-purple); color: var(--l-on-fill);
  font-weight: var(--l-w-semi); font-size: var(--l-t-md); text-decoration: none;
}
.btn:hover { background: var(--l-purple-deep); box-shadow: var(--l-sh-soft); }
.btn svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
.btn--light { background: var(--l-frame); color: var(--l-ink); border-color: var(--l-line-2); }
.btn--light:hover { background: var(--l-frame); box-shadow: var(--l-sh-active); }
.btn--sm { min-height: var(--l-touch); padding-inline: var(--l-s-5); font-size: var(--l-t-sm); }

/* the reference's arrow circle; 28px drawn, 44px to tap where it is a link */
.go {
  display: grid; place-items: center; flex: none;
  width: var(--l-go); height: var(--l-go); border-radius: var(--l-r-pill);
  background: var(--l-sunk); color: var(--l-ink);
}
.go svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }

@media (min-width: 64rem) {
  .top { grid-template-columns: auto 1fr auto; padding-block: var(--l-s-8) var(--l-s-6); }
  .nav { grid-row: 1; grid-column: 2; justify-content: center; }
  .top__cta { grid-column: 3; }
  .nav a { font-size: var(--l-t-md); }
}

/* ---- small pieces the whole page shares ---- */
.pill {
  display: inline-flex; align-items: center; gap: var(--l-s-2); justify-self: start;
  padding: var(--l-s-1) var(--l-s-3); border-radius: var(--l-r-pill);
  background: var(--l-yellow); color: var(--l-yellow-ink);
  font-size: var(--l-t-xs); font-weight: var(--l-w-bold);
  letter-spacing: var(--l-ls-caps); text-transform: uppercase; white-space: nowrap;
}
.pill svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
.pill--purple { background: var(--l-purple-soft); color: var(--l-purple-ink); }
.pill--green { background: var(--l-green); color: var(--l-green-ink); }
.pill--orange { background: var(--l-orange-soft); color: var(--l-orange-ink); }
.pill--plain { letter-spacing: normal; text-transform: none; font-weight: var(--l-w-semi); }
.badge {
  display: grid; place-items: center; flex: none;
  width: var(--l-badge); height: var(--l-badge); border-radius: var(--l-r-pill);
  background: var(--l-ink); color: var(--l-on-fill);
}
.badge svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
/* Drawn icons — the dashboard's TegnetIkon (komponenter.css § 34 in the web
   app), the style the founder chose on 27 Sept, used for every icon that
   stands for a thing: a navy line over a white face, the glyph's filled
   shape behind it in a colour of its own. Arrows, ticks and the parts that
   imitate a phone's own screen (the incoming call, the forwarding setting,
   the drawing's ring buttons) stay plain line icons. The line takes
   `color`; a pressed thing slides its colour a little further out. */
svg.tegnet { color: var(--l-ink); overflow: visible; }
/* A badge or a dot that carries a drawing is the drawing: the circle goes,
   as the dashboard's tiles did. The dots' own colours are set by rules of
   up to three classes (.q:nth-child(3n + 1) summary .icon-dot), hence the
   heavier :has. */
:is(.badge, .icon-dot):has(> svg.tegnet.tegnet.tegnet) { width: var(--l-tegnet-flis); height: var(--l-tegnet-flis); background: none; }
/* A size, not 100 %: the badge and the dot are grids whose one row is sized
   by its content, so a percentage height has nothing to resolve against and
   the svg falls back to its default 150 px (seen on the first build). */
:is(.badge, .icon-dot) > svg.tegnet { width: var(--l-tegnet-flis); height: var(--l-tegnet-flis); }
/* On the purple step card a navy line would sink into the purple: the
   drawing sits on a white round, as the dashboard's buttons on its purple
   card do. */
.card--purple svg.tegnet { box-sizing: content-box; padding: var(--l-s-2); border-radius: var(--l-r-pill); background: var(--l-frame); color: var(--l-ink); }
@media (prefers-reduced-motion: no-preference) {
  .tegnet__farge { transition: transform var(--l-t-base) var(--l-ease); }
  :is(button, a, summary, .l-stretch-host):hover .tegnet__farge { transform: translate(4%, 4%); }
}
.dot { width: var(--s-dot); height: var(--s-dot); border-radius: var(--l-r-pill); background: var(--l-green-ink); flex: none; }

/* ---- hero: the reference's cyan card, with a person where it has doctors ---- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: var(--l-s-7);
  padding: var(--l-inset);
  border-radius: var(--l-r-hero);
  background: var(--l-cyan);
}
/* the pink sweep in the reference's bottom-right corner */
.hero::after {
  content: ""; position: absolute; z-index: -1;
  right: calc(-1 * var(--l-s-10)); bottom: calc(-1 * var(--l-s-10));
  width: var(--s-hero-art); aspect-ratio: 1; border-radius: var(--l-r-pill);
  background: var(--l-pink);
}
.hero__copy { display: grid; gap: var(--l-s-5); align-content: center; }
.hero h1 {
  font-size: var(--s-h1); font-weight: var(--l-w-bold);
  line-height: var(--l-lh-tight); letter-spacing: var(--l-ls-tight);
}
/* the answer always starts its own line, however short the first sentence
   is («La sagen gå.» left «Pling tar» dangling on the trade pages) */
.hero h1 span { display: block; color: var(--l-purple-ink); }
.hero__lead { font-size: var(--s-lead); color: var(--l-ink-2); max-width: var(--s-measure); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--l-s-3); }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--l-s-5) var(--l-s-8); }
.hero__stats li { display: flex; align-items: center; gap: var(--l-s-3); }
.hero__stats small { display: block; font-size: var(--l-t-xs); font-weight: var(--l-w-med); color: var(--l-ink-2); }
.hero__stats b { display: block; font-size: var(--l-t-stat); font-weight: var(--l-w-bold); }

.hero__art { position: relative; display: grid; justify-items: center; align-content: end; }
.hero__art > svg { width: min(100%, var(--s-hero-art)); height: auto; }
/* The mascot scene is painted on the hero's own pale cyan; the rounded corner keeps its edge soft on any other ground. */
.hero__art > img.hero__person { width: min(100%, var(--s-hero-art)); height: auto; border-radius: var(--l-r-card); }

/* the ringing phone: a floating call card over the illustration */
.call {
  position: relative; z-index: 1;
  width: min(100%, var(--s-call-w));
  margin-top: calc(-1 * var(--l-s-8));
  display: grid; gap: var(--l-s-3);
  padding: var(--l-s-4);
  border-radius: var(--l-r-card);
  background: var(--l-frame);
  box-shadow: var(--l-sh-pop);
}
.call__head { display: flex; align-items: center; gap: var(--l-s-3); }
.call__head p { font-size: var(--l-t-xs); color: var(--l-mute); font-weight: var(--l-w-med); }
.call__head b { display: block; font-size: var(--l-t-sm); line-height: var(--l-lh-snug); }
.call__head .dot { margin-left: auto; }
.call blockquote { font-size: var(--l-t-sm); color: var(--l-ink-2); line-height: var(--l-lh-snug); }
.ringer {
  position: relative; display: grid; place-items: center; flex: none;
  width: var(--l-touch); height: var(--l-touch); border-radius: var(--l-r-pill);
  background: var(--l-purple); color: var(--l-on-fill);
}
.ringer svg { width: var(--l-icon); height: var(--l-icon); }
.ringer::before, .ringer::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: var(--s-ring) solid var(--l-purple); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ringer svg { animation: wiggle var(--s-ring-time) var(--l-ease) infinite; }
  .ringer::before, .ringer::after { animation: wave var(--s-ring-time) var(--l-ease) infinite; }
  .ringer::after { animation-delay: calc(var(--s-ring-time) / 2); }
  @keyframes wiggle {
    0%, 40%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(var(--s-wiggle)); }
    20% { transform: rotate(calc(-1 * var(--s-wiggle))); }
  }
  @keyframes wave {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(var(--s-ring-scale)); opacity: 0; }
  }
}

@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); padding: var(--l-s-9) var(--l-s-9) 0; }
  .hero__copy { padding-bottom: var(--l-s-9); }
  .hero__art { grid-template-columns: minmax(0, 1fr); }
  .hero__art > svg { width: var(--s-hero-art-lg); justify-self: end; }
  .hero__art > img.hero__person { width: var(--s-hero-art-lg); justify-self: end; }
  /* the card sits in the empty sky above the person's shoulder, so the
     illustration and the ringing phone read as one scene without either
     covering the other */
  .call { position: absolute; left: 0; top: var(--l-s-2); margin: 0; }
}

/* ---- sections ---- */
.section { padding-top: var(--s-section); }
.section__head { display: grid; gap: var(--l-s-3); margin-bottom: var(--l-s-7); max-width: var(--s-measure); }
.section__head h2, .h2 {
  font-size: var(--s-h2); font-weight: var(--l-w-bold);
  line-height: var(--l-lh-snug); letter-spacing: var(--l-ls-tight);
}
/* :not(.pill): the section's small caps pill is a <p> too, and this rule
   used to outrank .pill--purple — grey 16px text on lilac, 4.18:1 */
.section__head p:not(.pill) { color: var(--l-mute); font-size: var(--l-t-md); }

/* ---- cards: hairline white, and the reference's peach, purple, cyan ---- */
.cards { display: grid; gap: var(--l-gap); }
.card {
  position: relative;
  display: grid; gap: var(--l-s-3); align-content: start;
  padding: var(--l-card-pad);
  border: var(--s-hair) solid var(--l-line); border-radius: var(--l-r-card);
  background: var(--l-frame);
}
.card h3 { font-size: var(--s-h3); font-weight: var(--l-w-bold); line-height: var(--l-lh-snug); }
.card p { color: var(--l-mute); }
.card__text { display: grid; gap: var(--l-s-2); }
/* like the reference's stat cards: the icon at the top, the words at the foot */
.cards--steps .card:not(.forward) { align-content: space-between; gap: var(--l-s-6); }
.card__icon { width: var(--l-icon-lg); height: var(--l-icon-lg); color: var(--l-ink); }
.card--peach { background: var(--l-peach); border-color: transparent; }
.card--cyan { background: var(--l-cyan); border-color: transparent; }
.card--pink { background: var(--l-pink); border-color: transparent; }
.card--purple { background: var(--l-purple-deep); border-color: transparent; color: var(--l-on-fill); }
.card--peach p, .card--cyan p, .card--pink p { color: var(--l-ink-2); }
.card--purple p { color: var(--l-on-fill); }
.card--purple .card__icon { color: var(--l-on-fill); }
.step {
  position: absolute; top: var(--l-card-pad); right: var(--l-card-pad);
  display: grid; place-items: center;
  width: var(--s-step); height: var(--s-step); border-radius: var(--l-r-pill);
  background: var(--l-sunk); font-size: var(--l-t-sm); font-weight: var(--l-w-bold);
}
.card--peach .step, .card--cyan .step { background: var(--l-frame); }
.card--purple .step { background: var(--l-frame); color: var(--l-purple-ink); }

/* the forwarding settings, drawn as a phone's settings list */
.forward { align-content: space-between; gap: var(--l-s-5); }
.forward__list { display: grid; border-radius: var(--l-r-md); background: var(--l-panel); }
.forward__list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--l-s-3);
  padding: var(--l-s-3) var(--l-s-4); font-size: var(--l-t-sm); font-weight: var(--l-w-med);
}
.forward__list li + li { border-top: var(--s-hair) solid var(--l-line-2); }
.forward__to { display: flex; align-items: center; gap: var(--l-s-3); font-size: var(--l-t-sm); }
.forward__to b { display: block; }
.forward__to small { color: var(--l-mute); }
.switch {
  position: relative; flex: none;
  width: var(--s-switch-w); height: var(--s-switch-h); border-radius: var(--l-r-pill);
  background: var(--l-line-2);
}
.switch::after {
  content: ""; position: absolute; top: var(--s-knob-gap); left: var(--s-knob-gap);
  width: var(--s-knob); height: var(--s-knob); border-radius: var(--l-r-pill);
  background: var(--l-frame); box-shadow: var(--l-sh-soft);
}
.switch--on { background: var(--l-purple); }
.switch--on::after { left: auto; right: var(--s-knob-gap); }
.note { font-size: var(--l-t-sm); color: var(--l-mute); }

@media (min-width: 48rem) {
  .cards--2, .cards--steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two columns cannot hold a tall card beside four short ones without a
     hole, so on a tablet the settings card takes the full row */
  .cards--steps .forward { grid-column: 1 / -1; }
  .hero__art { grid-template-columns: auto auto; justify-content: center; align-items: end; column-gap: var(--l-s-5); }
  .call { margin-top: 0; align-self: center; }
}
@media (min-width: 64rem) {
  .cards--steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--steps .forward { grid-column: auto; grid-row: span 2; }
}

/* ---- «Dette ser du»: the product, drawn in HTML so it scales and reads ----
   Redrawn on 27 Sept after the dashboard as it is (Lys): the founder, «nå
   har den jo bilder av det gamle dashboardet inni. men jeg likte designet
   veldig». So the page around it is untouched, and the product inside is
   today's: on the desk the grouped menu with the white pill, «God dag» with
   the trade's figure, the four key figures, the call chart and the booking
   ring; on the phone «I dag» — the next visit in purple, who to ring back,
   the five tabs and the helper in the corner. Prefix .m-. */
.band { margin-top: var(--s-section); padding-block: var(--s-section); background: var(--l-panel); }
.band .section { padding-top: 0; }
.showcase { display: grid; gap: var(--l-s-8); align-items: start; }
.showcase figcaption { margin-top: var(--l-s-3); font-size: var(--l-t-sm); color: var(--l-mute); text-align: center; }

/* the desk */
.m-app {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  border: var(--s-hair) solid var(--l-line); border-radius: var(--l-r-hero);
  background: var(--l-frame); box-shadow: var(--l-sh-card); font-size: var(--l-t-sm);
}
.m-side { display: none; }
.m-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--l-s-4); padding: var(--l-card-pad); min-width: 0; }
.m-bar { display: flex; align-items: center; gap: var(--l-s-3); }
.m-sok {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--l-s-2);
  min-height: var(--l-touch); padding-inline: var(--l-s-4);
  border: var(--s-hair) solid var(--l-line); border-radius: var(--l-r-pill);
  box-shadow: var(--l-sh-soft); color: var(--l-placeholder);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-sok svg, .m-ikon svg { width: var(--l-icon-sm); height: var(--l-icon-sm); color: var(--l-ink); flex: none; }
.m-ikon { position: relative; display: inline-grid; place-items: center; }
.m-ikon .dot { position: absolute; top: 0; right: 0; background: var(--l-purple); }
.m-meg {
  display: grid; place-items: center; width: var(--l-avatar-sm); height: var(--l-avatar-sm); flex: none;
  border-radius: var(--l-r-pill); background: var(--l-green); color: var(--l-green-ink);
  font-weight: var(--l-w-bold); font-size: var(--l-t-xs);
}

.m-hilsen { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--l-s-3); }
.m-hilsen > div { padding-bottom: var(--l-s-3); }
.m-hilsen__hei { font-size: var(--l-t-title); font-weight: var(--l-w-bold); letter-spacing: var(--l-ls-tight); line-height: var(--l-lh-tight); }
.m-hilsen__dato { margin-top: var(--l-s-1); font-size: var(--l-t-xs); color: var(--l-mute); }
.m-hilsen__figur { flex: none; width: auto; height: var(--s-mock-figur); margin-bottom: calc(-1 * var(--l-s-4)); }

.m-nokler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--l-s-3); position: relative; }
.m-nokkel {
  position: relative; display: grid; gap: var(--l-s-1); align-content: start; min-width: 0;
  padding: var(--l-s-4); border-radius: var(--l-r-card); background: var(--l-cyan);
}
.m-nokkel--gronn { background: var(--l-green); }
.m-nokkel--rosa { background: var(--l-pink); }
.m-nokkel--fersken { background: var(--l-peach); }
.m-nokkel__ikon { position: relative; width: var(--s-mock-ikon); height: var(--s-mock-ikon); margin-bottom: var(--l-s-2); color: var(--l-purple-ink); }
.m-nokkel__ikon > svg:first-child { width: 100%; height: 100%; }
/* A phone tab that is not the current one is a quiet grey line without the
   colour, as in the real tab bar. */
.m-faner button:not([aria-current="true"]) .tegnet__farge { display: none; }
.m-faner button:not([aria-current="true"]) svg.tegnet { color: var(--l-mute); }
.m-go {
  position: absolute; top: var(--l-s-3); right: var(--l-s-3); display: grid; place-items: center;
  width: var(--l-s-7); height: var(--l-s-7); border-radius: var(--l-r-pill); background: var(--l-frame); box-shadow: var(--l-sh-soft);
}
.m-go svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
/* Two lines held for every name, so the four numbers stand on one line
   whether «Samtaler i dag» fits one line or «Bookinger denne uken» needs two. */
.m-nokkel__navn { min-height: calc(2em * var(--l-lh-snug)); font-weight: var(--l-w-semi); line-height: var(--l-lh-snug); }
.m-nokkel b { font-size: var(--l-t-display); font-weight: var(--l-w-bold); line-height: var(--l-lh-tight); letter-spacing: var(--l-ls-tight); }
.m-nokkel__mot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--l-s-1) var(--l-s-2); font-size: var(--l-t-xs); color: var(--l-ink-2); }
.m-trend { padding: 0.125em 0.5em; border-radius: var(--l-r-pill); background: var(--l-frame); color: var(--l-green-ink); font-weight: var(--l-w-bold); }

.m-rad { display: grid; gap: var(--l-s-3); }
.m-kort {
  display: grid; gap: var(--l-s-1); align-content: start; min-width: 0; padding: var(--l-s-4);
  border: var(--s-hair) solid var(--l-line); border-radius: var(--l-r-card); background: var(--l-frame);
}
.m-kort__tittel { font-weight: var(--l-w-bold); }
.m-kort__under { font-size: var(--l-t-xs); color: var(--l-mute); }
.m-graf__linje { width: 100%; height: var(--s-chart-min); margin-top: var(--l-s-2); }
.m-ringkort { justify-items: center; text-align: center; }
.m-ring { width: var(--s-mock-ring); height: auto; margin-top: var(--l-s-2); font-family: var(--l-font); }

@media (min-width: 48rem) {
  .m-nokler { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m-rad { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
/* From a tablet up the desk keeps its menu — as icons, until there is room
   for the words — so the drawing reads as the dashboard at every width it
   is drawn as one. At 760 px it had lost the menu and read as a list of
   cards (the founder, 27 Sept: «nå fjerna du bare den fine dashboard siden
   som skulle vises»). */
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .m-app { grid-template-columns: var(--s-mock-rail) minmax(0, 1fr); }
  .m-side { display: grid; align-content: start; justify-items: center; padding: var(--l-s-5) var(--l-s-2); background: var(--l-panel); }
  .m-side .logo { display: none; }
  .m-nav { display: grid; gap: var(--l-s-1); }
  .m-nav__knapp { position: relative; display: grid; place-items: center; width: var(--l-touch); height: var(--l-touch); border-radius: var(--l-r-md); }
  .m-nav__knapp > span:not(.m-nav__tall) { display: none; }
  .m-nav svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
  .m-nav__knapp[aria-current="true"] { background: var(--l-frame); box-shadow: var(--l-sh-active); }
  .m-nav__tall {
    position: absolute; top: 0; right: 0; display: grid; place-items: center; min-width: var(--l-s-4); height: var(--l-s-4);
    border-radius: var(--l-r-pill); background: var(--l-purple); color: var(--l-on-fill); font-size: var(--s-mock-bitte); font-weight: var(--l-w-bold);
  }
}
@media (min-width: 64rem) {
  .showcase { grid-template-columns: minmax(0, 1fr) var(--s-phone-w); }
  .m-app { grid-template-columns: var(--s-mock-side) minmax(0, 1fr); }
  .m-side { display: grid; align-content: start; gap: var(--l-s-5); padding: var(--l-s-6) var(--l-s-3); background: var(--l-panel); }
  .m-side .logo { min-height: 0; padding-left: var(--l-s-2); }
  .m-nav { display: grid; gap: var(--l-s-1); }
  .m-nav__knapp { display: flex; align-items: center; gap: var(--l-s-3); width: 100%; padding: var(--l-s-2) var(--l-s-3); border-radius: var(--l-r-md); font-weight: var(--l-w-med); white-space: nowrap; text-align: left; }
  .m-nav svg { width: var(--l-icon-sm); height: var(--l-icon-sm); flex: none; }
  .m-nav__knapp[aria-current="true"] { background: var(--l-frame); box-shadow: var(--l-sh-active); font-weight: var(--l-w-semi); }
  .m-nav__tall {
    margin-left: auto; display: inline-grid; place-items: center; min-width: var(--l-s-5); height: var(--l-s-5); padding-inline: var(--l-s-1);
    border-radius: var(--l-r-pill); background: var(--l-purple); color: var(--l-on-fill); font-size: var(--l-t-xs); font-weight: var(--l-w-bold);
  }
}

/* The drawing answers presses (assets/site.js): a control in it is a real
   button with the page's type, and the screen it opens replaces the one
   shown. The founder, 27 Sept: «gjør det som et interaktivt ting så jeg kan
   trykke rundt der, også på den mobilen». */
/* :where, not :is: a reset must weigh nothing. As :is it took the weight of
   its heaviest argument (.m-faner button) and stripped the colour from
   every single-class button — the stage's white «Legg på», the chips, the
   key figures (seen in Chrome, 27 Sept). */
:where(.m-nav__knapp, .m-nokkel, .m-chip, .m-dag, .m-ferdig, .m-lenke, .m-bryter, .m-snakk, .m-faner button) {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
:where(.m-nav__knapp, .m-nokkel, .m-chip, .m-dag, .m-ferdig, .m-lenke, .m-bryter, .m-snakk, .m-faner button):focus-visible { outline: none; box-shadow: var(--l-sh-focus); }
.m-nokkel { width: 100%; text-align: left; }
/* A screen's own display would outrank the hidden attribute — and so would a
   count's: site.js hides a count that reaches 0, and the tab went on
   showing «0» (seen ticking both messages away, 27 Sept). */
:is(.m-skjerm, .m-tlf, .m-besok, .m-replikk, .m-liste > li, .m-rader > li, .m-antall, .m-faner__tall, .m-nav__tall)[hidden] { display: none; }
.m-skjerm { display: grid; gap: var(--l-s-4); align-content: start; min-width: 0; }
.m-skjerm__tittel { font-size: var(--l-t-title); font-weight: var(--l-w-bold); letter-spacing: var(--l-ls-tight); line-height: var(--l-lh-tight); }
.m-seksjonsnavn { font-weight: var(--l-w-bold); }

.m-chips { display: flex; flex-wrap: wrap; gap: var(--l-s-2); }
.m-chip { min-height: var(--l-s-8); padding-inline: var(--l-s-4); border-radius: var(--l-r-pill); background: var(--l-panel); font-weight: var(--l-w-semi); }
.m-chip[aria-pressed="true"] { background: var(--l-purple); color: var(--l-on-fill); }

.m-liste { display: grid; padding-inline: var(--l-s-4); border: var(--s-hair) solid var(--l-line); border-radius: var(--l-r-card); background: var(--l-frame); }
.m-liste > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; align-items: center; gap: var(--l-s-3); padding-block: var(--l-s-3); }
.m-liste > li + li { border-top: var(--s-hair) solid var(--l-line); }
.m-liste__tekst { display: grid; min-width: 0; }
.m-liste__tekst b { display: flex; align-items: center; gap: var(--l-s-1); line-height: var(--l-lh-snug); }
.m-liste__tekst small { font-size: var(--l-t-xs); color: var(--l-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-liste__tid { font-size: var(--l-t-xs); font-weight: var(--l-w-semi); color: var(--l-ink-2); white-space: nowrap; }
.m-tom { display: block; padding-block: var(--l-s-4); color: var(--l-mute); font-size: var(--l-t-xs); }
.m-liste > li.m-tom, .m-rader > li.m-tom { display: block; }
.m-pill { padding: 0.2em 0.65em; border-radius: var(--l-r-pill); font-size: var(--l-t-xs); font-weight: var(--l-w-semi); white-space: nowrap; }
.m-pill--akutt { background: var(--l-orange-soft); color: var(--l-orange-ink); }
.m-pill--booket { background: var(--l-green); color: var(--l-green-ink); }
.m-pill--beskjed, .m-pill--lilla { background: var(--l-purple-soft); color: var(--l-purple-ink); }
.m-av--lilla { background: var(--l-purple-soft); color: var(--l-purple-ink); }
.m-av--fersken { background: var(--l-peach); color: var(--l-peach-ink); }
.m-av--gronn { background: var(--l-green); color: var(--l-green-ink); }
.m-ferdig {
  display: grid; place-items: center; width: var(--l-s-8); height: var(--l-s-8); flex: none;
  border-radius: var(--l-r-pill); background: var(--l-frame); box-shadow: inset 0 0 0 var(--s-hair) var(--l-line-2); color: var(--l-purple-ink);
}
.m-ferdig svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }

.m-uke { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--l-s-2); }
.m-dag { display: grid; justify-items: center; gap: 0.125rem; padding-block: var(--l-s-2); border-radius: var(--l-r-md); background: var(--l-panel); }
.m-dag small { font-size: var(--l-t-xs); color: var(--l-mute); }
.m-dag b { font-size: var(--l-t-md); }
.m-dag[aria-pressed="true"] { background: var(--l-purple); color: var(--l-on-fill); }
.m-dag[aria-pressed="true"] small { color: var(--l-on-fill); }
.m-besok__tid { display: grid; justify-items: center; min-width: var(--l-s-10); padding: var(--l-s-1) var(--l-s-2); border-radius: var(--l-r-md); background: var(--l-cyan); color: var(--l-cyan-ink); }
.m-besok__tid b { font-size: var(--l-t-sm); }
.m-besok__tid small { font-size: var(--l-t-xs); }

.m-tavle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--l-s-3); }
.m-kol { display: grid; gap: var(--l-s-2); align-content: start; padding: var(--l-s-3); border-radius: var(--l-r-card); background: var(--l-panel); }
.m-kol__navn { display: flex; align-items: center; gap: var(--l-s-2); font-weight: var(--l-w-bold); }
.m-kol__navn span { margin-left: auto; font-size: var(--l-t-xs); color: var(--l-mute); }
.m-kol__prikk { flex: none; width: var(--l-s-2); height: var(--l-s-2); border-radius: var(--l-r-pill); background: var(--l-mute); }
.m-kol__prikk--ny { background: var(--l-orange); }
.m-kol__prikk--befaring { background: var(--l-cyan-ink); }
.m-kol__prikk--tilbud { background: var(--l-purple); }
.m-kol__prikk--planlagt { background: var(--l-pink-ink); }
.m-kol ul { display: grid; gap: var(--l-s-2); }
.m-kol li { display: grid; gap: 0.125rem; padding: var(--l-s-3); border-radius: var(--l-r-md); background: var(--l-frame); box-shadow: var(--l-sh-soft); }
.m-kol li small { font-size: var(--l-t-xs); color: var(--l-mute); }

.m-band { display: flex; align-items: center; justify-content: space-between; gap: var(--l-s-4); padding: var(--l-s-5); border-radius: var(--l-r-card); background: var(--l-cyan); }
.m-band__nr { font-size: var(--l-t-md); font-weight: var(--l-w-bold); }
.m-band__linje { font-size: var(--l-t-xs); color: var(--l-ink-2); }
.m-bryter { display: inline-flex; align-items: center; gap: var(--l-s-2); font-weight: var(--l-w-semi); }
.m-bryter__spor { position: relative; width: var(--l-s-9); height: var(--l-s-5); border-radius: var(--l-r-pill); background: var(--l-line-2); }
.m-bryter__spor::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: calc(var(--l-s-5) - 0.25rem); aspect-ratio: 1; border-radius: var(--l-r-pill); background: var(--l-frame); box-shadow: var(--l-sh-soft); }
.m-bryter[aria-pressed="true"] .m-bryter__spor { background: var(--l-green-ink); }
.m-bryter[aria-pressed="true"] .m-bryter__spor::after { left: auto; right: 0.125rem; }
.m-fakta { display: grid; gap: var(--l-s-3); }
.m-fakta li { display: flex; align-items: center; gap: var(--l-s-3); padding: var(--l-s-3) var(--l-s-4); border: var(--s-hair) solid var(--l-line); border-radius: var(--l-r-card); background: var(--l-frame); }
.m-fakta svg { flex: none; width: var(--l-icon); height: var(--l-icon); }
.m-fakta span { display: grid; }
.m-fakta small { font-size: var(--l-t-xs); color: var(--l-mute); }

/* The assistant's stage, small, as on /assistent: the orb, the name, the
   bars and the button; «Hør din egen Pling» plays its first line here. */
.m-scene { display: grid; gap: var(--l-s-3); padding: var(--l-s-5); border-radius: var(--l-r-card); background: var(--l-purple); color: var(--l-on-fill); }
.m-stemme { display: flex; align-items: center; gap: var(--l-s-5); }
.m-orb { position: relative; display: grid; place-items: center; flex: none; width: var(--s-mock-orb); aspect-ratio: 1; }
.m-orb > i { position: absolute; inset: 0; border-radius: var(--l-r-pill); background: var(--l-on-fill); opacity: 0.12; }
.m-orb > i:nth-child(2) { inset: 10%; opacity: 0.16; }
.m-orb > i:nth-child(3) { inset: 20%; opacity: 0.22; }
.m-orb__kjerne { position: relative; display: grid; place-items: center; width: 50%; aspect-ratio: 1; border-radius: var(--l-r-pill); background: var(--l-grad-perle); color: var(--l-purple); box-shadow: var(--l-sh-hover); }
.m-orb__kjerne svg { width: 45%; height: 45%; }
.m-stemme__side { display: grid; gap: var(--l-s-2); justify-items: start; }
.m-stemme__tittel { font-size: var(--l-t-md); font-weight: var(--l-w-bold); }
.m-bolge { display: flex; align-items: center; gap: var(--l-s-1); height: var(--l-s-6); }
.m-bolge i { --k: 1; width: 0.25rem; height: 0.3125rem; border-radius: var(--l-r-pill); background: var(--l-on-fill); }
.m-bolge i:nth-child(1), .m-bolge i:nth-child(9) { --k: 0.3; }
.m-bolge i:nth-child(2), .m-bolge i:nth-child(8) { --k: 0.55; }
.m-bolge i:nth-child(3), .m-bolge i:nth-child(7) { --k: 0.8; }
.m-bolge i:nth-child(4), .m-bolge i:nth-child(6) { --k: 0.95; }
.m-bolge i:nth-child(5) { --k: 0.7; }
.m-snakk { display: inline-flex; align-items: center; gap: var(--l-s-2); min-height: var(--l-touch); padding-inline: var(--l-s-4); border-radius: var(--l-r-pill); background: var(--l-frame); color: var(--l-purple-ink); font-weight: var(--l-w-semi); }
.m-snakk svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
.m-replikk { padding: var(--l-s-3) var(--l-s-4); border-radius: var(--l-r-md); background: var(--l-purple-deep); font-size: var(--l-t-sm); line-height: var(--l-lh-snug); }
.m-sitat { padding: var(--l-s-3) var(--l-s-4); border-left: var(--l-s-1) solid var(--l-pink); border-radius: var(--l-r-md); background: var(--l-panel); line-height: var(--l-lh-snug); }

@media (min-width: 48rem) {
  .m-tavle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m-fakta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  /* The desk keeps its height as the screens change: the overview is the
     tallest, and a short screen under it would pull the phone up and down. */
  .m-skjerm { min-height: var(--s-mock-skjerm); }
}

/* the phone: the same product at arm's length on a roof */
.phone {
  position: relative; justify-self: center; width: min(100%, var(--s-phone-w));
  display: grid; gap: var(--l-s-3);
  padding: var(--l-s-3) var(--l-s-3) var(--l-s-4);
  border: var(--s-phone-bezel) solid var(--l-ink); border-radius: var(--s-phone-r);
  background: var(--l-panel); box-shadow: var(--l-sh-pop);
  font-size: var(--l-t-sm);
}
.phone__notch { justify-self: center; width: var(--s-notch-w); height: var(--s-notch-h); border-radius: var(--l-r-pill); background: var(--l-ink); }
.m-tlfskjermer { height: var(--s-phone-skjerm); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.m-tlf { display: grid; gap: var(--l-s-3); align-content: start; }
.m-idag { padding-inline: var(--l-s-1) var(--s-mock-hjelper); } /* room for the helper beside it */
/* The phone's lists as the dashboard draws them since the founder's pick of
   27 Sept (A, komponenter.css § 35 in the web app), after a line of time he
   tried the same evening and let go («ikke den tidslinjetingen»): his own
   key cards as rows. A card is tinted by what it is about, carries that
   drawing large at its top left and a white arrow circle at its top right,
   and an urgent one says so in handwriting. The tints are the dashboard's
   own pairs (ikoner.tsx TEGNET_FARGE: a drop is cyan, a bolt peach, akutt
   orange), so the drawing and its card agree. */
.m-kortliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--l-s-2); }
:is(.m-akort, .m-dagkort) { --tkort: var(--l-tint-lavender); position: relative; border-radius: var(--l-r-tkort); background: var(--tkort); color: var(--l-ink); }
.m-akort--cyan { --tkort: var(--l-tint-cyan); }
.m-akort--fersken { --tkort: var(--l-tint-peach); }
.m-akort--oransje { --tkort: var(--l-orange-soft); }
.m-akort svg.tegnet { width: var(--s-tkort-ikon); height: var(--s-tkort-ikon); }
.m-akort__pil {
  display: inline-grid; place-items: center; flex: none; width: var(--s-tkort-pil); height: var(--s-tkort-pil);
  border-radius: var(--l-r-pill); background: var(--l-frame); color: var(--l-ink); box-shadow: var(--l-sh-soft);
}
.m-akort__pil svg { width: 45%; height: 45%; }
/* Who waits: what the caller wants as the headline, who and when under it,
   and «Ring …» as a white pill. The first <b> in the card is the name, and
   site.js clears a person from every list by it. */
.m-kortliste > .m-akort {
  display: grid; grid-template-columns: var(--s-tkort-ikon) minmax(0, 1fr); grid-template-areas: "ikon tekst" "ikon hvem" ". knapper";
  column-gap: var(--l-s-3); row-gap: var(--l-s-1); align-items: start; padding: var(--l-s-3);
}
.m-kortliste > .m-akort > svg.tegnet { grid-area: ikon; }
.m-kortliste .m-akort__pil { position: absolute; top: var(--l-s-3); right: var(--l-s-3); }
.m-akort__hand {
  position: absolute; top: calc(var(--l-s-3) + var(--s-tkort-pil) + var(--l-s-1)); right: var(--l-s-2);
  font-family: var(--s-hand); font-size: var(--l-t-md); font-weight: var(--l-w-semi); line-height: 1;
  color: var(--l-orange-ink); transform: rotate(-8deg); white-space: nowrap;
}
.m-akort__tekst {
  grid-area: tekst; padding-right: calc(var(--s-tkort-pil) + var(--l-s-2));
  font-weight: var(--l-w-bold); line-height: var(--l-lh-snug); letter-spacing: var(--l-ls-tight);
}
.m-akort__hvem { grid-area: hvem; font-size: var(--l-t-xs); color: var(--l-ink-2); }
.m-akort__hvem b { color: var(--l-ink); }
.m-akort__knapper { grid-area: knapper; display: flex; align-items: center; gap: var(--l-s-2); margin-top: var(--l-s-1); }
.m-hvitpille {
  display: inline-flex; align-items: center; gap: var(--l-s-1); height: var(--l-s-8); padding: 0 var(--l-s-3) 0 var(--l-s-2);
  border-radius: var(--l-r-pill); background: var(--l-frame); color: var(--l-ink); font-weight: var(--l-w-bold); box-shadow: var(--l-sh-soft);
}
.m-akort .m-hvitpille svg.tegnet { width: var(--l-icon-sm); height: var(--l-icon-sm); }
/* The tick on a tinted card is the card's own colour seen through white, as
   the dashboard's is: a second white pill beside «Ring» would read as a
   second call. */
.m-ferdig--kort { background: color-mix(in srgb, var(--l-frame) 60%, transparent); box-shadow: none; }
.m-kortliste > .m-tom { padding-inline: var(--l-s-1); }
/* Kalender: a visit is a card with its start time large, who and where,
   and the drawing of the matter at its right; a free gap is a dotted rule
   with «+ Book»; «nå» is an orange rule with Pling riding its end. */
.m-dagkort { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--l-s-3); padding: var(--l-s-3); }
.m-dagkort__tid { display: grid; gap: 0.125rem; font-variant-numeric: tabular-nums; }
.m-dagkort__tid b { font-size: var(--l-t-md); font-weight: var(--l-w-bold); letter-spacing: var(--l-ls-tight); line-height: var(--l-lh-tight); }
.m-dagkort__tid small { font-size: var(--l-t-xs); font-weight: var(--l-w-med); color: var(--l-ink-2); }
.m-dagkort__tekst { display: grid; gap: 0.125rem; min-width: 0; line-height: var(--l-lh-snug); }
.m-dagkort__tekst small { font-size: var(--l-t-xs); color: var(--l-ink-2); }
.m-dagkort > svg.tegnet { width: var(--s-kal-ikon); height: var(--s-kal-ikon); }
.m-pling { display: flex; align-items: center; gap: var(--l-s-1); margin-top: var(--l-s-1); font-size: var(--s-mock-bitte); font-weight: var(--l-w-bold); color: var(--l-purple-ink); }
.m-pling__hode { display: block; flex: none; width: var(--l-icon-sm); height: var(--l-icon-sm); border-radius: var(--l-r-pill); background: var(--l-purple-soft); }
.m-ledig { display: flex; align-items: center; gap: var(--l-s-2); padding-inline: var(--l-s-1); color: var(--l-mute); font-size: var(--l-t-xs); font-weight: var(--l-w-semi); }
.m-ledig::after { content: ""; order: 1; flex: 1 1 auto; border-top: 2px dotted var(--l-purple-line); }
.m-ledig__book { order: 2; color: var(--l-purple-ink); font-weight: var(--l-w-bold); }
.m-na { display: flex; align-items: center; gap: var(--l-s-1); font-size: var(--s-mock-bitte); font-weight: var(--l-w-bold); font-variant-numeric: tabular-nums; }
.m-na::before { content: ""; flex: none; width: 0.625rem; height: 0.625rem; border-radius: var(--l-r-pill); background: var(--l-orange); }
.m-na::after { content: ""; order: 1; flex: 1 1 auto; height: 2px; border-radius: var(--l-r-pill); background: var(--l-orange); }
.m-na__tid { order: 2; padding: 0.0625rem var(--l-s-2); border-radius: var(--l-r-pill); background: var(--l-orange); color: var(--l-ink); }
.m-na .m-pling__hode { order: 3; background: var(--l-orange-soft); }
/* Oppdrag: each step a head with its drawing and count, and its jobs as
   cards side by side that the thumb swipes through, as on the phone. The
   row scrolls inside the screen and never bleeds past it: the screen
   scrolls on y, which makes its x a scroller too. */
.m-steg { display: grid; gap: var(--l-s-2); min-width: 0; }
.m-steg__head { display: flex; align-items: center; gap: var(--l-s-2); padding-inline: var(--l-s-1); }
.m-steg__head svg.tegnet { width: var(--s-kal-ikon); height: var(--s-kal-ikon); }
.m-steg__head b { font-size: var(--l-t-md); font-weight: var(--l-w-bold); }
.m-steg__antall { color: var(--l-mute); font-weight: var(--l-w-bold); font-variant-numeric: tabular-nums; }
.m-karusell {
  list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: var(--s-jobbkort); gap: var(--l-s-2);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.m-jobbkort { display: grid; align-content: start; gap: 0.125rem; padding: var(--l-s-3); scroll-snap-align: start; line-height: var(--l-lh-snug); }
.m-jobbkort__topp { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--l-s-2); }
.m-jobbkort small { font-size: var(--l-t-xs); color: var(--l-ink-2); }
.m-lenke { color: var(--l-purple-ink); font-size: var(--l-t-xs); font-weight: var(--l-w-semi); }
.m-rader--tid li { grid-template-columns: auto minmax(0, 1fr); }
.m-rader--meny li { grid-template-columns: auto minmax(0, 1fr); }
.m-rader--meny svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
.m-idag__tittel { font-size: var(--l-t-title); font-weight: var(--l-w-bold); letter-spacing: var(--l-ls-tight); line-height: var(--l-lh-tight); }
.m-idag__dato { margin-top: var(--l-s-1); font-size: var(--l-t-xs); color: var(--l-mute); }
/* --l-purple-deep, as on the real card: white small text on the lighter
   purple measured under AA on the dashboard (4.16:1). */
.m-neste { display: grid; gap: var(--l-s-1); padding: var(--l-s-4); border-radius: var(--l-r-card); background: var(--l-purple-deep); color: var(--l-on-fill); box-shadow: var(--l-sh-card); }
.m-neste__tag { font-size: var(--l-t-xs); font-weight: var(--l-w-semi); letter-spacing: var(--l-ls-caps); text-transform: uppercase; }
.m-neste__tid { font-size: var(--l-t-display); font-weight: var(--l-w-bold); line-height: var(--l-lh-tight); }
.m-neste__navn { font-size: var(--l-t-md); font-weight: var(--l-w-bold); }
.m-neste__adr { font-size: var(--l-t-xs); line-height: var(--l-lh-snug); }
.m-neste__knapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--l-s-2); margin-top: var(--l-s-2); }
/* Rows, the drawing beside its word, as the dashboard's next visit has been
   since 28 Sept (side-i-dag.css .lf-knapp). */
.m-neste__knapper span {
  display: flex; justify-content: center; align-items: center; gap: var(--l-s-1); padding: var(--l-s-2) var(--l-s-1);
  border-radius: var(--l-r-md); background: var(--l-frame); color: var(--l-purple-ink); font-size: var(--l-t-xs); font-weight: var(--l-w-semi);
}
.m-neste__knapper svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
.m-seksjon { display: flex; align-items: center; justify-content: space-between; gap: var(--l-s-2); padding-inline: var(--l-s-1); }
.m-seksjon b { display: inline-flex; align-items: center; gap: var(--l-s-2); font-size: var(--l-t-md); }
.m-seksjon > span { color: var(--l-purple-ink); font-size: var(--l-t-xs); font-weight: var(--l-w-semi); }
.m-antall, .m-faner__tall {
  display: inline-grid; place-items: center; min-width: var(--l-s-5); height: var(--l-s-5); padding-inline: var(--l-s-1);
  border-radius: var(--l-r-pill); background: var(--l-purple); color: var(--l-on-fill); font-size: var(--l-t-xs); font-weight: var(--l-w-bold); font-style: normal;
}
.m-rader { display: grid; padding-inline: var(--l-s-3); border: var(--s-hair) solid var(--l-line); border-radius: var(--l-r-card); background: var(--l-frame); }
.m-rader li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--l-s-2); padding-block: var(--l-s-3); }
.m-rader li + li { border-top: var(--s-hair) solid var(--l-line); }
.m-av { display: grid; place-items: center; width: var(--l-avatar-sm); height: var(--l-avatar-sm); border-radius: var(--l-r-pill); font-size: var(--l-t-xs); font-weight: var(--l-w-bold); }
.m-av--cyan { background: var(--l-cyan); color: var(--l-cyan-ink); }
.m-av--rosa { background: var(--l-pink); color: var(--l-pink-ink); }
.m-rader__tekst { display: grid; min-width: 0; }
.m-rader__tekst b { display: flex; align-items: center; gap: var(--l-s-1); line-height: var(--l-lh-snug); }
.m-rader__tekst small { font-size: var(--l-t-xs); color: var(--l-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-prikk { flex: none; width: var(--l-s-2); height: var(--l-s-2); border-radius: var(--l-r-pill); background: var(--l-orange); }
.m-rader__tid { font-size: var(--l-t-xs); font-weight: var(--l-w-semi); }
.m-ringknapp { display: grid; place-items: center; width: var(--l-s-8); height: var(--l-s-8); border-radius: var(--l-r-pill); background: var(--l-green); color: var(--l-green-ink); }
.m-ringknapp svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
.m-faner {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: var(--l-s-2);
  border-radius: var(--l-r-card); background: var(--l-frame); box-shadow: var(--l-sh-soft);
}
.m-faner button { position: relative; display: grid; justify-items: center; gap: var(--l-s-1); padding-block: var(--l-s-1); font-size: var(--s-mock-bitte); color: var(--l-mute); }
.m-faner svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
.m-faner [aria-current="true"] { color: var(--l-purple-ink); font-weight: var(--l-w-semi); }
.m-faner__tall { position: absolute; top: calc(-1 * var(--l-s-1)); left: 55%; }
/* The helper that stands on every page of the real app, here beside «I
   dag» where the phone has room: in its real corner it covered Kari's call
   button, and half outside the phone it was cut by the band. */
.m-hjelper { position: absolute; top: calc(var(--s-notch-h) + var(--l-s-5)); right: var(--l-s-4); width: auto; height: var(--s-mock-hjelper); pointer-events: none; }
/* Off «I dag» the other tabs have room at the foot, so the helper stands in
   its real corner, over the tabs, instead of on the page's first row. */
.phone:has(section[data-tlf="idag"][hidden]) .m-hjelper { top: auto; bottom: calc(var(--l-s-10) + var(--l-s-4)); }

/* ---- price: the reference's purple card carries the one number ---- */
.pricing { display: grid; gap: var(--l-gap); }
.price {
  display: flex; flex-direction: column; gap: var(--l-s-5);
  padding: var(--l-inset); border-radius: var(--l-r-hero);
  background: var(--l-purple-deep); color: var(--l-on-fill);
}
.price__num { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--l-s-2) var(--l-s-3); }
.price__num b { font-size: var(--s-price); font-weight: var(--l-w-bold); line-height: var(--l-lh-tight); letter-spacing: var(--l-ls-tight); }
.price__num span { font-size: var(--l-t-md); }
.price ul { display: grid; gap: var(--l-s-3); }
.price li { display: flex; align-items: center; gap: var(--l-s-3); }
.price li svg {
  width: var(--l-go); height: var(--l-go); padding: var(--l-s-1); flex: none;
  border-radius: var(--l-r-pill); background: var(--l-frame); color: var(--l-purple-ink);
}
.price .pill { align-self: flex-start; }
/* the button and its note sit at the foot of the card, however tall the grid makes it */
.price .btn--light { align-self: flex-start; margin-top: auto; border-color: transparent; }
.price .note { color: var(--l-on-fill); }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--l-gap); }
.fact { align-content: space-between; gap: var(--l-s-5); }
.fact b { color: var(--l-ink); display: block; font-size: var(--l-t-display); font-weight: var(--l-w-bold); line-height: var(--l-lh-tight); letter-spacing: var(--l-ls-tight); }
.fact span { display: block; margin-top: var(--l-s-1); color: var(--l-ink-2); font-size: var(--l-t-sm); font-weight: var(--l-w-med); }

.calc { gap: var(--l-s-5); }
.calc__head, .calc__out { display: grid; gap: var(--l-s-3); }
.calc label { font-weight: var(--l-w-semi); }
.calc input[type="range"] { width: 100%; min-height: var(--l-touch); margin: 0; accent-color: var(--l-purple); }
.calc__value { display: flex; align-items: baseline; gap: var(--l-s-2); }
.calc__value output { color: var(--l-ink); font-size: var(--l-t-display); font-weight: var(--l-w-bold); }
.calc__value span { color: var(--l-mute); }
.calc dl { display: grid; gap: var(--l-s-2); }
.calc dl div {
  display: flex; justify-content: space-between; gap: var(--l-s-3);
  padding: var(--l-s-3) var(--l-s-4); border-radius: var(--l-r-md); background: var(--l-panel);
}
.calc dt { color: var(--l-mute); }
.calc dd { font-weight: var(--l-w-semi); }
.calc .calc__total { background: var(--l-purple-soft); }
.calc .calc__total dt, .calc .calc__total dd { color: var(--l-purple-ink); font-weight: var(--l-w-bold); }

@media (min-width: 64rem) {
  .pricing { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .price { grid-row: span 2; }
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--l-s-7); align-items: start; }
}

/* ---- questions: each one a card, the urgent one opened out ---- */
.faq { display: grid; gap: var(--l-gap); }
.urgent { gap: var(--l-s-5); background: var(--l-orange-soft); border-color: transparent; }
.urgent > p { color: var(--l-ink-2); max-width: var(--s-measure); }
.urgent__head { display: flex; align-items: center; gap: var(--l-s-3); }
.urgent__examples { display: grid; gap: var(--l-s-3); }
.urgent__examples li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--l-s-1) var(--l-s-3); align-items: start;
  padding: var(--l-s-4); border-radius: var(--l-r-md); background: var(--l-frame);
}
.urgent__examples svg { grid-row: span 2; width: var(--l-icon-lg); height: var(--l-icon-lg); }
.urgent__examples b { font-size: var(--l-t-sm); color: var(--l-orange-ink); }
.urgent__examples span { color: var(--l-ink); font-weight: var(--l-w-med); }
.icon-dot {
  display: grid; place-items: center; flex: none;
  width: var(--l-avatar); height: var(--l-avatar); border-radius: var(--l-r-pill);
  background: var(--l-frame); color: var(--l-ink);
}
.icon-dot svg { width: var(--l-icon); height: var(--l-icon); }
.q { display: block; padding: 0; }
.q summary {
  display: flex; align-items: center; gap: var(--l-s-3);
  min-height: var(--l-control); padding: var(--l-card-pad);
  cursor: pointer; list-style: none; font-weight: var(--l-w-semi); font-size: var(--l-t-md);
}
.q summary::-webkit-details-marker { display: none; }
.q summary .icon-dot { background: var(--l-sunk); }
.q:nth-child(3n + 1) summary .icon-dot { background: var(--l-cyan); }
.q:nth-child(3n + 2) summary .icon-dot { background: var(--l-peach); }
.q:nth-child(3n) summary .icon-dot { background: var(--l-purple-soft); }
.q summary::after {
  content: "+"; margin-left: auto; flex: none;
  display: grid; place-items: center; width: var(--l-go); height: var(--l-go);
  border-radius: var(--l-r-pill); background: var(--l-sunk); font-size: var(--l-t-md);
}
.q[open] summary::after { content: "–"; background: var(--l-purple); color: var(--l-on-fill); }
.q p { padding: 0 var(--l-card-pad) var(--l-card-pad); }
@media (min-width: 48rem) {
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .urgent { grid-column: 1 / -1; }
  .urgent__examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- contact: the second reference's warm greeting card, navy text on orange ---- */
.contact { display: grid; gap: var(--l-gap); }
.hello {
  position: relative; overflow: hidden;
  display: grid; gap: var(--l-s-5); align-content: center;
  padding: var(--l-inset); border-radius: var(--l-r-hero);
  background: var(--l-grad-warm); color: var(--l-ink);
}
.hello h2 { font-size: var(--s-h2); font-weight: var(--l-w-bold); line-height: var(--l-lh-snug); letter-spacing: var(--l-ls-tight); max-width: var(--s-measure-sm); }
.hello p { max-width: var(--s-measure-sm); }
.hello .btn { justify-self: start; }
.hello__art { width: auto; height: var(--s-contact-art); max-width: 100%; object-fit: contain; justify-self: center; }
.next { gap: var(--l-s-4); }
.next ol { display: grid; gap: var(--l-s-3); }
.next li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--l-s-3); align-items: center; }
.next li .icon-dot { background: var(--l-purple-soft); }
.next li:nth-child(2) .icon-dot { background: var(--l-cyan); }
.next li:nth-child(3) .icon-dot { background: var(--l-peach); }
.next li b { display: block; color: var(--l-ink); }
.next li span { color: var(--l-mute); font-size: var(--l-t-sm); }
@media (min-width: 64rem) {
  .contact { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .hello { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 0; }
  .hello__copy { display: grid; gap: var(--l-s-5); padding-bottom: var(--l-inset); }
  .hello__art { align-self: end; }
}
.hello__copy { display: grid; gap: var(--l-s-5); }

/* ---- the trade pages (built by build.mjs from fag.mjs) ---- */

/* «Telefoner du kjenner igjen»: three calls, each card in the colour of
   what Pling does with it, the way the reference colours its stat cards.
   The pill is always white on a coloured card so it never sinks into it. */
.calltypes { grid-template-columns: minmax(0, 1fr); }
.calltype { gap: var(--l-s-4); align-content: start; }
.calltype__top { display: flex; align-items: center; justify-content: space-between; gap: var(--l-s-3); }
.calltype .pill { background: var(--l-frame); color: var(--l-ink); }
.calltype blockquote { font-size: var(--s-h3); font-weight: var(--l-w-semi); line-height: var(--l-lh-snug); color: var(--l-ink); }
.calltype p { color: var(--l-ink-2); }
.calltype--akutt { background: var(--l-orange-soft); border-color: transparent; }
.calltype--akutt .pill { color: var(--l-orange-ink); }
.calltype--haster { background: var(--l-peach); border-color: transparent; }
.calltype--haster .pill { color: var(--l-peach-ink); }
.calltype--beskjed { background: var(--l-cyan); border-color: transparent; }
.calltype--beskjed .pill { color: var(--l-cyan-ink); }
.calltype--befaring { background: var(--l-purple-deep); border-color: transparent; color: var(--l-on-fill); }
.calltype--befaring blockquote, .calltype--befaring p { color: var(--l-on-fill); }
.calltype--befaring .pill { color: var(--l-purple-ink); }
.calltype--pris .pill { background: var(--l-purple-soft); color: var(--l-purple-ink); }
.calltype--pris .icon-dot { background: var(--l-purple-soft); }
.calltype--akutt .icon-dot, .calltype--haster .icon-dot, .calltype--beskjed .icon-dot, .calltype--befaring .icon-dot { background: var(--l-frame); }
/* The purple card keeps its white dot under the drawing, as the purple step
   card does (svg.tegnet above): a navy line on purple would sink. */
.calltype--befaring .icon-dot:has(> svg.tegnet.tegnet.tegnet) { width: var(--l-avatar); height: var(--l-avatar); background: var(--l-frame); }
.calltype--befaring .icon-dot > svg.tegnet { width: var(--l-icon); height: var(--l-icon); }

/* «Oppsettet for …»: the template's emergency rules in the orange card,
   its services as soft chips in a white one */
.setup { display: grid; gap: var(--l-gap); align-items: start; }
.setup__rules > p { color: var(--l-ink-2); max-width: var(--s-measure); }
/* the rules card borrows .urgent from the questions, which spans a whole
   row there; here it shares the row with the services */
.setup .urgent { grid-column: auto; }
.rules { display: grid; gap: var(--l-s-3); }
/* align-content: start, because a rule beside a longer one is stretched to
   the row's height, and a grid's default stretch handed that extra height to
   the level pill, making one «Akutt» taller than its neighbour */
.rules li {
  display: grid; gap: var(--l-s-2); justify-items: start; align-content: start;
  padding: var(--l-s-4); border-radius: var(--l-r-md); background: var(--l-frame);
}
.rules b { font-size: var(--l-t-sm); color: var(--l-ink-2); font-weight: var(--l-w-semi); }
.rules li > span:last-child { color: var(--l-ink); font-weight: var(--l-w-med); }
.rules__level--akutt { background: var(--l-orange-soft); color: var(--l-orange-ink); }
.rules__level--haster { background: var(--l-peach); color: var(--l-peach-ink); }
.setup__services { gap: var(--l-s-5); }
.setup__services .icon-dot { background: var(--l-cyan); }
.setup__own .icon-dot { background: var(--l-frame); }
.chips { display: flex; flex-wrap: wrap; gap: var(--l-s-2); }
.chips li {
  padding: var(--l-s-2) var(--l-s-4); border-radius: var(--l-r-pill);
  background: var(--l-sunk); font-size: var(--l-t-sm); font-weight: var(--l-w-med);
}
.chips li:nth-child(3n + 1) { background: var(--l-cyan); }
.chips li:nth-child(3n + 2) { background: var(--l-peach); }
.chips li:nth-child(3n) { background: var(--l-purple-soft); }
/* three across only where a card is wide enough for a sentence; at 768 the
   three columns were 22 characters wide and read as squeezed */
@media (min-width: 64rem) {
  .calltypes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .setup { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  /* no rule list (snekker): the two cards are equal halves of equal height */
  .setup--eget { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- footer ---- */
.foot {
  display: grid; gap: var(--l-s-5); align-items: start;
  margin-top: var(--s-section); padding-top: var(--l-s-7);
  border-top: var(--s-hair) solid var(--l-line-2);
  font-size: var(--l-t-sm); color: var(--l-mute);
}
.foot .logo { color: var(--l-ink); }
.foot summary {
  display: inline-flex; align-items: center; gap: var(--l-s-2);
  min-height: var(--l-touch); padding-inline: var(--l-s-4);
  border-radius: var(--l-r-pill); background: var(--l-panel);
  cursor: pointer; list-style: none; color: var(--l-ink); font-weight: var(--l-w-semi);
}
.foot summary::-webkit-details-marker { display: none; }
.foot summary::after { content: "+"; }
.foot details[open] summary::after { content: "–"; }
.foot summary:hover { background: var(--l-frame); box-shadow: var(--l-sh-active); }
.foot details p { margin-top: var(--l-s-3); max-width: var(--s-measure); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--l-s-2) var(--l-s-5); }
/* pills like the header's menu, not underlined words: a bare underline is
   the one link style Lys does not use */
.foot nav a {
  display: inline-flex; align-items: center; gap: var(--l-s-2);
  min-height: var(--l-touch); padding-inline: var(--l-s-4);
  border-radius: var(--l-r-pill); background: var(--l-panel);
  color: var(--l-ink); font-weight: var(--l-w-semi); text-decoration: none;
}
.foot nav a:hover { background: var(--l-frame); box-shadow: var(--l-sh-active); }
.foot nav svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
/* the trade pages, one pill each (the pill itself is .foot nav a above);
   the page you are on is lilac */
.foot__fag { display: grid; gap: var(--l-s-3); padding-top: var(--l-s-5); border-top: var(--s-hair) solid var(--l-line); }
.foot__fag p { color: var(--l-ink); font-weight: var(--l-w-semi); }
.foot__fag ul { display: flex; flex-wrap: wrap; gap: var(--l-s-2); }
.foot__fag a[aria-current="page"] { background: var(--l-purple-soft); color: var(--l-purple-ink); font-weight: var(--l-w-semi); }
.foot__fag svg { width: var(--l-icon-sm); height: var(--l-icon-sm); }
@media (min-width: 64rem) {
  .foot { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--l-s-8); }
  .foot__fag { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--l-s-5); }
}

/* ===========================================================================
   Motion: the page answers the pointer, and sections rise into place.

   Jonatan, 25 September, on the dashboard and «generelt over hele
   nettsiden»: he wanted to click the whole card rather than the small arrow
   in its corner, and everything to move a little under the mouse. The sales
   site follows the same contract as the dashboard (tokens.css, komponenter.css):

   - A card that leads to ONE place is that place's link over its whole
     surface. .l-stretch-host makes the card the containing block, and the
     link inside it with .l-stretch lays an invisible ::after over the card.
     The price card leads to the contact section, the orange contact card to
     the contact form. Cards that only inform stay unlinked: a click that
     goes nowhere would be worse than no click.
   - What can be clicked lifts, and presses on :active. What only informs
     lifts too, with no pointer cursor, because the page should feel alive
     under the mouse without pretending to be a button.
   - Colour and shadow feedback is for everyone with a pointer. Every
     transform, transition and animation sits under
     prefers-reduced-motion: no-preference, and hover lifts also under
     (hover: hover), since a phone keeps :hover stuck on whatever was last
     tapped and a card left floating after a tap reads as a fault.
   ========================================================================= */

.l-stretch-host { position: relative; }
/* The link itself is never transformed (see the lifts below): a transform
   would make the link the ::after's containing block, the overlay would
   shrink to the button mid-hover, and a click on the card beside it would
   land on nothing. The overlay takes the card's corner rather than
   `inherit`, because a pseudo-element inherits from its own element, here a
   pill-shaped button, and a 999px radius stretched over a card leaves its
   four corners unclickable. */
.l-stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--l-r-hero); }
.l-above { position: relative; z-index: 1; }

@media (hover: hover) {
  .card:hover, .m-nokkel:hover, .m-kort:hover, .m-neste:hover,
  .l-stretch-host:hover { box-shadow: var(--l-sh-hover); }
  .price:hover { background: var(--l-purple); }
  .l-stretch-host:hover .l-stretch.btn--light { box-shadow: var(--l-sh-active); }
  .m-nokkel:hover .m-go { background: var(--l-ink); color: var(--l-on-fill); }
  .q:hover summary::after { background: var(--l-purple-soft); color: var(--l-purple-ink); }
  .q[open]:hover summary::after { background: var(--l-purple-deep); color: var(--l-on-fill); }
}
/* the keyboard sees what the mouse sees */
.l-stretch-host:has(.l-stretch:focus-visible) { box-shadow: var(--l-sh-hover); }
.q:has(summary:focus-visible) { box-shadow: var(--l-sh-hover); }

@media (prefers-reduced-motion: no-preference) {
  .card, .m-nokkel, .m-kort, .m-neste, .m-go, .call, .l-stretch-host,
  .btn, .nav a, .foot nav a, .foot summary, .logo, .go, .btn svg, .foot nav a svg {
    transition:
      transform var(--l-t-base) var(--l-ease),
      box-shadow var(--l-t-base) var(--l-ease),
      background-color var(--l-t-fast) var(--l-ease),
      color var(--l-t-fast) var(--l-ease);
  }
  .q summary::after { transition: background-color var(--l-t-base) var(--l-ease), color var(--l-t-base) var(--l-ease), opacity var(--l-t-base) var(--l-ease); }

  /* an opened answer settles in from just above, instead of appearing */
  .q[open] > p { animation: settle var(--l-t-slow) var(--l-ease); }
  @keyframes settle { from { opacity: 0; translate: 0 calc(-1 * var(--l-s-2)); } }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  /* the calculator stays still: it holds a slider, and a card that shifts
     under a thumb being dragged feels like the value slipped */
  .card:not(.calc):hover, .m-nokkel:hover, .call:hover, .l-stretch-host:hover { transform: translateY(var(--l-lift)); }
  .m-kort:hover, .m-neste:hover { transform: translateY(var(--l-lift-sm)); }
  .btn:not(.l-stretch):hover, .nav a:hover, .foot nav a:hover, .foot summary:hover { transform: translateY(var(--l-lift-sm)); }
  /* the arrow leans toward where it goes: up and to the right, like ↗ */
  .btn:hover svg, .l-stretch-host:hover .l-stretch svg, .foot nav a[data-contact]:hover svg,
  .m-nokkel:hover .m-go { transform: translate(var(--l-nudge), calc(-1 * var(--l-nudge))); }
  /* the logo's handset rings once, like the incoming call in the hero */
  .logo:hover svg { animation: wiggle var(--s-ring-time) var(--l-ease); }
}
@media (prefers-reduced-motion: no-preference) {
  .l-stretch-host:has(.l-stretch:focus-visible) { transform: translateY(var(--l-lift)); }
  .l-stretch-host:has(.l-stretch:focus-visible) .l-stretch svg,
  .btn:focus-visible svg { transform: translate(var(--l-nudge), calc(-1 * var(--l-nudge))); }
  .q:has(summary:focus-visible) { transform: translateY(var(--l-lift)); }
  /* Pressing sinks what was lifted: the whole card for a stretched link, the
     button for the rest. After the hover lifts on purpose, since :active
     and :hover are true together and the later of two equal selectors wins. */
  .l-stretch-host:active, .card.q:has(summary:active) { transform: scale(var(--l-press)); }
  .btn:not(.l-stretch):active, .nav a:active, .foot nav a:active, .foot summary:active { transform: scale(var(--l-press)); }
}

/* Sections rise into place as they scroll into view. site.js adds
   .rise-wait only to what is still below the fold when it runs, and only
   when this same media query holds, so without JS, with reduced motion, or
   in print everything is simply there. .rise-in plays once; it moves with
   `translate`, not `transform`, so it never fights a hover lift on the same
   card. --rise-i is the card's place in the batch that arrived together. */
@media screen and (prefers-reduced-motion: no-preference) {
  .rise-wait { opacity: 0; }
  .rise-in {
    animation: rise var(--s-rise-time) var(--l-ease) backwards;
    animation-delay: calc(var(--rise-i, 0) * var(--s-stagger));
  }
  @keyframes rise { from { opacity: 0; translate: 0 var(--s-rise); } }
}

/* ---- the drawing's own motion (the interactive product in #oversikt) ----
   What can be pressed answers the pointer; a ticked message slides out; the
   assistant's orb breathes and its bars sway at rest, and quicken while it
   «speaks». All of it only for a visitor who has not asked for less. */
@media (hover: hover) {
  .m-nav__knapp:not([aria-current="true"]):hover, .m-chip:not([aria-pressed="true"]):hover,
  .m-dag:not([aria-pressed="true"]):hover { background: var(--l-frame); box-shadow: var(--l-sh-soft); }
  .m-faner button:hover, .m-lenke:hover { color: var(--l-purple-ink); }
  .m-ferdig:hover { background: var(--l-green); color: var(--l-green-ink); box-shadow: none; }
  .m-snakk:hover, .m-bryter:hover .m-bryter__spor { box-shadow: var(--l-sh-soft); }
}
@media (prefers-reduced-motion: no-preference) {
  .m-nav__knapp, .m-chip, .m-dag, .m-ferdig, .m-snakk, .m-faner button, .m-bryter__spor, .m-bryter__spor::after {
    transition: background-color var(--l-t-fast) var(--l-ease), color var(--l-t-fast) var(--l-ease),
      box-shadow var(--l-t-base) var(--l-ease), transform var(--l-t-base) var(--l-ease);
  }
  .m-liste > li, .m-rader > li, .m-kortliste > li { transition: opacity var(--l-t-base) var(--l-ease), transform var(--l-t-base) var(--l-ease); }
  :is(.m-liste, .m-rader, .m-kortliste) > li.is-borte { opacity: 0; transform: translateX(var(--l-s-6)); }
  .m-skjerm:not([hidden]), .m-tlf:not([hidden]) { animation: m-inn var(--l-t-base) var(--l-ease); }
  @keyframes m-inn { from { opacity: 0; translate: 0 var(--l-s-2); } }
  .m-orb > i { animation: m-pust 4.8s var(--l-ease) infinite; }
  .m-orb > i:nth-child(2) { animation-delay: 0.4s; }
  .m-orb > i:nth-child(3) { animation-delay: 0.8s; }
  .m-bolge i { animation: m-hvile 2.4s var(--l-ease) infinite; }
  .m-bolge i:nth-child(2) { animation-delay: 0.15s; } .m-bolge i:nth-child(3) { animation-delay: 0.3s; }
  .m-bolge i:nth-child(4) { animation-delay: 0.45s; } .m-bolge i:nth-child(5) { animation-delay: 0.6s; }
  .m-bolge i:nth-child(6) { animation-delay: 0.75s; } .m-bolge i:nth-child(7) { animation-delay: 0.9s; }
  .m-bolge i:nth-child(8) { animation-delay: 1.05s; } .m-bolge i:nth-child(9) { animation-delay: 1.2s; }
  .m-scene.is-snakker .m-bolge i { animation-name: m-snakker; animation-duration: 0.7s; }
  .m-scene.is-snakker .m-orb > i { animation-duration: 1.4s; }
  @media (hover: hover) {
    .m-nav__knapp:hover, .m-chip:hover, .m-dag:hover, .m-snakk:hover { transform: translateY(var(--l-lift-sm)); }
    .m-ferdig:hover, .m-faner button:hover { transform: translateY(var(--l-lift-sm)); }
  }
  @keyframes m-pust { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1); } }
  @keyframes m-hvile { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(calc(1 + var(--k) * 2.2)); } }
  @keyframes m-snakker { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(calc(1 + var(--k) * 5)); } }
}