/*
 * Ordoflow — website styles.
 * Tokens are copied 1:1 from the Ordoflow Design System (tokens/*.css). Inter is self-hosted (no Google requests).
 */

/* ---------- Fonts ---------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-400.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-500.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
    /* Typography */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --tracking-tight: -0.02em;

    /* Orange scale */
    --orange-50: #fff7ed; --orange-100: #ffedd5; --orange-200: #fed7aa; --orange-300: #fdba74; --orange-400: #fb923c;
    --orange-500: #f97316; --orange-600: #ea580c; --orange-700: #c2410c; --orange-800: #9a3412; --orange-900: #7c2d12;
    /* Warm neutrals */
    --stone-cream: #f5f1ec; --stone-white: #ffffff; --stone-100: #ebe7e1; --stone-200: #d6cfc6; --stone-400: #a8a29e;
    --stone-500: #78716c; --stone-600: #57534e; --stone-900: #1c1917;

    /* Surfaces */
    --canvas: var(--stone-cream);
    --surface: var(--stone-white);
    --surface-muted: var(--stone-100);
    --line: var(--stone-100);
    --line-strong: var(--stone-200);
    --scrim: rgb(28 25 23 / 0.55);
    /* Ink */
    --ink: var(--stone-900);
    --ink-strong: var(--stone-900);
    --ink-muted: var(--stone-600);
    --ink-subtle: var(--stone-500);
    --ink-tertiary: var(--stone-400);
    /* Brand */
    --brand: var(--orange-600);
    --primary: var(--orange-700);
    --primary-hover: var(--orange-800);
    --primary-active: var(--orange-900);
    --on-primary: #ffffff;
    --brand-soft: var(--orange-50);
    --brand-subtle: var(--orange-100);
    --brand-border: var(--orange-200);
    --brand-soft-ink: var(--orange-800);
    /* Feedback (forms only) */
    --danger: #be123c; --danger-soft: #fff1f2;
    --success: #15803d; --success-soft: #f0fdf4;

    /* Spacing */
    --container: 1280px;
    --measure: 36rem;
    --gutter: clamp(16px, 4vw, 32px);
    --section-y: clamp(64px, 8vw, 96px);

    /* Shape */
    --radius-xs: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px;
    --shadow-overlay: 0 12px 32px -14px rgb(28 25 23 / 0.28), 0 2px 6px -2px rgb(28 25 23 / 0.08);
    --shadow-float: 0 24px 48px -20px rgb(28 25 23 / 0.22), 0 4px 12px -4px rgb(28 25 23 / 0.08);
    --glass-bg: rgb(255 255 255 / 0.62);
    --glass-bg-strong: rgb(255 255 255 / 0.82);
    --glass-border: rgb(255 255 255 / 0.7);
    --glass-blur: saturate(1.6) blur(18px);
    --duration: 150ms;
    --ease: ease;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 500; letter-spacing: var(--tracking-tight); text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, fieldset { margin: 0; }
img { max-width: 100%; }

a { color: var(--primary); text-decoration: none; transition: color var(--duration) var(--ease); }
a:hover { color: var(--primary-hover); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand); color: #fff; }

@keyframes of-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes of-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes of-fade { from { opacity: 0; } to { opacity: 1; } }

.page { min-height: 100vh; overflow-x: clip; }

.icon { flex: none; display: block; }

.skip-link {
    position: absolute; left: 16px; top: -100px; z-index: 100;
    padding: 10px 16px; border-radius: var(--radius-md);
    background: var(--ink); color: var(--canvas); font-weight: 500;
}
.skip-link:focus { top: 16px; color: var(--canvas); }

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

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--panel { padding: 0 clamp(12px, 3vw, 24px) var(--section-y); }

.section { padding-block: var(--section-y); }
.hero { padding-top: clamp(48px, 7vw, 88px); padding-bottom: var(--section-y); }
/* Frontpage: sections after the hero share one --section-y gap instead of stacking two paddings, with a roomier gap. */
.hero, .hero ~ .section, .hero ~ .container--panel { --section-y: clamp(80px, 10vw, 128px); }
.hero ~ .section { padding-top: 0; }
.page-intro { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(32px, 4vw, 48px); }
.section--tail { padding-bottom: var(--section-y); }
/* A tinted inset panel (same shape as the brand panel and footer) that breaks up the run of white-on-cream sections. */
.band {
    padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 48px);
    background: var(--surface-muted); border-radius: var(--radius-2xl);
}
.band .btn--secondary:hover { background: var(--canvas); }

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--split-min, 420px)), 1fr));
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
}
.split > * { min-width: 0; }
.split--start { align-items: start; }
.split--end { align-items: end; gap: clamp(24px, 5vw, 64px); }

.stack { display: flex; flex-direction: column; min-width: 0; }
.stack--16 { gap: 16px; }
.stack--32 { gap: 32px; }
.stack--40 { gap: 40px; }
.stack--48 { gap: 48px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.section-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }

.muted { color: var(--ink-muted); }
.fineprint { font-size: 14px; color: var(--ink-muted); }
.fineprint--subtle { color: var(--ink-subtle); max-width: 34ch; }
.fineprint--subtle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Section header ---------- */
.section-header { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.eyebrow { font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--brand); }
.display { font-weight: 500; color: var(--ink-strong); }
.display--xl { font-size: min(72px, 7.2vw + 24px); line-height: 1.05; letter-spacing: -2px; }
.display--lg { font-size: min(56px, 5.6vw + 24px); line-height: 1.1; letter-spacing: -1.4px; }
.display--md { font-size: min(40px, 4vw + 24px); line-height: 1.15; letter-spacing: -0.8px; }
.hl { color: var(--brand); }
.lead { font-size: 18px; line-height: 1.5; letter-spacing: -0.1px; color: var(--ink-muted); max-width: var(--measure); }
.section-header--xl .lead { font-size: 20px; line-height: 1.4; letter-spacing: -0.2px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-md);
    font: 500 15px/1.2 var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn--sm { height: 36px; padding: 0 12px; }
.btn--full { display: flex; width: 100%; }

.btn--primary, .btn--primary:hover { color: var(--on-primary); }
.btn--primary { background: var(--primary); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--primary:active { background: var(--primary-active); }

.btn--secondary, .btn--secondary:hover { color: var(--ink); }
.btn--secondary { background: var(--surface); border-color: var(--line-strong); }
.btn--secondary:hover { background: var(--surface-muted); }
.btn--secondary:active { background: var(--line-strong); }

.btn--ghost { background: transparent; color: var(--ink-muted); }
.btn--ghost:hover { background: var(--surface-muted); color: var(--ink); }
.btn--ghost:active { background: var(--line-strong); color: var(--ink); }

/* On orange surfaces (brand panel). */
.btn--light, .btn--light:hover { color: var(--primary); }
.btn--light { background: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 10px 24px -10px rgb(124 45 18 / 0.7); }
.btn--light:hover { background: var(--orange-50); }
.btn--light:active { background: var(--orange-100); }

/* ---------- Top navigation ---------- */
/* The bar lines up with .container, so the logo and the button sit on the same edges as the page content. At the
   top of the page it is part of the page; once the page scrolls, a frosted glass pill fades in around it and it
   condenses. The outer box keeps its height so nothing below jumps. On phones it is a full-width bar that tucks
   away while you scroll down to read and comes back as soon as you scroll up (main.js). */
.topnav {
    --nav-h: 72px;
    --nav-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    position: sticky; top: 0; z-index: 50; height: 80px; padding-top: 8px;
    pointer-events: none;
    transition: transform 320ms var(--nav-ease);
}
.topnav.is-scrolled { --nav-h: 60px; }

.topnav__bar {
    position: relative; pointer-events: auto;
    max-width: var(--container); height: var(--nav-h); margin: 0 auto; padding: 0 var(--gutter);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    transition: height 250ms var(--nav-ease);
}
/* Glass lives on a pseudo-element so it can reach a little past the content edges, and so the bar doesn't become a
   containing block for the fixed mobile sheet. */
.topnav__bar::before {
    content: ""; position: absolute; inset: 0 calc(var(--gutter) - 14px); z-index: -1;
    border-radius: var(--radius-xl);
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 0 1px rgb(28 25 23 / 0.06), var(--shadow-float);
    opacity: 0; transform: scale(0.985);
    transition: opacity 250ms ease, transform 300ms var(--nav-ease);
}
.topnav.is-scrolled .topnav__bar::before { opacity: 1; transform: none; }

/* 32px box keeps the wordmark on whole pixels inside the bar (no half-pixel centring blur). */
.topnav__logo { display: flex; align-items: center; height: 32px; justify-self: start; color: var(--ink); }
.topnav__logo:hover { color: var(--ink); }
.topnav__logo img { width: 160px; height: 22px; display: block; }
.wordmark { font-size: 19px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }

/* Centre links: plain text. A soft highlight follows the pointer; a brand underline marks the current page. */
.topnav__links { position: relative; display: flex; }
.topnav__list { display: flex; gap: 2px; list-style: none; padding: 0; }
.topnav__link {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 4px;
    padding: 8px 14px; border: 0; border-radius: var(--radius-md); background: none; cursor: pointer;
    font: 500 14px/20px var(--font-sans); white-space: nowrap; color: var(--ink-muted);
    transition: color var(--duration) ease, background-color var(--duration) ease;
}
button.topnav__link { padding-right: 10px; }
/* Narrow desktops: tighter links so six items, Log ind and the button fit on one line. */
@media (max-width: 1099px) {
    .topnav__link { padding-inline: 10px; }
    button.topnav__link { padding-right: 6px; }
    .topnav__link[aria-current="page"]::after, .topnav__link.is-active::after { left: 10px; right: 10px; }
    .topnav__login { padding-inline: 10px; }
}
.topnav__link:hover, .topnav__link[aria-current="page"], .topnav__link.is-active, .topnav__link[aria-expanded="true"] { color: var(--ink); }
.topnav__link:hover { background: rgb(28 25 23 / 0.05); }
.topnav__links.has-indicator .topnav__link:hover { background: transparent; }
.topnav__link[aria-current="page"]::after, .topnav__link.is-active::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
    border-radius: 2px; background: var(--brand);
}
button.topnav__link.is-active::after { right: 10px; }
.topnav__chevron { color: var(--ink-subtle); transition: transform 240ms var(--nav-ease); }
.topnav__link[aria-expanded="true"] .topnav__chevron { transform: rotate(180deg); }
.topnav__indicator {
    position: absolute; top: 0; bottom: 0; left: 0; width: 0;
    border-radius: var(--radius-md); background: rgb(28 25 23 / 0.05);
    opacity: 0; pointer-events: none;
    transition: transform 280ms var(--nav-ease), width 280ms var(--nav-ease), opacity 180ms ease;
}
.topnav__indicator.is-instant { transition: none; }

/* Menu panel for an item with child pages (Brancher → the trades), centred under the links. main.js opens it on
   click, on hover with a short grace period, and closes it on Escape, a click outside or when focus leaves.
   Without JavaScript it opens on hover and keyboard focus. The transparent top padding bridges the gap to the bar. */
.topnav__drop {
    position: absolute; top: 100%; left: 50%; z-index: 2;
    width: min(640px, calc(100vw - 32px)); padding-top: 18px;
    opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
    transition: opacity 160ms ease, transform 240ms var(--nav-ease), visibility 0s linear 240ms;
}
.topnav.is-scrolled .topnav__drop { padding-top: 14px; }
.topnav__item[data-drop]:not([data-drop-ready]):hover .topnav__drop,
.topnav__item[data-drop]:not([data-drop-ready]):focus-within .topnav__drop,
.topnav__item.is-open .topnav__drop {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity 160ms ease, transform 240ms var(--nav-ease), visibility 0s;
}
.topnav__drop-panel {
    display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px; padding: 8px;
    border-radius: var(--radius-xl); background: rgb(255 255 255 / 0.94);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 0 1px rgb(28 25 23 / 0.06), var(--shadow-float);
}
.topnav__drop-intro {
    display: flex; flex-direction: column; gap: 6px; padding: 16px;
    border-radius: var(--radius-lg); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-border);
}
.topnav__drop-title { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink-strong); }
.topnav__drop-text { font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.topnav__drop-all {
    display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px;
    font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--primary);
}
.topnav__drop-all .icon { transition: transform 200ms var(--nav-ease); }
.topnav__drop-all:hover .icon { transform: translateX(3px); }
.topnav__drop-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-content: start; }
.topnav__drop-link {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md);
    font-size: 14px; font-weight: 500; line-height: 20px; color: var(--ink);
    transition: background-color var(--duration) ease;
}
.topnav__drop-link:hover { background: rgb(28 25 23 / 0.05); color: var(--ink); }
.topnav__drop-link[aria-current="page"] { background: var(--brand-soft); color: var(--brand-soft-ink); }
.topnav__drop-icon {
    width: 28px; height: 28px; flex: none; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-soft-ink); box-shadow: inset 0 0 0 1px var(--brand-border);
}

.topnav__actions { display: flex; align-items: center; justify-self: end; gap: 4px; }
.topnav__login {
    padding: 8px 14px; border-radius: var(--radius-md); white-space: nowrap;
    font-size: 14px; font-weight: 500; line-height: 20px; color: var(--ink-muted);
    transition: color var(--duration) ease, background-color var(--duration) ease;
}
.topnav__login:hover { color: var(--ink); background: rgb(28 25 23 / 0.05); }
.topnav__cta { font-size: 14px; padding: 0 14px; }
.topnav__cta .icon { transition: transform 200ms var(--nav-ease); }
.topnav__cta:hover .icon { transform: translateX(3px); }

