/* Bytesguiden (working name). Palette and type from BYGGUPPDRAG chapter 5; tests/test_build.py checks these tokens against data/brand.json
   and the contrast of every text/background pair used below. Accent is reserved for actionable ad elements (the CTA and the Annons pill):
   price results use paper and ink only, the cards sit on panel. Layout after the SaaS template Lucas pointed to (15 Sep): airy centred hero
   with an animated sky, the tool in an app window, feature cards, a split chart section, plan cards, FAQ and a closing band. */
:root {
  --ground: #FCFBF9;
  --paper: #FFFFFF;
  --panel: #F4F1EC;
  --line: #E8E3DC;
  --ink: #2A2019;
  --ink2: #5C4F42;
  --accent: #C24A12;
  --accent-strong: #A63F12;
  --accent-wash: #FBEAE0;
  --ok: #1F6F5C;
  --warn: #96530A;
  /* decoration only, never behind small text without a paper layer: a morning sky that fades into the warm ground */
  --sky-top: #DCE9F2;
  --sky-mid: #EEF1F0;
  --sky-glow: #FCE3CF;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(42, 32, 25, .05), 0 10px 30px -14px rgba(42, 32, 25, .18);
  --shadow-lg: 0 2px 4px rgba(42, 32, 25, .04), 0 30px 60px -24px rgba(42, 32, 25, .28);
  --wrap: 72rem;
  --measure: 42rem;
  color-scheme: light;
}

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/Inter-Bold.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }  /* the sticky header never covers what scrolls into view (focus, anchors) */
body {
  margin: 0; background: var(--ground); color: var(--ink); overflow-x: clip;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.6; font-feature-settings: "cv11";
}
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); font-weight: 700; margin-top: 1.5rem; max-width: 20ch; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 650; margin-top: 2.5rem; }
h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1.5rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--ink2); max-width: var(--measure); }
.note, .hint { color: var(--ink2); font-size: .9375rem; }
.optional { font-weight: 400; color: var(--ink2); font-size: .875em; }
.eyebrow { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); margin-bottom: .5rem; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: .5rem; background: var(--paper); padding: .5rem .75rem; border: 2px solid var(--ink); z-index: 50; }
.skip:focus { left: .5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2.75rem; padding: .625rem 1.125rem; border-radius: 10px;
  font: inherit; font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .15s, border-color .15s, transform .15s; }
