/* humla-app.no, round 2 (DECISIONS 153), dark theme from round 4.
   Tokens are the ones in design/DESIGN.md section 3 (Dag) and section 3 "Kveld" (dark). Change them there first. The dark ladder (page, card, selected, hairlines, the
   quiet glow) is the app's own (T24): .scratch/alfa2/polish/spec-menus.md section 3 (T24) holds it until design/DESIGN.md section 3 has been updated.
   One surface (paper), two deliberate breaks: the course band (honey light) and the closing band with the footer (the evening colour of the app icon in light, the page colour in dark).
   Honey is the one strong colour: the download pill, the glow behind the phones, small markers. It is never text on paper; links and eyebrows are honey deep.
   Type is the system stack DESIGN.md allows: SF Pro Rounded where the device has it (ui-rounded), the system font for body text. No web font. */

:root {
  color-scheme: light dark;

  --papir: #f4f1ea;
  --varmhvit: #fffdf8;
  --honning: #f2c14e;
  --honning-lys: #fbefc9;
  --honning-2: #f7df9a;
  --honning-dyp: #8a5a0b;
  --blekk: #2a211a;
  --ikon-kveld: #2a2019; /* the app icon's evening colour: light closing band, light footer, light phone-picture backdrop */
  --kveld: #161411; /* the dark ladder (T24): page and band */
  --kveld-flate: #26231f; /* card, tint and sheet sections, the course band, the sticky bar */
  --kveld-flate-2: #3c3833; /* selected: a checked choice, the form note */
  --krem: #f7efe2;
  --titan: #1f1a16;

  --bg: var(--papir);
  --surface: var(--varmhvit);
  --ink: var(--blekk);
  --ink-2: rgba(42, 33, 26, 0.74);
  --hairline: rgba(42, 33, 26, 0.12);
  --hairline-2: rgba(42, 33, 26, 0.24);
  --accent: var(--honning);
  --accent-text: var(--honning-dyp);
  --tint: var(--honning-lys);
  --selected: var(--tint);
  --band: var(--ikon-kveld);
  --band-edge: rgba(247, 239, 226, 0.15);
  --focus: var(--honning-dyp);
  --error: #a23b2a;
  --glow: radial-gradient(closest-side, rgba(255, 217, 122, 0.6), rgba(242, 193, 78, 0.2) 48%, transparent 74%);
  --shadow-1: 0 2px 6px rgba(74, 52, 20, 0.06), 0 12px 28px rgba(74, 52, 20, 0.1);
  --shadow-2: 0 -1px 0 rgba(42, 33, 26, 0.1), 0 -8px 24px rgba(74, 52, 20, 0.1);
  --shadow-phone: 0 30px 60px rgba(74, 52, 20, 0.22), 0 8px 18px rgba(74, 52, 20, 0.12);
  --shadow-figure: drop-shadow(0 12px 16px rgba(74, 52, 20, 0.22));
  --card-line: transparent;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");

  --font-display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(20px, 5vw, 48px);
  --space: clamp(80px, 9vw, 128px);
  --radius: 28px;
}

/* Kveld: the app's dark ladder, near-black with a trace of warmth (Lab chroma 4 or less on every surface; no brown field). Layers are told apart by lightness, not
   by shadow: page, card (1.18), selected (1.34 over the card). Honey may be text here (10.95:1 on the page). Cards lose their shadow and get a hairline. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--kveld);
    --surface: var(--kveld-flate);
    --ink: var(--krem);
    --ink-2: rgba(247, 239, 226, 0.78);
    --hairline: rgba(247, 239, 226, 0.08);
    --hairline-2: rgba(247, 239, 226, 0.44);
    --accent-text: var(--honning);
    --tint: var(--kveld-flate);
    --selected: var(--kveld-flate-2);
    --band: var(--kveld);
    --band-edge: rgba(247, 239, 226, 0.08);
    --focus: var(--honning);
    --error: #f4a08f;
    --glow: radial-gradient(closest-side, rgba(247, 239, 226, 0.07), rgba(247, 239, 226, 0.03) 50%, transparent 74%);
    --shadow-1: none;
    --shadow-2: 0 -1px 0 rgba(247, 239, 226, 0.08);
    --shadow-phone: 0 30px 60px rgba(0, 0, 0, 0.5), 0 8px 18px rgba(0, 0, 0, 0.35);
    --shadow-figure: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.45));
    --card-line: rgba(247, 239, 226, 0.06);
    --grain: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
.wrap { width: min(100%, 1232px); margin-inline: auto; padding-inline: var(--gutter); }
/* overflow-wrap breaks a word too long for the line; no inserted hyphens, which split «fles-/te» and the brand «Hum-/la» at 390 px (design review round 2, minor 2) */
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 40;
  padding: 12px 20px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none;
}
.skip:focus { top: max(12px, env(safe-area-inset-top)); }

.eyebrow { color: var(--accent-text); font-family: var(--font-display); font-weight: 650; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); letter-spacing: -0.005em; }
.lede { color: var(--ink-2); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.55; }
.tag { display: inline-block; margin-left: 0.4em; padding: 2px 10px; border-radius: 999px; background: var(--tint); color: var(--accent-text); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; vertical-align: 0.12em; box-shadow: inset 0 0 0 1px var(--hairline); }
.textlink { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.textlink:hover { text-decoration-thickness: 3px; }
.fine { color: var(--ink-2); font-size: 1rem; line-height: 1.55; }

/* Buttons: one honey pill for actions on this site; the App Store button is its own black component */
.btn, .cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--honning); color: var(--blekk); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; text-align: center; text-decoration: none;
}
.btn:hover, .cta:hover { background: var(--honning-2); }
.btn--big { min-height: 56px; padding: 0 30px; font-size: 1.125rem; }
/* the small button of the sticky bar (the waitlist button in the badge's place): 44 px high like every tap target of the bar's neighbours */
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; line-height: 1.15; }

