/* Advesign – startsidan (home.hbs), ovanpå css/k-page.css. Laddas bara där.
   Byggd ur homepage.html (Open Design, runda 1). */

Layoutprimitiver ligger först i index.html (@layer od-layout). */ :root { --c-white: #ffffff; --c-surface: #f5f2fa; --c-ink: #20163a; --c-muted: #746b84; --c-border: #e8e2f0; --c-accent: #8051d5; --c-lime: #c9ff4d; --c-deep: #150d32; --c-deep-2: #32166b; --c-glow: #6636a1; --c-lilac: #d9c2ff; --c-rule-dark: #4c3b69; --c-muted-strong: #5f5670; --c-pos-on-light: #127a52; --c-neg-on-light: #c2334d; --c-pos-on-dark: #4fe0a5; --c-neg-on-dark: #ff7a85; --font-display: "Space Grotesk", sans-serif; --font-body: "DM Sans", sans-serif; --fs-eyebrow: 0.7rem; --fs-small: 0.875rem; --fs-body: 1.0625rem; --fs-lede: 1.1875rem; --fs-h3: 1.375rem; --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); --fs-h1: clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem); --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-10: 64px; --s-12: 80px; --s-14: 96px; --s-15: 120px; --radius-card: 16px; --radius: 24px; --radius-pill: 999px; --container: 1160px; --gutter: 20px; --header-h: 64px; --sticky-h: 76px; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in: cubic-bezier(0.5, 0, 0.75, 0); --dur-micro: 240ms; --dur-short: 360ms; --dur-exit: 220ms; --bg: var(--c-white); --fg: var(--c-ink); --fg-muted: var(--c-muted); --eyebrow: var(--c-accent); --line: var(--c-border); --grid: rgba(128, 81, 213, 0.07); --dim-color: var(--c-accent); --focus: var(--c-accent); --pos: var(--c-pos-on-light); --neg: var(--c-neg-on-light); --ph-fill: rgba(116, 107, 132, 0.28); --ph-line: rgba(116, 107, 132, 0.6); --panel: var(--c-white); }
.stat-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); max-width: 420px; padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3); border: 1.5px dashed var(--ph-line); border-radius: var(--radius-card); }
.stat-chip-num { display: grid; place-items: center; min-width: 72px; min-height: 56px; padding: 0 var(--s-3); border-radius: 12px; background: var(--c-lime); color: var(--c-deep); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; white-space: nowrap; }
.stat-chip-text { display: grid; gap: 2px; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-muted); }
.stat-chip-text > * { display: block; }
.stat-chip-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--c-lilac); }
.flow-figure { margin: 0; display: grid; gap: var(--s-3); justify-self: center; width: min(100%, 520px); }
.flow-svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow-svg text { font-family: var(--font-body); }
.site-line { fill: none; stroke: rgba(217, 194, 255, 0.42); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.site-line-strong { stroke: rgba(217, 194, 255, 0.7); }
.site-fill { fill: rgba(217, 194, 255, 0.1); stroke: none; }
.flow { cursor: pointer; outline: none; }
.flow-hit { fill: none; stroke: transparent; stroke-width: 22; pointer-events: stroke; }
.flow-path { fill: none; stroke: var(--c-lilac); stroke-width: 2; stroke-linecap: round; opacity: 0.85; transition: stroke var(--dur-micro), opacity var(--dur-micro); }
.flow-out .flow-path { stroke: var(--c-lime); }
.flow-pill { fill: var(--c-deep); stroke: var(--c-rule-dark); stroke-width: 1.5; transition: stroke var(--dur-micro), fill var(--dur-micro); }
.flow-out .flow-pill { stroke: var(--c-lime); }
.flow-pill-text { fill: var(--c-white); font-size: 13px; font-weight: 500; }
.flow-out .flow-pill-text { fill: var(--c-lime); font-weight: 700; }
.flow.is-active .flow-pill, .flow:focus-visible .flow-pill { stroke: var(--c-lime); stroke-width: 2.5; fill: #241650; }
.flow.is-active .flow-path { opacity: 1; stroke-width: 3; }
.flow-dot { fill: var(--c-lime); }
.flow-dot-in { fill: var(--c-lilac); }
.card-bg { fill: var(--c-white); }
.card-tag { fill: var(--c-accent); font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; }
.card-title { fill: var(--c-ink); font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.card-label { fill: var(--c-muted); font-size: 11px; }
.card-value { fill: var(--c-ink); font-size: 11px; font-weight: 700; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.card-track { fill: var(--c-border); }
.card-bar { fill: rgba(116, 107, 132, 0.45); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 400ms var(--ease-out); }
.card-rule { stroke: var(--c-border); stroke-width: 1; }
.flow-svg.is-filled .card-bar { transform: scaleX(1); }
.flow-svg.is-filled .card-value { opacity: 1; }
.flow-svg.is-filled .card-bar:nth-of-type(2) { transition-delay: 40ms; }
.flow-svg.is-finished .flow-path { stroke: var(--c-lime); opacity: 1; }
.flow-svg.is-finished .flow-pill { stroke: var(--c-lime); }
.flow-svg.is-finished .flow-pill-text { fill: var(--c-lime); }
.flow-svg.is-finished .site-line { stroke: rgba(201, 255, 77, 0.55); }
.flow-controls { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.flow-readout { display: block; flex: 1 1 0; min-width: 0; min-height: 3.2em; margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--fg-muted); }
.flow-readout strong { color: var(--fg); }
.tumstock { width: 220px; height: 64px; overflow: visible; }
.tumstock .seg { fill: var(--c-lime); stroke: var(--c-ink); stroke-width: 1.5; }
.tumstock .ticks { stroke: var(--c-ink); stroke-width: 1; }
.tumstock .fold { animation: unfold 1100ms var(--ease-out) infinite alternate; }
.tumstock .f2 { --r: 168deg; }
.tumstock .f3 { --r: -168deg; }
.tumstock .f4 { --r: 168deg; }
.tumstock .f1 { animation: none; }
@keyframes unfold { 0% { transform: rotate(var(--r, 0deg)); } 70%, 100% { transform: rotate(0deg); } }
.loading-text { font-family: var(--font-display); font-weight: 700; color: var(--c-ink); }
.tool-result { display: grid; gap: var(--s-5); align-content: start; }
.result-title { font-size: var(--fs-small); color: var(--c-muted-strong); }
.result-title strong { display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; color: var(--c-ink); }
.result-stats { --od-cols: 1; }
@media (min-width: 480px) {
  .result-stats { --od-cols: 3; }
}
.result-stat { padding: var(--s-3) 0; border-top: 1px solid var(--c-border); }
.result-stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--c-ink); white-space: nowrap; }
.result-stat-label { font-size: var(--fs-small); line-height: 1.4; color: var(--c-muted-strong); }
.level-wrap { display: grid; gap: var(--s-2); }
.level-title, .dist-title { font-weight: 700; font-size: 0.9375rem; color: var(--c-ink); }
.level { display: block; width: 100%; height: auto; overflow: visible; }
.level-body { fill: var(--c-lime); stroke: var(--c-ink); stroke-width: 2; }
.level-vial { fill: var(--c-white); stroke: var(--c-ink); stroke-width: 1.5; }
.level-mark { stroke: var(--c-ink); stroke-width: 1.5; }
.level-screw { fill: var(--c-ink); }
.level-bubble { fill: var(--c-accent); opacity: 0.9; }
.level-bubble-g { transform: translateX(-36px); opacity: 0; transition: transform 400ms var(--ease-out), opacity var(--dur-micro); }
.tool-result.is-in .level-bubble-g { transform: translateX(var(--bubble-x, 0px)); opacity: 1; }
.scale-labels { display: flex; justify-content: space-between; gap: var(--s-4); font-size: 0.8125rem; color: var(--c-muted-strong); }
.dist { display: grid; gap: var(--s-2); }
.dist-track { position: relative; display: flex; gap: 3px; height: 28px; }
.dist-seg { flex: 1 1 0; border-radius: 4px; background: var(--ph-fill); }
.dist-marker-rail { overflow-x: clip; padding-top: var(--s-1); }
.dist-marker-pos { width: 100%; transform: translateX(0%); transition: transform 400ms var(--ease-out); }
.tool-result.is-in .dist-marker-pos { transform: translateX(var(--marker-pos, 50%)); }
.dist-marker { display: inline-grid; justify-items: center; transform: translateX(-50%); }
.dist-marker > * { display: block; }
.dist-marker-tick { width: 2px; height: 12px; background: var(--c-ink); }
.dist-marker-label { padding: 2px var(--s-2); border-radius: var(--radius-pill); background: var(--c-ink); color: var(--c-white); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.report { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 768px) {
  .report { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-8); }
}
.report-preview { position: relative; aspect-ratio: 210 / 297; max-width: 320px; width: 100%; justify-self: center; padding: var(--s-6) var(--s-5); border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-white); box-shadow: 0 24px 48px -28px rgba(32, 22, 58, 0.35); overflow: hidden; }
.report-page { display: grid; gap: var(--s-3); align-content: start; height: 100%; transition: filter var(--dur-short) var(--ease-out); }
.report-preview.is-locked .report-page { filter: blur(5px); }
.report-page .rp-brand { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--c-accent); }
.report-page .rp-title { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; color: var(--c-ink); }
.rp-line { height: 8px; border-radius: 4px; background: var(--ph-fill); }
.rp-line.w-90 { width: 90%; }
.rp-line.w-70 { width: 70%; }
.rp-line.w-50 { width: 50%; }
.rp-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; margin-block: var(--s-2); }
.rp-bars span { flex: 1; border-radius: 3px 3px 0 0; background: var(--ph-fill); }
.rp-bars span:nth-child(1) { height: 60%; }
.rp-bars span:nth-child(2) { height: 80%; }
.rp-bars span:nth-child(3) { height: 60%; }
.rp-bars span:nth-child(4) { height: 80%; }
.rp-bars span:nth-child(5) { height: 60%; }
.report-lock { position: absolute; inset: auto var(--s-4) var(--s-4) var(--s-4); display: grid; justify-items: center; gap: var(--s-1); padding: var(--s-3); border-radius: 12px; background: var(--c-ink); color: var(--c-white); font-size: 0.8125rem; font-weight: 700; text-align: center; }
.report-lock .od-icon { --od-icon-size: 20px; color: var(--c-lime); }
.report-preview:not(.is-locked) .report-lock { display: none; }
.report-form { display: grid; gap: var(--s-4); }
.report-form h3 { display: flex; align-items: center; gap: var(--s-3); }
.report-form h3 .od-icon { --od-icon-size: 28px; color: var(--c-accent); }
.report-form p { color: var(--c-muted); }
.report-row { display: grid; gap: var(--s-3); }
@media (min-width: 480px) {
  .report-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.fineprint { font-size: var(--fs-small); color: var(--c-muted); }
.form-success { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: 12px; background: var(--c-surface); color: var(--c-ink); }
.form-success .od-icon { --od-icon-size: 22px; color: var(--c-pos-on-light); margin-top: 2px; }
.chart-rail { --od-gap: 16px; --od-rail-pad: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding-bottom: var(--s-2); }
.chart-card { width: min(86vw, 380px); display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5); border: 1px solid var(--c-rule-dark); border-radius: var(--radius-card); background: var(--panel); }
.chart-card-head { display: grid; gap: var(--s-3); }
.chart-card-head h3 { font-size: 1.1875rem; }
.chart-kicker { font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-lilac); }
.chart-box { padding-top: var(--s-8); }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-body); fill: var(--fg-muted); font-size: 11px; }
.chart .axis { stroke: var(--c-rule-dark); stroke-width: 1; }
.chart .bar { fill: var(--ph-fill); cursor: pointer; transform-box: fill-box; transition: transform var(--dur-short) var(--ease-out), fill var(--dur-micro); transition-delay: calc(var(--i, 0) * 40ms), 0ms; }
.chart .bar-h { transform-origin: left center; transform: scaleX(0); }
.chart .bar-v { transform-origin: center bottom; transform: scaleY(0); }
.chart .bar.is-highlight { fill: rgba(201, 255, 77, 0.55); }
.chart .bar.is-picked { fill: var(--c-lilac); }
.chart .bar:focus-visible { outline: none; stroke: var(--c-lime); stroke-width: 2; }
.chart .hl-label { fill: var(--c-lime); font-weight: 700; }
.chart .trace { fill: none; stroke: var(--ph-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 380ms var(--ease-out); }
.chart .point { fill: var(--c-deep); stroke: var(--ph-line); stroke-width: 2; cursor: pointer; opacity: 0; transition: opacity var(--dur-micro) 300ms; }
.chart .point.is-picked { fill: var(--c-lilac); stroke: var(--c-lilac); }
.chart .point:focus-visible { outline: none; stroke: var(--c-lime); stroke-width: 3; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart-card.is-drawn .bar-h { transform: scaleX(1); }
.chart-card.is-drawn .bar-v { transform: scaleY(1); }
.chart-card.is-drawn .trace { stroke-dashoffset: 0; }
.chart-card.is-drawn .point { opacity: 1; }
.chart-readout { min-height: 1.5em; font-size: var(--fs-small); color: var(--fg-muted); }
.chart-readout strong { color: var(--c-lime); }
.chart-meaning { font-size: 1rem; line-height: 1.5; color: var(--fg); border-top: 1px solid var(--c-rule-dark); padding-top: var(--s-4); }
.chart-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.chart-source { font-size: 0.8125rem; color: var(--fg-muted); }
.share-btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--c-rule-dark); border-radius: var(--radius-pill); background: transparent; color: var(--fg); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: border-color var(--dur-micro), color var(--dur-micro); }
.share-btn .od-icon { --od-icon-size: 18px; }
@media (hover: hover) {
  .share-btn:hover { border-color: var(--c-lime); color: var(--c-lime); }
}
.chart-video .chart-vid { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-card); background: #20173a; }
.rail-dots { display: flex; justify-content: center; gap: var(--s-1); margin-top: var(--s-4); }
.rail-dot { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.rail-dot span { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-rule-dark); transition: transform var(--dur-micro), background-color var(--dur-micro); }
.rail-dot[aria-current="true"] span { background: var(--c-lime); transform: scale(1.3); }
.data-link { margin-top: var(--s-6); }
@media (min-width: 1024px) {
  .chart-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .chart-rail > :last-child { margin-inline-end: 0; }
  .chart-card { width: auto; }
  .rail-dots { display: none; }
}
.bridge { display: grid; gap: var(--s-6); margin-bottom: var(--s-10); }
.bridge-stage { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 768px) {
}
.bridge-visual { display: grid; gap: var(--s-3); justify-items: start; }
.bridge-field { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--c-surface); }
.field-dot { fill: rgba(116, 107, 132, 0.4); }
.field-target { fill: var(--c-accent); }
.field-target-ring { fill: none; stroke: var(--c-accent); stroke-width: 1; }
.field-label { font-family: var(--font-display); font-size: 14px; font-weight: 700; fill: var(--c-ink); }
.field-label-bg { fill: var(--c-lime); }
.field-scale { font-size: 10px; fill: var(--c-muted-strong); }
.bridge-captions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); counter-reset: cap; }
@media (min-width: 768px) {
  .bridge-captions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}