.btn-dark { background: var(--ink); color: #FFFFFF; }
.btn-dark:hover { background: #000000; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: rgba(255, 255, 255, .6); }
.btn-outline { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink2); }
.btn:active { transform: translateY(1px); }

/* ---------- frame ---------- */
.preview-bar { background: var(--panel); border-bottom: 1px solid var(--line); color: var(--ink); font-size: .8125rem; padding-block: .4375rem; position: relative; z-index: 21; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(252, 251, 249, .96); border-bottom: 1px solid rgba(232, 227, 220, .7); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: .75rem; }
.wordmark { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1875rem; text-decoration: none; letter-spacing: -0.02em; }
.logo-mark { width: 1.375rem; height: 1.375rem; border-radius: 7px; background: radial-gradient(circle at 35% 35%, #FFD9B8 0 22%, var(--accent) 23% 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.nav, .footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.nav a { text-decoration: none; font-weight: 500; font-size: .9375rem; padding-block: .5rem; display: inline-block; color: var(--ink2); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; }
.header-cta { min-height: 2.375rem; padding: .4375rem .875rem; }
main { padding-bottom: 0; }

.site-footer { border-top: 1px solid var(--line); background: var(--paper); padding-block: 3rem 2rem; font-size: .9375rem; color: var(--ink2); margin-top: 0; }
.site-footer a { color: var(--ink); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 2fr 1fr 1fr; margin-bottom: 2rem; }
.footer-brand .footer-note { max-width: 28rem; margin-top: .75rem; }
.footer-nav { flex-direction: column; gap: .5rem; }
.footer-nav a, .footer-sources a { text-decoration: none; }
.footer-nav a:hover, .footer-sources a:hover { text-decoration: underline; }
.footer-title { font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
.footer-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.operator { color: var(--ink); border-top: 1px solid var(--line); padding-top: 1.25rem; margin: 0; }
@media (max-width: 48rem) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .header-cta { display: none; } }

/* ---------- the sky ---------- */
/* Real images from ChatGPT (docs/BILDBRIEF_HIMMEL.md): an opaque plate, transparent clouds that drift, a sun glow, and a horizon with wind
   turbines whose rotors turn. Until the files exist the band is this gradient alone. The rotor image has its hub exactly in the centre, the
   tower image its top exactly at the top centre, so the rotor sits on the tower by geometry, not by eye. */
.sky { position: relative; isolation: isolate; margin-inline: calc(50% - 50vw); padding-inline: max(1.25rem, calc(50vw - var(--wrap) / 2 + 1.25rem)); overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--ground) 100%); }
.sky-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sky-art img { position: absolute; max-width: none; user-select: none; }
.sky-plate { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.sun-glow { width: min(60rem, 90vw); height: auto; right: -6%; top: -30%; opacity: .9; will-change: transform, opacity; animation: glow 10s ease-in-out infinite alternate; }
.cloud { height: auto; left: 0; will-change: transform; backface-visibility: hidden; animation: drift linear infinite; }
.c1 { width: min(38rem, 70vw); top: 4%; animation-duration: 140s; animation-delay: -30s; }
.c2 { width: min(26rem, 55vw); top: 26%; animation-duration: 110s; animation-delay: -85s; opacity: .85; }
.c3 { width: min(18rem, 40vw); top: 12%; animation-duration: 90s; animation-delay: -10s; opacity: .8; }
.c4 { width: min(22rem, 45vw); top: 44%; animation-duration: 170s; animation-delay: -120s; opacity: .6; transform: scaleX(-1); }
.horizon { position: absolute; left: 50%; bottom: 0; width: max(100%, 64rem); transform: translateX(-50%); }   /* never cropped: the hills keep their own silhouette */
.sky-art .horizon-img { position: relative; display: block; width: 100%; height: auto; }
.sky-art .mini-rotor { position: absolute; height: auto; will-change: transform; animation: spin 8s linear infinite; }
.turbine { position: absolute; bottom: calc(max(100vw, 64rem) * .2); width: 6rem; }
.turbine .tower { position: relative; width: 100%; height: auto; display: block; }
.turbine .rotor { left: -30%; top: 0; width: 160%; height: auto; margin-top: -80%; transform-origin: 50% 50%; will-change: transform; animation: spin 9s linear infinite; }
.t1 { left: 66%; width: 4.5rem; } .t2 { left: 75%; width: 6.5rem; bottom: calc(max(100vw, 64rem) * .19); } .t2 .rotor { animation-duration: 12s; } .t3 { left: 86%; width: 3.5rem; } .t3 .rotor { animation-duration: 7s; animation-delay: -3s; }
@media (max-width: 40rem) { .turbine { display: none; } .hero { padding-bottom: 12rem; } .app { margin-top: -6rem; } }
@keyframes drift { from { transform: translate3d(-110%, 0, 0); } to { transform: translate3d(calc(100vw + 10%), 0, 0); } }
@keyframes glow { from { transform: scale(1); opacity: .8; } to { transform: scale(1.06); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cloud, .sun-glow, .turbine .rotor, .mini-rotor { animation: none !important; } .c1 { transform: translateX(8vw); } .c2 { transform: translateX(58vw); } .c3 { transform: translateX(34vw); } .c4 { transform: translateX(76vw) scaleX(-1); } }

/* ---------- home: hero ---------- */
.hero { padding-block: 3.5rem calc(max(100vw, 64rem) * .2 + 6rem); text-align: center; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7rem; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(252, 251, 249, 0), var(--ground)); }
.hero-inner { position: relative; max-width: 52rem; margin-inline: auto; }
.hero .lead { color: var(--ink); }
.btn-ghost { background: rgba(255, 255, 255, .86); }
.hero h1 { margin: 1rem auto .75rem; max-width: 18ch; }
.hero .lead { margin-inline: auto; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.eyebrow-pill { position: relative; display: inline-flex; align-items: center; gap: .5rem; background: rgba(255, 255, 255, .85); border: 1px solid rgba(232, 227, 220, .9); color: var(--ink);
  border-radius: 999px; padding: .3125rem .875rem; font-size: .8125rem; font-weight: 500; margin: 0; box-shadow: var(--shadow); }
.pulse { position: relative; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); animation: pulse 2.4s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pulse::after { animation: none; display: none; } }

/* ---------- home: the app window ---------- */
.flow.flow-start { max-width: none; }
.app { position: relative; z-index: 2; margin-top: calc(max(100vw, 64rem) * -.13); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; scroll-margin-top: 5rem; }
.app-bar { display: flex; align-items: center; gap: .375rem; padding: .625rem 1rem; border-bottom: 1px solid var(--line); background: var(--ground); }
.dot { width: .625rem; height: .625rem; border-radius: 50%; background: var(--line); }
.app-title { margin-left: .75rem; font-size: .8125rem; font-weight: 600; color: var(--ink2); }
.app-body { display: grid; grid-template-columns: minmax(16rem, 20rem) 1fr; }
.app-side { border-right: 1px solid var(--line); padding: 1.25rem; background: linear-gradient(180deg, var(--paper), var(--ground)); }
.app-side .step { margin-top: 0; margin-bottom: 1.25rem; }
.app-side .step-title { font-size: 1rem; margin-bottom: .5rem; }
.app-side .choice span { min-height: 2.5rem; padding: .375rem .75rem; font-size: .9375rem; }
.app-side #val-omrade .choice-row { display: grid; grid-template-columns: 1fr 1fr; }
.app-side #val-omrade .choice, .app-side #val-omrade .choice span { width: 100%; min-width: 0; }
.app-side .summary { border-top: 1px solid var(--line); padding-top: 1rem; }
.app-side .summary h2 { font-size: 1rem; margin: 0 0 .5rem; }
.app-side .summary-list { grid-template-columns: 1fr; gap: 0; font-size: .875rem; }
.app-side .summary-list dt { margin-top: .5rem; font-size: .8125rem; }
.app-side .area-list { font-size: .8125rem; }
.app-main { padding: 1.25rem; min-width: 0; }
.app-main .selection { margin-top: 0; }
@media (max-width: 56rem) {
  .app-body { grid-template-columns: 1fr; }
  .app-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .app { margin-top: -8rem; }
}

.sources { text-align: center; padding-block: 2.5rem 1rem; color: var(--ink2); font-size: .875rem; }
.sources p { margin-bottom: .75rem; }
.sources ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.5rem; }
.supplier-strip { align-items: center; }
.supplier-strip li { display: flex; align-items: center; height: 2.5rem; }
.supplier-strip { gap: 1rem 3rem !important; }
/* one tone for every logo, like a template's logo row: brightness(0) turns any logo, even a white one, into a dark silhouette. Fixed height,
   because some harvested SVGs have no intrinsic size and collapse to nothing with height: auto. */
.supplier-strip img { display: block; height: 1.625rem; width: auto; max-width: 9rem; object-fit: contain; filter: brightness(0); opacity: .5; transition: opacity .3s; }
.supplier-strip li:hover img { opacity: .8; }
.wordmark-name { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--ink2); opacity: .85; white-space: nowrap; }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; margin: 1.25rem 0 0; font-size: .8125rem; }
.trust-row span { display: inline; }
.trust-row span::before { content: ""; display: inline-block; vertical-align: middle; margin: -.125rem .375rem 0 0; width: .375rem; height: .375rem; border-radius: 50%; background: var(--ok); }