/* ---------- The App Store badge (build.mjs appStoreButton) ----------
   ONE image file, src/assets/app-store-badge-nb.svg, in Apple's own proportions (119.66 x 40). Today it is a placeholder that says so; Apple's official, unmodified badge
   replaces the file by a copy and nothing here changes. Apple's rules: never modify, crop or animate it (so no hover style, filter or transition), never under 40 px high,
   and a clear space of at least a quarter of its height on every side: 12 px around the 48 px badge (the row's gap is 12 px 16 px), 11 px around the 44 px one, 10 px around the 40 px one. */
.asb { display: inline-block; line-height: 0; border-radius: 10px; }
.asb img { display: block; height: 48px; width: auto; }
.dl--short .asb img { height: 44px; }
.asb--sm img, .sticky .asb img { height: 40px; }
.asb:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }

/* The download row: the badge and two short lines */
.dl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.dl__text { display: grid; gap: 2px; line-height: 1.3; }
.dl__text strong { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
.dl__text span { color: var(--ink-2); font-size: 0.9375rem; }
/* the waitlist row (partials/download-wait.html): the honey button and the offer line, in the place of the badge */
/* large text: the button may wrap to two lines and shrink to the row, so it never runs off the screen */
.dl--wait .btn { flex: 0 1 auto; min-width: 0; max-width: 100%; padding-block: 8px; line-height: 1.2; }
.dl--short.dl--wait .btn { min-height: 48px; }
.dl--wait .dl__text { max-width: 20em; }
.dl--wait .dl__text strong { text-wrap: balance; }
/* in the centred places (the hero, the band, the closing band) the offer line is centred under the button when it wraps below it, as on a phone */
@media (max-width: 600px) {
  .hero__cta .dl--wait .dl__text, .band .dl--wait .dl__text, .close .dl--wait .dl__text { text-align: center; }
}
/* on phones the sticky bar carries the button once it shows; the header pill steps aside meanwhile */
@media (max-width: 767px) { body:has(.sticky.is-on) .top .getit { visibility: hidden; } }

/* ---------- Header: paper, the real app icon, the sections, the form, the honey pill ---------- */
.top {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top);
  background: rgba(244, 241, 234, 0.96);
  box-shadow: 0 1px 0 var(--hairline);
}
@media (prefers-color-scheme: dark) { .top { background: rgba(22, 20, 17, 0.96); } }
.top__in { display: flex; align-items: center; gap: 16px; min-height: 64px; }
/* below the width where the sections show: with large text there is no room for the logo, the pill (Last ned or Venteliste) and the menu button on one row, so the pill and the button
   take a second row instead of running over the logo or off the screen; at normal text the three fit on one (a 2 px gap on the 320 px phone) */
@media (max-width: 999px) { .top__in { flex-wrap: wrap; gap: 0 8px; } .brand { gap: 8px; } }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--ink); text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 22.4%; }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.03em; }
.nav { display: none; }
.nav ul { display: flex; gap: 2px; }
.nav a, .top__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--ink); font-weight: 550; font-size: 0.9688rem; text-decoration: none; }
.nav a:hover, .top__link:hover { background: var(--tint); }
.nav__for { position: relative; }
.nav__drop summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--ink); font-weight: 550; font-size: 0.9688rem; cursor: pointer; list-style: none; }
.nav__drop summary::-webkit-details-marker { display: none; }
.nav__drop summary::after { content: ""; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-1px) rotate(45deg); }
.nav__drop[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.nav__drop summary:hover, .nav__drop[open] summary { background: var(--tint); }
.nav__drop .nav__sub {
  position: absolute; left: 0; top: calc(100% + 6px); display: grid; gap: 2px; min-width: 176px; padding: 6px;
  border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--card-line);
}
.nav__sub a { width: 100%; border-radius: 10px; }
.top__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.top__link { display: none; }
.getit {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--honning); color: var(--blekk); font-family: var(--font-display); font-weight: 700; font-size: 0.9688rem; text-decoration: none; white-space: nowrap;
}
.getit:hover { background: var(--honning-2); }
.menu { position: static; }
.menu summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; list-style: none; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--tint); }
.menu__sheet {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 8px var(--gutter) 20px; background: var(--bg); box-shadow: 0 1px 0 var(--hairline), 0 18px 30px rgba(74, 52, 20, 0.12);
}
@media (prefers-color-scheme: dark) { .menu__sheet { box-shadow: 0 1px 0 var(--hairline), 0 18px 30px rgba(0, 0, 0, 0.5); } }
.menu__list a, .menu__form { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--hairline); color: var(--ink); font-family: var(--font-display); font-weight: 650; font-size: 1.1875rem; text-decoration: none; }
.menu__for { margin-top: 8px; }
.menu__h { padding-top: 10px; color: var(--accent-text); font-family: var(--font-display); font-weight: 650; font-size: 0.9375rem; }
.menu__form { color: var(--accent-text); border-bottom: 0; }
@media (min-width: 600px) { .top__link { display: inline-flex; } }
@media (min-width: 1000px) {
  .nav { display: block; margin-left: 12px; }
  .menu { display: none; }
}

/* ---------- Phones: the real app screens in the iPhone frame of the App Store images ----------
   assets/iphone-ramme.svg is the shared vector frame (store/screenshots/humla/device on store-v2, derive-assets.py copies it): the device is 1020 x 2161
   (data-device-width) on a 1380 x 2521 canvas that starts at -180, -110 (the viewBox), with its own shadow; the screen window is 972 x 2113 at 24, 24 (a
   24 px bezel) with a 121 px corner. The box is the device; the screen sits in the window and runs 2 px larger on each side so no seam shows, and the frame
   is laid over both. Every number below is that geometry in per cent of the device; a test reads the SVG and holds these numbers to it. */
.phone {
  --pw: clamp(220px, 24vw, 330px);
  position: relative; flex: none; width: var(--pw); aspect-ratio: 1020 / 2161;
}
.phone img { position: absolute; left: 2.157%; top: 1.018%; width: 95.686%; height: 97.964%; border-radius: 12.4% / 5.72%; object-fit: cover; background: var(--band); }
.phone::after { content: ""; position: absolute; left: -17.647%; top: -5.090%; width: 135.294%; height: 116.659%; background: url("/assets/iphone-ramme.svg") 0 0 / 100% 100% no-repeat; pointer-events: none; }
/* The dark page gets the same frame with a black shadow: the light frame's brown shadow is lighter than #161411 and would glow under every phone (the geometry is identical; a test holds the two files together) */
@media (prefers-color-scheme: dark) { .phone::after { background-image: url("/assets/iphone-ramme-kveld.svg"); } }