.bridge-captions li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-2); font-size: 0.9375rem; line-height: 1.45; color: var(--c-ink); }
.bridge-captions li::before { counter-increment: cap; content: "0" counter(cap); font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; padding-top: 3px; color: var(--c-muted); transition: color var(--dur-micro); }
.bridge-captions li.is-active::before { color: var(--c-accent); }
.data-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.data-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--c-border); }
.data-row-name { display: grid; }
.data-row-name > * { display: block; }
.data-row-title { font-size: 0.875rem; font-weight: 700; line-height: 1.3; }
.data-row-src { font-size: 0.75rem; line-height: 1.4; color: var(--c-muted-strong); }
.data-status { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); border: 1px dashed var(--c-muted); border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; color: var(--c-muted-strong); white-space: nowrap; }
.data-status .od-icon { --od-icon-size: 12px; }
.bridge-questions { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: 12px; background: var(--c-surface); }
.bridge-questions-title { font-size: 0.8125rem; font-weight: 700; color: var(--c-accent); }
.bridge-questions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.bridge-questions li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-2); font-size: 0.875rem; line-height: 1.4; }
.bridge-questions li .od-icon { --od-icon-size: 14px; margin-top: 3px; color: var(--c-accent); }
.bridge-questions.pulse { animation: softPulse 380ms var(--ease-out) 1; }
@keyframes softPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(128, 81, 213, 0); } 50% { box-shadow: 0 0 0 4px rgba(128, 81, 213, 0.25); } }
.data-start { display: grid; gap: var(--s-6); margin-bottom: var(--s-12); padding: var(--s-6) var(--s-5); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
@media (min-width: 768px) {
  .data-start { padding: var(--s-8); }
}
@media (min-width: 1024px) {
  .data-start { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--s-10); }
}
.data-start-copy { display: grid; gap: var(--s-3); }
.data-start-copy p { color: var(--c-muted-strong); }
.data-lanes { display: grid; gap: var(--s-3); }
@media (min-width: 600px) {
  .data-lanes { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--s-4); }
}
.data-lane { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-white); }
.data-lane > * { display: block; }
.data-lane + .data-lanes-arrow + .data-lane { border-style: dashed; border-color: var(--c-accent); }
.data-lane-kicker { font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); }
.data-lane-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin-bottom: var(--s-2); }
.data-lane ul { margin: 0; padding-left: var(--s-4); display: grid; gap: var(--s-1); font-size: 0.9375rem; line-height: 1.45; }
.data-lanes-arrow { display: grid; place-items: center; color: var(--c-accent); }
.data-lanes-arrow .od-icon { --od-icon-size: 24px; }
@media (max-width: 599px) {
  .data-lanes-arrow .od-icon { transform: rotate(90deg); }
}
.packages-lead { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: var(--s-5); }
.build { position: relative; }
.build-layout { display: grid; gap: var(--s-8); }
.house { display: block; width: 100%; height: auto; overflow: visible; }
/* HOUSE-BUILD: fasadritningen ur tools/build_house.py (partials/home/house.hbs) */
.house .ln { fill: none; stroke: var(--c-lilac); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.house .ln-thin { stroke-width: 1; opacity: 0.8; }
.house .ln-hair { stroke-width: 0.75; opacity: 0.45; }
.house .ln-hidden { stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.6; }
.house .ln-dim { stroke-width: 0.9; opacity: 0.75; }
.house .ln-lime { stroke: var(--c-lime); }
.house .ln-roof { stroke-width: 2.25; }
.house .ln-deep { stroke: var(--c-deep); stroke-width: 1.25; }
.house .ln-earth { opacity: 0.35; }
.house .ground { stroke: var(--c-lilac); stroke-width: 1.5; }
.house .fill-soft { fill: rgba(217, 194, 255, 0.07); }
.house .fill-wall { fill: #1c1342; }
.house .fill-glass { fill: rgba(217, 194, 255, 0.16); }
.house .fill-lime { fill: var(--c-lime); }
.house .fill-deep { fill: var(--c-deep); }
.house .lbl { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; fill: var(--c-lilac); }
.house .lbl-sm { font-size: 10px; letter-spacing: 0.12em; opacity: 0.8; }
.house .lbl-dim { font-size: 10px; letter-spacing: 0.08em; opacity: 0.85; }
.house .lbl-lime { fill: var(--c-lime); font-size: 11px; }
.step-house .house .tb { display: none; }
.house .tb-box { fill: rgba(21, 13, 50, 0.6); stroke: var(--c-lilac); stroke-width: 1; opacity: 0.9; }
.house .tb-sheet { display: none; }
.house[data-stage="1"] .tb-sheet-1, .house[data-stage="2"] .tb-sheet-2, .house[data-stage="3"] .tb-sheet-3 { display: inline; }
.house .tb-stamp-box { fill: none; stroke: var(--c-lime); stroke-width: 1.25; }
.house .tb-stamp { opacity: 0; transform-box: fill-box; transform-origin: center; transform: rotate(-6deg) scale(0.85); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.house[data-stage="3"] .tb-stamp { opacity: 1; transform: rotate(-6deg) scale(1); transition-delay: 250ms; }
/* Skikt som inte är byggda än: streckade hjälplinjer, utan ytor, text och skraffering */
.house .st, .house .st :is(.fill-soft, .fill-wall, .fill-glass, .fill-lime, .fill-deep, .ln-hair, .lbl) { transition: opacity 450ms var(--ease-out); }
.house[data-stage="1"] :is(.st-2, .st-3), .house[data-stage="2"] .st-3 { opacity: 0.32; }
.house[data-stage="1"] :is(.st-2, .st-3) .ln, .house[data-stage="2"] .st-3 .ln { stroke: var(--c-lilac); stroke-dasharray: 2 4; }
.house[data-stage="1"] :is(.st-2, .st-3) :is(.fill-soft, .fill-wall, .fill-glass, .fill-lime, .fill-deep, .ln-hair, .lbl),
.house[data-stage="2"] .st-3 :is(.fill-soft, .fill-wall, .fill-glass, .fill-lime, .fill-deep, .ln-hair, .lbl) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .house *, .house .tb-stamp { transition: none !important; } }
.build-house { width: min(100%, 520px); justify-self: center; }
.build-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); position: relative; }
.step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--c-rule-dark); transition: opacity var(--dur-micro); }
.step-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--c-lime); line-height: 1.1; }
.step-body { display: grid; gap: var(--s-2); }
.step-stage { font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-lilac); }
.step-body p { color: var(--fg-muted); }
.step-house { display: none; }
.step[aria-current="step"] { border-top-color: var(--c-lime); }
.build.is-follow .build-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-12); }
.build.is-follow .build-house { width: min(100%, 440px); }
.build.is-follow .build-steps { gap: var(--s-6); }
.build.is-list .build-house { display: none; }
.build.is-list .build-steps { padding-left: var(--s-5); }
.build.is-list .build-steps::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c-rule-dark); }
.build.is-list .build-steps::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c-lime); transform-origin: top; transform: scaleY(var(--progress, 0)); }
.build.is-list .step-house { display: block; grid-column: 2; max-width: 280px; }
.founder { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) {
  .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-12); align-items: start; }
}
.founder-id { display: grid; gap: var(--s-6); justify-items: center; }
.portrait { position: relative; width: 200px; aspect-ratio: 1; display: grid; place-items: center; }
.portrait > * { grid-area: 1 / 1; }
.portrait-ph { width: 176px; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 50%; background: var(--c-white); text-align: center; }
.portrait-ph > * { display: block; }
.portrait-initials { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--c-accent); line-height: 1; }
.portrait-note { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: var(--c-muted-strong); }
.pencil { width: 200px; height: 200px; overflow: visible; }
.pencil circle { fill: none; stroke: var(--c-ink); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 400ms var(--ease-out); }
.pencil .p1 { stroke-width: 1.6; }
.pencil .p2 { stroke-width: 0.8; opacity: 0.55; transition-delay: 80ms; }
.portrait.is-in .pencil circle { stroke-dashoffset: 0; }
.sign { width: min(100%, 400px); display: grid; justify-items: stretch; }
.sign-board { border: 2px solid var(--c-ink); border-radius: 8px; background: var(--c-white); overflow: hidden; }
.sign-head { padding: var(--s-3) var(--s-4); background: var(--c-deep); color: var(--c-white); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.sign-rows { margin: 0; padding: var(--s-2) var(--s-4) var(--s-3); display: grid; }
.sign-row { display: grid; gap: 2px; padding: var(--s-2) 0; border-bottom: 1px dashed var(--c-border); }
.sign-row:last-child { border-bottom: 0; }
.sign-row dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-strong); }
.sign-row dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.sign-posts { display: flex; justify-content: space-between; padding-inline: 18%; }
.sign-posts span { display: block; width: 8px; height: 44px; background: var(--c-ink); border-radius: 0 0 2px 2px; }
.founder-text { display: grid; gap: var(--s-5); }
.founder-text p:not(.eyebrow) { font-size: var(--fs-lede); line-height: 1.6; }
.founder-text .eyebrow { margin: 0; }
.founder-text .slot { margin-top: var(--s-3); }
@media (prefers-reduced-motion: reduce) {
  .card-bar { transform: scaleX(1); }
  .card-value { opacity: 1; }
  .chart .bar-h, .chart .bar-v { transform: none; }
  .chart .trace { stroke-dashoffset: 0; }
  .chart .point { opacity: 1; }
  .spark-line { stroke-dashoffset: 0; }
  .pencil circle { stroke-dashoffset: 0; }
  .tumstock .fold { animation: none; }
  .level-bubble-g { transform: translateX(var(--bubble-x, 0px)); opacity: 1; }
  .dist-marker-pos { transform: translateX(var(--marker-pos, 50%)); }
}

