/* wrenmate.dk, design D2 "Tilbuddet" with the Wrenmate identity (design/brand.md): warm paper page, one taped quote on a brick board,
   the wren in the header, Archivo only. Type scale 1.25 from 18 px: 14 / 18 / 22 / 28 / 36 / 44 / 56 / 88. Spacing on a 4/8-px grid. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 400 900; font-stretch: 72% 100%; font-display: swap; }

/* Colour tokens. Every text pair is WCAG AA (contrast table in design/brand.md). Paper (the quote, notes, form) stays light in both themes.
   Light is the default; dark only when the visitor picks it with the header toggle (theme.js sets data-theme on <html>). */
:root {
  color-scheme: light;
  --bg: #f7f3ea;
  --surf: #efe8da;
  --ink: #18221d;
  --inkhi: #000000;
  --onink: #f7f3ea;
  --mut: #4f5651;
  --line: #ddd4c3;
  --edge: #8a8476;
  --board: #b5503c;
  --onboard: #ffffff;
  --mark: #a8432f;
  --ok: #1f6b4f;
  --acc: var(--ink);
  --onacc: var(--onink);
  --acct: var(--ok);
  --paper: #ffffff;
  --field: #ffffff;
  --hover: #e6decd;
  --tape: rgba(255, 255, 255, 0.62);
  --err: #b42318;
  --font: "Archivo", system-ui, sans-serif;
  --mono: var(--font);
  --pad: 56px;
  --head: 80px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111a15;
  --surf: #18231d;
  --ink: #efe9dc;
  --inkhi: #ffffff;
  --onink: #111a15;
  --mut: #b2b2a4;
  --line: #2c3a32;
  --edge: #7a8478;
  --board: #8f3d2d;
  --mark: #e58d6f;
  --ok: #6cc49a;
  --field: #18231d;
  --hover: #22302a;
  --err: #ff8f80;
}
/* Paper keeps the light tokens in both themes, so anything on it reads as ink on paper. */
.sheet, .note:not(.note-blank) a, .contact .form, .cta > div, .demo-page {
  --bg: var(--paper); --surf: #efe8da; --ink: #18221d; --inkhi: #000000; --onink: #ffffff; --mut: #4f5651; --line: #ddd4c3;
  --edge: #8a8476; --ok: #1f6b4f; --field: #ffffff; --hover: #e6decd; --err: #b42318; --mark: #a8432f;
  color-scheme: light; color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The header is sticky, so anchors and focused elements stop 16 px below it */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font); font-size: 18px; line-height: 1.5; background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ok); outline-offset: 2px; border-radius: 4px; }
strong, b { font-weight: 700; }

.mono { font-family: var(--font); }
.mut { color: var(--mut); }
.acct { color: var(--acct); }
.ink { color: var(--ink); }
.small { font-size: 14px; }
.note { margin-top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 30; background: var(--ink); color: var(--onink); padding: 12px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }

.wrap { max-width: 1344px; margin: 0 auto; padding: 0 var(--pad); }
.h1 { font-size: clamp(44px, 6vw, 88px); line-height: 0.92; font-weight: 900; font-stretch: 72%; text-wrap: balance; }
.h2 { font-size: clamp(36px, 4vw, 56px); line-height: 0.96; font-weight: 900; font-stretch: 72%; text-wrap: balance; }
.h3 { font-size: 22px; line-height: 1.2; font-weight: 800; }
.lead { font-size: 22px; line-height: 1.45; color: var(--mut); max-width: 28em; }

.sec { padding: 96px 0; }
.sec-line { border-top: 1px solid var(--line); }
.sec-surf { background: var(--surf); }
.sec-flush { padding-top: 0; }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.head-row p { color: var(--mut); max-width: 28em; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* Buttons: one primary style (black), links for everything secondary */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 18px; text-decoration: none; border: 2px solid transparent; cursor: pointer; background: var(--ink); color: var(--onink); }
.btn:hover { text-decoration: none; background: var(--inkhi); }
.btn-acc, .btn-ink { background: var(--ink); color: var(--onink); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--edge); }
.btn-line:hover { background: transparent; border-color: var(--ink); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 16px; }
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.link { font-weight: 700; color: var(--ink); }