/* ---------- home: bands, features, split, plans ---------- */
.band { padding-block: 4.5rem; }
.band-soft { margin-inline: calc(50% - 50vw); padding-inline: max(1.25rem, calc(50vw - var(--wrap) / 2 + 1.25rem)); background: linear-gradient(180deg, var(--paper), var(--ground)); border-block: 1px solid var(--line); }
.band-head { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
.band-head h2 { margin-top: 0; }
.band-head p { color: var(--ink2); }
.band-narrow { max-width: 44rem; margin-inline: auto; }
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem 1rem 1.25rem; box-shadow: var(--shadow); }
.feature h3 { margin: 1rem .25rem .375rem; }
.feature p { margin: 0 .25rem; color: var(--ink2); font-size: .9375rem; }
.feature-visual { height: 9.5rem; border-radius: var(--radius); background: linear-gradient(160deg, var(--sky-top), var(--ground) 70%); border: 1px solid var(--line); padding: 1rem; display: flex; gap: .5rem; overflow: hidden; }
.feature-visual.has-shot { padding: 0; height: auto; aspect-ratio: 64 / 45; background: var(--ground); }
.feature-visual.has-shot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.feature-list { flex-direction: column; justify-content: center; }
.feature-list span { display: block; height: 1.25rem; border-radius: 6px; background: var(--paper); box-shadow: var(--shadow); }
.feature-list span:nth-child(1) { width: 92%; } .feature-list span:nth-child(2) { width: 80%; } .feature-list span:nth-child(3) { width: 68%; } .feature-list span:nth-child(4) { width: 55%; }
.feature-bars { align-items: flex-end; }
.feature-bars span { flex: 1; border-radius: 4px 4px 0 0; background: var(--ink2); opacity: .35; }
.feature-bars span:nth-child(1) { height: 35%; } .feature-bars span:nth-child(2) { height: 50%; } .feature-bars span:nth-child(3) { height: 72%; } .feature-bars span:nth-child(4) { height: 90%; opacity: 1; background: var(--ink); } .feature-bars span:nth-child(5) { height: 64%; } .feature-bars span:nth-child(6) { height: 42%; } .feature-bars span:nth-child(7) { height: 30%; }
.feature-split { align-items: flex-end; justify-content: center; gap: 1.5rem; }
.feature-split span { width: 3.5rem; border-radius: 8px 8px 0 0; }
.feature-split span:nth-child(1) { height: 60%; background: var(--ink); } .feature-split span:nth-child(2) { height: 85%; background: var(--ok); }

