/* ==========================================================================
   Branch Assembly — style.css
   Tokens from the Branch Assembly design system (dark theme as the site theme).
   Every size is rem from the 1.25 scale; every gap from the 8px scale.
   ========================================================================== */

/* ---------- Fonts: self-hosted, latin subset ---------- */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: dark;

  /* Colour (design system, dark theme) */
  --bg: #111714;
  --surface: #1a231e;
  --accent: #5ba377;
  --accent-hover: #6bb287;
  --accent-on: #111714;
  --ink: #ecede6;
  --ink-muted: #a3aba4;
  --line: #2a352e;
  /* Annotation layer: decorative, never carries text that must be read */
  --grid-line: #1c2621;
  --annot-line: #59605b;
  /* Errors only, never decoration. 7.6:1 on dark surface. */
  --error: #e5a29a;

  /* Type */
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.8125rem;   /* 13 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.25rem;     /* 20 */
  --text-xl: 1.5625rem;   /* 25 */
  --text-2xl: 1.9375rem;  /* 31 */
  --text-3xl: 2.4375rem;  /* 39 */
  --text-display: 5.875rem; /* 94, the scale continued by its ratio */

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* Layout */
  /* Side margins: 24px on a phone, ~155px at 1440, ~300px at 2560 */
  --gutter: clamp(1.5rem, 14vw - 3rem, 18rem);
  --control-h: 3rem;
  /* Height of the wave that peeks up at the bottom of the first screen */
  --wave-h: clamp(6rem, 8.5vw, 11rem);
}

/* ---------- Base ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Fluid root: 16px at 1440, 20px at 2560 (03-build-gotchas) */
html {
  font-size: clamp(1rem, 0.6786rem + 0.3571vw, 1.25rem);
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, p, ul, ol, figure, fieldset { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
em { font-style: italic; }
button, input, textarea { font: inherit; color: inherit; }

a { color: var(--accent); text-underline-offset: 0.3em; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -10rem;
  z-index: 10;
  padding: var(--space-1) var(--space-2);
  background: var(--accent);
  color: var(--accent-on);
  border-radius: var(--radius-md);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

/* ---------- Hero shell ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.grid-overlay__cols {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-right: 1px solid var(--grid-line);
}
.grid-overlay__cols span { border-left: 1px solid var(--grid-line); }

/* ---------- Header ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-weight: 500;
}
.site-nav a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--ink-muted);
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Tjänster & Priser: the link goes to the price list, the arrow opens the sub-pages.
   Opens on hover where there is a real pointer, and on click/tap of the arrow (main.js). */
.site-header { position: relative; z-index: 5; }
.nav-drop {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-drop__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}
.nav-drop__toggle:hover { color: var(--ink); }
.nav-drop__toggle svg { transition: transform 0.2s ease; }
.nav-drop.is-open .nav-drop__toggle svg { transform: rotate(180deg); }
.nav-drop__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 6;
  display: none;
  min-width: 15rem;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 1rem 2rem -1rem rgb(0 0 0 / 0.6);
}
.nav-drop.is-open .nav-drop__menu { display: block; }
@media (hover: hover) {
  .nav-drop:hover .nav-drop__menu { display: block; }
  .nav-drop:hover .nav-drop__toggle svg { transform: rotate(180deg); }
}
.site-nav .nav-drop__menu a {
  display: block;
  padding: var(--space-1) 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
}
.site-nav .nav-drop__menu a:hover { background: rgb(236 237 230 / 0.06); text-decoration: none; }

/* ---------- Spec bar ---------- */

.spec-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-1) var(--gutter);
  font-size: var(--text-xs);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.spec-cols-mobile { display: none; }

/* ---------- Main: copy + form ---------- */

.hero__main {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) clamp(2rem, 4vw, 4rem);
  /* Bottom padding keeps the peeking wave clear of the content */
  padding: var(--space-3) var(--gutter) calc(var(--wave-h) * 0.75);
}

.hero__copy {
  position: relative;
  flex: 999 1 32rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  /* 39px on a phone → 60px at 1440 → 75px max (design system "display") */
  font-size: clamp(var(--text-3xl), 1rem + 3.05vw, 4.6875rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* One statement per line on wide screens; on a phone each may wrap */
.hero__title .line { display: block; }

.hero__lead {
  max-width: 32rem;
  font-size: var(--text-lg);
  line-height: 1.6;
  text-wrap: pretty;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-4);
  color: var(--ink-muted);
}
.hero__facts li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.fact-glyph {
  font-family: var(--font-mono);
  color: var(--annot-line);
}

/* ---------- Annotation layer ---------- */

.annotation {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.corner-mark {
  position: absolute;
  top: calc(var(--space-3) * -1);
  left: calc(var(--space-3) * -1);
  width: var(--space-2);
  height: var(--space-2);
  border-top: 1px solid var(--annot-line);
  border-left: 1px solid var(--annot-line);
}

.annotation--rule {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}
.annotation--rule::before {
  content: "";
  width: var(--space-4);
  height: 1px;
  background: var(--annot-line);
}

/* The bracket is exactly the gap it labels: 1.5rem between h1 and lead */
.annotation--gap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--space-3);
  line-height: 1;
}
.gap-bracket {
  align-self: stretch;
  width: var(--space-1);
  border: 1px solid var(--annot-line);
  border-right: 0;
}

.annotation--measure {
  max-width: 32rem;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 0.75rem;
  margin-top: var(--space-1);
  border-inline: 1px solid var(--annot-line);
  line-height: 1;
  white-space: nowrap;
}
.measure-line {
  flex: 1;
  height: 1px;
  background: var(--annot-line);
}

.annotation--code {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
}

/* ---------- Enquiry form ---------- */

.enquiry {
  /* ~430px at 1440, 30rem at most: leaves the headline room for three lines */
  flex: 0 1 clamp(24rem, 30vw, 30rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.enquiry__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.enquiry__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}


.enquiry__intro {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.enquiry__intro h2,
.enquiry__done h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: var(--text-xl);
  line-height: 1.2;
}
.enquiry__intro p,
.enquiry__done p { color: var(--ink-muted); }

.topics legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.legend-optional {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.topics__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
}

/* Chips are real checkboxes: they work without JS and post as a list */
.chip { position: relative; cursor: pointer; }
.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: flex;
  align-items: center;
  min-height: 2.75rem; /* 44px touch target */
  padding: 0 var(--space-2);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-md);
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.chip input:checked + span::before {
  content: "";
  width: 0.625rem;
  height: 0.3125rem;
  margin-right: var(--space-1);
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.125rem) rotate(-45deg);
}
.chip:hover input:checked + span { background: var(--accent-hover); border-color: var(--accent-hover); }
.chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start; /* 03: grid rows stretch their neighbours */
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.field label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-weight: 500;
}
.field__optional { font-weight: 400; color: var(--ink-muted); }

.field input,
.field textarea {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-2);
  background: var(--bg);
  color: var(--ink);
  /* Form-field borders need 3:1: ink-muted, not line (design system README) */
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}
.field textarea {
  height: auto;
  min-height: 4.5rem;
  padding: var(--space-1) var(--space-2);
  line-height: 1.5;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-muted); opacity: 0.75; }