/* ---------- Hero: centred, the H1 as a feeling, three phones fanned out over a honey glow ---------- */
.hero { position: relative; overflow: clip; padding-top: clamp(48px, 7vw, 104px); }
.hero__text { display: grid; justify-items: center; gap: 20px; text-align: center; }
.hero h1 { font-size: clamp(3.125rem, 1.6rem + 5.2vw, 5.5rem); line-height: 0.98; letter-spacing: -0.045em; }
/* «Hemmeligheten» is 347 px wide at 50 px: on a phone narrower than 390 px it is wider than the column, widens the whole hero column (the grid track follows its longest word) and is cut off at 360 px */
@media (max-width: 389px) { .hero h1 { font-size: clamp(2.5rem, 12.4vw, 3.125rem); } }
.hero__lead { max-width: 36em; color: var(--ink-2); font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.55; }
.hero__cta { display: grid; justify-items: center; gap: 10px; margin-top: 10px; }
.hero__cta .dl { justify-content: center; text-align: left; }
.hero__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-2); font-weight: 600; font-size: 1rem; text-decoration: none; }
.hero__more::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.hero__more:hover { color: var(--ink); }

/* ---------- The ironic awards (awards.mjs, MK1): a row of inline SVG badges in the hero and in the closing band ----------
   Each badge carries its own colours (honey medallion, ink ribbon with cream small print), so it reads the same on paper, on the dark page and on the evening colour of the closing
   band, and nothing here changes with the theme but the shadow. The small print is 17.5 units high in a viewBox 240 wide: it is 11 px at a badge 151.4 px wide. So a row is two
   badges (154 px each at 360 px, at most 166 px) from 355 px to 779 px, four (at least 163 px each) from 780 px, and one 220 px badge under 355 px; the test of the awards reads the three
   rules below and holds the small print at 11 px at every width from 320 to 2560 px. */
.awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; width: min(100%, 332px); margin: 12px auto 0; padding: 0; }
.awards li { min-width: 0; }
.awards svg { display: block; width: 100%; height: auto; filter: var(--shadow-figure); }
.close .awards { margin-top: 20px; }
@media (max-width: 354px) {
  .awards { grid-template-columns: minmax(0, 1fr); width: min(100%, 220px); }
}
@media (min-width: 780px) {
  .awards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; width: min(100%, 880px); }
}

.fan {
  --pw: clamp(230px, 27vw, 380px);
  position: relative; height: calc(var(--pw) * 1.72); margin-top: clamp(40px, 6vw, 72px);
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
}
.fan__glow { position: absolute; left: 50%; top: 4%; width: calc(var(--pw) * 2.8); height: calc(var(--pw) * 2); translate: -50% 0; background: var(--glow); pointer-events: none; }
.fan .phone { --pw: inherit; position: absolute; left: 50%; top: 0; width: var(--pw); }
.fan__c { translate: -50% 0; z-index: 2; }
.fan__l, .fan__r { z-index: 1; }
.fan__l { transform: translateX(calc(-50% - var(--pw) * 0.8)) translateY(calc(var(--pw) * 0.12)) rotate(-7deg) scale(0.88); }
.fan__r { transform: translateX(calc(-50% + var(--pw) * 0.8)) translateY(calc(var(--pw) * 0.12)) rotate(7deg) scale(0.88); }
@media (max-width: 599px) {
  .fan__l { transform: translateX(calc(-50% - var(--pw) * 0.86)) translateY(calc(var(--pw) * 0.14)) rotate(-7deg) scale(0.86); }
  .fan__r { transform: translateX(calc(-50% + var(--pw) * 0.86)) translateY(calc(var(--pw) * 0.14)) rotate(7deg) scale(0.86); }
}

/* ---------- Section heads and the alternating feature rows ---------- */
.head { display: grid; gap: 16px; max-width: 46rem; }
.head--center { justify-items: center; margin-inline: auto; text-align: center; }
.head h2, .row h2, .faq h2, .sect h2, .proof h2 { font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem); line-height: 1.03; }
.app { padding-top: clamp(40px, 5vw, 80px); }
/* the glow behind a phone reaches past the column; these sections clip it so a phone never scrolls sideways */
.app, .kurs, .sect-row, .pagehead, .formpage { overflow-x: clip; }
.row { display: grid; gap: 40px; align-items: center; padding-block: clamp(56px, 7vw, 96px); }
.row + .row { border-top: 1px solid var(--hairline); }
.row__text { display: grid; gap: 16px; justify-items: start; max-width: 34rem; }
.row h3 { font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.04; }
.row__text > p:not(.eyebrow) { color: var(--ink-2); max-width: 32em; }
.row__text > .row__lead { color: var(--ink); font-size: clamp(1.125rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; }
.row__text .dl { margin-top: 10px; }
.row__media { position: relative; display: grid; place-items: center; min-height: 100%; padding-block: 12px; }
.row__media::before { content: ""; position: absolute; inset: -12% -20%; background: var(--glow); opacity: 0.8; pointer-events: none; }
.row__media .phone { --pw: clamp(230px, 26vw, 320px); }
.pair { grid-template-columns: 1fr; }
.pair .phone { grid-area: 1 / 1; }
.pair__back { transform: translateX(-48%) translateY(-5%) rotate(-6deg) scale(0.86); }
.pair__front { transform: translateX(24%); }
/* two columns: more room, so the back phone shows its title and steps (about 85 % of it visible) */
@media (min-width: 960px) {
  .pair__back { transform: translateX(-54%) translateY(-7%) rotate(-6deg) scale(0.86); }
  .pair__front { transform: translateX(26%); }
}
/* phones under 480 px: both phones a little smaller and spread to the gutters, so the back phone is never cut off at the screen edge (design review round 2, minor 5) */
@media (max-width: 479px) {
  .pair .phone { --pw: min(230px, 54vw); }
  .pair__back { transform: translateX(-36%) translateY(-5%) rotate(-6deg) scale(0.86); }
  .pair__front { transform: translateX(36%); }
}
.points { display: grid; width: 100%; max-width: 32em; border-top: 1px solid var(--hairline); }
.points li { padding-block: 14px; border-bottom: 1px solid var(--hairline); color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; }
.points strong { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.01em; }
.points--ticks li { position: relative; padding-left: 30px; color: var(--ink); font-weight: 550; }
.points--ticks li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 12px; height: 12px; border-radius: 50%; background: var(--honning); box-shadow: 0 0 0 4px rgba(242, 193, 78, 0.25); }
@media (min-width: 960px) {
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); }
  .row--flip .row__text { order: 2; }
}