.topnav__menu { display: none; }
.topnav__menu > summary {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); color: var(--ink); cursor: pointer; list-style: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration) ease;
}
.topnav__menu > summary:hover { background: rgb(28 25 23 / 0.05); }
.topnav__menu > summary::-webkit-details-marker { display: none; }
/* Two-line burger that folds into an X. */
.topnav__burger { position: relative; display: block; width: 20px; height: 12px; }
.topnav__burger span {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform 280ms var(--nav-ease);
}
.topnav__burger span:first-child { top: 0; }
.topnav__burger span:last-child { bottom: 0; }
.topnav__menu[open] .topnav__burger span:first-child { transform: translateY(5px) rotate(45deg); }
.topnav__menu[open] .topnav__burger span:last-child { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 959px) {
    .topnav, .topnav.is-scrolled { --nav-h: 60px; height: var(--nav-h); padding-top: 0; }
    /* Scrolled down past the hero: out of the way until you scroll back up. */
    .topnav.is-hidden { transform: translateY(calc(-100% - 24px)); }

    .topnav__bar { grid-template-columns: 1fr auto; }
    .topnav__bar::before {
        inset: 0; border-radius: 0; border-width: 0 0 1px; border-color: rgb(28 25 23 / 0.08);
        box-shadow: 0 10px 24px -18px rgb(28 25 23 / 0.35); transform: none;
    }
    .topnav__logo img { width: 131px; height: 18px; }
    .topnav__links, .topnav__login, .topnav__cta .icon { display: none; }
    .topnav__actions { gap: 6px; }
    .topnav__menu { display: block; margin-right: -10px; }

    /* Open menu: the page is locked, the bar turns solid and the sheet fills the screen below it. */
    html:has(.topnav__menu[open]) { overflow: hidden; }
    .topnav:has(.topnav__menu[open]) { transform: none; }
    .topnav:has(.topnav__menu[open]) .topnav__bar::before {
        opacity: 1; background: var(--canvas); border-color: var(--line-strong); box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .topnav:has(.topnav__menu[open]) .topnav__cta { visibility: hidden; }

    .topnav__sheet {
        position: fixed; inset: var(--sheet-top, var(--nav-h)) 0 0; z-index: -2; /* --sheet-top: main.js */
        display: flex; flex-direction: column;
        overflow-y: auto; overscroll-behavior: contain;
        background: radial-gradient(120% 50% at 100% 100%, rgb(249 115 22 / 0.1), transparent 70%), var(--canvas);
        animation: of-fade 200ms ease both;
    }
    .topnav__sheet-nav {
        width: 100%; max-width: 560px; margin-inline: auto; padding: 16px var(--gutter) 24px;
        display: grid; gap: 20px; justify-items: center;
        animation: of-rise 320ms var(--nav-ease) both;
    }

    /* One grouped list, like a settings screen: big, even rows that are easy to hit with a thumb. */
    .topnav__sheet-links {
        width: 100%; list-style: none; padding: 0; overflow: hidden;
        background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
    }
    .topnav__sheet-links > li + li { border-top: 1px solid var(--line); }
    .topnav__sheet-row {
        position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
        min-height: 56px; padding: 0 16px 0 20px;
        font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
        cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
        transition: background-color var(--duration) ease;
    }
    .topnav__sheet-row::-webkit-details-marker { display: none; }
    .topnav__sheet-row:hover { color: var(--ink); }
    .topnav__sheet-row:active { background: var(--surface-muted); }
    .topnav__sheet-row > .icon { color: var(--ink-tertiary); transition: transform 240ms var(--nav-ease), color 200ms ease; }
    .topnav__sheet-group[open] .topnav__sheet-chevron { transform: rotate(180deg); }
    /* Current page: brand text and a short brand bar on the left edge. */
    .topnav__sheet-row[aria-current="page"], .topnav__sheet-row.is-active { color: var(--brand-soft-ink); }
    .topnav__sheet-row[aria-current="page"] > .icon, .topnav__sheet-row.is-active > .icon { color: var(--brand); }
    .topnav__sheet-row[aria-current="page"]::before, .topnav__sheet-row.is-active::before {
        content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
        border-radius: 0 3px 3px 0; background: var(--brand);
    }

    /* Sub-pages, folded out under their row as tiles. */
    .topnav__sheet-sub { padding: 0 12px 8px; animation: of-fade 200ms ease both; }
    .topnav__sheet-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .topnav__sheet-tile {
        display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px;
        border-radius: var(--radius-lg); background: var(--canvas);
        font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--ink); hyphens: auto;
        -webkit-tap-highlight-color: transparent;
        transition: background-color var(--duration) ease;
    }
    .topnav__sheet-tile:hover, .topnav__sheet-tile:active { background: var(--surface-muted); color: var(--ink); }
    .topnav__sheet-tile[aria-current="page"] { background: var(--brand-soft); color: var(--brand-soft-ink); box-shadow: inset 0 0 0 1px var(--brand-border); }
    .topnav__sheet-all {
        display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 4px;
        font-size: 15px; font-weight: 500; color: var(--primary);
    }

    .topnav__sheet-mail { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--ink-muted); }
    .topnav__sheet-mail:hover { color: var(--ink); }

    /* The two actions stay pinned to the bottom of the screen, in thumb reach. */
    .topnav__sheet-footer {
        position: sticky; bottom: 0; margin-top: auto;
        display: grid; gap: 10px; justify-items: center;
        padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
        background: var(--glass-bg-strong);
        -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
        border-top: 1px solid var(--line-strong);
        animation: of-rise 320ms 80ms var(--nav-ease) both;
    }
    .topnav__sheet-actions { width: 100%; max-width: 528px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .topnav__sheet-actions:has(> :only-child) { grid-template-columns: 1fr; } /* before launch there is no "Log ind" */
    .topnav__sheet-actions .btn { height: 48px; }
    .topnav__sheet-note { font-size: 13px; color: var(--ink-subtle); text-align: center; }
}

/* Small phones: the menu holds the button, and the trades get a row each. */
@media (max-width: 359px) {
    .topnav__cta { display: none; }
    .topnav__sheet-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Hero ---------- */
/* Two columns like the chapters on /funktioner: copy on the left, a job card carried from quote to invoice on the right.
   Phones: copy, then the card. */
.hero--split {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 6vw, 96px); align-items: center;
}
.hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; min-width: 0; }
.hero__intro .display--xl { font-size: clamp(44px, 4.4vw, 64px); }
.hero__intro .hl { display: block; } /* the brand-coloured half always starts its own line */
.hero__facts {
    list-style: none; padding: 0; margin-top: -8px;
    display: flex; flex-wrap: wrap; gap: 8px 24px;
    font-size: 14px; line-height: 1.4; color: var(--ink-muted);
}
.hero__facts li { display: flex; align-items: center; gap: 8px; }
.hero__facts .icon { color: var(--ink-subtle); }
.hero__more .icon { display: none; } /* the arrow is only for the text-link look on phones */
.hero__intro .eyebrow, .features-intro .eyebrow, .price-intro .eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-muted);
}
.hero__intro .eyebrow::before, .features-intro .eyebrow::before, .price-intro .eyebrow::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-subtle);
}

/* Starts on the first frame of its loop (see hero-preview.php); the finished state without JS or with reduced motion.
   The same warm stage as the scenes on /funktioner (.stage): light from below and rings spreading from the bottom centre. */
.hero-preview {
    --step: 0;
    position: relative; isolation: isolate; overflow: hidden; min-width: 0;
    margin: 0; padding: clamp(72px, 8vw, 104px) clamp(20px, 5vw, 64px);
    display: flex; justify-content: center;
    border-radius: 28px;
    background:
        radial-gradient(55% 45% at 50% 100%, rgb(249 115 22 / 0.2), transparent 75%),
        radial-gradient(45% 40% at 100% 0%, rgb(253 186 116 / 0.22), transparent 70%),
        linear-gradient(180deg, #fbf8f4, #f1e9df);
    box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 #fff;
    -webkit-user-select: none; user-select: none; pointer-events: none;
    animation: of-fade 600ms 100ms var(--ease-out) both;
}
.hero-preview::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: repeating-radial-gradient(circle at 50% 100%, transparent 0 55px, rgb(28 25 23 / 0.07) 55px 56px);
    -webkit-mask-image: radial-gradient(80% 90% at 50% 100%, #000, transparent);
    mask-image: radial-gradient(80% 90% at 50% 100%, #000, transparent);
}
/* Faint 32px grid, faded out towards the edges. */
.about-faces::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(to right, rgb(28 25 23 / 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(28 25 23 / 0.06) 1px, transparent 1px);
    background-size: 32px 32px; background-position: center;
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
    mask-image: radial-gradient(closest-side, #000, transparent);
}
.hero-preview__stage { position: relative; width: 100%; max-width: 420px; }

/* The job card: header, quote → job → invoice stepper, line items, total. */
.job-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.05), 0 12px 24px -12px rgb(28 25 23 / 0.16), 0 32px 48px -32px rgb(28 25 23 / 0.24);
    font-size: 13px; line-height: 1.4; color: var(--ink-muted);
    animation: of-rise 700ms 200ms var(--ease-out) both;
}
.job-card__head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
    padding: 20px 20px 16px;
}
.job-card__ref { font-size: 12px; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.job-card__status { grid-row: 1; grid-column: 2; }
.job-card__badge {
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap;
    background: var(--brand-soft); color: var(--brand-soft-ink); box-shadow: inset 0 0 0 1px var(--brand-border);
}
.job-card__badge--muted { background: var(--surface-muted); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); }
.job-card__title { grid-column: 1 / -1; margin-top: 6px; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.2px; color: var(--ink-strong); }
.job-card__meta { grid-column: 1 / -1; margin-top: 2px; }

.job-steps {
    list-style: none; margin: 0 20px; padding: 14px 0; display: flex; align-items: center; gap: 10px;
    border-block: 1px solid var(--line);
    font-size: 12px; font-weight: 500; color: var(--ink-strong); white-space: nowrap;
}
.job-steps li { display: flex; align-items: center; gap: 8px; }
.job-steps li:not(:last-child) { flex: 1; }
/* A dot is a grey ring until its step is current (orange ring) and then done (filled, with a check). */
.job-steps__dot {
    width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid;
    background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.job-steps__dot > * { grid-area: 1 / 1; display: grid; place-items: center; border-radius: 50%; }
.job-steps__now { box-shadow: inset 0 0 0 1.5px var(--brand); }
.job-steps__now::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.job-steps__done { background: var(--brand); color: #fff; }
.job-steps__wire { flex: 1; height: 1px; margin-left: 2px; overflow: hidden; background: var(--line-strong); }
.job-steps__wire i { display: block; height: 100%; background: var(--brand); transform-origin: left; scale: var(--v) 1; }
[data-anim] .job-steps__wire i { transition: scale 500ms var(--ease-out); transition-delay: calc(var(--i) * 80ms); }

.job-lines { list-style: none; padding: 8px 20px; display: flex; flex-direction: column; }
.job-lines li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 0; }
.job-lines li + li { border-top: 1px dashed var(--line-strong); }
.job-lines__icon {
    width: 32px; height: 32px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--canvas); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line);
}
.job-lines__text { display: flex; flex-direction: column; min-width: 0; }
.job-lines__text b { font-size: 14px; font-weight: 500; color: var(--ink-strong); }
.job-lines__value { font-size: 14px; font-weight: 500; color: var(--ink-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.job-lines__ok {
    width: 22px; height: 22px; border-radius: 50%; justify-self: end;
    display: flex; align-items: center; justify-content: center;
    background: var(--success-soft); color: var(--success);
}
.job-lines__check { justify-self: end; }
.job-lines__pending { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--line-strong); }

.job-card__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px;
    border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: #fcfbf9;
}
.job-card__total { display: flex; flex-direction: column; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.3px; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.job-card__total small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--ink-subtle); }
/* Greyed out until the job is ready to invoice (--v from .fx). */
.job-card__action {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 14px; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--primary) calc(var(--v) * 100%), var(--surface-muted));
    color: color-mix(in srgb, var(--on-primary) calc(var(--v) * 100%), var(--ink-subtle));
    font-size: 13px; font-weight: 500; white-space: nowrap;
    box-shadow: 0 1px 2px rgb(124 45 18 / calc(var(--v) * 0.3)), inset 0 1px 0 rgb(255 255 255 / 0.15);
}
[data-anim] .job-card__action.fx { transition: background-color 400ms ease, color 400ms ease, box-shadow 400ms ease; }
/* Notifications on the card's corners (sk-chip from the scenes), kept inside the stage. */
.hero-note { position: absolute; z-index: 2; }
.hero-note--top { top: -32px; left: -28px; }
.hero-note--bottom { bottom: -36px; right: -24px; }
.hero-note .sk-stack b { font-size: 13px; }
.hero-note .sk-stack small { font-size: 12px; }

/* Glass notification beside a photo or figure (pricing, about). */
.hero-chip {
    position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px;
    border-radius: var(--radius-lg); white-space: nowrap;
    background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-overlay);
    animation: of-float 6s ease-in-out infinite;
}
.hero-chip__icon {
    width: 30px; height: 30px; flex: none; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-soft-ink);
}
.hero-chip__icon--success { background: var(--success-soft); color: var(--success); }
.hero-chip__text { display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; color: var(--ink-muted); }
.hero-chip__text b { font-size: 13px; font-weight: 500; color: var(--ink-strong); }

@media (max-width: 959px) {
    .hero--split { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .hero__intro .display--xl { font-size: min(64px, 7.2vw + 24px); }
}
/* Phones: tighter, so the top of the job card shows on the first screen. One full-width button in the thumb zone with
   "Se hvad Ordoflow kan" as a text link under it, no facts (the chapters on /funktioner make the same points), and the
   notes tucked in from the stage's edges. */
@media (max-width: 560px) {
    .hero { padding-top: 32px; }
    .hero--split { gap: 32px; }
    .hero__intro { gap: 24px; }
    .hero__intro .section-header { gap: 14px; }
    .hero__intro .display--xl { font-size: clamp(38px, 10.6vw, 48px); letter-spacing: -1.4px; }
    .hero__intro .section-header--xl .lead { font-size: 17px; line-height: 1.45; }
    .hero__intro .actions { width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
    .hero__more { height: 40px; background: none; border-color: transparent; color: var(--primary); }
    .hero__more:hover, .hero__more:active { background: none; color: var(--primary-hover); }
    .hero__more .icon { display: block; }
    .hero__facts { display: none; }
    .hero-preview { padding: 56px 14px 72px; border-radius: 24px; }
    .hero-note--top { top: -40px; left: -6px; }
    .hero-note--bottom { bottom: -48px; right: -6px; }
    .job-card__head, .job-lines, .job-card__foot { padding-inline: 16px; }
    .job-steps { margin-inline: 16px; }
}

/* ---------- Floating card ---------- */
.floating-card {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 16px 12px 12px; border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-float); white-space: nowrap;
    animation: of-float 6s ease-in-out infinite;
}
.floating-card--glass {
    background: var(--glass-bg-strong); border-color: var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.floating-card__icon {
    width: 36px; height: 36px; flex: none; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-soft-ink);
}
.floating-card__text { display: flex; flex-direction: column; gap: 2px; }
.floating-card__title { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.floating-card__meta { font-size: 12px; line-height: 1.4; color: var(--ink-muted); }

/* ---------- Image slot ---------- */
.image-slot {
    position: relative; width: 100%; overflow: hidden;
    border-radius: var(--radius-xl); background: var(--surface-muted); border: 1px solid var(--line-strong);
}
.image-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.image-slot--empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px;
    color: var(--ink-subtle); font-size: 14px; line-height: 1.4; text-align: center;
}

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); min-width: 0; }
.card--featured { background: var(--brand-soft); border-color: var(--brand-border); }

.icon-tile {
    width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-soft-ink);
}

/* ---------- Feature bento (home) ---------- */
/* Numbered steps from quote to invoice. Each card has an inset "window" with a small stylised UI, then the copy. */
.bento {
    list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.bento-card {
    display: flex; flex-direction: column; min-width: 0; padding: 8px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-2xl);
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 8px 24px -16px rgb(28 25 23 / 0.12);
    transition: border-color 300ms ease, box-shadow 300ms ease, translate 400ms var(--ease-out);
}
.bento-card:hover { border-color: var(--brand-border); box-shadow: var(--shadow-float); translate: 0 -2px; }
.bento-card--jobs { grid-column: span 2; }

.bento-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px 16px; }
.bento-card__title { display: flex; align-items: center; gap: 10px; }
.bento-card__icon {
    width: 32px; height: 32px; flex: none; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #fff, var(--brand-soft)); color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand-border), 0 1px 2px rgb(234 88 12 / 0.12);
}
.bento-card h3 { font-size: 20px; line-height: 1.3; color: var(--ink-strong); }
.bento-card__step {
    margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--canvas);
    font-size: 12px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--ink-subtle);
}
.bento-card p { color: var(--ink-muted); max-width: 44ch; }

/* The window: warm light from the top corner, a dot grid fading out, the mock centred inside.
   Example UI only, so it can't be selected, dragged or pointed at. */
.bento-art {
    --step: 99;
    position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
    height: 240px; margin: 0; padding: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(70% 90% at 100% 0%, rgb(249 115 22 / 0.13), transparent 70%),
        radial-gradient(60% 70% at 0% 100%, rgb(253 186 116 / 0.14), transparent 70%),
        linear-gradient(180deg, #fbf9f6, #f6f2ec);
    box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 #fff;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; pointer-events: none;
}
.bento-art::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgb(28 25 23 / 0.11) 1px, transparent 1.5px);
    background-size: 14px 14px; background-position: center;
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
    mask-image: radial-gradient(closest-side, #000, transparent);
}
/* A warmer glow fades in behind the mock on hover. */
.bento-art::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 60% at 50% 55%, rgb(249 115 22 / 0.12), transparent 70%);
    opacity: 0; transition: opacity 400ms ease;
}
.bento-card:hover .bento-art::after { opacity: 1; }
.bento-art svg { pointer-events: none; }

