/**
 * slop-ok: hairline-default, gradient-spam, mono-outside-code — all three counts are inherited by a 3,800-line stylesheet serving eleven templates, so the per-file totals measure the whole subpage system rather than any single design, not the page being worked on.
 *
 * Measured across the 2026-08-29/30 work: mono 38 -> 32, 1px borders 52 -> 51,
 * gradients 18 -> 18 (four gradient plates became flat fills, then the related
 * card gained one veil, so it nets to level). The mono drop is the tracked-caps
 * device coming off this page's chrome entirely -- the per-topic counts, the
 * eyebrow, the search button, the results count and the article meta line. The
 * panel row was removed outright, taking ~4.7KB with it. What still counts as
 * mono here is almost all `↗`/`↓` glyphs, which are a font fallback fix, not a
 * style (DESIGN.md:270).
 * On the two flagged as ornament, both are load-bearing brand systems, not
 * decoration: mono is the site's counting voice, defined as the `--mono`
 * token and used only on figures and short caps labels that align in a
 * column (`.mono-badge`, `.mono-tag`, `.ah-count`); the hairline is DESIGN.md's
 * Paper Casts Only Off Bone rule, where an edge — not a shadow — is what
 * defines paper on bone. Revisit if a future change raises either count.
 *
 * Subpages — the v14 system off the front page (SUBPAGES-PLAN, 2026-08).
 *
 * Loads after home.css and only off the front page. home.css owns the world
 * (tokens, header, footer, section scaffold, media cards, paper objects,
 * pricing, advisory, contact, marquee); this file adds the four objects the
 * subpages need and the light-ground / flat-ground variants of the rest:
 *
 *   .page-hero   — bone hero: eyebrow, display H1, lede, ruled line, actions
 *   .prose       — long-form reading column (articles, handelsbetingelser)
 *   .qa-row      — <details> accordion in the folder index's dotted language
 *   .step-list   — numbered process rows in the kartotek rhythm
 *
 * Photographic grounds are NOT available here (every ph-* frame is dev-only,
 * SUBPAGES-PLAN §16): media cards on subpages carry flat tinted grounds
 * (.ground-*) with no <img>, so the layout never depends on a photograph
 * that cannot ship. When the commissioned frames land, the grounds swap to
 * images without layout changes.
 */

/* ---------- wordmark on flat pages ---------- */

/* No photo hero: the wordmark parks at the top of the page (absolute, not
   fixed) and renders ink via difference against the bone it always sits on.
   A fixed difference-blend logo turned electric cyan over the amber bands
   and swallowed glyphs it crossed (design red-team F2) — parking it means
   it never leaves the bone ground at all. The scroll-riding blend stays a
   photo-hero behavior. */
.v14-flat .site-logo {
    position: absolute;
    mix-blend-mode: difference;
    animation: none;
}

/* ---------- page hero ---------- */

.page-hero {
    max-width: 1720px;
    margin: 0 auto;
    padding: 176px var(--pad-x) 84px;
}

.page-hero h1 {
    margin: 22px 0 0;
    font-size: clamp(42px, 6.2vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 500;
    max-width: 18ch;
    text-wrap: balance;
}

.ph-lede {
    margin: 26px 0 0;
    font-size: 19px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 560px;
}

/* Two-part page-hero H1: the quiet keyword line above the display line,
   both inside one <h1> (front-page pattern on bone). */
.page-hero h1 .h1-quiet {
    display: block;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--muted);
    margin: 0 0 14px;
    max-width: 560px;
}

.page-hero h1 span:not(.h1-quiet) {
    display: block;
}

/* The hero's ruled statement line, miniaturized into the mono register:
   short evidenced tokens with ink rules flexing between them. */
.page-rule {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 44px 0 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink);
    white-space: nowrap;
}

.page-rule .rule {
    height: 1.5px;
    background: var(--ink);
}

.ph-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 36px 0 0;
}

/* ---------- buttons on bone ---------- */

.btn-ink {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 99px;
    background: var(--ink);
    color: var(--bone);
    font-size: 15.5px;
    font-weight: 500;
    transition: transform 0.25s;
}

.btn-ink:hover {
    transform: translateY(-2px);
}

.btn-line {
    display: inline-block;
    padding: 15px 30px;
    border: 1px solid rgba(20, 20, 18, 0.35);
    border-radius: 99px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    transition: border-color 0.2s;
}

.btn-line:hover {
    border-color: var(--ink);
}

.ph-note {
    margin: 18px 0 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--muted);
}

/* `.ph-note` is a tracked mono caps label — "GRATIS OG UFORPLIGTENDE",
   "ELEFANTENS KVT. 6A · 2620 ALBERTSLUND". Four of its five uses are exactly
   that. The fifth, on /handelsbetingelser/, is a full sentence, which is the
   one thing DESIGN.md's Mono Is For Facts Rule says mono never carries. Same
   note, same position, read as prose. */
.ph-note.plain {
    font-family: inherit;
    font-size: 13.5px;
    letter-spacing: normal;
    line-height: 1.6;
}

/* Content that sits directly on the bone inside a section (qa lists,
   kartotek paper, step lists) — same frame the object cards use. */
.sec-body {
    padding: 0 var(--pad-x) 100px;
    max-width: 1720px;
    margin: 0 auto;
}

/* Prose that leads into another object in the same section */
.sec-body.owners-body {
    padding-bottom: 44px;
}

/* ---------- flat tinted grounds (photograph stand-ins) ---------- */

.ground-amber {
    background: radial-gradient(120% 140% at 28% 0%, #9E5722 0%, #6E3711 52%, #38180A 100%);
}

.ground-ink {
    background: linear-gradient(180deg, #2C2C28 0%, #141412 100%);
}

.ground-slate {
    background: linear-gradient(165deg, #55616C 0%, #232A30 100%);
}

.ground-moss {
    background: linear-gradient(165deg, #5E7453 0%, #26301F 100%);
}

.ground-dawn {
    background: linear-gradient(160deg, #8A7358 0%, #57432C 48%, #2A2118 100%);
}

/* A flat gradient carries less depth than the photographs it stands in for:
   a soft top sheen and edge fall-off give the tinted grounds the veiled-photo
   card's dimensionality until the commissioned frames land. isolation makes
   the negative z-index land above the ground's own background but under
   every child, positioned or not. */
.ground-ink,
.ground-slate,
.ground-moss,
.ground-dawn {
    isolation: isolate;
}

.ground-ink::after,
.ground-slate::after,
.ground-moss::after,
.ground-dawn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(140% 110% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%);
    pointer-events: none;
}

/* Generic object frame: a media card with a paper object or instrument
   centered on it — the mission/cases pattern without the photograph. */
.obj-frame {
    padding: 0 var(--pad-x) 100px;
    max-width: 1720px;
    margin: 0 auto;
}

/* A headless quote moment narrows its plate to the content instead of
   floating one card in a page-wide empty field. */
.obj-media.narrow {
    max-width: 960px;
    margin: 0 auto;
}

.obj-media {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px var(--pad-x);
}

/* Two paper objects side by side on one ground (moms/lønsum, ApS/enkeltmand) */
.split-2 {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
    width: 100%;
    max-width: 1080px;
}

.split-2.wide {
    max-width: 1200px;
}

.split-2 .receipt {
    width: auto;
}

/* Receipt carrying six labelled rows needs more paper */
.receipt.wide {
    width: 440px;
}

/* The deadline instrument standing alone on a ground (not inside a
   serve-card, where .glass-panel sizes itself at 82%) */
.glass-panel.standalone {
    width: min(400px, 100%);
}

/* ---------- receipt with labelled ticked bars (deliverable lists) ---------- */

.receipt .r-row {
    margin-top: 14px;
}

.receipt .r-label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    margin-bottom: 6px;
}

.receipt .r-bar {
    display: block;
    height: 10px;
    border-radius: 3px;
}

.receipt .r-bar.bar-a { background: repeating-linear-gradient(90deg, #5D7A50 0 2.5px, #FFFFFF 2.5px 5px); }
.receipt .r-bar.bar-b { background: repeating-linear-gradient(90deg, #C98A3D 0 2.5px, #FFFFFF 2.5px 5px); }
.receipt .r-bar.bar-c { background: repeating-linear-gradient(90deg, #8B9AAD 0 2.5px, #FFFFFF 2.5px 5px); }

.receipt .r-foot {
    margin: 16px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* Numberless receipt: a definition on paper (no figure may be invented) */
.receipt .r-body {
    margin: 14px 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: #33332E;
}

/* ---------- kartotek rows without a meter (audience lists) ---------- */

.st-plain {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid rgba(20, 20, 18, 0.08);
}

.st-plain .st-desc {
    font-size: 12.5px;
    color: var(--muted);
    text-align: right;
    max-width: 55%;
}

/* Text-heavy kartotek rows: label left, full sentence right-aligned left */
.st-plain.wide {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    align-items: start;
}

.st-plain.wide .st-desc {
    text-align: left;
    max-width: 58ch;
    font-size: 13px;
    line-height: 1.5;
}

.paper-list.roomy {
    margin-top: 24px;
    gap: 10px;
    font-size: 14.5px;
    max-width: 60ch;
}

.st-group {
    margin: 18px 0 0;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}

.statement .st-foot {
    margin: 16px 0 0;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    color: var(--muted);
}

/* ---------- logo pills on bone (regnskabssystemer) ---------- */

.logo-pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.logo-pills li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 99px;
    background: #FFFFFF;
    border: 1px solid rgba(20, 20, 18, 0.1);
    font-size: 14.5px;
    font-weight: 500;
}

.logo-pills img {
    display: block;
    height: 20px;
    width: auto;
}

.logo-pills li.plain {
    background: transparent;
    border: 1px solid rgba(20, 20, 18, 0.2);
    color: var(--muted);
    font-weight: 400;
}

/* ---------- badges + advisory off the front page ---------- */

.mono-badge.on-light {
    color: var(--ink);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid rgba(20, 20, 18, 0.25);
}

/* Advisory card without the folder index: one calm centered moment. */
.advisory.solo {
    justify-content: center;
    min-height: 480px;
}

/* Evidence list inside the advisory card */
.advisory-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.advisory-list li {
    position: relative;
    padding-left: 22px;
}

.advisory-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #FFFFFF;
}

/* Mono kicker above a step list or index on bone */
.list-title {
    margin: 0 0 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--muted);
}

/* ---------- glass pills standing on a ground (skatteoptimering) ---------- */

.pill-stack {
    position: relative;
    max-width: 640px;
    padding: 8px 0;
}

.pill-stack .mono-badge {
    margin-bottom: 20px;
}

.pill-stack .glass-pills {
    max-width: none;
    gap: 10px;
}

.pill-closing {
    margin: 22px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    max-width: 52ch;
}

/* ---------- paper panel (price-basic's sibling on light ground) ---------- */

.paper-panel {
    position: relative;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid rgba(20, 20, 18, 0.1);
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
}

.paper-panel h2,
.paper-panel h3 {
    margin: 0;
    font-size: 21px;
    letter-spacing: -0.02em;
    font-weight: 500;
}

.paper-panel .btn-line {
    margin-top: 24px;
    align-self: flex-start;
}

.paper-panel .paper-kicker {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin: 0 0 10px;
}

.paper-panel p {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
}

.paper-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13.5px;
    color: var(--muted);
}

.paper-list li {
    position: relative;
    padding-left: 22px;
}

.paper-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ink);
}

/* ---------- folder index on light ground ---------- */

.folder-index.light {
    width: 100%;
    max-width: none;
}

/* On bone, a page-scale index still reads best at column width */
.sec-body > .folder-index.light {
    max-width: 900px;
}

.folder-index.light .fi-head {
    color: var(--muted);
    border-bottom-color: rgba(20, 20, 18, 0.25);
}

.folder-index.light .fi-row {
    border-bottom-color: rgba(20, 20, 18, 0.12);
}

.folder-index.light .fi-row span {
    color: var(--ink);
}

.folder-index.light .fi-lead {
    border-bottom-color: rgba(20, 20, 18, 0.35);
}

.folder-index.light .fi-row em {
    color: var(--muted);
}

.folder-index.light .fi-row:hover em {
    color: var(--ink);
}

/* Index rows that carry a second line (the article hub). Grid, not
   flex-wrap: the desc's max-width would clamp its hypothetical flex size
   and let it share the first line after a short title. */
.fi-row.two {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    column-gap: 16px;
    row-gap: 6px;
}

.fi-row.two .fi-desc {
    grid-column: 1 / -1;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--muted);
    max-width: 62ch;
}

/* ---------- qa accordion (folder-index row that opens) ---------- */

.qa-list {
    max-width: 900px;
}

.qa-row {
    border-bottom: 1px solid rgba(20, 20, 18, 0.12);
}

.qa-row summary {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    font-size: 18.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.qa-row summary::-webkit-details-marker {
    display: none;
}

.qa-row summary .fi-lead {
    flex: 1;
    border-bottom: 1.5px dotted rgba(20, 20, 18, 0.35);
    transform: translateY(-5px);
}

.qa-row summary em {
    font-family: var(--mono);
    font-style: normal;
    font-size: 15px;
    color: var(--muted);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.qa-row[open] summary em {
    transform: rotate(45deg);
}

.qa-row .qa-a {
    padding: 0 0 24px;
    max-width: 62ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--muted);
}

.qa-row .qa-a p {
    margin: 0 0 0.9em;
}

.qa-row .qa-a p:last-child {
    margin-bottom: 0;
}

.qa-row .qa-a a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- step list ---------- */

.step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 900px;
    counter-reset: step;
}

.step-list > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px 24px;
    padding: 26px 0;
    border-top: 1px solid rgba(20, 20, 18, 0.12);
}

.step-list > li::before {
    content: '0' counter(step);
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--faint);
    padding-top: 4px;
}

.step-list h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.step-list .mono-step {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    font-weight: 500;
    padding-top: 4px;
}

/* Quoted terms under a step list */
.terms-note {
    margin-top: 36px;
    max-width: 62ch;
    padding-top: 20px;
    border-top: 1px solid rgba(20, 20, 18, 0.12);
}

.terms-note p:not(.list-title) {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
}

/* qa summaries that carry heading elements (SEO type names) */
.qa-row summary h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    display: inline;
}