/* ---------- Mid-page download band: no colour of its own, hairlines above and below ---------- */
.band { padding-block: clamp(56px, 7vw, 88px) clamp(64px, 8vw, 104px); border-top: 1px solid var(--hairline); }
.band__in { display: grid; justify-items: center; gap: 18px; text-align: center; }
.band__icon { width: 56px; height: 56px; border-radius: 22.4%; box-shadow: var(--shadow-1); }
.band h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.band .dl { justify-content: center; text-align: left; }

/* ---------- The course: the one honey-light band on the page ---------- */
.kurs { background: var(--tint); }
.kurs .row { padding-block: clamp(64px, 8vw, 112px) clamp(32px, 4vw, 56px); }
.kurs__media { min-height: 460px; }
.kurs__media::before { opacity: 0.6; }
.kurs__route { position: absolute; inset: 4% 0 auto auto; width: min(80%, 300px); height: auto; stroke: var(--honning-dyp); opacity: 0.45; }
.kurs__bee { position: absolute; z-index: 3; top: -3%; right: max(-16px, 50% - 288px); width: clamp(96px, 11vw, 148px); filter: var(--shadow-figure); }
.kurs .fine { max-width: 34em; }
.row__text > .kurs__plus { color: var(--ink); font-weight: 650; }
@media (prefers-color-scheme: dark) { .kurs__route { stroke: var(--honning); } }
/* the four courses as cards, each with a picture from the app's course illustrations (W6, Helge 20.10: the courses are a bigger value than Humleflyt) */
.kurs__grid { display: grid; gap: 20px; margin: 0; padding: 0 0 clamp(64px, 8vw, 112px); list-style: none; }
.kurs__card { display: grid; align-content: start; gap: 10px; padding: 12px 12px 24px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--card-line); }
.kurs__card img, .pic img { display: block; width: 100%; height: auto; border-radius: 16px; }
.kurs__card h3 { margin-top: 6px; padding-inline: 8px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.08; }
.kurs__card p { padding-inline: 8px; color: var(--ink-2); }
@media (min-width: 640px) { .kurs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kurs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-color-scheme: dark) { .kurs__card img, .pic img { filter: brightness(0.9); } }

/* the three cards under the hero (W6): the exercises, the courses and the library, each a link to its section, so the courses and the podcasts are seen at once */
.glimpse { padding-block: clamp(8px, 2vw, 24px) clamp(48px, 6vw, 80px); }
.glimpse__title { text-align: center; }
.glimpse__grid { display: grid; gap: 16px; margin-top: clamp(16px, 2.5vw, 28px); }
.glimpse__card { grid-template-columns: 76px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-items: center; padding: clamp(18px, 2.6vw, 28px); color: var(--ink); text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.glimpse__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--honning); }
.glimpse__img { grid-row: 1 / span 2; width: 76px; height: 76px; filter: var(--shadow-figure); }
.glimpse__card h3 { font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); line-height: 1.1; text-decoration: underline; text-decoration-color: var(--honning); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.glimpse__card p { color: var(--ink-2); }
@media (min-width: 900px) {
  .glimpse__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .glimpse__card { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; }
  .glimpse__img { grid-row: auto; width: 112px; height: 112px; }
}

/* ---------- Biblioteket and Humla for ---------- */
.sect-row { padding-top: clamp(16px, 3vw, 40px); }
.app + .sect-row .row, .sect-row + .sect-row .row { border-top: 1px solid var(--hairline); }
.for__grid { display: grid; gap: 20px; margin-top: clamp(24px, 3.5vw, 40px); }
.for__card { transition: transform 180ms ease, box-shadow 180ms ease; text-decoration: none; color: var(--ink); }
.for__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--honning); }
.for__card h3 { text-decoration: underline; text-decoration-color: var(--honning); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (min-width: 900px) { .for__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Cards ---------- */
.duo { padding-block: var(--space) 0; }
.tile {
  display: grid; align-content: start; gap: 14px; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--card-line);
}
.tile h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.06; }
.tile > p:not(.eyebrow) { color: var(--ink-2); }
.tile__actions, .row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 10px; }
/* /for-skapere/: the benefits as stacked rows with the short download row under them; the network as the one featured card (what you get, the line that not everyone is accepted, the button),
   under a hairline like the sections above it (a tinted band would hide the card in the dark theme, where tint and card are one colour); the coupons as a smaller, quieter block (design
   review, fix round 1: the network is the programme, the coupons are for those who only want to share codes) */
.sect .rows { margin-top: clamp(20px, 3vw, 36px); }
.sect .rows + .dl { margin-top: clamp(20px, 3vw, 32px); }
.duo--network { padding-block: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--hairline); }
.tile--feature { gap: clamp(20px, 3vw, 32px) clamp(32px, 5vw, 72px); padding: clamp(28px, 5vw, 64px); }
.tile--feature .tile__main, .tile--feature .tile__foot { display: grid; gap: 14px; align-content: start; justify-items: start; }
.tile--feature .tile__main h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.03; }
.tile--feature p { color: var(--ink-2); }
.tile--feature .tile__get { display: grid; gap: 12px; align-content: start; padding: clamp(20px, 3vw, 32px); border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline); }
.tile--feature .tile__get h3 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); }
.tile--feature .tile__actions { margin-top: 2px; }
@media (min-width: 900px) {
  .tile--feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "main get" "foot get"; align-items: start; }
  .tile--feature .tile__main { grid-area: main; }
  .tile--feature .tile__get { grid-area: get; }
  .tile--feature .tile__foot { grid-area: foot; }
}
/* .sect.sect--minor, not .sect--minor alone: the later «.sect h2» has the same specificity and would win, and the coupons would be as loud as the network (design review round 2, minor 1) */
.sect.sect--minor { padding-block: clamp(40px, 5vw, 64px); }
.sect.sect--minor h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.sect.sect--minor .prose { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); }
.sect.sect--minor .btn { margin-top: 4px; }