/* Animation steps. main.js sets --step on the figure; an .fx piece is shown from step --at until step --until.
   --v is 1 while shown and 0 otherwise, and each fx-* variant turns it into motion. */
.fx {
    --at: 0; --until: 999; --i: 0;
    --v: min(clamp(0, var(--step) - var(--at) + 1, 1), clamp(0, var(--until) - var(--step), 1));
}
.fx-fade { opacity: var(--v); }
.fx-rise { opacity: var(--v); translate: 0 calc((1 - var(--v)) * 8px); }
.fx-pop { opacity: var(--v); scale: calc(0.6 + var(--v) * 0.4); }
.fx-spin { opacity: var(--v); scale: calc(0.4 + var(--v) * 0.6); rotate: calc((1 - var(--v)) * 90deg); }
.fx-type { display: inline-block; overflow: hidden; vertical-align: bottom; max-width: calc(var(--v) * 1em); }
/* The gap is longer than the path and the offset overshoots a little, so no zero-length dash (a round-cap dot) shows
   at either end before the line is drawn. */
.fx-draw { stroke-dasharray: 1 2; stroke-dashoffset: calc((1 - var(--v)) * 1.02); }
[data-anim] .fx {
    transition: opacity 350ms ease, translate 550ms var(--ease-out), scale 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
        rotate 500ms var(--ease-out), stroke-dashoffset 1300ms cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: calc(var(--i) * 80ms);
}
[data-anim] .fx-type { transition: none; }
[data-anim].is-instant *, [data-anim].is-instant *::before, [data-anim].is-instant *::after { transition: none !important; }

/* State stacks (Kladde → Sendt → Accepteret): the layers share one cell and cross-fade. */
.swap { display: inline-grid; justify-items: end; align-items: center; }
.swap > * { grid-area: 1 / 1; }
.swap--start { justify-items: start; }

/* Numbers that roll up to the next value, one row per step from --at to --last. */
.roll { --at: 1; --last: 1; display: inline-block; height: 1.3em; line-height: 1.3em; overflow: hidden; vertical-align: bottom; }
.roll > span {
    display: block; text-align: right;
    translate: 0 calc(clamp(0, var(--step) - var(--at) + 1, var(--last)) * -1.3em);
    transition: translate 600ms var(--ease-out);
}
.roll i { display: block; font-style: normal; }
.roll--start { align-self: flex-start; }
.roll--start > span { text-align: left; }

/* Mouse pointer, held down (smaller) while its inner svg is shown. */
.mock-cursor {
    position: absolute; z-index: 3; left: 55%; top: 55%;
    opacity: var(--v); translate: calc((1 - var(--v)) * 34px) calc((1 - var(--v)) * 28px);
    filter: drop-shadow(0 2px 3px rgb(28 25 23 / 0.3));
}
[data-anim] .mock-cursor { transition: opacity 300ms ease, translate 650ms cubic-bezier(0.45, 0, 0.2, 1); }
.mock-cursor svg { display: block; fill: var(--stone-900); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; scale: calc(1 - var(--v) * 0.15); transform-origin: 4px 2px; }

/* Shared mock pieces. */
.mock {
    position: relative; width: 100%; max-width: 340px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.05), 0 12px 24px -12px rgb(28 25 23 / 0.16), 0 32px 48px -32px rgb(28 25 23 / 0.24);
    font-size: 12px; line-height: 1.35; color: var(--ink-muted);
    transition: transform 450ms var(--ease-out);
}
.mock b { font-weight: 500; color: var(--ink-strong); }
.bento-card:hover .mock { transform: translateY(-4px); }

.mock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mock__head > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.mock__head > span:first-child b { font-size: 13px; }
.mock__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; }
.mock__row + .mock__row { border-top: 1px dashed var(--line-strong); }
.mock__row > span { display: flex; flex-direction: column; font-weight: 500; color: var(--ink-strong); }
.mock__row small { font-size: 11px; font-weight: 400; color: var(--ink-subtle); }
.mock__row b, .mock__total b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mock__total {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
    border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: #fcfbf9;
}
.mock__total b { font-size: 15px; letter-spacing: -0.2px; }

.pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.pill--success { background: var(--success-soft); color: var(--success); box-shadow: inset 0 0 0 1px rgb(21 128 61 / 0.18); }
.pill--brand { background: var(--brand-soft); color: var(--brand-soft-ink); box-shadow: inset 0 0 0 1px var(--brand-border); }
.pill--neutral { background: var(--surface-muted); color: var(--ink-muted); }

/* 02 Sager: a new job slides in at the top, gets started and logs hours; another job is ready to invoice. */
.mock--list { max-width: 560px; overflow: hidden; }
.mock__job { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 14px; }
.mock__job + .mock__job { border-top: 1px solid var(--line); }
.mock__job > * { position: relative; }
.mock__job--new {
    overflow: hidden; max-height: calc(var(--v) * 56px); padding-block: calc(var(--v) * 10px); opacity: var(--v);
}
[data-anim] .mock__job--new { transition: max-height 600ms var(--ease-out), padding 600ms var(--ease-out), opacity 400ms ease; }
.mock__job--new { box-shadow: inset 0 -1px 0 var(--line); }
.mock__job--new + .mock__job { border-top: 0; }
.mock__job > .mock__job-sel { position: absolute; inset: 0; background: #fffaf5; box-shadow: inset 2px 0 0 var(--brand); }
.mock__avatar {
    width: 32px; height: 32px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line);
    font-size: 11px; font-weight: 500; color: var(--ink-muted);
}
.mock__job-text { display: flex; flex-direction: column; min-width: 0; }
.mock__job-text b, .mock__job-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__job-text b { font-size: 13px; }
.mock__job-text small { font-size: 12px; }
.mock__job-stats { display: flex; gap: 12px; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.mock__job-stats > span { display: inline-flex; align-items: center; gap: 4px; }
@container (max-width: 480px) { .mock__job-stats { display: none; } }

/* 03 Kalender: the week's jobs with the worker on each; one is picked up on Monday and dragged to Thursday. */
.mock--cal {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 18px repeat(3, 38px);
    gap: 4px; padding: 10px; max-width: 340px;
}
.mock__day { grid-row: 1; text-align: center; font-size: 11px; font-weight: 500; color: var(--ink-subtle); }
.mock__event, .mock__drag-card {
    display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; min-width: 0; padding: 5px 6px 5px 8px;
    border-radius: 6px; overflow: hidden; line-height: 1.3; white-space: nowrap;
}
.mock__event b, .mock__drag-card b { overflow: hidden; text-overflow: ellipsis; font-size: 10px; color: inherit; }
/* Worker under the job, with a small person dot. */
.mock__event small, .mock__drag-card small {
    display: flex; align-items: center; gap: 4px; overflow: hidden; font-size: 9.5px; color: var(--ink-subtle);
}
.mock__event small::before, .mock__drag-card small::before {
    content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; opacity: 0.6;
}
.mock__event, .mock__slot, .mock__drag { grid-column: var(--c); grid-row: var(--r); }
.mock__event { background: var(--brand-soft); box-shadow: inset 2px 0 0 var(--brand); color: var(--brand-soft-ink); }
.mock__event--alt { background: var(--surface-muted); box-shadow: inset 2px 0 0 var(--stone-400); color: var(--ink-strong); }
.mock__slot { border-radius: 6px; border: 1.5px dashed var(--brand-border); background: rgb(255 247 237 / 0.6); }
/* The drop spot in the grid; shifted back to Monday (3 columns left, 1 row down) until it is dropped. */
.mock__drag {
    position: relative; z-index: 2; display: grid;
    translate: calc((1 - var(--v)) * (-300% - 12px)) calc((1 - var(--v)) * 42px);
}
[data-anim] .mock__drag { transition: translate 1000ms cubic-bezier(0.65, 0, 0.35, 1); }
.mock__drag-card {
    position: relative; background: var(--surface); color: var(--ink-strong);
    box-shadow: inset 0 0 0 1.5px var(--brand), inset 3px 0 0 var(--brand);
    rotate: calc(var(--v) * -4deg); scale: calc(1 + var(--v) * 0.06);
}
.mock__drag-card small::before { background: var(--brand); opacity: 1; }
.mock__drag-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-overlay); opacity: var(--v);
}
[data-anim] .mock__drag-card, [data-anim] .mock__drag-card::after { transition: rotate 350ms var(--ease-out), scale 350ms var(--ease-out), opacity 350ms ease; }
.mock__drag .mock-cursor { left: auto; right: 4px; top: auto; bottom: -6px; }
.bento-card:hover .mock--cal { transform: none; }
/* Phones: less padding and no dot, so job and worker names fit the narrow columns. */
@container (max-width: 300px) {
    .mock--cal { gap: 3px; padding: 8px; }
    .mock__event, .mock__drag-card { padding: 4px 4px 4px 6px; }
    .mock__event small::before, .mock__drag-card small::before { display: none; }
}
@media (max-width: 639px) { .bento-art--calendar { padding-inline: 12px; } }

/* 04 Timeregistrering: each day's hours fill in while the week total rolls up. */
.mock--hours { max-width: 300px; padding-bottom: 8px; }
.mock--hours .mock__head { margin-bottom: 4px; }
.mock__big { font-size: 20px; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.mock__bar { display: grid; grid-template-columns: 28px minmax(0, 1fr) 36px; align-items: center; gap: 10px; padding: 6px 14px; }
.mock__bar b { text-align: right; font-variant-numeric: tabular-nums; }
.mock__bar i { position: relative; height: 8px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; }
.mock__bar i::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--h) * 100%);
    border-radius: inherit; background: linear-gradient(90deg, var(--orange-400), var(--brand)); transform-origin: left;
    scale: var(--v) 1;
}
[data-anim] .mock__bar i::before { transition: scale 700ms var(--ease-out); }

/* 05 Produkt- og materialestyring: "flise" is typed, the hits appear and the first one is added to the job. */
.mock--catalog { max-width: 320px; padding-bottom: 4px; }
.mock__search {
    display: flex; align-items: center; gap: 8px; height: 32px; margin: 10px 10px 4px; padding: 0 10px;
    border: 1px solid var(--brand); border-radius: var(--radius-md); box-shadow: 0 0 0 3px var(--brand-subtle);
    color: var(--ink-subtle);
}
.mock__query { position: relative; flex: 1; display: inline-flex; align-items: center; font-weight: 500; color: var(--ink-strong); }
.mock__query i { font-style: normal; }
.mock__placeholder { position: absolute; left: 4px; font-weight: 400; color: var(--ink-tertiary); white-space: nowrap; }
.mock__caret { width: 1px; height: 14px; margin-left: 1px; background: var(--ink-strong); animation: of-blink 1.1s steps(1) infinite; }
.mock__search small { font-size: 11px; color: var(--ink-tertiary); }
@keyframes of-blink { 50% { opacity: 0; } }
.mock__item { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: 10px; padding: 7px 14px; }
.mock__item + .mock__item { border-top: 1px dashed var(--line-strong); }
.mock__item--hit { background: #fffaf5; }
.mock__item-text, .mock__item-price { display: flex; flex-direction: column; min-width: 0; }
.mock__item-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__item small { font-size: 11px; color: var(--ink-subtle); white-space: nowrap; }
.mock__item-price { text-align: right; font-variant-numeric: tabular-nums; }
.mock__add {
    position: relative; width: 24px; height: 24px; border-radius: var(--radius-md);
    display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-muted);
}
.mock__add > span { grid-area: 1 / 1; }
.mock__add > span:not(.mock-cursor) { position: relative; display: grid; place-items: center; }
/* The top hit's button: orange "+" that turns into a green tick once added. */
.mock__item--hit .mock__add { background: var(--brand); color: #fff; box-shadow: none; }
.mock__item--hit .mock__add::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--success); opacity: var(--v);
}
[data-anim] .mock__item--hit .mock__add::before { transition: opacity 300ms ease; }
.mock__add .mock-cursor { left: 50%; top: 50%; }

/* 06 Fakturering: the finale. Dark, full width, copy beside an invoice that is sent, booked and paid. */
.bento-card--finale {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center;
    background: radial-gradient(60% 120% at 0% 100%, rgb(249 115 22 / 0.12), transparent 70%), var(--stone-900);
    border-color: var(--stone-900);
}
.bento-card--finale:hover { border-color: var(--stone-600); }
.bento-card--finale .bento-card__body { order: -1; gap: 12px; padding: clamp(24px, 4vw, 48px); }
.bento-card--finale h3 { font-size: min(32px, 2vw + 18px); letter-spacing: -0.5px; color: #fff; }
.bento-card--finale p { font-size: 17px; color: rgb(255 255 255 / 0.68); max-width: 38ch; }
.bento-card--finale .bento-card__icon { background: rgb(249 115 22 / 0.16); color: var(--orange-300); box-shadow: inset 0 0 0 1px rgb(249 115 22 / 0.3); }
.bento-card--finale .bento-card__step { background: rgb(255 255 255 / 0.08); color: rgb(255 255 255 / 0.55); }
.bento-card--finale .bento-art {
    height: 300px;
    background: radial-gradient(70% 80% at 70% 0%, rgb(249 115 22 / 0.3), transparent 70%), rgb(255 255 255 / 0.04);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.bento-card--finale .bento-art::before { background-image: radial-gradient(rgb(255 255 255 / 0.12) 1px, transparent 1.5px); }
.bento-card--finale .bento-art::after { background: radial-gradient(50% 60% at 50% 40%, rgb(249 115 22 / 0.18), transparent 70%); }
.mock--invoice { box-shadow: 0 32px 64px -24px rgb(0 0 0 / 0.6); }

/* The invoice with the "Bogført" chip hanging off its bottom-right corner. The bottom padding makes room for the
   chip, so the two are centred as one and the chip only overlaps the card's edge, never the total. */
.mock-stack { position: relative; width: 100%; max-width: 340px; padding-bottom: 34px; }
/* Solid rather than frosted: Safari drops backdrop-filter while an element fades or moves, so the blur popped in. */
.mock-chip {
    position: absolute; bottom: 0; right: -16px;
    display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px;
    border-radius: var(--radius-lg); white-space: nowrap;
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow-overlay);
    font-size: 11px; line-height: 1.35; color: var(--ink-muted);
    animation: of-float 6s 1s ease-in-out infinite;
    will-change: transform;
}
.mock-chip .swap > span { display: flex; flex-direction: column; }
.mock-chip b { font-size: 12px; font-weight: 500; color: var(--ink-strong); }
.mock-chip__icon {
    width: 28px; height: 28px; flex: none; border-radius: var(--radius-md);
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand-soft-ink);
}
.mock-chip__icon > span { display: grid; place-items: center; }
.mock-spin {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--brand-border); border-top-color: var(--brand);
    animation: of-spin 800ms linear infinite;
}
@keyframes of-spin { to { transform: rotate(360deg); } }

@media (max-width: 959px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento-card--jobs { grid-column: auto; }
    .bento-card--materials { grid-column: 1 / -1; }
    .bento-card--finale { grid-template-columns: minmax(0, 1fr); }
    .bento-card--finale .bento-card__body { order: 0; padding: 20px 16px 16px; }
}
@media (max-width: 639px) {
    .bento { grid-template-columns: minmax(0, 1fr); }
    .bento-card--materials { grid-column: auto; }
}

.check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink); }
.check-list .icon { color: var(--brand); margin-top: 4px; }