.step-list p {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 58ch;
    grid-column: 2;
}

.step-list ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.step-list ul li {
    font-size: 12.5px;
    color: var(--ink);
    padding: 8px 14px;
    border: 1px solid rgba(20, 20, 18, 0.2);
    border-radius: 99px;
}

/* ---------- single quote on paper (service pages) ---------- */

.quote-single {
    padding: 0 var(--pad-x) 100px;
    max-width: 1720px;
    margin: 0 auto;
}

.quote-single .quote-card {
    margin-top: 20px;
}

.quote-card.light {
    width: auto;
    max-width: 680px;
    background: #FFFFFF;
    border: 1px solid rgba(20, 20, 18, 0.1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    margin: 0;
}

.quote-card.light .stars {
    color: #C98A3D;
}

.quote-card.light p {
    color: #3A3A34;
    font-size: 15px;
}

.quote-card.light figcaption {
    color: var(--faint);
}

/* ---------- prose (long-form reading column) ---------- */

.prose {
    max-width: 68ch;
    font-size: 17px;
    line-height: 1.7;
    color: #33332E;
}

.prose h2 {
    margin: 2.4em 0 0.6em;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: var(--ink);
}

.prose h3 {
    margin: 1.8em 0 0.5em;
    font-size: 20px;
    letter-spacing: -0.015em;
    font-weight: 500;
    color: var(--ink);
}

.prose p {
    margin: 0 0 1.1em;
}

.prose ul,
.prose ol {
    margin: 0 0 1.2em;
    padding-left: 1.25em;
}

.prose li {
    margin: 0.35em 0;
}

.prose a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose strong {
    font-weight: 500;
    color: var(--ink);
}

/* ---------- subpage photo hero (revisor-priser, om-revisorpro) ---------- */

/* Shorter than the front page's full-viewport hero: the page's object is
   below, and the visitor came for it. */
.hero.sub {
    height: 78vh;
    height: 78svh;
    min-height: 540px;
}

.hero.sub .hero-photo {
    object-position: 50% 12%;
}

.hero.sub .hero-foot h1 {
    font-size: clamp(34px, 5.1vw, 84px);
}

/* ---------- pricing page: matrix chrome ---------- */

.seg-legend {
    margin: 0 0 14px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--dark-muted);
}

.seg-title {
    margin: 0 0 24px;
    font-size: 22px;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: var(--bone);
}

.price-body {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    max-width: 560px;
}

.price-foot-note {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
}

.price-basic .price-foot-note {
    color: var(--dark-muted);
}

.band-dark .included {
    padding: 0 var(--pad-x) 140px;
}

.band-dark .included .sec-head {
    padding: 0 0 44px;
}

.glass-pills.big {
    max-width: none;
    gap: 10px;
}

.glass-pills.big li {
    font-size: 15px;
    padding: 14px 24px;
}

.art-link {
    margin: 28px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 72ch;
}

.art-link a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- segment toggle (revisor-priser) ---------- */

.seg-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.seg-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
}

.seg-toggle label {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    color: var(--bone);
    padding: 13px 24px;
    border: 1px solid rgba(242, 241, 236, 0.3);
    border-radius: 99px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.seg-toggle label:hover {
    border-color: var(--bone);
}

#seg-em:checked ~ .seg-toggle label[for='seg-em'],
#seg-aps:checked ~ .seg-toggle label[for='seg-aps'] {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--ink);
}

#seg-em:focus-visible ~ .seg-toggle label[for='seg-em'],
#seg-aps:focus-visible ~ .seg-toggle label[for='seg-aps'] {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

.seg-panel-aps,
.seg-panel-em {
    display: none;
}

#seg-em:checked ~ .seg-panel-em,
#seg-aps:checked ~ .seg-panel-aps {
    display: block;
}

/* ---------- responsive ---------- */

@media (max-width: 720px) {
    /* The short photo hero has no room for both the ruled line and the
       stacked H1 on a phone — give it the height back and lift the rule
       to the owners' shoulder line. Cover-cropping the two-man frame into
       a phone bisects both faces at the edges — favor the left owner. */
    .hero.sub {
        height: 92vh;
        height: 92svh;
    }

    /* om's three-noun display line wraps to three lines across the faces
       at the generic mobile size — two lines, below the shoulder line. */
    .hero.sub .hero-foot h1 {
        font-size: clamp(25px, 7.6vw, 38px);
    }

    .hero.sub .hero-photo {
        object-position: 36% 14%;
    }

    .hero.sub .hero-rule {
        top: 40%;
    }

    .page-hero {
        padding-top: 128px;
        padding-bottom: 56px;
    }

    .page-hero h1 {
        font-size: clamp(34px, 10.5vw, 52px);
        letter-spacing: -0.03em;
        /* REVISORERKLÆRINGER is longer than a phone is wide at display
           size — break only at authored soft hyphens (auto picks the wrong
           morpheme), and never let a single word push the page into
           horizontal scroll. */
        hyphens: manual;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .ph-lede {
        font-size: 17px;
    }

    .page-rule {
        gap: 12px;
        letter-spacing: 0.08em;
        margin-top: 36px;
    }

    .ph-actions {
        margin-top: 28px;
    }

    .btn-ink,
    .btn-line {
        padding: 14px 24px;
        font-size: 14.5px;
    }

    .split-2 {
        grid-template-columns: 1fr;
    }

    .obj-media {
        padding: 28px 16px;
        min-height: 0;
    }

    /* The paper fills the frame on phones and the absolute caption at
       bottom:20px disappeared behind it (payslip + formål receipts) —
       same cure the front page's .cases-media already carries. */
    .obj-media:has(.media-caption) {
        padding-bottom: 76px;
    }

    .obj-frame,
    .quote-single {
        padding-bottom: 72px;
    }

    .qa-row summary {
        font-size: 16.5px;
        padding: 17px 0;
    }

    .step-list > li {
        grid-template-columns: 40px 1fr;
        gap: 6px 14px;
        padding: 20px 0;
    }

    .prose {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qa-row summary em {
        transition: none;
    }
}

/* ---------- consultation ---------- */

/* The three-step form, re-skinned into the v14 language. main.js owns the
   behavior and adds .js to <html>; the step gating hangs off that class so
   the form degrades to all three steps stacked and readable without
   JavaScript (the progress bar, meaningless without steps, only renders
   with it). */

.consultation-shell {
    max-width: 760px;
    margin: 0 auto;
    padding: 150px var(--pad-x) 96px;
}

.consultation-page-head {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 44px;
}

.consultation-back {
    align-self: flex-start;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--muted);
    transition: color 0.2s;
}

.consultation-back:hover {
    color: var(--ink);
}

/* Ticked track, solid ink fill — the receipt's bar language. main.js drives
   the fill via scaleX on the span. */
.consultation-progress {
    display: none;
    height: 10px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, rgba(20, 20, 18, 0.22) 0 2.5px, transparent 2.5px 5px);
}

.js .consultation-progress {
    display: block;
}

.consultation-progress span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: var(--ink);
    transform: scaleX(0.3333);
    transform-origin: 0 50%;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* main.css used to park the honeypot off-screen; page.css must too. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.js .consultation-step {
    display: none;
}

.js .consultation-step.is-active {
    display: block;
}

.step-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
}

.step-tags .mono-tag {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--muted);
}

.step-tags .valgt-tag {
    color: var(--ink);
    padding: 7px 13px;
    border: 1px solid rgba(20, 20, 18, 0.25);
    border-radius: 99px;
}

.consult-kicker {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 52ch;
}

.consultation-heading h1,
.consultation-heading h2 {
    margin: 0;
    font-size: clamp(28px, 4.6vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 500;
    max-width: 20ch;
    text-wrap: balance;
}

.consultation-heading > p:not(.consult-kicker) {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 52ch;
}

/* Service chips: the glass-pill row adapted to the bone ground — white
   pills that invert to ink when selected. The real checkbox stays in the
   tree for keyboard and AT; the check glyph doubles as the fallback where
   :has is unsupported. */

.service-choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 0;
}

.service-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 99px;
    background: #FFFFFF;
    border: 1px solid rgba(20, 20, 18, 0.16);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.service-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.service-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 99px;
    border: 1px solid rgba(20, 20, 18, 0.3);
    font-size: 10px;
    line-height: 1;
    color: transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.service-choice input:checked + .service-choice-icon {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bone);
}

.service-choice:hover {
    border-color: rgba(20, 20, 18, 0.45);
}

.service-choice:has(input:checked) {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bone);
}

.service-choice:has(input:checked) .service-choice-icon {
    background: transparent;
    border-color: rgba(242, 241, 236, 0.55);
    color: var(--bone);
}

.service-choice:has(input:focus-visible) {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* ---- fields ---- */

.field-group {
    margin: 24px 0 0;
}

.field-group > label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.consultation-form input[type='text'],
.consultation-form input[type='email'],
.consultation-form input[type='tel'],
.consultation-form select,
.consultation-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(20, 20, 18, 0.25);
    border-radius: 12px;
    background: #FFFFFF;
    font: inherit;
    /* 16px floor keeps iOS from zooming the field on focus */
    font-size: 16px;
    color: var(--ink);
    transition: border-color 0.2s;
}

.consultation-form input:focus,
.consultation-form select:focus,
.consultation-form textarea:focus {
    border-color: var(--ink);
}

.consultation-form ::placeholder {
    color: #6B6B63;
    opacity: 1;
}

.consultation-form input[readonly] {
    background: #FAFAF7;
    color: var(--muted);
}

.consultation-form input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.consultation-form textarea {
    resize: vertical;
    min-height: 120px;
}

.cvr-row {
    display: flex;
    gap: 10px;
}

.cvr-row input {
    flex: 1;
    min-width: 0;
}

.no-cvr-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    padding: 5px 0;
    font-size: 14.5px;
    cursor: pointer;
}

/* `.field-group > label` (0,2,1) outguns `.no-cvr-choice` (0,1,0), so this
   checkbox was inheriting the field-label register: 11px tracked mono with
   `text-transform: uppercase`, rendering the sentence "Jeg har ikke et
   CVR-nummer endnu" as JEG HAR IKKE ET CVR-NUMMER ENDNU — and at 11px, not
   the 14.5px the rule above intends. A field label is a label; a checkbox's
   text is what the person is agreeing to, so it is body copy. */
.field-group > label.no-cvr-choice {
    font-family: inherit;
    font-size: 14.5px;
    letter-spacing: normal;
    text-transform: none;
}

.no-cvr-choice input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--ink);
}

.field-help {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 52ch;
}

/* The found company, printed on a small white receipt. main.js injects
   <strong> + .cvr-company-card rows into #cvr-result. */
.cvr-result {
    margin-top: 18px;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid rgba(20, 20, 18, 0.1);
    padding: 20px 22px;
}

.cvr-result[hidden] {
    display: none;
}

.cvr-result > strong {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
}

.cvr-company-card div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-top: 1.5px dotted rgba(20, 20, 18, 0.25);
    margin-top: 10px;
}

.cvr-company-card div + div {
    margin-top: 0;
}

.cvr-company-card span {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.cvr-company-card strong {
    font-size: 13.5px;
    font-weight: 500;
    text-align: right;
}

.select-wrap {
    position: relative;
}

.select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
}

.select-wrap::after {
    content: '';
    position: absolute;
    right: 17px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.contact-fields .field-full {
    grid-column: 1 / -1;
}

/* ---- states main.js toggles ---- */

.form-error {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #A6341B;
}

.form-error.is-visible {
    margin: 16px 0 0;
}

.form-success {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #3E5A33;
}

.form-success[hidden] {
    display: none;
}

/* ---- actions ---- */

.consultation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.consultation-form button.btn-ink,
.consultation-form button.btn-line {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.consultation-form button.btn-line {
    border: 1px solid rgba(20, 20, 18, 0.35);
    background: transparent;
}

.consultation-form button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

#lookup-cvr {
    padding: 14px 22px;
    font-size: 14.5px;
    white-space: nowrap;
}

/* ---- reassurance rail (kartotek rows on white paper) ---- */

.consult-rail {
    list-style: none;
    margin: 44px 0 0;
    padding: 12px 24px;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid rgba(20, 20, 18, 0.1);
}

.consult-rail li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 13px 0;
    border-top: 1px solid rgba(20, 20, 18, 0.08);
    font-size: 14px;
    font-weight: 500;
}