/* ---------- Why: one calm statement ---------- */
.why { padding-block: var(--space); }
.why__in { display: grid; justify-items: center; gap: 22px; max-width: 54rem; text-align: center; }
.why__body { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.025em; text-wrap: pretty; }

/* ---------- Questions: big heading left, the answers right, a round plus ---------- */
.faq { padding-block: 0 var(--space); }
/* after a section or a tinted band (/vagus/: the creators band) the FAQ has the top padding of a section, so its heading never touches the band above it (design review, fix round 1, major 3) */
.sect + .faq { padding-top: clamp(64px, 8vw, 112px); }
.faq__grid { display: grid; gap: 32px; }
.faq__head { display: grid; gap: 14px; align-content: start; }
.faq__head p { color: var(--ink-2); }
.faq__list { border-bottom: 1px solid var(--hairline); }
.qa { border-top: 1px solid var(--hairline); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 80px; padding-block: 16px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 650; font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.375rem); letter-spacing: -0.015em; line-height: 1.25;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat,
    var(--tint);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.qa[open] summary::after { background-size: 14px 2px, 0 0, auto; }
.qa summary:focus-visible { outline-offset: -3px; }
.qa p { max-width: 62ch; padding: 0 56px 26px 0; color: var(--ink-2); }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(40px, 7vw, 112px); } }

/* ---------- Closing band: the evening colour of the app icon in light, the page colour in dark (--band), set off from the page by a hairline ---------- */
.close {
  --ink: var(--krem); --ink-2: rgba(247, 239, 226, 0.78); --hairline: rgba(247, 239, 226, 0.15); --accent-text: var(--honning); --focus: var(--honning);
  position: relative; overflow: clip; padding-block: clamp(96px, 12vw, 160px) clamp(72px, 9vw, 120px);
  background: var(--band); color: var(--krem);
  border-top: 1px solid var(--band-edge);
}
.close__in { position: relative; display: grid; justify-items: center; gap: 18px; text-align: center; }
.close__icon { position: relative; margin-bottom: 10px; }
.close__icon::before { content: ""; position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; translate: -50% -50%; background: radial-gradient(closest-side, rgba(242, 193, 78, 0.34), rgba(242, 193, 78, 0.1) 50%, transparent 72%); pointer-events: none; }
.close__icon img { position: relative; width: 112px; height: 112px; border-radius: 22.4%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); }
.close h2 { position: relative; max-width: 14ch; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1; }
.close__text { position: relative; max-width: 34em; color: var(--ink-2); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); }
.close .dl { position: relative; justify-content: center; margin-top: 8px; text-align: left; }
.close__ask { position: relative; color: var(--ink-2); font-size: 1.0625rem; }
.close--ask h2 { max-width: 20ch; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); }
/* /vagus/: what Humla is not, as a small note under the questions, without a heading (W6, Helge 20.10) */
.sect--note { padding-block: clamp(28px, 4vw, 44px); }
.footnote { max-width: 70ch; }
.close__fine { position: relative; max-width: 52ch; margin-top: 10px; font-size: 0.875rem; }
@media (prefers-color-scheme: dark) { .close__icon::before { background: radial-gradient(closest-side, rgba(247, 239, 226, 0.09), rgba(247, 239, 226, 0.03) 50%, transparent 72%); } }