/* ---------- Page intro, product modules (trade pages), toolbox ---------- */
/* Intro (features, trades, pricing, integrations): centred like the about hero, with three plain facts under the actions. */
.features-intro, .price-intro {
    display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center;
    padding-bottom: clamp(48px, 6vw, 72px);
}
.features-intro .section-header, .price-intro .section-header { align-items: center; }
.features-intro .display--lg, .price-intro .display--lg { max-width: 18em; font-size: clamp(28px, 8.4vw, 56px); } /* small enough on phones for "håndværksvirksomhed" */
.features-intro .lead, .price-intro .lead { margin-inline: auto; }
.features-intro .actions { justify-content: center; }
.features-intro__facts {
    list-style: none; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px;
    font-size: 14px; line-height: 1.4; color: var(--ink-muted);
}
.features-intro__facts li { display: flex; align-items: center; gap: 8px; }
.features-intro__facts .icon { color: var(--ink-subtle); }

/* Modules: one layout throughout, copy left and product window right, divided by hairlines. */
.module:first-child { border-top: 0; } /* the section heading above already opens the run */
.module {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center;
    padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-strong);
    scroll-margin-top: 72px;
}
.module:last-child { padding-bottom: 0; } /* the next section's padding takes over */
@media (min-width: 960px) {
    .module { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
}
.module__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.module__label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-muted); }
.module__num {
    padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums;
    background: var(--brand-soft); color: var(--brand-soft-ink); box-shadow: inset 0 0 0 1px var(--brand-border);
}
.module__num::before { content: attr(data-num); } /* CSS text keeps "01Sager" out of llms-full.txt */
.module .lead { font-size: 17px; }
/* Spec list: one card split by hairlines, like the module nav. Each point has a tick, a short title and a line on
   what it means in practice. */
.spec-list {
    list-style: none; padding: 0; width: 100%; margin-top: 8px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.04);
}
.spec-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 14px; padding: 16px 20px; }
.spec-list li + li { border-top: 1px solid var(--line); }
.spec-list__tick {
    grid-row: span 2; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-border);
}
.spec-list b { font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--ink-strong); }
.spec-list li > span:last-child { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 639px) {
    .spec-list li { gap: 2px 12px; padding: 14px 16px; }
}

/* Product window: a title bar over the stylised UI (or a real screenshot). */
.module__window {
    min-width: 0; padding: 0 8px 8px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-2xl);
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 32px 64px -40px rgb(28 25 23 / 0.3);
}
.module__window::before { /* CSS text keeps the label out of llms-full.txt */
    content: attr(data-label); display: block; padding: 12px 8px 12px 50px;
    font-size: 12px; font-weight: 500; line-height: 16px; color: var(--ink-subtle);
    background:
        radial-gradient(circle, var(--line-strong) 3.5px, transparent 4px) 8px 50% / 10px 10px no-repeat,
        radial-gradient(circle, var(--line-strong) 3.5px, transparent 4px) 22px 50% / 10px 10px no-repeat,
        radial-gradient(circle, var(--line-strong) 3.5px, transparent 4px) 36px 50% / 10px 10px no-repeat;
}
.module__window .bento-art { height: auto; min-height: clamp(300px, 32vw, 420px); }
.module__window .image-slot { border-radius: var(--radius-xl); }

/* KS-skema: checked items and a signature. */
.mock--ks { max-width: 320px; }
.mock__check { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-weight: 500; color: var(--ink-strong); }
.mock__check + .mock__check { border-top: 1px dashed var(--line-strong); }
.mock__tick {
    width: 18px; height: 18px; flex: none; border-radius: 50%;
    display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.mock__tick > span {
    width: 100%; height: 100%; border-radius: inherit;
    display: grid; place-items: center; background: var(--success-soft); color: var(--success);
    box-shadow: inset 0 0 0 1px rgb(21 128 61 / 0.18);
}
.mock__sign {
    display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 12px;
    border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: #fcfbf9;
}
.mock__sign svg { display: block; width: 100%; max-width: 160px; height: auto; padding-bottom: 4px; border-bottom: 1px solid var(--line-strong); color: var(--ink-strong); }
.mock__sign > span { display: flex; flex-direction: column; font-size: 11px; color: var(--ink-subtle); }
.mock__sign > span b { font-size: 12px; }

/* Toolbox: one surface split into cells by 1px gaps. */
.toolbox {
    list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
    background: var(--line-strong); border: 1px solid var(--line-strong); border-radius: var(--radius-2xl);
    overflow: hidden;
}
.toolbox > li { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: clamp(24px, 3vw, 32px); background: var(--surface); }
.toolbox__icon {
    width: 36px; height: 36px; margin-bottom: 16px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--canvas); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.toolbox h3 { font-size: 18px; line-height: 1.3; color: var(--ink-strong); }
.toolbox p { font-size: 15px; color: var(--ink-muted); max-width: 36ch; }

@media (max-width: 959px) {
    .toolbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .toolbox { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Features page (/funktioner) ---------- */
/* Journey: the six features as numbered tiles under the intro, in the order a job runs. Jump links. */
.journey ol {
    list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
}
.journey li { position: relative; min-width: 0; }
.journey a {
    height: 100%; display: flex; flex-direction: column; gap: 2px; padding: 16px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
    color: var(--ink-muted); box-shadow: 0 1px 2px rgb(28 25 23 / 0.04);
    -webkit-tap-highlight-color: transparent;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.journey a:hover { color: var(--ink-muted); border-color: var(--brand-border); box-shadow: var(--shadow-overlay); transform: translateY(-2px); }
.journey a:active { transform: scale(0.98); }
.journey__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.journey__icon, .chapter__icon {
    width: 36px; height: 36px; flex: none; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #fff, var(--brand-soft)); color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand-border), 0 1px 2px rgb(234 88 12 / 0.12);
}
.journey__n { font-size: 12px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink-tertiary); }
.journey b { font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.1px; color: var(--ink-strong); }
.journey__text { font-size: 13px; line-height: 1.4; }
/* Desktop: a short brand line joins each tile to the next, so the row reads as one flow. */
@media (min-width: 1100px) {
    .journey li:not(:last-child)::after {
        content: ""; position: absolute; top: 34px; right: -12px; width: 12px; height: 2px; background: var(--brand-border);
    }
}
@media (max-width: 1099px) { .journey ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
    .journey ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .journey a { padding: 14px; }
    .journey__top { margin-bottom: 10px; }
    .journey__icon { width: 32px; height: 32px; }
    .journey b { font-size: 15px; }
}

.chapters { padding-bottom: var(--section-y); }

/* Chapter. Phones: heading, scene, then how it works. Desktop: heading and steps beside the scene, alternating sides.
   The negative scroll margin cancels the top padding, so a jump from the journey tiles lands on the heading. */
.chapter {
    --chapter-pad: clamp(80px, 10vw, 136px);
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "art" "body";
    gap: 32px; padding-top: var(--chapter-pad); scroll-margin-top: calc(-1 * var(--chapter-pad));
}
.chapter__head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.chapter__art { grid-area: art; min-width: 0; }
.chapter__body { grid-area: body; min-width: 0; }
@media (min-width: 1024px) {
    .chapter {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head art" "body art";
        grid-template-rows: auto 1fr; column-gap: clamp(48px, 6vw, 96px); row-gap: 40px; align-items: start;
    }
    .chapter--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "art head" "art body"; }
    .chapter__art { align-self: center; }
}
.chapter__label { display: flex; align-items: center; gap: 12px; width: 100%; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink-strong); }
.chapter__count { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-tertiary); }
.chapter__count::before { content: attr(data-count); } /* CSS text keeps "01 / 06" out of llms-full.txt */
.chapter .display--md { font-size: clamp(30px, 2.4vw + 20px, 44px); }
.chapter .lead { font-size: 17px; }
.chapter__where { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chapter__where li {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line-strong);
    font-size: 13px; font-weight: 500; color: var(--ink-muted);
}
.chapter__where .icon { color: var(--brand); }

/* How it works: three numbered steps on a line; the last one, the result, in brand colour. */
.chapter__how { margin-bottom: 20px; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--ink-subtle); }
.how { list-style: none; padding: 0; counter-reset: how; }
.how li { counter-increment: how; position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 16px; padding-bottom: 22px; }
.how li:last-child { padding-bottom: 0; }
.how li::before {
    content: counter(how); grid-row: span 2; position: relative; z-index: 1;
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong);
    font-size: 13px; font-weight: 500; color: var(--ink-strong);
}
.how li:last-child::before { background: var(--brand); box-shadow: none; color: #fff; }
.how li:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 36px; bottom: 4px; width: 1px; background: var(--line-strong); }
.how b { padding-top: 5px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink-strong); }
.how li > span { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.chapter__note {
    display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 14px 16px;
    border-radius: var(--radius-lg); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-border);
    font-size: 15px; line-height: 1.5; color: var(--brand-soft-ink);
}
.chapter__note-icon { margin-top: 3px; color: var(--brand); }
.chapter__note a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
@media (max-width: 639px) {
    .chapter { gap: 28px; }
    .chapter__head { gap: 16px; }
    .how b { font-size: 15px; }
}

/* Scene: warm light from below, rings spreading from the bottom centre, and a simplified UI of the feature in the middle:
   cards and lists with example text, not the product's screens (see chapter-art.php). It can't be selected or pointed at.
   Animation steps as in bento-art. */
.stage {
    --step: 99;
    position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
    min-height: 400px; margin: 0; padding: 32px 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 28px;
    background:
        radial-gradient(55% 45% at 50% 100%, rgb(249 115 22 / 0.2), transparent 75%),
        radial-gradient(45% 40% at 100% 0%, rgb(253 186 116 / 0.22), transparent 70%),
        linear-gradient(180deg, #fbf8f4, #f1e9df);
    box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 #fff;
    font-size: 12px; line-height: 1.35; color: var(--ink-muted);
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; pointer-events: none;
}
.stage::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: repeating-radial-gradient(circle at 50% 100%, transparent 0 55px, rgb(28 25 23 / 0.07) 55px 56px);
    -webkit-mask-image: radial-gradient(80% 90% at 50% 100%, #000, transparent);
    mask-image: radial-gradient(80% 90% at 50% 100%, #000, transparent);
}

/* Each scene is drawn 320px wide: a little smaller on narrow phones, larger in the desktop column. */
.scene { position: relative; flex: none; width: 320px; display: flex; flex-direction: column; align-items: center; }
@container (max-width: 356px) { .scene { zoom: 0.86; } }
@media (min-width: 1024px) {
    .stage { min-height: 540px; }
    .stage .scene { zoom: 1.3; }
}
.fx-slide { opacity: var(--v); translate: calc((1 - var(--v)) * -20px) 0; }

/* Simplified UI pieces: cards, rows and chips with short example text. */
.sk-card {
    position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.05), 0 12px 24px -12px rgb(28 25 23 / 0.16), 0 32px 48px -32px rgb(28 25 23 / 0.24);
    font-size: 12px; line-height: 1.35; color: var(--ink-muted);
}
.sk-card b { font-weight: 500; color: var(--ink-strong); }
.sk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sk-head > b { font-size: 13px; }
.sk-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sk-stack b { font-size: 13px; }
.sk-stack b, .sk-stack small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-stack small { font-size: 11px; color: var(--ink-subtle); }
.sk-row > span:not([class]), .sk-line > span:not(.tick) { font-weight: 500; color: var(--ink-strong); }
.sk-total small { font-size: 12px; color: var(--ink-subtle); }
.sk-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.sk-row + .sk-row { border-top: 1px dashed var(--line-strong); }
.sk-row > b { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-total {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
    border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; background: #fcfbf9;
}
.sk-total b { font-size: 17px; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.sk-line { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--ink-subtle); }
.sk-line + .sk-line { border-top: 1px dashed var(--line-strong); }
.sk-line .tick { margin-left: auto; }
.sk-ico {
    width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center;
    background: var(--canvas); color: var(--ink-subtle); box-shadow: inset 0 0 0 1px var(--line);
}
.sk-ico--sm { width: 24px; height: 24px; border-radius: 7px; }
.sk-ico--brand { background: var(--brand-soft); color: var(--brand-soft-ink); box-shadow: inset 0 0 0 1px var(--brand-border); }
.sk-ico--ok { background: var(--success-soft); color: var(--success); box-shadow: none; }
.sk-av {
    width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface-muted); font-size: 9.5px; font-weight: 500; color: var(--ink-muted);
}
.sk-chip {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 12px; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); font-size: 12px;
}
.sk-chip b { font-weight: 500; color: var(--ink-strong); }
.sk-img { position: relative; aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(160deg, var(--stone-100), var(--stone-200)); color: rgb(28 25 23 / 0.28); }
.sk-img--new { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand-border); }
.tick {
    width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: var(--success); color: #fff;
}
.logos { display: flex; flex: none; }
.logo-tile {
    width: 32px; height: 32px; flex: none; overflow: hidden; border-radius: 9px; display: grid; place-items: center;
    background: var(--surface); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-strong);
    font-weight: 500; color: var(--ink-strong);
}
.logo-tile + .logo-tile { margin-left: -6px; }
.logo-tile img { display: block; width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.logo-tile--lg { width: 44px; height: 44px; border-radius: 12px; }

/* 01 Tilbud: the quote, and below it, offset to the right, the job it becomes. */
.scene--quote { align-items: stretch; }
.q-quote { width: 280px; }
.q-job { z-index: 2; width: 220px; margin: 12px 0 0 auto; }

/* 02 Sager: one job card with a status track, photos and documents; a note about the new photo hangs off its bottom corner. */
.scene--job { padding-bottom: 18px; }
.j-card { width: 300px; }
.j-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 12px 14px 2px; }
.j-track i { position: relative; height: 6px; overflow: hidden; border-radius: 999px; background: var(--line-strong); }
.j-track i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--brand); transform-origin: left; scale: var(--v, 1) 1; }
.j-track i:last-child::before { background: var(--success); }
[data-anim] .j-track i::before { transition: scale 700ms var(--ease-out); }
.j-section { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.j-section + .j-section { border-top: 1px solid var(--line); }
.j-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.j-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--canvas); color: var(--brand); }
.j-file span { font-weight: 500; color: var(--ink-strong); }
.j-toast { position: absolute; z-index: 3; bottom: 0; right: -4px; }

/* 03 Planlægning: the week with a row per person. One is ill; their job slides down to someone else. */
.c-card { width: 310px; }
.c-grid {
    --row: 34px;
    display: grid; grid-template-columns: 30px repeat(5, minmax(0, 1fr)); grid-template-rows: 18px repeat(4, var(--row));
    gap: 5px; padding: 10px 12px 12px;
}
.c-day { grid-row: 1; grid-column: var(--c); align-self: center; text-align: center; font-size: 11px; font-weight: 500; color: var(--ink-subtle); }
.c-day--today { color: var(--brand); }
.c-who { position: relative; grid-column: 1; grid-row: var(--r); align-self: center; }
.c-sick {
    position: absolute; z-index: 1; left: 12px; top: -8px; padding: 0 5px; border-radius: 999px;
    background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px rgb(190 18 60 / 0.2);
    font-size: 9px; font-weight: 500; line-height: 1.5;
}
.c-job, .c-off, .c-slot, .c-move { grid-column: var(--c) / span var(--s); grid-row: var(--r); }
.c-job {
    display: flex; align-items: center; min-width: 0; padding: 0 6px 0 8px; overflow: hidden; border-radius: 7px;
    background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand);
    font-size: 10.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; color: var(--brand-soft-ink);
}
.c-job--alt { background: var(--surface-muted); box-shadow: inset 3px 0 0 var(--stone-400); color: var(--ink-strong); }
.c-off { border-radius: 7px; background: repeating-linear-gradient(-45deg, rgb(190 18 60 / 0.09) 0 5px, transparent 5px 10px); box-shadow: inset 0 0 0 1px rgb(190 18 60 / 0.16); }
.c-slot { border-radius: 7px; border: 1.5px dashed var(--brand-border); background: rgb(255 247 237 / 0.6); }
.c-move { position: relative; z-index: 2; display: grid; translate: 0 calc((1 - var(--v)) * (-1 * var(--row) - 5px)); }
[data-anim] .c-move { transition: translate 900ms cubic-bezier(0.65, 0, 0.35, 1); }
.c-move > .c-job { grid-column: auto; grid-row: auto; }
.c-job--lift {
    position: relative; background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--brand), inset 3px 0 0 var(--brand), 0 calc(var(--v) * 10px) calc(var(--v) * 20px) -8px rgb(28 25 23 / 0.35);
    rotate: calc(var(--v) * -3deg); scale: calc(1 + var(--v) * 0.05);
}
[data-anim] .c-job--lift { transition: rotate 350ms var(--ease-out), scale 350ms var(--ease-out), box-shadow 350ms ease; }
.c-move .mock-cursor { left: auto; right: 8px; top: auto; bottom: -8px; }
.c-note { margin-top: 16px; }