.field input:hover,
.field textarea:hover { border-color: var(--ink); }
.field input:focus-visible,
.field textarea:focus-visible { outline-offset: 0; border-color: var(--accent); }
/* An invalid field speaks one colour only: the focus ring turns red too,
   so red border and green ring never sit on top of each other. */
.field input[aria-invalid="true"],
.field input[aria-invalid="true"]:hover,
.field input[aria-invalid="true"]:focus-visible {
  border-color: var(--error);
  outline-color: var(--error);
}

.field__error {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--error);
}

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn svg { transition: transform 0.15s ease; }
.btn:hover svg { transform: translateX(2px); }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }

.enquiry__note,
.enquiry__fail {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-muted);
}
.enquiry__fail { color: var(--error); }

.enquiry__done {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  min-height: 32rem;
}
.enquiry__done h2:focus { outline: none; }
.annotation--status { font-family: var(--font-mono); }

.text-btn {
  align-self: flex-start;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.text-btn:hover { color: var(--accent-hover); }

[hidden] { display: none !important; }

/* ---------- Curtain: hero stays, next section rises over it ---------- */

/* main.js adds .is-curtain and sets --stick-top so a hero taller than the
   screen sticks by its bottom edge. Without JS the page simply scrolls. */
.hero.is-curtain {
  position: sticky;
  top: var(--stick-top, 0px);
  z-index: 0;
}

/* ---------- Light theme: same roles, light values ---------- */

.theme-light {
  color-scheme: light;
  --bg: #f5f4ef;
  --surface: #e3e8e0;
  --accent: #2a5c3f;
  --accent-hover: #214a32;
  --accent-on: #ffffff;
  --ink: #1a211d;
  --ink-muted: #59605b;
  --line: #d5dad2;
  --grid-line: #e8e9e2;
  --annot-line: #a3aba4;
  --error: #9b2c1f;
  color: var(--ink);
}

/* ---------- Passar vi bra? ---------- */

.clients {
  position: relative;
  z-index: 1;
  /* The wave area overlaps the bottom of the hero. It is see-through,
     so clicks pass to the hero except on the wave's own link. */
  margin-top: calc(var(--wave-h) * -1);
  pointer-events: none;
}
.clients__body,
.wave__link { pointer-events: auto; }

.wave {
  position: relative;
  height: var(--wave-h);
}
.wave__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wave__front,
.wave__back {
  transform-box: view-box;
  transform-origin: 50% 100%;
}
.wave__back {
  fill: var(--surface);
  transform: scaleY(var(--amp-back, 1));
}
.wave__front {
  fill: var(--bg);
  transform: scaleY(var(--amp-front, 1));
}

/* "Passar vi bra? ↓" sits on the crest and fades as the wave takes over */
.wave__link {
  position: absolute;
  left: 50%;
  bottom: calc(var(--wave-h) * 0.06);
  translate: -50% 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* Stays fully visible while the crest rises, then fades over almost a second
     (time-based, so a fast scroll still shows it leaving) */
  transition: opacity 0.9s ease, translate 0.9s ease;
}
.wave__link.is-leaving {
  opacity: 0;
  translate: -50% -0.75rem;
}
.wave__link:hover { color: var(--accent); }
/* Two nudges, then still: under 5 s, so no pause control is needed (WCAG 2.2.2, 03) */
.wave__arrow { animation: nudge 2.4s ease-in-out 1s 2; }
@keyframes nudge {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(3px); }
}

