/* Protectus.no – shared stylesheet for every artboard on this canvas.
   Tokens mirror the «Protectus» design system; the situation colours are the app's own.
   Sections: fonts & tokens · base · layout · header · controls · hero · device & app screens · explorer · flow ·
   overview · cards · page heads · features · timeline · devices · pricing · faq · forms · cta · footer · responsive */

/* ---------- Fonts & tokens ---------- */
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
}

.site {
  --paper: #f5f4ef;
  --surface: #ffffff;
  --ink: #0f1b2d;
  --ink-2: #16243a;
  --ink-hover: #2b3e5c;
  --text-body: #3a4556;
  --text-muted: #4a5568;
  --text-placeholder: #7a8494;
  --line: #e2e0d8;
  --line-input: #85837a;
  --line-navy: rgba(245, 244, 239, 0.14);
  --band-body: #c9d1de;
  --band-muted: #a9b4c6;
  --accent: #f2b54a;
  --check: #15803d;
  --danger-text: #b91c1c;
  --plivo: #b91c1c;
  --violence: #1d4ed8;
  --medical: #15803d;
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-app: -apple-system, 'SF Pro Text', Roboto, 'Segoe UI', system-ui, sans-serif;
  --container: 1200px;
  --gutter: clamp(20px, 3.5vw, 40px);
  --section: clamp(72px, 9vw, 112px);
  --header-h: 72px;
  /* Hero: padding above and below, and the phones' stage size (smaller on short laptop screens, see «Short screens»). */
  --hero-pt: clamp(40px, 7vw, 88px);
  --hero-pb: clamp(64px, 8vw, 104px);
  --hero-lift: 120px;
  --stage-zoom: 1;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);

  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ---------- Base ---------- */