/* 04 Timer: the week's total on top, filling a bar; each day's entry slides in below. */
.h-sum { width: 300px; display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.h-sum__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sk-stack .h-total { font-size: 26px; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
.h-total > span { text-align: left; }
.h-bar { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 999px; background: var(--stone-100); }
.h-bar i { width: calc(var(--v) * var(--w)); background: var(--brand); }
.h-bar .h-bar--alt { background: var(--orange-400); }
[data-anim] .h-bar i { transition: width 600ms var(--ease-out); }
.h-list { list-style: none; width: 270px; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.h-entry { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; box-shadow: 0 1px 2px rgb(28 25 23 / 0.05), 0 8px 16px -10px rgb(28 25 23 / 0.2); }
.h-entry > b { margin-left: auto; font-variant-numeric: tabular-nums; }
.h-day { width: 34px; flex: none; padding: 3px 0; border-radius: 6px; text-align: center; background: var(--brand-soft); font-size: 11px; font-weight: 500; color: var(--brand-soft-ink); }

/* 05 Materialer: your catalogue beside the job; picked items move across, and the margin bar grows. */
.m-cols { position: relative; display: flex; align-items: flex-start; gap: 18px; }
.m-card { width: 151px; overflow: hidden; }
.m-card .sk-head { padding: 10px 12px; }
.m-item { display: flex; align-items: center; gap: 7px; padding: 9px 9px; }
.m-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; color: var(--ink-strong); }
.m-item + .m-item { border-top: 1px dashed var(--line-strong); }
.m-item > b { margin-left: auto; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-pick { background: rgb(255 247 237 / var(--v)); box-shadow: inset 3px 0 0 rgb(234 88 12 / var(--v)); }
[data-anim] .m-pick { transition: background-color 300ms ease, box-shadow 300ms ease; }
.m-arrow {
    position: absolute; z-index: 2; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
    display: grid; place-items: center; background: var(--brand); color: #fff; box-shadow: 0 6px 14px -6px rgb(194 65 12 / 0.6);
}
.m-sum { width: 320px; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.m-sum__top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.m-gain { font-size: 15px; font-variant-numeric: tabular-nums; }
.m-sum .m-gain { color: var(--success); }
.m-bar { display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--stone-100); }
.m-bar i { width: calc(var(--v) * var(--w)); background: var(--stone-400); }
.m-bar .m-bar__gain { order: 1; background: var(--success); }
[data-anim] .m-bar i { transition: width 600ms var(--ease-out); }
.m-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-subtle); }
.m-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.m-legend u { width: 8px; height: 8px; border-radius: 2px; background: var(--stone-400); }
.m-legend__gain { color: var(--success); }
.m-legend__gain u { background: var(--success); }

/* 06 Fakturering: job → invoice → accounts, joined by wires that fill in. */
.i-card { width: 290px; }
.i-card .sk-row > .tick { margin-left: 0; }
.i-total { font-size: 15px; letter-spacing: -0.2px; }
.i-wire { position: relative; flex: none; width: 2px; height: 26px; background: var(--line-strong); }
.i-wire i { position: absolute; inset: 0; background: var(--brand); transform-origin: top; scale: 1 var(--v); }
[data-anim] .i-wire i { transition: scale 500ms var(--ease-out); }
.scene--invoice .swap { margin-left: auto; }

/* "Også med i prisen": three cards with a small scene, three plain ones, then the KS box for the authorised trades. */
.extras { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.extra {
    display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: clamp(20px, 2.4vw, 28px);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-2xl);
}
.extra--scene { gap: 0; padding: 8px; }
.extra--scene .extra__text { padding: 20px 16px 16px; }
.extra__icon {
    width: 36px; height: 36px; margin-bottom: 12px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
    background: var(--canvas); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.extra__text { display: flex; flex-direction: column; gap: 6px; }
.extra h3 { font-size: 18px; line-height: 1.3; color: var(--ink-strong); }
.extra p { font-size: 15px; color: var(--ink-muted); max-width: 40ch; }
.stage--mini { min-height: 0; height: 200px; padding: 20px; border-radius: var(--radius-xl); }
.mini {
    width: 100%; max-width: 300px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.05), 0 12px 24px -12px rgb(28 25 23 / 0.16);
}
.mini b { font-weight: 500; color: var(--ink-strong); }
.mini--margin { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.mini__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 36px; align-items: center; gap: 10px; }
.mini__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink-strong); }
.mini__bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-muted); }
.mini__bar i { display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange-400), var(--brand)); transform-origin: left; scale: var(--v) 1; }
[data-anim] .mini__bar i { transition: scale 900ms var(--ease-out); transition-delay: calc(var(--i) * 120ms); }
.mini__row.is-low .mini__bar i { background: var(--stone-400); }
.mini__row b { text-align: right; font-variant-numeric: tabular-nums; }
.mini__foot { font-size: 11px; color: var(--ink-subtle); }
.cu-card { width: 100%; max-width: 270px; }
.cu-card .sk-head { padding: 10px 12px; }
.cu-who { display: flex; align-items: center; gap: 10px; }
.cu-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.cu-row + .cu-row { border-top: 1px dashed var(--line-strong); }
.cu-job { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink-strong); }
.cu-row > small { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-subtle); }

.mini--connect { display: flex; align-items: center; justify-content: center; width: auto; padding: 16px 18px; }
.mini__wire { position: relative; overflow: hidden; width: 48px; height: 2px; margin-inline: 8px; }
/* Slides one dash period via transform (sub-pixel, composited); background-position snaps to whole pixels and judders. */
.mini__wire::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -10px; right: 0;
    background: repeating-linear-gradient(90deg, var(--brand) 0 6px, transparent 6px 10px);
    animation: of-dash 900ms linear infinite; will-change: transform;
}
@keyframes of-dash { to { transform: translateX(10px); } }

.ks-note {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 24px;
    padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-2xl);
    border: 1.5px dashed var(--stone-400); background: rgb(255 255 255 / 0.45);
}
.ks-note__icon {
    width: 44px; height: 44px; align-self: start; border-radius: var(--radius-lg); display: grid; place-items: center;
    background: var(--surface); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.ks-note__eyebrow { margin-bottom: 6px; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink-subtle); }
.ks-note h3 { margin-bottom: 6px; font-size: 20px; line-height: 1.3; color: var(--ink-strong); }
.ks-note__text > p:last-child { font-size: 15px; color: var(--ink-muted); max-width: 62ch; }
.ks-note__links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ks-note__links a {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
    font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--ink-strong);
    transition: border-color 200ms ease, background-color 200ms ease;
}
.ks-note__links a:hover { color: var(--ink-strong); border-color: var(--brand-border); background: #fffaf5; }
.ks-note__links .icon:first-child { color: var(--brand); }
.ks-note__links .icon:last-child { margin-left: auto; color: var(--ink-tertiary); transition: transform 200ms ease; }
.ks-note__links a:hover .icon:last-child { transform: translateX(3px); color: var(--brand); }

@media (max-width: 1023px) {
    .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ks-note { grid-template-columns: auto minmax(0, 1fr); }
    .ks-note__links { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .ks-note__links li { flex: 1 1 160px; }
}
@media (max-width: 639px) {
    .extras { grid-template-columns: minmax(0, 1fr); }
    /* Plain cards as compact rows: icon beside the text. */
    .extra:not(.extra--scene) { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; }
    .extra:not(.extra--scene) .extra__icon { margin-bottom: 0; }
    .extra h3 { font-size: 17px; }
    .ks-note { grid-template-columns: minmax(0, 1fr); }
    .ks-note__icon { display: none; }
    .ks-note__links { flex-direction: column; }
    .ks-note__links li { flex: none; }
}

/* ---------- Trade pages (/brancher, /brancher/{fag}) ---------- */
.crumbs ol {
    list-style: none; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px;
    font-size: 13px; line-height: 1.4; color: var(--ink-subtle);
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--ink-tertiary); }
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--ink); }
.features-intro .crumbs { margin-bottom: -12px; }

.trade-modules .module:first-child { padding-top: clamp(40px, 5vw, 64px); }

/* Overview: one card per trade. */
.trade-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trade-card {
    height: 100%; display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4vw, 28px);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
    color: var(--ink-muted);
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.trade-card:hover { color: var(--ink-muted); border-color: var(--brand-border); box-shadow: var(--shadow-overlay); transform: translateY(-2px); }
.trade-card__icon {
    width: 40px; height: 40px; margin-bottom: 12px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-soft-ink); box-shadow: inset 0 0 0 1px var(--brand-border);
}
.trade-card h3 { font-size: 20px; line-height: 1.3; color: var(--ink-strong); }
.trade-card p { font-size: 15px; }
.trade-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 500; color: var(--primary); }
.trade-card__more .icon { transition: transform 200ms ease; }
.trade-card:hover .trade-card__more .icon { transform: translateX(3px); }

/* Compact links to the other trades. */
.trade-links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.trade-links a {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
    font-size: 15px; font-weight: 500; color: var(--ink-strong);
    transition: border-color 200ms ease, background-color 200ms ease;
}
.trade-links a:hover { color: var(--ink-strong); border-color: var(--brand-border); background: #fffaf5; }
.trade-links__icon {
    width: 32px; height: 32px; flex: none; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-soft-ink); box-shadow: inset 0 0 0 1px var(--brand-border);
}
.trade-links__label { flex: 1; min-width: 0; }
.trade-links__arrow { color: var(--ink-tertiary); transition: transform 200ms ease, color 200ms ease; }
.trade-links a:hover .trade-links__arrow { color: var(--brand); transform: translateX(3px); }

@media (max-width: 959px) {
    .trade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 539px) {
    .trade-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pricing ---------- */
.pricing-intro .section-header { align-items: center; text-align: center; margin-inline: auto; }

.pricing {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px;
    width: 100%; max-width: 1040px; margin-inline: auto;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-float);
}
.pricing__plan { display: flex; flex-direction: column; gap: 28px; padding: clamp(20px, 4vw, 32px); min-width: 0; }
.pricing__head { display: flex; flex-direction: column; gap: 6px; }
.pricing__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pricing__title :is(h2, h3) { font-size: 22px; line-height: 1.25; color: var(--ink-strong); }
.pricing__unit { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pricing__unit strong { font-size: 40px; line-height: 1.15; letter-spacing: -0.8px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.pricing__unit span { font-size: 14px; color: var(--ink-muted); }
/* Once the calculator shows, the total carries the weight and the per-user price steps back. */
.pricing:has(.pricing__calc:not([hidden])) .pricing__unit strong { font-size: 22px; letter-spacing: -0.3px; }

.pricing__calc { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line); }
.pricing__calc[hidden] { display: none; }
.pricing__users { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pricing__users label { font-size: 15px; font-weight: 500; color: var(--ink); }

.stepper {
    display: inline-flex; align-items: center; height: 40px; padding: 3px;
    background: var(--canvas); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
}
.stepper__btn {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-muted); cursor: pointer;
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.stepper__btn:hover { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(28 25 23 / 0.08); }
.stepper__btn:disabled { color: var(--ink-tertiary); background: transparent; box-shadow: none; cursor: default; }
.stepper__input {
    width: 48px; height: 32px; padding: 0; border: 0; background: transparent; text-align: center;
    font: 500 16px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-strong);
    appearance: textfield; -moz-appearance: textfield;
}
.stepper__input::-webkit-inner-spin-button, .stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__input:focus-visible { outline-offset: 0; border-radius: 4px; }

/* --p (0–1) is the thumb position; the fill stops at the thumb's centre. */
.range {
    --thumb: 22px;
    --fill: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p, 0));
    -webkit-appearance: none; appearance: none; display: block;
    width: 100%; height: 28px; margin: 8px 0 0; background: transparent; cursor: pointer;
}
.range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px;
    background: linear-gradient(to right, var(--brand) var(--fill), var(--surface-muted) var(--fill));
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: -8px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-overlay);
    transition: transform var(--duration) var(--ease);
}
.range:active::-webkit-slider-thumb { transform: scale(1.08); }
.range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-muted); }
.range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--brand); }
.range::-moz-range-thumb {
    width: var(--thumb); height: var(--thumb); border-radius: 50%; box-sizing: border-box;
    background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-overlay);
}
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--brand); outline-offset: 2px; }
.range:focus-visible::-moz-range-thumb { outline: 2px solid var(--brand); outline-offset: 2px; }
.range-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }

.pricing__total { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.pricing__total-label { font-size: 14px; color: var(--ink-muted); }
.pricing__total-amount {
    font-size: clamp(40px, 5vw, 52px); line-height: 1.1; letter-spacing: -1.2px; font-weight: 500;
    font-variant-numeric: tabular-nums; color: var(--ink-strong);
}

.pricing__cta { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.pricing__cta .btn { height: 48px; }
.pricing__cta .fineprint { text-align: center; color: var(--ink-subtle); }

.pricing__included {
    display: flex; flex-direction: column; gap: 28px; padding: clamp(20px, 4vw, 32px); min-width: 0;
    background: var(--brand-soft); border: 1px solid var(--brand-border); border-radius: var(--radius-xl);
}
.pricing__group { display: flex; flex-direction: column; gap: 16px; }
.pricing__group + .pricing__group { padding-top: 28px; border-top: 1px solid var(--brand-border); }
.pricing__group-title { font-size: 13px; line-height: 1.3; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--brand-soft-ink); }

@media (min-width: 860px) {
    .pricing { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.badge {
    display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid; border-radius: var(--radius-xs);
    font-size: 12px; line-height: 1.4; font-weight: 500; white-space: nowrap;
}
.badge--brand { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-soft-ink); }
.badge--neutral { background: var(--surface-muted); border-color: var(--line-strong); color: var(--ink-muted); }

/* Teaser while the price is secret: a blurred placeholder where the amount goes, and a live dot saying it is coming. */
.pricing__secret { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.pricing__blur { filter: blur(10px); user-select: none; pointer-events: none; }
.pricing__soon { display: flex; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.pricing__soon b { font-weight: 500; color: var(--ink-strong); }
.pricing__soon .pulse-dot { position: relative; top: -1px; }

.pricing-more { justify-content: center; margin-top: -24px; } /* belongs to the calculator above, so closer than the stack gap */

/* ---------- Pricing page ---------- */
/* Intro: centred like the features intro; the calculator floats in a warm glow on the hero windows' faint grid. */
.price-intro__stage { position: relative; isolation: isolate; width: 100%; margin-top: 16px; text-align: left; }
.price-intro__stage::before {
    content: ""; position: absolute; inset: -72px -16px; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(to right, rgb(28 25 23 / 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(28 25 23 / 0.06) 1px, transparent 1px);
    background-size: 32px 32px; background-position: center;
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
    mask-image: radial-gradient(closest-side, #000, transparent);
}
.price-intro__stage::after {
    content: ""; position: absolute; inset: -12% 0; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgb(249 115 22 / 0.14), transparent 70%);
}
.price-intro .pricing { animation: of-rise 700ms 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Everything included: the toolbox surface, each cell with its own short check list. */
.inventory__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.inventory .toolbox__icon { margin-bottom: 0; background: var(--brand-soft); color: var(--brand-soft-ink); box-shadow: inset 0 0 0 1px var(--brand-border); }
.inventory h3 { margin-bottom: 8px; }
.inventory .check-list { gap: 8px; }
.inventory .check-list li { font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.inventory .check-list .icon { margin-top: 3px; }

/* The bill: what comes with it on the left, a paper receipt on the right where everything but the users costs 0 kr. */
.price-bill { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 960px) {
    .price-bill { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.price-bill__intro { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.price-perks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.price-perks li { display: flex; gap: 16px; align-items: flex-start; }
.price-perks h3 { font-size: 16px; line-height: 1.4; letter-spacing: -0.1px; color: var(--ink-strong); }
.price-perks p { margin-top: 2px; font-size: 15px; color: var(--ink-muted); max-width: 42ch; }

/* The shadow sits on .receipt because the mask that cuts the torn edge on .receipt__paper would clip it. */
.receipt-wrap { position: relative; width: 100%; max-width: 460px; justify-self: center; padding-bottom: 24px; }
.receipt { filter: drop-shadow(0 28px 32px rgb(28 25 23 / 0.14)) drop-shadow(0 2px 3px rgb(28 25 23 / 0.06)); }
.receipt__paper {
    --r: 6px;
    padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 32px) calc(clamp(32px, 4vw, 44px) + var(--r));
    background: var(--surface); border-top: 4px solid var(--brand); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    -webkit-mask: radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) 50% 100% / calc(var(--r) * 2.8) 100% repeat-x;
    mask: radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) 50% 100% / calc(var(--r) * 2.8) 100% repeat-x;
}
.receipt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px dashed var(--line-strong); }
.receipt__head p { display: flex; flex-direction: column; font-size: 13px; line-height: 1.4; color: var(--ink-subtle); }
.receipt__head b { font-size: 17px; font-weight: 500; letter-spacing: -0.2px; color: var(--ink-strong); }
.receipt__lines { padding: 6px 0; }
.receipt__lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; }
.receipt__lines > div + div { border-top: 1px dashed var(--line); }
.receipt__lines dt { display: flex; flex-direction: column; min-width: 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.receipt__lines dt small { font-size: 13px; color: var(--ink-subtle); }
.receipt__lines dd { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-strong); }
.receipt__main dt { font-weight: 500; color: var(--ink-strong); }
.receipt__lines .receipt__free { color: var(--success); }
.receipt__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-top: 18px; border-top: 1.5px solid var(--ink-strong);
}
.receipt__total span { font-size: 15px; font-weight: 500; color: var(--ink-strong); }
.receipt__total strong { font-size: clamp(30px, 2vw + 16px, 40px); line-height: 1.1; letter-spacing: -1px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.receipt-wrap__chip { left: -36px; bottom: 0; animation-delay: 400ms, 1.6s; }
@media (max-width: 1099px) {
    .receipt-wrap__chip { left: -12px; }
}

/* Timeline (trial, how it works): three cards joined by a dashed line through their numbers. */
.head-center .section-header { align-items: center; text-align: center; margin-inline: auto; }
.actions--center { justify-content: center; }
.timeline {
    --pad: clamp(24px, 3vw, 32px);
    list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.timeline__step {
    position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: var(--pad);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-2xl);
}
.timeline__step:not(:last-child)::after, .timeline__step:not(:first-child)::before {
    content: ""; position: absolute; top: calc(var(--pad) + 16px); border-top: 1.5px dashed var(--orange-300);
}
.timeline__step:not(:last-child)::after { left: calc(var(--pad) + 44px); right: -17px; }
.timeline__step:not(:first-child)::before { left: 0; width: calc(var(--pad) - 12px); }
.timeline__mark {
    width: 32px; height: 32px; margin-bottom: 20px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-border);
    font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--brand-soft-ink);
}
.timeline__mark::before { content: attr(data-num); } /* CSS text keeps the numbers out of llms-full.txt */
.timeline__step:last-child .timeline__mark { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-subtle); color: #fff; }
.timeline__when { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--brand); }
.timeline h3 { font-size: 20px; line-height: 1.3; color: var(--ink-strong); }
.timeline__text { color: var(--ink-muted); max-width: 38ch; }

@media (max-width: 859px) {
    .timeline { grid-template-columns: minmax(0, 1fr); }
    .timeline__step::before, .timeline__step::after { display: none; }
}

/* ---------- Integrations page ---------- */
/* Hub: Ordoflow in the middle of a warm window. Invoices pulse out to accounting on the right; the grossist (on the way,
   dashed) feeds in from the left. Nodes sit on the SVG's 760×280 grid via --x/--y, so lines and cards scale together. */
@keyframes of-flow { from { stroke-dashoffset: 152; } to { stroke-dashoffset: 0; } }
@keyframes of-ring { from { box-shadow: 0 0 0 0 rgb(249 115 22 / 0.3), var(--core-shadow); } to { box-shadow: 0 0 0 20px rgb(249 115 22 / 0), var(--core-shadow); } }

.int-hub {
    position: relative; isolation: isolate; overflow: hidden; width: 100%; margin: 16px 0 0;
    padding: clamp(32px, 4vw, 48px) clamp(16px, 4vw, 48px);
    border-radius: var(--radius-2xl); border: 1px solid var(--line-strong);
    background:
        radial-gradient(50% 70% at 50% 50%, rgb(249 115 22 / 0.12), transparent 70%),
        radial-gradient(60% 50% at 100% 0%, rgb(249 115 22 / 0.08), transparent 70%),
        var(--surface-muted);
    animation: of-fade 600ms 100ms ease both;
}
.int-hub::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(to right, rgb(28 25 23 / 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(28 25 23 / 0.06) 1px, transparent 1px);
    background-size: 32px 32px; background-position: center;
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
    mask-image: radial-gradient(closest-side, #000, transparent);
}
.int-hub__stage { position: relative; max-width: 760px; margin-inline: auto; aspect-ratio: 760 / 280; text-align: left; }
.int-hub__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.int-hub__wire { stroke: var(--orange-300); stroke-width: 2; }
.int-hub__wire--soon { stroke: var(--stone-400); stroke-dasharray: 4 6; }
.int-hub__pulse {
    stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 140;
    animation: of-flow 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.int-hub__core {
    --core-shadow: 0 1px 2px rgb(28 25 23 / 0.06), 0 24px 48px -20px rgb(28 25 23 / 0.35);
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: calc(112 / 760 * 100%); aspect-ratio: 1; border-radius: 28%;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--core-shadow);
    animation: of-ring 2.2s ease-out infinite;
}
.int-hub__core img { width: 56%; height: auto; display: block; }
.int-node {
    position: absolute; left: calc(var(--x) / 760 * 100%); top: calc(var(--y) / 280 * 100%); translate: -50% -50%;
    width: calc(200 / 760 * 100%); display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    animation: of-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(300ms + var(--i) * 120ms);
}
.int-node--soon { background: rgb(255 255 255 / 0.55); border-style: dashed; border-color: var(--stone-400); box-shadow: none; }
.int-node__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.int-node__text b, .int-node__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-node__text b { font-size: 14px; font-weight: 500; color: var(--ink-strong); }
.int-node__text small { font-size: 12px; color: var(--ink-subtle); }

/* Logo tile: the system's logo when the file exists, otherwise a monogram (or an icon) on the brand tint. */
.int-logo {
    width: 48px; height: 48px; flex: none; border-radius: var(--radius-lg); overflow: hidden;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #fff, var(--brand-soft)); color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand-border), 0 1px 2px rgb(234 88 12 / 0.12);
    font-size: 22px; font-weight: 500; line-height: 1; letter-spacing: -0.02em;
}
.int-logo img { width: 62%; height: 62%; object-fit: contain; }
/* A real logo keeps its own colours, so it sits on white rather than the brand tint. */
.int-logo:has(img) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgb(28 25 23 / 0.06); }
.int-logo--sm { width: 34px; height: 34px; border-radius: var(--radius-md); font-size: 16px; }
.integration--soon .int-logo, .int-node--soon .int-logo, .int-logo--add {
    background: var(--canvas); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Groups (Regnskab, Grossister …), divided by a hairline; each a heading over a grid of cards. */
.int-group { scroll-margin-top: 96px; }
.int-group + .int-group { margin-top: clamp(64px, 8vw, 96px); padding-top: clamp(64px, 8vw, 96px); border-top: 1px solid var(--line-strong); }
.int-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.integration {
    display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: clamp(24px, 3vw, 32px);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-2xl);
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 8px 24px -16px rgb(28 25 23 / 0.12);
    transition: border-color 300ms ease, box-shadow 300ms ease, translate 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.integration:not(.integration--request):hover { border-color: var(--brand-border); box-shadow: var(--shadow-float); translate: 0 -2px; }
.integration--wide { grid-column: span 2; }
.integration__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.integration__body { display: flex; flex-direction: column; gap: 2px; }
.integration h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.3px; color: var(--ink-strong); }
.integration__type { font-size: 14px; color: var(--ink-subtle); }
.integration__summary { margin-top: 10px; color: var(--ink-muted); max-width: 46ch; }
.integration .check-list { gap: 8px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.integration .check-list li { font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.integration .check-list .icon { margin-top: 3px; }
.integration--soon { background: linear-gradient(180deg, var(--surface) 40%, #fcfbf9); }
.integration--soon .check-list .icon { color: var(--ink-tertiary); }
.integration--request { background: transparent; border: 1.5px dashed var(--stone-400); box-shadow: none; }
.integration--request .faq-contact__link { margin-top: auto; }

@media (max-width: 959px) {
    .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .integration--wide { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
    .int-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the hub stacks (grossist, Ordoflow, accounting) and short lines replace the curves. */
@media (max-width: 719px) {
    .int-hub__stage { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
    .int-hub__wires { display: none; }
    .int-hub__core, .int-node { position: relative; left: auto; top: auto; translate: none; }
    .int-hub__core { width: 88px; }
    .int-hub__core::before, .int-hub__core::after { content: ""; position: absolute; left: 50%; height: 28px; }
    .int-hub__core::before { bottom: calc(100% + 1px); border-left: 1.5px dashed var(--stone-400); }
    .int-hub__core::after { top: calc(100% + 1px); border-left: 2px solid var(--orange-300); }
    .int-node { width: 100%; max-width: 300px; }
    .int-node--soon { order: -1; }
}

/* ---------- FAQ ---------- */
.faq-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 72px); align-items: start; }
.faq-section__intro { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 960px) {
    .faq-section { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.faq-contact {
    display: flex; gap: 16px; align-items: flex-start; max-width: 26rem; padding: 20px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
}
.faq-contact__body { display: flex; flex-direction: column; gap: 4px; }
.faq-contact__title { font-weight: 500; color: var(--ink-strong); }
.faq-contact__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 500; }
.faq-contact__link .icon { transition: transform var(--duration) var(--ease); }
.faq-contact__link:hover .icon { transform: translateX(2px); }

/* One surface; rows divided by hairlines. The number column sets the indent the answer aligns to. */
.faq {
    --faq-pad: clamp(20px, 3vw, 28px);
    --faq-num: 32px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
    overflow: hidden;
}
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
    display: grid; grid-template-columns: var(--faq-num) minmax(0, 1fr) auto; align-items: center; gap: 16px;
    padding: 22px var(--faq-pad); cursor: pointer; list-style: none;
    transition: background-color var(--duration) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgb(28 25 23 / 0.02); }
.faq summary:focus-visible { outline-offset: -2px; }
.faq__num { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-tertiary); transition: color var(--duration) var(--ease); }
.faq summary h3 { font-size: 17px; line-height: 1.45; letter-spacing: -0.1px; color: var(--ink-strong); text-wrap: pretty; }
.faq details[open] .faq__num { color: var(--brand); }

/* Plus that becomes a minus: the vertical stroke collapses. */
.faq__toggle {
    position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%;
    border: 1px solid var(--line-strong); color: var(--ink-muted);
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.faq__toggle::before, .faq__toggle::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px;
    border-radius: 1px; background: currentColor; transition: transform 200ms var(--ease);
}
.faq__toggle::after { transform: rotate(90deg); }
.faq summary:hover .faq__toggle { border-color: var(--stone-400); color: var(--ink); }
.faq details[open] .faq__toggle { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-soft-ink); }
.faq details[open] .faq__toggle::after { transform: rotate(0deg); }

.faq details p {
    padding: 0 calc(var(--faq-pad) + 44px) 24px calc(var(--faq-pad) + var(--faq-num) + 16px);
    color: var(--ink-muted); max-width: 46rem;
}

/* Animate open/close where the browser can (Chromium 131+); elsewhere it simply snaps. */
@supports selector(::details-content) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content {
        height: 0; overflow: clip;
        transition: height 250ms var(--ease), content-visibility 250ms allow-discrete;
    }
    .faq details[open]::details-content { height: auto; }
}

@media (max-width: 560px) {
    .faq { --faq-num: 0px; }
    .faq__num { display: none; }
    .faq summary { grid-template-columns: minmax(0, 1fr) auto; }
    .faq details p { padding-right: var(--faq-pad); padding-left: var(--faq-pad); }
}

/* ---------- Brand panel ---------- */
/* Copy sits on the darker left half (white text keeps AA contrast there); the glow and the stepped bars live on the right. */
@property --mx { syntax: "<length-percentage>"; inherits: true; initial-value: 80%; }
@property --my { syntax: "<length-percentage>"; inherits: true; initial-value: 10%; }
@keyframes of-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8%, 12%) scale(1.15); } }
@keyframes of-pulse { from { box-shadow: 0 0 0 0 rgb(74 222 128 / 0.6); } to { box-shadow: 0 0 0 10px rgb(74 222 128 / 0); } }

.brand-panel {
    position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-2xl);
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
    gap: clamp(40px, 5vw, 72px); padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 80px);
    background:
        radial-gradient(55% 75% at 100% 0%, rgb(251 146 60 / 0.55), transparent 70%),
        radial-gradient(45% 70% at 0% 100%, rgb(124 45 18 / 0.75), transparent 75%),
        linear-gradient(115deg, var(--orange-800) 0%, var(--orange-700) 45%, var(--orange-600) 100%);
    color: #fff;
}
.brand-panel__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; mix-blend-mode: soft-light; opacity: 0.5; }
/* Fine grid that fades out towards the copy. */
.brand-panel::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background-image:
        linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px);
    background-size: 56px 56px; background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(60% 90% at 85% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(60% 90% at 85% 40%, #000 0%, transparent 80%);
}
/* Spotlight that follows the pointer (main.js sets --mx/--my); rests top right. */
.brand-panel::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(520px circle at var(--mx) var(--my), rgb(255 255 255 / 0.14), transparent 60%);
    transition: --mx 500ms ease-out, --my 500ms ease-out;
}
.brand-panel__glow {
    position: absolute; z-index: -2; width: 560px; height: 560px; right: -120px; top: -200px; border-radius: 50%;
    background: radial-gradient(circle, rgb(253 186 116 / 0.5), transparent 65%); pointer-events: none;
    animation: of-drift 14s ease-in-out infinite alternate;
}