.consult-rail li:first-child {
    border-top: 0;
}

.consult-rail .lead {
    flex: 1;
    border-bottom: 1.5px dotted rgba(20, 20, 18, 0.3);
    transform: translateY(-4px);
}

.consult-rail .tick {
    font-size: 13px;
}

@media (max-width: 720px) {
    .consultation-shell {
        padding-top: 118px;
        padding-bottom: 64px;
    }

    .contact-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .cvr-row {
        flex-direction: column;
    }

    .cvr-row #lookup-cvr {
        align-self: flex-start;
    }

    .consultation-actions .btn-ink,
    .consultation-actions .btn-line {
        flex: 1;
        text-align: center;
    }
}

/* ---------- tak ---------- */

.tak-page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 140px var(--pad-x) 90px;
}

.tak-receipt {
    width: min(480px, 100%);
    padding: 26px 28px;
    box-shadow: none;
    border: 1px solid rgba(20, 20, 18, 0.1);
}

.tak-receipt .tak-kicker {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    font-weight: 400;
    color: var(--muted);
}

.tak-receipt h1 {
    margin: 16px 0 0;
    font-size: clamp(24px, 5vw, 32px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 500;
}

.tak-body {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #33332E;
}

.tak-receipt .r-row {
    margin-top: 22px;
}

.tak-receipt .r-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--ink);
}

.tak-haster {
    margin: 20px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #33332E;
}

.tak-haster a {
    color: var(--ink);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tak-links {
    display: flex;
    gap: 26px;
    margin-top: 30px;
}

.tak-links a {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.2s;
}

.tak-links a:hover {
    color: var(--ink);
}

@media (max-width: 720px) {
    .tak-page {
        padding-top: 110px;
    }
}
/* ================================================================
   READ SURFACES — additions from the articles/legal builder.
   Merge into page.css (after the folder-index.light block).
   Covers: single-post.php, page-faglige-artikler.php,
   page-handelsbetingelser.php.
   ================================================================ */

/* ---------- sentence-form page hero (articles, legal) ----------
   Article titles and the handelsbetingelser H1 are sentence-form
   questions, not display caps: smaller clamp, calmer tracking,
   wider measure. No text-transform anywhere — DB titles verbatim. */
.page-hero.article h1 {
    font-size: clamp(30px, 4vw, 58px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 24ch;
}

/* ---------- the article, brought onto the hub's language (2026-08-30) ----------

   An article opened from /faglige-artikler/ was landing on a different site:
   a bone ground where the hub is white, tracked-mono caps labels where the
   hub has none left, no artwork where the hub is entirely cover-led, and a
   column sitting off-centre. The ground moves to white in functions.php
   (`v14-white` now covers `is_singular('post')`); the rest is here.

   Scoped to `.single` on purpose. `.fi-head` is on eight templates and
   `.list-title` on four, the front page among them, and the front page is the
   page every other one is told to follow — so the article stops using the
   tracked-caps device without dragging the rest of the building with it. */

/* The cover is the hub's card cover at page scale, same 20px radius, same
   16:9. Carrying it through the click is what makes the two pages one place. */
.single .article-cover {
    display: block;
    margin: 0 0 40px;
    border-radius: 20px;
    overflow: hidden;
}

.single .article-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Sans, sentence case. A section label is not a fact, and the hub has no
   tracked-mono caps left for an article to disagree with. */
.single .fi-head,
.single .list-title {
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--muted);
    text-transform: none;
}

.single .list-title {
    margin-bottom: 14px;
}

/* ---------- the article's meta line ----------
   Topic (a link back to its section on the hub) and the date the article's
   figures were checked. Wraps rather than truncates — a long topic on a 320px
   phone must not push the line off the page.

   Sans, sentence case, as of 2026-08-30. It was tracked mono caps under The
   Mono Is For Facts Rule (DESIGN.md:270), which sanctions `text-transform` on
   a DB-held value. The rule still holds elsewhere; here the topic is not a
   unit or a count, it is a NAME the reader already met in sentence case on the
   hub's sidebar, and shouting it in caps was the last of the ornamental-label
   device on this page. */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
    margin: 20px 0 0;
    font-size: 15px;
    color: var(--muted);
}

.article-meta a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid rgba(20, 20, 18, 0.25);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .article-meta a:hover {
        color: var(--ink);
        border-bottom-color: var(--ink);
    }
}

/* ---------- in-page anchors ----------
   Anchored prose H2s (article TOC, handelsbetingelser sections)
   must clear the fixed header when jumped to. */
.prose h2[id] {
    scroll-margin-top: 96px;
}

/* ---------- folder-index.light second-line color fix ----------
   page.css: `.folder-index.light .fi-row span` (0,3,1) outguns
   `.fi-row.two .fi-desc` (0,3,0), painting the description line
   ink instead of its intended muted. Re-assert with the light
   scope included. */
.folder-index.light .fi-row .fi-desc {
    color: var(--muted);
}

/* ---------- related service card (article template) ----------
   One flat-ground media card, the card is the link: mono badge and
   arrow on the top line, headline + one-liner at the foot. Copy
   comes from the deck's per-service card table. */
.rel-frame {
    padding: 0 var(--pad-x) 100px;
    max-width: 1720px;
    margin: 0 auto;
}

.rel-frame .list-title {
    margin-bottom: 14px;
}

/* ---------- the related-service card (rebuilt 2026-08-30) ----------

   Was 720x300 with `justify-content: space-between` and a 48px gap on the
   .ground-ink gradient: a layout shaped to hold a photograph, holding nothing.
   Measured, 120px of the 300 was dead air between the badge and the text —
   40% of the card. It read as the last stale object on a page that had just
   gone bright, and it still wore the tracked-mono badge.

   Now it carries the front page's actual mechanic — a blurred field frame
   under a tinted veil (`img.bg.blur-mid` + `.veil`, exactly as front-page.php
   builds Missionen) — at a height its three lines of content fill. The badge
   is gone: the headline already says which service this is, and repeating it
   in caps above was the third element in a unit that only needs two.

   The veil is forest rather than neutral ink, so the card belongs to the same
   family as the covers above it and the plate palette, and so the type has one
   predictable ground to sit on rather than whatever the photograph happens to
   be doing behind it. */
.rel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
    padding: 42px 34px;
    border-radius: 20px;
    background: #123B29;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Light enough that the blurred field actually reads as light rather than as
   a texture -- the whole point of borrowing the front page's mechanic. Worst
   case measured off the rendered card: the brightest ground pixel is #2E4930,
   8.78:1 against the cream type, so there is a lot of room under AA's 4.5. */
.veil-rel {
    background: linear-gradient(165deg, rgba(18, 59, 41, 0.26) 0%, rgba(18, 59, 41, 0.58) 100%);
}

@media (hover: hover) and (pointer: fine) {
    .rel-card:hover {
        transform: translateY(-4px);
    }
}

/* The arrow is the only thing left in the top row, pinned to the corner
   rather than holding a flex row open on its own. */
.rel-top {
    position: absolute;
    top: 34px;
    right: 34px;
}

/* The veil is absolutely positioned, so anything that must sit ON the
   photograph needs its own stacking position or the veil paints over it.
   Same reason .receipt carries position:relative on the front page. */
.rel-text {
    position: relative;
}

.rel-go {
    font-family: var(--mono);
    font-style: normal;
    font-size: 18px;
    color: rgba(234, 243, 237, 0.8);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s;
}

.rel-card:hover .rel-go {
    transform: translate(3px, -3px);
    color: #EAF3ED;
}

.rel-head {
    display: block;
    font-size: clamp(21px, 2.1vw, 26px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: #EAF3ED;
    max-width: 22ch;
    text-wrap: balance;
}

.rel-sub {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(234, 243, 237, 0.78);
    max-width: 48ch;
}

@media (max-width: 720px) {
    /* The 240px floor and the 36px gap were the same photo-shaped hole the
       desktop card had. The content sets the height here too. */
    .rel-card {
        padding: 32px 26px;
    }

    .rel-top {
        top: 26px;
        right: 26px;
    }

    .rel-frame {
        padding-bottom: 72px;
    }
}

/* ---------- reading surfaces: centered column ---------- */

/* Articles and the legal page are read, not scanned: their hero, TOC,
   prose, and related card share one centered measure instead of hugging
   the 1720px frame's left edge.

   The measure is the PROSE measure (68ch + the 28px gutters), not a rounder
   960px. At 960 the frame was wider than the column inside it, so the text
   sat 69px left of the viewport centre while the rule above claimed it was
   centred — the "random layout" read. Now every band on the page shares one
   left edge and one width. */
.v14-read .page-hero,
.v14-read .sec-body,
.v14-read .obj-frame,
.v14-read .rel-frame {
    max-width: calc(68ch + (var(--pad-x) * 2));
}

/* ---------- bespoke service instruments (red-team F1/U1) ---------- */

/* Each service page carries ONE signature instrument instead of a recycled
   front-page widget: the stamped årsrapport, the payslip, the fradragstjek
   receipt. Same paper material, distinct object per service. */

/* Stamped document (årsregnskab) */
.receipt .doc-line {
    display: block;
    height: 1px;
    margin-top: 22px;
    border-bottom: 1.5px dotted rgba(20, 20, 18, 0.3);
}

.receipt .doc-line.short {
    width: 62%;
}

.stamp {
    position: absolute;
    right: 18px;
    bottom: 46px;
    transform: rotate(-8deg);
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    font-weight: 600;
    color: #4C6741;
    border: 2px solid #4C6741;
    border-radius: 6px;
    padding: 8px 14px;
    opacity: 0.92;
    pointer-events: none;
}

/* Payslip rows (løn) — label left, ticked bar right; no invented figures */
.pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 13px;
}

.pay-row .r-label {
    margin: 0;
    white-space: nowrap;
}

.pay-row .r-bar {
    flex: 0 0 auto;
    height: 10px;
}

.pay-row.total {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(20, 20, 18, 0.15);
}

/* Testimonial on its ground: badge + glass card stacked on ink (the front
   page's court moment, without the photograph) — no more paper pinned to
   bare bone (red-team F3/U3). */
.quote-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 12px 0;
}

.quote-stack .quote-card {
    margin: 0;
    max-width: min(560px, 100%);
    width: auto;
}

/* ---------- consultation affordances (red-team F12) ---------- */

/* Checkbox chips: no radio-circle ghost — the pill itself is the state.
   Unchecked shows no icon; checked fills ink and shows the check. */
.consultation-page .service-choice-icon {
    display: none;
}

.consultation-page .service-choice input:checked ~ .service-choice-icon {
    display: inline-flex;
}

/* ================================================================
   SESSION 10 — PER-PAGE COMPOSITIONS (ART-DIRECTION.md)

   Each subpage is a different artifact of the accounting world at
   page scale. The objects below are grouped by page. Shared objects
   above (paper, kartotek, qa, steps, folder-index, prose, form)
   survive and are reused inside these compositions.
   ================================================================ */

/* ---------- shared: document label (mono file-head on paper) ---------- */

.doc-label {
    margin: 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--muted);
}

/* ---------- shared: quiet mono section kicker on bone ---------- */

.sec-quiet {
    max-width: 1720px;
    margin: 0 auto;
    padding: 96px var(--pad-x) 40px;
}

.sec-quiet .lede-big {
    max-width: 720px;
}

.sec-quiet .lede-sub {
    max-width: 560px;
}

/* Centered variant (the dossier page's axis) */
.sec-quiet.centered {
    text-align: center;
}

.sec-quiet.centered .sec-lede {
    padding-top: 0;
    max-width: 640px;
    margin: 0 auto;
}

.step-list.mid,
.terms-note.mid {
    margin-left: auto;
    margin-right: auto;
}

.terms-note.mid {
    margin-top: 44px;
    max-width: 900px;
}

.quote-single.mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: 20px;
}

.quote-single.mid .quote-card {
    margin-top: 0;
}

/* .mono-badge carries align-self: flex-start from home.css — re-center
   it on the centered axis. */
.quote-single.mid .mono-badge {
    align-self: center;
}

/* ================================================================
   /bogforing/ — TYPE ON BONE

   The hero was a rounded white card floating on bone, built out of six
   hairlines: its own border, the meta row, one per monthly line, one
   over the foot. Measured against ~50 Mobbin sections across Hero / How
   It Works / Features / About, both choices are singular — every strong
   hero in the set commits its ground edge to edge (Wise, Tines, Revolut,
   Ramp, Autosend, Resend), and a rule appears only where it carries
   structure (Runner's dotted grid, Framer's timeline, Ease's converging
   lines). Content sits on the bone now, and one rule survives, between
   the pitch and the proof.

   The gauge stays — owner's call. Resend runs this same geometry with a
   single object opposite the headline and nothing else.
   ================================================================ */

.ledger-frame {
    max-width: 1720px;
    margin: 0 auto;
    padding: 168px var(--pad-x) 0;
}

.ledger-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px clamp(48px, 6vw, 112px);
    align-items: center;
    padding-bottom: 76px;
}