.clients__body {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.clients__inner {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: center;
  padding: var(--space-6) var(--gutter) var(--space-7);
}
.clients__inner > * { grid-column: 1 / -1; }

.eyebrow {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.clients__title,
.section-title {
  grid-column: 1 / span 9;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  /* 31px on a phone → 48px from about 1440 */
  font-size: clamp(var(--text-2xl), 1.25rem + 1.95vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.clients__lead,
.section-lead {
  grid-column: 1 / span 7;
  max-width: 34rem;
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Two blocks, two weights. The yes-block is the dark inverse band from the
   design system and comes first; the no-block is the light surface, smaller,
   set lower, so the eye travels title → lead → yes → no. */
.fit {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  margin-top: var(--space-6);
}

.fit__block {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.fit__block--yes {
  grid-column: 1 / span 7;
  /* Inverse set from the design system: dark band, light text, Leaf links */
  --ink: #f5f4ef;
  --ink-muted: #a3aba4;
  --line: #34403a;
  --link: #9fc8a9;
  --link-hover: #c3dfc9;
  background: #1a211d;
  color: var(--ink);
}
.fit__block--no {
  grid-column: 8 / span 5;
  margin-top: var(--space-7);
  padding: var(--space-3);
  background: var(--surface);
  color: var(--ink-muted);
}

.fit__code {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink-muted);
}
.fit__code::before { content: "// "; opacity: 0.6; }

.fit__title {
  margin: 0;
  padding-bottom: var(--space-2);
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  line-height: 1.2;
}
.fit__block--yes .fit__title {
  font-size: var(--text-xl);
  border-bottom: 1px solid var(--ink-muted);
}
.fit__block--no .fit__title {
  font-size: var(--text-xl);
  color: var(--ink);
  border-bottom: 1px solid var(--ink-muted);
}

.fit__list li {
  display: grid;
  grid-template-columns: var(--space-4) minmax(0, 1fr);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
.fit__block--yes .fit__list li { line-height: 1.5; }
.fit__block--no .fit__list li { border-bottom-color: #c9d0c6; }
.fit__block--no .fit__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.fit__mark {
  font-family: var(--font-mono);
  color: var(--ink-muted);
}
.fit__block--yes .fit__mark { color: var(--link); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  margin-top: var(--space-4);
  font-weight: 500;
  color: var(--link, var(--accent));
}
.link-arrow:hover { color: var(--link-hover, var(--accent-hover)); }
.link-arrow svg { transition: transform 0.15s ease; }
.link-arrow:hover svg { transform: translateY(-2px); }
.fit__block--yes :focus-visible { outline-color: var(--link); }

/* ---------- Tjänster och priser: the price list ---------- */

.services {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
}
.services__inner {
  padding: var(--space-6) var(--gutter) var(--space-7);
}

/* Every service shows in full and the whole row is one link (to its own page, later).
   The list bleeds --svc-pad past the gutter on both sides: the text stays on the
   gutter line, and the hover fill gets room around it. */
.svc-list {
  --svc-pad: var(--space-3);
  margin: var(--space-5) calc(var(--svc-pad) * -1) 0;
  padding: 0;
  list-style: none;
}
.svc { border-top: 1px solid var(--line); }
.svc:last-child { border-bottom: 1px solid var(--line); }

/* Wide: name | what's in it | price, on the same 12 columns as the page grid */
.svc__card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  align-items: start;
  padding: var(--space-5) var(--svc-pad);
  border-radius: var(--radius-lg);
  transition: background-color 0.2s ease;
}

.svc__head { grid-column: 1 / span 3; }
.svc__body { grid-column: 4 / span 6; }
.svc__aside {
  grid-column: 10 / span 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.svc__id {
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink-muted);
}
.svc__name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.svc__lead {
  max-width: 34rem;
  font-size: var(--text-lg);
  line-height: 1.5;
  text-wrap: pretty;
}
.svc__list {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.svc__list li {
  display: grid;
  grid-template-columns: var(--space-3) minmax(0, 1fr);
  padding: 0.625rem 0;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}
.svc__list li::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--ink-muted);
}

/* Förvaltning: two tiers side by side, each with its own price */
.tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.tier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--ink-muted);
}
.tier__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tier__price {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tier .svc__list { margin-top: 0; }
.tier .svc__list li:first-child { border-top: 0; }

.svc__price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.svc__amount {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.svc__from {
  font-style: italic;
  font-size: var(--text-lg);
  letter-spacing: 0;
  color: var(--ink-muted);
}
.svc__unit,
.svc__note {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-muted);
}
.svc__note { max-width: 18rem; }

/* The link. Its ::after covers the whole card, so the row is the click target
   while screen readers hear one short link per service. */
.svc__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  margin-top: auto;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.svc__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.svc__cta svg { transition: transform 0.15s ease; }
/* Hover only where there is a real pointer, so a tap on a phone doesn't leave a row lit */
@media (hover: hover) {
  .svc__card--link:hover { background: var(--surface); }
  .svc__card:hover .svc__cta { color: var(--accent-hover); }
  .svc__card:hover .svc__cta span { text-decoration: underline; }
  .svc__card:hover .svc__cta svg { transform: translateX(3px); }
}
.svc__cta:focus-visible { outline: none; }
.svc__cta:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Rows with their own page get a real button, so it's clear they lead somewhere.
   The others stay quiet text links to the form. */
.svc__cta--page {
  padding: 0 var(--space-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
  .svc__card:hover .svc__cta--page {
    background: var(--accent);
    color: var(--accent-on);
  }
  .svc__card:hover .svc__cta--page span { text-decoration: none; }
}

.services__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-5);
  color: var(--ink-muted);
}
.services__more .link-arrow { margin-top: 0; }

/* ---------- Drift och förvaltning: status panel ---------- */

/* Light theme on the 30% surface, so it doesn't merge with the section above (03) */
.drift {
  position: relative;
  z-index: 1;
  isolation: isolate;
  --grid-line: #d9ded6;
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.drift__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-5);
  align-items: center;
  padding: var(--space-6) var(--gutter) var(--space-7);
}
.drift__text { grid-column: 1 / span 4; }
.drift__text .link-arrow { margin-top: var(--space-3); }
.status { grid-column: 6 / span 7; min-width: 0; margin: 0; }

/* The panel: the dark inverse set from the design system */
.status__panel {
  --s-line: #34403a;
  --s-ink: #ecede6;
  --s-muted: #a3aba4;
  --s-ok: #9fc8a9;
  background: #1a211d;
  color: var(--s-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 0 rgb(26 33 29 / 0.04), 0 24px 48px -24px rgb(26 33 29 / 0.35);
}
.status__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  padding: 0.75rem var(--space-3);
  border-bottom: 1px solid var(--s-line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.status__site { color: var(--s-muted); }
.status__ok { display: inline-flex; align-items: center; gap: 0.5rem; }
.status__ok i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--s-ok);
  box-shadow: 0 0 0 3px rgb(159 200 169 / 0.2);
}

.status__row-head,
.status__row-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--s-muted);
}
.status__row-head span:first-child {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status__row-foot { margin-top: 0.375rem; font-family: var(--font-mono); }

/* 90 days, one bar each, drawn as one repeating background */
.status__uptime { padding: var(--space-3); }
.status__bars {
  height: 2.25rem;
  margin-top: var(--space-1);
  background-image: linear-gradient(90deg, var(--s-ok) 0 62%, transparent 62%);
  background-size: calc(100% / 90) 100%;
  background-repeat: repeat-x;
  border-radius: 0.125rem;
}

.status__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--s-line);
}
.status__tiles div {
  padding: var(--space-2) var(--space-3);
  border-left: 1px solid var(--s-line);
}
.status__tiles div:first-child { border-left: 0; }
.status__tiles dt {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--s-muted);
}
.status__tiles dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.status__log { padding: var(--space-3); }
.status__log ol { margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.status__log li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: 0.625rem;
  border-top: 1px solid var(--s-line);
  line-height: 1.5;
}
.status__log li:first-child { border-top: 0; }
.status__log time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.9;
  color: var(--s-muted);
}
.status .anatomy__cap { text-align: left; }

@media (max-width: 64rem) {
  .drift__text,
  .status { grid-column: 1 / -1; }
  /* 03: twelve columns with fixed gaps overflow a phone */
  .drift__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .status { max-width: 44rem; }
}
@media (max-width: 48rem) {
  .drift__inner { padding-block: var(--space-5) var(--space-6); }
  .status__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status__tiles div:nth-child(3) { border-left: 0; }
  .status__tiles div:nth-child(n + 3) { border-top: 1px solid var(--s-line); }
  .status__uptime,
  .status__log { padding: var(--space-2); }
  .status__tiles div { padding: var(--space-2); }
  /* 45 bars on a phone, so each stays visible */
  .status__bars { background-size: calc(100% / 45) 100%; }
}

/* ---------- Phone ---------- */