/* ---------- Footer: quiet, on the same band surface ---------- */
.foot {
  --ink: var(--krem); --focus: var(--honning);
  padding-block: clamp(40px, 5vw, 64px) max(28px, env(safe-area-inset-bottom));
  background: var(--band); color: var(--krem);
  border-top: 1px solid var(--band-edge);
}
.foot .brand { color: var(--krem); }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px clamp(32px, 6vw, 72px); }
.foot__brand { display: grid; gap: 10px; justify-items: start; align-content: start; flex: 1 1 260px; max-width: 360px; }
/* the app icon's dark tile would melt into the dark page: a hairline ring keeps its edge (header, band, footer) */
@media (prefers-color-scheme: dark) { .brand img, .band__icon, .foot__brand img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); } }
.foot__tagline { color: rgba(247, 239, 226, 0.8); font-size: 1rem; line-height: 1.5; }
.foot__col { flex: 0 1 200px; }
.foot__h { margin-bottom: 6px; color: var(--honning); font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.foot__col a { display: inline-flex; align-items: center; min-height: 40px; color: rgba(247, 239, 226, 0.88); font-size: 1rem; text-decoration: none; }
.foot__col a:hover, .foot__col a[aria-current="page"] { color: var(--krem); text-decoration: underline; text-underline-offset: 4px; }
.foot__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: clamp(28px, 4vw, 44px); padding-top: 20px; border-top: 1px solid rgba(247, 239, 226, 0.15); color: rgba(247, 239, 226, 0.74); font-size: 0.9375rem; }
.foot__link { display: inline-flex; align-items: center; min-height: 44px; color: rgba(247, 239, 226, 0.88); text-decoration: underline; text-underline-offset: 4px; }
.foot__link:hover { color: var(--krem); }
.foot__copy { margin-left: auto; }
.langs ul { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.langs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.langs a[aria-current="true"] { font-weight: 800; text-decoration: none; }
.foot__provider { max-width: 62rem; margin-top: 14px; font-size: 0.875rem; line-height: 1.6; color: rgba(247, 239, 226, 0.72); overflow-wrap: anywhere; }

/* ---------- Sticky download bar: phones only ---------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; gap: 12px;
  min-height: calc(64px + env(safe-area-inset-bottom)); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 253, 248, 0.98); box-shadow: var(--shadow-2);
}
@media (prefers-color-scheme: dark) { .sticky { background: rgba(38, 35, 31, 0.98); } }
.sticky > img { width: 36px; height: 36px; border-radius: 22.4%; }
.sticky__text { display: grid; line-height: 1.25; min-width: 0; }
.sticky__text strong { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 650; }
.sticky__text span { color: var(--ink-2); font-size: 0.8125rem; }
.sticky .asb { margin-left: auto; }
/* the waitlist button may wrap to two lines and shrink, so at 320 px or with large text it never runs over «Humla / For iPhone.»; below 380 px that line gives way to the button */
.sticky .btn { flex: 0 1 auto; min-width: 0; margin-left: auto; padding-block: 6px; white-space: normal; }
@media (max-width: 379px) { .sticky .sticky__text { display: none; } }
html.js .sticky:not(.is-on) { visibility: hidden; opacity: 0; transform: translateY(12px); }
@media (max-width: 767px) {
  body:has(.sticky) .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) { .sticky { display: none; } }

/* ---------- Inner pages: a paper page head with one phone, and the blocks the pages share ---------- */
.pagehead { position: relative; overflow: clip; padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 96px); }
.pagehead__grid { position: relative; display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
.pagehead__text { display: grid; gap: clamp(14px, 2vw, 22px); justify-items: start; }
.pagehead h1 { font-size: clamp(2.75rem, 1.2rem + 5vw, 5rem); letter-spacing: -0.045em; line-height: 0.98; max-width: 14ch; }
.pagehead--text { padding-block-end: clamp(8px, 2vw, 24px); }
.pagehead--long h1 { font-size: clamp(2.25rem, 1.1rem + 3.7vw, 3.75rem); letter-spacing: -0.04em; line-height: 1; max-width: 21ch; }
.pagehead__lead { max-width: 34ch; color: var(--ink-2); font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.5rem); line-height: 1.45; }
.pagehead__lead--long { max-width: 46ch; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.55; }
/* what Humla is, or the app status: a calm line of body text, not an eyebrow (design review minor 14) */
.pagehead__what { max-width: 52ch; color: var(--ink-2); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.5; }
/* right under the H1 (For skapere, Vagus) the line of what Humla is opens the lead: ink, lead size; the lead after it one step down (design review round 2, minor 6) */
.pagehead h1 + .pagehead__what { max-width: 46ch; color: var(--ink); font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.55; }
.pagehead h1 + .pagehead__what + .pagehead__lead { max-width: 46ch; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.55; }
.pagehead__phone { --pw: clamp(220px, 24vw, 320px); justify-self: center; }
/* /student/: Humla in a graduation cap in front of the phone, low on its left side (W6) */
.pagehead__media { position: relative; display: grid; justify-items: center; }
.pagehead__bee { position: absolute; z-index: 3; left: max(-12px, 50% - 250px); bottom: -4%; width: clamp(120px, 14vw, 190px); filter: var(--shadow-figure); }
.pagehead__grid::after { content: ""; position: absolute; right: 0; top: 50%; width: min(90vw, 760px); height: 620px; translate: 10% -50%; background: var(--glow); pointer-events: none; z-index: -1; }
@media (min-width: 900px) {
  .pagehead__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
.pagehead .btn { margin-top: 6px; }

.sect { padding-block: clamp(64px, 8vw, 112px); }
.sect + .sect { border-top: 1px solid var(--hairline); }
.sect--sheet, .sect--tint { border-top: 0; background: var(--tint); }
.sect--sheet + .sect, .sect + .sect--sheet, .sect--tint + .sect, .sect + .sect--tint { border-top: 0; }
.sect__grid { display: grid; gap: clamp(20px, 4vw, 40px); }
.sect__body { display: grid; gap: 14px; justify-items: start; }
.sect__head { display: grid; gap: clamp(16px, 3vw, 28px); justify-items: start; align-content: start; }
.sect__sub { display: grid; gap: 8px; max-width: 52ch; margin-top: clamp(16px, 3vw, 28px); padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--hairline); }
.sect__sub h3 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); letter-spacing: -0.025em; }
.sect h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); }
@media (min-width: 900px) {
  .sect__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(40px, 7vw, 112px); align-items: start; }
}
.prose { max-width: 52ch; color: var(--ink-2); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); line-height: 1.6; }
.prose--safety { color: var(--ink); font-weight: 700; }
.fact { display: grid; gap: 4px; max-width: 52ch; }
/* The sources under a text: a closed <details> «Kilder (n)», quiet until opened (design review, fix round 1: 27 underlined links and a block of lines after every paragraph broke the calm reading).
   The links stay in the markup for a reader without the click and for a crawler; the chevron turns when it is open. */