/* Header: sticky, so the menu and the CTA are one tap away mid-page. The line under it fades in on scroll. */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--bg); }
@supports (animation-timeline: scroll()) {
  .site-head { animation: head-line linear both; animation-timeline: scroll(); animation-range: 0 32px; }
  @keyframes head-line { from { box-shadow: 0 1px 0 transparent; } to { box-shadow: 0 1px 0 var(--line); } }
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--head); }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand .logo { display: block; height: 30px; width: auto; }
.logo-bird { color: var(--mark); }
.logo-eye { fill: var(--bg); }
.from .logo { display: block; height: 20px; width: auto; margin-left: auto; }
.nav { display: flex; align-items: center; gap: 32px; }
.navl { display: flex; gap: 32px; list-style: none; padding: 0; color: var(--mut); }
.navl a { text-decoration: none; }
.navl a:hover, .navl a[aria-current] { color: var(--ink); }
.menu { display: none; }
.menu summary { list-style: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--edge); border-radius: 8px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--ink); }
.menu .i-close, .menu[open] .i-open { display: none; }
.menu[open] .i-close { display: block; }
.menu ul { list-style: none; padding: 8px var(--pad) 24px; position: absolute; left: 0; right: 0; top: 100%; z-index: 5; max-height: calc(100dvh - var(--head)); overflow-y: auto; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.menu li a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-size: 18px; border-top: 1px solid var(--line); }
.menu li:first-child a { border-top: 0; }
/* Theme toggle: an icon button beside the CTA on wide screens (moon while light, sun while dark), a row with a switch in the menu below 900 px.
   Without JS it cannot work, so it is hidden. */
.theme-toggle { font: inherit; color: var(--ink); background: transparent; cursor: pointer; }
.theme-toggle .i-sun, .theme-toggle[aria-pressed="true"] .i-moon { display: none; }
.theme-toggle[aria-pressed="true"] .i-sun { display: block; }
.theme-icon { width: 44px; height: 44px; margin-left: -16px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 2px solid var(--edge); border-radius: 8px; }
.theme-icon:hover { border-color: var(--ink); }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 48px; padding: 0; border: 0; border-top: 1px solid var(--line); font-size: 18px; text-align: left; }
.switch { position: relative; flex: none; width: 44px; height: 26px; border: 2px solid var(--edge); border-radius: 13px; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--mut); transition: transform 0.15s; }
.theme-row[aria-pressed="true"] .switch { border-color: var(--ink); }
.theme-row[aria-pressed="true"] .switch::after { background: var(--ink); transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } }
.theme-li { display: none; }
@media (max-width: 900px) { .theme-icon { display: none; } .theme-li { display: block; } }
@media (scripting: none) { .theme-icon, .theme-li { display: none; } }

/* Hero: the live quote taped to a brick board. On wide screens the board stops 80 px past the content edge, so the page stays balanced instead of running to the window edge. */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; top: 8px; bottom: 48px; left: 50%; right: max(32px, calc((100% - 1344px) / 2 - 24px)); background: var(--board); border-radius: 40px 40px 40px 176px; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; min-height: 760px; padding-top: 24px; padding-bottom: 96px; }
.hero .lead { margin-top: 24px; }
.pick { margin-top: 32px; }
@media (scripting: none) { .pick { display: none; } }
.pick-q { font-weight: 700; margin-bottom: 12px; }
.pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 480px; }
.pill-unsure { grid-column: 1 / -1; border-style: dashed; }
.pill { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--edge); background: var(--field); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.pill:hover { border-color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--onink); }
.hero .btns { margin-top: 32px; }
.who { margin-top: 24px; font-size: 14px; color: var(--mut); }