.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: center; padding-block: 3rem 4.5rem; }
.split h2 { margin-top: 0; }
.legend { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: 1.25rem; font-size: .9375rem; }
.legend li { display: inline-flex; align-items: center; gap: .5rem; }
.swatch { width: 1.25rem; height: .25rem; border-radius: 2px; }
.swatch-m { background: var(--ink); } .swatch-f { background: var(--ok); }
.window { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.window-body { padding: 1rem; min-height: 12rem; }
@media (max-width: 56rem) { .split { grid-template-columns: 1fr; gap: 1.5rem; } }

.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--ink2); font-size: 11px; font-family: inherit; }
.chart .line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .line-m { stroke: var(--ink); } .chart .line-f { stroke: var(--ok); }
.chart .bar { fill: var(--line); } .chart .bar-now { fill: var(--ink); }
.chart-wrap:empty { display: none; }

.plans { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.plan { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow); }
.plan-current { border: 2px solid var(--ink); padding: calc(1.5rem - 1px); }
.plan-name { font-weight: 650; font-size: 1.125rem; margin: 0; }
.plan-for { color: var(--ink2); font-size: .875rem; margin: 0 0 1rem; }
.plan-price { margin: 0; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.plan-price small { font-size: .9375rem; font-weight: 500; color: var(--ink2); letter-spacing: 0; }
.plan-sub { color: var(--ink2); font-size: .875rem; margin: .375rem 0 1rem; min-height: 2.8em; }
.plan-points { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; font-size: .9375rem; flex: 1; }
.plan-points li { display: flex; gap: .5rem; }
.plan-points li::before { content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .55em; border-radius: 50%; background: var(--ok); }
.plan .btn { width: 100%; }

/* ---------- home: FAQ and closing band ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; padding-block: 5rem; }
.faq h2 { margin-top: 0; }
.help-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); max-width: 22rem; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.125rem 0; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-weight: 400; font-size: 1.375rem; line-height: 1; color: var(--ink2); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--ink2); margin: 0 0 1.125rem; max-width: 40rem; }
@media (max-width: 48rem) { .faq { grid-template-columns: 1fr; gap: 1.5rem; } }
.cta-band { text-align: center; padding-block: 5rem 5.5rem; border-top: 1px solid var(--line); }
.cta-band h2 { margin-top: 0; }
.cta-band p { color: var(--ink2); }

/* ---------- other pages ---------- */
.entries { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.entry a { display: block; height: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; text-decoration: none; box-shadow: var(--shadow); }
.entry a:hover { border-color: var(--ink2); }
.entry-title { display: block; font-weight: 650; font-size: 1.125rem; line-height: 1.3; margin-bottom: .375rem; }
.entry-text { display: block; color: var(--ink2); }
.entries.compact .entry-title { margin: 0; font-size: 1.0625rem; }
.prose { max-width: var(--measure); }
.prose ul { padding-left: 1.25rem; }
main > h1:first-child { margin-top: 2.5rem; }
.table-wrap { overflow-x: auto; margin: 1.5rem 0 .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
table.forms { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: .9375rem; }
table.forms caption { text-align: left; font-weight: 600; padding: .75rem 1rem 0; }
table.forms th, table.forms td { text-align: left; vertical-align: top; padding: .75rem 1rem; border-top: 1px solid var(--line); }
table.forms thead th { border-top: 0; color: var(--ink2); font-weight: 600; font-size: .875rem; }
table.forms tbody th { font-weight: 600; }
@media (max-width: 40rem) {
  .table-wrap { overflow-x: visible; }
  table.forms { min-width: 0; }
  table.forms caption { display: block; }
  table.forms thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.forms, table.forms tbody, table.forms tr, table.forms th, table.forms td { display: block; }
  table.forms tbody th { padding-bottom: .25rem; font-size: 1.0625rem; }
  table.forms td { border-top: 0; padding-block: .25rem; }
  table.forms td::before { content: attr(data-label); display: block; color: var(--ink2); font-size: .8125rem; font-weight: 600; }
  table.forms tr { padding-bottom: .5rem; }
  table.forms tr + tr { border-top: 1px solid var(--line); }
}
.topics { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.5rem 0; max-width: var(--measure); }
.topics-title { font-weight: 600; margin-bottom: .5rem; }
.topics ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.topics a { display: inline-block; padding: .375rem .75rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--ground); font-size: .9375rem; }
.topics a:hover { border-color: var(--ink2); }
.flow-intro { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.facts div { display: contents; }
.facts dt { color: var(--ink2); }
.facts dd { margin: 0; }

/* ---------- the flow ---------- */
.flow { max-width: 56rem; padding-bottom: 3rem; }
.flow.flow-start { padding-bottom: 0; }
.step { margin-top: 1.5rem; }
.step-title { margin-top: 0; font-size: 1.25rem; }
fieldset.choices { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
fieldset.choices legend { font-weight: 600; padding: 0; margin-bottom: .375rem; font-size: .9375rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: flex; flex-direction: column; justify-content: center; min-height: 2.75rem; padding: .5rem .875rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper); color: var(--ink); line-height: 1.25; transition: border-color .15s, background-color .15s; box-shadow: 0 1px 1px rgba(42, 32, 25, .04); }
.choice span small { color: var(--ink2); font-size: .8125rem; }
.choice input:checked + span { border: 2px solid var(--ink); padding: calc(.5rem - 1px) calc(.875rem - 1px); background: var(--panel); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.choice input:hover + span { border-color: var(--ink2); }
#val-omrade .choice span { min-width: 7.5rem; }

.pc-help { margin: .25rem 0 1rem; }
.pc-help summary { cursor: pointer; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding-block: .375rem; font-size: .9375rem; }
.pc-form { margin-top: .5rem; }
.pc-form label { display: block; font-weight: 500; margin-bottom: .25rem; font-size: .9375rem; }
.pc-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-row input { font: inherit; padding: .5rem .75rem; border: 1px solid var(--ink2); border-radius: 10px; background: var(--paper); color: var(--ink); width: 8rem; min-height: 2.75rem; }
.pc-msg { margin: .5rem 0; color: var(--ink); font-size: .9375rem; }
.pc-msg:empty { display: none; }
.pc-choice { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.area-list { font-size: .9375rem; color: var(--ink2); padding-left: 1.25rem; }

.btn-secondary { font: inherit; font-weight: 500; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; }
.btn-secondary:hover { background: var(--panel); }
.btn-link { font: inherit; background: none; border: 0; padding: .25rem 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 2.25rem; }

.msg { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .875rem 1rem; }
.msg-missing { border-left: 4px solid var(--warn); }
.msg-preview { background: var(--paper); border-color: var(--line); font-size: .9375rem; }

/* blocks 1-4: paper, ink, no accent */
.price-zone { margin-top: 1.25rem; }
.result { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.25rem; box-shadow: var(--shadow); }
.result-label { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; letter-spacing: 0; }
.price { margin: 0; line-height: 1.1; }
.price-value { font-size: clamp(2.75rem, 2rem + 3vw, 4rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.price-unit { font-size: 1.125rem; font-weight: 500; color: var(--ink2); }
.price-under { font-weight: 600; margin: .5rem 0 .25rem; }
.price-def { color: var(--ink2); font-size: .9375rem; }
.meta { display: grid; gap: .25rem 1rem; grid-template-columns: max-content 1fr; margin: .75rem 0 0; font-size: .9375rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.meta div { display: contents; }
.meta dt { color: var(--ink2); }
.meta dd { margin: 0; }
.compare { border-top: 1px solid var(--line); margin-top: .875rem; padding-top: .5rem; }
.compare h3 { font-size: .9375rem; margin: 0; }
.compare-day { color: var(--ink2); font-size: .875rem; margin: 0 0 .375rem; }
.compare-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; font-variant-numeric: tabular-nums; }
.compare-row dt { color: var(--ink2); font-size: .8125rem; }
.compare-row dd { margin: 0; font-weight: 600; }
.compare .chart-wrap { margin-top: .75rem; }

.explain [data-affects] p { margin-bottom: .75em; }
.explain h2 { margin-top: 0; }
.summary-list { margin: 0; display: grid; grid-template-columns: max-content 1fr max-content; gap: .25rem 1rem; align-items: center; }
.summary-list div { display: contents; }
.summary-list dt { color: var(--ink2); }
.summary-list dd { margin: 0; }
@media (max-width: 30rem) {
  .summary-list { grid-template-columns: 1fr max-content; }
  .summary-list dt { grid-column: 1 / -1; margin-top: .5rem; font-size: .875rem; }
  .meta { grid-template-columns: 1fr; }
  .meta dt { margin-top: .375rem; font-size: .875rem; }
  #val-omrade .choice span { min-width: 0; }
}

/* blocks 9-10: labelled, cards on panel */
.selection { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; margin-top: 2.25rem; }
.adlabel { background: var(--accent-wash); color: var(--accent-strong); font-weight: 600; font-size: .875rem; padding: .5rem .75rem; border-radius: 10px; margin-bottom: 1rem; }
.adlabel a { color: var(--accent-strong); }
.sel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .5rem 1.5rem; }
.sel-head > div:first-child { flex: 1 1 18rem; }
.selection-title { margin: 0 0 .25rem; font-size: 1.5rem; }
.selection-order, .selection-count, .selection-basis { font-size: .9375rem; color: var(--ink2); margin-bottom: .5rem; }
.selection-controls fieldset.choices { margin: 0; }
.selection-controls legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.selection-controls .choice-row { background: var(--panel); border-radius: 12px; padding: .25rem; gap: .25rem; }
.selection-controls .choice span { border: 0; background: transparent; min-height: 2.375rem; padding: .375rem .75rem; box-shadow: none; font-size: .9375rem; }
.selection-controls .choice input:checked + span { border: 0; padding: .375rem .75rem; background: var(--paper); box-shadow: var(--shadow); }
.selection-source { font-size: .8125rem; color: var(--ink2); margin: 1rem 0 0; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem .875rem; }
.kpi p { margin: 0; }
.kpi-label { font-size: .8125rem; color: var(--ink2); }
.kpi-value { white-space: nowrap; font-size: clamp(1.125rem, .9rem + .8vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kpi-value small { font-size: .8125rem; font-weight: 500; color: var(--ink2); letter-spacing: 0; }
.kpi-sub { font-size: .8125rem; color: var(--ink2); line-height: 1.35; }
.kpi-gap { background: var(--paper); border-color: var(--ok); }
@media (max-width: 40rem) { .kpis { grid-template-columns: 1fr 1fr; } }

.cards { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .625rem; counter-reset: none; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.125rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1.5rem; align-items: center; transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--ink2); box-shadow: var(--shadow); }
.card-decision { display: grid; grid-template-columns: 1fr auto; column-gap: 1.25rem; align-items: start; }
.card-decision > * { grid-column: 1; }
.card-decision > .card-price { grid-column: 2; grid-row: 2 / span 2; text-align: right; margin: 0; align-self: center; }
.card-decision > .card-year { grid-column: 2; grid-row: 4 / span 2; text-align: right; align-self: start; }
/* accent-strong rather than accent on the wash: accent on accent-wash is 4.3:1, below AA for text this small (test_build.py) */
.pill { justify-self: start; display: inline-block; background: var(--accent-wash); color: var(--accent-strong); font-size: .75rem; font-weight: 600; padding: .0625rem .5rem; border-radius: 999px; margin: 0 0 .375rem; }
.card-name { margin: 0 0 .125rem; font-size: 1.0625rem; display: flex; align-items: center; gap: .5rem; }
.card-pos { color: var(--ink2); font-weight: 500; font-variant-numeric: tabular-nums; min-width: 1.25rem; }
.mono { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); font-size: .875rem; font-weight: 700; color: var(--ink); }
.card-logo { display: inline-flex; align-items: center; justify-content: center; height: 2rem; min-width: 2rem; max-width: 6.5rem; padding: .25rem .5rem; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); }
.card-logo img { display: block; height: 1.25rem; width: auto; max-width: 5.5rem; object-fit: contain; }
.card-logo.on-dark { background: var(--ink); border-color: var(--ink); }
.card-offer, .card-binding, .card-checked { margin: 0 0 .125rem; font-size: .9375rem; }
.card-price { font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--ink2); }
.card-price strong { display: block; font-size: 1.375rem; color: var(--ink); letter-spacing: -0.02em; }
.card-year { font-size: .875rem; margin: 0; font-variant-numeric: tabular-nums; }
.card-price-def { font-size: .8125rem; color: var(--ink2); margin: 0 0 .25rem; }
.card-campaign { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .375rem .625rem; margin: .375rem 0; font-size: .9375rem; }
.card-checked { color: var(--ink2); font-size: .8125rem; }
.card-terms { margin: .25rem 0 .5rem; padding-left: 1.25rem; }
.cta { grid-column: 2; grid-row: 1; align-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .625rem 1rem; background: var(--accent); color: #FFFFFF;
  font-weight: 600; font-size: .9375rem; text-decoration: none; border-radius: 10px; white-space: nowrap; }
.cta:hover { background: var(--accent-strong); }
.card-ext { grid-column: 1 / -1; font-size: .8125rem; color: var(--ink2); margin: .25rem 0 0; }
@media (max-width: 44rem) {
  .card { grid-template-columns: 1fr; }
  .cta { grid-column: 1; grid-row: auto; width: 100%; margin-top: .5rem; }
}
@media (max-width: 30rem) {
  .card-decision { grid-template-columns: 1fr; }
  .card-decision > .card-price, .card-decision > .card-year { grid-column: 1; grid-row: auto; text-align: left; }
}

/* no global scroll-behavior: smooth. With the sticky header's scroll-padding it kept the page moving under programmatic scrolls (focus,
   test clicks); motion.js glides only for in-page anchor links instead. */
@media print { .preview-bar, .site-header nav, .pc-help, .selection, .sky-art { display: none; } }

/* ---------- motion (motion.js adds html.motion; nothing here runs under prefers-reduced-motion) ---------- */
:root { interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vt-in .42s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

  .btn, .cta { position: relative; overflow: hidden; }
  .btn-dark::after, .cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
    transform: translateX(-120%); transition: transform .7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
  .btn-dark:hover::after, .cta:hover::after { transform: translateX(120%); }
  .btn:hover, .cta:hover { transform: translateY(-1px); }
  .card { transition: border-color .2s, box-shadow .25s, transform .25s cubic-bezier(.2, .8, .2, 1); }
  .card:hover { transform: translateY(-2px); }
  .feature, .plan { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
  .feature:hover, .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .choice span { transition: border-color .15s, background-color .2s; }
  /* no transform on :active: a transformed span paints above its (positioned) radio and swallows the click it started */
  .faq-item::details-content { height: 0; overflow: clip; transition: height .35s cubic-bezier(.2, .8, .2, 1), content-visibility .35s allow-discrete; }
  .faq-item[open]::details-content { height: auto; }
  .faq-item summary::after { transition: transform .3s; }
  .faq-item[open] summary::after { transform: rotate(180deg); }
  @supports (animation-timeline: scroll()) {
    .hero .sky-art { animation: sky-parallax linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    @keyframes sky-parallax { to { transform: translateY(90px) scale(1.04); } }
  }
}
.site-header.scrolled { background: rgba(252, 251, 249, .94); box-shadow: 0 6px 24px -18px rgba(42, 32, 25, .5); }
.motion .feature-visual, .motion .window { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); position: relative; }
.motion .feature-visual::after, .motion .window::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), transparent 60%); }
.motion .feature-visual:hover::after, .motion .window:hover::after { opacity: 1; }
.choice-row.has-thumb { position: relative; }
.seg-thumb { position: absolute; top: .25rem; bottom: .25rem; left: 0; border-radius: 9px; background: var(--paper); box-shadow: var(--shadow); z-index: 0; }
.has-thumb .choice { z-index: 1; }
.has-thumb .choice input:checked + span { background: transparent; box-shadow: none; }
.kpi { background: var(--paper) linear-gradient(100deg, transparent 0, rgba(252, 227, 207, .7) 50%, transparent 100%) no-repeat; background-size: 45% 100%; background-position: -120% 0; }
.chart .bar { transform-box: fill-box; transform-origin: 50% 100%; }

/* ---------- colour and life (15 Sep, after the template's tinted cards and bands) ---------- */
:root { --tint-sky: #E4EFF8; --tint-mint: #E2F2EA; --tint-peach: #FCE8DA; }

/* the landing-page postcode field: one white pill, the button inside it */
.hero-form { max-width: 34rem; margin: 1.75rem auto 0; }
.hero-field { display: flex; align-items: center; gap: .5rem; background: var(--paper); border: 1px solid rgba(232, 227, 220, .9); border-radius: 16px; padding: .375rem .375rem .375rem 1rem;
  box-shadow: 0 20px 50px -24px rgba(42, 32, 25, .45), 0 2px 6px rgba(42, 32, 25, .06); }
.hero-field:focus-within { border-color: var(--ink); }
.hero-field input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.125rem; color: var(--ink); padding: .625rem 0; outline: none; }
.hero-field input::placeholder { color: var(--ink2); opacity: .8; }
.hero-field .btn { min-height: 3rem; padding-inline: 1.25rem; border-radius: 12px; font-size: 1rem; white-space: nowrap; }
.field-ill { width: 2.25rem; height: 2.25rem; object-fit: contain; flex: none; margin-left: -.375rem; }
.hero-msg { margin: .75rem 0 0; font-weight: 500; }
.hero-msg:empty { display: none; }
.hero-choice { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .5rem; }
.hero-alt { margin: .75rem 0 0; font-size: .875rem; color: var(--ink); }
.hero-page { padding-block: 3rem 4rem; }
.hero-page h1 { max-width: 22ch; }
main > .hero-page:first-child h1 { margin-top: .5rem; }
@media (max-width: 30rem) { .hero-field { flex-wrap: wrap; padding: .5rem; } .hero-field input { padding-inline: .5rem; } .hero-field .btn { width: 100%; } .field-ill { display: none; } }

/* the tool: postcode first, the areas as the alternative */
.pc-form label { font-weight: 600; }
.pc-row input { font-size: 1.0625rem; }
.pc-row .btn { min-height: 2.75rem; }
.or { display: flex; align-items: center; gap: .75rem; color: var(--ink2); font-size: .8125rem; margin: 1rem 0 .5rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#val-omrade fieldset.choices legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.choice-ill { width: 1.75rem; height: 1.75rem; object-fit: contain; margin-bottom: .125rem; }

/* tinted feature cards, one colour each, like the template */
.feature:nth-child(1) .feature-visual { background: linear-gradient(160deg, var(--tint-sky), var(--paper)); }
.feature:nth-child(2) .feature-visual { background: linear-gradient(160deg, var(--tint-mint), var(--paper)); }
.feature:nth-child(3) .feature-visual { background: linear-gradient(160deg, var(--tint-peach), var(--paper)); }

/* the history section sits in a sky band */
.split { position: relative; margin-inline: calc(50% - 50vw); padding-inline: max(1.25rem, calc(50vw - var(--wrap) / 2 + 1.25rem)); padding-block: 4.5rem;
  background: linear-gradient(180deg, var(--ground) 0%, var(--tint-sky) 30%, var(--tint-sky) 70%, var(--ground) 100%); }
.eyebrow-ill, .head-ill { display: block; width: 3.5rem; height: 3.5rem; object-fit: contain; margin-bottom: .5rem; }
.band-head .head-ill { margin-inline: auto; }

/* plans: a coloured cap and illustration per contract form */
.plan { position: relative; overflow: hidden; }
.plan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6rem; z-index: 0; }
.plan-m::before { background: linear-gradient(180deg, var(--tint-sky), rgba(255, 255, 255, 0)); }
.plan-f1::before { background: linear-gradient(180deg, var(--tint-mint), rgba(255, 255, 255, 0)); }
.plan-f3::before { background: linear-gradient(180deg, var(--tint-peach), rgba(255, 255, 255, 0)); }
.plan > * { position: relative; z-index: 1; }
.plan-ill { width: 4.5rem; height: 4.5rem; object-fit: contain; margin-bottom: .5rem; }
.plan-m .plan-points li::before { background: #3E7CB1; } .plan-f3 .plan-points li::before { background: var(--warn); }

/* key figures: the yearly gap in mint, the count in sky */
.kpi-gap { background-color: var(--tint-mint); border-color: rgba(31, 111, 92, .35); }
.kpis .kpi:nth-child(4) { background-color: var(--tint-sky); border-color: #C9DCEB; }

/* FAQ help card and the band behind the features */
.help-card { background: linear-gradient(160deg, var(--tint-sky), var(--paper) 70%); }
.help-ill { width: 3.5rem; height: 3.5rem; object-fit: contain; display: block; margin-bottom: .5rem; }
.band:not(.band-soft) { position: relative; }