@media (max-width: 48rem) {
  /* 03: a 12-column grid with gutters overflows a phone. Show 4. */
  .grid-overlay__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-overlay__cols span:nth-child(n + 5) { display: none; }
  .spec-cols-desktop { display: none; }
  .spec-cols-mobile { display: inline; }

  .site-header { padding-block: var(--space-2); }
  .site-nav { gap: 0 var(--space-3); }
  .corner-mark { display: none; }
  .hero__main { padding-top: var(--space-5); }
  .enquiry { flex-basis: 100%; }
  .enquiry__panel { padding: var(--space-3); }

  .clients__title,
  .fit__block--yes,
  .fit__block--no { grid-column: 1 / -1; }
  .fit__block--no { margin-top: 0; }
  /* 03: twelve columns with fixed gaps overflow a phone */
  .fit { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .fit__block { padding: var(--space-3); }

  .services__inner { padding-block: var(--space-5) var(--space-6); }
  /* 03: twelve columns with fixed gaps overflow a phone. One column, stacked. */
  .svc__card { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding-block: var(--space-4); }
  .svc__head, .svc__body, .svc__aside { grid-column: 1 / -1; }
  /* The price straight under the name, so it isn't a long scroll away; note and link last */
  .svc__aside { display: contents; }
  .svc__head { order: 1; }
  .svc__card .svc__price { order: 2; }
  .svc__body { order: 3; }
  .svc__note { order: 4; }
  .svc__cta { order: 5; justify-self: start; margin-top: calc(var(--space-2) * -1); }
  .svc__name { font-size: var(--text-2xl); }
  .svc__amount { font-size: var(--text-2xl); }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .fit__block--yes .fit__list li { font-size: var(--text-base); }
  .clients__inner { padding-block: var(--space-5) var(--space-6); }
  .fit { margin-top: var(--space-5); }
}

/* Two columns: the crest rises in the gap between them, so less room is needed */
@media (min-width: 64.01rem) {
  .hero__main { padding-bottom: calc(var(--wave-h) * 0.5); }
}

@media (min-width: 48.01rem) and (max-width: 64rem) {
  /* Services: name and details on the left, price and link on the right */
  .svc__head { grid-column: 1 / span 7; grid-row: 1; }
  .svc__body { grid-column: 1 / span 7; grid-row: 2; }
  .svc__aside { grid-column: 8 / span 5; grid-row: 1 / span 2; }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .fit__block--yes { grid-column: 1 / span 12; }
  .fit__block--no { grid-column: 3 / span 10; margin-top: 0; }
}

@media (max-width: 30rem) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .topics__list { display: flex; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  /* The wave keeps its shape but does not move */
  .wave__front, .wave__back { transform: none !important; }
  .wave__arrow { animation: none; }
}

/* ==========================================================================
   Service pages (/webbplats/ …): same shell, same tokens
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.btn--inline { width: auto; text-decoration: none; }
a.btn:hover { color: var(--accent-on); }

/* ---------- Page hero (dark) ---------- */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) var(--gutter) var(--space-7);
}
.page-intro__copy { grid-column: 1 / span 5; min-width: 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.page-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  /* 39px on a phone → 60px at 1440 */
  font-size: clamp(var(--text-3xl), 1rem + 3.05vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.page-lead {
  max-width: 32rem;
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  line-height: 1.6;
  text-wrap: pretty;
}
.page-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* ---------- The phone, with what's included pointed out ----------
   One grid: callouts | phone | callouts. The phone's parts and the callouts share
   rows, so each line points at the thing it names. The frame sits behind all rows. */

.anatomy {
  grid-column: 6 / span 7;
  justify-self: end;
  width: 100%;
  max-width: 40rem; /* keeps the callout lines short on wide screens */
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem minmax(0, 1fr);
  grid-template-rows: repeat(7, auto) auto;
  align-items: center;
}
.anatomy__frame {
  grid-column: 2;
  grid-row: 1 / 8;
  align-self: stretch;
  background: #f5f4ef;
  border: 1px solid var(--ink-muted);
  border-radius: 1.75rem;
  box-shadow: 0 0 0 0.375rem var(--surface), 0 0 0 calc(0.375rem + 1px) var(--line);
}

/* The page inside the phone: a light client site, small type (it's a picture) */
.ph {
  grid-column: 2;
  position: relative;
  z-index: 1;
  margin-inline: var(--space-2);
  color: #1a211d;
  font-size: var(--text-xs);
  line-height: 1.4;
}
.ph--bar {
  grid-row: 1;
  margin: var(--space-2) var(--space-3) 0;
  padding: 0.25rem var(--space-1);
  border-radius: 999px;
  background: #e3e8e0;
  font-family: var(--font-mono);
  text-align: center;
  color: #59605b;
}
.ph--head {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2) var(--space-1);
}
.ph__name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
.ph__menu {
  width: 1rem;
  height: 0.5rem;
  border-block: 1.5px solid currentColor;
}
.ph--photo {
  grid-row: 3;
  display: flex;
  align-items: flex-end;
  height: 7rem;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(135deg, #d5dad2 0 1px, #e3e8e0 1px 0.5rem);
  color: #59605b;
}
.ph--rating { grid-row: 4; padding-top: var(--space-2); font-weight: 500; }
.ph__stars { color: #2a5c3f; letter-spacing: 0.05em; }
.ph--hours {
  grid-row: 5;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-top: 0.25rem;
}
.ph__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #2a5c3f;
}
.ph--actions {
  grid-row: 6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding-top: var(--space-2);
}
.ph__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  border: 1px solid #2a5c3f;
  border-radius: var(--radius-sm);
  color: #2a5c3f;
  font-weight: 500;
}
.ph__btn--solid { background: #2a5c3f; color: #ffffff; }
.ph--foot {
  grid-row: 7;
  margin-bottom: var(--space-3);
  padding-top: var(--space-2);
  border-top: 0;
  color: #59605b;
}

/* Callouts: text, then a hairline running to the phone's edge */
.callouts { display: contents; }
.callout {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink);
}
.callout span { max-width: 9rem; }
.callout::before,
.callout::after {
  content: "";
  flex: 1 1 var(--space-3);
  min-width: var(--space-3);
  height: 1px;
  background: var(--annot-line);
}
.callout--l { grid-column: 1; text-align: right; }
.callout--l::before { display: none; }
.callout--r { grid-column: 3; }
.callout--r::after { display: none; }
.callout[data-row="bar"] { grid-row: 1; padding-top: var(--space-2); }
.callout[data-row="photo"] { grid-row: 3; }
.callout[data-row="rating"] { grid-row: 4; padding-top: var(--space-2); }
.callout[data-row="hours"] { grid-row: 5; padding-top: 0.25rem; }
.callout[data-row="actions"] { grid-row: 6; padding-top: var(--space-2); }
.callout[data-row="foot"] { grid-row: 7; margin-bottom: var(--space-3); padding-top: var(--space-2); }
/* The line ends in a small dot against the phone */
.callout--l::after { background: linear-gradient(var(--annot-line), var(--annot-line)) left center / calc(100% - 0.375rem) 1px no-repeat, radial-gradient(circle, var(--ink-muted) 0 0.1875rem, transparent 0.21875rem) right center / 0.375rem 0.375rem no-repeat; height: 0.375rem; }
.callout--r::before { background: linear-gradient(var(--annot-line), var(--annot-line)) right center / calc(100% - 0.375rem) 1px no-repeat, radial-gradient(circle, var(--ink-muted) 0 0.1875rem, transparent 0.21875rem) left center / 0.375rem 0.375rem no-repeat; height: 0.375rem; }

.anatomy__cap {
  grid-column: 1 / -1;
  grid-row: 8;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-muted);
  text-align: center;
}

/* ---------- Bakom sidan: laptop + why (light) ---------- */

.build {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
}
.build__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-6);
  align-items: center;
  padding: var(--space-7) var(--gutter);
}
.build__why { grid-column: 8 / span 5; }

/* Four facts with a source each: the figure big, one or two sentences beside it */
.facts {
  margin-top: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.fact {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
}
.fact__num {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.fact__text { line-height: 1.6; max-width: 34rem; text-wrap: pretty; }
.facts__src {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-muted);
}
.facts__src a { color: var(--ink-muted); }
.facts__src a:hover { color: var(--ink); }

/* Same idea as the phone: callouts and the editor's rows share grid rows,
   so each line points at the code it describes */
.laptop {
  grid-column: 1 / span 7;
  width: 100%;
  max-width: 44rem;
  min-width: 0;
  margin: 0;
  display: grid;
  /* A wide screen (about 16:10) with the callouts in their own column */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.6fr);
  grid-template-rows: repeat(6, auto) auto;
  align-items: center;
}
.laptop__lid {
  grid-column: 2;
  grid-row: 1 / 6;
  align-self: stretch;
  background: #1a211d;
  border: 0.625rem solid #2b332e;
  border-bottom-width: 0.875rem;
  border-radius: 0.875rem 0.875rem 0.25rem 0.25rem;
}
.laptop__base {
  grid-column: 2;
  grid-row: 6;
  height: 0.875rem;
  margin-inline: -6%;
  background: linear-gradient(#c9cfc6, #a9b0a8);
  border-radius: 0.125rem 0.125rem 0.75rem 0.75rem;
  position: relative;
}
.laptop__base::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 14%;
  height: 0.3125rem;
  translate: -50% 0;
  background: #8f978e;
  border-radius: 0 0 0.375rem 0.375rem;
}