/* ---------- Tillägg i Ghost-temat ---------- */
/* Prickfältet och "Ditt företag"-kortet: bredvid varandra från 1024 px. Kortet
   fyller sin spalt (högst 440 px när det står ensamt), så att kanterna linjerar
   med fältet och med bildtexterna, som följer samma 3:2-delning. */
@media (min-width: 1024px) { .bridge-stage { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-8); } }
.bridge-card { width: 100%; max-width: 440px; justify-self: start; }
@media (min-width: 1024px) {
  .bridge-card { max-width: none; }
  .bridge-captions {
    --stage-gap: var(--s-8);
    --caption-gap: var(--s-5);
    grid-template-columns: repeat(2, calc(((100% - var(--stage-gap)) * 0.6 - var(--caption-gap)) / 2)) minmax(0, 1fr);
    column-gap: var(--caption-gap);
  }
  .bridge-captions li:nth-child(3) { margin-left: calc(var(--stage-gap) - var(--caption-gap)); }
}

/* HERO-STAT med en riktig siffra: heldragen ram i stället för platshållarens streckade */
.stat-chip { border-style: solid; border-color: var(--c-rule-dark); }
.stat-chip-text strong { color: var(--fg); }
.stat-chip-label { text-transform: uppercase; }

/* Diagramkort: underrubrik och värdeetiketter i SVG:n (byggs av tools/build_home_data.py) */
.chart-sub { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-muted); }
.chart-box { padding-top: var(--s-3); }
.chart text.val { fill: var(--fg); font-weight: 700; }
.chart text.hl-label { fill: var(--c-lime); }
.chart .bar { fill: rgba(217, 194, 255, 0.42); }
.chart .bar.is-highlight { fill: var(--c-lime); }
.chart .bar.is-picked { fill: var(--c-lilac); }
.chart .trace { stroke: var(--c-lilac); }
.chart .point { stroke: var(--c-lilac); }

