/* Nordic minimal design, web layer. One file: tokens + primitives. Geist 400/500 from Google Fonts.
   Structure borrowed from OpenAI's Apps SDK UI (primitive -> semantic -> component tokens, alpha steps of the ink,
   intents x variants, 4 px spacing base) and openai.com (fluid heading scale, weight 500, pill controls, hairlines).
   Colours and calm are ours: warm stone, one typeface, no shadows except on floating layers. */

/* ---------- 1. Primitive tokens ---------- */
:root {
  --stone-0: #FAFAF8;   /* bg light */
  --stone-50: #EFEDE9;  /* sand */
  --stone-100: #D9D6D1; /* border light */
  --stone-400: #9C968F; /* muted dark */
  --stone-500: #6B6660; /* muted light */
  --stone-800: #4A4540; /* border dark */
  --stone-850: #2E2925; /* surface dark */
  --stone-900: #1E1A16; /* ink */
  --stone-950: #F4F2EE; /* ink on dark */
  --font-sans: Geist, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --space: 4px;                 /* every gap is a multiple: 4 8 12 16 24 32 48 64 96 */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 999px;
  --control-sm: 28px; --control-md: 36px; --control-lg: 44px;
  --ease-enter: cubic-bezier(0.19, 1, 0.22, 1); --ease-exit: cubic-bezier(0.8, 0, 0.4, 1); --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
  --duration: 150ms;
  --container: 1200px; --prose: 680px; --gutter: max(16px, env(safe-area-inset-left, 0px));
}