/* The editor inside the lid */
.ed {
  grid-column: 2;
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-inline: calc(0.625rem + var(--space-2));
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: #ecede6;
}
.ed span {
  display: block;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}
.ed i { font-style: normal; color: #9fc8a9; }
.ed b { font-weight: 400; color: #a3aba4; }
.ed u { text-decoration: none; color: #ecede6; }
.ed em { font-style: normal; color: #9fc8a9; }
.ed--tabs {
  grid-row: 1;
  display: flex;
  gap: var(--space-2);
  margin-top: calc(0.625rem + var(--space-1));
  padding-bottom: var(--space-1);
  border-bottom: 1px solid #34403a;
  color: #a3aba4;
}
.ed--tabs span { overflow: visible; }
.ed--tabs .is-on { color: #ecede6; }
.ed--code { padding-top: var(--space-2); }
.ed--term {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid #34403a;
}
.ed--status {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  margin-bottom: calc(0.875rem + var(--space-1));
  padding-top: var(--space-1);
  border-top: 1px solid #34403a;
  color: #a3aba4;
}
.ed--status span { overflow: visible; }
.ed[data-row="2"], .laptop .callout[data-row="2"] { grid-row: 2; }
.ed[data-row="3"], .laptop .callout[data-row="3"] { grid-row: 3; }
.ed[data-row="4"], .laptop .callout[data-row="4"] { grid-row: 4; }
.ed[data-row="5"], .laptop .callout[data-row="5"] { grid-row: 5; }

.laptop .callout { color: var(--ink); }
.laptop .callout span { max-width: 11rem; }
.laptop .anatomy__cap { grid-column: 2; grid-row: 7; }
/* More air between the callouts than the code alone would give */
.laptop .callout { padding-block: var(--space-1); }

/* ---------- Före och efter: monitor + slider (dark) ---------- */

.redo {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
}
.redo__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-6);
  align-items: center;
  padding: var(--space-7) var(--gutter);
}
.redo__text { grid-column: 1 / span 4; }
.redo__text .btn { margin-top: var(--space-4); }
.monitor { grid-column: 6 / span 7; min-width: 0; margin: 0; }

.monitor__screen {
  border: 0.625rem solid #2b332e;
  border-radius: 0.875rem;
  background: #2b332e;
  box-shadow: 0 0 0 1px #3a4640;
  overflow: hidden;
}
.monitor__bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0 0.5rem;
}
.monitor__bar span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #59605b;
}
.monitor__bar em {
  flex: 0 1 16rem;
  margin-inline: auto;
  padding: 0.125rem var(--space-1);
  border-radius: 999px;
  background: #1a211d;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
  line-height: 1.4;
  text-align: center;
  color: #a3aba4;
}
.monitor__stand {
  width: 22%;
  height: 2.5rem;
  margin: 0 auto;
  background: linear-gradient(#2b332e, #222a25);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}
.monitor .anatomy__cap { margin-top: var(--space-2); }

/* The comparison. Everything inside scales with the screen's width (cqi), like a screenshot. */
.ba {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 0.25rem;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}
.ba__old,
.ba__new {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.ba__new { clip-path: inset(0 0 0 var(--pos)); }

/* Before: a site nobody has touched in ten years */
.ba__old {
  background: #e8e4d8;
  color: #222222;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.9cqi;
  line-height: 1.3;
}
.old__banner {
  padding: 2.2cqi 2cqi 1.6cqi;
  background: linear-gradient(#3a6fc4, #1f4e9b);
  color: #ffffff;
  text-align: center;
}
.old__banner strong {
  display: block;
  font-size: 5cqi;
  letter-spacing: 0.4cqi;
  text-shadow: 0.3cqi 0.3cqi 0 #000000;
}
.old__banner span { display: block; color: #ffe066; font-style: italic; font-size: 2.2cqi; }
.old__nav {
  display: flex;
  justify-content: center;
  gap: 0.6cqi;
  padding: 0.6cqi;
  background: #c0c0c0;
}
.old__nav span,
.old__side span {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.5cqi;
  color: #0000cc;
  text-decoration: underline;
}
.old__nav span {
  padding: 0.3cqi 1.2cqi;
  background: #d4d0c8;
  border: 0.25cqi outset #f0f0f0;
}
.old__body {
  flex: 1;
  display: grid;
  grid-template-columns: 22% minmax(0, 1fr);
  min-height: 0;
}
.old__side {
  display: flex;
  flex-direction: column;
  gap: 1cqi;
  padding: 2cqi 1.5cqi;
  background: #d8cfb4;
}
.old__main {
  padding: 2cqi 4cqi;
  text-align: center;
}
.old__main p + p,
.old__main p + div,
.old__main div + p { margin-top: 1.5cqi; }
.old__news { color: #cc0000; font-weight: 700; }
.old__img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 46%;
  height: 15cqi;
  margin-inline: auto;
  padding: 0.5cqi;
  border: 0.4cqi ridge #999999;
  background: repeating-linear-gradient(45deg, #bdb7a6 0 0.4cqi, #cfc9b8 0.4cqi 1.6cqi);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.3cqi;
}
.old__foot {
  padding: 0.9cqi;
  background: #1f4e9b;
  color: #d0d8e8;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.3cqi;
  text-align: center;
}

/* After: the same business, built the way we build */
.ba__new {
  background: #f5f4ef;
  color: #1a211d;
  font-family: var(--font-sans);
  font-size: 1.6cqi;
  line-height: 1.4;
}
.new__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqi;
  padding: 2.2cqi 4cqi;
  border-bottom: 1px solid #d5dad2;
}
.new__logo {
  font-family: var(--font-serif);
  font-size: 2.8cqi;
  letter-spacing: -0.02em;
}
.new__nav { display: flex; gap: 2.5cqi; margin-left: auto; color: #59605b; }
.new__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.8cqi 1.8cqi;
  border: 1px solid #2a5c3f;
  border-radius: 0.6cqi;
  color: #2a5c3f;
  font-weight: 500;
  white-space: nowrap;
}
.new__btn--solid { background: #2a5c3f; color: #ffffff; }
/* Image left, copy right: with the divider in the middle, the headline is what shows */
.new__hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 4cqi;
  align-items: center;
  padding: 3cqi 4cqi;
  min-height: 0;
}
.new__copy { grid-column: 2; grid-row: 1; }
.new__title {
  font-family: var(--font-serif);
  font-size: 4.6cqi;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.new__lead { margin-top: 1.5cqi; color: #59605b; font-size: 1.9cqi; }
.new__actions { display: flex; gap: 1.2cqi; margin-top: 3cqi; }
.new__img {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  border-radius: 1cqi;
  background: repeating-linear-gradient(135deg, #d5dad2 0 1px, #e3e8e0 1px 1.2cqi);
}
.new__strip {
  display: flex;
  justify-content: space-between;
  gap: 2cqi;
  padding: 2cqi 4cqi;
  border-top: 1px solid #d5dad2;
  color: #59605b;
}
.new__strip b { font-weight: 600; color: #1a211d; }
.new__strip i {
  display: inline-block;
  width: 0.9cqi;
  height: 0.9cqi;
  margin-right: 0.8cqi;
  border-radius: 50%;
  background: #2a5c3f;
}

/* The divider and its knob */
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  translate: -50% 0;
  background: #f5f4ef;
  box-shadow: 0 0 0 1px rgb(17 23 20 / 0.25);
  pointer-events: none;
}
.ba__handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.75rem;
  height: 2.75rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: #f5f4ef;
  box-shadow: 0 0.25rem 1rem rgb(17 23 20 / 0.35);
}
/* ‹ › drawn with borders */
.ba__handle span::before,
.ba__handle span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.4375rem;
  height: 0.4375rem;
  border-left: 1.5px solid #1a211d;
  border-bottom: 1.5px solid #1a211d;
}
.ba__handle span::before { left: 0.75rem; transform: translateY(-50%) rotate(45deg); }
.ba__handle span::after { right: 0.75rem; transform: translateY(-50%) rotate(-135deg); }
.ba:has(.ba__range:focus-visible) .ba__handle span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The labels ride along under the knob, one on each side */
.ba__tag {
  position: absolute;
  top: calc(50% + 1.875rem);
  padding: 0.125rem var(--space-1);
  border-radius: var(--radius-sm);
  background: rgb(17 23 20 / 0.8);
  color: #ecede6;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  pointer-events: none;
}
.ba__tag--old { right: calc(100% - var(--pos) + 0.5rem); }
.ba__tag--new { left: calc(var(--pos) + 0.5rem); }

/* The real control: a range input for keyboard and screen readers.
   Pointer dragging is handled on the whole screen in main.js. */
.ba__range {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}

/* ---------- Pris och upplägg (light surface) ---------- */

.deal {
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.deal__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-4);
  align-items: start;
  padding: var(--space-7) var(--gutter);
}
.deal__price { grid-column: 1 / span 5; }
.deal__price .svc__unit { margin-top: var(--space-1); }
.deal__terms { grid-column: 7 / span 6; }
.deal__terms .svc__list { margin-top: 0; border-bottom: 1px solid var(--line); }
.deal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}
.deal__actions .link-arrow { margin-top: 0; }

/* ---------- Service pages: narrower screens ---------- */

@media (max-width: 64rem) {
  .page-intro__copy,
  .anatomy,
  .laptop,
  .build__why,
  .redo__text,
  .monitor,
  .deal__price,
  .deal__terms { grid-column: 1 / -1; }
  /* 03: twelve columns with fixed gaps overflow a phone */
  .page-intro,
  .build__inner,
  .redo__inner,
  .deal__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .anatomy { justify-self: start; }
  .laptop { max-width: 40rem; }
  .monitor { max-width: 48rem; }
}

@media (max-width: 48rem) {
  .page-intro { padding-block: var(--space-5) var(--space-6); }
  .build__inner,
  .redo__inner,
  .deal__inner { padding-block: var(--space-6); }
  /* Laptop: the screen full width, the callouts as a list under it */
  .laptop { grid-template-columns: minmax(0, 1fr); }
  .laptop__lid,
  .laptop__base,
  .ed,
  .laptop .anatomy__cap { grid-column: 1; }
  .laptop__base { margin-inline: -3%; }
  .laptop .callout,
  .laptop .callout[data-row] { grid-column: 1; grid-row: auto; padding-top: var(--space-1); }
  .laptop .callout:first-of-type { margin-top: var(--space-3); }
  .laptop .callout::after { display: none; }
  .laptop .callout::before {
    display: block;
    flex: 0 0 0.375rem;
    min-width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--ink-muted);
  }
  .laptop .callout span { max-width: none; }
  .laptop .anatomy__cap { grid-row: auto; text-align: left; }
  .fact { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
  .ba__handle span { width: 2.25rem; height: 2.25rem; }
  .ba__handle span::before { left: 0.5625rem; }
  .ba__handle span::after { right: 0.5625rem; }
}

/* Phone: every callout on the right of a narrower phone */
@media (max-width: 36rem) {
  .anatomy { grid-template-columns: 11.5rem minmax(0, 1fr); }
  .anatomy__frame,
  .ph { grid-column: 1; }
  .ph { margin-inline: var(--space-1); }
  .ph--bar { margin-inline: var(--space-2); }
  .callout--l,
  .callout--r { grid-column: 2; text-align: left; }
  .callout--l::after { display: none; }
  .callout--l::before { display: block; background: linear-gradient(var(--annot-line), var(--annot-line)) right center / calc(100% - 0.375rem) 1px no-repeat, radial-gradient(circle, var(--ink-muted) 0 0.1875rem, transparent 0.21875rem) left center / 0.375rem 0.375rem no-repeat; height: 0.375rem; }
  .callout::before { flex-basis: var(--space-2); min-width: var(--space-2); flex-grow: 0; }
  .anatomy__cap { text-align: left; }
}

/* ---------- /seo-och-ai/: search result + AI answer, with callouts ----------
   Same grid idea as the phone: callouts | panels | callouts. Row 5 is an empty
   spacer, so the two panels read as two places where the same question is asked. */

.serp {
  grid-column: 6 / span 7;
  justify-self: end;
  width: 100%;
  max-width: 44rem;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem minmax(0, 1fr);
  grid-template-rows: repeat(4, auto) var(--space-3) repeat(3, auto) auto;
  align-items: center;
}
.serp__panel {
  grid-column: 2;
  align-self: stretch;
  border-radius: var(--radius-lg);
}
.serp__panel--search { grid-row: 1 / 5; background: #f5f4ef; }
.serp__panel--ai { grid-row: 6 / 9; background: #e3e8e0; }

.sp {
  grid-column: 2;
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-inline: var(--space-3);
  color: #1a211d;
  font-size: var(--text-xs);
  line-height: 1.45;
}
.sp--query {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: 0.375rem 0.75rem;
  border: 1px solid #a3aba4;
  border-radius: 999px;
  background: #ffffff;
}
/* A magnifier: a ring and a handle */
.sp__icon {
  position: relative;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border: 1.5px solid #59605b;
  border-radius: 50%;
}
.sp__icon::after {
  content: "";
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  width: 0.3125rem;
  height: 1.5px;
  background: #59605b;
  transform: rotate(45deg);
}
.sp--hit {
  grid-row: 2;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: var(--space-1);
  padding-top: var(--space-3);
}
.sp--hit .sp__url,
.sp--hit .sp__title { grid-column: 2; }
/* Position 1, marked */
.sp__rank {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  background: #2a5c3f;
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1;
}
.sp__url { color: #59605b; }
.sp__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.25;
  color: #2a5c3f;
}
.sp--desc { grid-row: 3; padding-top: 0.25rem; padding-left: calc(1.75rem + var(--space-1)); }
.sp--other {
  grid-row: 4;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-block: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid #d5dad2;
}
.sp--other span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.sp--other i {
  flex: none;
  width: 1.75rem;
  font-style: normal;
  font-family: var(--font-serif);
  text-align: center;
  color: #8f978e;
}
.sp--other span::after {
  content: "";
  height: 0.5rem;
  border-radius: 999px;
  background: #d5dad2;
}
.sp--other span:first-child::after { width: 65%; }
.sp--other span:last-child::after { width: 80%; }

.sp--ask {
  grid-row: 6;
  justify-self: end;
  max-width: 80%;
  margin-top: var(--space-3);
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem 0.75rem 0.125rem 0.75rem;
  background: #1a211d;
  color: #f5f4ef;
}
.sp--answer {
  grid-row: 7;
  max-width: 90%;
  margin-top: var(--space-1);
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem 0.75rem 0.75rem 0.125rem;
  background: #f5f4ef;
}
.sp--source {
  grid-row: 8;
  justify-self: start;
  display: inline-flex;
  gap: 0.375rem;
  margin-block: var(--space-1) var(--space-3);
  padding: 0.125rem 0.5rem;
  border: 1px solid #a3aba4;
  border-radius: 999px;
  font-family: var(--font-mono);
}
.sp--source span { color: #59605b; font-family: var(--font-sans); }

.serp .callout[data-row="query"] { grid-row: 1; padding-top: var(--space-3); }
.serp .callout[data-row="hit"] { grid-row: 2; padding-top: var(--space-3); }
.serp .callout[data-row="desc"] { grid-row: 3; }
.serp .callout[data-row="answer"] { grid-row: 7; padding-top: var(--space-1); }
.serp .callout[data-row="source"] { grid-row: 8; padding-block: var(--space-1) var(--space-3); }
.serp .anatomy__cap { grid-row: 9; }

/* ---------- Vad är SEO och AIO? (light) ---------- */

.explain {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
}
/* Row 1: the question, wide. Row 2: the picture left, the answer right. */
.explain__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-6);
  align-items: center;
  padding: var(--space-7) var(--gutter);
}
.explain__head { grid-column: 1 / span 8; grid-row: 1; }
.merge { grid-column: 1 / span 6; grid-row: 2; }
.explain__body { grid-column: 8 / span 5; grid-row: 2; }
.explain__body p { max-width: 36rem; line-height: 1.7; text-wrap: pretty; }
.explain__body p + p { margin-top: var(--space-2); }
.explain__lead {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.5 !important;
}
.explain__body strong { font-weight: 600; }

/* Four names → one job. Lines run from each name into one bracket, then to the box. */
.merge {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-6) minmax(0, 0.9fr);
  align-items: center;
}
.merge__names {
  grid-column: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.merge__names li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.625rem var(--space-2);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-md);
}
.merge__names b {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-muted);
  text-decoration: line-through;
}
.merge__names span {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink-muted);
}
/* each name's line into the bracket */
.merge__names li::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: calc(var(--space-6) / 2);
  height: 1px;
  background: var(--annot-line);
}
/* the bracket: from the first name's middle to the last one's */
.merge__names::after {
  content: "";
  position: absolute;
  right: calc(var(--space-6) / -2);
  top: 1.8rem;
  bottom: 1.8rem;
  width: 1px;
  background: var(--annot-line);
}
.merge__box {
  grid-column: 3;
  position: relative;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: #1a211d;
  color: #f5f4ef;
}
/* the line from the bracket into the box */
.merge__box::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: calc(var(--space-6) / 2);
  height: 1px;
  background: var(--annot-line);
}
.merge__title {
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 72;
  font-size: var(--text-display);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.merge__list {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.merge__list li {
  padding-block: 0.5rem;
  border-top: 1px solid #34403a;
  font-size: var(--text-base);
  line-height: 1.4;
}
.merge__cap {
  grid-column: 1 / -1;
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

.explain__quote {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-muted);
}
.explain__quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.5;
}
.explain__quote footer {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-muted);
}
.explain__quote a { color: var(--accent); }