.sheet { position: relative; background: var(--paper); border-radius: 4px; padding: 40px 40px 32px; transform: rotate(-1.5deg); box-shadow: 0 40px 72px -32px rgba(50, 10, 0, 0.6); max-width: 560px; margin-inline: auto; }
.tape { position: absolute; top: -16px; left: 50%; width: 112px; height: 28px; margin-left: -56px; background: var(--tape); transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.sheet-head h2 { font-size: 36px; font-weight: 800; font-stretch: 80%; line-height: 1; }
.from { text-align: right; font-size: 14px; color: var(--mut); line-height: 1.4; }
.from b { color: var(--ink); }
.to { margin: 16px 0 4px; font-size: 14px; color: var(--mut); }
.qlines { width: 100%; border-collapse: collapse; }
.qlines td { padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.qlines td:last-child { text-align: right; white-space: nowrap; padding-left: 16px; font-weight: 600; }
.qlines td.inkl { color: var(--ok); }
/* All quote variants share one grid cell, so the sheet always has the height of the tallest one and switching never moves the page.
   The variants that are not shown keep their space but are invisible (and hidden from screen readers). */
.qlines { display: grid; }
.qlines > tbody { grid-area: 1 / 1; display: block; }
.qlines > tbody[hidden] { display: block !important; visibility: hidden; }
.qlines tr { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.qlines td { display: block; border-bottom: 0; }
.total p:first-child { display: grid; }
.total p:first-child > span { grid-area: 1 / 1; }
.total p:first-child > span[hidden] { display: block !important; visibility: hidden; }
/* Rolling price: one reel of digits per character, built by quote.js from the server-rendered price. */
.meter { display: inline-flex; align-items: flex-end; }
.slot { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.reel { display: flex; flex-direction: column; }
.reel span { display: block; height: 1em; line-height: 1em; text-align: center; }
.meter .kr { margin-left: 0.15em; line-height: 1; }
.slot.sep { width: 0.28em; }
.slot.sep .reel span { text-align: left; }
.total { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-top: 16px; }
.total p:first-child { font-weight: 700; font-size: 22px; line-height: 1.2; }
.total small { display: block; font-weight: 400; font-size: 14px; color: var(--mut); }
.sum { font-size: 44px; font-weight: 900; font-stretch: 80%; line-height: 1; white-space: nowrap; }
.sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 16px; }
.sign > div { flex: 1; }
.sign-line { border-bottom: 1px solid var(--ink); height: 32px; }
.sign small { display: block; font-size: 14px; color: var(--mut); margin-top: 4px; }
.stamp { color: var(--ok); border: 3px solid var(--ok); border-radius: 8px; padding: 8px 12px; font-weight: 800; font-size: 14px; transform: rotate(-6deg); white-space: nowrap; }

/* Facts strip under the hero */
.facts { border-top: 1px solid var(--line); }
.facts .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 40px; padding-bottom: 48px; }
.facts b { display: block; font-size: 28px; font-weight: 800; font-stretch: 85%; line-height: 1.15; }
.facts p { color: var(--mut); margin-top: 8px; }

/* Before / after */
.diffs { display: flex; flex-direction: column; gap: 16px; }
.diff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.diff p { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; }
.diff p::before { font-size: 14px; font-weight: 700; }
.diff .minus { color: var(--mut); background: var(--surf); }
.diff .minus::before { content: "Før"; }
.diff .plus { background: var(--bg); }
.diff .plus::before { content: "Efter"; color: var(--ok); }

/* Services: what customers come with, as notes taped on a light wall, each answered with the service, fra-price and time.
   Four across; on phones a sideways strip you swipe through, so the section stays short. */
.wall { background: var(--surf); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 96px 0 104px; }
.notes { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.note a { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--paper); color: var(--ink); text-decoration: none; padding: 32px 28px 24px; border-radius: 3px; box-shadow: 0 1px 2px rgba(27, 27, 27, 0.06), 0 24px 40px -28px rgba(27, 27, 27, 0.35); transition: transform 0.2s; }
/* Each note hangs a little differently, as paper does. */
.note:nth-child(4n + 1) a { transform: rotate(-1deg); }
.note:nth-child(4n + 2) a { transform: rotate(0.8deg); }
.note:nth-child(4n + 3) a { transform: rotate(-0.4deg); }
.note:nth-child(4n) a { transform: rotate(1.1deg); }
.note a:hover, .note a:focus-visible { transform: rotate(0deg) translateY(-4px); }
.note .tape { background: rgba(214, 197, 160, 0.75); }
.note q { quotes: "„" "“"; font-size: 22px; line-height: 1.15; font-weight: 800; font-stretch: 82%; text-wrap: balance; margin-bottom: 24px; }
.note-svc { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--edge); }
.note-svc b { font-size: 17px; font-weight: 800; }
.note-svc span { color: var(--mut); font-size: 15px; }
.note-price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }
.note-price b { font-size: 28px; font-weight: 900; font-stretch: 80%; white-space: nowrap; }
.note-price span { font-size: 14px; color: var(--mut); white-space: nowrap; }
/* The blank note: no paper, a dashed outline for the customer who does not know what kind of job they have. */
.note-blank a { background: transparent; border: 2px dashed var(--edge); box-shadow: none; }
.note-blank a:hover, .note-blank a:focus-visible { background: var(--surf); border-color: var(--ink); }
.note-blank .note-price b { font-size: 22px; }