.ledger-head h1 {
    margin: 0;
    /* 5.8vw put the headline in the left half and stopped. Wise, Tines and
       Revolut all run theirs at roughly this share of the field. */
    font-size: clamp(46px, 7.1vw, 118px);
    /* Danish display caps need the clearance: Å/Ø/Æ ascend past cap height.
       Same fault class that put the ring of MÅNED on the T of TIDEN on
       /udarbejdelse-af-lon/. */
    line-height: 1.02;
    letter-spacing: -.048em;
    font-weight: 500;
    max-width: 13ch;
    text-wrap: balance;
}

.ledger-lede {
    margin: 32px 0 0;
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.45;
    color: var(--ink);
    max-width: 38ch;
}

.ledger-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

/* ---------- the instrument ---------- */

/* Printed on the bone in ink rather than the front page's glass, and
   scaled to hold against a bigger headline. Illustrative, not a
   measurement (client-confirm list 4). */
.gauge.paper {
    width: clamp(230px, 25vw, 380px);
    height: clamp(230px, 25vw, 380px);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
}

.gauge.paper .gauge-read {
    max-width: 62%;
}

/* De-monoed with the rest of this page: two words a person reads. */
.gauge.paper .gauge-read em {
    font-family: inherit;
    font-size: clamp(12.5px, 1.05vw, 16px);
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
}

.gauge.paper .gauge-read strong {
    margin-top: 10px;
    font-size: clamp(40px, 4.8vw, 76px);
    letter-spacing: -.04em;
    color: var(--ink);
}

.gauge.paper .ticks-base {
    stroke: rgba(20, 20, 18, .16);
}

.gauge.paper .ticks-on {
    stroke: var(--ink);
}

/* ---------- the one rule, and the proof under it ----------
   Autosend puts a real number and a logo wall under a single rule
   directly beneath the headline. Both facts here were already on this
   page — the count at the register's foot, the systems in a pill block
   stranded 200px below the head that introduced them. */
.ledger-proof {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px 40px;
    padding: 26px 0 0;
    border-top: 1px solid rgba(20, 20, 18, .16);
}

.lp-stat {
    margin: 0;
    font-size: clamp(15px, 1.35vw, 19px);
    font-weight: 500;
    max-width: 34ch;
}

@media (max-width: 1080px) {
    .ledger-head {
        grid-template-columns: 1fr;
        align-items: start;
        padding-bottom: 56px;
    }

    .ledger-head .gauge {
        justify-self: start;
    }
}

@media (max-width: 720px) {
    .ledger-frame {
        padding-top: 124px;
    }

    .ledger-head {
        gap: 36px;
        padding-bottom: 44px;
    }

    .ledger-head h1 {
        font-size: clamp(36px, 10.5vw, 52px);
        letter-spacing: -.035em;
        max-width: 14ch;
    }

    .ledger-lede {
        margin-top: 22px;
    }
}

/* ================================================================
   /arsregnskab/ — THE DEADLINE (ink-led)
   Full-bleed dark opening; the deadline track runs page-wide.
   ================================================================ */

.dl-hero {
    background: var(--ink);
    color: var(--bone);
}

.dl-hero-inner {
    max-width: 1720px;
    margin: 0 auto;
    padding: 190px var(--pad-x) 96px;
}

.dl-eyebrow {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--dark-muted);
}

.dl-hero h1 {
    margin: 24px 0 0;
    font-size: clamp(42px, 6.4vw, 108px);
    line-height: 0.96;
    letter-spacing: -0.045em;
    font-weight: 500;
    color: var(--bone);
    max-width: 16ch;
    text-wrap: balance;
}

.dl-lede {
    margin: 28px 0 0;
    font-size: 19px;
    line-height: 1.5;
    color: var(--dark-muted);
    max-width: 58ch;
}

.dl-count {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-top: 72px;
}

.dl-count strong {
    font-size: clamp(54px, 6.4vw, 92px);
    letter-spacing: -0.05em;
    font-weight: 500;
    line-height: 1;
    color: #FFFFFF;
}

.dl-count span {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--dark-muted);
}

.dl-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: rgba(242, 241, 236, 0.6);
}

.dl-scale em {
    font-style: normal;
}

.dl-track {
    position: relative;
    height: 6px;
    border-radius: 99px;
    background: rgba(242, 241, 236, 0.22);
    margin-top: 12px;
}

.dl-track .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 58%;
    border-radius: 99px;
    background: #FFFFFF;
}

.dl-track .knob {
    position: absolute;
    left: 58%;
    top: -4px;
    width: 14px;
    height: 14px;
    border-radius: 99px;
    background: #FFFFFF;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.dl-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin-top: 56px;
}

.dl-actions .ph-note {
    margin: 0 0 0 auto;
    color: var(--dark-muted);
}

/* btn-outline is the price-panel's full-width block button; as a flex
   item next to btn-solid its 15px 0 padding collapsed it into a squashed
   oval with the label touching the border. Give it the solid button's
   footprint and a border that reads on ink. */
.dl-actions .btn-outline {
    display: inline-block;
    padding: 16px 32px;
    border-color: rgba(242, 241, 236, 0.45);
}

/* The container's 56px margin + 12px gap do the spacing — the buttons'
   own 32px margin-top opened a hole between the pair when they wrap. */
.dl-actions .btn-solid,
.dl-actions .btn-outline {
    margin-top: 0;
}

@media (max-width: 720px) {
    .dl-hero-inner {
        padding-top: 136px;
        padding-bottom: 72px;
    }

    .dl-hero h1 {
        font-size: clamp(36px, 10.5vw, 52px);
        letter-spacing: -0.03em;
    }

    .dl-count {
        margin-top: 52px;
    }

    .dl-actions .ph-note {
        margin-left: 0;
        width: 100%;
    }
}

/* The stamped årsrapport: one wide paper document on bone */
.doc-sheet {
    position: relative;
    background: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(20, 20, 18, 0.1);
    padding: clamp(26px, 4vw, 56px) clamp(22px, 4vw, 64px);
    max-width: 980px;
}

/* The receipt's ticked-row anatomy, on the page-scale document: label
   left, tick bar right (the .receipt scoping above doesn't reach here). */
.doc-sheet .r-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 0;
    padding: 13px 0;
    border-top: 1px solid rgba(20, 20, 18, 0.08);
}

.doc-sheet .r-row:first-of-type {
    margin-top: 18px;
}