/* Jämför: tre siffror och en markör, ur benchmark.json */
.result-stats { margin: 0; }
.result-note { font-size: var(--fs-small); color: var(--c-muted-strong); }
.result-note:empty { display: none; }
.tool-source { margin-top: var(--s-4); font-size: 0.8125rem; color: var(--c-muted-strong); }

/* Porträtt i stället för platshållaren */
.portrait-img { width: 176px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--c-white); }

/* Jämför: MSEK inne i fältet, som i komponentbibliotekets K-COMPARE-TOOL */
.input-unit { position: relative; }
.input-unit .input { padding-right: 76px; }
.input-unit .unit { position: absolute; right: var(--s-5); top: 50%; transform: translateY(-50%); font-size: var(--fs-small); font-weight: 700; color: var(--c-muted-strong); pointer-events: none; }
.result-stat-num.is-neg { color: var(--c-neg-on-light); }
#r-lead { font-size: 0.9375rem; color: var(--c-ink); }

/* TOOL-REPORT är en platshållare tills PDF-rapporten finns */
.ph-tag-inline { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--c-muted-strong); }

/* Villkoren under paketen och raden under knappen i avslutningen */
.packages-fine { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--c-muted-strong); }
.link-arrow.link-inline { display: inline; min-height: 0; }
.final-fine { font-size: var(--fs-small); color: var(--fg-muted); }
.final-fine a { color: var(--c-white); font-weight: 700; text-decoration-color: var(--c-lime); text-underline-offset: 4px; }