.cite { margin-top: 2px; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.5; }
.cite summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; list-style: none; font-weight: 650; }
.cite summary::-webkit-details-marker { display: none; }
.cite summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.cite[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.cite summary:hover { color: var(--ink); }
.cite summary:focus-visible { outline-offset: 0; }
.cite p { margin: 0 0 8px; }
.cite a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline-2); text-underline-offset: 3px; }
.cite a:hover { text-decoration-color: currentColor; }
.research { display: grid; gap: clamp(22px, 3vw, 30px); max-width: 52ch; margin: 0; padding: 0; list-style: none; }
.research li { padding-left: 18px; border-left: 3px solid var(--accent); color: var(--ink-2); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); line-height: 1.6; }
.research .cite { margin-top: 4px; }
/* ---------- The topic pages under /tema/ (W3, DECISIONS 219) ---------- */
/* The help box of angst and depresjon, above the answer: who to call now, in plain sight and quiet. The numbers are tel: links around the number only; each line has its small source line. */
.help { display: grid; gap: 8px; width: min(100%, 52ch); padding: clamp(18px, 3vw, 28px); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--card-line), inset 5px 0 0 var(--accent); }
.help__title { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.help__list { display: grid; gap: 6px; }
.help__item p { color: var(--ink); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.5; }
.help__item a { padding-block: 0.15em; white-space: nowrap; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.help .cite summary { min-height: 30px; }
.help .cite p { color: var(--ink-2); font-size: inherit; }
/* W6 (Helge 20.10: the topic pages were much text and few pictures, and the help box took too much attention at the top): a picture from the app's course illustrations in the
   page head and beside «Hva som skjer i kroppen og hodet», two app screens beside «Slik kan du bruke Humla», and the help box in its own calm box after the body section */
.pic { width: 100%; max-width: 560px; margin: 0; }
.pic--hero { justify-self: center; }
.sect__head .pic { margin-top: clamp(4px, 1.5vw, 12px); }
.sect--help { padding-block: clamp(40px, 5vw, 64px); }
.sect--help .wrap { display: grid; justify-items: center; }
.sect .help__title { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.2; }
.sect--screens { overflow-x: clip; }
.tema__pair { width: 100%; margin-top: clamp(12px, 3vw, 28px); }
.tema__pair .phone { --pw: clamp(170px, 17vw, 230px); }
/* the cards of the overview and of «Andre temaer»: two columns on a wide phone, three from 900 px (.for__grid), smaller titles than on the front page so a long word fits a narrow card */
.tema__grid { margin-block: clamp(20px, 3vw, 32px); }
.tema__grid .tile h2, .tema__grid .tile h3 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--honning); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (min-width: 640px) and (max-width: 899px) { .tema__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a source line under an answer of the questions and answers */
.qa p:has(+ .cite) { padding-bottom: 4px; }
.qa > .cite { margin: 0; padding-bottom: 20px; }
.exfig { position: relative; width: min(46%, 168px); aspect-ratio: 1; }
.exfig::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: var(--glow); }
.exfig img { position: relative; width: 100%; filter: var(--shadow-figure); }

.rows { display: grid; }
.rows li { display: grid; gap: 10px 48px; padding-block: clamp(26px, 3.6vw, 44px); border-top: 1px solid var(--hairline); align-content: start; }
.rows h3 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing: -0.04em; }
.rows p { max-width: 40ch; color: var(--ink-2); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); }
@media (min-width: 900px) { .rows li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; } }

.ticks { display: grid; gap: 12px; margin-top: 4px; }
.ticks li { position: relative; padding-left: 1.8em; color: var(--ink-2); font-size: 1.0625rem; }
.ticks li::before { content: ""; position: absolute; left: 0.1em; top: 0.5em; width: 0.66em; height: 0.66em; border-radius: 50%; background: var(--honning); }
.ticks--no li::before { background: var(--ink-2); opacity: 0.35; }
.ticks--big { gap: 18px; }
.ticks--big li { max-width: 52ch; color: var(--ink); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); }
.ticks a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.steps { display: grid; gap: 8px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 10px; align-content: start; padding-block: 28px; border-top: 1px solid var(--hairline); }
.steps__n::before { content: counter(step); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--honning); color: var(--blekk); font: 700 1.375rem var(--font-display); }
.steps h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.03em; }
.steps p { color: var(--ink-2); max-width: 34ch; }
.sect .steps { grid-template-columns: 1fr; gap: 0; margin-top: 6px; }
.sect .steps li { grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 4px; align-items: start; padding-block: 22px; }
.sect .steps__n { grid-row: 1 / span 2; }
.sect .steps__n::before { width: 44px; height: 44px; font-size: 1.25rem; }
.sect .steps h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); letter-spacing: -0.02em; }
.sect .steps p { max-width: 46ch; }
/* steps that are one sentence each (/student/): the number sits beside the sentence, and the sentence is the text of the step, so it is ink */
.sect .steps--plain li { align-items: center; }
.sect .steps--plain .steps__n { grid-row: auto; }
.sect .steps--plain p { color: var(--ink); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }
.sect .steps--plain + .btn { margin-top: 12px; }

.checks { display: grid; }
.checks li { display: grid; gap: 10px; align-content: start; padding-block: clamp(26px, 3.6vw, 44px); border-top: 1px solid var(--hairline); }
.checks .value__text { max-width: 40ch; }
.checks__how { max-width: 40ch; color: var(--accent-text); font-weight: 650; font-size: 1rem; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 3vw, 32px); }
  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 88px); }
}

