/* AIKontoret — one stylesheet for every page.
   Tokens follow design.md. Structure comes from 1px lines, never shadows. */

:root {
  --paper: #F4F6F5;
  --surface: #FFFFFF;
  --ink: #10241F;
  --ink-soft: #3D4E49;
  --ink-muted: #5C6B66;
  --line: #DDE3E0;
  --line-wash: #C6D3CD;
  --accent: #0E6B52;
  --accent-deep: #0A4F3D;
  --accent-wash: #E8F0EC;
  --accent-pale: #BFE0D2;
  --accent-line: #3D8B73;

  --label-verified-fg: #0E6B52;
  --label-verified-bg: #E8F0EC;
  --label-reported-fg: #7A5B14;
  --label-reported-bg: #F5EFDF;
  --label-demo-fg: #2F5B7A;
  --label-demo-bg: #E7EFF4;
  --label-concept-fg: #4A5651;
  --label-concept-bg: #EAEEEC;

  --serif: Newsreader, Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --container: 1180px;
  --gutter: 24px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow: 0 1px 3px rgba(16, 36, 31, .10);
}

/* ---------- Reset and base ---------- */

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

/* Author display rules outrank the UA rule for [hidden], and the filters rely on it. */
[hidden] { display: none !important; }

/* Klistrad header är 64px — ankarmål ska inte hamna under den. */
[data-item], [id^='wf-'], [id^='guide-'], [id^='tool-'], section[id], .step-card { scroll-margin-top: 88px; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 { font-weight: 400; margin: 0; }

p { margin: 0; }

ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-deep); }

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

::selection { background: var(--accent-wash); }

/* ---------- Type scale ---------- */

.display { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: -.015em; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 3vw, 34px); line-height: 1.15; }
.h2-sm { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; }
.h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.3; }
.h4 { font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.35; }

.lead { font-size: 19px; line-height: 1.6; color: var(--ink-muted); }
.small { font-size: 15px; line-height: 1.5; }
.meta {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--ink-muted); }
.measure { max-width: 68ch; }
.measure-narrow { max-width: 60ch; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */

.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.section { border-top: 1px solid var(--line); }
.section--surface { background: var(--surface); }
.section--wash { background: var(--accent-wash); }
.section__inner { max-width: var(--container); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--gutter); }
.section__inner--tight { padding-block: clamp(40px, 5vw, 64px); }
.section__inner--mid { padding-block: clamp(48px, 6vw, 80px); }