/* "Ditt företag"-kortet: när raden inte räcker (320 px, och i två spalter vid 768 px)
   hamnar statusen under namnet i stället för att skriva över det. */
.data-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.data-row-name { flex: 1 1 8.5em; min-width: 0; }
/* Står statusen på egen rad hamnar den ändå till höger, som på de andra raderna. */
.data-status { margin-left: auto; }

/* Exempelsiffrorna: förlusten i rött (datafärg), och staplarna i miniöversikterna
   lika långa som sina värden (--w) i stället för platshållarnas grå fält. */
.card-bar.is-neg { fill: var(--c-neg-on-light); }
.card-value.is-neg { fill: var(--c-neg-on-light); }
.job-row-bar { background: linear-gradient(90deg, rgba(116, 107, 132, 0.6) var(--w, 100%), rgba(116, 107, 132, 0.16) 0); }
.job-row.is-loss .job-row-bar { background: linear-gradient(90deg, var(--c-neg-on-light) var(--w, 100%), rgba(194, 51, 77, 0.16) 0); }

/* Kassaflöde i hero-kortet: prognoslinjen, nollinjen och luckan */
.card-zero { stroke: var(--c-border); stroke-width: 1; stroke-dasharray: 3 3; }
.card-cash { fill: none; stroke: rgba(116, 107, 132, 0.75); stroke-width: 1.6; stroke-linecap: round; }
.card-dip { fill: var(--c-neg-on-light); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.flow-svg.is-filled .card-dip { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .card-dip { opacity: 1; } }