/* ---------- Social proof (src/data/proof.json; the preview labels the examples) ---------- */
.proof { padding-block: 0 var(--space); }
.proof__head { display: grid; gap: 14px; justify-items: start; max-width: 46rem; margin-bottom: clamp(28px, 5vw, 56px); }
.proof__lead { max-width: 40ch; color: var(--ink-2); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
.proof__example { width: fit-content; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em; }
.proof__list { display: grid; gap: 16px; }
.quote { position: relative; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--card-line); }
.quote figure { display: grid; gap: 22px; align-content: space-between; height: 100%; padding: clamp(26px, 3vw, 38px); }
.quote blockquote { margin: 0; padding-right: 3.25rem; }
.quote blockquote p { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); line-height: 1.3; letter-spacing: -0.015em; }
.quote figcaption { display: grid; justify-items: start; gap: 6px; color: var(--ink-2); font-size: 1rem; }
.quote__who { color: var(--ink); font-weight: 700; }
.quote__disclosure { color: var(--ink); font-size: 0.9375rem; font-style: italic; }
.quote--example { box-shadow: inset 0 0 0 2px var(--accent-text), var(--shadow-1); }
.quote__example { padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; }
.stars { display: inline-flex; gap: 2px; line-height: 0; }
.star { display: block; flex: none; width: 22px; height: 22px; stroke-linejoin: round; stroke: var(--accent-text); stroke-width: 1.2; }
.star--on { fill: var(--accent); }
.star--off { fill: none; opacity: 0.45; }
@media (min-width: 760px) { .proof__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .proof__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- The inquiry form (/kontakt/) ---------- */
.formpage { padding-block: clamp(40px, 6vw, 88px) var(--space); }
.formpage__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
.formpage__intro { display: grid; gap: 18px; align-content: start; }
.formpage h1 { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem); line-height: 1; letter-spacing: -0.045em; }
.formpage__figure { display: none; }
@media (min-width: 960px) {
  .formpage__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .formpage__intro { position: sticky; top: 104px; }
  /* Humla points at the form from the column that would otherwise be a lead and empty paper */
  .formpage__figure { display: block; width: clamp(180px, 18vw, 260px); height: auto; margin-top: clamp(12px, 3vw, 40px); }
}
/* the terms of the waitlist offer, next to the lead and above the form (markedsføringsloven § 18) */
.offer { padding: 14px 16px; border-radius: 14px; background: var(--selected); box-shadow: inset 4px 0 0 var(--honning); color: var(--ink); font-size: 1rem; line-height: 1.55; max-width: 34em; }
.formcard { padding: clamp(22px, 4vw, 44px); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--card-line); }
.form { display: grid; gap: 22px; }
.form__off { display: none; padding: 14px 16px; border-radius: 14px; background: var(--selected); box-shadow: inset 4px 0 0 var(--honning); color: var(--ink); font-size: 0.9688rem; line-height: 1.5; }
.form[data-off] .form__off { display: block; }
.form__summary { padding: 16px 18px; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--error); }
.form__summary p { font-weight: 700; }
.form__summary ul { display: grid; gap: 2px; margin-top: 6px; }
.form__summary a { color: var(--error); font-weight: 600; }
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field legend { padding: 0; font-weight: 650; font-size: 1.0625rem; }
.field__hint, .field__note { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.field__opt { color: var(--ink-2); font-weight: 500; }
.field__error { color: var(--error); font-weight: 650; font-size: 0.9688rem; }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--hairline-2); border-radius: 14px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 1.0625rem;
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
/* the select keeps the field's look: the browser's arrow gives way to a chevron drawn from the ink colour, so it follows the theme */
.field select {
  padding-right: 44px; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
/* as specific as .field input[type="text"], so a field with an error turns red like the textarea */
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
/* a notice is not an error: it never blocks and never turns red */
.field__notice { padding: 12px 16px; border-radius: 14px; background: var(--selected); box-shadow: inset 4px 0 0 var(--honning); color: var(--ink); font-size: 0.9688rem; line-height: 1.5; }
/* The parts of the form: the type cards, «Om deg», and the part of the chosen type. With JavaScript they are numbered; without it every part of every type is shown, so none is. */
.part { display: grid; gap: 22px; min-width: 0; margin: 0; padding: 0; border: 0; }
.part > legend, .field--type > legend { padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; letter-spacing: -0.01em; }
.part > legend { margin-bottom: 18px; }
.part__intro { color: var(--ink-2); font-size: 1rem; line-height: 1.5; margin-top: -4px; }
.js .form { counter-reset: step; }
.js .field--type > legend::before, .js .part:not([hidden]) > legend::before {
  counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 12px; border-radius: 50%;
  background: var(--selected); box-shadow: inset 0 0 0 1.5px var(--honning-dyp); color: var(--ink); font-size: 0.9375rem; font-weight: 800; letter-spacing: 0; vertical-align: 2px;
}
@media (prefers-color-scheme: dark) { .js .field--type > legend::before, .js .part:not([hidden]) > legend::before { box-shadow: inset 0 0 0 1.5px var(--honning); } }
.nojs-only { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.js .nojs-only { display: none; }
.field--wants { gap: 4px; }
.field--wants > legend { margin-bottom: 4px; }
.choices { display: grid; gap: 10px; margin-top: 4px; }
@media (min-width: 768px) { .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } .choices--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; min-height: 56px; padding: 12px 16px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--hairline-2); cursor: pointer; text-align: left; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice__t { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.choice__d { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.4; }
.choice:has(input:checked) { background: var(--selected); box-shadow: inset 0 0 0 2px var(--honning-dyp); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { .choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--honning); } }
.check { display: flex; align-items: flex-start; gap: 12px; font-weight: 650; cursor: pointer; }
.check--plain { font-weight: 500; font-size: 1.0625rem; }
.check input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--honning-dyp); }
@media (prefers-color-scheme: dark) { .check input { accent-color: var(--honning); } }
.privacy summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }
.privacy p { margin-top: 4px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.privacy__who { margin-top: 10px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status:empty { display: none; }
.form__status { padding: 12px 16px; border-radius: 14px; background: var(--selected); font-weight: 600; }
.form .btn { justify-self: start; }
.btn__busy { display: none; }
.btn.is-busy .btn__label { display: none; }
.btn.is-busy .btn__busy { display: inline-flex; align-items: center; gap: 10px; }
.btn.is-busy .btn__busy::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(42, 33, 26, 0.25); border-top-color: var(--blekk); }
.btn:disabled { cursor: progress; }
/* the result pages of the form without JavaScript: the line that fits the anchor of the address is shown, and nothing before one has been chosen. The generous scroll margin keeps
   the browser from scrolling the heading away when it jumps to the anchor (the page is short, so it stays at the top). */
.result__case { display: none; scroll-margin-top: 20rem; }
.result__case:target { display: grid; gap: 14px; }
.result .textlink { margin-top: 8px; }
.done { display: grid; justify-items: center; gap: 14px; padding-block: 24px; text-align: center; }
.done img { width: 160px; height: 160px; }
.done h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.done p { max-width: 36ch; color: var(--ink-2); }
/* a block with the hidden attribute stays hidden even where a rule gives it a display (the done state of the form, the error lines) */
[hidden] { display: none !important; }

/* ---------- Motion: one signature per view, the DESIGN curve, none when the visitor asks for less. The resting state is the finished one. ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .nav a, .top__link, .getit, .btn, .cta, .textlink { transition: background-color 200ms var(--ease), color 200ms var(--ease); }
  .qa summary::after { transition: background-size 200ms var(--ease); }
  .sticky { transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s linear 0s; }
  html.js .sticky:not(.is-on) { transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s linear 300ms; }
  .fan__l, .fan__r { animation: fan-out 900ms var(--ease) 150ms both; }
  .fan__c { animation: rise-in 700ms var(--ease) both; }
  @keyframes fan-out { from { transform: translateX(-50%) translateY(calc(var(--pw) * 0.06)) rotate(0) scale(0.9); } }
  @keyframes rise-in { from { opacity: 0; translate: -50% 24px; } }
  .btn.is-busy .btn__busy::before { animation: spin 900ms linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    @keyframes reveal { from { opacity: 0; translate: 0 24px; } }
  }
}