/* Emberloom AI, sajtstilar.
 *
 * Sidlayouten är designsystemets ui_kits/website/site.css, oförändrad.
 * Komponentstilarna nedan är designsystemets JSX-komponenter översatta till
 * klasser. Komponenterna bär sina värden i inline style-objekt, för de renderas
 * av React i Claude Design. Sajten är statisk, så samma värden bor i CSS här.
 *
 * Källa: Claude Design, projekt 06a7249b-2f21-470f-b380-60eddc4abc57.
 * Inga värden hittas på. Saknas en token, lägg till den i tokens.css. Se CLAUDE.md.
 */

/* ── Bas ─────────────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  transition: var(--transition-theme);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.lead {
  font-size: var(--size-lead);
  color: var(--ink-soft);
  max-width: 52ch;
}

/* ── Sidhuvud ────────────────────────────────────────────────────────────── */

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: var(--transition-theme);
}

.bar {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

nav.main {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: var(--size-body-sm);
  color: var(--ink-soft);
}

nav.main a:hover {
  color: var(--ink);
}

/* ── Sektioner ───────────────────────────────────────────────────────────── */

section {
  padding: var(--section-y) 0;
}

section + section {
  border-top: 1px solid var(--rule);
}

.hero {
  padding: 96px 0 88px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap-wide);
  align-items: start;
}

.actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-top: 1px solid var(--rule);
  padding-top: 26px;
}

.shot {
  width: 100%;
  display: block;
  border-radius: var(--radius-image);
  object-fit: cover;
  border: 1px solid var(--rule);
}

.shot.tall {
  aspect-ratio: 4 / 3.4;
}

.shot.wide {
  aspect-ratio: 16 / 9;
}

.shot.thumb {
  aspect-ratio: 16 / 9;
}

.sec-head {
  max-width: 22ch;
  margin-bottom: 52px;
}

.sec-head.w {
  max-width: 30ch;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
}

.split {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: var(--grid-gap-wide);
  align-items: start;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.story p {
  color: var(--ink-soft);
  margin-bottom: 16px;
  font-size: var(--size-prose);
}

.story p:last-child {
  margin: 0;
  color: var(--ink);
}

.final {
  text-align: center;
  padding: 96px 0;
}

.final p {
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto 10px;
}

.final .actions {
  justify-content: center;
  margin: 36px 0 0;
}

.dark-seg {
  background: var(--paper);
  color: var(--ink);
  border-top: 0;
  padding: var(--section-y-dark) 0;
}

.dark-seg + section {
  border-top: 0;
}

footer.site {
  border-top: 1px solid var(--rule);
  padding: 44px 0 56px;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}

/* ── Komponent: Logo ─────────────────────────────────────────────────────── */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.logo svg {
  display: block;
}

/* Färgen sätts via klass, inte via fill="var(--mark-ink)". var() i ett
   presentationsattribut är inte pålitligt över webbläsare, och märket ska följa
   temat när sidhuvudet inverteras. */
.logo svg rect {
  fill: var(--mark-ink);
}

.logo svg rect.ember {
  fill: var(--mark-ember);
}

.logo-word {
  font-family: var(--font-sans);
  font-size: var(--size-wordmark);
  font-weight: 600;
  letter-spacing: var(--track-wordmark);
  color: var(--ink);
  line-height: 1;
}

.logo-word span {
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 0.3em;
}

/* ── Komponent: Eyebrow ──────────────────────────────────────────────────── */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: var(--lh-label);
}

/* Strecket är dekor. Som genererat innehåll når det aldrig uppläsaren, till
   skillnad från den aria-hidden-span komponenten behöver i JSX. */
.eyebrow::before {
  content: "";
  width: var(--rule-eyebrow-width);
  height: 1px;
  background: var(--ember);
  flex-shrink: 0;
}

/* ── Komponent: Heading ──────────────────────────────────────────────────── */

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
}

h1,
h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-heading);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
}

h1 {
  font-size: var(--size-h1);
}

h2 {
  font-size: var(--size-h2);
}