/* The visitor's own company in the example: a placeholder, so it reads as "fill in your name" */
.sp__you {
  padding: 0 0.25rem;
  border: 1px dashed #2a5c3f;
  border-radius: var(--radius-sm);
  background: rgb(42 92 63 / 0.08);
  font-weight: 600;
  color: #2a5c3f;
  white-space: nowrap;
}
.sp__title .sp__you { font-weight: 400; }

/* ---------- Två upplägg (light) ---------- */

.offers {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
}
.offers__inner { padding: var(--space-7) var(--gutter); }
.offers__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.offer {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-lg);
}
.offer__id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink-muted);
}
.offer__name {
  margin: var(--space-1) 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.offer__for {
  max-width: 34rem;
  margin-top: var(--space-2);
  line-height: 1.6;
}
.offer .svc__list { margin-top: var(--space-3); border-bottom: 1px solid var(--line); }
.offer .svc__list li { border-top-color: #c9d0c6; }
.offer .svc__list { border-bottom-color: #c9d0c6; }
.offer .svc__price { margin-top: auto; padding-top: var(--space-4); }

/* ---------- Lokalt paket, månad för månad (dark) ---------- */

.months {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
}
.months__inner { padding: var(--space-7) var(--gutter); }
.months__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.month {
  position: relative;
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-muted);
}
/* A dot on the line where each month starts */
.month::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink);
}
.month__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink-muted);
}
.month__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: var(--text-xl);
  line-height: 1.2;
}
.month__text { max-width: 30rem; margin-top: var(--space-1); line-height: 1.6; color: var(--ink-muted); }