.site *, .site *::before, .site *::after { box-sizing: border-box; }
/* The resets use :where() so they carry no specificity: every component rule (.facts, .eyebrow, .check-list …) wins over them. */
:where(.site img) { display: block; max-width: 100%; height: auto; }
:where(.site h1, .site h2, .site h3, .site h4, .site h5, .site p, .site figure, .site blockquote, .site dl, .site dd) { margin: 0; }
:where(.site ul[role='list'], .site ol[role='list']) { list-style: none; margin: 0; padding: 0; }
.site a { color: inherit; text-underline-offset: 0.18em; }
:where(.site button) { font: inherit; color: inherit; }
.site :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.site .navy :focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--paper); }
.site [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { scroll-padding-top: 136px; }

.display { font-size: clamp(38px, 4.8vw, 64px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 800; text-wrap: balance; }
.h1 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.03; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
.h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--text-body); }
.body-lg { font-size: 18px; line-height: 1.6; color: var(--text-body); }
.muted { color: var(--text-muted); }
.small { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 20px; }
.navy .eyebrow { color: var(--band-muted); }
.site .eyebrow--accent { color: var(--accent); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
/* Vertical only: a .section that is also a .container keeps the container's side gutter. */
.section { padding-block: var(--section); }
.section--tight-top { padding-top: calc(var(--section) * 0.5); }
.white { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.navy { background: var(--ink); color: var(--paper); }
.navy .lead, .navy .body-lg, .navy p { color: var(--band-body); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; margin-bottom: 56px; }
.section-head__title { flex: 1 1 540px; min-width: 0; }
.section-head__intro { flex: 1 1 360px; min-width: 0; max-width: 480px; }
.measure { max-width: 680px; }

/* ---------- Header (fixed) ---------- */
.site-header {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50; height: var(--header-h); color: var(--ink);
  background: rgba(245, 244, 239, 0.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.has-navy-hero .site-header:not(.is-scrolled):not(.is-open) { background: transparent; border-bottom-color: transparent; color: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 28px; height: 28px; }
.brand__name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav__link { position: relative; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 500; opacity: 0.86; transition: opacity 0.2s, background-color 0.2s; }
.nav__link:hover { opacity: 1; background: rgba(15, 27, 45, 0.06); }
.has-navy-hero .site-header:not(.is-scrolled):not(.is-open) .nav__link:hover { background: rgba(245, 244, 239, 0.1); }
.nav__link[aria-current='page'] { opacity: 1; }
.nav__link[aria-current='page']::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: currentColor; }
.has-navy-hero .site-header:not(.is-scrolled):not(.is-open) .header-cta { --bg: var(--paper); --fg: var(--ink); }
.menu-button { display: none; }
.mobile-menu { display: none; }
@media (max-width: 820px) {
  .nav { display: none; }
  .site-header .header-cta { display: none; } /* «Kom i gang» is in the menu */
  .menu-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
  .menu-button__bars, .menu-button__bars::before, .menu-button__bars::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform 0.25s var(--ease); }
  .menu-button__bars::before, .menu-button__bars::after { content: ''; position: absolute; left: 0; }
  .menu-button__bars::before { top: -6px; }
  .menu-button__bars::after { top: 6px; }
  .is-open .menu-button__bars { background: transparent; }
  .is-open .menu-button__bars::before { transform: translateY(6px) rotate(45deg); }
  .is-open .menu-button__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .site-header.is-open { background: var(--paper); color: var(--ink); }
  .mobile-menu { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 49; background: var(--paper); padding: 24px var(--gutter) 40px; flex-direction: column; gap: 4px; }
  .mobile-menu.is-open { display: flex; }
  .mobile-menu a:not(.button) { padding: 16px 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid var(--line); }
  .mobile-menu .button { margin-top: 24px; }
}

/* ---------- Controls ---------- */
.button {
  --bg: var(--ink); --fg: var(--paper); --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  border: 1.5px solid var(--bd); border-radius: 14px 14px 0 14px; background: var(--bg); color: var(--fg);
  font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.site .button { color: var(--fg); }
.button:hover { --bg: var(--ink-hover); }
.button:active { transform: translateY(1px); }
.button--outline { --bg: transparent; --fg: var(--ink); --bd: var(--ink); }
.button--outline:hover { --bg: var(--ink); --fg: var(--paper); }
.button--light { --bg: var(--paper); --fg: var(--ink); }
.button--light:hover { --bg: #ffffff; }
.button--ghost-light { --bg: transparent; --fg: var(--paper); --bd: rgba(245, 244, 239, 0.5); }
.button--ghost-light:hover { --bg: rgba(245, 244, 239, 0.1); --bd: var(--paper); }
.button--lg { min-height: 56px; padding: 15px 28px; font-size: 17px; }
.button--sm { min-height: 42px; padding: 9px 16px; font-size: 15px; }
.arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.button:hover .arrow, .text-link:hover .arrow { transform: translateX(3px); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.check-list { display: grid; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--check); }
.navy .check-list svg { color: var(--accent); }
.swatch { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px 3px 0 3px; background: currentColor; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + var(--hero-pt)) 0 var(--hero-pb); }
.hero__arcs { position: absolute; inset: 0; pointer-events: none; opacity: 0.55; }
.hero__arcs svg { position: absolute; right: -10%; top: -20%; width: 120%; height: 140%; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 40px 56px; align-items: center; }
.hero__text { max-width: 560px; }
.hero__text .display { color: var(--paper); }
.hero__text .lead { margin-top: 24px; max-width: 460px; color: var(--band-body); }
.hero__text .button-row { margin-top: 36px; }
/* The phones and, under them, the choice of alert to watch (kept out of the text column so it stays calm) */
.hero__visual { display: grid; gap: 20px; min-width: 0; }
.hero__demo { display: flex; justify-content: center; }
.site .hero__demo-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--band-muted); margin-bottom: 12px; }
.demo-switch { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.demo-tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-navy); border-radius: 12px 12px 0 12px; background: rgba(245, 244, 239, 0.04); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.site .demo-tab { color: var(--band-body); }
.site .demo-tab:hover, .site .demo-tab[aria-pressed='true'] { color: var(--paper); border-color: rgba(245, 244, 239, 0.32); }
.demo-tab[aria-pressed='true'] { background: rgba(245, 244, 239, 0.1); }
.demo-tab__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--paper); transform-origin: left; transform: scaleX(0); opacity: 0.7; }
.demo-tab__progress.is-running { transform: scaleX(1); transition: transform 9.95s linear; }
.demo-pause { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 4px; border: 1px solid var(--line-navy); border-radius: 12px 12px 0 12px; background: transparent; cursor: pointer; }
.site .demo-pause { color: var(--band-body); }
.demo-pause svg { width: 16px; height: 16px; }
.hero__stage { position: relative; height: 680px; perspective: 1800px; }
.hero__stage .device--sender { position: absolute; left: 4%; top: 28px; z-index: 2; }
.hero__stage .device--receiver { position: absolute; right: 0; top: 0; z-index: 1; transform: rotateY(-24deg) rotateX(6deg) rotateZ(2deg) translateZ(-60px); transform-origin: 60% 50%; }
/* The receiver turns its right side towards the viewer, so the frame's edge shows on the right. */
.hero__stage .device--receiver .device__frame { box-shadow: 13px 0 0 -4px #2b313b, 13px 0 0 -3px #4b525d, 0 50px 80px -20px rgba(0, 0, 0, 0.6); }
.hero__stage .device--receiver .scr { transition-delay: 0.25s; }
/* The pulse follows the background circles: they light up one after another from the centre out, like an alert going
   out. On the front page it runs slowly each time an alert is sent in the hero (.is-firing), in that alert's colour
   (--pulse, set by the page); the page heroes repeat a quieter white wave. */
.hero__arcs.is-firing circle { animation: arc-light 4.2s ease-in-out both; }
.hero__arcs.is-firing circle:nth-child(2) { animation-delay: 0.3s; }
.hero__arcs.is-firing circle:nth-child(3) { animation-delay: 0.6s; }
.hero__arcs.is-firing circle:nth-child(4) { animation-delay: 0.9s; }
.hero__arcs.is-firing circle:nth-child(5) { animation-delay: 1.2s; }
.hero__arcs.is-firing circle:nth-child(6) { animation-delay: 1.5s; }
@keyframes arc-light { 0%, 100% { stroke: rgba(245, 244, 239, 0.09); } 30% { stroke: var(--pulse, rgba(245, 244, 239, 0.45)); } }


/* ---------- Page heroes («Slik virker det», «Priser»): the same navy band, arcs and type as the front page ----------
   Calm and spacious: only eyebrow, title, a short lead and one way on, placed low on the left. */
.page-hero { display: grid; align-content: end; min-height: min(780px, 100svh); padding-bottom: clamp(72px, 9vw, 120px); }
.page-hero .hero__text { max-width: 640px; }
/* On wider screens the page heroes are as tall as the front page's hero: its top and bottom padding plus the phones'
   680 px stage (times --stage-zoom) and the 20 px gap and 40 px alert tabs under them (keep in step with .hero__stage).
   The text stands in the lower part, its last line --hero-lift above the bottom padding. Narrower screens keep the shorter band. */
@media (min-width: 961px) {
  .page-hero { min-height: calc(var(--header-h) + var(--hero-pt) + 680px * var(--stage-zoom) + 60px + var(--hero-pb)); align-content: end; padding-bottom: calc(var(--hero-pb) + var(--hero-lift)); }
}
.page-hero .hero__text .lead { max-width: 520px; }
.page-hero__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; padding-bottom: 4px; border-bottom: 1.5px solid currentColor; font-weight: 600; text-decoration: none; }
.site .page-hero__more { color: var(--paper); }
.page-hero__more span { transition: transform 0.2s var(--ease); }
.page-hero__more:hover span { transform: translateY(3px); }
/* Page heroes: the circles light up from the centre out every 8 seconds (off with reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .page-hero .hero__arcs circle { animation: arc-wave 10s ease-in-out infinite; }
  .page-hero .hero__arcs circle:nth-child(2) { animation-delay: 0.4s; }
  .page-hero .hero__arcs circle:nth-child(3) { animation-delay: 0.8s; }
  .page-hero .hero__arcs circle:nth-child(4) { animation-delay: 1.2s; }
  .page-hero .hero__arcs circle:nth-child(5) { animation-delay: 1.6s; }
  .page-hero .hero__arcs circle:nth-child(6) { animation-delay: 2s; }
  .page-hero__more span { animation: nudge 2.4s ease-in-out infinite; }
}
@keyframes arc-wave { 0%, 24%, 100% { stroke: rgba(245, 244, 239, 0.09); } 10% { stroke: rgba(245, 244, 239, 0.4); } }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }

/* ---------- Device frame and app screens (drawn at 360 × 780) ---------- */
.device { --w: 300px; --scale: 0.7722; position: relative; width: var(--w); flex: none; }
.device--md { --w: 270px; --scale: 0.6889; }
.device__frame { position: relative; padding: 11px; border-radius: calc(var(--w) * 0.165); background: linear-gradient(145deg, #4b525d 0%, #20252d 18%, #15191f 50%, #2a3039 82%, #59606b 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 40px 70px -24px rgba(9, 15, 26, 0.55), 0 12px 24px -12px rgba(9, 15, 26, 0.4); }
.device__frame::before, .device__frame::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #2a3039; }
.device__frame::before { left: -3px; top: 22%; height: 9%; }
.device__frame::after { right: -3px; top: 27%; height: 14%; }
.device__screen { position: relative; overflow: hidden; aspect-ratio: 360 / 780; border-radius: calc(var(--w) * 0.13); background: #000; isolation: isolate; }
.device__island { position: absolute; z-index: 20; left: 50%; top: calc(var(--w) * 0.033); width: 30%; height: calc(var(--w) * 0.085); transform: translateX(-50%); border-radius: 999px; background: #000; }
.app { position: absolute; left: 0; top: 0; width: 360px; height: 780px; transform: scale(var(--scale)); transform-origin: 0 0; font-family: var(--font-app); color: #18181b; line-height: 1.35; }
.app p { color: inherit; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; }
.scr.is-on { opacity: 1; visibility: visible; }
.scr--start { background: #0f172a; color: #f8fafc; } /* the app's start screen is dark slate (T-090) */
.sb { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 18px 30px 0; font-size: 15px; font-weight: 600; flex: none; }
.sb__icons { display: flex; align-items: center; gap: 6px; }
.sb__icons i { display: block; width: 18px; height: 10px; border-radius: 2px; background: currentColor; opacity: 0.85; }
.sb__icons i:last-child { width: 24px; height: 11px; border-radius: 3px; }
.light-text { color: #fff; }
.ah { display: flex; align-items: center; gap: 12px; padding: 14px 16px 18px; }
.ah__logo { width: 44px; height: 44px; border-radius: 10px; background: #18181b; display: grid; place-items: center; color: #fff; }
.ah__logo svg { width: 22px; height: 22px; }
.ah__name { display: flex; flex-direction: column; line-height: 1.25; }
.ah__name b { font-size: 16px; font-weight: 600; }
.ah__name small { font-size: 13px; color: #71717a; }
.ah__chip { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 13px; font-weight: 600; }
.ah__gear { display: grid; place-items: center; width: 36px; height: 36px; color: #94a3b8; }
.ah__gear svg { width: 22px; height: 22px; }
.scr--start .ah__logo { background: rgba(255, 255, 255, 0.08); }
.scr--start .ah__chip { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.app .scr--start .ahint { color: #94a3b8; }
.scr--start .ahome, .scr--settings .ahome { background: #fff; }
.abtns { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px; }
.abtn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; height: 128px; padding: 0 24px; border-radius: 14px; color: #fff; }
.abtn--plivo { background: #dc2626; }
.abtn--violence { background: #2563eb; }
.abtn--medical { background: #16a34a; }
.abtn__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(0, 0, 0, 0.36); }
.abtn__fill::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 5px; background: #fff; opacity: 0; }
.abtn.is-holding .abtn__fill { width: 100%; transition: width 2s linear; }
.abtn.is-holding .abtn__fill::after, .abtn__fill.has-edge::after { opacity: 1; }
.abtn img { position: relative; height: 36px; width: auto; }
.abtn__label { position: relative; font-size: 27px; font-weight: 700; letter-spacing: -0.01em; }
.ahint { margin-top: auto; padding: 0 16px 10px; text-align: center; font-size: 13px; color: #71717a; }
.app .ahint { color: #71717a; }
/* Innstillinger (behind the gear): «Øvelsesmodus» for staff the school allows to start exercises. */
.scr--settings { background: #0f172a; color: #f8fafc; }
.set-head { padding: 10px 16px 18px; font-size: 22px; font-weight: 700; }
.set-list { margin: 0 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 16px; font-size: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.set-row:first-child { border-top: 0; }
.set-row small { display: block; font-size: 13px; color: #94a3b8; }
.set-row em { font-style: normal; font-size: 22px; color: #94a3b8; }
.app .set-label { margin: 22px 30px 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; }
.switch { position: relative; flex: none; width: 50px; height: 30px; border-radius: 999px; background: #334155; transition: background-color 0.25s var(--ease); }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--ease); }
.switch.is-on { background: #22c55e; }
.switch.is-on::after { transform: translateX(20px); }
.ahome { width: 130px; height: 5px; border-radius: 3px; background: #18181b; margin: 0 auto 10px; flex: none; }
.ahome--light { background: #fff; }
.touch { position: absolute; z-index: 5; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, 0.42); border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); opacity: 0; transform: scale(0.6); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); pointer-events: none; }
.touch.is-on { opacity: 1; transform: scale(1); }
.touch--dark { background: rgba(24, 24, 27, 0.18); border-color: rgba(24, 24, 27, 0.45); }

/* Alert titles pulse as in the app (L-106): the letters turn bold one after another, over and over. */
.pulse-title span { -webkit-text-stroke: 0 currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .pulse-title span { animation: letter-bold 2s ease-in-out infinite; animation-delay: calc(var(--i) * 0.06s); }
}
@keyframes letter-bold { 0%, 30%, 100% { -webkit-text-stroke-width: 0; } 12% { -webkit-text-stroke-width: 0.045em; } }

/* The PLIVO sender's screen is bright red. A PLIVO has no place and no «på vei», and is not ended from a phone. */
.scr--sent-plivo { background: #b91c1c; color: #fff; padding-bottom: 10px; }
.sent-big { padding: 26px 22px 0; text-align: center; }
.sent-big h4 { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.sent-big time { display: block; margin-top: 14px; font-size: 19px; color: rgba(255, 255, 255, 0.9); font-variant-numeric: tabular-nums; }
.abtm { margin-top: auto; display: grid; gap: 10px; padding: 0 16px 14px; }
.abig { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 12px; background: #fff; color: #18181b; font-size: 19px; font-weight: 700; }
.abig--line { background: transparent; border: 2px solid #fff; color: #fff; }
.abig--grey { background: #d4d4d8; height: 40px; font-size: 15px; font-weight: 500; }
.amsg { display: flex; gap: 8px; align-items: center; }
.amsg span { flex: 1; height: 46px; display: flex; align-items: center; padding: 0 14px; border-radius: 10px; background: #f4f4f5; color: #71717a; font-size: 15px; }
.amsg i { width: 46px; height: 46px; border-radius: 10px; background: #1d4ed8; display: grid; place-items: center; color: #fff; }
.amsg i svg { width: 18px; height: 18px; }
.scr--sent { color: #fff; }
.sent-head { padding: 8px 16px 14px; font-size: 20px; font-weight: 700; }
.chip-coming { align-self: center; margin: -4px 0 12px; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.35s var(--ease); }
.chip-coming.is-on { opacity: 1; }
.sent-actions { display: grid; gap: 8px; padding: 0 16px; }
.sent-where { padding: 14px 16px 18px; }
.sent-where small { display: block; font-size: 13px; margin-bottom: 6px; opacity: 0.9; }
.sent-where div { display: flex; height: 46px; border-radius: 10px; background: #fff; color: #18181b; font-size: 15px; align-items: center; }
.sent-where div span { flex: 1; padding: 0 14px; }
.sent-where div em { font-style: normal; padding: 0 14px; border-left: 1px solid #e4e4e7; height: 100%; display: flex; align-items: center; font-weight: 600; }
.sheet { flex: 1; display: flex; flex-direction: column; background: #fff; color: #18181b; border-radius: 22px 22px 0 0; padding: 12px 14px 0; }
.sheet__handle { width: 28px; height: 4px; border-radius: 2px; background: #d4d4d8; margin: 0 auto 12px; }
.log { display: grid; gap: 8px; }
.log li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #e4e4e7; border-radius: 10px; font-size: 14px; }
.log li time { margin-left: auto; color: #71717a; font-size: 12px; font-variant-numeric: tabular-nums; }
.log li.is-new { opacity: 0; transition: opacity 0.35s var(--ease); }
.log li.is-new.is-on { opacity: 1; }
.sheet .amsg { margin-top: auto; padding: 0 0 12px; }
.scr--lock { background: radial-gradient(120% 80% at 50% 0%, #2b3e5c 0%, #0f1b2d 60%, #0a1220 100%); color: #fff; align-items: center; }
.app .lock-date { margin-top: 30px; font-size: 18px; font-weight: 600; opacity: 0.9; }
.app .lock-time { font-size: 92px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.scr--lock .ahome { margin-top: auto; }
.scr--lock .sb { align-self: stretch; } /* time left, icons right, like the other screens */
.scr--recv { color: #fff; }
.recv-top { padding: 30px 26px 0; }
.recv-top img { height: 44px; width: auto; margin-bottom: 18px; }
.recv-top h4 { font-size: 46px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.recv-top h4.center { text-align: center; }
.app .recv-top p { margin-top: 14px; font-size: 19px; font-weight: 600; }
.recv-top small { display: block; margin-top: 6px; font-size: 14px; opacity: 0.9; }
.recv-card { margin: 18px 20px 0; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); font-size: 15px; }
.recv-card h5 { margin: 0 0 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
.recv-card ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.recv-where { margin: 18px 20px 0; display: flex; align-items: center; height: 50px; padding: 0 14px; border-radius: 12px; background: #fff; color: #18181b; font-size: 17px; font-weight: 600; }
.app .recv-ask { margin: 22px 20px 0; font-size: 18px; font-weight: 700; }
/* «Jeg kommer» and «Jeg kan ikke» side by side; the one tapped turns white with a tick, the other fades. */
.recv-answers { margin: 10px 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.recv-answers div { height: 54px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 17px; font-weight: 700; transition: transform 0.2s var(--ease), background-color 0.2s, color 0.2s, opacity 0.3s; }
.recv-answers div.is-pressed { transform: scale(0.97); background: rgba(255, 255, 255, 0.3); }
.recv-answers div.is-chosen { background: #fff; border-color: #fff; color: #18181b; }
.recv-answers div.is-chosen::before { content: '✓'; }
.recv-answers.is-answered div:not(.is-chosen) { opacity: 0.4; }
.app .recv-done { margin: 10px 20px 0; font-size: 15px; font-weight: 600; opacity: 0; transition: opacity 0.35s var(--ease); }
.app .recv-done.is-on { opacity: 1; }
/* The call button, then «Demp lyden» over the whole width, right over the Tiltakskort (L-106). */
.recv-actions { margin: 18px 20px 0; display: grid; gap: 10px; }
.recv-actions .abig--line { height: 50px; font-size: 17px; }
/* A helper who says «Jeg kommer» is told where to go (L-99). */
.recv-go { margin: 14px 20px 0; display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #fff; color: #18181b; opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.recv-go.is-on { opacity: 1; transform: none; }
.recv-go b { font-size: 17px; line-height: 1.3; }
.recv-go span { font-size: 14px; color: #52525b; }
.scr--ready { background: #fff; }
.ready-head { padding: 10px 16px 14px; font-size: 22px; font-weight: 700; }
.ready-ok { margin: 0 14px 14px; display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: #dcfce7; color: #166534; font-weight: 700; font-size: 16px; }
.ready-list { margin: 0 14px; border: 1px solid #e4e4e7; border-radius: 12px; }
.ready-list li { display: flex; align-items: center; gap: 12px; padding: 13px 14px; font-size: 15px; border-top: 1px solid #f4f4f5; }
.ready-list li:first-child { border-top: 0; }
.ready-list svg, .ready-ok svg { width: 18px; height: 18px; color: #16a34a; flex: none; }
.app .ready-foot { margin: 14px 16px 0; font-size: 13px; color: #71717a; }
/* «Hvor er dere?» (violence and medical only): the school's rooms by building and floor, or typed. */
.pick { position: relative; padding: 14px 16px 18px; }
.pick small { display: block; margin-bottom: 6px; font-size: 13px; opacity: 0.9; }
.pick__field { display: flex; align-items: center; height: 46px; border-radius: 10px; background: #fff; color: #18181b; font-size: 15px; }
.pick__value, .pick__hint { flex: 1; padding: 0 14px; }
.pick__hint { display: none; color: #a1a1aa; }
.pick__field i, .pick__field em { display: flex; align-items: center; height: 100%; padding: 0 14px; border-left: 1px solid #e4e4e7; font-style: normal; }
.pick__field em { font-weight: 600; }
.pick__menu { position: absolute; z-index: 4; left: 16px; right: 16px; top: 87px; padding: 6px 0; border-radius: 10px; background: #fff; color: #18181b; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), visibility 0.25s; }
.pick__menu h6 { margin: 0; padding: 8px 14px 4px; font-size: 12px; font-weight: 500; line-height: 18px; color: #71717a; }
.pick__menu span { display: block; height: 36px; padding: 0 14px; font-size: 15px; line-height: 36px; }
.pick__menu .is-picked { background: #f0fdf4; }
/* An SMS in the phone's own messages app. */
.scr--sms { background: #fff; }
.sms-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 14px; border-bottom: 1px solid #e4e4e7; }
.sms-head i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #0f1b2d; color: #fff; }
.sms-head i svg { width: 26px; height: 26px; }
.sms-head b { font-size: 15px; font-weight: 600; }
.app .sms-time { margin: 18px 0 8px; text-align: center; font-size: 12px; color: #71717a; }
.sms-bubble { margin: 0 64px 0 14px; padding: 12px 14px; border-radius: 18px 18px 18px 4px; background: #e9e9eb; color: #18181b; font-size: 16px; line-height: 1.35; }
.drill-band { flex: none; overflow: hidden; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: #1a1206; background: repeating-linear-gradient(-45deg, #f5a30b 0 14px, #fbbf24 14px 28px); }


/* ---------- Realistic devices (.photo-devices on .site; the Tweak «realisticDevices» turns it off) ----------
   Rendered pictures of a generic phone and laptop lie over the drawn screens. The screens stay HTML, so every
   animation works as before; the picture's screen area is cut out. Measurements come from the renders:
   phone 720 × 1494 px, screen 25.45 / 32.5 to 685.21 / 1461.84; tilted phones 760 × 1695 (front, its left side and buttons show) and 760 × 1693;
   laptop 1407 × 871 (from a GPT picture, screen 154 / 40 to 1252 / 713). */
.photo-devices .device { isolation: isolate; } /* keeps each picture above its own screen only */
.photo-devices .device__frame { background: none; box-shadow: 0 34px 60px -30px rgba(15, 27, 45, 0.55); border-radius: calc(var(--w) * 0.15); }
.photo-devices .device__frame::before { display: none; }
.photo-devices .device__frame::after {
  z-index: 25; width: auto; height: auto; border-radius: 0; pointer-events: none;
  left: calc(11px - 0.038575 * (100% - 22px)); right: calc(11px - 0.052731 * (100% - 22px));
  top: calc(11px - 0.022738 * (100% - 22px)); bottom: calc(11px - 0.0225 * (100% - 22px));
  background: url(img/telefon.webp) center / 100% 100% no-repeat;
}
.photo-devices .device__screen { border-radius: calc((var(--w) - 22px) * 0.1); }
.photo-devices .device__island { display: none; }

/* Hero: both phones are rendered at an angle, turned towards each other. Each picture replaces the drawn frame and the
   CSS rotation, and the screen is mapped onto it (--tk = --tw / 760, the picture's width; --hm maps 360 × 780 onto it).
   The back phone is a little smaller and stands so its whole screen shows next to the front one. */
.photo-devices .hero__stage .device { width: var(--tw); transform: none; }
.photo-devices .hero__stage .device--sender { --tw: 288px; --tk: 0.378947; --hm: matrix3d(2.02004, 0.120543, 0, 0.000185265, -0.0139978, 2.15387, 0, 3.23273e-05, 0, 0, 1, 0, 65.47, 31.7, 0, 1); }
.photo-devices .hero__stage .device--receiver { --tw: 250px; --tk: 0.328947; --hm: matrix3d(1.77935, -0.07771, 0, -0.00017381, 0.0391411, 2.04485, 0, 4.72753e-05, 0, 0, 1, 0, 16.43, 60.27, 0, 1); left: calc(4% + 272px); right: auto; top: 40px; }
.photo-devices .hero__stage .device__frame { padding: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, 0.35)); }
.photo-devices .hero__stage .device--sender .device__frame { aspect-ratio: 760 / 1695; }
.photo-devices .hero__stage .device--receiver .device__frame { aspect-ratio: 760 / 1693; }
.photo-devices .hero__stage .device__frame::after { inset: 0; }
.photo-devices .hero__stage .device--sender .device__frame::after { background-image: url(img/telefon-skra-venstre.webp); }
.photo-devices .hero__stage .device--receiver .device__frame::after { background-image: url(img/telefon-skra.webp); }
.photo-devices .hero__stage .device__screen {
  position: absolute; left: 0; top: 0; width: 360px; height: 780px; aspect-ratio: auto; transform-origin: 0 0;
  border-radius: 40px; /* the display's own corner radius at 360 px wide (8 of 67 mm), so no corner shows past the frame */
  transform: scale(var(--tk)) var(--hm);
}
.photo-devices .hero__stage .app { transform: none; }

/* Laptop: the picture is the lid and the front edge of the base (no keyboard); the admin screen sits in its screen area. */
.photo-devices .laptop { aspect-ratio: 1407 / 871; filter: drop-shadow(0 30px 34px rgba(15, 27, 45, 0.28)); }
.photo-devices .laptop::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url(img/laptop.webp) center / 100% 100% no-repeat; }
.photo-devices .laptop__lid { position: absolute; inset: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.photo-devices .laptop__screen { position: absolute; left: 10.9453%; top: 4.5924%; width: 78.0384%; height: 77.3823%; aspect-ratio: auto; border-radius: 0; }
.photo-devices .laptop__base { display: none; }

/* ---------- Situations explorer ---------- */
.explorer { display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; gap: 40px 56px; align-items: start; }
.explorer__tabs { display: grid; gap: 10px; }
.situation-tab { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; width: 100%; text-align: left; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px 18px 0 18px; background: var(--surface); cursor: pointer; transition: border-color 0.2s, box-shadow 0.25s var(--ease); }
.situation-tab:hover { border-color: #cfccc2; }
.situation-tab .swatch { grid-row: span 2; width: 14px; height: 14px; }
.situation-tab b { font-size: 19px; letter-spacing: -0.01em; }
.situation-tab small { color: var(--text-muted); font-size: 14px; }
.situation-tab[aria-selected='true'] { border-color: var(--ink); box-shadow: 0 12px 30px -18px rgba(15, 27, 45, 0.45); }
.explorer__panels { min-height: 420px; }
.explorer__panel { animation: panel-in 0.45s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.explorer__panel .h3 { display: flex; align-items: center; gap: 12px; }
.explorer__panel .h3 .swatch { width: 16px; height: 16px; }
.explorer__sub { display: none; }
.white .situation-tab { background: var(--paper); }
/* The same five rows for every situation, so the differences line up. */
.compare { margin-top: 28px; border-top: 1px solid var(--line); }
.compare > div { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.compare dt { padding-top: 3px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.compare dd { color: var(--ink); }
/* Below the header and the sub-navigation. */
.explorer__device { position: sticky; top: calc(var(--header-h) + 88px); }

/* ---------- Flow: steps driven by the scroll position ---------- */
.flow-wrap { padding-bottom: var(--section); }
.flow__pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.flow { --pin-top: calc(var(--header-h) + 58px); } /* below the header and the sticky sub-navigation */
.flow.is-pinned .flow__track { height: calc(2080px + min(760px, 100vh - var(--pin-top))); }
.flow.is-pinned .flow__pin { position: sticky; top: var(--pin-top); height: min(760px, calc(100vh - var(--pin-top))); padding: 32px 0; }
.flow__steps { position: relative; margin-top: 40px; }
.flow__list { display: grid; gap: 4px; }
.flow__rail { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--line); }
.flow__rail i { position: absolute; inset: 0; border-radius: 2px; background: var(--ink); transform-origin: top; transform: scaleY(0); will-change: transform; }
.flow__step { position: relative; padding: 14px 0 14px 32px; }
.flow__step h3 { font-size: clamp(19px, 1.8vw, 22px); font-weight: 700; letter-spacing: -0.01em; }
.flow__step-btn { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font-weight: inherit; letter-spacing: inherit; cursor: pointer; }
.site .flow__step-btn { color: var(--text-muted); transition: color 0.3s var(--ease); }
.site .flow__step.is-active .flow__step-btn, .site .flow:not(.is-pinned) .flow__step-btn { color: var(--ink); }
.flow__step-num { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.flow__step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.flow__step-body > div { overflow: hidden; }
.flow__step-body p { padding-top: 8px; max-width: 460px; color: var(--text-body); opacity: 0; transition: opacity 0.35s var(--ease); }
.flow__step.is-active .flow__step-body, .flow:not(.is-pinned) .flow__step-body { grid-template-rows: 1fr; }
.flow__step.is-active .flow__step-body p, .flow:not(.is-pinned) .flow__step-body p { opacity: 1; }
.flow__visual { position: relative; display: flex; justify-content: center; }
.flow__glow { position: absolute; top: 10%; bottom: 10%; left: -20%; right: -20%; border-radius: 50%; pointer-events: none; transition: background 0.5s var(--ease); }
.flow__more { margin-top: 56px; padding-left: 32px; }

/* ---------- Overview for management ---------- */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px 72px; align-items: center; }
/* Flipped: the picture takes the wider left column and the text sits on the right. */
.split--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.split--flip > .split__text { order: 2; }
.split__text .check-list { margin-top: 40px; }
.split__text .lead { margin-top: 24px; }
.laptop { position: relative; width: 92%; max-width: 620px; margin: 0 auto; }
.laptop__lid { padding: 14px 14px 18px; border-radius: 18px 18px 0 0; background: linear-gradient(160deg, #3a4049, #15191f 30%, #1d2229); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.1); }
.laptop__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: #f4f4f5; container-type: inline-size; }
.laptop__base { height: 16px; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(#cfd3d9, #9aa1aa); box-shadow: 0 30px 50px -20px rgba(15, 27, 45, 0.45); position: relative; }
.laptop__base::before { content: ''; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #b5bac2; }
/* The admin screen scales with the laptop: every size is in em, and the font size follows the screen width. */
.admin { position: absolute; inset: 0; display: grid; grid-template-rows: 2.8em 1fr; font-family: var(--font-app); font-size: 1.95cqw; color: #18181b; line-height: 1.35; }
.admin__bar { display: flex; align-items: center; gap: 0.6em; padding: 0 1.2em; background: #0f172a; color: #fff; font-weight: 700; font-size: 1.05em; }
.admin__bar span { margin-left: auto; font-weight: 400; opacity: 0.7; font-size: 0.85em; }
.admin__body { display: grid; grid-template-columns: 9em 1fr; min-height: 0; }
.admin__side { background: #fff; border-right: 1px solid #e4e4e7; padding: 0.8em 0.6em; display: grid; align-content: start; gap: 0.3em; }
.admin__side div { padding: 0.5em 0.7em; border-radius: 0.5em; color: #52525b; }
.admin__side div.is-on { background: #fef2f2; color: #b91c1c; font-weight: 600; }
.admin__main { padding: 1.1em 1.3em; overflow: hidden; }
.admin__title { display: flex; align-items: center; gap: 0.6em; font-size: 1.4em; font-weight: 800; }
.admin__title i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #1d4ed8; }
.site .admin__meta { margin-top: 0.3em; color: #52525b; }
.admin__stats { margin-top: 0.8em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; }
.admin__stat { padding: 0.7em 0.8em; border-radius: 0.6em; background: #fff; border: 1px solid #e4e4e7; }
.admin__stat b { display: block; font-size: 1.45em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin__stat small { color: #71717a; }
.admin__table { margin-top: 0.8em; background: #fff; border: 1px solid #e4e4e7; border-radius: 0.6em; overflow: hidden; }
.admin__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0.6em; padding: 0.55em 0.8em; border-top: 1px solid #f4f4f5; align-items: center; }
.admin__row:first-child { border-top: 0; color: #71717a; font-weight: 600; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; }
.pill { justify-self: start; padding: 0.15em 0.65em; border-radius: 999px; font-size: 0.88em; font-weight: 600; background: #f4f4f5; color: #52525b; }
.pill--ok { background: #dcfce7; color: #166534; }
.pill--go { background: #dbeafe; color: #1e40af; }
/* Adminsiden on «Slik virker det»: Brukere (levels per situation) and a PLIVO in progress. */
.admin__sum { margin-top: 0.7em; display: grid; gap: 0.15em; font-weight: 700; }
.admin__sum p { display: flex; align-items: center; gap: 0.5em; }
.admin__sum i { flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; }
.admin__row--levels { grid-template-columns: 1.15fr 1fr 1fr; padding-block: 0.4em; }
.admin__row--live { grid-template-columns: 1.1fr 1fr 1fr 0.65fr; }
.lv { justify-self: start; display: inline-flex; align-items: center; gap: 0.55em; padding: 0.2em 0.6em 0.2em 0.75em; border: 1px solid #d4d4d8; border-radius: 0.5em; background: #fff; font-size: 0.9em; font-weight: 600; white-space: nowrap; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); }
.lv::after { content: ''; width: 0.38em; height: 0.38em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15em) rotate(45deg); }
.lv--prio { background: #dcfce7; border-color: #dcfce7; color: #166534; }
.lv--off { background: #fee2e2; border-color: #fee2e2; color: #b91c1c; }
.site .admin__foot { margin-top: 0.6em; font-size: 0.85em; color: #71717a; }
.admin__head { margin-top: 0.5em; display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.site .admin__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.admin__btn { display: inline-block; padding: 0.4em 0.9em; border-radius: 0.5em; background: #dc2626; color: #fff; font-size: 0.9em; font-weight: 700; }
.admin__msg { margin-top: 0.7em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35em 0.5em; padding: 0.6em 0.8em; background: #fff; border: 1px solid #e4e4e7; border-radius: 0.6em; font-size: 0.9em; color: #71717a; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.admin__msg b { color: #18181b; }
.admin__msg:not(.is-on) { opacity: 0; transform: translateY(0.6em); }
.admin__audio { flex: 1 1 10em; display: flex; align-items: center; gap: 0.7em; height: 1.8em; padding: 0 0.8em; border-radius: 999px; background: #f4f4f5; }
.admin__audio i { width: 0; height: 0; border-left: 0.55em solid #18181b; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }
.admin__audio em { flex: 1; height: 0.2em; border-radius: 999px; background: #d4d4d8; }
.admin__msg small { flex-basis: 100%; font-size: 1em; color: #52525b; }
@media (prefers-reduced-motion: no-preference) {
  .admin__row .pill { animation: pill-in 0.35s var(--ease); }
}
@keyframes pill-in { from { opacity: 0; transform: scale(0.9); } }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.card { padding: 28px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px 22px 0 22px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(15, 27, 45, 0.4); }
.card__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px 14px 0 14px; background: var(--paper); color: var(--ink); margin-bottom: 22px; }
.card__icon svg { width: 24px; height: 24px; }
.card h3 { font-size: 19px; line-height: 1.3; margin-bottom: 8px; }
.card p { color: var(--text-body); font-size: 15.5px; }
.white .card { background: var(--paper); border-color: transparent; }
.white .card .card__icon { background: var(--surface); }
.section-more { margin-top: 40px; display: flex; }

/* ---------- Front page: the three situations at a glance ---------- */
.situations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.situation { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 32px 26px 24px; border-radius: 22px 22px 0 22px; background: var(--surface); border: 1px solid var(--line); }
.situation::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; }
.situation--plivo::before, .situation--plivo .situation__icon { background: var(--plivo); }
.situation--violence::before, .situation--violence .situation__icon { background: var(--violence); }
.situation--medical::before, .situation--medical .situation__icon { background: var(--medical); }
.situation__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 14px 14px 0 14px; }
.situation__icon img { width: auto; height: 30px; }
.situation h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
.situation__sub { margin-top: 4px; font-size: 15px; color: var(--text-muted); }
.situation__text { margin: 16px 0 24px; color: var(--text-body); }
.situation__who { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; }

/* ---------- Front page: before, during and after ---------- */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.phase { padding: 36px 36px 0 0; }
.phase + .phase { padding-left: 36px; border-left: 1px solid var(--line); }
.phase h3 { margin: 20px 0 10px; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; }
.phase p { color: var(--text-body); }
.team__lead { margin-top: 24px; }

/* ---------- Team: who is behind it (rows, so it reads differently from the cards) ---------- */
.team { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px 72px; align-items: start; }
.team .h2 { font-size: clamp(28px, 3.2vw, 40px); }
.team__list { border-top: 1px solid var(--line); }
.team__row { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 8px 32px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.team__row dt { display: flex; align-items: baseline; gap: 12px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.team__row dt span { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--text-muted); }
.team__row dd { color: var(--text-body); }

/* ---------- Page heads and sub-navigation ---------- */
.page-head { padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(40px, 5vw, 64px); }
.page-head .lead { margin-top: 24px; max-width: 640px; }
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(245, 244, 239, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.subnav a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 14px; border-radius: 12px 12px 0 12px; text-decoration: none; font-size: 15px; font-weight: 600; transition: background-color 0.2s, color 0.2s; }
.site .subnav a { color: var(--text-muted); }
.site .subnav a:hover { color: var(--ink); }
.site .subnav a.is-current { background: var(--ink); color: var(--paper); }
.subnav a span { font-family: var(--font-mono); font-size: 12px; font-weight: 400; }
.phase-head { margin-bottom: 56px; }
.phase-head__num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px 8px 0 8px; background: var(--ink); color: var(--paper); font-size: 12px; }
.phase-head .lead { margin-top: 24px; max-width: 640px; }
.phase-head--spaced { margin: clamp(72px, 9vw, 112px) 0 40px; }

/* ---------- Feature rows ---------- */
.features { display: grid; gap: clamp(72px, 9vw, 120px); }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 80px; align-items: center; }
.feature--flip > .feature__visual { order: -1; }
.feature__text { max-width: 500px; }
.feature__text .h3 { margin-bottom: 18px; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.feature__text .body-lg { color: #273244; }
.feature__text .check-list li { font-size: 17px; }
.feature__label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: var(--font-mono); font-size: 13px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.feature__label span { display: inline-grid; place-items: center; height: 26px; padding: 0 7px; border-radius: 8px 8px 0 8px; background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: 0.02em; }
.feature__text .check-list { margin-top: 32px; }
.feature__visual { display: flex; justify-content: center; position: relative; z-index: 0; }
.feature__visual::before { content: ''; position: absolute; top: 6%; bottom: 6%; left: 8%; right: 8%; border-radius: 40px 40px 0 40px; background: var(--surface); border: 1px solid var(--line); z-index: -1; }
.white .feature__visual::before { background: var(--paper); border-color: transparent; }
/* A visual that is already a card shows only its own outline. */
.feature__visual--plain::before { display: none; }

/* ---------- Feature rows that follow the scroll («Slik virker det») ----------
   The script puts .is-armed on .site when the page can animate. Each row then gets the stage classes s1–s12 as it
   moves up the screen and loses them again when scrolled back, so every step plays in reverse on the way up.
   The panel and the cards get their size from inline styles that the script recalculates while scrolling.
   Without the script, with reduced motion, or in a still preview, every row shows its end state.
   Panel rows: the white panel opens out from behind the phone over stages 1–6, then the text arrives inside it.
   Card rows: the card unfolds from its heading while the text arrives. In both, the picture acts out the text.
   The picture itself (phone, laptop or log) has its own stages d1–d12, which run in time: they start once all of the
   picture is on screen, and play again while it stays in view (so it is always seen whole, on any screen height). */
.feature--panel { position: relative; isolation: isolate; }
.feature--panel .feature__visual::before { display: none; }
.feature__panel { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; border-radius: 40px 40px 0 40px; background: var(--surface); border: 1px solid var(--line); }
.feature--panel .feature__text { padding: 56px 0 56px 56px; }
/* Mirrored row: the text sits against the right edge of the panel, as far in as the row above sits from the left. */
.feature--panel.feature--flip .feature__text { justify-self: end; padding: 56px 56px 56px 0; }
/* Wide rows (Adminsiden): 5fr text and 7fr laptop. On a white band the panel takes the paper colour. */
.feature--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feature--wide.feature--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature--wide .laptop { width: 86%; max-width: 660px; margin: 64px auto; }
.white .feature__panel { background: var(--paper); border-color: transparent; }
/* Everything below appears and disappears in about 0.3 s, in both directions. */
.is-armed .feature__text > :not(.check-list), .is-armed .feature__text .check-list li,
.is-armed .ready-ok, .is-armed .pick__log {
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.is-armed .ready-list li { transition: opacity 0.3s var(--ease), filter 0.3s var(--ease); }
.is-armed .timeline li { transition: color 0.3s var(--ease); }
.is-armed .timeline li::before { transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.is-armed .drill-band { transition: height 0.35s var(--ease); }
.is-armed .scr--start .ahint { transition: opacity 0.35s var(--ease); }

/* Text: in panel rows from stage 6 (when the panel is open), in card rows from stage 2. */
.is-armed .feature--panel:not(.s6) .feature__label,
.is-armed .feature--panel:not(.s7) .feature__text .h3,
.is-armed .feature--panel:not(.s8) .feature__text .body-lg,
.is-armed .feature--panel:not(.s9) .feature__text .check-list li:nth-child(1),
.is-armed .feature--panel:not(.s10) .feature__text .check-list li:nth-child(2),
.is-armed .feature--panel:not(.s11) .feature__text .check-list li:nth-child(3),
.is-armed .feature--card:not(.s2) .feature__label,
.is-armed .feature--card:not(.s3) .feature__text .h3,
.is-armed .feature--card:not(.s4) .feature__text .body-lg,
.is-armed .feature--card:not(.s5) .feature__text .check-list li:nth-child(1),
.is-armed .feature--card:not(.s6) .feature__text .check-list li:nth-child(2),
.is-armed .feature--card:not(.s7) .feature__text .check-list li:nth-child(3) { opacity: 0; transform: translateY(14px); }

/* Readiness: the settings are checked one by one (stages 5–11), then «Telefonen er klar» (12). */
.is-armed .feature:not(.d5) .ready-list li:nth-child(1),
.is-armed .feature:not(.d6) .ready-list li:nth-child(2),
.is-armed .feature:not(.d7) .ready-list li:nth-child(3),
.is-armed .feature:not(.d8) .ready-list li:nth-child(4),
.is-armed .feature:not(.d9) .ready-list li:nth-child(5),
.is-armed .feature:not(.d10) .ready-list li:nth-child(6),
.is-armed .feature:not(.d11) .ready-list li:nth-child(7) { opacity: 0.4; filter: grayscale(1); }
.is-armed .feature:not(.d12) .ready-ok { opacity: 0; transform: translateY(-8px); }

/* Drill: a finger taps the «Øvelsesmodus» switch in Innstillinger (5), it turns on (6), the start screen comes back
   with the ØVELSE band (7), and the note follows (8). */
.is-armed .feature.d5:not(.d7) .touch--tap { opacity: 1; transform: scale(1); }
.is-armed .feature:not(.d6) .switch.is-on { background: #334155; }
.is-armed .feature:not(.d6) .switch.is-on::after { transform: none; }
.is-armed .feature:not(.d7) .scr--settings { opacity: 1; visibility: visible; }
.is-armed .feature:not(.d7) .drill-start { opacity: 0; visibility: hidden; }
.is-armed .feature:not(.d7) .drill-band { height: 0; }
.is-armed .feature:not(.d8) .scr--start .ahint { opacity: 0; }

/* Places: the list is open, a finger picks «Lærerværelset» (7), it is sent at once and logged (8),
   and the helper's phone shows where to go (9). */
.is-armed .feature.d7:not(.d8) .touch--pick { opacity: 1; transform: scale(1); }
.is-armed .feature:not(.d8) .pick__menu { opacity: 1; visibility: visible; }
.is-armed .feature:not(.d8) .pick__value { display: none; }
.is-armed .feature:not(.d8) .pick__hint { display: block; }
.is-armed .feature:not(.d8) .pick__log { opacity: 0; transform: translateY(8px); }
.is-armed .feature:not(.d9) .duo__helper { opacity: 0; transform: translateX(28px); }

/* Log: every entry stays visible; the timeline is marked off in order (5–10), ending with «Varselet er avblåst». */
.is-armed .feature:not(.d5) .timeline li:nth-child(1),
.is-armed .feature:not(.d6) .timeline li:nth-child(2),
.is-armed .feature:not(.d7) .timeline li:nth-child(3),
.is-armed .feature:not(.d8) .timeline li:nth-child(4),
.is-armed .feature:not(.d9) .timeline li:nth-child(5),
.is-armed .feature:not(.d10) .timeline li:nth-child(6) { color: #8a94a6; }
.is-armed .feature:not(.d5) .timeline li:nth-child(1)::before,
.is-armed .feature:not(.d6) .timeline li:nth-child(2)::before,
.is-armed .feature:not(.d7) .timeline li:nth-child(3)::before,
.is-armed .feature:not(.d8) .timeline li:nth-child(4)::before,
.is-armed .feature:not(.d9) .timeline li:nth-child(5)::before,
.is-armed .feature:not(.d10) .timeline li:nth-child(6)::before { background: var(--surface); border-color: var(--line); }

/* A slight parallax: the phone moves a little slower than the page (browsers with scroll-driven animations). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feature__visual > .device { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes drift { from { transform: translateY(28px); } to { transform: translateY(-28px); } }
.feature__visual .device { margin: 28px 0; }
/* Two phones: the sender, and in front of it to the right the helper who gets the place. */
.duo { position: relative; width: min(100%, 440px); margin: 28px 0; padding-bottom: 44px; }
.feature__visual .duo .device { margin: 0; }
.duo__helper { position: absolute; z-index: 2; right: 0; top: 150px; --w: 220px; --scale: 0.55; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }

/* ---------- Timeline ---------- */
.timeline { position: relative; width: min(100%, 460px); margin: 28px 0; padding: 22px 24px; border-radius: 22px 22px 0 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(15, 27, 45, 0.45); }
.timeline__head { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 18px; }
.timeline ol { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; display: grid; gap: 16px; }
.timeline ol::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 12px; font-size: 15px; }
.timeline li::before { content: ''; position: absolute; left: -22px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
.timeline li.is-end::before { background: var(--check); border-color: var(--check); }
.timeline time { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); padding-top: 1px; }

/* ---------- Reach: the alert in the app, and as SMS when the app doesn't answer ---------- */
.reach { display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 4vw, 48px); }
.reach figure { display: grid; justify-items: center; gap: 16px; }
.reach figcaption { max-width: 220px; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.reach .device { --w: 240px; --scale: 0.6056; }
/* The pair follows the scroll like the feature rows: the app alert takes over the lock screen first, the SMS arrives after. */
.reach .scr--alert { opacity: 1; visibility: visible; }
.reach .sms-bubble { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.is-armed .reach:not(.d4) .scr--alert { opacity: 0; visibility: hidden; }
.is-armed .reach:not(.d8) .sms-bubble { opacity: 0; transform: translateY(10px); }

/* ---------- Pricing ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tier { position: relative; display: flex; flex-direction: column; padding: 34px 30px; border-radius: 26px 26px 0 26px; background: var(--surface); border: 1px solid var(--line); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.tier:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(15, 27, 45, 0.45); }
.tier--featured { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tier__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tier__name { font-size: 20px; font-weight: 700; }
.badge { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 10px 10px 0 10px; background: var(--paper); color: var(--ink); }
.tier__for { margin-top: 4px; color: var(--text-muted); }
.site .tier--featured .tier__for, .site .tier--featured .tier__price span { color: var(--band-body); }
.tier__price { display: flex; align-items: baseline; gap: 8px; margin-top: 30px; }
.tier__price b { font-size: 60px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tier__price span { color: var(--text-body); }
.tier__note { margin-top: 6px; font-size: 14px; color: var(--text-muted); }
.site .tier--featured .tier__note { color: var(--band-muted); }
.tier .button { margin-top: 30px; }
.included { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; padding: 26px 30px; border-radius: 26px 26px 0 26px; background: var(--surface); border: 1px solid var(--line); }
.included h3 { font-size: 16px; }
.included ul { flex: 1 1 520px; display: flex; flex-wrap: wrap; gap: 12px 26px; }
.included li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-body); }
.included svg { width: 18px; height: 18px; color: var(--check); }

/* ---------- FAQ: each answer opens and closes in 150 ms ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq__item { border: 1px solid var(--line); border-radius: 18px 18px 0 18px; background: var(--surface); transition: border-color 150ms ease; }
.faq__item.is-open { border-color: #cfccc2; }
.faq__h { font-size: 17px; font-weight: 600; line-height: 1.4; }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; border: 0; border-radius: 18px 18px 0 18px; background: none; text-align: left; font-size: 17px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.faq__q i { flex: none; width: 28px; height: 28px; border-radius: 8px 8px 0 8px; background: var(--paper); position: relative; }
.faq__q i::before, .faq__q i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--ink); }
.faq__q i::after { transform: rotate(90deg); transition: transform 150ms ease; }
.faq__item.is-open .faq__q i::after { transform: rotate(0deg); }
.faq__a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 150ms ease, visibility 0s linear 150ms; }
.faq__a > div { min-height: 0; overflow: hidden; }
.faq__a p { padding: 0 22px 22px; max-width: 700px; color: var(--text-body); opacity: 0; transition: opacity 150ms ease; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 150ms ease, visibility 0s; }
.faq__item.is-open .faq__a p { opacity: 1; }

/* ---------- Forms ---------- */
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 72px; align-items: start; }
.steps-mini { margin-top: 36px; display: grid; }
.steps-mini li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 26px; }
.steps-mini li:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 46px; bottom: 4px; width: 2px; background: var(--line); }
.steps-mini__num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px 14px 0 14px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 14px; }
.steps-mini h3 { font-size: 18px; margin: 9px 0 4px; }
.steps-mini p { color: var(--text-body); }
.contact { margin-top: 12px; display: grid; gap: 10px; }
.contact a { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 600; text-decoration: none; width: fit-content; }
.contact svg { width: 22px; height: 22px; }
.panel { padding: clamp(28px, 4vw, 48px); border-radius: 30px 30px 0 30px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 70px -44px rgba(15, 27, 45, 0.4); }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field label { font-size: 14px; font-weight: 600; }
.field label small { font-weight: 400; color: var(--text-muted); font-size: 14px; }
.field input { width: 100%; min-width: 0; font: inherit; font-size: 16px; padding: 14px 16px; border: 1.5px solid var(--line-input); border-radius: 10px 10px 0 10px; background: var(--surface); color: var(--ink); }
.field input::placeholder { color: var(--text-placeholder); }
.field input:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15, 27, 45, 0.12); }
.field.is-invalid input { border-color: var(--danger-text); border-width: 2px; }
.field__error { font-size: 14px; font-weight: 600; color: var(--danger-text); }
.select { position: relative; }
.select::after { content: ''; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field select { width: 100%; min-width: 0; font: inherit; font-size: 16px; padding: 14px 48px 14px 16px; border: 1.5px solid var(--line-input); border-radius: 10px 10px 0 10px; background: var(--surface); color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; }
.field select:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15, 27, 45, 0.12); }
/* «Kom i gang» on Priser: the form sits on the white band, so the panel takes the paper colour (like .white .card). */
.white .panel { background: var(--paper); border-color: transparent; box-shadow: none; }
.white .form-note { background: var(--surface); }
.anchor-target { scroll-margin-top: var(--header-h); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form-note { padding: 14px 16px; border-radius: 14px 14px 0 14px; background: var(--paper); font-size: 14px; color: var(--text-body); }
.form-success svg { width: 40px; height: 40px; color: var(--check); margin-bottom: 14px; }
.form-success h3 { font-size: 22px; margin-bottom: 8px; }
.form-success p { color: var(--text-body); }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; }
.cta__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; }
.cta .lead { margin-top: 24px; max-width: 560px; }
.cta__arcs { position: absolute; right: -200px; bottom: -340px; width: 820px; height: 820px; pointer-events: none; opacity: 0.6; }

/* ---------- Footer ---------- */
.site-footer { padding: 64px 0 40px; border-top: 1px solid var(--line); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.site-footer h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; color: var(--text-muted); margin-bottom: 14px; }
.site-footer ul { display: grid; gap: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__brand p { margin-top: 12px; max-width: 280px; color: var(--text-muted); font-size: 15px; }
.site-footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-muted); }
.proto-note { font-family: var(--font-mono); font-size: 12px; }

/* ---------- Phones: accordions and swiping ----------
   On narrow screens the security cards and «Hvem står bak» rows show only their titles; a tap opens the text.
   On wider screens the titles are plain headings and everything shows. */
.acc__btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; text-align: left; cursor: pointer; }
.acc__btn i { flex: none; margin-left: auto; width: 28px; height: 28px; border-radius: 8px 8px 0 8px; background: var(--paper); position: relative; }
.acc__btn i::before, .acc__btn i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--ink); }
.acc__btn i::after { transform: rotate(90deg); transition: transform 150ms ease; }
.acc.is-open .acc__btn i::after { transform: rotate(0deg); }
.team__row .acc__btn span { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--text-muted); }
.swipe-hint { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .explorer { grid-template-columns: minmax(0, 1fr) auto; }
  .explorer__tabs { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
  .hero__stage { transform: scale(0.88); transform-origin: right center; }
}
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { transform: none; height: 680px; max-width: 520px; width: 100%; margin: 8px auto 0; }
  .split, .split--flip, .feature, .start-grid, .team { grid-template-columns: 1fr; }
  .feature--wide, .feature--wide.feature--flip { grid-template-columns: 1fr; }
  .split--flip > .split__text { order: 0; }
  /* Stacked feature rows: the label and heading first, then the picture, then the text and the list – so each
     animation sits right under the heading it belongs to, and plays while it is on screen. */
  .feature { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .feature > .feature__text { display: contents; }
  .feature .feature__label { order: 1; }
  .feature .feature__text > .h3 { order: 2; margin-bottom: 0; }
  .feature > .feature__visual { order: 3; margin-bottom: 12px; }
  .feature .feature__text > .body-lg { order: 4; }
  .feature .feature__text > .check-list { order: 5; margin-top: 24px; }
  .feature--panel .feature__text > * { margin-left: 28px; margin-right: 28px; }
  .feature--panel .feature__label { margin-top: 36px; }
  .feature--panel .feature__text > .check-list { margin-bottom: 36px; }
  .feature--panel .feature__visual .device { margin: 24px 0; }
  .feature--wide .laptop { margin: 24px auto; }
  .feature__panel { border-radius: 30px 30px 0 30px; }
  .situations, .phases { grid-template-columns: 1fr; }
  .phase, .phase + .phase { padding: 28px 0; border-left: 0; }
  .phase + .phase { border-top: 1px solid var(--line); }
  .tiers { grid-template-columns: 1fr; max-width: 520px; }
  .cta__inner { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .flow__pin { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .flow.is-pinned .flow__pin { padding: 12px 0; align-content: center; }
  .flow__text { width: 100%; }
  .flow.is-pinned .flow__intro, .flow.is-pinned .flow__more { display: none; }
  .flow.is-pinned .flow__steps { margin-top: 0; }
  .flow.is-pinned .flow__step:not(.is-active) { display: none; }
  .flow.is-pinned .flow__visual { order: -1; }
  .flow .device { --w: 220px; --scale: 0.55; }
  /* Explorer: the three situations side by side, the phone right under them (so a tap shows at once), then the details. */
  .explorer { grid-template-columns: 1fr; gap: 24px; }
  .explorer__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .explorer__device { position: static; justify-self: center; order: 2; }
  .explorer__panels { min-height: 0; order: 3; }
}
@media (max-width: 560px) {
  .site { --gutter: 20px; --header-h: 64px; }
  .site-header__inner { gap: 12px; }
  .hero__stage { height: 500px; }
  .hero__stage .device { --w: 220px; --scale: 0.55; }
  .hero__stage .device--sender { left: 0; top: 34px; }
  .hero__stage .device--receiver { right: 6px; }
  .photo-devices .hero__stage .device--sender { --tw: 196px; --tk: 0.257895; }
  .page-hero { min-height: 0; padding-top: calc(var(--header-h) + 72px); }
  .photo-devices .hero__stage .device--receiver { --tw: 160px; --tk: 0.210526; left: 185px; top: 34px; }
  .section-head, .phase-head { margin-bottom: 40px; }
  .explorer__device .device { --w: 260px; --scale: 0.6611; }
  .compare > div { grid-template-columns: 1fr; }
  .duo .device:first-child { --w: 230px; --scale: 0.5778; }
  .duo__helper { --w: 180px; --scale: 0.4389; top: 120px; }
  .reach { gap: 16px; }
  .reach .device { --w: 150px; --scale: 0.3556; }
  .subnav a { gap: 6px; padding: 8px 10px; font-size: 14px; }
  .feature__visual::before { left: 0; right: 0; }
  .feature--panel .feature__text, .feature--panel.feature--flip .feature__text { padding: 28px 20px 0; }
  .feature--panel .feature__text > * { margin-left: 20px; margin-right: 20px; }
  .feature--panel .feature__label { margin-top: 28px; }
  .feature--panel .feature__text > .check-list { margin-bottom: 28px; }
  /* Adminsiden on a phone: the browser window on its own, full width, so the text can be read (the laptop is too small). */
  .site .laptop { width: 100%; max-width: none; aspect-ratio: auto; filter: none; }
  .site .laptop::after { display: none; }
  .site .laptop__lid { position: static; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .site .laptop__screen { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 50px -30px rgba(15, 27, 45, 0.45); }
  .site .laptop__base { display: none; }
  .admin { position: relative; inset: auto; font-size: 3.2cqw; } /* as tall as its content */
  .feature--panel.feature--wide .feature__visual { padding: 0 12px; }
  .admin__body { grid-template-columns: 1fr; }
  .admin__side { display: none; }
  /* Hero: the three alert tabs and pause on one row */
  .demo-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; gap: 6px; width: 100%; }
  .demo-tab { justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px; font-size: 13px; line-height: 1.2; text-align: center; }
  .demo-pause { width: 44px; height: 44px; margin-left: 0; }
  /* Tre situasjoner: swipe sideways through the three cards; the next one peeks in */
  .situations { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .situations::-webkit-scrollbar { display: none; }
  .situation { flex: 0 0 84%; scroll-snap-align: start; }
  .swipe-hint { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
  /* Explorer: short tabs (the description moves into the panel) */
  .situation-tab { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 12px 6px; text-align: center; }
  .situation-tab .swatch { grid-row: auto; }
  .situation-tab b { font-size: 15px; line-height: 1.2; }
  .situation-tab small { display: none; }
  .explorer__sub { display: block; margin-top: 6px; color: var(--text-muted); }
  /* Accordions */
  .acc:not(.is-open) .acc__p { display: none; }
  .card-grid { gap: 10px; }
  .card.acc { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 18px; }
  .card.acc:hover { transform: none; box-shadow: none; }
  .card.acc .card__icon { width: 40px; height: 40px; margin: 0; }
  .card.acc .card__icon svg { width: 20px; height: 20px; }
  .card.acc h3 { margin: 0; font-size: 17px; }
  .card.acc .acc__p { grid-column: 1 / -1; margin-top: 12px; }
  .team__row.acc dd { margin-top: 10px; }
  .team__row { grid-template-columns: 1fr; padding: 18px 0; }
  .tier { padding: 28px 24px; }
  .included { padding: 22px; }
  .field-row { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- Short screens (after the width breakpoints, so these win) ----------
   Small laptops (a 13" screen at 150–200 % scaling shows about 1280–1440 × 680–780 px): the front page's phones shrink so
   the whole hero, tabs included, fits on the screen, and the page heroes follow (their height uses --stage-zoom). */
@media (min-width: 961px) and (max-height: 860px) {
  .site { --hero-pt: 40px; --hero-pb: 56px; --hero-lift: 56px; --stage-zoom: 0.78; }
  .hero__stage { zoom: 0.78; width: 560px; max-width: none; margin-inline: auto; } /* a fixed width, centred over the tabs */
  .explorer__device .device { --w: 260px; --scale: 0.6611; }
  .flow .device { --w: 260px; --scale: 0.6611; }
}
@media (min-width: 961px) and (max-height: 720px) {
  .site { --stage-zoom: 0.66; }
  .hero__stage { zoom: 0.66; }
  .explorer__device .device { --w: 230px; --scale: 0.5778; }
  .flow .device { --w: 230px; --scale: 0.5778; }
}

/* Short phones (iPhone SE, 375 × 667): smaller phones in the rows, so each picture fits on the screen below the
   header and the sub-navigation while its animation plays. */
@media (max-width: 560px) and (max-height: 740px) {
  .device--md { --w: 236px; --scale: 0.5944; }
  .duo .device:first-child { --w: 206px; --scale: 0.5111; }
  .duo__helper { --w: 160px; --scale: 0.3833; top: 104px; }
  .duo { padding-bottom: 24px; }
  .explorer__device .device { --w: 236px; --scale: 0.5944; }
  .flow .device { --w: 160px; --scale: 0.3833; }
  .flow.is-pinned .flow__step-body p { font-size: 15px; }
}