h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--size-h3);
  letter-spacing: var(--track-h3);
  line-height: var(--lh-h3);
}

h1 em,
h2 em,
h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--track-serif);
}

/* ── Komponent: Caption ──────────────────────────────────────────────────── */

.caption {
  margin: 14px 0 0;
  font-size: var(--size-caption);
  color: var(--ink-soft);
  line-height: var(--lh-caption);
}

.caption-voice {
  font-family: var(--font-serif);
  font-style: italic;
}

.caption-meta {
  font-family: var(--font-mono);
  font-size: var(--size-caption-meta);
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Komponent: Button ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  padding: 13px 22px;
  font-family: var(--font-sans);
  font-size: var(--size-button);
  font-weight: 500;
  line-height: var(--lh-button);
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-hover);
}

.btn:hover {
  background: var(--pill-hover);
}

.btn.sm {
  padding: 10px 18px;
  font-size: var(--size-button-sm);
}

/* ── Komponent: TextLink ─────────────────────────────────────────────────── */

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--size-link);
  letter-spacing: var(--track-link);
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 5px;
  text-decoration: none;
  transition: var(--transition-hover);
}

.textlink:hover {
  color: var(--ember-deep);
  border-bottom-color: var(--ember-deep);
}

/* ── Komponent: Card ─────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
}

.card-media {
  margin-bottom: 22px;
}

.card-num {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-number);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

.card h3 {
  margin: 0 0 16px;
}

.card p {
  margin: 0;
  font-size: var(--size-body-sm);
  color: var(--ink-soft);
  line-height: var(--lh-card);
}

.card-foot {
  margin-top: auto;
  padding-top: var(--card-padding);
}

.card-note {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Komponent: Metric ───────────────────────────────────────────────────── */

.metric-value {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-serif);
  font-size: var(--size-metric);
  line-height: var(--lh-metric);
  color: var(--ink);
}

.metric-value::before {
  content: "";
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--ember);
  flex-shrink: 0;
  transform: translateY(-5px);
}

.metric-label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--size-metric-label);
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Komponent: ProcessStep ──────────────────────────────────────────────── */

.step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-number);
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.step h3 {
  margin: 0 0 10px;
  font-size: var(--size-step-title);
}

.step p {
  margin: 0 0 14px;
  font-size: var(--size-step-body);
  color: var(--ink-soft);
  line-height: var(--lh-card);
}