.deal__text {
  max-width: 36rem;
  font-size: var(--text-lg);
  line-height: 1.6;
  text-wrap: pretty;
}

@media (max-width: 64rem) {
  .serp { grid-column: 1 / -1; justify-self: start; }
  .explain__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: var(--space-5); }
  /* Narrow: question, answer, then the picture */
  .explain__head { grid-column: 1; grid-row: 1; }
  .explain__body { grid-column: 1; grid-row: 2; }
  .merge { grid-column: 1; grid-row: 3; max-width: 40rem; }
  .offers__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .offers__inner,
  .months__inner,
  .explain__inner { padding-block: var(--space-6); }
  .months__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .offer { padding: var(--space-3); }
}

/* Phone: the picture stacks, names in two columns, no lines */
@media (max-width: 36rem) {
  .merge { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .merge__names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }
  .merge__names::after,
  .merge__names li::after,
  .merge__box::before { display: none; }
  .merge__box { grid-column: 1; }
  .merge__title { font-size: var(--text-display); }
}

/* Phone: the panels on the left, every callout on the right */
@media (max-width: 36rem) {
  .serp { grid-template-columns: 13rem minmax(0, 1fr); }
  .serp__panel,
  .sp { grid-column: 1; }
  .sp { margin-inline: var(--space-2); }
  .serp .callout--l,
  .serp .callout--r { grid-column: 2; text-align: left; }
  .serp .anatomy__cap { text-align: left; }
}