.doc-sheet .r-label {
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.doc-sheet .r-bar {
    display: block;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 clamp(90px, 22vw, 260px);
}

.doc-sheet .r-bar.bar-a { background: repeating-linear-gradient(90deg, #5D7A50 0 2.5px, #FFFFFF 2.5px 5px); }
.doc-sheet .r-bar.bar-b { background: repeating-linear-gradient(90deg, #C98A3D 0 2.5px, #FFFFFF 2.5px 5px); }
.doc-sheet .r-bar.bar-c { background: repeating-linear-gradient(90deg, #8B9AAD 0 2.5px, #FFFFFF 2.5px 5px); }

.doc-sheet .r-foot {
    margin: 18px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.doc-sheet .receipt-num strong {
    font-size: 52px;
}

/* The stamp lands on the document's sign-off line, clear of the content
   rows above it (finish-review note: over a row it read as a defect). */
.doc-sheet .stamp {
    right: clamp(20px, 5vw, 64px);
    bottom: 10px;
}

/* ================================================================
   /moms-og-lonsumsafgift/ — THE TWIN (split)
   Two afgifter side by side under one H1; the split recurs.
   ================================================================ */

.twin-hero {
    max-width: 1720px;
    margin: 0 auto;
    padding: 176px var(--pad-x) 40px;
}

.twin-hero h1 {
    margin: 0;
    font-size: clamp(34px, 4.6vw, 76px);
    line-height: 1.0;
    letter-spacing: -0.04em;
    font-weight: 500;
    max-width: 24ch;
    text-wrap: balance;
}

.twin-hero h1 .h1-quiet {
    display: block;
    font-size: 16.5px;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--muted);
    margin: 0 0 16px;
    max-width: 560px;
}

.twin-hero .ph-lede {
    max-width: 620px;
}

.twin-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(48px, 6vw, 112px);
    max-width: 1720px;
    margin: 0 auto;
    padding: 48px var(--pad-x) 8px;
}

.twin-grid::before {
    content: '';
    position: absolute;
    top: 48px;
    bottom: 8px;
    left: 50%;
    width: 1px;
    background: rgba(20, 20, 18, 0.18);
}

.twin-col .mono-tag {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.16em;
}

.twin-word {
    margin: 16px 0 0;
    font-size: clamp(30px, 3.4vw, 54px);
    letter-spacing: -0.04em;
    line-height: 1;
    font-weight: 500;
}

.twin-def {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 44ch;
}

/* The twin carrying paper (the frister split): papers fill their halves,
   no center rule — the gutter separates them. */
.twin-grid.twin-papers {
    padding-bottom: 100px;
    gap: 0 clamp(20px, 3vw, 40px);
    align-items: start;
}

.twin-grid.twin-papers::before {
    display: none;
}

.twin-grid.twin-papers .statement {
    max-width: none;
}

@media (max-width: 860px) {
    .twin-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .twin-grid::before {
        display: none;
    }

    .twin-col + .twin-col {
        padding-top: 44px;
        border-top: 1px solid rgba(20, 20, 18, 0.18);
    }

    .twin-grid.twin-papers {
        gap: 24px;
        padding-bottom: 72px;
    }

    .twin-grid.twin-papers .twin-col + .twin-col {
        padding-top: 0;
        border-top: 0;
    }
}

/* Narrow ink band carrying the three rate lines */
.rate-band {
    background: var(--ink);
    color: var(--bone);
}

.rate-band-inner {
    max-width: 1720px;
    margin: 0 auto;
    padding: 64px var(--pad-x) 72px;
}

.rate-band h2 {
    margin: 0 0 28px;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: var(--bone);
    max-width: 30ch;
}

.rate-band .glass-pills {
    max-width: none;
    gap: 10px;
}

.rate-band .glass-pills li {
    font-size: 14.5px;
    padding: 13px 22px;
}

/* ================================================================
   /skatteradgivning/ — THE ADVISORY (amber-led)
   The advisory world at full-bleed page scale; the site's only
   warm opening.
   ================================================================ */

.amber-hero {
    position: relative;
    background: radial-gradient(120% 140% at 28% 0%, #9E5722 0%, #6E3711 52%, #38180A 100%);
    color: #FFFFFF;
    isolation: isolate;
}

.amber-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(140% 110% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%);
    pointer-events: none;
}

.amber-hero-inner {
    max-width: 1720px;
    margin: 0 auto;
    padding: 190px var(--pad-x) 96px;
}

/* The parked flat-page wordmark difference-blends to electric cyan over
   the amber opening (the exact failure that parked it, red-team F2) —
   on the amber-led page it renders plain white instead. */
body:has(.amber-hero) .site-logo {
    mix-blend-mode: normal;
}

.amber-hero h1 {
    margin: 28px 0 0;
    font-size: clamp(38px, 5.8vw, 100px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 500;
    color: #FFFFFF;
    max-width: 18ch;
    text-wrap: balance;
}

.amber-lede {
    margin: 26px 0 0;
    font-size: 18.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    max-width: 56ch;
}

.amber-hero .glass-pills {
    margin-top: 48px;
    max-width: 760px;
}

@media (max-width: 720px) {
    /* Chip widths went ragged on phones (one pill wrapped full-width,
       the rest content-width — client flagged the uneven right edge);
       the levers stack as uniform glass rows instead. */
    .amber-hero .glass-pills li {
        width: 100%;
    }
}

.amber-pill-note {
    margin: 20px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
    max-width: 52ch;
}

.amber-hero .status-row {
    margin-top: 44px;
}

.amber-hero .btn-solid {
    box-shadow: 0 16px 44px rgba(60, 20, 5, 0.35);
}

@media (max-width: 720px) {
    .amber-hero-inner {
        padding-top: 136px;
        padding-bottom: 72px;
    }

    .amber-hero h1 {
        font-size: clamp(34px, 9.8vw, 48px);
        letter-spacing: -0.03em;
    }
}

/* Numbered case-file rows (kartotek on paper, the four situations) */
.case-rows .st-plain .st-num {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--faint);
    margin-right: 14px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    /* At phone widths the inline number broke mid-label ("SAG / 02
       Afdragsordninger") — the file number takes its own line above
       the case name, like the tab on a physical file. */
    .case-rows .st-plain .st-num {
        display: block;
        margin: 0 0 5px;
    }
}

/* Quiet ink strip: one sentence + one action */
.ink-strip {
    background: var(--ink);
    color: var(--bone);
}

.ink-strip-inner {
    max-width: 1720px;
    margin: 0 auto;
    padding: 72px var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.ink-strip h2,
.ink-strip p.strip-head {
    margin: 0;
    font-size: clamp(26px, 3vw, 44px);
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-weight: 500;
    color: var(--bone);
}

.ink-strip .strip-sub {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--dark-muted);
    max-width: 52ch;
}

.ink-strip .btn-solid {
    margin-top: 0;
    flex-shrink: 0;
}

/* ================================================================
   /udarbejdelse-af-lon/ — THE PUNCH CARD (session-11 recomposition)

   The year of the 25ths IS the page opening. Twelve months run as one
   full-bleed ribbon across a slate ground — nine filled, three open —
   so the service's whole proposition is legible as an image before a
   word is read.

   Replaces the bone hero + 560px corner widget. That version opened on
   the same pale ground as /bogforing/ and /revisorerklaeringer/ (three
   of six Ydelser pages sharing a silhouette, against DESIGN.md:287) and
   rendered the page's signature instrument at 15px, as decoration.

   Ground: slate is unclaimed at the hero across the six — /arsregnskab/
   holds ink, /skatteradgivning/ holds amber. The page's ground sequence
   is now slate → bone → amber rather than bone throughout
   (DESIGN.md:289).
   ================================================================ */

/* Slate, but with the light moved off the top-left corner and down behind
   the ribbon. Two reasons, one of them not taste: `.site-logo` is a white
   wordmark on `mix-blend-mode: difference`, so it needs a near-dark ground
   under it — over stock slate's #55616C top it resolves to (170,158,147),
   a murky grey. /revisor-priser/ only escapes this because its band is
   near-black. The scroll-timeline flip at home.css:142 is meant to cover
   exactly this and computes `difference` at scroll 0 regardless, and its
   documented fallback keeps difference throughout. So the ground carries
   it: dark where the wordmark sits, light where the twelve months are. */
.punch-hero {
    position: relative;
    padding: 188px var(--pad-x) 104px;
    color: var(--bone);
    background: linear-gradient(180deg, #232A30 0%, #2B333A 28%, #4A5661 72%, #333C44 100%);
}

.punch-inner {
    max-width: 1720px;
    margin: 0 auto;
}

/* Display line left, the say-so bottom-aligned beside it: the copy band
   keeps the thesis' asymmetry while the ribbon below runs edge to edge. */
.punch-copy {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px clamp(48px, 6vw, 120px);
    align-items: end;
}

.punch-copy h1 {
    margin: 0;
    font-size: clamp(44px, 5.6vw, 98px);
    line-height: 0.94;
    letter-spacing: -0.045em;
    font-weight: 500;
    max-width: 14ch;
    text-wrap: balance;
}

.punch-hero .ph-lede {
    margin: 0;
    max-width: 44ch;
    color: rgba(242, 241, 236, 0.92);
}

.punch-hero .ph-note {
    color: rgba(242, 241, 236, 0.78);
}

.punch-hero .ph-actions {
    margin-top: 28px;
    align-items: center;
}

/* `.btn-solid` and `.btn-outline` are the dark-ground pair, but both are
   shaped for a card's full-width footer. Re-seat them as an inline pair. */
.punch-hero .btn-solid,
.punch-hero .btn-outline {
    margin-top: 0;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 0.2s;
}

.punch-hero .btn-outline {
    display: inline-block;
    padding: 16px 30px;
}

.punch-hero .btn-solid:active,
.punch-hero .btn-outline:active {
    transform: scale(0.97);
}

/* ---------- the ribbon: twelve 25ths ---------- */

.punch-year {
    margin-top: clamp(64px, 7vw, 104px);
}

.punch-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(242, 241, 236, 0.22);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: rgba(242, 241, 236, 0.76);
}

.punch-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    margin-top: 22px;
}

/* A punched cell is stamped through to the light: filled bone, ink type.
   An unpunched month is the slate showing through a hairline. Nine light
   blocks running into three dark ones is the page's thumbnail read. */
.punch-cell {
    border: 1px solid rgba(242, 241, 236, 0.26);
    border-radius: 14px;
    padding: 20px 8px 18px;
    text-align: center;
}

.punch-cell em {
    display: block;
    font-family: var(--mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: rgba(242, 241, 236, 0.84);
}

.punch-cell strong {
    display: block;
    margin-top: 10px;
    font-size: clamp(24px, 2.3vw, 38px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgba(242, 241, 236, 0.86);
}

.punch-cell.done {
    background: var(--bone);
    border-color: var(--bone);
}

.punch-cell.done em {
    color: var(--muted);
}

.punch-cell.done strong {
    color: var(--ink);
}

.punch-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-top: 24px;
}

.punch-foot strong {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--bone);
}

.punch-foot strong i {
    font-style: normal;
    color: rgba(242, 241, 236, 0.5);
}

.punch-foot span {
    font-size: 13px;
    color: rgba(242, 241, 236, 0.86);
}

/* The list under "Hvad en lønkørsel indeholder" lost its `.fi-head`, so it
   opens on its own rule instead of a restated label. */
.folder-index.light.ruled .fi-row:first-child {
    border-top: 1px solid rgba(20, 20, 18, 0.25);
}

@media (max-width: 1180px) {
    .punch-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 1080px) {
    .punch-copy {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .punch-copy h1 {
        max-width: 16ch;
    }
}

@media (max-width: 720px) {
    .punch-hero {
        padding-top: 132px;
        padding-bottom: 72px;
    }

    .punch-copy h1 {
        font-size: clamp(36px, 10.5vw, 52px);
        letter-spacing: -0.03em;
    }

    .punch-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .punch-cell {
        border-radius: 10px;
        padding: 14px 4px 12px;
    }

    .punch-cell strong {
        margin-top: 7px;
    }
}

/* Integration flow strip: systems → regnskabet */
.flow-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 18px;
}

.flow-strip .logo-pills {
    gap: 10px;
}

.flow-arrow {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--muted);
}

.flow-end {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    color: var(--ink);
    padding: 14px 22px;
    border: 1.5px dotted rgba(20, 20, 18, 0.4);
    border-radius: 99px;
}

/* ================================================================
   /revisorerklaeringer/ — THE DOSSIER (centered, formal)
   Centered axis + five document spines in one row.
   ================================================================ */

.dossier-hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: 190px var(--pad-x) 72px;
    text-align: center;
}

.dossier-hero h1 {
    margin: 22px 0 0;
    font-size: clamp(36px, 5.2vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 500;
    text-wrap: balance;
    hyphens: manual;
    overflow-wrap: break-word;
    max-width: 100%;
}

.dossier-hero .ph-lede {
    margin-left: auto;
    margin-right: auto;
}

.dossier-hero .page-rule {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.dossier-hero .ph-actions {
    justify-content: center;
}

.spine-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 26px 16px;
    align-items: start;
    max-width: 1720px;
    margin: 0 auto;
    padding: 40px var(--pad-x) 44px;
}

/* Hanging files, not UI cards: a folder tab carries the numeral, the
   sheet has document corners, and a second sheet shows beneath. The
   files hang at different depths — pulled from the drawer, not laid on
   a grid — and their heights run with their content. */
.spine {
    position: relative;
    background: #FFFFFF;
    border-radius: 0 10px 10px 10px;
    border: 1px solid rgba(20, 20, 18, 0.1);
    padding: 20px 20px 24px;
    display: flex;
    flex-direction: column;
}

.spine-row .spine:nth-child(2) { margin-top: 34px; }
.spine-row .spine:nth-child(3) { margin-top: 10px; }
.spine-row .spine:nth-child(4) { margin-top: 46px; }
.spine-row .spine:nth-child(5) { margin-top: 20px; }

.spine::before {
    content: '';
    position: absolute;
    top: -13px;
    left: -1px;
    width: 46%;
    min-width: 74px;
    height: 15px;
    background: #FFFFFF;
    border: 1px solid rgba(20, 20, 18, 0.1);
    border-bottom: 0;
    border-radius: 7px 9px 0 0;
}

.spine::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -11px;
    height: 18px;
    background: #E7E5DC;
    border-radius: 0 0 10px 10px;
    z-index: -1;
}

.spine > i {
    position: absolute;
    top: -11px;
    left: 13px;
    font-style: normal;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    color: var(--muted);
}

.spine h3 {
    margin: 6px 0 0;
    font-size: 18.5px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.spine p {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}

.spine .spine-rule {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1.5px dotted rgba(20, 20, 18, 0.25);
}

@media (max-width: 1180px) {
    .spine-row {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 30px 16px;
    }

    /* Wrapped rows: the drawer stagger only works on one shelf */
    .spine-row .spine:nth-child(n) {
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    .dossier-hero {
        padding-top: 136px;
        padding-bottom: 48px;
    }

    .dossier-hero h1 {
        font-size: clamp(32px, 9.6vw, 48px);
        letter-spacing: -0.03em;
    }

    .spine .spine-rule {
        padding-top: 14px;
        margin-top: 16px;
    }
}

/* ================================================================
   /faglige-artikler/ — THE LIBRARY  (session-13)

   MATERIALS are the front page's, on the owner's instruction ("the main
   page is the well designed page, we should follow those design rules a
   bit more"), after two rebuilds were rejected: white cards edged with a
   hairline ("exactly the AI look we don't want") and then the bone ground
   itself ("ugly brown yellow").

     .sec-head    the giant display word beside a keyword <h2>
     .serve-card  a card is a TINTED PANEL — a .ground-* gradient under a
                  .veil, white type, 20px radius, lifting 4px on hover.
                  Never a white box on a tinted ground.
     .mono-badge  the glass pill pinned to a serve card
     ground rhythm  white -> tinted panels -> white index -> amber close

   GEOMETRY is dinero.dk/blog's, measured at 1440px on 2026-08-29:

     content gutter        48px          (ours stays --pad-x, site law)
     grid                  4 columns, 300px each, 48px gaps, 348 pitch
     category cards        4 across, one column each, 96px tall, r=12px
     filter sidebar        column 1, 300px; rows 40px, active row 44px r=6px
     article cards         columns 2-4, 300px, content-height ragged rows
     H1 measure            656px ~= two columns plus a gap

   Everything below sits on that one four-column grid, scaled to the 1720px
   editorial frame — the panel row, the sidebar and the article grid all
   resolve to the same column width at every viewport. Their pagination is
   deliberately not copied: it exists because they have 378 articles.
   ================================================================ */

body.v14-white {
    background: #FFFFFF;
}

/* One shared frame so the head and the body measure their columns from the
   same box. */
.ah-head,
.ah-body,
.ah-sec .sec-head {
    max-width: 1720px;
    margin: 0 auto;
}

.ah-head {
    padding: 168px var(--pad-x) 0;
}

/* Dinero's H1 measures two columns plus a gap; ours does the same, in this
   system's display type rather than theirs. */
.ah-head h1 {
    margin: 20px 0 0;
    font-size: clamp(38px, 5.4vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 500;
    max-width: 20ch;
    text-wrap: balance;
}

.ah-head .ph-lede {
    max-width: 640px;
}

/* ---------- the panel row (their category cards) ----------
   Four across on the shared 48px gutter, so each panel is exactly one
   column of the same grid the article cards use. Eight panels land as two
   whole rows. The card itself is the front page's serve-card. */
/* ---------- the section marker ----------
   The front page's signature move, kept as a marker rather than a band. Since
   the category row was removed it is also the only thing between the head and
   the index, so it carries the whole transition. */
.ah-sec .sec-head {
    padding: 76px var(--pad-x) 34px;
}

/* ---------- the four-column body ----------
   The sidebar takes column 1 and the results take 2-4; the inner grid then
   splits that span into three columns at the same 48px gap, which resolves
   to exactly the same column width. This is what makes the article cards
   line up with the panels above them. */
.ah-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 48px;
    padding: 0 var(--pad-x) 120px;
    scroll-margin-top: 96px;
}

.ah-rail {
    grid-column: 1;
    position: sticky;
    top: 104px;
}

.ah-results {
    grid-column: 2 / -1;
}

.ah-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
}

/* ---------- the sidebar ---------- */

/* An underlined field, not a box: on white there is nothing for a pill to
   sit on, and drawing one would put back the container this page removed. */
.ah-search {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(20, 20, 18, 0.22);
    transition: border-color 0.2s ease;
}

.ah-search:focus-within {
    border-bottom-color: var(--ink);
}

.ah-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    -webkit-appearance: none;
    appearance: none;
}

.ah-search input::placeholder {
    color: var(--faint);
}

.ah-search input:focus {
    outline: none;
}

/* Kept in the markup for the no-JavaScript path: with the script blocked
   this button is how the search is submitted, so it never hides. */
/* Sans, sentence case. "SØG" in tracked mono caps was the last of the
   ornamental-label device on this page, and a button is not a fact. */
.ah-search-go {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.ah-search-go:active {
    transform: scale(0.94);
}

.ah-sidelist {
    display: flex;
    flex-direction: column;
    margin-top: 22px;
}

/* Their sidebar row is 40px on a 6px radius, and the active one is a filled
   44px pill. Same shape, in ink. */
.ah-side {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.ah-side.is-on {
    background: var(--ink);
    color: #FFFFFF;
}

@media (hover: hover) and (pointer: fine) {
    .ah-side:hover {
        color: var(--ink);
        background: rgba(20, 20, 18, 0.045);
    }

    .ah-side.is-on:hover {
        background: var(--ink);
        color: #FFFFFF;
    }

    .ah-search-go:hover {
        color: var(--ink);
    }
}

.ah-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The count keeps its job — it is the one number on the page that changes,
   and the script rewrites it on every filter and keystroke — but not the
   tracked-mono-caps dress. Sans, so the hub carries none of that device. */
.ah-count {
    margin: 0 0 20px;
    font-size: 14.5px;
    color: var(--faint);
}

.ah-empty {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
}

.ah-empty a {
    color: var(--ink);
    text-underline-offset: 3px;
}

/* ---------- the article entry ----------
   dinero.dk/blog, measured at 1440px on 2026-08-29: 16:9 cover, a pill inset
   16px from its bottom-right, 24px cover to title, title 20px/700 on a 24px
   line, description 16px on 24px, 48px grid gap, no rule and no border
   anywhere. Two deliberate departures: the radius is 20px, not their 16, and
   the face is Geist, not their Lexend — both are site law, set by the panel
   row directly above this grid.

   The cover is the answer to the question this page kept getting wrong. An
   entry needs something that makes it a unit. The first version used a mono
   topic label and an index numeral for that job, and the source comment said
   so outright — "the job the image was doing". Removing them without putting
   an image back left text floating on white. */
.ac[hidden] {
    display: none;
}

.ac {
    display: flex;
    flex-direction: column;
    border: 0;
    background: none;
    color: var(--ink);
    text-decoration: none;
}

.ac-cover {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 16 / 9;
    padding: 18px 20px;
    border-radius: 20px;
    overflow: hidden;
    background: #E9E9E4;
}

.ac-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Only drawn on the tinted-ground fallback, where the plate carries no art of
   its own and would otherwise say nothing. */
.ac-cover-topic {
    position: relative;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.008em;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.ac-title {
    display: -webkit-box;
    margin: 24px 0 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.022em;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ac-desc {
    display: -webkit-box;
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--muted);
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* dinero lifts the whole wrapper 4px on `top`, not a transform, and changes
   only the title colour. The lift reads because nothing else moves. */
@media (hover: hover) and (pointer: fine) {
    .ac {
        position: relative;
        top: 0;
        transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ac:hover {
        top: -4px;
    }

    .ac:hover .ac-title {
        opacity: 0.62;
    }
}

.ac:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}

/* Below 1180 the four-column grid can no longer hold a sidebar plus three
   readable columns, so the article area drops to two. */
@media (max-width: 1180px) {
    .ah-body {
        gap: 36px;
    }

    .ah-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
    }
}

/* The sidebar stops being a column before the grid is down to one: it becomes
   a band under the marker, the field on its own line and the topics as one
   horizontally scrolling strip. Stacked, eight rows cost most of a phone
   screen before the first article — the same "no way in" the old wall had in
   different furniture, and the reason dinero.dk/blog collapses its own
   categories behind a "Vis kategorier" disclosure at 390px. */
@media (max-width: 980px) {
    .ah-body {
        display: block;
        padding-top: 0;
    }

    .ah-rail {
        position: static;
        margin-bottom: 36px;
    }

    .ah-search {
        max-width: 420px;
    }

    .ah-sidelist {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 18px calc(var(--pad-x) * -1) 0;
        padding: 0 var(--pad-x) 2px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ah-sidelist::-webkit-scrollbar {
        display: none;
    }

    .ah-side {
        flex: none;
        scroll-snap-align: start;
        gap: 9px;
        white-space: nowrap;
        background: rgba(20, 20, 18, 0.045);
    }
}

@media (max-width: 720px) {
    .ah-head {
        padding-top: 128px;
    }

    .ah-sec .sec-head {
        padding: 56px var(--pad-x) 26px;
    }

    .ah-body {
        padding-bottom: 88px;
    }

    .ah-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ah-search-go {
        transition: none;
    }

    .ah-search-go:active {
        transform: none;
    }
}

/* ================================================================
   /handelsbetingelser/ — THE CONTRACT
   One paper legal document on bone; prose lives ON the sheet.
   ================================================================ */

.contract-frame {
    max-width: 1120px;
    margin: 0 auto;
    padding: 150px var(--pad-x) 110px;
}

.contract-sheet {
    background: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(20, 20, 18, 0.1);
    padding: clamp(28px, 6vw, 88px);
}

.contract-sheet h1 {
    margin: 18px 0 0;
    font-size: clamp(28px, 3.6vw, 54px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 500;
    max-width: 22ch;
}

.contract-sheet .prose {
    max-width: 68ch;
}

.contract-toc {
    margin: 36px 0 48px;
    padding: 24px 0 8px;
    border-top: 1px solid rgba(20, 20, 18, 0.12);
}

.contract-foot {
    display: flex;
    gap: 26px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(20, 20, 18, 0.12);
}

.contract-foot a {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.contract-foot a:hover {
    color: var(--ink);
}

@media (max-width: 720px) {
    .contract-frame {
        padding-top: 110px;
    }
}

/* ================================================================
   /revisor-priser/ — THE PRICE LIST (continuous ink)
   The page opens ON ink (the photo hero left in the finish review —
   the photograph belongs to /om-revisorpro/ alone) and never leaves.
   ================================================================ */

.price-open {
    max-width: 1720px;
    margin: 0 auto;
    padding: 190px var(--pad-x) 8px;
}

.page-rule.on-ink {
    color: var(--bone);
}

.page-rule.on-ink .rule {
    background: rgba(242, 241, 236, 0.7);
}

.price-open h1 {
    margin: 44px 0 0;
    font-size: clamp(40px, 6vw, 100px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 500;
    color: var(--bone);
    max-width: 18ch;
    text-wrap: balance;
}

.price-open h1 .h1-quiet {
    display: block;
    font-size: 16.5px;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--dark-muted);
    margin: 0 0 16px;
    max-width: 560px;
}

.price-open .dl-lede {
    margin-top: 24px;
}

@media (max-width: 720px) {
    .price-open {
        padding-top: 136px;
    }

    .price-open h1 {
        font-size: clamp(34px, 9.8vw, 48px);
        letter-spacing: -0.03em;
    }
}

/* Quiet section heads on the dark band (the display-word register stays
   with Prisen alone on this page) */
.sec-quiet.dark .lede-big {
    color: var(--bone);
}

.sec-quiet.dark .lede-sub {
    color: var(--dark-muted);
}

.band-dark .included .sec-quiet.dark {
    padding-left: 0;
    padding-right: 0;
}

.qa-list.dark .qa-row {
    border-bottom-color: rgba(242, 241, 236, 0.16);
}

.qa-list.dark .qa-row summary {
    color: var(--bone);
}

.qa-list.dark .qa-row summary .fi-lead {
    border-bottom-color: rgba(242, 241, 236, 0.3);
}

.qa-list.dark .qa-row summary em {
    color: var(--dark-muted);
}

.qa-list.dark .qa-a {
    color: var(--dark-muted);
}

.qa-list.dark .qa-a a {
    color: var(--bone);
}

.band-dark .art-link {
    color: var(--dark-muted);
}

.band-dark .art-link a {
    color: var(--bone);
}

.band-dark .quotes-frame {
    padding-bottom: 24px;
}

.band-dark .quotes-media {
    background: rgba(255, 255, 255, 0.04);
}

.band-dark .contact-frame {
    padding-bottom: 110px;
}

/* ================================================================
   /om-revisorpro/ — THE PORTRAIT (editorial bone)
   Between photographs, pure editorial columns — no slabs.
   ================================================================ */

.edit-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 64px;
    max-width: 1180px;
}

.edit-cols p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: #33332E;
}

.address-strip {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1720px;
    margin: 0 auto;
    padding: 20px var(--pad-x) 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.statement.on-bone {
    width: auto;
    max-width: 860px;
    box-shadow: none;
    border: 1px solid rgba(20, 20, 18, 0.1);
}

@media (max-width: 860px) {
    .edit-cols {
        grid-template-columns: 1fr;
    }
}

/* ---------- "Lyt til artiklen" — the article audio pill ----------

   Comp: a light pill on the bone ground, near-black disc at the left, label
   and length either side of a hairline. Two states, because the reader is
   asking two different questions: idle asks "how long is this?", playing asks
   "how far in am I?" — so the label slot becomes the speed selector and the
   length becomes the elapsed time. Same three slots either way; nothing is
   added on play.

   ONE DEVIATION FROM THE COMP, deliberate. The comp puts a light pill on the
   bone ground; articles stand on WHITE (`v14-white`, is_singular('post'),
   owner call 2026-08-30), where a near-white pill has nothing to sit against.
   The fill inverts to bone so the contrast relationship the comp draws
   survives the ground it actually lands on.

   The progress line is not in the comp and is the one addition: at eleven
   minutes a reader who gets interrupted otherwise starts the article again.
   It rides the pill's existing bottom edge rather than adding a fourth
   element to the row, and it is a real <input type="range"> — dragging,
   arrow-key seek and screen-reader support come from the platform. */
.artikel-lyd {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin: 28px 0 0;
    /* Bottom padding is deeper than the top on purpose: it is the gutter the
       progress line lives in. Without it the line crosses the play disc. */
    padding: 11px 26px 21px 11px;
    background: var(--bone);
    border-radius: 999px;
    overflow: hidden;
}

.artikel-lyd-toggle {
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    color: #FFFFFF;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .artikel-lyd-toggle:hover {
        transform: scale(1.05);
    }
}

.artikel-lyd-toggle svg {
    display: block;
    width: 15px;
    height: 15px;
}

/* One <svg> per state, swapped by the playing class — no icon-font, no
   re-render, and the pause glyph is already in the DOM when it is needed. */
.artikel-lyd .icon-pause,
.artikel-lyd.is-playing .icon-play {
    display: none;
}

.artikel-lyd.is-playing .icon-pause {
    display: block;
}

/* The middle slot holds either the label or the speed row. It carries a
   min-width so the pill does not resize the moment the reader presses play —
   the comp draws the playing state narrower, but a control that jumps under
   the cursor is worse than a few px of air. */
.artikel-lyd-mid {
    /* Sized to the WIDER of the two states, not to a round number. The label
       and the speed row measure within a few px of each other, so 136px holds
       both with a little slack and the pill never resizes mid-play. Measured,
       not guessed: the label runs 90px and the speed row 105px, so 112px is
       the widest state plus a little air. 168px was the first guess and left
       46px of dead space before the hairline. */
    min-width: 112px;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.artikel-lyd.is-playing .artikel-lyd-label,
.artikel-lyd-speeds {
    display: none;
}

.artikel-lyd.is-playing .artikel-lyd-speeds {
    display: flex;
    gap: 14px;
}

.artikel-lyd-speeds button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--faint);
    cursor: pointer;
    transition: color 0.2s ease;
}

.artikel-lyd-speeds button[aria-pressed="true"] {
    color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
    .artikel-lyd-speeds button:hover {
        color: var(--ink);
    }
}

/* Mono for the clock. A duration is a measurement, which is what the mono is
   for on this site, and tabular digits stop the pill twitching as the seconds
   roll over. */
.artikel-lyd-time {
    flex: none;
    padding-left: 20px;
    border-left: 1px solid rgba(20, 20, 18, 0.14);
    font-family: var(--mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ---------- the progress line ----------
   Inset, not flush to the bottom edge. Flush was the first attempt and the
   line disappeared: on a 68px pill the corner radius is 34px, so at 1px from
   the bottom the shape is only ~15px wide and the curve ate the whole bar.
   Sitting it 7px up and 22px in puts it inside the pill's straight run, where
   it reads as an underline beneath the row rather than a clipped artifact. */
.artikel-lyd-seek {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 7px;
    height: 12px;
    margin: 0;
    padding: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.artikel-lyd-seek::-webkit-slider-runnable-track {
    height: 2px;
    background: linear-gradient(to right,
        var(--ink) 0 var(--played, 0%),
        rgba(20, 20, 18, 0.12) var(--played, 0%) 100%);
}

.artikel-lyd-seek::-moz-range-track {
    height: 2px;
    background: linear-gradient(to right,
        var(--ink) 0 var(--played, 0%),
        rgba(20, 20, 18, 0.12) var(--played, 0%) 100%);
}

/* The thumb is absent until the reader reaches for it: at rest the line is
   an indicator, on hover or focus it becomes a control. */
.artikel-lyd-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    margin-top: -4px;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.artikel-lyd-seek::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.artikel-lyd:hover .artikel-lyd-seek::-webkit-slider-thumb,
.artikel-lyd-seek:focus-visible::-webkit-slider-thumb {
    opacity: 1;
}

.artikel-lyd:hover .artikel-lyd-seek::-moz-range-thumb,
.artikel-lyd-seek:focus-visible::-moz-range-thumb {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .artikel-lyd-toggle,
    .artikel-lyd-seek::-webkit-slider-thumb {
        transition: none;
    }
}

/* At 390px the pill is the full column: the label slot gives up its
   min-width rather than pushing the clock off the edge. */
@media (max-width: 560px) {
    .artikel-lyd {
        display: flex;
        gap: 14px;
        padding-right: 20px;
    }

    .artikel-lyd-mid {
        min-width: 0;
        flex: 1;
        font-size: 15px;
    }

    .artikel-lyd-time {
        padding-left: 14px;
    }
}

/* ================================================================
   /udarbejdelse-af-lon/ — the payslip as paper on bone

   The document set beside its copy instead of centred on a second
   slate plate. Per DESIGN.md's shadow vocabulary, paper standing on
   bone is defined by a hairline and casts nothing — the edge defines,
   it must not draw.
   ================================================================ */

.payslip-block {
    max-width: 1720px;
    margin: 0 auto;
    padding: 0 var(--pad-x) 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 112px);
    align-items: start;
}

/* `.sec-display` gets its display scale from `.sec-head`; this block is not
   one, so it restates the ramp rather than inheriting body size. */
.payslip-say .sec-display {
    margin: 0;
    font-size: clamp(56px, 7vw, 104px);
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-weight: 500;
}

.payslip-say .lede-big {
    margin: 28px 0 0;
}

.payslip-say .lede-sub {
    max-width: 42ch;
}

.payslip-sheet {
    margin: 0;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
}

/* A document, not a panel: the sheet keeps a paper width and is not
   stretched to its column. Widening it turned the ticked bars into long
   dashes and cost the instrument its density. */
.payslip-sheet .receipt {
    width: min(460px, 100%);
    padding: 30px 32px 26px;
    border-radius: 22px;
    border: 1px solid rgba(20, 20, 18, 0.12);
    box-shadow: none;
}

.payslip-sheet .receipt-title {
    font-size: 15px;
}

.payslip-sheet .pay-row {
    margin-top: 16px;
    gap: 24px;
}

.payslip-sheet .pay-row .r-label {
    font-size: 14.5px;
}

.payslip-sheet .pay-row .r-bar {
    height: 12px;
    border-radius: 99px;
}

.payslip-sheet .pay-row.total {
    margin-top: 24px;
    padding-top: 22px;
}

.payslip-sheet .r-foot {
    margin-top: 24px;
}


@media (max-width: 1080px) {
    .payslip-block {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* ================================================================
   /udarbejdelse-af-lon/ — width, rhythm and the de-monoed chrome

   Three faults, all measured at 1440 against the running site:

   1. TRACKED-MONO-CAPS. The owner's banned device (HANDOFF-ARTIKLER.md
      §5, three logged rejections). 21 instances belonged to this page,
      twelve of them month abbreviations in one grid. De-monoed here and
      only here — `.mono-badge` and `.footer-head` are shared across
      templates and §5's scoping rule keeps them as they are.

   2. A NARROW LEFT COLUMN IN A WIDE FIELD. In 10 of 23 populated
      horizontal bands all content stopped before x=900 of 1440. The
      front page does that in 0 of 24. `.folder-index` was capped at
      42%/500px, `.statement` at 620px, `.quote-card` at 680px.

   3. COVERAGE. Section padding ran 120/64 and 96/40 with 100px tails —
      roughly 1,700px of the page was inter-section whitespace. Vertical
      -span coverage only moves when empty height is removed, so this is
      the lever that moves it; the width fix above does not.
   ================================================================ */

.page-template-page-udarbejdelse-af-lon .punch-head,
.page-template-page-udarbejdelse-af-lon .punch-cell em,
.page-template-page-udarbejdelse-af-lon .ph-note,
.page-template-page-udarbejdelse-af-lon .flow-end {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.page-template-page-udarbejdelse-af-lon .punch-head {
    font-size: 12.5px;
}

.page-template-page-udarbejdelse-af-lon .punch-cell em {
    font-size: 12px;
    color: rgba(242, 241, 236, 0.84);
}

.page-template-page-udarbejdelse-af-lon .punch-cell.done em {
    color: var(--muted);
}

.page-template-page-udarbejdelse-af-lon .ph-note {
    font-size: 13px;
}

.page-template-page-udarbejdelse-af-lon .flow-end {
    font-size: 13px;
    font-weight: 500;
}

/* ---------- rhythm: the gaps were the coverage ---------- */

.page-template-page-udarbejdelse-af-lon .sec-head {
    padding-top: 72px;
    padding-bottom: 40px;
}

.page-template-page-udarbejdelse-af-lon .sec-body,
.page-template-page-udarbejdelse-af-lon .quote-single {
    padding-bottom: 56px;
}

.page-template-page-udarbejdelse-af-lon .payslip-block {
    padding-bottom: 56px;
}

.page-template-page-udarbejdelse-af-lon .advisory-frame {
    padding-top: 16px;
}

/* ---------- width: the blocks stop hugging the left edge ---------- */

/* Six deliverables, two columns. Was 42%/500px and six vertical bands. */
.page-template-page-udarbejdelse-af-lon .folder-index {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(48px, 6vw, 112px);
}

.page-template-page-udarbejdelse-af-lon .folder-index.ruled .fi-row:nth-child(2) {
    border-top: 1px solid rgba(20, 20, 18, 0.25);
}

.size-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(32px, 4vw, 72px);
}

.size-col h3 {
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(20, 20, 18, 0.25);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.size-col p {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}

.page-template-page-udarbejdelse-af-lon .quote-card.light {
    max-width: none;
}

.page-template-page-udarbejdelse-af-lon .quote-card.light blockquote p {
    font-size: 21px;
    line-height: 1.5;
    max-width: 46ch;
}

/* Benefits sit beside the integration strip rather than under it. */
.page-template-page-udarbejdelse-af-lon .paper-list.roomy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px clamp(32px, 4vw, 72px);
    margin-top: 32px;
}

/* ---------- the mid-page ground ---------- */

.band-systems {
    max-width: none;
    background: linear-gradient(180deg, #1C1C1A 0%, #141412 100%);
    color: var(--bone);
}

.band-systems .sec-head,
.band-systems .sec-body {
    max-width: 1720px;
    margin: 0 auto;
}

.band-systems .sec-head {
    padding-top: 96px;
}

.band-systems .sec-body {
    padding-bottom: 96px;
}

.band-systems .sec-display,
.band-systems .lede-big {
    color: var(--bone);
}

.band-systems .lede-sub,
.band-systems .paper-list.roomy li {
    color: rgba(242, 241, 236, 0.82);
}

/* The pills are paper standing on a dark ground, so per DESIGN.md's shadow
   vocabulary they lift rather than sit on a hairline. */
.band-systems .logo-pills li {
    border-color: transparent;
    box-shadow: 0 12px 32px rgba(10, 10, 8, 0.4);
    /* The pills are white paper; without this they inherit the band's bone
       and render near-white on white. */
    color: var(--ink);
}

.band-systems .logo-pills li.plain {
    background: transparent;
    border-color: rgba(242, 241, 236, 0.32);
    color: rgba(242, 241, 236, 0.82);
    box-shadow: none;
}

.band-systems .flow-end {
    color: var(--bone);
    border-color: rgba(242, 241, 236, 0.32);
}

.band-systems .flow-arrow {
    color: rgba(242, 241, 236, 0.6);
}

@media (max-width: 980px) {
    .page-template-page-udarbejdelse-af-lon .folder-index,
    .size-cols,
    .page-template-page-udarbejdelse-af-lon .paper-list.roomy {
        grid-template-columns: 1fr;
    }

    .page-template-page-udarbejdelse-af-lon .folder-index.ruled .fi-row:nth-child(2) {
        border-top: 0;
    }
}

/* Second rhythm pass, measured not guessed: a gap census put 2,221px of the
   4,750px page in empty vertical runs. The two largest were not section
   padding at all — `.advisory` carries min-height:560px and `.contact`
   460px, forcing ~260px of empty inside each amber card. Height at low
   coverage is the defect, so the min-heights come down to what the content
   actually needs and the inter-section gaps close behind them. */

.page-template-page-udarbejdelse-af-lon .advisory {
    min-height: 0;
}

.page-template-page-udarbejdelse-af-lon .contact {
    min-height: 0;
    padding: 56px 32px;
}

.page-template-page-udarbejdelse-af-lon .advisory-frame {
    padding-bottom: 48px;
}

.page-template-page-udarbejdelse-af-lon .sec-head {
    padding-top: 56px;
    padding-bottom: 32px;
}

.page-template-page-udarbejdelse-af-lon .sec-body,
.page-template-page-udarbejdelse-af-lon .quote-single,
.page-template-page-udarbejdelse-af-lon .payslip-block {
    padding-bottom: 44px;
}

.band-systems .sec-head {
    padding-top: 64px;
}

.band-systems .sec-body {
    padding-bottom: 64px;
}

/* Two AA failures on this page's light quote card, both measured against a
   text-hidden background render: the gold stars sat at 2.92 and the mono
   attribution at 3.43 on white. Scoped, because `.stars` and `.quote-card
   figcaption` are shared across templates where they sit on dark grounds
   and already pass (HANDOFF-ARTIKLER.md §5 scoping rule). */

.page-template-page-udarbejdelse-af-lon .quote-card.light .stars {
    color: #9A6B12;
}

.page-template-page-udarbejdelse-af-lon .quote-card.light figcaption {
    font-family: inherit;
    font-size: 13px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
}

/* The benefits row was three columns inside a flex column that had already
   collapsed to its content width, so it used 40% of the field. */
.page-template-page-udarbejdelse-af-lon .flow-strip,
.page-template-page-udarbejdelse-af-lon .paper-list.roomy {
    width: 100%;
}

.page-template-page-udarbejdelse-af-lon .quote-card.light blockquote p {
    max-width: 62ch;
}

/* ================================================================
   /udarbejdelse-af-lon/ — boundary repair and the single close

   The previous pass chased a coverage ratio and cut padding until
   objects sat flush against the things above them. Measured at 1440:
   the hero ended at y=776 and the white payslip sheet began at y=776;
   the review badge ended at y=2797 and the quote card began at y=2797.
   Zero gap in both cases — a white card welded to a dark band reads as
   a rendering fault, not a composition. Coverage is not worth that.
   ================================================================ */

.page-template-page-udarbejdelse-af-lon .payslip-block {
    padding-top: 104px;
}

.page-template-page-udarbejdelse-af-lon .quote-single .mono-badge {
    display: inline-block;
    margin-bottom: 28px;
}

.page-template-page-udarbejdelse-af-lon .quote-single .quote-card {
    margin-top: 0;
}

/* ---------- the single amber close ---------- */

.close-frame {
    max-width: 1720px;
    margin: 0 auto;
    padding: 24px var(--pad-x) 0;
}

.close-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px clamp(48px, 6vw, 120px);
    align-items: center;
    padding: 88px clamp(40px, 5vw, 88px);
}

.close-say h3 {
    margin: 22px 0 0;
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 16ch;
}

.close-say p {
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.84);
    max-width: 44ch;
}

.close-act {
    justify-self: end;
    text-align: right;
}

.close-act .contact-number {
    display: block;
    font-size: clamp(40px, 4.6vw, 72px);
    line-height: 1;
    letter-spacing: -0.035em;
    font-weight: 500;
    color: #FFFFFF;
}

.close-act .contact-kicker {
    margin: 22px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.84);
    max-width: 38ch;
    margin-left: auto;
}

.close-act .btn-solid {
    margin-top: 30px;
}

@media (max-width: 980px) {
    .close-card {
        grid-template-columns: 1fr;
        padding: 64px 32px;
    }

    .close-act {
        justify-self: start;
        text-align: left;
    }

    .close-act .contact-kicker {
        margin-left: 0;
    }
}

/* `.veil` is position:absolute inset:0, and the old `.advisory-inner` cleared
   it with position:relative. The merged card's two columns did not, so the
   veil painted over them — the heading rendered dark on amber and the white
   pill came out tan. Both are stacking, not colour. */
.close-say,
.close-act {
    position: relative;
    z-index: 1;
}

.close-say h3 {
    color: #FFFFFF;
}

/* The quote H2 had no lede under it, so grid stretch floated it at the
   vertical centre of a 96px display word. Heads align to the top. */
.page-template-page-udarbejdelse-af-lon .sec-head {
    align-items: start;
}

/* The card ran the full 1,384px with its text stopping at 62ch, leaving the
   right half of a white sheet empty. The attribution moves there. */
.page-template-page-udarbejdelse-af-lon .quote-card.light {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    /* row gap and column gap are not the same problem: one value put 96px
       between the stars and the quote they belong to. */
    gap: 14px clamp(40px, 5vw, 96px);
    padding: 40px 48px;
}

.page-template-page-udarbejdelse-af-lon .quote-card.light .stars {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
}

.page-template-page-udarbejdelse-af-lon .quote-card.light blockquote {
    grid-column: 1;
    grid-row: 2;
    margin: 16px 0 0;
}

.page-template-page-udarbejdelse-af-lon .quote-card.light blockquote p {
    margin: 0;
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.4;
    letter-spacing: -0.02em;
    max-width: 30ch;
}

.page-template-page-udarbejdelse-af-lon .quote-card.light figcaption {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    padding-top: 0;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .page-template-page-udarbejdelse-af-lon .quote-card.light {
        grid-template-columns: 1fr;
        padding: 32px 28px;
    }

    .page-template-page-udarbejdelse-af-lon .quote-card.light figcaption {
        grid-column: 1;
        grid-row: 3;
        margin-top: 20px;
    }
}

/* ================================================================
   /udarbejdelse-af-lon/ — red-team batch, all measured at 1440/768/390

   1. THE H1 COLLIDED WITH ITSELF. line-height 0.94 on 80.64px gave line
      boxes 105px tall stacked 76px apart: 29px of overlap at 1440, 15px
      at 390. The Å of MÅNED rose into the T of TIDEN and the hero read
      "LØN TIL ŢIDEN". Danish display copy will keep hitting this — Å, Ø
      and Æ ascend past cap height and 0.94 leaves them nowhere to go.
   2. HIERARCHY INVERSION. .sec-display rendered 100.8px against an H1 of
      80.64px, and 56 vs 40.95 at 390 — the section labels outranked the
      page's own headline, worse as the screen shrank.
   3. THE PAYSLIP NEVER REACHED ITS WIDTH. width:min(460px,100%) computed
      290px at every breakpoint: .payslip-sheet is justify-self:start and
      therefore shrink-to-fit, so the 100% resolved against the content.
      The sheet takes the width now and the receipt fills it.
   ================================================================ */

.punch-copy h1 {
    /* 1.02 still let the Å ring land on the T above it. Å/Ø/Æ ascend past
       cap height, and line 1 ends in a descending comma, so the clearance
       has to cover both. Measured clean at 1.14. */
    line-height: 1.14;
}

.page-template-page-udarbejdelse-af-lon .sec-display {
    font-size: clamp(38px, 4.2vw, 68px);
}

.page-template-page-udarbejdelse-af-lon .payslip-sheet {
    width: min(460px, 100%);
}

.page-template-page-udarbejdelse-af-lon .payslip-sheet .receipt {
    width: 100%;
}

/* A head with no display word: the h2 leads the left column so the section
   still uses the field, and it does not read as a fifth copy of the same
   object. */
.page-template-page-udarbejdelse-af-lon .sec-head.head-lede {
    grid-template-columns: 1fr 1fr;
}

.page-template-page-udarbejdelse-af-lon .head-lede .sec-lede {
    padding-top: 0;
    display: contents;
}

.page-template-page-udarbejdelse-af-lon .head-lede .lede-big {
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    max-width: 15ch;
}

.page-template-page-udarbejdelse-af-lon .head-lede .lede-sub {
    align-self: end;
    max-width: 46ch;
}

/* The attribution carries the review's source now that the mono pill is gone. */
.page-template-page-udarbejdelse-af-lon .quote-card.light figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

.q-source {
    /* --faint (#8B8B84) measured 3.43 on the white card; --muted clears AA. */
    color: var(--muted);
}

/* Stars are drawn, not typed. */
.page-template-page-udarbejdelse-af-lon .quote-card.light .stars {
    display: block;
    line-height: 0;
    letter-spacing: normal;
}

/* The benefits list used 42% of the band it sits in (a 577px max-width
   inside 1384px), setting each caption to a ~21ch ragged shard. */
.page-template-page-udarbejdelse-af-lon .paper-list.roomy {
    max-width: none;
}

/* DESIGN.md's Soft-And-Wide Rule caps shadow opacity at 0.35; this was 0.40. */
.band-systems .logo-pills li {
    box-shadow: 0 12px 32px rgba(10, 10, 8, 0.35);
}

/* Press feedback existed in the hero and nowhere else — including on the
   page's final CTA. */
.close-act .btn-solid {
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.close-act .btn-solid:active {
    transform: scale(0.97);
}

/* The number is the dominant mark; it should sit with the headline it
   answers, not float above a column it has nothing to do with. */
.close-card {
    align-items: start;
}

.close-act .contact-kicker {
    text-wrap: balance;
}

/* Below ~900px the flow strip wrapped so the arrow pointed into empty ink
   and "Regnskabet" dropped to the far left, reading as a fourth system. */
@media (max-width: 900px) {
    .page-template-page-udarbejdelse-af-lon .flow-arrow {
        display: none;
    }

    .page-template-page-udarbejdelse-af-lon .flow-end {
        margin-top: 4px;
    }
}

/* Final pass, measured: three blocks still not using the field they sit in.

   - `.sec-body > .folder-index.light` caps at 900px (page.css:563) and its
     specificity beat the earlier scoped override, so the six deliverables
     used 900 of 1,384px.
   - `.payslip-sheet` is justify-self:start at the head of a 1fr column, so
     the 460px sheet ended at x=1223 and left 189px of dead bone against the
     right margin. It aligns to the margin instead.
   - The quote ran a 537px text column inside a 1,384px white card. The
     testimonial is the only content in that band; it should carry it. */

.page-template-page-udarbejdelse-af-lon .sec-body > .folder-index.light {
    max-width: none;
}

.page-template-page-udarbejdelse-af-lon .payslip-sheet {
    justify-self: end;
}

.page-template-page-udarbejdelse-af-lon .quote-card.light blockquote p {
    font-size: clamp(24px, 2.5vw, 35px);
    line-height: 1.32;
    letter-spacing: -0.025em;
    max-width: 24ch;
}

/* 22ch at 35px is the right measure for the quote; the wrong thing was the
   card, not the text. A 1,384px white slab 60% air reads worse than a
   bounded object that is full — and the section head above already spends
   the full field, so the band does not go narrow. */
.page-template-page-udarbejdelse-af-lon .quote-card.light {
    max-width: 760px;
    grid-template-columns: 1fr;
}

/* The attribution belonged under the quote it attributes, not 600px away
   diagonally across empty white. */
.page-template-page-udarbejdelse-af-lon .quote-card.light figcaption {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
    margin-top: 22px;
}

/* ================================================================
   /bogforing/ — width, ground and the single close

   Three faults, all measured at 1440 against the running site before
   this pass:

   1. THE PAGE RAN ONE GROUND. Pixel-sampled at x=8, bone from y=58 to
      y=5090 — 99% of the page, unbroken. Nothing on it was full-bleed;
      every amber and ink band in the render was an inset card. The
      Ground Rhythm Rule (DESIGN.md:289) wants the grounds planned
      before the sections, so the register moves onto a full-bleed ink
      band at the page's midpoint.

   2. A NARROW LEFT COLUMN IN A WIDE FIELD. 10 of 25 populated
      horizontal bands stopped before x=900 of 1440; the front page
      does that in 0 of 24. Three `.sec-quiet` heads at 720px, the
      kartotek at 860px, the accordion at 900px, and the logo pills
      stranded in a body block of their own.

   3. TWO AMBER BLOCKS ASKING FOR THE SAME CALL. `.advisory` carried
      `min-height: 560px` (480 in its `.solo` variant) and `.contact`
      460px, so each forced roughly 260px of empty inside itself, and
      `.advisory.solo` centres its content — which is why the card's
      whole left half was blank.
   ================================================================ */

/* ---------- de-monoed chrome ----------
   Tracked mono caps as page chrome is the owner's banned device. Nine
   of this page's eighteen were its own; the rest are the shared
   footer. `.mono-badge` ×2, `.list-title`, `.receipt-dots` and the
   `⋯` glyph were cut in the template; these four are the ones that
   keep their words and change register. Scoped, because every one of
   them is shared with a template that is not this page
   (HANDOFF-ARTIKLER.md §5). */

.page-template-page-bogforing .ph-note,
.page-template-page-bogforing .q-source {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.page-template-page-bogforing .ph-note {
    font-size: 13px;
}

/* ---------- rhythm ---------- */

.page-template-page-bogforing .sec-head {
    /* The quote and FAQ heads have no display word, so grid stretch
       would float them against the tallest cell in their row. */
    align-items: start;
    padding-top: 76px;
    padding-bottom: 36px;
}

.page-template-page-bogforing .sec-body {
    padding-bottom: 60px;
}

/* The section label outranked the page's own headline: `.sec-display`
   computed 100.8px against an H1 of 77.8px at 1440, and the gap widened
   as the screen shrank. */
.page-template-page-bogforing .sec-display {
    font-size: clamp(38px, 4.2vw, 68px);
}

/* ---------- heads that lead with the h2 ----------
   `.sec-head` is a 1fr/1.2fr grid whose first column belongs to the
   display word. With no display word the lede lands in that column and
   the head uses 45% of the field. Four of this page's five heads had
   that shape. The h2 takes the left column and its lede the right, so a
   head with no display word still spans the width — and the page stops
   rendering five copies of one section object.

   Deliberately a scoped copy of the /udarbejdelse-af-lon/ rules rather
   than a hoist: identical values, but hoisting would silently re-render
   an approved page from this one's stylesheet. */
.page-template-page-bogforing .sec-head.head-lede {
    grid-template-columns: 1fr 1fr;
}

.page-template-page-bogforing .head-lede .sec-lede {
    padding-top: 0;
    display: contents;
}

.page-template-page-bogforing .head-lede .lede-big {
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    max-width: 15ch;
}

.page-template-page-bogforing .head-lede .lede-sub {
    align-self: end;
    max-width: 48ch;
}

/* The four pills were alone in a `.sec-body` 200px below the head that
   introduces them. They belong to that head's section now, so the tail
   closes. */
.page-template-page-bogforing .sec-head.head-lede + .sec-body {
    padding-top: 8px;
}

/* ---------- the mid-page ground: the register on ink ---------- */

.band-register {
    position: relative;
    max-width: none;
    color: var(--bone);
}

.band-register .sec-head,
.band-register .sec-body {
    max-width: 1720px;
    margin: 0 auto;
}

.page-template-page-bogforing .band-register .sec-head {
    padding-top: 92px;
    padding-bottom: 40px;
}

.page-template-page-bogforing .band-register .sec-body {
    padding-bottom: 92px;
}

.band-register .lede-big {
    color: var(--bone);
}

.band-register .lede-sub {
    color: rgba(242, 241, 236, 0.82);
}

/* Four panels on the ink, not four hairline entries on a white sheet.
   The sheet was the second big white rectangle on the page and its four
   rows were opened by four more rules; every reference that repeats an
   item gives it a panel or an artefact (Deel, GitBook, Whoop, Affinity)
   and none gives it a divider. DESIGN.md's own ruling on repeating units
   (owner, 2026-08-29) names the tinted panel as the alternative to paper,
   which is exactly this. */
.register-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.4vw, 22px);
    margin-top: 8px;
}

.reg-entry {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: clamp(30px, 2.6vw, 42px) clamp(20px, 1.8vw, 26px) clamp(20px, 1.8vw, 26px);
    border-radius: 14px;
    background: rgba(242, 241, 236, 0.06);
    border: 1px solid rgba(242, 241, 236, 0.14);
}

.register-grid .st-name {
    color: var(--bone);
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.register-grid .st-desc {
    max-width: none;
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(242, 241, 236, 0.72);
}

/* ---------- the month's three lines, rehoused ----------
   They were three sentences under three hairlines in the hero — the one
   pattern that appears nowhere in the reference set. Down here they sit
   under copy that explains them, which is what they never had upstairs. */
.rytme-panels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px clamp(40px, 5vw, 96px);
}

.rytme-panels li {
    font-size: clamp(19px, 1.9vw, 27px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.025em;
    max-width: 18ch;
}

.rytme-note {
    margin: 48px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 62ch;
}

@media (max-width: 1080px) {
    .register-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .rytme-panels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .register-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- the review: a rule, not a card ----------
   DESIGN.md's own alternative to paper — "a plain typographic entry
   opened by a hairline rule". It keeps this page's tail from repeating
   /udarbejdelse-af-lon/'s white quote card, and it carries its own h2
   in the rule's left column so the section needs no head band at all. */

.quote-rule {
    margin-top: 84px;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 28px clamp(48px, 6vw, 112px);
    padding-top: 8px;
}

.quote-rule .lede-big {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    max-width: 13ch;
}

.qr-say {
    grid-column: 2;
    grid-row: 1;
}

/* The five drawn stars. `.stars`' own gold measured 2.92 on bone;
   #9A6B12 clears AA. */
.qr-stars {
    display: block;
    color: #9A6B12;
}

.quote-rule blockquote {
    margin: 22px 0 0;
}

.quote-rule blockquote p {
    margin: 0;
    font-size: clamp(21px, 2.1vw, 29px);
    line-height: 1.4;
    letter-spacing: -0.02em;
    max-width: 34ch;
}

/* The pill that read GOOGLE-ANMELDELSER · FREMRAGENDE is gone; its
   words carry on here, in the sans, beside the name they belong to. */
.quote-rule figcaption {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}

.quote-rule .q-source {
    font-weight: 400;
    color: var(--muted);
}

/* ---------- the questions ----------
   Two rows in a 900px column left three quarters of the band empty and
   cost a whole section head to introduce them. */

.qa-block {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 28px clamp(48px, 6vw, 112px);
    align-items: start;
    padding-top: 76px;
}

.qa-block .lede-big {
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    max-width: 16ch;
}

.qa-block .qa-list {
    max-width: none;
}

.qa-block .qa-row .qa-a {
    max-width: 62ch;
}

/* ---------- the single amber close ----------
   `.close-frame` / `.close-card` are the merged-close component the
   same fault produced on /udarbejdelse-af-lon/; the two-amber pattern
   is on all six service pages and this is its fix. Shared component,
   not a copied skeleton — the pages differ at the opening, which is
   what the One Skeleton Per Page Rule is about. */

.page-template-page-bogforing .close-frame {
    padding-top: 40px;
}

/* Below ~860 the register's three columns crush the descriptor into a
   ~140px gutter — five lines for a six-word sentence. It stacks, and the
   leader goes with the column it was leading across. */
@media (max-width: 1080px) {
    .register-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .register-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .reg-entry {
        padding: 16px 0 0;
    }
}

/* `.sec-head` stacks at 1080 (home.css:1963) but the scoped `.head-lede`
   override is three classes deep and beat it at every width — at 390 the h2
   was wrapping inside a 150px column. */
@media (max-width: 1080px) {
    .page-template-page-bogforing .sec-head.head-lede {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .qa-block,
    .quote-rule {
        grid-template-columns: 1fr;
    }

    .quote-rule .lede-big {
        grid-row: 1;
        max-width: 20ch;
    }

    .qr-say {
        grid-column: 1;
        grid-row: 2;
    }

    .quote-rule figcaption {
        grid-column: 1;
        grid-row: 3;
    }
}