.brand-panel__content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.brand-panel__eyebrow {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border-radius: 999px;
    font-size: 14px; font-weight: 500; line-height: 1.3; color: #fff;
    background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.22);
}
.brand-panel__pulse { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #4ade80; animation: of-pulse 2s ease-out infinite; }
.brand-panel h2 { font-size: clamp(36px, 3.2vw + 18px, 60px); line-height: 1.05; letter-spacing: -0.035em; color: #fff; max-width: 14ch; }
.brand-panel__body { font-size: 18px; line-height: 1.55; color: rgb(255 255 255 / 0.9); max-width: 34rem; }
.brand-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 12px; }
.brand-panel :focus-visible { outline-color: #fff; outline-offset: 3px; }

.brand-panel__cta { height: 54px; padding: 0 24px; border-radius: 14px; font-size: 16px; transition: background-color var(--duration) var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.brand-panel__cta .icon { transition: transform 200ms var(--ease); }
.brand-panel__cta:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 16px 32px -12px rgb(124 45 18 / 0.85); }
.brand-panel__cta:hover .icon { transform: translateX(3px); }
.brand-panel__cta:active { transform: none; }
.brand-panel__mail {
    display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: rgb(255 255 255 / 0.9);
    text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.35); text-underline-offset: 5px;
    transition: color var(--duration) var(--ease), text-decoration-color var(--duration) var(--ease);
}
.brand-panel__mail:hover { color: #fff; text-decoration-color: #fff; }

/* The logo's three stepped bars, as white cards. They slide in once the panel is on screen (main.js adds .is-in). */
.brand-panel__bars { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; --step: clamp(16px, 3vw, 48px); }
.brand-panel__bar {
    display: flex; align-items: center; gap: 14px; width: min(100%, 360px); margin-left: calc(var(--i) * var(--step));
    padding: 14px 22px 14px 14px; border-radius: 22px; background: #fff; color: var(--ink);
    box-shadow: 0 24px 48px -20px rgb(124 45 18 / 0.65), 0 2px 6px -2px rgb(28 25 23 / 0.12);
    transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--i) * 120ms + 150ms);
}
.brand-panel[data-anim]:not(.is-in) .brand-panel__bar { opacity: 0; transform: translateX(48px); }
.brand-panel__bar-icon {
    width: 44px; height: 44px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-soft-ink);
}
.brand-panel__bar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-panel__bar-text strong { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.brand-panel__bar-text span { font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
.brand-panel__faces { display: flex; flex: none; }
.brand-panel__face { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; font-size: 13px; }
.brand-panel__face + .brand-panel__face { margin-left: -10px; }

@media (max-width: 900px) {
    .brand-panel { grid-template-columns: minmax(0, 1fr); }
    .brand-panel__glow { width: 420px; height: 420px; right: -160px; top: auto; bottom: -180px; }
    .brand-panel::before {
        -webkit-mask-image: radial-gradient(80% 60% at 70% 100%, #000 0%, transparent 80%);
        mask-image: radial-gradient(80% 60% at 70% 100%, #000 0%, transparent 80%);
    }
}
@media (max-width: 480px) {
    .brand-panel__bars { --step: 0px; }
    .brand-panel__bar { width: 100%; }
    .brand-panel__actions, .brand-panel__cta { width: 100%; }
}

/* ---------- About ---------- */
/* Portraits are greyscale; multiplying onto the warm surface turns white studio backdrops warm grey so they all match.
   Initials stand in until a photo exists. */
.portrait {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: #efeeec; /* near-neutral grey: less warm than --surface-muted, so the multiply tint is lighter */
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; mix-blend-mode: multiply; }
.portrait::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(28 25 23 / 0.06); pointer-events: none; }
.portrait--empty::before { content: attr(data-initials); font-weight: 500; letter-spacing: -0.02em; color: var(--brand); } /* CSS text keeps the initials out of llms-full.txt */

/* Hero: copy left; the first three of the team on the right (everyone is in the team grid below), staggered in a warm window like the home page's hero preview.
   The facts run full width underneath. */
.about-faces {
    position: relative; isolation: isolate; overflow: hidden; min-width: 0; margin: 0;
    padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 48px) clamp(88px, 9vw, 112px);
    border-radius: var(--radius-2xl); border: 1px solid var(--line-strong);
    background:
        radial-gradient(70% 60% at 85% 0%, rgb(249 115 22 / 0.14), transparent 70%),
        radial-gradient(60% 50% at 0% 100%, rgb(249 115 22 / 0.08), transparent 70%),
        var(--surface-muted);
    animation: of-fade 600ms 100ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.about-faces__grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 16px); align-items: start; }
.about-faces__item { position: relative; min-width: 0; animation: of-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(200ms + var(--i) * 120ms); }
.about-faces__item:nth-child(2) { margin-top: clamp(28px, 4vw, 56px); }
.about-faces__item:nth-child(3) { margin-top: clamp(14px, 2vw, 28px); }
.about-faces__photo {
    aspect-ratio: 3 / 4; border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 24px 48px -24px rgb(28 25 23 / 0.32);
}
.about-faces__photo.portrait--empty { background: var(--surface); }
.about-faces__photo.portrait--empty::before { font-size: clamp(24px, 3vw, 36px); }
.about-faces__name {
    position: absolute; left: 8px; bottom: 8px; padding: 4px 10px; border-radius: 999px;
    background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-strong);
}
.about-faces__chip { right: clamp(12px, 3vw, 32px); bottom: clamp(16px, 2.5vw, 28px); animation-delay: 750ms, 1.6s; }

.about-intro { row-gap: 48px; } /* the facts belong to the hero: same gap as heading to content elsewhere */
.about-facts {
    grid-column: 1 / -1; list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
    background: var(--line-strong); border: 1px solid var(--line-strong); border-radius: var(--radius-2xl);
    overflow: hidden;
}
.about-facts li { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: clamp(20px, 3vw, 32px); background: var(--surface); font-size: 15px; line-height: 1.4; color: var(--ink-muted); }
.about-facts strong {
    font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -1px; font-weight: 500;
    font-variant-numeric: tabular-nums; color: var(--ink-strong);
}

/* Team: the heading over a grid of short profile cards, three to a row, that wraps onto new rows as the team grows. */
.about-team { display: flex; flex-direction: column; gap: 48px; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.member {
    display: flex; flex-direction: column; min-width: 0; padding: 8px; scroll-margin-top: 96px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-2xl);
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.04);
}
.member__photo { aspect-ratio: 1 / 1; border-radius: var(--radius-xl); }
.member__photo.portrait--empty::before { font-size: 56px; }
.member__body { display: flex; flex-direction: column; flex: 1; gap: 4px; min-width: 0; padding: clamp(16px, 2vw, 24px) clamp(10px, 1.5vw, 16px) clamp(10px, 1.5vw, 14px); }
.member h3 { font-size: clamp(18px, 1.2vw + 8px, 22px); line-height: 1.3; letter-spacing: -0.3px; color: var(--ink-strong); }
.member__role { font-size: 15px; color: var(--ink-muted); }
.member__bio { margin-top: 8px; font-size: 15px; color: var(--ink-muted); }
.member__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; padding-top: 16px; font-size: 15px; font-weight: 500; }
.member__links a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 559px) {
    .team { grid-template-columns: minmax(0, 1fr); }
    .member { flex-direction: row; align-items: center; }
    .member__photo { width: 96px; flex: none; }
    .member__body { padding: 8px 12px; }
    .member__links { margin-top: 0; padding-top: 8px; }
}

.promises__num::before { content: attr(data-num); } /* CSS text keeps "01" out of llms-full.txt */

/* Story: heading top left and the founders' signature bottom left, the letter on the right; both columns end on one line.
   On phones the signature follows the letter. */
.about-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px clamp(32px, 5vw, 72px); align-items: start; }
.about-story__body { display: flex; flex-direction: column; gap: 20px; max-width: 40rem; }
.about-story__body > p { font-size: 18px; line-height: 1.6; color: var(--ink-muted); }
.about-story__body > p:first-child { font-size: clamp(20px, 1.6vw + 12px, 24px); line-height: 1.45; letter-spacing: -0.3px; color: var(--ink-strong); }
.about-story__sign { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.about-story__names { display: flex; flex-direction: column; font-size: 14px; color: var(--ink-muted); }
.about-story__names b { font-size: 16px; font-weight: 500; color: var(--ink-strong); }
@media (min-width: 960px) {
    .about-story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); row-gap: 32px; }
    .about-story__body { grid-column: 2; grid-row: 1 / span 2; }
    .about-story__sign { grid-column: 1; grid-row: 2; align-self: end; }
}

.avatars { display: flex; flex: none; }
.avatars__item { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 3px var(--canvas); }
.avatars__item + .avatars__item { margin-left: -10px; }
.avatars__item.portrait--empty { background: var(--surface); font-size: 14px; }

/* Promises: three cards on the tinted band. */
.about-band__head .section-header { align-items: center; text-align: center; margin-inline: auto; }
.promises { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.promises__item {
    display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: clamp(24px, 3vw, 32px);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-2xl);
}
.promises__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.promises__num { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-tertiary); }
.promises h3 { font-size: 20px; line-height: 1.3; color: var(--ink-strong); }
.promises p { color: var(--ink-muted); max-width: 36ch; }

/* Fact sheet: plain rows of term and answer. */
.about-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px clamp(32px, 5vw, 72px); align-items: start; }
.about-sheet__intro { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 960px) {
    .about-sheet { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.factsheet { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-xl); overflow: hidden; }
.factsheet > div {
    display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); gap: 4px 24px;
    padding: 18px clamp(20px, 3vw, 28px);
}
.factsheet > div + div { border-top: 1px solid var(--line); }
.factsheet dt { font-size: 14px; line-height: 24px; color: var(--ink-muted); }
.factsheet dd { font-size: 16px; line-height: 24px; color: var(--ink); overflow-wrap: anywhere; }

@media (max-width: 959px) {
    .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
    .promises { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
    .factsheet > div { grid-template-columns: minmax(0, 1fr); }
    .about-faces__name { left: 6px; bottom: 6px; padding: 3px 8px; font-size: 12px; }
}

/* ---------- Contact ---------- */
/* The heading over one "desk": the form on white, and beside it a dark panel (the dark of the home page's invoicing
   card) with who answers, by when, and what happens next. On phones the panel follows the form. */
.contact {
    display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px);
    padding-top: clamp(48px, 7vw, 88px); padding-bottom: var(--section-y);
}
.contact [hidden] { display: none !important; }

.contact__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.contact__status {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line-strong);
    font-size: 14px; line-height: 1.3; color: var(--ink-muted);
}
.contact__status b { font-weight: 500; color: var(--ink-strong); }
.pulse-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #22c55e; animation: of-pulse 2s ease-out infinite; }

.contact__desk {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-2xl);
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 40px 80px -48px rgb(28 25 23 / 0.35);
}
@media (min-width: 960px) {
    .contact__desk { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.contact__main { min-width: 0; padding: clamp(16px, 3.5vw, 40px) clamp(10px, 3.5vw, 40px); scroll-margin-top: 96px; }

/* Form: three numbered steps. The step you are in lights up. */
.contact-form { display: flex; flex-direction: column; gap: 36px; }
.contact-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.contact-form fieldset > legend { float: left; width: 100%; padding: 0; }
.contact-form fieldset > legend + * { clear: both; }

.form-step__title {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.2px; color: var(--ink-strong);
}
.form-step__num {
    width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%;
    background: var(--surface-muted); font-size: 12px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums;
    transition: background-color 200ms ease, color 200ms ease;
}
.form-step__num::before { content: attr(data-num); }
.form-step:focus-within .form-step__num { background: var(--brand); color: #fff; }
.form-step__body { display: flex; flex-direction: column; gap: 20px; }

/* Topic: three cards. */
.topic-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.topic-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; padding: 16px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); cursor: pointer;
    transition: border-color var(--duration) ease, background-color var(--duration) ease, box-shadow var(--duration) ease;
}
.topic-card:hover { border-color: var(--stone-400); }
.topic-card input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.topic-card__icon {
    width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); background: var(--surface-muted); color: var(--ink-muted);
    transition: background-color var(--duration) ease, color var(--duration) ease;
}
.topic-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topic-card__text b { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink-strong); }
.topic-card__text small { font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
.topic-card__tick {
    position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; display: grid; place-items: center;
    border-radius: 50%; border: 1.5px solid var(--line-strong); color: transparent;
    transition: background-color var(--duration) ease, border-color var(--duration) ease, color var(--duration) ease;
}
.topic-card:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.topic-card:has(input:checked) .topic-card__icon { background: var(--brand); color: #fff; }
.topic-card input:checked ~ .topic-card__tick { background: var(--brand); border-color: var(--brand); color: #fff; }
.topic-card:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 639px) {
    .topic-cards { grid-template-columns: minmax(0, 1fr); }
    .topic-card { flex-direction: row; align-items: center; padding: 12px 44px 12px 12px; }
    .topic-card__tick { top: 50%; translate: 0 -50%; }
}

/* Fields. */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 20px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact-form fieldset.field { display: block; }
.field label, .field > legend { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.field > legend { margin-bottom: 10px; }
.field__optional { font-weight: 400; color: var(--ink-subtle); }
.field input, .field textarea {
    width: 100%; padding: 0 14px; background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--radius-md);
    font: 16px/1.5 var(--font-sans); color: var(--ink);
    transition: border-color var(--duration) ease, box-shadow var(--duration) ease;
}
.field input { height: 48px; }
.field textarea { padding: 12px 14px; resize: vertical; min-height: 140px; }
.field input:hover, .field textarea:hover { border-color: var(--stone-400); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-tertiary); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(234 88 12 / 0.18); }
.field [aria-invalid="true"], .field [aria-invalid="true"]:hover { border-color: var(--danger); }
.field [aria-invalid="true"]:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(190 18 60 / 0.15); }
.field__error { font-size: 14px; line-height: 1.5; color: var(--danger); }