.stack-8 > * + * { margin-top: 8px; }
.stack-12 > * + * { margin-top: 12px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.stack-32 > * + * { margin-top: 32px; }

.grid { display: grid; gap: 16px; }
.grid--250 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid--270 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--400 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.grid--fill-300 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.grid--fill-320 { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.grid--gap-20 { gap: 20px; }
.grid--gap-32 { gap: 32px; }

.split { display: flex; flex-wrap: wrap; gap: 32px; }
.split--48 { gap: 48px; }
.split > .split__wide { flex: 2 1 420px; }
.split > .split__col { flex: 1 1 320px; }
.split > .split__col-sm { flex: 1 1 300px; }

.section-head { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; }
.section-head--wide { margin-bottom: 48px; }
.section-head > div { flex: 1 1 420px; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.site-header[data-scrolled='true'] { border-bottom-color: var(--line); box-shadow: var(--shadow); }

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 64px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  flex: none;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }

.site-nav {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current='page'] { color: var(--accent); font-weight: 500; }

.nav-toggle { display: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  /* inline-flex äter mellanslag mellan textnoder — gap återställer luften före pilen. */
  gap: 6px;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); color: #fff; }
.btn--secondary { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink-muted); color: var(--ink); }
.btn--secondary-surface { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn--secondary-surface:hover { border-color: var(--ink-muted); color: var(--ink); }
.btn--onaccent { background: #fff; color: var(--accent-deep); font-size: 16px; font-weight: 600; padding: 14px 24px; }
.btn--onaccent:hover { background: var(--accent-wash); color: var(--accent-deep); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.link-strong { font-size: 15px; font-weight: 500; }

/* A quiet in-card link that reads as a destination, not a button. */
.card-link { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--accent); text-decoration: none; }
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cards and panels ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 150ms ease-out;
}
.card--plain { background: transparent; }
.card--tinted { background: #FBFCFB; }
.card--roomy { padding: clamp(20px, 2.4vw, 28px); }
a.card, .card--interactive { text-decoration: none; color: var(--ink); }

/* Card header: title block and evidence label, wrapping when the card is narrow. */
.card-head { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }


a.card:hover, .card--interactive:hover { border-color: var(--ink-muted); color: var(--ink); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
}

/* ---------- Definition rows ---------- */

.rows { border-top: 1px solid var(--line); }
.rows > div {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.rows dt { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-muted); }
.rows dd { margin: 0; font-size: 15px; line-height: 1.4; text-align: right; font-variant-numeric: tabular-nums; }
.rows--roomy > div { padding: 12px 0; }
.rows--roomy dt { font-size: 15px; color: var(--ink); }
.rows--roomy dd { color: var(--ink-muted); }

/* Stacked variant: label above value, for longer prose values. */
.rows--stacked > div { flex-direction: column; gap: 2px; padding: 12px 0; }
.rows--stacked dd { text-align: left; font-size: 15px; line-height: 1.5; }

.rows--columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0 24px; }

.list-lined { border-top: 1px solid var(--line); }
.list-lined > li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.list-marked > li { display: flex; gap: 12px; }
.list-marked .marker { flex: none; color: var(--accent); font-weight: 600; }
.list-marked .marker--muted { color: var(--ink-muted); }

/* ---------- Evidence labels ---------- */

.label {
  display: inline-block;
  flex: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  white-space: nowrap;
}
.label--verified { color: var(--label-verified-fg); background: var(--label-verified-bg); }
.label--reported { color: var(--label-reported-fg); background: var(--label-reported-bg); }
.label--demo { color: var(--label-demo-fg); background: var(--label-demo-bg); }
.label--concept { color: var(--label-concept-fg); background: var(--label-concept-bg); }

/* ---------- Step chains ---------- */

.chain { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.chain li {
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  background: var(--paper);
  color: var(--ink);
}
/* A green step is one where a person approves before the flow continues. */
.chain li.chain__human { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.chain--lg { font-size: 15px; gap: 8px; }
.chain--lg li { padding: 6px 12px; }
.chain--onaccent li { border-color: var(--accent-line); background: transparent; color: #fff; }

/* ---------- Breadcrumb ---------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current='page'] { color: var(--ink); }

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

.hero { max-width: var(--container); margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(36px, 4vw, 52px); }
.hero--tall { padding-block: clamp(64px, 9vw, 120px) clamp(56px, 7vw, 88px); }
.hero--mid { padding-block: clamp(48px, 7vw, 96px) clamp(48px, 6vw, 80px); }
.hero h1 { max-width: 24ch; margin-bottom: 16px; }
.hero .lead { max-width: 60ch; }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-muted); }

.input, .select {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.input--lg { font-size: 17px; padding: 14px 16px; }
.select { padding: 11px 14px; }
.input:hover, .select:hover { border-color: var(--ink-muted); }

.search { display: block; max-width: 560px; }
.search > span { display: block; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-muted); margin-bottom: 8px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; }
.filter-bar .field { flex: 1 1 200px; }

.filter-status {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}

.chip-set { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}
.chip:hover { border-color: var(--ink-muted); }
.chip[aria-pressed='true'] { border-color: var(--accent); background: var(--accent); color: #fff; }

.fieldset { flex: 1 1 520px; margin: 0; padding: 0; border: 0; }
.fieldset--sm { flex: 0 1 280px; }
.fieldset--md { flex: 1 1 360px; }
.fieldset > legend { padding: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-muted); margin-bottom: 10px; }
.fieldset-row { display: flex; flex-wrap: wrap; gap: 28px 48px; margin-bottom: 8px; }

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--accent);
  cursor: pointer;
}
.link-button:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tool directory ---------- */

.tool-hero .kicker,
#valj .kicker,
#alla .kicker,
#granska .kicker {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.tool-hero .lead { margin-bottom: 28px; }

.tool-criteria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.tool-criteria li {
  min-width: 0;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.tool-criteria li + li { border-left: 1px solid var(--line); }
.tool-criteria li > span {
  flex: none;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.2;
}
.tool-criteria h3 { margin-bottom: 5px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.tool-criteria p { color: var(--ink-muted); font-size: 14px; line-height: 1.5; }

.directory-title {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.directory-title > * { flex: 1 1 360px; }
.tool-search { max-width: none; margin-bottom: 24px; }
.tool-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 16px;
}
.tool-card {
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.tool-card__identity { display: flex; gap: 12px; min-width: 0; }
.tool-card__identity h3 { font-size: 19px; font-weight: 600; line-height: 1.3; }
.tool-card__summary { color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.tool-card__facts { border-top: 1px solid var(--line); }
.tool-card__facts > div {
  padding: 10px 0;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.tool-card__facts dt { color: var(--ink-muted); font-size: 13px; font-weight: 500; line-height: 1.45; }
.tool-card__facts dd { font-size: 14px; line-height: 1.45; }
.tool-card__footer {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tool-checklist { border-top: 1px solid var(--line); }
.tool-checklist li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.tool-source-note { margin-top: 20px; }
.category-quicklinks { padding-top: 2px; }
.category-quicklinks > .meta { margin-bottom: 9px; }
.category-deepdives { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.category-deepdive {
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
  background: var(--accent-wash);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
}
.category-deepdive:hover { color: var(--ink); border-color: var(--accent); background: var(--green-pale); }
.category-deepdive__name { min-width: 0; font-weight: 500; }
.category-deepdive__meta { flex: none; color: var(--accent); font-size: 12px; white-space: nowrap; }

/* ---------- Tool category deep dive ---------- */

.tool-category-page .kicker {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.tool-category-hero { max-width: var(--container); margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gutter); }
.tool-category-hero__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: clamp(36px, 7vw, 88px); align-items: end; }
.tool-category-hero h1 { max-width: 14ch; margin-bottom: 22px; }
.tool-category-hero .lead { max-width: 58ch; margin-bottom: 28px; }
.tool-category-summary { padding: 26px; color: #fff; background: var(--accent-deep); }
.tool-category-summary .meta { color: var(--accent-pale); }
.tool-category-summary ol { margin: 14px 0 18px; }
.tool-category-summary li { padding: 12px 0; display: flex; gap: 14px; border-top: 1px solid rgba(255,255,255,.2); font-size: 15px; line-height: 1.45; }
.tool-category-summary li span { color: var(--accent-pale); font-family: var(--serif); font-size: 19px; }
.tool-category-summary > p:last-child { color: #dce8e3; }
.workstyle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.workstyle-grid article { padding: 26px; background: var(--surface); }
.workstyle-grid h3 { margin: 7px 0 10px; font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.workstyle-grid p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.workstyle-grid p:last-child { margin-top: 16px; color: var(--ink); }
.comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.comparison-grid > article { padding: 26px; display: flex; flex-direction: column; gap: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.comparison-card__head { display: flex; align-items: center; gap: 13px; }
.comparison-card__head h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.comparison-grid dl { border-top: 1px solid var(--line); }
.comparison-grid dl > div { padding: 11px 0; display: grid; grid-template-columns: 92px 1fr; gap: 14px; border-bottom: 1px solid var(--line); }
.comparison-grid dt { color: var(--ink-muted); font-size: 13px; font-weight: 500; line-height: 1.5; }
.comparison-grid dd { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.comparison-grid .card-link { margin-top: auto; align-self: flex-start; }
.comparison-grid .card-link + .card-link { margin-top: 0; }
.tool-profile-title { margin-bottom: 22px; display: flex; align-items: center; gap: 18px; }
.tool-profile-title .kicker { margin: 0 0 6px; }
.tool-profile-title .display { margin: 0; }
.tool-profile-logo { width: 64px; height: 64px; flex: 0 0 64px; }
.tool-profile-logo img { width: 40px; height: 40px; object-fit: contain; }
.tool-category-summary hr { margin: 20px 0; border: 0; border-top: 1px solid rgba(255,255,255,.18); }
.tool-profile-flow { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.tool-profile-flow ol { counter-reset: profile-flow; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tool-profile-flow li { counter-increment: profile-flow; padding: 8px 22px 8px 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.tool-profile-flow li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.tool-profile-flow li::before { content: counter(profile-flow, decimal-leading-zero); margin-bottom: 12px; display: block; color: var(--accent); font-family: var(--serif); font-size: 22px; }
.tool-profile-scenario { margin-top: 16px; padding: 28px; border-radius: var(--radius-lg); background: var(--green-pale); }
.tool-profile-scenario h3 { margin: 7px 0 10px; font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.tool-profile-scenario p:last-child { max-width: 72ch; color: var(--ink-soft); line-height: 1.65; }
.tool-profile-date { margin: 18px 0 8px; }
.tool-profile-alternatives { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.tool-profile-alternatives li { padding: 20px 22px; display: grid; grid-template-columns: minmax(130px, .35fr) 1fr; gap: 24px; background: var(--surface); }
.tool-profile-alternatives strong { font-size: 16px; }
.tool-profile-alternatives span { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.tool-test-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: clamp(36px, 7vw, 80px); align-items: start; }
.tool-test-layout > div:first-child > .muted { margin-top: 14px; }
.numbered-checklist { margin-top: 24px; border-top: 1px solid var(--line); }
.numbered-checklist li { padding: 13px 0; display: grid; grid-template-columns: 34px 1fr; gap: 12px; border-bottom: 1px solid var(--line); }
.numbered-checklist span { color: var(--accent); font-family: var(--serif); font-size: 19px; }
.numbered-checklist p { font-size: 15px; line-height: 1.55; }
.tool-test-prompt { margin: 0; }
.decision-panel { padding: clamp(28px, 5vw, 48px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; color: #fff; background: var(--accent-deep); }
.decision-panel > div:first-child { flex: 1 1 460px; }
.decision-panel .meta { color: var(--accent-pale); }
.decision-panel h2 { margin: 7px 0 10px; max-width: 24ch; font-family: var(--serif); font-size: clamp(27px, 3.4vw, 38px); line-height: 1.15; }
.decision-panel p:last-child { max-width: 60ch; color: #dce8e3; }
.decision-panel .tool-category-back { color: #fff; border-color: rgba(255,255,255,.35); }
.decision-panel .tool-category-back:hover { color: #fff; border-color: #fff; }
.tool-sources p { margin-top: 12px; max-width: 72ch; color: var(--ink-soft); font-size: 15px; }
.tool-sources ul { margin-top: 20px; columns: 2; column-gap: 36px; }
.tool-sources li { padding: 7px 0; break-inside: avoid; font-size: 14px; }

.checkbox { display: flex; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.checkbox input { margin: 5px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--accent); }

/* The Blueprint block sits on the wash, so its rules darken a step. */
.section--wash .input { border-color: var(--line-wash); }
.section--wash .list-lined,
.section--wash .list-lined > li { border-color: var(--line-wash); }

/* ---------- Figures ---------- */

.figure { margin: 0; }
.figure__frame { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 8px; }
.figure__frame--tight { padding: 6px; }
.figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); max-width: 64ch; }
.figure svg { display: block; width: 100%; height: auto; }

/* ---------- Category icon ---------- */

.icon-tile {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-tile--lg { width: 44px; height: 44px; background: var(--surface); }
.icon-tile--initial {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1;
  color: var(--ink);
}
.tool-mark {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: var(--accent-line);
}
.tool-mark svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool-mark svg .fill { fill: currentColor; stroke: none; }
.tool-logo { background: var(--paper); border-color: var(--line); }
.tool-logo img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.tool-mark--warm { color: #9a4f22; background: #fff5ec; border-color: #e8c7ae; }
.tool-mark--blue { color: #315f8f; background: #f0f6fc; border-color: #bfd1e3; }
.tool-mark--violet { color: #6f4c8c; background: #f7f2fb; border-color: #d7c4e5; }
.tool-mark--ink { color: #303a3c; background: #f2f4f3; border-color: #cbd1ce; }
.icon-tile--sm {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1;
  color: var(--ink-muted);
}

/* ---------- Accordions ---------- */

.accordion { border-top: 1px solid var(--line); }
.accordion > li { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  background: none;
  border: none;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  cursor: pointer;
}
.accordion__trigger .num { flex: none; font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--accent); }
.accordion__trigger .title { flex: 1 1 auto; font-size: 17px; line-height: 1.4; font-weight: 600; }
.accordion__trigger .title--lg { font-size: 18px; }
.accordion__trigger .sign { flex: none; font-size: 15px; color: var(--ink-muted); }
.accordion__panel { padding: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.accordion__panel--indent { padding-left: 42px; padding-bottom: 16px; }

/* ---------- Workflow step picker ---------- */

.step-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px; margin-bottom: 40px; }
.step-picker li { display: flex; }
.step-picker button {
  flex: 1;
  text-align: left;
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.step-picker button:hover { border-color: var(--ink-muted); }
.step-picker button[aria-pressed='true'] { background: var(--accent-wash); border-color: var(--accent); }
.step-picker .num { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.step-picker button[aria-pressed='true'] .num { color: var(--accent); }
.step-picker .name { font-size: 16px; font-weight: 500; line-height: 1.35; }

.step-card { border-color: var(--line); }
.step-card[data-selected='true'] { border-color: var(--accent); }

/* ---------- Article (guide) ---------- */

.article { max-width: var(--container); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(56px, 7vw, 96px); font-size: 18px; line-height: 1.7; }
.article__head { max-width: 44rem; }
.article section { max-width: 44rem; margin-top: clamp(48px, 6vw, 80px); }
.article section.section--wide { max-width: none; }
.article h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; letter-spacing: -.015em; margin-bottom: 20px; }
.article__lead { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; color: var(--ink-soft); margin-bottom: 24px; }
.article h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin-bottom: 16px; }

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin-bottom: 28px;
}
.byline > div { display: flex; gap: 8px; font-size: 14px; line-height: 1.5; }
.byline dt { font-weight: 500; color: var(--ink-muted); }
.byline dd { margin: 0; font-variant-numeric: tabular-nums; }

.tldr {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.tldr h2 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; color: var(--ink-muted); margin-bottom: 12px; }
.tldr dl { display: flex; flex-direction: column; gap: 8px; }
.tldr dl > div { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 15px; line-height: 1.5; }
.tldr dt { flex: none; font-weight: 600; }
.tldr dd { flex: 1 1 260px; margin: 0; color: var(--ink-soft); }

.kicker-h2 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; color: var(--ink-muted); margin-bottom: 12px; }

.cta-panel {
  background: var(--accent);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}
.cta-panel > div { flex: 1 1 380px; }
.cta-panel .kicker { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; color: var(--accent-pale); margin-bottom: 10px; }
.cta-panel h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; margin-bottom: 10px; color: #fff; }
.cta-panel p { margin-bottom: 20px; font-size: 17px; line-height: 1.6; color: #DCEBE4; max-width: 52ch; }

/* ---------- Articles ---------- */

.article-index-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr)); gap:24px; }
.article-card { overflow:hidden; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-lg); }
.article-card__image { display:block; background:var(--accent-wash); }
.article-card__image img { display:block; width:100%; height:auto; }
.article-card__body { display:grid; gap:12px; padding:24px; }
.article-card__body h3 { font-family:var(--serif); font-size:clamp(24px,2.6vw,30px); line-height:1.18; }
.article-card__body p:not(.meta) { color:var(--ink-soft); font-size:16px; }
.article-card__body .card-link { margin-top:6px; }
.article--editorial .article__head { max-width:52rem; }
.article-hero-image { margin:32px 0 0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.article-hero-image img { display:block; width:100%; height:auto; }
.article-opening { margin-top:24px; }
.article-steps { border-top:1px solid var(--line); }
.article-steps article { display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.article-steps article>span { color:var(--accent); font-family:var(--serif); font-size:25px; line-height:1.2; }
.article-steps h3 { font-family:var(--serif); font-size:23px; line-height:1.25; margin-bottom:5px; }
.article-steps p { color:var(--ink-soft); font-size:16px; }
.article-numbered { margin:24px 0; border-top:1px solid var(--line); }
.article-numbered li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.article-numbered span { color:var(--accent); font-weight:600; }
.article-template { margin-top:22px; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--surface); }
.article-template pre { margin:0; padding:24px; white-space:pre-wrap; overflow-wrap:anywhere; font:15px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
.article-decision-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:24px; border:1px solid var(--line); background:var(--line); }
.article-decision-grid article { padding:22px; background:var(--surface); }
.article-decision-grid h3 { margin:5px 0 8px; font-family:var(--serif); font-size:21px; line-height:1.25; }
.article-decision-grid p:last-child { color:var(--ink-soft); font-size:15px; }
.article-examples { display:grid; gap:16px; margin-top:24px; }
.article-examples article { padding:22px; border:1px solid var(--line); background:var(--surface); }
.article-examples blockquote { margin:12px 0; padding-left:18px; border-left:3px solid var(--accent-line); color:var(--ink); font-family:var(--serif); font-size:20px; line-height:1.5; }
.article-examples article>p:last-child { color:var(--ink-soft); font-size:15px; }
.article-source-note { margin-top:18px; padding:18px 20px; border-left:3px solid var(--accent); background:var(--accent-wash); font-size:15px; }
.article-related { padding-top:24px; border-top:1px solid var(--line); }
@media (max-width:760px) { .article-decision-grid { grid-template-columns:1fr; } }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px var(--gutter);
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-muted);
}
.site-footer__brand { flex: 1 1 280px; display: flex; flex-direction: column; gap: 8px; }
.site-footer__brand .wordmark { font-size: 19px; }
.site-footer__cols { display: flex; gap: 48px; flex-wrap: wrap; }
.site-footer__col { display: flex; flex-direction: column; gap: 8px; }
.site-footer__col h2 { font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.site-footer a { color: var(--ink-muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal { margin-top: 8px; max-width: 44ch; }

/* ---------- Utility ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 30;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 150ms ease-out;
}
.skip-link:focus { top: 12px; color: #fff; }

.mt-auto { margin-top: auto; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .category-deepdives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-category-hero__grid, .tool-test-layout { grid-template-columns: 1fr; }
  .tool-profile-flow ol { grid-template-columns: 1fr; }
  .tool-profile-flow li { padding: 16px 0; }
  .tool-profile-flow li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .workstyle-grid { grid-template-columns: 1fr; }
  .comparison-grid { grid-template-columns: 1fr; }
  .tool-criteria { grid-template-columns: 1fr 1fr; }
  .tool-criteria li:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .tool-criteria li:nth-child(4) { border-top: 1px solid var(--line); }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 8px var(--gutter) 16px;
    white-space: normal;
  }
  .site-nav[data-open='true'] { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    order: 3;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle:hover { border-color: var(--ink-muted); }
  .site-header__inner { position: relative; flex-wrap: nowrap; gap: 12px; }
  .site-header__inner .btn { order: 2; }
}

@media (max-width: 620px) {
  .tool-profile-title { align-items: flex-start; }
  .tool-profile-logo { width: 52px; height: 52px; flex-basis: 52px; }
  .tool-profile-logo img { width: 32px; height: 32px; }
  .tool-profile-alternatives li { grid-template-columns: 1fr; gap: 6px; }
  .comparison-grid > article { padding: 20px; }
  .comparison-grid dl > div { grid-template-columns: 1fr; gap: 3px; }
  .tool-sources ul { columns: 1; }
  .category-deepdive { min-height: 68px; flex-direction: column; gap: 5px; }
  .category-deepdive__name { font-size: 13px; }
  .category-deepdive__meta { width: 100%; display: flex; justify-content: space-between; }
  .tool-criteria { grid-template-columns: 1fr; }
  .tool-criteria li + li { border-left: 0; border-top: 1px solid var(--line); }
  .tool-card { padding: 20px; }
  .tool-card__facts > div { grid-template-columns: 1fr; gap: 3px; }
  .tool-card__footer { align-items: flex-start; flex-direction: column; }
  .site-header__inner .btn--primary { display: none; }
  .rows > div { flex-direction: column; gap: 2px; }
  .rows dd { text-align: left; }
  .byline { gap: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Redaktionell förfining — startsidan och processkomponenten
   ========================================================================== */

/* ---------- Hero: större typografisk kontrast ---------- */

.display--hero {
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 70px);
  /* Luftigare radavstånd än övriga rubriker: swashen behöver plats under raden. */
  line-height: 1.12;
  letter-spacing: -.026em;
  max-width: 15ch;
}

.hero--split { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 48px; align-items: end; }
.hero__lead { max-width: 52ch; margin-bottom: 32px; }

/* Marginalanteckning — ger uppslaget en asymmetri i stället för en centrerad pelare. */
.hero__note { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--accent); }
.hero__note p { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

@media (max-width: 900px) {
  .hero--split { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .hero__note { max-width: 46ch; }
}

/* ---------- Handdragen understrykning under "Praktisk AI" ---------- */

.mark { position: relative; display: inline-block; white-space: nowrap; }
.mark__swash {
  position: absolute;
  left: -.015em;
  bottom: -.03em;
  width: 103%;
  height: .13em;
  overflow: visible;
  pointer-events: none;
}
.mark__swash path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: swash-draw 900ms 260ms cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes swash-draw { to { stroke-dashoffset: 0; } }

/* ---------- Bandrubrik med redaktionell numrering ---------- */

.band-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 0 24px;
  align-items: start;
  margin-bottom: 32px;
}
.band-head--wide { margin-bottom: 48px; }
.band-head__index {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  padding-top: 12px;
  border-top: 1px solid var(--accent);
}
.band-head__main > p { margin-top: 12px; }

@media (max-width: 760px) {
  .band-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .band-head__index { width: 52px; }
}

/* ---------- AIKontoret i siffror ---------- */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0; border-top: 1px solid var(--line); }
.figures > div { padding: 32px 24px 32px 0; border-bottom: 1px solid var(--line); }
.figures > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.figures__value {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.figures__label { display: block; font-size: 15px; line-height: 1.4; color: var(--ink); }
.figures__note { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--ink-muted); }

/* ---------- Processkedjan: numrerade steg och kopplingar ---------- */

.chain {
  counter-reset: step;
  --chain-gap: 6px;
  /* Klipper kopplingsstrecket när ett steg hamnar först eller sist på en rad. */
  overflow: hidden;
}
.chain--lg { --chain-gap: 8px; }
.chain li {
  position: relative;
  counter-increment: step;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.chain li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.chain li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(var(--chain-gap) * -1);
  top: 50%;
  width: var(--chain-gap);
  border-top: 1px solid var(--line);
}
.chain li:hover { border-color: var(--ink-muted); }
/* Grönt steg = en människa godkänner innan flödet går vidare. */
.chain li.chain__human { box-shadow: inset 2px 0 0 var(--accent); }
.chain li.chain__human::before { color: var(--accent); }
.chain--onaccent li::before { color: var(--accent-pale); }
.chain--onaccent li:not(:last-child)::after { border-top-color: var(--accent-line); }

/* ---------- Interaktionstillstånd ---------- */

a.card:hover, .card--interactive:hover { border-color: var(--accent); }
a.card:hover .card-link { color: var(--accent-deep); }
.card-link { transition: color 150ms ease-out; }

/* Kortlänkens pil flyttar sig en aning — rörelse utan att kortet lyfter. */
.card-link .arrow, a.card:hover .arrow { display: inline-block; transition: transform 150ms ease-out; }
a.card:hover .arrow, .card-link:hover .arrow { transform: translateX(3px); }

.list-lined > li a { transition: color 150ms ease-out; }

/* ---------- Sektionsrytm ---------- */

/* Ett något större andrum före de avslutande banden gör övergången tydlig
   utan att lägga till fler behållare. */
.section--wash .section__inner { padding-block: clamp(64px, 9vw, 104px); }

@media (prefers-reduced-motion: reduce) {
  .mark__swash path { animation: none; stroke-dashoffset: 0; }
}

/* ==========================================================================
   Konverteringsvägen: problem → lösning → arbetsflöde → Blueprint → hjälp
   ========================================================================== */

/* ---------- Hero med Blueprint-utdrag ---------- */

.hero--visual { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); align-items: center; gap: 56px; }
.hero__cta-note { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* Utdraget är byggt av sajtens egna komponenter — ingen extern bild att ladda,
   så layouten fungerar även om inget mer än CSS kommer fram. */
.preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 200ms ease-out, border-color 200ms ease-out;
}
.preview__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.preview__kicker { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-muted); }
.preview__title { font-family: var(--serif); font-size: 20px; line-height: 1.25; font-weight: 500; }
.preview__caption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
a.preview:hover { border-color: var(--accent); transform: translateY(-2px); }
a.preview { text-decoration: none; color: var(--ink); }

@media (max-width: 980px) {
  .hero--visual { grid-template-columns: 1fr; gap: 40px; align-items: start; }
}

/* ---------- Kort som uppenbart går att klicka ---------- */

a.card { transition: border-color 150ms ease-out, transform 150ms ease-out; }
a.card:hover { transform: translateY(-2px); }
a.card:active { transform: translateY(0); }

/* ---------- Förtroende och invändningar ---------- */

.assurances { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 32px; }
.assurances > div { padding-top: 14px; border-top: 1px solid var(--accent); }
.assurances h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; }
.assurances p { font-size: 15px; line-height: 1.55; color: var(--ink-muted); max-width: 40ch; }

.faq { border-top: 1px solid var(--line); max-width: 68ch; }
.faq > li { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  background: none;
  border: none;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
}
.faq__q > span:first-child { flex: 1 1 auto; }
.faq__q .sign { flex: none; font-size: 17px; color: var(--ink-muted); }
.faq__q:hover { color: var(--accent); }
.faq__a { padding: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--ink-muted); max-width: 62ch; }

/* ---------- Blueprint-block ---------- */

.blueprint-cta { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.blueprint-cta > div:first-child { flex: 2 1 380px; }
.blueprint-cta__contents { flex: 1 1 240px; display: flex; flex-wrap: wrap; gap: 6px; }
.blueprint-cta__contents li {
  flex: none;
  border: 1px solid var(--line-wash);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.4;
}

/* ---------- Nedre kontextfält ---------- */

.dockbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -1px 3px rgba(16, 36, 31, .08);
  transform: translateY(100%);
  transition: transform 220ms ease-out;
}
.dockbar[data-open='true'] { transform: translateY(0); }
.dockbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.dockbar__text { flex: 1 1 320px; font-size: 15px; line-height: 1.45; }
.dockbar__close {
  flex: none;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}
.dockbar__close:hover { color: var(--ink); border-color: var(--line); }

@media (max-width: 620px) {
  .dockbar__text { flex: 1 1 100%; font-size: 14px; }
  .dockbar__inner { padding: 10px var(--gutter); gap: 10px 16px; }
}

/* ---------- Engångspåminnelse ---------- */

.nudge {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 31;
  width: min(340px, calc(100vw - 48px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 10px rgba(16, 36, 31, .10);
  padding: 20px 22px;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 240ms ease-out, opacity 240ms ease-out;
}
.nudge[data-open='true'] { transform: translateY(0); opacity: 1; }
.nudge__title { font-size: 17px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; }
.nudge__body { font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin-bottom: 16px; }
.nudge__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Läsindikator på långa sidor ---------- */

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 25;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- Ett tydligt nästa steg ---------- */

.next-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.next-step > div { flex: 1 1 420px; }
.next-step__aside { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* ---------- Första kompletta besökarvägen ---------- */

.visitor-path { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.visitor-path__inner { max-width:var(--container); margin:auto; padding:22px var(--gutter) 24px; }
.visitor-path .meta { margin-bottom:12px; }
.visitor-path ol { list-style:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; padding:0; margin:0; background:var(--line); border:1px solid var(--line); }
.visitor-path li { min-width:0; background:#fff; }
.visitor-path a { display:flex; min-height:76px; flex-direction:column; justify-content:center; gap:4px; padding:12px 14px; color:var(--ink-soft); text-decoration:none; }
.visitor-path a:hover, .visitor-path a:focus-visible { color:var(--accent); background:var(--accent-wash); }
.visitor-path li[aria-current='step'] a { color:var(--ink); background:var(--accent-wash); box-shadow:inset 0 3px 0 var(--accent); }
.visitor-path__number { font-size:12px; color:var(--accent); font-variant-numeric:tabular-nums; }
.visitor-path strong { font-size:14px; line-height:1.3; font-weight:500; }

@media (max-width:700px) {
  .visitor-path__inner { padding-top:18px; padding-bottom:18px; overflow:hidden; }
  .visitor-path ol { grid-template-columns:repeat(6,132px); overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; }
  .visitor-path li { scroll-snap-align:start; }
  .visitor-path a { min-height:68px; padding:10px 12px; }
}

/* ---------- Engångsavtäckning av processteg ---------- */

.step-card[data-reveal-step] { opacity: 0; transform: translateY(6px); }
.step-card[data-reveal-step][data-revealed='true'] {
  opacity: 1;
  transform: none;
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .dockbar, .nudge, .preview, a.card { transition: none; }
  a.card:hover, a.preview:hover { transform: none; }
  .step-card[data-reveal-step] { opacity: 1; transform: none; }
}

/* Blueprint: reading surface and downloadable workbook. */
.bp-hero { max-width: var(--container); margin:auto; padding:40px var(--gutter) 56px; }
.bp-hero-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr); gap:64px; align-items:center; }
.bp-hero h1 { font-family:var(--serif); font-size:clamp(36px,4.8vw,58px); line-height:1.08; letter-spacing:-.025em; max-width:19ch; margin:12px 0 22px; }
.bp-hero .lead { max-width:58ch; }
.bp-hero .btn-row { margin:28px 0 14px; align-items:center; }
.bp-summary { background:var(--accent-deep); color:#fff; padding:32px; border-radius:var(--radius-md); }
.bp-summary .meta { color:var(--accent-pale); }
.bp-summary h2 { font-family:var(--serif); font-size:32px; line-height:1.1; margin:16px 0 24px; }
.bp-summary ol { list-style:decimal; padding-left:22px; margin:0 0 24px; }
.bp-summary li { padding:7px 0; border-bottom:1px solid #ffffff30; }
.bp-layout { max-width:var(--container); margin:auto; display:grid; grid-template-columns:220px minmax(0,1fr); gap:64px; padding:0 var(--gutter) 72px; }
.bp-toc { align-self:start; position:sticky; top:96px; padding-top:30px; }
.bp-toc nav { display:flex; flex-direction:column; margin-bottom:24px; }
.bp-toc a { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:15px; text-decoration:none; }
.bp-toc a:hover, .bp-toc a:focus-visible { color:var(--accent); text-decoration:underline; }
.bp-toc a span { color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.bp-content { min-width:0; }
.bp-section { border-top:1px solid var(--line-wash); padding:32px 0 48px; scroll-margin-top:88px; }
.bp-section h2 { font-family:var(--serif); font-size:clamp(28px,3vw,36px); line-height:1.16; margin:8px 0 20px; }
.bp-section h3 { font-size:18px; font-weight:500; line-height:1.4; }
.bp-section p { margin-top:10px; }
.bp-section .kicker { margin:0; }
.bp-options { margin:24px 0; }
.bp-options article { background:var(--surface); padding:24px; border:1px solid var(--line); }
.bp-options article+article { border-top:0; }
.bp-options p, .bp-roles p { font-size:16px; }
.bp-note { background:var(--accent-wash); border-left:3px solid var(--accent); padding:20px 24px; font-size:16px; }
.bp-process { list-style:none; padding:0; margin:24px 0 0; }
.bp-process li { display:grid; grid-template-columns:42px minmax(0,1fr); gap:20px; padding:24px 0; border-bottom:1px solid var(--line); }
.bp-step-no { font-family:var(--serif); font-size:30px; line-height:1.2; color:var(--accent); }
.bp-control { color:var(--ink-soft); font-size:15px; border-left:2px solid var(--accent-line); padding-left:14px; }
.bp-example { background:var(--surface); border:1px solid var(--line); padding:28px; margin:24px 0; }
.bp-example h3 { margin-top:20px; }
.bp-example .meta { margin:0; }
.bp-prompt { border:1px solid var(--line); background:var(--surface); }
.bp-prompt-head { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line); }
.bp-prompt pre { font:14px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; padding:24px; margin:0; }
.bp-prompt [data-copy-status]:not(:empty) { padding:0 24px 18px; }
.bp-prompt [data-copy-status-for]:not(:empty) { padding:0 24px 18px; }
.bp-code-note { padding:0 24px 20px; margin:0; }
.bp-roles { margin:24px 0; }
.bp-roles>div { padding:18px 0; border-bottom:1px solid var(--line); }
.bp-stack-flow { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:24px 0; padding:14px; background:var(--accent-wash); border:1px solid var(--line); }
.bp-stack-flow span { background:var(--surface); border:1px solid var(--line); padding:7px 9px; font-size:13px; }
.bp-stack-flow b { color:var(--accent); }
.bp-stack-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:24px 0; background:var(--line); border:1px solid var(--line); }
.bp-stack-grid article { background:var(--surface); padding:22px; }
.bp-stack-grid article:last-child { grid-column:1/-1; }
.bp-stack-grid .meta { margin:0 0 5px; }
.bp-stack-grid h3 { margin:0; }
.bp-stack-grid p:last-child { font-size:15px; }
.bp-env { border:1px solid var(--line); margin:20px 0; }
.bp-env>div { display:grid; grid-template-columns:minmax(180px,0.6fr) minmax(0,1.4fr); gap:18px; padding:13px 16px; border-bottom:1px solid var(--line); }
.bp-env>div:last-child { border-bottom:0; }
.bp-env code { overflow-wrap:anywhere; color:var(--accent); }
.bp-env span { font-size:15px; }
.bp-checklist { padding-left:24px; margin:28px 0; }
.bp-checklist li { margin:22px 0; padding-left:6px; }
.bp-checks { list-style:none; margin:24px 0; padding:0; }
.bp-checks li { position:relative; padding:14px 0 14px 30px; border-bottom:1px solid var(--line); }
.bp-checks li::before { content:''; position:absolute; left:0; top:21px; width:13px; height:13px; border:1px solid var(--accent); border-radius:2px; }
.bp-worksheet { background:var(--surface); border:1px solid var(--line); padding:4px 24px; margin:24px 0; }
.bp-worksheet>div { padding:18px 0; border-bottom:1px solid var(--line); }
.bp-worksheet>div:last-child { border:0; }
.bp-worksheet p { color:var(--ink-muted); font-size:15px; margin-top:4px; }
.bp-section .btn-row { margin:24px 0 14px; }
.bp-sources h2 { font-size:25px; }
.bp-sources p { font-size:15px; color:var(--ink-soft); }
.bp-download-card .btn-row { margin:20px 0 12px; }
.bp-section-intro { max-width:64ch; font-size:18px; color:var(--ink-soft); }
.bp-outcome-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:24px 0; background:var(--line); border:1px solid var(--line); }
.bp-outcome-grid article { background:var(--surface); padding:22px; }
.bp-outcome-grid .meta { margin:0 0 6px; }
.bp-outcome-grid p:last-child { margin:0; font-size:16px; }
.bp-requirements { margin:24px 0; border-top:1px solid var(--line); }
.bp-requirements article { display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.bp-requirements article>span { display:grid; place-items:center; width:24px; height:24px; margin-top:2px; border-radius:50%; color:#fff; background:var(--accent); font-weight:600; }
.bp-requirements h3, .bp-requirements p { margin:0; }
.bp-requirements p { margin-top:4px; color:var(--ink-soft); font-size:15px; }
.bp-expected { margin:14px 0 0; padding:18px 20px; background:var(--accent-wash); border-left:3px solid var(--accent); }
.bp-expected .meta { margin:0 0 5px; color:var(--accent); }
.bp-expected p:last-child { margin:0; font-size:15px; }
.bp-recipe-step { margin:28px 0 42px; padding-bottom:2px; }
.bp-recipe-step>.kicker { color:var(--accent); }
.bp-recipe-step>h3 { margin:6px 0 14px; font-family:var(--serif); font-size:27px; font-weight:500; }
.bp-recipe-step .bp-prompt { margin-top:14px; }
.bp-test-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:24px 0 28px; }
.bp-test-grid article { padding:20px; border:1px solid var(--line); background:var(--surface); }
.bp-test-grid .meta { margin:0 0 12px; color:var(--accent); }
.bp-test-grid p { margin:8px 0 0; font-size:15px; }
.bp-activation-list { list-style:none; padding:0; margin:24px 0 32px; border-top:1px solid var(--line); }
.bp-activation-list li { display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.bp-activation-list li>span { color:var(--accent); font-family:var(--serif); font-size:24px; }
.bp-activation-list h3, .bp-activation-list p { margin:0; }
.bp-activation-list p { margin-top:5px; color:var(--ink-soft); font-size:15px; }
.bp-troubleshooting { margin:24px 0; border-top:1px solid var(--line); }
.bp-troubleshooting details { border-bottom:1px solid var(--line); }
.bp-troubleshooting summary { cursor:pointer; padding:18px 36px 18px 0; font-size:17px; font-weight:500; }
.bp-troubleshooting details p { max-width:66ch; margin:0; padding:0 0 20px; color:var(--ink-soft); font-size:15px; }
.bp-done-list { list-style:none; padding:0; margin:24px 0; }
.bp-done-list li { position:relative; padding:15px 0 15px 38px; border-bottom:1px solid var(--line); }
.bp-done-list li::before { content:'✓'; position:absolute; left:0; top:12px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; background:var(--accent); font-weight:600; }
.bp-final-action { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:32px; padding:26px; background:var(--accent-deep); color:#fff; }
.bp-final-action>div:first-child { flex:1 1 360px; }
.bp-final-action .meta { color:var(--accent-pale); margin:0 0 6px; }
.bp-final-action h3, .bp-final-action p { margin:0; }
.bp-final-action p:last-child { margin-top:6px; color:#dce8e3; }
.bp-final-action .btn-row { margin:0; }
.bp-service-action { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:16px; padding:26px; border:1px solid #d8caa9; background:#f7f0df; }
.bp-service-action>div { flex:1 1 430px; }
.bp-service-action .meta { margin:0 0 6px; color:#876529; }
.bp-service-action h3, .bp-service-action p { margin:0; }
.bp-service-action p:last-child { margin-top:6px; color:var(--ink-soft); }

/* ---------- Implementation service ---------- */
.service-hero { padding:clamp(48px,8vw,96px) var(--gutter); max-width:var(--container); margin:0 auto; }
.service-hero__grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); gap:clamp(36px,7vw,88px); align-items:end; }
.service-hero h1 { max-width:14ch; margin-top:24px; }
.service-hero .lead { max-width:59ch; margin-top:24px; }
.service-hero .btn-row { margin-top:28px; }
.service-summary { padding:28px; background:var(--accent-deep); color:#fff; }
.service-summary .meta { color:var(--accent-pale); }
.service-summary h2 { margin:8px 0 18px; font-family:var(--serif); font-size:30px; line-height:1.15; font-weight:400; }
.service-summary li { padding:11px 0; border-top:1px solid rgba(255,255,255,.2); }
.service-summary p:last-child { margin-top:18px; color:#dce8e3; }
.service-steps { counter-reset:service-step; }
.service-step { position:relative; padding:28px 28px 28px 76px; border:1px solid var(--line); background:var(--surface); }
.service-step::before { counter-increment:service-step; content:counter(service-step, decimal-leading-zero); position:absolute; left:24px; top:26px; color:var(--accent); font-weight:600; }
.service-step h3 { font-family:var(--serif); font-size:24px; line-height:1.2; margin-bottom:8px; }
.service-scope { border-top:1px solid var(--line); }
.service-scope li { display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.service-scope li::before { content:'✓'; color:var(--accent); font-weight:600; }
.service-scope--limits li::before { content:'—'; color:var(--ink-muted); }
.service-example { padding:clamp(28px,5vw,48px); background:var(--accent-deep); color:#fff; }
.service-example .meta { color:var(--accent-pale); }
.service-example h2 { color:#fff; margin:8px 0 16px; }
.service-example p { color:#dce8e3; }
.service-example__flow { display:grid; grid-template-columns:repeat(4,1fr); margin-top:28px; border:1px solid rgba(255,255,255,.25); }
.service-example__flow div { padding:20px; border-right:1px solid rgba(255,255,255,.25); }
.service-example__flow div:last-child { border-right:0; }
.service-example__flow span { display:block; color:var(--accent-pale); font-size:13px; margin-bottom:6px; }
.build-request { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(36px,7vw,88px); align-items:start; }
.build-form { padding:28px; border:1px solid var(--line); background:var(--surface); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.form-field { display:grid; gap:7px; }
.form-field--wide { grid-column:1/-1; }
.form-field label, .form-field legend { font-weight:600; font-size:15px; }
.form-field input, .form-field select, .form-field textarea { width:100%; min-height:48px; padding:11px 12px; border:1px solid var(--line-wash); border-radius:var(--radius-sm); background:#fff; color:var(--ink); font:inherit; }
.form-field textarea { min-height:118px; resize:vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--accent); outline:2px solid var(--accent-wash); outline-offset:1px; }
.build-form__actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:22px; }
.request-result { margin-top:22px; padding:22px; border:1px solid var(--accent-line); background:var(--accent-wash); }
.request-result h3 { font-family:var(--serif); font-size:24px; margin-bottom:6px; }
.request-result .btn { margin-top:16px; }
.request-preview { margin-top:16px; padding:16px; border:1px solid var(--line-wash); background:#fff; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.55; }
@media (max-width:800px) {
  .service-hero__grid, .build-request { grid-template-columns:1fr; }
  .service-example__flow { grid-template-columns:1fr 1fr; }
  .service-example__flow div:nth-child(2) { border-right:0; }
  .service-example__flow div:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.25); }
}
@media (max-width:560px) {
  .form-grid, .service-example__flow { grid-template-columns:1fr; }
  .service-example__flow div { border-right:0; border-bottom:1px solid rgba(255,255,255,.25); }
  .service-example__flow div:last-child { border-bottom:0; }
  .build-form { padding:20px; }
}
@media (max-width:900px) {
  .bp-hero-grid { gap:28px; }
  .bp-layout { grid-template-columns:180px minmax(0,1fr); gap:32px; }
}
@media (max-width:700px) {
  .bp-hero { padding-top:24px; }
  .bp-hero-grid, .bp-layout { grid-template-columns:1fr; gap:24px; }
  .bp-summary { padding:24px; }
  .bp-toc { position:static; padding-top:0; }
  .bp-toc nav { margin-bottom:12px; }
  .bp-section { padding:28px 0 36px; }
  .bp-process li { grid-template-columns:32px minmax(0,1fr); gap:12px; }
  .bp-example, .bp-note, .bp-prompt-head, .bp-worksheet { padding-left:18px; padding-right:18px; }
  .bp-prompt pre { padding:18px; }
  .bp-stack-grid { grid-template-columns:1fr; }
  .bp-outcome-grid, .bp-test-grid { grid-template-columns:1fr; }
  .bp-stack-grid article:last-child { grid-column:auto; }
  .bp-env>div { grid-template-columns:1fr; gap:5px; }
}
@media print {
  .blueprint-page .bp-toc, .blueprint-page .btn-row, .blueprint-page button { display:none !important; }
  .blueprint-page .bp-layout, .blueprint-page .bp-hero-grid { display:block; }
  .blueprint-page .bp-summary { color:#10241F; background:#fff; border:1px solid #ccc; margin-top:24px; }
  .blueprint-page .bp-summary .meta { color:#3D4E49; }
  .blueprint-page .bp-section { break-inside:auto; }
  .blueprint-page .bp-process li, .blueprint-page .bp-options article { break-inside:avoid; }
}

/* Blueprint diagrams: shared vector art, with a vertical mobile composition. */
.bp-figure { margin:28px 0 32px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); }
.bp-figure picture { display:block; aspect-ratio:var(--desktop-ratio); }
.bp-figure img { display:block; width:100%; height:100%; object-fit:contain; }
.bp-figure figcaption { border-top:1px solid var(--line); padding-top:16px; margin-top:12px; color:var(--ink-soft); font-size:15px; line-height:1.6; }
@media (max-width:1100px) { .bp-figure picture { max-width:420px; margin:auto; aspect-ratio:var(--mobile-ratio); } }
@media (max-width:700px) { .bp-figure { padding:16px 12px; } }
@media print { .bp-figure { break-inside:avoid; } }