/* ---------- 2. Semantic tokens (light, then dark) ---------- */
:root {
  color-scheme: light;
  --bg: var(--stone-0); --surface: var(--stone-50); --surface-2: #E6E3DE; --fg: var(--stone-900); --muted: var(--stone-500); --border: var(--stone-100);
  --ink: var(--stone-900);      /* base for alpha steps */
  --inverse-bg: var(--stone-900); --inverse-fg: var(--stone-950);
  --success: #3F6B4A; --success-soft: #E3EBE2; --warning: #8A5A1E; --warning-soft: #F1E6D3; --danger: #8E3B32; --danger-soft: #F2E0DC;
  --shadow-float: 0 8px 24px -8px rgb(30 26 22 / 0.18), 0 0 0 1px var(--border);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: var(--stone-900); --surface: var(--stone-850); --surface-2: #3A3430; --fg: var(--stone-950); --muted: var(--stone-400); --border: var(--stone-800);
  --ink: var(--stone-950); --inverse-bg: var(--stone-950); --inverse-fg: var(--stone-900);
  --success: #9FC4A6; --success-soft: #2C3A2E; --warning: #D9B27A; --warning-soft: #3F3324; --danger: #D99A90; --danger-soft: #45302C;
  --shadow-float: 0 8px 24px -8px rgb(0 0 0 / 0.5), 0 0 0 1px var(--border);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--stone-900); --surface: var(--stone-850); --surface-2: #3A3430; --fg: var(--stone-950); --muted: var(--stone-400); --border: var(--stone-800);
  --ink: var(--stone-950); --inverse-bg: var(--stone-950); --inverse-fg: var(--stone-900);
  --success: #9FC4A6; --success-soft: #2C3A2E; --warning: #D9B27A; --warning-soft: #3F3324; --danger: #D99A90; --danger-soft: #45302C;
  --shadow-float: 0 8px 24px -8px rgb(0 0 0 / 0.5), 0 0 0 1px var(--border);
}
/* Alpha steps of the ink: hover, pressed, hairlines and tints that work on any surface in both themes. */
:root {
  --alpha-2: color-mix(in oklab, var(--ink) 2%, transparent); --alpha-4: color-mix(in oklab, var(--ink) 4%, transparent);
  --alpha-8: color-mix(in oklab, var(--ink) 8%, transparent); --alpha-12: color-mix(in oklab, var(--ink) 12%, transparent);
  --alpha-16: color-mix(in oklab, var(--ink) 16%, transparent); --alpha-20: color-mix(in oklab, var(--ink) 20%, transparent);
  --alpha-44: color-mix(in oklab, var(--ink) 44%, transparent); --alpha-60: color-mix(in oklab, var(--ink) 60%, transparent);
}
/* A dark block inside a light page (or the reverse) just re-points the semantic tokens. */
.theme-dark { color-scheme: dark; --bg: var(--stone-900); --surface: var(--stone-850); --surface-2: #3A3430; --fg: var(--stone-950); --muted: var(--stone-400); --border: var(--stone-800); --ink: var(--stone-950); --inverse-bg: var(--stone-950); --inverse-fg: var(--stone-900); background: var(--bg); color: var(--fg); }
.theme-sand { --bg: var(--stone-50); --surface: var(--stone-0); background: var(--bg); color: var(--fg); }

/* ---------- 3. Type scale: fluid between 375 px and 1440 px, weight 500 for headings, 400 for text ---------- */
:root {
  --type-display: clamp(3rem, 2.25rem + 3.2vw, 6rem);          /* 48 -> 96 */
  --type-h1: clamp(2rem, 1.5rem + 2.2vw, 4rem);                /* 32 -> 64 */
  --type-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);          /* 28 -> 44 */
  --type-h3: clamp(1.375rem, 1.25rem + .55vw, 1.75rem);        /* 22 -> 28 */
  --type-h4: clamp(1.125rem, 1.08rem + .2vw, 1.25rem);         /* 18 -> 20 */
  --type-lead: clamp(1.125rem, 1.08rem + .2vw, 1.25rem);
  --type-body: 1.0625rem; --type-small: 0.875rem; --type-caption: 0.8125rem;
}
.display { font-size: var(--type-display); line-height: 1; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
.h1, h1 { font-size: var(--type-h1); line-height: 1.05; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
.h2, h2 { font-size: var(--type-h2); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.h3, h3 { font-size: var(--type-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.h4, h4 { font-size: var(--type-h4); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.lead { font-size: var(--type-lead); line-height: 1.5; color: var(--muted); }
.small { font-size: var(--type-small); line-height: 1.45; }
.caption { font-size: var(--type-caption); line-height: 1.4; color: var(--muted); }
.eyebrow { font-size: var(--type-small); font-weight: 500; color: var(--muted); }  /* "Produkt · 4. nov 2026", never uppercase */
.muted { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- 4. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-synthesis-weight: none; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--type-body)/1.6 var(--font-sans); letter-spacing: -0.01em; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
img, svg, video { max-width: 100%; display: block; }
img, svg { flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
.prose a, a.link { text-decoration: underline; text-decoration-color: var(--alpha-44); text-underline-offset: 0.15em; transition: text-decoration-color var(--duration); }
.prose a:hover, a.link:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: var(--radius-xs); }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
b, strong { font-weight: 500; }
hr, .rule { border: 0; border-top: 1px solid var(--border); margin: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- 5. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter) max(16px, env(safe-area-inset-right, 0px)); }
.section { padding-block: clamp(48px, 8vw, 96px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 12px); }
.grid { display: grid; gap: var(--gap, 16px); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.grid > * { min-width: 0; }
@media (max-width: 900px) { .grid { --cols: 2 !important; } }
@media (max-width: 560px) { .grid { --cols: 1 !important; } .section-head { flex-direction: column; align-items: flex-start; } }

/* ---------- 6. Surfaces ---------- */
.card { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; background: transparent; }
.panel { background: var(--surface); border-radius: var(--radius-xl); padding: 24px; }
.card-dark { background: var(--inverse-bg); color: var(--inverse-fg); border-radius: var(--radius-xl); padding: 24px; --muted: color-mix(in oklab, var(--inverse-fg) 60%, transparent); --border: color-mix(in oklab, var(--inverse-fg) 20%, transparent); }
a.card, a.panel { transition: background var(--duration), border-color var(--duration); }
a.card:hover { background: var(--alpha-2); border-color: var(--alpha-20); }
a.panel:hover { background: var(--surface-2); }
.media { aspect-ratio: 16 / 9; width: 100%; background: var(--surface); border-radius: var(--radius-xl); object-fit: cover; }
.media-square { aspect-ratio: 1; }
.float { background: var(--bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); padding: 8px; }  /* menus, popovers, dialogs: the only shadow */

/* ---------- 7. Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-md); padding: 0 18px; border-radius: var(--radius-full); border: 1px solid transparent; font-size: var(--type-small); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; background: transparent; transition: background var(--duration), border-color var(--duration), color var(--duration); }
.btn-solid { background: var(--inverse-bg); color: var(--inverse-fg); }
.btn-solid:hover { background: color-mix(in oklab, var(--inverse-bg) 85%, var(--bg)); }
.btn-outline { border-color: var(--alpha-16); }
.btn-outline:hover { border-color: var(--alpha-44); background: var(--alpha-2); }
.btn-soft { background: var(--alpha-8); }
.btn-soft:hover { background: var(--alpha-12); }
.btn-ghost:hover { background: var(--alpha-8); }
.btn-sm { height: var(--control-sm); padding: 0 12px; font-size: var(--type-caption); }
.btn-lg { height: var(--control-lg); padding: 0 22px; font-size: var(--type-body); }
.btn-icon { width: var(--control-md); padding: 0; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn svg { width: 1.1em; height: 1.1em; }

.pill, .badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-full); font-size: var(--type-caption); font-weight: 500; line-height: 1; border: 1px solid var(--alpha-20); }
.pill-dark { background: var(--inverse-bg); color: var(--inverse-fg); border-color: transparent; }
.card-dark .pill { border-color: var(--border); }
.badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: var(--control-sm); padding: 0 12px; border-radius: var(--radius-full); border: 1px solid transparent; background: transparent; font-size: var(--type-small); color: var(--muted); cursor: pointer; transition: background var(--duration), color var(--duration); }
.chip:hover { background: var(--alpha-8); color: var(--fg); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--inverse-bg); color: var(--inverse-fg); }

.segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-full); background: var(--alpha-8); }
.segmented button { height: calc(var(--control-sm) + 2px); padding: 0 14px; border: 0; border-radius: var(--radius-full); background: transparent; font-size: var(--type-small); font-weight: 500; color: var(--muted); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }

.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); }
.tabs button { padding: 10px 0; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; background: none; font-size: var(--type-small); font-weight: 500; color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }

.input, .select, .textarea { width: 100%; min-width: 0; min-height: var(--control-md); padding: 0 12px; border: 1px solid var(--alpha-16); border-radius: var(--radius-lg); background: transparent; color: var(--fg); font: inherit; letter-spacing: inherit; transition: border-color var(--duration); }
.textarea { padding: 10px 12px; min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--alpha-44); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 0; border-color: var(--fg); }
.input-soft { border-color: transparent; background: var(--alpha-8); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--type-small); font-weight: 500; }
.field .hint { font-size: var(--type-caption); color: var(--muted); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6660' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }

.check { display: inline-flex; align-items: center; gap: 10px; font-size: var(--type-small); cursor: pointer; }
.check input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--alpha-20); border-radius: var(--radius-xs); background: transparent; display: grid; place-content: center; transition: background var(--duration), border-color var(--duration); }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--inverse-bg); border-color: var(--inverse-bg); }
.check input:checked::before { content: ""; width: 10px; height: 10px; background: var(--inverse-fg); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.check input[type="radio"]:checked::before { clip-path: none; border-radius: 50%; width: 6px; height: 6px; }

.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { appearance: none; margin: 0; width: 100%; height: 100%; border-radius: var(--radius-full); background: var(--alpha-16); cursor: pointer; transition: background var(--duration); }
.switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); transition: transform var(--duration) var(--ease-move); }
.switch input:checked { background: var(--inverse-bg); }
.switch input:checked::before { transform: translateX(16px); background: var(--inverse-fg); }

.kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); font: 500 var(--type-caption)/1.4 var(--font-mono); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--fg); display: inline-grid; place-content: center; font-size: var(--type-caption); font-weight: 500; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatars { display: flex; }
.avatars .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg); }
.avatars .avatar:first-child { margin-left: 0; }

/* Icons: Lucide inline SVG, stroke 2, sized by font-size. Sizes 16 / 20 / 24; 32 and 48 only as a card's one icon. */
.icon { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 1em; height: 1em; } .icon-lg { width: 24px; height: 24px; } .icon-xl { width: 32px; height: 32px; } .icon-2xl { width: 48px; height: 48px; stroke-width: 1.5; }

/* ---------- 8. Text blocks ---------- */
.alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface); font-size: var(--type-small); line-height: 1.5; }
.alert .icon { flex: none; margin-top: 2px; }
.alert-success { background: var(--success-soft); color: var(--success); }
.alert-warning { background: var(--warning-soft); color: var(--warning); }
.alert-danger { background: var(--danger-soft); color: var(--danger); }
.callout { padding: 20px 24px; border-left: 2px solid var(--fg); background: var(--surface); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
blockquote.quote { font-size: var(--type-h3); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
blockquote.quote footer { margin-top: 12px; font-size: var(--type-small); font-weight: 400; color: var(--muted); }
pre.code { margin: 0; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--surface); font: 400 var(--type-small)/1.6 var(--font-mono); overflow-x: auto; }
code { font-family: var(--font-mono); font-size: 0.92em; }
.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { margin-top: 2.5em; font-size: var(--type-h3); }
.prose h3 { margin-top: 2em; font-size: var(--type-h4); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose figure { margin-block: 2em; }
.prose figcaption { margin-top: 10px; font-size: var(--type-caption); color: var(--muted); }
.prose img { border-radius: var(--radius-xl); }
.prose .lead { font-size: var(--type-lead); color: var(--fg); }

/* ---------- 9. Lists and tables ---------- */
.list { display: flex; flex-direction: column; }
.list > * { padding: 16px 0; border-top: 1px solid var(--border); }
.list > :last-child { border-bottom: 1px solid var(--border); }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--type-small); }
.table th, .table td { padding: 12px 16px 12px 0; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-weight: 500; color: var(--muted); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.steps { display: grid; gap: 24px; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); counter-reset: step; }
.step { position: relative; padding-top: 20px; counter-increment: step; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: -24px; border-top: 1px solid var(--border); }
.step:last-child::before { right: 0; }
.step::after { content: ""; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--fg); }
.step.is-pending::after { background: var(--bg); border: 1px solid var(--fg); }
.step .label { font-size: var(--type-caption); color: var(--muted); margin-bottom: 4px; }
@media (max-width: 900px) { .steps { --cols: 2 !important; } }
@media (max-width: 560px) { .steps { --cols: 1 !important; } }
.stat .value { font-size: var(--type-h1); line-height: 1; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat .label { margin-top: 8px; font-size: var(--type-small); color: var(--muted); }
.bar { height: 8px; border-radius: var(--radius-full); background: var(--alpha-8); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--fg); border-radius: inherit; }
details.faq { border-top: 1px solid var(--border); }
details.faq:last-of-type { border-bottom: 1px solid var(--border); }
details.faq summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 500; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 20px; color: var(--muted); transition: transform var(--duration); }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq > :not(summary) { padding-bottom: 18px; color: var(--muted); max-width: var(--prose); }

/* ---------- 10. Page chrome ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav .container { display: flex; align-items: center; gap: 24px; height: 60px; }
.nav .brand { font-weight: 500; letter-spacing: -0.02em; }
.nav .links { display: flex; gap: 20px; font-size: var(--type-small); color: var(--muted); }
.nav .links a:hover, .nav .links a[aria-current] { color: var(--fg); }
.nav .spacer { flex: 1; }
@media (max-width: 760px) { .nav .links { display: none; } }
.footer { border-top: 1px solid var(--border); padding-block: 48px; font-size: var(--type-small); color: var(--muted); }
.footer a:hover { color: var(--fg); }
.hero { padding-block: clamp(64px, 12vw, 160px); }
.hero .lead { max-width: 60ch; margin-top: 20px; }
.hero .row { margin-top: 32px; }
.band { background: var(--surface); border-radius: var(--radius-2xl); padding: clamp(32px, 6vw, 64px); }
.toc { position: sticky; top: 84px; font-size: var(--type-small); color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
.toc a:hover, .toc a[aria-current] { color: var(--fg); }
.article-head { text-align: center; max-width: 860px; margin-inline: auto; }
.article-head .eyebrow { margin-bottom: 20px; }
.article-head .lead { margin-top: 20px; }
.article-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 32px; font-size: var(--type-small); color: var(--muted); }
.article-grid { display: grid; grid-template-columns: 200px minmax(0, var(--prose)) 200px; justify-content: center; gap: 48px; }
@media (max-width: 1100px) { .article-grid { grid-template-columns: minmax(0, var(--prose)); } .article-grid > aside { display: none; } }