/* Pick-one chips (company size, demo time). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span {
    display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line-strong);
    font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--ink-muted); cursor: pointer;
    transition: background-color var(--duration) ease, border-color var(--duration) ease, color var(--duration) ease;
}
.chips label:hover span { border-color: var(--stone-400); color: var(--ink); }
.chips input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-soft-ink); }
.chips input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.form-alert { padding: 12px 16px; border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger); font-size: 14px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form__footer {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
    padding-top: 24px; border-top: 1px solid var(--line);
}
.contact-form__submit { height: 48px; padding: 0 22px; }
.contact-form__submit .icon { transition: transform 200ms var(--ease); }
.contact-form__submit:hover .icon { transform: translateX(3px); }
.contact-form__submit.is-sending { pointer-events: none; opacity: 0.75; }
.contact-form__submit.is-sending .icon { display: none; }
@media (max-width: 559px) {
    .contact-form__submit { width: 100%; }
}

/* Sent: a thank-you in place of the form; the steps in the panel move on by one. */
.contact.is-sent .contact__main { display: flex; align-items: center; }
.form-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-block: clamp(8px, 3vw, 32px); }
.form-sent__badge {
    width: 56px; height: 56px; margin: 0 0 8px 8px; display: grid; /* the 8px ring lines up with the text */ place-items: center; border-radius: 50%;
    background: var(--success-soft); color: var(--success); box-shadow: 0 0 0 8px rgb(21 128 61 / 0.06);
    animation: of-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.form-sent h2 { font-size: min(40px, 2.4vw + 22px); line-height: 1.15; letter-spacing: -0.8px; color: var(--ink-strong); }
.form-sent__lead { font-size: 18px; line-height: 1.5; color: var(--ink); max-width: 34rem; }
.form-sent .muted { max-width: 34rem; }
.form-sent .actions { margin-top: 8px; }

/* Panel: who answers, by when, how to reach us, what happens next. */
.contact-info {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; gap: 28px; min-width: 0; padding: clamp(24px, 3vw, 36px);
    border-radius: var(--radius-xl); color: rgb(255 255 255 / 0.68);
    background:
        radial-gradient(80% 45% at 100% 0%, rgb(249 115 22 / 0.3), transparent 70%),
        radial-gradient(60% 40% at 0% 100%, rgb(249 115 22 / 0.1), transparent 70%),
        var(--stone-900);
}
.contact-info::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgb(255 255 255 / 0.1) 1px, transparent 1.5px); background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(70% 45% at 100% 0%, #000, transparent 80%);
    mask-image: radial-gradient(70% 45% at 100% 0%, #000, transparent 80%);
}
.contact-info a { color: #fff; }
.contact-info a:hover { color: var(--orange-300); }
.contact-info :focus-visible { outline-color: #fff; }

.contact-info__people { display: flex; align-items: center; gap: 14px; }
.contact-info__people p { display: flex; flex-direction: column; font-size: 14px; line-height: 1.45; }
.contact-info__people b { font-size: 15px; font-weight: 500; color: #fff; }
.contact-info .avatars__item { box-shadow: 0 0 0 3px var(--stone-900); }

/* The reply time takes whatever height the form leaves over, so the panel never shows a gap. */
.contact-info__reply {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding-block: 24px; border-block: 1px solid rgb(255 255 255 / 0.1);
}
.contact-info__label { font-size: 14px; font-weight: 500; color: var(--orange-300); }
.contact-info__big { margin-top: 6px; font-size: clamp(36px, 2.6vw + 16px, 52px); line-height: 1.05; letter-spacing: -1.2px; font-weight: 500; color: #fff; }
.contact-info__note { margin-top: 10px; font-size: 15px; }

.contact-info__channels { display: flex; flex-direction: column; gap: 16px; }
.contact-info__channels dt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(255 255 255 / 0.5); }
.contact-info__channels dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; font-size: 17px; font-weight: 500; color: #fff; overflow-wrap: anywhere; }
.copy-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.8);
    font: 500 12px/1 var(--font-sans); cursor: pointer;
    transition: background-color var(--duration) ease, color var(--duration) ease, border-color var(--duration) ease;
}
.copy-btn:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.copy-btn.is-copied { border-color: rgb(74 222 128 / 0.4); color: #86efac; }

.contact-info__heading { margin-bottom: 16px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--orange-300); }
.next-steps { list-style: none; padding: 0; counter-reset: step; }
.next-steps li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding-bottom: 20px; counter-increment: step; }
.next-steps li:last-child { padding-bottom: 0; }
.next-steps li:not(:last-child)::before { content: ""; position: absolute; left: 13.5px; top: 34px; bottom: 6px; width: 1px; background: rgb(255 255 255 / 0.14); }
.next-steps__mark {
    grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.2); font-size: 12px; font-weight: 500; color: rgb(255 255 255 / 0.7); font-variant-numeric: tabular-nums;
}
.next-steps__mark::before { content: counter(step); } /* CSS text keeps the numbers out of llms-full.txt */
.next-steps__mark .icon { display: none; }
.next-steps b { grid-column: 2; font-size: 15px; font-weight: 500; line-height: 28px; color: #fff; }
.next-steps li > span:not(.next-steps__mark) { grid-column: 2; font-size: 14px; line-height: 1.45; }
.next-steps .is-done .next-steps__mark { background: var(--brand); border-color: var(--brand); color: #fff; }
.next-steps .is-done .next-steps__mark::before { content: none; }
.next-steps .is-done .next-steps__mark .icon { display: block; }
.next-steps .is-current .next-steps__mark { border-color: var(--orange-400); color: var(--orange-300); box-shadow: 0 0 0 4px rgb(249 115 22 / 0.18); }

/* ---------- Waitlist (before launch) ---------- */
/* Launch bar: a dark strip above the nav that scrolls away with the page; the nav then sticks to the top as usual. */
.launch-bar { background: var(--stone-900); color: rgb(255 255 255 / 0.72); font-size: 14px; line-height: 1.4; }
.launch-bar__inner {
    max-width: var(--container); margin: 0 auto; padding: 10px var(--gutter);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; text-align: center;
}
.launch-bar__link {
    display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: #fff;
    text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.35); text-underline-offset: 4px;
}
.launch-bar__link:hover { color: var(--orange-300); text-decoration-color: currentColor; }
.launch-bar__link .icon { transition: transform 200ms var(--ease); }
.launch-bar__link:hover .icon { transform: translateX(2px); }
.launch-bar :focus-visible { outline-color: #fff; }
@media (max-width: 559px) {
    .launch-bar__more { display: none; }
}

/* Compact sign-up: the e-mail field and the button share one white pill; on phones they stack. */
.waitlist__error[hidden] { display: none; }
.waitlist--light, .waitlist--brand { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 30rem; }
.waitlist__row {
    display: flex; align-items: center; gap: 6px; padding: 6px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
    box-shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 16px 32px -24px rgb(28 25 23 / 0.35);
    transition: border-color var(--duration) ease, box-shadow var(--duration) ease;
}
.waitlist__row:hover { border-color: var(--stone-400); }
.waitlist__row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(234 88 12 / 0.18); }
.waitlist__row:has([aria-invalid="true"]) { border-color: var(--danger); }
.waitlist__row input {
    flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 0; background: transparent;
    font: 16px/1.5 var(--font-sans); color: var(--ink);
}
.waitlist__row input:focus { outline: none; }
.waitlist__row input::placeholder { color: var(--ink-tertiary); }
.waitlist__submit { height: 44px; border-radius: 10px; }
.waitlist__submit .icon { transition: transform 200ms var(--ease); }
.waitlist__submit:hover .icon { transform: translateX(3px); }
.waitlist__submit.is-sending { pointer-events: none; opacity: 0.75; }
.waitlist__submit.is-sending .icon { display: none; }
.waitlist__error { font-size: 14px; line-height: 1.5; color: var(--danger); }
.waitlist__note { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.waitlist__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 479px) {
    .waitlist__row { flex-direction: column; align-items: stretch; }
    .waitlist__row input { height: 48px; }
    .waitlist__submit { width: 100%; height: 48px; }
}

/* On the orange brand panel: no border, the light button's lift, and white text and errors (red is unreadable on orange). */
.waitlist--brand .waitlist__row, .waitlist--brand .waitlist__row:hover {
    border-color: transparent; box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 16px 32px -12px rgb(124 45 18 / 0.85);
}
.waitlist--brand .waitlist__row:focus-within { box-shadow: 0 0 0 3px rgb(255 255 255 / 0.5), 0 16px 32px -12px rgb(124 45 18 / 0.85); }
.waitlist--brand .waitlist__row:has([aria-invalid="true"]) { box-shadow: 0 0 0 3px #fff, 0 16px 32px -12px rgb(124 45 18 / 0.85); }
.waitlist--brand .waitlist__error {
    align-self: flex-start; padding: 6px 12px; border-radius: var(--radius-md);
    background: rgb(124 45 18 / 0.55); color: #fff; font-weight: 500;
}
.waitlist--brand .waitlist__note { color: rgb(255 255 255 / 0.85); }
.waitlist--brand .waitlist__note a:hover { color: #fff; }

/* ---------- Legal ---------- */
.legal-intro .display--lg { font-size: clamp(28px, 8.4vw, 56px); } /* small enough on phones for "Handelsbetingelser" */
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.legal__wip {
    display: flex; align-items: flex-start; gap: 12px; max-width: 44rem; padding: 14px 16px;
    background: var(--brand-soft); border: 1px solid var(--brand-border); border-radius: var(--radius-md);
    font-size: 15px; line-height: 1.5; color: var(--ink);
}
.legal__wip strong { color: var(--ink-strong); font-weight: 600; }
.legal__wip a { overflow-wrap: anywhere; }
.legal__wip-icon { flex: none; margin-top: 1px; color: var(--brand-soft-ink); }
/* The table of contents is a <details>: open and fixed beside the text on desktop, a fold-out box on phones
   (main.js closes it there; without JS it stays open). */
.legal__toc-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); padding: 0 12px 8px; list-style: none; }
.legal__toc-title::-webkit-details-marker { display: none; }
.legal__toc-chevron { transition: transform var(--duration) ease; }
.legal__toc[open] .legal__toc-chevron { transform: rotate(180deg); }
@media (min-width: 800px) {
    .legal { grid-template-columns: minmax(200px, 280px) minmax(0, 44rem); }
    .legal__toc { position: sticky; top: 96px; }
    .legal__toc-title { pointer-events: none; }
    .legal__toc-chevron { display: none; }
}
@media (max-width: 799px) {
    .legal__toc { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
    .legal__toc-title { cursor: pointer; padding: 14px 16px; font-size: 15px; }
    .legal__toc nav { padding: 0 4px 8px; }
}
.legal__toc ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.legal__toc a {
    display: block; padding: 8px 12px; border-radius: var(--radius-md);
    font-size: 15px; line-height: 1.4; color: var(--ink-muted);
    transition: color var(--duration) ease, background-color var(--duration) ease;
}
.legal__toc a:hover { color: var(--ink); background: var(--surface-muted); }

.legal__body { display: flex; flex-direction: column; gap: 48px; min-width: 0; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.legal__body section { display: flex; flex-direction: column; gap: 12px; }
.legal__body h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.3px; color: var(--ink-strong); }
.legal__body ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal__card {
    margin-top: 4px; padding: 24px;
    display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; font-size: 15px; color: var(--ink);
}
.legal__card dt { color: var(--ink-muted); }
.legal__card dd { overflow-wrap: anywhere; }
.legal__num { font-weight: 500; color: var(--ink-strong); font-variant-numeric: tabular-nums; margin-right: 2px; }
@media (max-width: 559px) {
    .legal__body { gap: 40px; }
    /* Term above its meaning, so the meaning gets the full width. */
    .legal__card { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 20px; }
    .legal__card dt { font-weight: 500; color: var(--ink-strong); }
    .legal__card dd + dt { margin-top: 14px; }
}

/* ---------- Footer ---------- */
/* A warm dark panel that closes the page under the orange brand panel: tagline and contact on the left, two short link
 * columns on the right, the legal bits in a bottom bar, and the wordmark glowing out of the bottom edge. */
.site-footer { padding: 0 clamp(12px, 3vw, 24px) clamp(12px, 3vw, 24px); }
.site-footer__panel {
    --f-ink: #fff;
    --f-muted: rgb(245 241 236 / 0.64);
    --f-subtle: rgb(245 241 236 / 0.44);
    --f-line: rgb(255 255 255 / 0.1);
    --f-fill: rgb(255 255 255 / 0.06);
    position: relative; isolation: isolate; overflow: hidden;
    max-width: 1232px; margin: 0 auto; border-radius: var(--radius-2xl);
    background:
        radial-gradient(70% 55% at 50% 100%, rgb(234 88 12 / 0.24), transparent 70%),
        radial-gradient(45% 50% at 100% 0%, rgb(249 115 22 / 0.1), transparent 70%),
        var(--stone-900);
    color: var(--f-muted);
}
/* The brand panel's fine grid, faded in from the top right. */
.site-footer__panel::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
    background-size: 56px 56px; background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(55% 70% at 100% 0%, #000 0%, transparent 80%);
    mask-image: radial-gradient(55% 70% at 100% 0%, #000 0%, transparent 80%);
}
.site-footer :focus-visible { outline-color: var(--orange-400); }
.site-footer__inner { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px) 0; }

.site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; min-width: 0; }
.site-footer__tagline {
    font-size: clamp(28px, 2.2vw + 14px, 44px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 500;
    color: var(--f-ink); max-width: 18ch; text-wrap: balance;
}
.site-footer__tagline span { display: block; color: var(--orange-400); }

.site-footer__contact {
    display: flex; align-items: center; gap: 14px; max-width: 100%; padding: 10px 18px 10px 10px;
    border-radius: var(--radius-xl); border: 1px solid var(--f-line); background: var(--f-fill); color: var(--f-ink);
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.site-footer__contact:hover { color: var(--f-ink); background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.18); }
.site-footer__contact-icon {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-lg);
    background: var(--brand); color: #fff; box-shadow: 0 8px 20px -8px rgb(234 88 12 / 0.8);
}
.site-footer__contact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-footer__contact-text strong { font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.site-footer__contact-text span { font-size: 13px; line-height: 1.4; color: var(--f-muted); }
.site-footer__contact-arrow { margin-left: 12px; color: var(--f-subtle); transition: transform 200ms var(--ease), color var(--duration) var(--ease); }
.site-footer__contact:hover .site-footer__contact-arrow { transform: translateX(3px); color: var(--f-ink); }
.site-footer__phone { display: inline-flex; align-items: center; gap: 8px; margin-top: -16px; font-size: 15px; color: var(--f-muted); }
.site-footer__phone:hover { color: var(--f-ink); }

.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; min-width: 0; }
.site-footer__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.site-footer__heading { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--f-subtle); }
.site-footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.site-footer__col a { display: inline-block; padding-block: 6px; font-size: 16px; line-height: 1.4; color: var(--f-muted); }
.site-footer a:hover, .site-footer a[aria-current="page"] { color: var(--f-ink); }

.site-footer__bottom {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "links links" "legal end";
    align-items: center; gap: 16px 24px; padding-top: 24px; border-top: 1px solid var(--f-line);
    font-size: 14px; line-height: 1.4;
}
.site-footer__legal { grid-area: legal; color: var(--f-subtle); }
.site-footer__legal-nav { grid-area: links; }
.site-footer__legal-nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer__legal-nav a { display: inline-block; padding-block: 4px; color: var(--f-muted); }
.site-footer__end { grid-area: end; display: flex; gap: 8px; }
.site-footer__round {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.14); color: var(--f-ink);
    transition: background-color var(--duration) var(--ease), transform 200ms var(--ease);
}
.site-footer__round:hover { background: rgb(255 255 255 / 0.1); }
.site-footer__top-link .icon { transform: rotate(-90deg); }
.site-footer__top-link:hover { transform: translateY(-2px); }

/* Fills the wordmark with an orange gradient that fades out, and lets the panel's bottom edge cut it off. */
.site-footer__wordmark { padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 64px) 0; margin-bottom: -1.6%; pointer-events: none; user-select: none; }
.site-footer__wordmark-img {
    display: block; aspect-ratio: 7264 / 1000;
    background: linear-gradient(180deg, var(--orange-400) 0%, var(--orange-600) 50%, rgb(234 88 12 / 0.2) 100%);
    -webkit-mask: var(--wordmark) center / 100% 100% no-repeat;
    mask: var(--wordmark) center / 100% 100% no-repeat;
}
.site-footer__wordmark-text {
    display: block; font-size: clamp(64px, 19vw, 248px); font-weight: 500; line-height: 0.9; letter-spacing: -0.05em; text-align: center;
    background: linear-gradient(180deg, var(--orange-400), transparent 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (min-width: 860px) {
    .site-footer__top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; }
    .site-footer__nav { padding-top: 8px; }
    /* One line: © on the left, the legal links next to it, the round buttons on the right. */
    .site-footer__bottom { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "legal links end"; gap: 24px 32px; }
}
@media (max-width: 479px) {
    .site-footer__inner { gap: 40px; }
    .site-footer__contact { width: 100%; }
    .site-footer__contact-arrow { margin-left: auto; }
    .site-footer__nav { gap: 24px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-preview { --step: 99; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}