.step-dur {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Komponent: DashList ─────────────────────────────────────────────────── */

.dashlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashlist li {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
  color: var(--ink-soft);
  font-size: var(--size-prose);
  line-height: var(--lh-card);
}

.dashlist li::before {
  content: "–";
  color: var(--ember);
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Sidspecifika marginaler ─────────────────────────────────────────────────
   Motsvarar style-propparna på Heading och lead i Site.jsx. Alla värden finns
   som avståndstoken. */

.hero h1 {
  margin-bottom: var(--space-5);
}

.hero .lead {
  margin-bottom: var(--space-6);
}

.split h2 {
  margin-bottom: var(--space-6);
}

.split .lead {
  margin-top: var(--space-2);
}

.story h2 {
  margin-bottom: var(--space-5);
}

.final h2 {
  margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * EXTRAPOLATIONER
 *
 * Allt nedanför den här linjen saknas i Emberloom-designsystemet. Website-kittet
 * i Claude Design beskriver startsidan och ingenting annat: hjälte, kort,
 * processteg, avslut. Undersidorna behöver mönster som aldrig ritats.
 *
 * Reglerna är byggda av befintliga tokens och komponenter, aldrig av nya värden.
 * Varje block säger vad det härmar. De ska ritas i Claude Design och hämtas ner,
 * då kan avsnittet raderas. Listan finns också i design/README.md.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Extrapolation: sidnavigation ────────────────────────────────────────────
   Designsystemets nav är ankarlänkar på en ensam sida. Sajten har undersidor,
   så den aktiva sidan behöver markeras. Glödstrecket är samma som i Eyebrow. */

nav.main a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 1px solid var(--ember);
  padding-bottom: 3px;
}

/* ── Extrapolation: sidhuvud för undersidor ──────────────────────────────────
   Startsidans hjälte är tvåspaltig med bild. Undersidorna har ingen bild och
   ingen nyckeltalsrad, bara ögonbryn, rubrik och ingress. Måtten är hjältens. */

.subhero {
  padding: 96px 0 var(--section-y);
}

.subhero h1 {
  margin-bottom: var(--space-5);
  max-width: 20ch;
}

.subhero .lead {
  margin-bottom: 0;
}

.subhero .actions {
  margin: var(--space-6) 0 0;
}

/* ── Extrapolation: brödtext ─────────────────────────────────────────────────
   Designsystemet har rubriker och kortbrödtext men ingen löpande text. Måtten
   följer .lead och .story, som är de närmaste släktingarna. */

.prose {
  max-width: 68ch;
}

.prose h2 {
  margin: var(--space-8) 0 var(--space-5);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: var(--space-6) 0 var(--space-3);
}

.prose p {
  color: var(--ink-soft);
  font-size: var(--size-prose);
  margin-bottom: var(--space-4);
}

.prose p:last-child {
  margin-bottom: 0;
}

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

.prose ul {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.prose li {
  display: flex;
  gap: 16px;
  margin-bottom: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--size-prose);
  line-height: var(--lh-card);
}

.prose li::before {
  content: "–";
  color: var(--ember);
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Extrapolation: frågor och svar ──────────────────────────────────────────
   FAQ-sidan är en lista med rubrik och svar. Linjen mellan posterna är samma
   hårstrecksregel som skiljer sektioner åt. Ingen dragspelsmekanik: svaren är
   korta, och en stängd fråga är en fråga ingen läser. */

.faq-list {
  max-width: 68ch;
  border-top: 1px solid var(--rule);
}

.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: var(--space-5) 0;
}

.faq-item h3 {
  margin-bottom: var(--space-3);
}

.faq-item p {
  color: var(--ink-soft);
  font-size: var(--size-prose);
  margin-bottom: var(--space-3);
}

.faq-item p:last-child {
  margin-bottom: 0;
}

/* ── Extrapolation: transkriptets repliker ───────────────────────────────────
   Talbubblor växlar mellan två talare, en komponent designsystemet saknar
   helt. Ytan härmar `.card`: hårstrecket `--rule` som ram, `--radius-card`
   för hörnen, `--card-padding` som luft. Talare A står på `--surface`,
   talare B på `--paper` och dras in, så de två går att skilja åt vid en
   blick utan att någon yta fylls med `--ember`. Etiketten härmar
   `.field label`: `--font-mono`, `--size-label`, versaler, `--ink-faint`.
   Glödstrecket under B:s etikett är samma teknik som `nav.main
   a[aria-current]`: en accent på en enda talare, aldrig en fylld yta, som
   bär växlingen mellan de två. */

.turn {
  max-width: 68ch;
  margin-bottom: var(--space-4);
  padding: var(--card-padding);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
}

.turn.a {
  background: var(--surface);
}

.turn.b {
  margin-left: var(--space-6);
  background: var(--paper);
}

.turn-speaker {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.turn.b .turn-speaker {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ember);
}

.turn-body {
  margin: 0;
  font-size: var(--size-prose);
  color: var(--ink-soft);
  line-height: var(--lh-card);
}

/* ── Extrapolation: transkriptets innehållsförteckning ───────────────────────
   Länklistan överst på varje transkript. Raderna härmar hårstrecksregeln ur
   `.faq-list`/`.faq-item`. Länken själv är brödtext i vila, inte versal
   spärrad mono som `.textlink`: tolv rader i den stilen läser som en
   varningsskylt, inte ett register. */

.transcript-toc {
  max-width: 68ch;
  margin: 0 0 var(--space-7);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.transcript-toc li {
  border-bottom: 1px solid var(--rule);
}

.transcript-toc a {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--size-body-sm);
  color: var(--ink-soft);
  text-decoration: none;
  transition: var(--transition-hover);
}

.transcript-toc a:hover {
  color: var(--ember-deep);
}

/* ── Extrapolation: nyckeltalsrader på case ──────────────────────────────────
   Case-sidorna redovisar utfall. Metric finns i designsystemet men bara som
   trespalt i hjälten. Här är samma komponent i en egen ram. */

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-top: 1px solid var(--rule);
  padding-top: 26px;
  margin-top: var(--space-6);
}

/* ── Extrapolation: fyrkolumnsfooter ─────────────────────────────────────────
   Designsystemets footer är en rad med två spann. Sajten har sju
   destinationer som måste gå att nå från botten av varje sida.

   Notera att mono och versaler flyttas hit från footer.site. Blankt över hela
   footern skulle sätta länkarna i 11,5 px versal monospace, vilket är läsbart
   för en copyrightrad och inte för en meny. */

footer.site {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-sans);
  font-size: var(--size-body-sm);
  color: var(--ink-soft);
}

.footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--grid-gap-wide);
  margin-bottom: var(--space-7);
}

.footer-lede {
  font-size: var(--size-lead);
  color: var(--ink);
  max-width: 24ch;
  margin-bottom: var(--space-5);
  line-height: var(--lh-card);
}

.footer-lede em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--track-serif);
}

.footer-cols h2 {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-4);
}

.footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-cols li {
  margin-bottom: var(--space-2);
}

.footer-cols a:hover {
  color: var(--ember-deep);
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Extrapolation: formulär ──────────────────────────────────────────────
   Kontaktformuläret har inga fält i designsystemet. Etiketten lånar Eyebrows
   typsnitt utan glödstrecket. Fälten själva lånar kortets yta och hårstreck:
   `--surface` mot `--paper`, `--rule`, `--radius-card`. Fokus ärver sidans
   globala :focus-visible, ingen egen ram behövs. Statusrutan är samma yta,
   färgad bara av innehållet, för glöden --ember är en accent, aldrig en yta. */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-field label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.form-field input,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
}

.form-field textarea {
  min-height: 180px;
  line-height: var(--lh-body);
  resize: vertical;
}

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.form-status {
  display: none;
  margin-top: var(--space-5);
  padding: var(--card-padding);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.form-status p {
  color: var(--ink-soft);
  font-size: var(--size-body-sm);
}

/* ── Extrapolation: workshop-enkäten ──────────────────────────────────────
   Andra formuläret på sajten, byggt av samma tokens som kontaktformulärets
   `.form-row`/`.form-field` ovan men egna klasser, för de två sidorna delar
   inget markup. Fälten härmar `.card`: `--surface` mot `--paper`, hårstrecket
   `--rule` som ram, `--radius-card` för hörnen. Etiketten härmar
   `.turn-speaker`: `--font-mono`, versaler, `--size-label`, `--ink-faint`.
   Fokusringen kommer från den globala `:focus-visible`-regeln, ingen egen
   behövs. Ingen smalt-fönster-brytpunkt är tillagd här, för att inte röra
   den delade mediefrågan i den här sammanslagningen; `.field-row` förblir
   två spalter på mobil. */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 68ch;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label-tight);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field .hint {
  color: var(--ink-soft);
  font-size: var(--size-body-sm);
  line-height: var(--lh-body);
}

.field input,
.field textarea {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--space-3);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--space-3);
}

.field-check label {
  font-family: var(--font-sans);
  font-size: var(--size-body-sm);
  color: var(--ink);
}

.form-success {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}

.form-success p {
  color: var(--ink-soft);
}

.form-error {
  color: var(--ember-deep);
  font-size: var(--size-body-sm);
}

/* ── Smalt fönster ───────────────────────────────────────────────────────── */

@media (max-width: 920px) {
  .hero-grid,
  .split {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .cards,
  .steps {
    grid-template-columns: 1fr;
  }

  .metrics {
    grid-template-columns: 1fr 1fr;
  }

  nav.main {
    display: none;
  }

  section {
    padding: 70px 0;
  }

  /* Extrapolationerna följer samma brytpunkt som resten. */
  .subhero {
    padding: 70px 0;
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .result-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}