/* Demos: a cramped spreadsheet next to a recording of the real demo. */
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "before after" ". text"; gap: 16px 32px; align-items: center; margin-top: 56px; }
.case.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "after before" "text ."; }
.before { grid-area: before; margin: 0; }
.after { grid-area: after; margin: 0; }
.case-text { grid-area: text; max-width: 36em; }
.case-text p { margin: 8px 0 12px; }
.case-text a { font-weight: 700; }
figcaption { font-size: 14px; color: var(--mut); margin-bottom: 12px; display: flex; gap: 8px; align-items: baseline; }
figcaption b { color: var(--ink); font-weight: 800; }
.after figcaption b { color: var(--ok); }

/* The recording sits in a plain window frame. */
.screen { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 40px 64px -40px rgba(27, 27, 27, 0.45); }
.screen img { display: block; width: 100%; height: auto; }

/* The spreadsheet: deliberately not in the site's type or colors. */
.xl { font: 12px/1.2 Calibri, "Segoe UI", Arial, sans-serif; color: #222; background: #fff; border: 1px solid #c8c8c8; border-radius: 6px; overflow: hidden; transform: rotate(-1.2deg); box-shadow: 0 16px 32px -24px rgba(0, 0, 0, 0.4); }
.flip .xl { transform: rotate(1.2deg); }
.xl-title { background: #217346; color: #fff; padding: 6px 10px; font-size: 12px; }
.xl-bar { display: flex; gap: 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid #d4d4d4; white-space: nowrap; overflow: hidden; }
.xl-name { border: 1px solid #c8c8c8; padding: 1px 6px; min-width: 36px; }
.xl-fx { color: #666; font-style: italic; }
.xl table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.xl th { background: #efefef; color: #666; font-weight: 400; border: 1px solid #d4d4d4; padding: 2px 4px; width: 26px; }
.xl thead th:not(:first-child) { width: auto; }
.xl td { border: 1px solid #e1e1e1; padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: clip; height: 20px; }
.xl td.h { font-weight: 700; }
.xl td.r { text-align: right; }
.xl td.y { background: #fff2a8; }
.xl td.g { background: #c6efce; color: #006100; }
.xl td.red { background: #ffc7ce; color: #9c0006; font-weight: 700; }
.xl td.err { color: #c00000; font-weight: 700; }
.xl td.sel { outline: 2px solid #217346; outline-offset: -2px; }
.xl tr.strike td { text-decoration: line-through; color: #767676; background: #fff; }
.xl-tabs { display: flex; gap: 2px; background: #efefef; border-top: 1px solid #d4d4d4; padding: 0 6px; overflow: hidden; white-space: nowrap; }
.xl-tabs span { padding: 4px 10px; color: #555; }
.xl-tabs .on { background: #fff; color: #217346; font-weight: 700; border-bottom: 2px solid #217346; }

@media (max-width: 860px) {
  .case, .case.flip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "before" "after"; gap: 24px; margin-top: 40px; }
  /* On a phone the recording is the point; the spreadsheet shrinks to a glimpse that fades out. */
  .xl, .flip .xl { transform: none; font-size: 11px; max-height: 190px; mask-image: linear-gradient(#000 60%, transparent); }
  .xl td { padding: 2px 3px; }
}

/* Promises */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promise { padding: 32px; border-top: 4px solid var(--ink); border-left: 1px solid var(--line); }
.promise:first-child { padding-left: 0; border-left: 0; }
.promise:last-child { padding-right: 0; }
.num { font-size: clamp(44px, 5vw, 88px); font-weight: 900; font-stretch: 72%; line-height: 0.92; }
.promise h3 { font-size: 22px; font-weight: 800; margin-top: 16px; }
.promise p:last-child { color: var(--mut); margin-top: 8px; }

/* Process */
.steps { list-style: none; padding: 0; margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.steps li { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; }
.steps .when { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--mut); }
.steps .n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--onink); font-weight: 800; font-size: 18px; }
.steps h3 { font-size: 22px; font-weight: 800; }
.steps p:last-child { color: var(--mut); }

/* About */
.about { display: flex; flex-direction: column; gap: 16px; max-width: 42em; }
.about .big { font-size: 28px; line-height: 1.3; font-weight: 600; }
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; margin-top: 8px; }
.tags li { border: 1px solid var(--edge); border-radius: 999px; padding: 4px 12px; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { font-size: 22px; font-weight: 800; display: flex; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 28px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 12px; color: var(--mut); max-width: 40em; }

/* Contact: the form is a paper sheet on the board */
.contact { position: relative; background: var(--board); border-radius: 40px 40px 40px 120px; padding: 64px; }
.contact > .stack { color: var(--onboard); }
.contact > .stack .mut, .contact > .stack a { color: var(--onboard); }
.contact-title { font-size: clamp(44px, 5vw, 72px); line-height: 0.92; font-weight: 900; font-stretch: 72%; }
.contact .form { background: var(--paper); color: var(--ink); border-radius: 4px; padding: 40px; box-shadow: 0 40px 72px -32px rgba(50, 10, 0, 0.6); position: relative; }
.contact .form::before { content: ""; position: absolute; top: -16px; left: 50%; width: 112px; height: 28px; margin-left: -56px; background: var(--tape); transform: rotate(2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: 14px; }
.form .full { grid-column: 1 / -1; }
input, select, textarea { font: inherit; font-size: 18px; color: var(--ink); background: var(--field); border: 2px solid var(--edge); border-radius: 8px; padding: 12px 16px; min-height: 52px; width: 100%; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-foot p { font-size: 14px; color: var(--mut); max-width: 28em; }
/* "Forbedr beskrivelsen": a quiet link-style button under the field and one suggestion box */
.assist { display: flex; flex-direction: column; gap: 10px; margin-top: -10px; }
.assist[hidden], .assist [hidden] { display: none; }
.assist-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.assist-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--board); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.assist-go:disabled { color: var(--edge); text-decoration-color: var(--line); cursor: not-allowed; }
.busy .assist-go:disabled { color: var(--ink); text-decoration-color: var(--board); cursor: progress; }
.assist-ico { width: 16px; height: 16px; flex: none; }
.busy .assist-ico { animation: assist-write 0.9s ease-in-out infinite; }
@keyframes assist-write { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(3px, -2px) rotate(-8deg); } }
.assist-note { flex: 1 1 16em; font-size: 14px; color: var(--mut); max-width: 34em; }
textarea.assist-busy { background: linear-gradient(100deg, #fff 35%, #f7ece8 50%, #fff 65%) 100% 0 / 300% 100%; border-color: var(--board); animation: assist-read 1.3s ease-in-out infinite; }
@keyframes assist-read { to { background-position: 0 0; } }
.assist-choice { display: flex; flex-direction: column; gap: 10px; background: var(--surf); border-radius: 8px; padding: 14px 16px; font-size: 14px; color: var(--mut); }
@media (prefers-reduced-motion: reduce) { textarea.assist-busy, .busy .assist-ico { animation: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.status:empty { display: none; }
.status { grid-column: 1 / -1; font-weight: 600; padding: 12px 16px; border-radius: 8px; border: 2px solid var(--line); }
.status.ok { border-color: var(--ok); color: var(--ok); }
.status.err { color: var(--err); border-color: var(--err); }

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: 16px; }
.site-foot .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.site-foot .foot-col { display: flex; flex-direction: column; gap: 8px; }
.site-foot strong { font-size: 18px; }

/* Subpages */
.page-head { padding: 72px 0 64px; border-bottom: 1px solid var(--line); }
.page-head .wrap { display: flex; flex-direction: column; gap: 20px; }
.crumbs { font-size: 14px; color: var(--mut); }
.crumbs a { color: var(--mut); }
.crumbs a:hover { color: var(--ink); }
.page-from { font-size: 18px; font-weight: 600; }
.page-from span { color: var(--ink); font-weight: 800; }
.prose { display: flex; flex-direction: column; gap: 16px; max-width: 44em; }
.prose h2 { font-size: 28px; font-weight: 800; margin-top: 24px; }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.prose li::marker { color: var(--mut); }
.list-plus { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.list-plus li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.list-plus li::before { content: ""; flex: none; width: 8px; height: 16px; margin: 4px 4px 0; border: solid var(--ok); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 14px; font-weight: 700; color: var(--mut); padding: 0 16px 12px 0; border-bottom: 2px solid var(--ink); }
.table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table td:first-child { font-weight: 700; }
.table .price { font-weight: 700; white-space: nowrap; text-align: right; padding-right: 0; }
.table th.price { text-align: right; }
.cta { position: relative; background: var(--board); border-radius: 40px 40px 40px 120px; padding: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.cta > div { background: var(--paper); border-radius: 4px; padding: 32px 40px; transform: rotate(-1.5deg); box-shadow: 0 32px 56px -28px rgba(50, 10, 0, 0.6); position: relative; }
.cta > div::before { content: ""; position: absolute; top: -16px; left: 50%; width: 96px; height: 24px; margin-left: -48px; background: var(--tape); transform: rotate(-2deg); }
.cta .mono { font-size: 18px; font-weight: 700; }
.cta .num { margin-top: 8px; }
.cta .btn { background: var(--paper); color: #18221d; }
.cta .btn:hover { background: var(--surf); }
.related { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.related li { border-bottom: 1px solid var(--line); }
.related a { display: block; padding: 20px 0; text-decoration: none; font-size: 22px; font-weight: 800; }
.related a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.notice { padding: 128px 0; }
.notice .wrap { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

/* Short screens (laptops at 125-150 % scaling show about 1280 × 640): fit headline, choice, button and the whole quote above the fold. */
@media (min-width: 761px) and (max-height: 900px) {
  :root { --head: 64px; }
  .hero::before { top: 8px; bottom: 24px; }
  .hero .wrap { min-height: 0; padding-top: 16px; padding-bottom: 48px; }
  .hero .h1 { font-size: clamp(44px, min(6vw, 9vh), 88px); }
  .hero .lead { margin-top: 16px; font-size: 18px; }
  .pick { margin-top: 24px; }
  .hero .btns { margin-top: 24px; }
  .who { margin-top: 12px; }
  .sheet { padding: 28px 32px 24px; }
  .sheet-head h2 { font-size: 28px; }
  .to { margin: 12px 0 0; }
  .qlines td { padding: 8px 0; font-size: 16px; }
  .total { padding-top: 12px; }
  .sum { font-size: 32px; }
  .sheet-head { padding-bottom: 8px; }
  .sign { margin-top: 12px; }
  .sign-line { height: 24px; }
}

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Hero order below 1080 px: headline, choice, quote with price, text, button. Two columns overlap here. */
  /* The board starts 28 px above the quote, so the tape (16 px above the sheet) sits on brick, and runs to the bottom of the hero; pure CSS, so nothing shifts when JS runs */
  .hero { isolation: isolate; overflow: hidden; overflow: clip; }
  .hero::before { display: none; }
  .hero-board { position: relative; margin-top: 20px; }
  .hero-board::before { content: ""; position: absolute; z-index: -1; top: -28px; bottom: -2000px; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); background: var(--board); border-radius: 32px 32px 0 0; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; min-height: 0; padding-top: 16px; padding-bottom: 48px; }
  .hero-copy { display: contents; }
  .hero-copy > h1 { order: 1; }
  .hero-copy > .pick { order: 3; margin-top: 0; }
  .hero-board { order: 4; }
  .hero-copy > .lead { order: 2; margin-top: 0; }
  .hero-copy > .btns { order: 5; margin-top: 0; }
  .hero-copy > .who { order: 6; margin-top: 0; }
  /* The board behind them is a pseudo-element; the same colour as a real background lets contrast checkers measure the text. */
  .hero-copy > .btns, .hero-copy > .who { position: relative; color: var(--onboard); background: var(--board); }
  .hero .btns .btn { background: var(--paper); color: #18221d; }
  .hero .btns .btn:hover { background: #efe8da; }
  .hero .btns .link { color: var(--onboard); }
  .sheet { margin-right: auto; }
  .contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 900px) {
  .navl { display: none; }
  .menu { display: block; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .site-foot .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot .foot-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --pad: 20px; --head: 64px; }
  .sec { padding: 64px 0; }
  .brand .logo { height: 26px; }
  .promises, .steps, .form, .site-foot .wrap { grid-template-columns: minmax(0, 1fr); }
  .lead { font-size: 18px; }
  .hero .btns { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero .btns .link { text-align: center; }
  .pick-q { margin-bottom: 8px; }
  .pills { grid-template-columns: 1fr 1fr; }
  .pill { min-height: 44px; padding: 0 8px; font-size: 15px; }
  /* Keep "Fra-pris … ingen moms" above the fold on a phone: the 30-day fix and ownership lines are repeated in the promises below. */
  .to, .qlines .q-std { display: none; }
  .sheet { padding: 24px 20px 20px; transform: rotate(-1deg); }
  .sheet-head h2 { font-size: 28px; }
  .qlines td { padding: 8px 0; font-size: 16px; }
  .total { padding-top: 12px; }
  .sum { font-size: 32px; }
  .sheet-head { padding-bottom: 8px; }
  .facts .wrap { gap: 24px; padding-top: 32px; }
  .facts b { font-size: 22px; }
  .diff { grid-template-columns: minmax(0, 1fr); }
  .wall { padding: 64px 0 40px; }
  .notes { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 24px calc(-1 * var(--pad)) 0; padding: 24px var(--pad) 28px; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .notes::-webkit-scrollbar { display: none; }
  .note { flex: 0 0 82%; scroll-snap-align: start; }
  .promise, .promise:first-child, .promise:last-child { padding: 28px 0; border-left: 0; }
  .contact, .cta { padding: 32px 20px; border-radius: 32px; }
  .contact .form { padding: 24px 20px; }
  .cta > div { padding: 24px; }
  .page-head { padding: 48px 0 40px; }
  .site-foot .wrap { gap: 24px; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .table td { display: block; padding: 0; border: 0; }
  .table td.price { grid-column: 2; grid-row: 1; }
  .table td.mut { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .nav { gap: 8px; }
  .brand .logo { height: 21px; }
  .nav > .btn { white-space: nowrap; padding: 0 14px; font-size: 14px; }
}
/* Below 360 px the wordmark and the header button do not fit side by side; the button is still in the hero and the menu. */
@media (max-width: 400px) { .brand .logo { height: 18px; } .nav > .btn { padding: 0 12px; } }
@media (max-width: 359px) { .nav > .btn { display: none; } }

/* Audit: keep choices and next steps explicit. */
.note-more { margin-top: 16px; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; font-weight: 700; }
.swipe-hint { display: none; }
.field-help { font-size: 14px; font-weight: 400; color: var(--mut); }
@media (max-width: 760px) {
  .swipe-hint { display: block; margin-top: 24px; font-size: 14px; color: var(--mut); }
  .notes { margin-top: 0; }
  .hero .lead { font-size: 16px; margin-top: 0; }
}

/* Launch pass: 44 px touch targets for links in the footer, breadcrumbs and the form's mail fallback. */
.site-head { overflow-x: clip; }
@media (pointer: coarse), (max-width: 760px) {
  .crumbs a, .site-foot a, .contact-title ~ .mono a, .note-more, .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .status a { display: flex; align-items: center; width: fit-content; min-height: 44px; margin-top: 4px; }
  .crumbs { display: flex; align-items: center; }
}

/* Design pass (31 Oct 2026): fewer soft, rounded, identical things, so the quote and the board are the only decoration.
   Square-ish buttons, tape only on the quote and the form, hard shadows on screens, a paper-form look on the fields. */
.btn, .pill { border-radius: 10px; }
.tags li { border-radius: 6px; }
.btn:active, .pill:active { transform: scale(0.97); }
.btn, .pill { transition: transform 0.12s; }
.note a { box-shadow: none; border: 1px solid var(--edge); transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); transform-origin: 50% 0; }
.note:nth-child(n) a { transform: none; }
.note:nth-child(2) a { transform: rotate(-0.8deg); }
.note:nth-child(5) a { transform: rotate(0.7deg); }
.note a:hover, .note a:focus-visible { transform: rotate(0deg) translateY(-3px); }
.note a:active { transform: scale(0.99); }
.screen { border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); }
.diff { border-radius: 4px; }
.form input, .form select, .form textarea { border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: var(--surf); padding-inline: 12px; }
.form input:hover, .form select:hover, .form textarea:hover { background: var(--hover); }
.more > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
@media (max-width: 760px) { .more-grid { grid-template-columns: minmax(0, 1fr); } }
/* The header line fades in with opacity, so only transform and opacity ever animate. */
@supports (animation-timeline: scroll()) {
  .site-head { animation: none; position: sticky; }
  .site-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); opacity: 0; animation: head-line-fade linear both; animation-timeline: scroll(); animation-range: 0 32px; }
  @keyframes head-line-fade { to { opacity: 1; } }
}
@media (pointer: coarse), (max-width: 760px) {
  .case-text a, .link, .faq summary { display: inline-flex; align-items: center; min-height: 44px; }
  .faq summary { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .btn:active, .pill:active { transform: none; } .note a { transition: none; } }

/* Process as a ledger, like the lines on the quote: one row per step, big number, no circles. */
.steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
.steps li { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; gap: 8px 32px; padding: 20px 0; }
.steps .n { width: auto; height: auto; background: none; color: var(--ink); border-radius: 0; font-size: 40px; font-weight: 900; font-stretch: 80%; line-height: 1; }
@media (max-width: 760px) { .steps li { grid-template-columns: minmax(0, 1fr); } }