/* ---------- Footer (dark) ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.footer__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-5);
  padding: var(--space-6) var(--gutter) var(--space-5);
}
.footer__lead { grid-column: 1 / span 4; }
.footer__col--svc { grid-column: 6 / span 2; }
.footer__col--more { grid-column: 8 / span 2; }
.footer__col--contact { grid-column: 10 / span 3; }
.footer__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.footer__line {
  max-width: 24rem;
  margin-top: var(--space-2);
  color: var(--ink-muted);
  line-height: 1.6;
}
.footer__lead .btn { margin-top: var(--space-4); }
.footer__head {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.footer__col ul { margin: 0; padding: 0; list-style: none; }
.footer__col li { padding-block: 0.375rem; line-height: 1.5; }
.footer__col a {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
}
.footer__col a:hover { color: var(--accent); text-decoration: underline; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--gutter) var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-muted);
}
/* Placeholders that must be filled in before launch: visibly unfinished */
.tbd {
  padding: 0 0.25rem;
  border: 1px dashed var(--ink-muted);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

@media (max-width: 64rem) {
  .footer__lead { grid-column: 1 / -1; }
  .footer__col--svc { grid-column: 1 / span 4; }
  .footer__col--more { grid-column: 5 / span 3; }
  .footer__col--contact { grid-column: 8 / span 5; }
}
@media (max-width: 48rem) {
  /* 03: twelve columns with fixed gaps overflow a phone */
  /* Two link columns side by side, the rest full width */
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); row-gap: var(--space-4); }
  .footer__lead,
  .footer__col--contact { grid-column: 1 / -1; }
  .footer__col--svc { grid-column: 1; }
  .footer__col--more { grid-column: 2; }
  .footer__legal { flex-direction: column; }
}

/* ---------- Legal pages: integritetspolicy, cookies ---------- */

.page-hero--short .legal-intro {
  padding: var(--space-6) var(--gutter) var(--space-6);
  max-width: calc(46rem + 2 * var(--gutter));
}
.legal {
  position: relative;
  isolation: isolate;
  display: block;
  background: var(--bg);
  color: var(--ink);
}
.legal__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-4);
  align-items: start;
  padding: var(--space-6) var(--gutter) var(--space-7);
}
/* An in-page table of contents that stays in view while reading */
.legal__toc {
  grid-column: 1 / span 3;
  position: sticky;
  top: var(--space-4);
}
.legal__toc-head {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.legal__toc ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.legal__toc li { border-bottom: 1px solid var(--line); }
.legal__toc a {
  display: block;
  padding-block: 0.5rem;
  color: var(--ink-muted);
  text-decoration: none;
  line-height: 1.4;
}
.legal__toc a:hover { color: var(--ink); text-decoration: underline; }

.legal__body { grid-column: 5 / span 7; }
.legal__section { scroll-margin-top: var(--space-4); }
.legal__section + .legal__section {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.legal__section h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.legal__section h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
}
.legal__section p,
.legal__section li {
  max-width: 62ch;
  line-height: 1.7;
}
.legal__section p + p { margin-top: var(--space-1); }
.legal__section ul { margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.legal__section li {
  position: relative;
  padding-left: var(--space-3);
}
.legal__section li + li { margin-top: 0.375rem; }
.legal__section li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--ink-muted);
}
.legal__basis {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.legal .tbd { font-size: 0.9em; }

/* ---------- Blogg: empty, with a tumbleweed ---------- */

.blog-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.blog-empty {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--space-6) var(--gutter) var(--space-4);
}
.blog-empty__copy { max-width: 40rem; }
.blog-empty .page-lead { margin-bottom: var(--space-2); }

.prairie {
  position: relative;
  height: clamp(11rem, 18vw, 18rem);
  container-type: inline-size;
  overflow: hidden;
}
.prairie__land {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.prairie__land path,
.prairie__land circle {
  fill: none;
  stroke: var(--annot-line);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.prairie__land .prairie__ground { stroke: var(--ink-muted); }
.prairie__land .prairie__sun { stroke-dasharray: 2 5; }

/* The ground sits at 168/200 of the box; the weed rolls on it */
.tumble {
  position: absolute;
  left: 0;
  bottom: calc(16% - 1px);
  width: clamp(3.5rem, 6vw, 5.5rem);
  aspect-ratio: 1;
  /* Resting pose without JS or with reduced motion */
  translate: calc(62cqi) 0;
}
.tumble__hop { width: 100%; height: 100%; }
.tumble__weed {
  display: block;
  width: 100%;
  height: 100%;
  color: #c9b89a;
  transform: rotate(-18deg);
}
.tumble__dust {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(201 184 154 / 0.45), rgb(201 184 154 / 0) 70%);
  opacity: 0;
}
.tumble__dust--2 { left: -10%; width: 32%; }
.tumble__dust--3 { left: 25%; width: 26%; }

/* Rolling, only once main.js says so (not with reduced motion) */
.prairie.is-on .tumble {
  translate: none;
  animation: tumble-travel 11s linear infinite;
}
.prairie.is-on .tumble__hop { animation: tumble-hop 1.1s infinite; }
.prairie.is-on .tumble__weed { animation: tumble-spin 1.3s linear infinite; }
.prairie.is-on .tumble__dust { animation: tumble-dust 1.1s ease-out infinite; }
.prairie.is-on .tumble__dust--2 { animation-delay: 0.08s; }
.prairie.is-on .tumble__dust--3 { animation-delay: 0.16s; }
.prairie.is-paused .tumble,
.prairie.is-paused .tumble * { animation-play-state: paused; }

@keyframes tumble-travel {
  0% { transform: translateX(-8rem); }
  80% { transform: translateX(calc(100cqi + 8rem)); }
  100% { transform: translateX(calc(100cqi + 8rem)); }
}
/* Up fast, down with gravity, a small bounce on landing */
@keyframes tumble-hop {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  42% { transform: translateY(-2.75rem); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  84% { transform: translateY(0); animation-timing-function: ease-out; }
  92% { transform: translateY(-0.375rem); animation-timing-function: ease-in; }
  100% { transform: translateY(0); }
}
@keyframes tumble-spin { to { transform: rotate(342deg); } }
/* A puff where it lands, drifting back the way it came */
@keyframes tumble-dust {
  0%, 80% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  86% { opacity: 1; }
  100% { opacity: 0; transform: translate(-1.5rem, -0.5rem) scale(1.8); }
}

.prairie__pause {
  position: absolute;
  right: var(--gutter);
  top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
}
.prairie__pause:hover { color: var(--ink); }
.prairie__pause .icon-play { display: none; }
.prairie__pause[aria-pressed="true"] .icon-play { display: block; }
.prairie__pause[aria-pressed="true"] .icon-pause { display: none; }

@media (max-width: 64rem) {
  .legal__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: var(--space-5); }
  .legal__toc { grid-column: 1; position: static; }
  .legal__body { grid-column: 1; }
}
@media (max-width: 48rem) {
  .page-hero--short .legal-intro { padding-block: var(--space-5); }
  .legal__inner { padding-block: var(--space-5) var(--space-6); }
}

/* ---------- Utilities ---------- */
.u-mt-4 { margin-top: var(--space-4); }