/* hittalån.se 2026 — design from Lovable, plain CSS (no Tailwind/build).
   Sections: 1 tokens · 2 base · 3 layout · 4 components · 5 sections · 6 utilities */

/* 1. Tokens ------------------------------------------------------------ */
:root {
  --forest: oklch(0.3 0.064 175.5);
  --forest-soft: oklch(0.44 0.025 250);
  --signal: oklch(0.5 0.145 156.5);
  --mint: oklch(0.94 0.055 156.5);
  --paper: oklch(0.97 0.008 250);
  --ink: oklch(0.25 0.025 250);
  --surface: oklch(0.955 0.01 250);
  --line: oklch(0.86 0.014 250);
  --card: #fff;
  --danger: oklch(0.577 0.245 27.325);
  --radius: .5rem;
  --radius-sm: .375rem;
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --wrap: 80rem;
  --gutter: 1rem;
}
@media (min-width: 640px) { :root { --gutter: 1.5rem; } }

/* 2. Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 400 1rem/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
main { flex: 1; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.2; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
th { font-weight: 700; text-align: left; }
[hidden] { display: none !important; }
a, button, input, select, summary { outline-offset: 3px; }
:focus-visible { outline: 2px solid var(--signal); }
[id] { scroll-margin-top: 5rem; }

/* 3. Layout ------------------------------------------------------------ */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sec-in { padding-block: 3rem; background: linear-gradient(var(--line), var(--line)) bottom center / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.sec-last { background: none; }
.sec-flush { padding-block: 1.25rem; }
.sec-head { max-width: 48rem; }
.sec-head h2 { margin-top: .5rem; font-size: 1.875rem; font-weight: 700; }
.sec-head .lead { margin-top: .75rem; line-height: 1.625; color: var(--forest-soft); }
.eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--signal); }
.eyebrow-muted { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: var(--forest-soft); }
@media (min-width: 1024px) { .sec-in { padding-block: 3.5rem; } }

.grid-2, .grid-3, .grid-charts { display: grid; gap: 1.25rem; min-width: 0; }
.grid-2 > *, .grid-charts > * { min-width: 0; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: .75rem; } }
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
  .grid-charts { grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); }
}

/* 4. Components -------------------------------------------------------- */
.ic { width: 1rem; height: 1rem; flex-shrink: 0; }
.ic-xs { width: .8rem; height: .8rem; }
.ic-sm { width: .875rem; height: .875rem; }
.ic-lg { width: 1.25rem; height: 1.25rem; }
.ic-xl { width: 1.75rem; height: 1.75rem; }
.star { fill: var(--signal); color: var(--signal); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.25rem; padding: 0 1rem; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 500; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; border: 1px solid transparent; }
.btn-sm { height: 2rem; padding: 0 .75rem; font-size: .75rem; }
.btn-lg { height: 2.75rem; padding: 0 2rem; }
.btn-primary { background: var(--forest); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--signal); }
.btn-signal { background: var(--signal); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn-signal:hover { background: var(--forest); }
.btn-outline { border-color: var(--line); background: var(--paper); box-shadow: var(--shadow-sm); }
.btn-outline:hover { background: var(--signal); color: var(--paper); }
.btn-outline[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.btn-ghost:hover { background: var(--surface); }
.btn:disabled { cursor: default; }
.btn .ic { width: 1rem; height: 1rem; }
.link-btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--forest-soft); }
.link-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.icon-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); }
.icon-btn:hover { background: var(--surface); }
.text-link { font-weight: 600; color: var(--ink); text-decoration: underline; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.chips-label { margin-right: .25rem; font-size: .875rem; font-weight: 600; color: var(--forest-soft); }
.chips-sep { display: none; width: 1px; height: 1.25rem; margin-inline: .5rem; background: var(--line); }
@media (min-width: 640px) { .chips-sep { display: block; } }
.chip { display: inline-block; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .875rem; font-weight: 500; }
.chip:hover { border-color: var(--signal); color: var(--signal); }
.chip[aria-pressed="true"] { border-color: var(--signal); background: var(--signal); color: var(--paper); }

.pill-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .75rem; font-weight: 600; color: var(--forest-soft); }
.dot { width: .375rem; height: .375rem; border-radius: 50%; background: var(--signal); }
.tag { flex-shrink: 0; padding: .1rem .5rem; border-radius: .25rem; background: var(--signal); color: var(--paper); font-size: .625rem; font-weight: 600; }

.panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 1.25rem; min-width: 0; }
@media (min-width: 640px) { .card { padding: 1.5rem; } }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.panel-foot { padding: .75rem 1rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--forest-soft); }
.bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--line); }
.bar-muted { align-items: flex-end; padding: 1rem; background: var(--surface); }
.pad { padding: 1rem; }
@media (min-width: 640px) { .pad { padding: 1.25rem; } }

.select { padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); font-size: .875rem; font-weight: 500; max-width: 100%; }
h1, h2, h3, h4 { overflow-wrap: anywhere; }
.field-label { display: block; font-size: .875rem; font-weight: 700; }
.field-label .select { display: block; margin-top: .25rem; }
.range { width: 100%; margin-top: 1rem; accent-color: var(--signal); }
.range-ends { display: flex; justify-content: space-between; margin-top: .25rem; font-size: .75rem; color: var(--forest-soft); }

/* Tables */
.tbl { font-size: .875rem; text-align: left; }
.tbl thead { background: var(--surface); font-size: .75rem; text-transform: uppercase; color: var(--forest-soft); }
.tbl th, .tbl td { padding: 1rem; vertical-align: middle; }
.tbl thead th { padding-block: .75rem; }
.tbl tbody tr + tr { border-top: 1px solid var(--line); }
.tbl .r { text-align: right; }
.tbl-mid th, .tbl-mid td { padding: .75rem; }
.tbl-mid { min-width: 640px; }
.tbl-fixed { table-layout: fixed; }
.tbl-fixed th, .tbl-fixed td { padding: .75rem; overflow-wrap: anywhere; }
.tbl-fixed thead { background: none; border-bottom: 1px solid var(--line); text-transform: none; font-size: .875rem; color: var(--ink); }
.th-muted { font-size: .75rem; text-transform: uppercase; color: var(--forest-soft); }
.th-side { background: var(--surface); font-size: .75rem; text-transform: uppercase; color: var(--forest-soft); }
.w-third { width: 33.333%; }
.tbl-rowhead th { background: var(--surface); padding: .75rem 1rem; }
.tbl-rowhead td { padding: .75rem 1rem; }
.scroll-x { overflow-x: auto; }
.tbl-wide { min-width: 780px; }
.tbl-wide th, .tbl-wide td { padding-inline: .5rem; }
.tbl-wide th:first-child, .tbl-wide td:first-child { padding-left: 1rem; }
.tbl-wide thead th button { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-weight: 700; text-transform: uppercase; }
.tbl-wide thead th.r button { flex-direction: row-reverse; }
.tbl-wide thead th button:hover, .tbl-wide thead th[aria-sort="ascending"] button, .tbl-wide thead th[aria-sort="descending"] button { color: var(--ink); }
.sort-ic::after { content: "↕"; font-size: .7rem; opacity: .5; }
th[aria-sort="ascending"] .sort-ic::after { content: "▲"; opacity: 1; color: var(--forest); }
th[aria-sort="descending"] .sort-ic::after { content: "▼"; opacity: 1; color: var(--forest); }
/* stack rows on mobile */
@media (max-width: 639px) {
  .tbl-stack thead { display: none; }
  .tbl-stack tr, .tbl-stack th, .tbl-stack td { display: block; }
  .tbl-stack tr { padding: 1rem; }
  .tbl-stack th, .tbl-stack td { padding: 0; }
  .tbl-stack td { margin-top: .5rem; }
  .tbl-stack td + td { margin-top: .25rem; }
  .tbl-rowhead tr, .tbl-rowhead th, .tbl-rowhead td { display: block; }
}
@media (min-width: 640px) { .tbl-rowhead th { width: 11rem; } }
/* rows → cards below lg */
@media (max-width: 1023px) {
  .tbl-cards thead { display: none; }
  .tbl-cards tbody { display: grid; gap: .75rem; }
  .tbl-cards tbody tr + tr { border-top: 1px solid var(--line); }
  .tbl-cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
  .tbl-cards th, .tbl-cards td { padding: 0; }
  .tbl-cards td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--forest-soft); }
  .tbl-cards .card-title { font: 700 1.125rem var(--font-display); align-self: center; }
  .tbl-cards .card-badge { justify-self: end; align-self: center; padding: .25rem .6rem; border-radius: 999px; background: var(--card); font-size: .75rem; color: var(--ink); }
  .tbl-cards .card-badge::before { display: none; }
  .tbl-cards .card-wide { grid-column: 1 / -1; padding-top: .6rem; border-top: 1px solid var(--line); }
}
@media (min-width: 1024px) { .tbl-cards { min-width: 850px; } .tbl-cards tbody tr { background: var(--card); } }

.yn { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.with-ic { display: inline-flex; gap: .5rem; }
.with-ic .ic { margin-top: .15rem; }

/* Logos */
.logo-box { display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; overflow: hidden; padding: .35rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.logo-box img { width: 100%; height: 100%; object-fit: contain; }
.logo-sm, .logo-md, .logo-lg { flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); object-fit: contain; }
.logo-sm { width: 2.5rem; height: 2.5rem; padding: .25rem; }
.logo-md { width: 3rem; height: 3rem; padding: .35rem; }
.logo-lg { width: 3.5rem; height: 3.5rem; padding: .5rem; background: var(--surface); }

/* Accordion (FAQ) — native <details> */
.acc { padding-inline: 1.25rem; }
@media (min-width: 640px) { .acc { padding-inline: 1.5rem; } }
.acc details + details { border-top: 1px solid var(--line); }
.acc summary, .cat-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.acc summary { padding-block: 1.25rem; font: 600 1rem var(--font-display); }
summary::-webkit-details-marker { display: none; }
.acc-ic { color: var(--forest-soft); transition: transform .2s; }
details[open] > summary .acc-ic { transform: rotate(180deg); }
.acc details p { max-width: 48rem; padding-bottom: 1.25rem; line-height: 1.625; color: var(--forest-soft); }

/* Dialogs */
dialog { border: 0; padding: 0; color: var(--ink); background: var(--card); }
dialog::backdrop { background: rgb(0 0 0 / .8); }
.modal { width: min(28rem, calc(100% - 2rem)); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-md); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.modal-head h2 { font-size: 1.125rem; font-weight: 700; }
.modal-body { margin-top: 1rem; font-size: .875rem; line-height: 1.625; color: var(--forest-soft); }
.modal-body p + p { margin-top: .75rem; }
.sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: 88%; max-width: 24rem; height: 100%; max-height: none; display: none; flex-direction: column; border-left: 1px solid var(--line); }
.sheet[open] { display: flex; animation: slide-in .25s ease-out; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.sheet-head img { height: 2.25rem; width: auto; }
.sheet-nav { flex: 1; padding: 1rem .75rem; }
.sheet-nav a { display: flex; justify-content: space-between; align-items: center; min-height: 3rem; padding: .75rem; border-bottom: 1px solid var(--line); font-weight: 600; }
.sheet-nav a:hover { background: var(--surface); color: var(--signal); }
.sheet-nav .ic { color: var(--forest-soft); }
.sheet-foot { padding: 1.25rem; border-top: 1px solid var(--line); background: var(--surface); }
.sheet-foot .btn { width: 100%; }
.sheet-foot p { margin-top: .75rem; text-align: center; font-size: .75rem; color: var(--forest-soft); }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }

/* Charts */
.chart { width: 100%; height: auto; margin-top: 1.25rem; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--forest-soft); font-size: 11px; font-family: var(--font-body); }
.chart .axis { fill: var(--forest-soft); font-size: 11px; font-family: var(--font-body); }
.chart .pt { fill: var(--signal); }
.chart .pt:hover { r: 9; }
.bar-forest { fill: var(--forest); } .bar-signal { fill: var(--signal); } .bar-soft { fill: var(--forest-soft); }
.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; font-size: .75rem; font-weight: 600; }
.legend span, .donut-legend dt { display: inline-flex; align-items: center; gap: .5rem; }
.sw { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; }
.bg-forest { background: var(--forest); } .bg-signal { background: var(--signal); } .bg-soft { background: var(--forest-soft); }
.donut { position: relative; width: 13rem; max-width: 100%; aspect-ratio: 1; margin: 1.25rem auto 0; border-radius: 50%; }
.donut::after { content: ""; position: absolute; inset: 17%; border-radius: 50%; background: var(--card); }
.donut-legend { margin-top: 1.25rem; font-size: .875rem; }
.donut-legend div { display: flex; justify-content: space-between; padding-block: .6rem; }
.donut-legend div + div { border-top: 1px solid var(--line); }
.donut-legend dd { font-weight: 700; }

/* Steps / timelines */
.timeline { margin-top: 1.5rem; padding-left: 1.25rem; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.timeline li:first-child { padding-top: 0; } .timeline li:last-child { border: 0; }
.timeline li::before { content: ""; position: absolute; left: -1.6rem; top: 1.25rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--signal); }
.timeline time { font-size: .75rem; font-weight: 600; color: var(--forest-soft); }
.timeline-empty { margin-top: 1.5rem; padding: 1rem 0 1rem 1.25rem; border-left: 2px solid var(--line); }
.timeline-empty p + p { margin-top: .5rem; }

/* 5. Sections ---------------------------------------------------------- */
/* Header */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .95); backdrop-filter: blur(12px); }
.site-header-in { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.logo img { height: 2.25rem; width: auto; }
.main-nav { display: none; gap: 1.75rem; font-size: .875rem; font-weight: 500; color: var(--forest-soft); }
.main-nav a:hover { color: var(--signal); }
.site-header-actions { display: flex; align-items: center; gap: .5rem; }
@media (min-width: 640px) { .logo img { height: 2.5rem; } }
@media (min-width: 1024px) { .main-nav { display: flex; } .menu-btn { display: none; } }

/* Footer */
.site-footer { background: var(--ink); color: var(--card); }
.site-footer .wrap { padding-block: 3rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer-brand { font: 700 1.125rem var(--font-display); }
.footer-about { max-width: 20rem; margin-top: .75rem; font-size: .875rem; line-height: 1.625; color: rgb(255 255 255 / .7); }
.footer-warn { margin-top: 1rem; font-size: .75rem; font-weight: 600; color: rgb(255 255 255 / .5); }
.footer-h { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: rgb(255 255 255 / .5); font-family: var(--font-body); }
.footer-links { margin-top: 1rem; display: grid; gap: .6rem; font-size: .875rem; }
.footer-links a { color: rgb(255 255 255 / .8); transition: color .15s; }
.footer-links a:hover { color: var(--signal); }
.footer-bottom { display: flex; flex-direction: column; gap: .75rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .15); font-size: .75rem; color: rgb(255 255 255 / .5); }
.footer-bottom p + p { color: rgb(255 255 255 / .7); }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }

/* Hero */
.hero { border-bottom: 1px solid var(--line); background: var(--card); }
.hero-in { max-width: var(--wrap); padding-block: 3rem; text-align: center; }
.hero-in > * { margin-inline: auto; }
.hero h1 { max-width: 56rem; margin-top: 1.25rem; font-size: 2.25rem; font-weight: 800; line-height: 1.03; }
.hero-lead { max-width: 65ch; margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.625; color: var(--forest-soft); }
.hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.hero-narrow { max-width: 48rem; }
.hero-narrow h1 { font-weight: 700; }
@media (min-width: 640px) { .hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .hero-in { padding-block: 4rem; } .hero h1 { font-size: 3.75rem; } .hero-narrow h1 { font-size: 3rem; } }

/* Loan list */
.list-meta { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-block: .75rem; font-size: .75rem; color: var(--forest-soft); }
.list-top { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.list-top-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.list-top .chips { margin-top: 1rem; }
.loan-cols { display: none; }
.loan-row { padding: 1.25rem 1rem; }
.loan-id { display: flex; align-items: center; gap: .75rem; }
.loan-name { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.loan-name strong { font: 700 1.125rem var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loan-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.loan-facts > div { padding: .6rem .75rem; background: var(--card); }
.loan-facts .span2 { grid-column: span 2; }
.loan-facts dt { font-size: .7rem; font-weight: 600; text-transform: uppercase; color: var(--forest-soft); }
.loan-facts dd { display: flex; align-items: center; gap: .35rem; margin-top: .25rem; font-size: .875rem; font-weight: 500; }
.loan-facts dd.strong { font-family: var(--font-display); font-weight: 700; }
.loan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; }
.loan-actions .btn { height: 2.25rem; font-size: .875rem; }
.loan-rows > li + li, .loan-placeholder { border-top: 1px solid var(--line); }
.loan-detail { padding: 1.25rem; border-top: 1px solid var(--line); }
.detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
.detail-head h3 { font-size: 1rem; font-weight: 700; }
.highlights { display: grid; gap: .5rem; margin-top: 1rem; }
.hl { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .75rem; color: var(--forest-soft); }
.hl strong { margin-left: auto; font: 700 .875rem var(--font-display); color: var(--ink); }
.fact-grid { display: grid; gap: 1px; margin-top: .75rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.fact-grid > div { padding: .75rem; background: var(--card); }
.fact-grid dt { display: flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--forest-soft); }
.fact-grid dd { margin-top: .25rem; font-size: .875rem; font-weight: 500; line-height: 1.375; }
.fact-grid dd.strong { font-weight: 600; font-size: 1rem; }
.fact-grid-2 { grid-template-columns: 1fr 1fr; margin: 0; align-self: start; }
.detail-notes { display: grid; gap: .75rem; margin-top: .75rem; }
.note { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .75rem; line-height: 1.625; color: var(--forest-soft); }
.note strong { font-family: var(--font-display); color: var(--ink); }
.note-warn { display: flex; gap: .6rem; align-items: flex-start; }
.note-warn .ic { margin-top: .15rem; }
/* KOVFS 2025:1 – svart text på vit botten, röd symbol minst 3 textrader hög */
.kovfs-warn { display: flex; gap: .6rem; align-items: flex-start; background: #fff; color: #000; line-height: 1.35; }
.kovfs-warn strong { color: #000; }
.kovfs-warn a { color: #000; text-decoration: underline; }
.kovfs-ic { width: 3.1rem; height: 3.1rem; color: #d00; stroke-width: 2.25; } /* 3 × .75rem × 1.35 ≈ 3.04rem */
.detail-cta { width: 100%; margin-top: 1rem; }
.loan-placeholder { display: flex; align-items: center; gap: .75rem; padding: 1.25rem; background: var(--surface); font-size: .875rem; }
.ph-box { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--card); }
.list-foot { padding: 1rem; border-top: 1px solid var(--line); text-align: center; }
.empty { padding: 1.5rem; text-align: center; color: var(--forest-soft); }
@media (min-width: 640px) {
  .highlights, .fact-grid { grid-template-columns: 1fr 1fr; }
  .detail-cta { width: auto; padding-inline: 2.5rem; }
}
@media (min-width: 768px) {
  .loan-cols, .loan-row { display: grid; grid-template-columns: 1.55fr 1.1fr .9fr .85fr 1.05fr .7fr 9.5rem; gap: 1rem; align-items: center; }
  .loan-cols { padding: .6rem 1.25rem; border-bottom: 1px solid var(--line); font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--forest-soft); }
  .loan-row { padding: 1rem 1.25rem; }
  .loan-facts { display: contents; }
  .loan-facts > div, .loan-facts .span2 { padding: 0; background: none; grid-column: auto; }
  .loan-facts dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .loan-facts dd { margin: 0; }
  .loan-facts dd.strong { font-family: var(--font-display); }
  .loan-actions { display: flex; margin: 0; }
  .loan-actions .btn { height: 2rem; font-size: .75rem; }
  .loan-name strong { font-size: 1rem; white-space: normal; }
  .logo-box { width: 2.75rem; height: 2.75rem; }
  .md-hide { display: none; }
}
@media (min-width: 1024px) {
  .highlights, .fact-grid:not(.fact-grid-2):not(.fact-grid-3) { grid-template-columns: repeat(4, 1fr); }
  .detail-notes { grid-template-columns: 1.6fr 1fr; }
}

/* Tabs (need finder) */
.tab-bar { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tab { flex: 0 0 auto; min-width: 11rem; padding: 1rem; text-align: left; border-bottom: 2px solid transparent; color: var(--forest-soft); }
.tab + .tab { border-left: 1px solid var(--line); }
.tab:hover { background: var(--surface); color: var(--ink); }
.tab[aria-selected="true"] { border-bottom-color: var(--signal); background: var(--surface); color: var(--ink); }
.tab-no { display: block; font-size: .65rem; font-weight: 700; text-transform: uppercase; color: var(--forest-soft); }
.tab-label { display: block; margin-top: .25rem; font: 700 1rem var(--font-display); }
.tab-panel-title { padding: 1rem 1rem .25rem; }
.tab-panel { overflow: hidden; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--card); }
@media (min-width: 1024px) { .tab-bar { display: grid; grid-template-columns: repeat(5, 1fr); } .tab { min-width: 0; } }

/* Check list / quick guide */
.check-list { display: grid; gap: .5rem; }
.check-list li { display: flex; align-items: center; gap: .5rem; }
@media (min-width: 768px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
.soon-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .75rem; font-size: .875rem; color: var(--forest-soft); }
.soon-row strong { color: var(--ink); }
.soon-link { font-weight: 600; color: var(--ink); text-decoration: underline dotted; }

/* Route cards */
.split-cards { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.split-cards article { padding: 1.25rem; background: var(--card); }
.split-cards p { margin-top: .5rem; line-height: 1.625; }
@media (min-width: 640px) { .split-cards article { padding: 1.5rem; } }
@media (min-width: 768px) { .split-cards { grid-template-columns: 1fr 1fr; } }
.soon-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .875rem; }
.soon-chips strong { margin-right: .25rem; }
.soon-chips span { padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); font-weight: 500; color: var(--forest-soft); }

/* Matcher */
.matcher-groups { display: grid; }
.matcher-groups > div { padding: 1.25rem; }
.matcher-groups > div + div { border-top: 1px solid var(--line); }
@media (min-width: 640px) {
  .matcher-groups { grid-template-columns: 1fr 1fr; }
  .matcher-groups > div { padding: 1.5rem; }
  .matcher-groups > div:nth-child(2) { border-top: 0; }
  .matcher-groups > div:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .matcher-groups { grid-template-columns: repeat(4, 1fr); }
  .matcher-groups > div + div { border-top: 0; border-left: 1px solid var(--line); }
}
.empty-state { padding: 2rem; text-align: center; }
.empty-state .ic { margin: 0 auto .5rem; }

/* Head to head */
.h2h-pick { display: grid; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.h2h-vs { display: none; padding-bottom: .5rem; font-size: .875rem; font-weight: 700; color: var(--forest-soft); }
@media (min-width: 640px) { .h2h-pick { grid-template-columns: 1fr auto 1fr; align-items: end; } .h2h-vs { display: block; } }

/* Split panels (payout, editorial) */
.split-2 { display: grid; }
.split-2 > div { padding: 1.25rem; }
.split-2 > div + div { border-top: 1px solid var(--line); }
.split-2 .alt { background: var(--surface); }
@media (min-width: 640px) { .split-2 > div { padding: 1.5rem; } }
.icon-title { display: flex; align-items: center; gap: .5rem; }
.icon-title h3 { font-size: 1rem; font-weight: 700; }
.steps { margin-top: 1.25rem; }
.steps li { position: relative; display: flex; gap: 1rem; padding-bottom: 1.25rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 2rem; height: 100%; width: 1px; background: var(--line); }
.step-no { position: relative; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; font-weight: 700; color: var(--paper); }
.steps-forest .step-no { background: var(--forest); }
.steps-signal .step-no { background: var(--signal); }
.icon-list { display: grid; gap: 1rem; margin-top: 1.25rem; }
.icon-list li { display: flex; gap: .75rem; }
.icon-list .ic { margin-top: .1rem; }
@media (min-width: 640px) { .editorial-split, .split-2:has(.icon-list) { grid-template-columns: 1fr 1fr; } .split-2:has(.icon-list) > div + div { border-top: 0; } }
@media (min-width: 1024px) { .split-2 { grid-template-columns: 1fr 1fr; } .split-2 > div + div { border-top: 0; border-left: 1px solid var(--line); } }

/* Calculator */
.calc { display: grid; }
.calc-in { padding: 1.25rem; }
.calc-sliders { display: grid; gap: 1.75rem; margin-top: 1.75rem; }
.calc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.calc-out { padding: .35rem .75rem; border-radius: var(--radius-sm); background: var(--surface); font: 700 1rem var(--font-display); }
.calc-inputs { display: grid; gap: .75rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.calc-inputs label { font-size: .875rem; font-weight: 600; }
.unit-input { display: flex; align-items: center; margin-top: .25rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.unit-input input { flex: 1; min-width: 0; padding: .5rem 0; border: 0; background: transparent; outline: 0; }
.calc-result { padding: 1.25rem; background: var(--forest); color: var(--paper); }
.calc-kicker { font-size: .875rem; font-weight: 600; opacity: .8; }
.calc-result dl { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.calc-result dt { font-size: .875rem; opacity: .8; }
.calc-result .big { font: 700 1.875rem var(--font-display); }
.calc-result .mid { margin-top: .25rem; font: 700 1.25rem var(--font-display); }
.calc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .2); }
.calc-sep { padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .2); }
.calc-warn { display: flex; gap: .75rem; margin-top: 1.5rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-size: .875rem; line-height: 1.625; }
.calc-warn .ic { margin-top: .1rem; }
@media (min-width: 640px) { .calc-in, .calc-result { padding: 1.75rem; } .calc-inputs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .calc { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }

/* Best page: winner, toplist, categories, picker */
.winner { overflow: hidden; border: 2px solid var(--signal); border-radius: var(--radius); background: var(--card); }
.winner-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem 1.25rem; background: var(--signal); color: var(--paper); font-size: .875rem; font-weight: 700; }
.winner-in { display: grid; gap: 1.5rem; padding: 1.25rem; }
.winner-head { display: flex; align-items: center; gap: 1rem; }
.rating { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; font-size: .875rem; font-weight: 600; }
.rating .muted { margin-left: .5rem; font-weight: 400; }
.score { margin-left: auto; text-align: center; }
.score p { font: 700 1.875rem var(--font-display); color: var(--signal); }
.score span { font-size: .75rem; color: var(--forest-soft); }
@media (min-width: 640px) { .winner-in { padding: 1.5rem; } }
@media (min-width: 1024px) { .winner-in { grid-template-columns: 1.2fr 1fr; } }
.toplist > li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem; }
.toplist > li + li { border-top: 1px solid var(--line); }
.toplist > li > .min0 { overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .toplist > li { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; }
  .toplist > li > .sm-show { display: none; }
  .toplist > li > .btn { grid-column: 2; justify-self: start; }
}

.toplist > li.toplist-ph { display: flex; border-top-style: dashed; background: var(--surface); font-size: .875rem; color: var(--forest-soft); }
.rank { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface); font: 700 1rem var(--font-display); }
.rank-ph { background: none; border: 1px solid var(--line); }
@media (min-width: 1024px) { .toplist > li { grid-template-columns: auto auto 1.4fr 1fr 1fr auto auto; } }
.cat-acc details + details { border-top: 1px solid var(--line); }
.cat-acc summary { padding: 1rem; }
.cat-acc summary:hover { background: var(--surface); }
.cat-body { display: grid; gap: 1rem; padding: 1rem; border-top: 1px solid var(--line); background: var(--surface); }
.fact-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cat-acc summary, .cat-body { padding: 1.25rem; } .cat-body { grid-template-columns: 1fr auto; align-items: end; } .fact-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.num-steps { display: grid; gap: .75rem; }
.num-steps li { display: flex; gap: .75rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.num-steps span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 50%; background: var(--signal); color: var(--paper); font-size: .75rem; font-weight: 700; }
.factor-list div { display: grid; gap: .25rem; padding: .75rem; }
.factor-list div + div { border-top: 1px solid var(--line); }
.factor-list dt { font-weight: 600; }
.factor-list dd { font-size: .875rem; color: var(--forest-soft); }
@media (min-width: 640px) { .factor-list div { grid-template-columns: 9rem 1fr; } }
.weights { display: grid; gap: .75rem; }
.weights div { min-width: 0; overflow-wrap: anywhere; padding: 1rem; border-radius: var(--radius-sm); background: var(--surface); }
.weights p { font: 700 1.5rem var(--font-display); }
.weights span { font-size: .875rem; color: var(--forest-soft); }
@media (min-width: 640px) { .weights { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stack-5 { display: grid; gap: 1.25rem; align-content: start; }
.seg { display: flex; gap: .5rem; }
.seg button { flex: 1; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); font-size: .875rem; font-weight: 600; }
.seg button:hover { border-color: var(--signal); }
.seg button[aria-pressed="true"] { border-color: var(--signal); background: var(--signal); color: var(--paper); }
.picker-head { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.pick-list { border-top: 1px solid var(--line); font-size: .875rem; }
.pick-list li { display: flex; justify-content: space-between; align-items: center; padding-block: .6rem; }
.pick-list li + li { border-top: 1px solid var(--line); }
.pick-ok, .pick-no { display: inline-flex; align-items: center; gap: .25rem; }
.pick-ok { color: var(--signal); } .pick-no { color: var(--forest-soft); }

/* 6. Utilities --------------------------------------------------------- */
.muted { color: var(--forest-soft); }
.small { font-size: .875rem; }
.xs { font-size: .75rem; }
.fine { font-size: .75rem; color: var(--forest-soft); }
.strong { font-weight: 700; }
.med { font-weight: 500; }
.block { display: block; }
.block-w { display: block; width: 100%; }
.grow { flex: 1; }
.min0 { min-width: 0; }
.mw-12 { max-width: 12rem; line-height: 1.5; }
.mw-14 { min-width: 14rem; }
.c-signal { color: var(--signal); } .c-soft { color: var(--forest-soft); } .c-ink { color: var(--ink); } .c-danger { color: var(--danger); }
.h-sm { font: 700 1.125rem var(--font-display); }
.h-md { font-size: 1.25rem; font-weight: 700; }
.h-lg { font-size: 1.5rem; font-weight: 700; }
.divider-top { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-7 { margin-top: 1.75rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; }
.sm-show { display: none; }
@media (min-width: 640px) { .sm-show { display: revert; } .hide-xs { display: inline-flex; } }
@media (max-width: 639px) { .hide-xs { display: none; } }
@media (min-width: 1024px) { .lg-hide { display: none; } }
.rise { animation: rise .6s cubic-bezier(.2, .7, 0, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; } }
.tbl-wide tbody th, .tbl-wide td { white-space: nowrap; }
.tbl-wide thead th button { white-space: normal; text-align: left; }
.tbl-wide thead th.r button { text-align: right; }
.tbl-wide .wrap-cell { white-space: normal; min-width: 7rem; }
.btn.block-w { display: flex; width: 100%; }
.tbl-fixed .th-side { overflow-wrap: normal; hyphens: auto; font-size: .7rem; }
.tbl-wide .wrap-cell-sm { white-space: normal; min-width: 7rem; }
.nowrap { white-space: nowrap; }

/* Lånregistret data: logos, monograms, missing links */
.logo-box { width: 5.5rem; height: 2.75rem; padding: .3rem .45rem; background: var(--card); }
.logo-box.logo-sm { width: 4.5rem; height: 2.25rem; padding: .25rem .35rem; }
.logo-box.logo-lg { width: 7.5rem; height: 3.5rem; }
.logo-mono { display: grid; place-items: center; background: var(--mint); color: var(--forest); font: 700 .95rem var(--font-display); letter-spacing: .02em; }
@media (min-width: 768px) { .loan-id .logo-box { width: 5rem; height: 2.5rem; } }
.tag-soft { background: var(--mint); color: var(--forest); }
.btn-disabled { cursor: default; opacity: .6; box-shadow: none; }
.btn-disabled:hover { background: var(--paper); color: inherit; }
.pc-grid { display: grid; gap: .75rem 1.5rem; margin-top: .75rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
@media (min-width: 640px) { .pc-grid { grid-template-columns: 1fr 1fr; } }
.icon-list.sm { gap: .4rem; margin: 0; font-size: .875rem; }
.icon-list.sm .ic { margin-top: .15rem; }
.list-foot-flat { border: 0; padding-bottom: 0; }
@media (min-width: 1024px) { .tab-bar { grid-template-columns: repeat(var(--tabs, 5), 1fr); } }
.chart .pt-sm { fill-opacity: .75; }
.weights p { font-size: 1.25rem; }
.loan-name { flex-wrap: wrap; row-gap: .15rem; }
@media (min-width: 768px) { .loan-name strong { overflow: visible; } }
.logo-box img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.logo-box { display: flex; align-items: center; justify-content: center; }
@media (max-width: 639px) { .logo-box.logo-lg { width: 5.5rem; height: 2.75rem; } }
/* Representativt exempel per kredit (KkrL 3 kap. 3 §) */
.rep-ex { grid-column: 1 / -1; margin: 0; font-size: .75rem; line-height: 1.45; color: var(--ink); }
.rep-ex strong { font-weight: 700; }
.rep-ex-winner { padding: .75rem 1.25rem; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .rep-ex-winner { padding: .75rem 1.5rem; } }
.list-warn { margin: 0; border-width: 0 0 1px; border-radius: 0; padding: .9rem 1rem; }
.loan-ex { padding: 0 1rem .9rem; }
@media (min-width: 640px) { .list-warn { padding: .9rem 1.5rem; } .loan-ex { padding: 0 1.5rem .9rem; } }
.logo-link { display: inline-flex; border-radius: var(--radius-sm); }
.logo-link:hover, .logo-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.name-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.name-link:hover { text-decoration-color: currentColor; }
.cat-ex { grid-column: 1 / -1; margin-top: .75rem; }
/* Need finder: compact lender rows (link + representative example kept visible) */
.nf-list { margin-top: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.nf-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .35rem .75rem; padding: .85rem 1rem; }
.nf-row + .nf-row { border-top: 1px solid var(--line); }
.nf-rank { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface); font-size: .75rem; font-weight: 700; color: var(--forest-soft); }
.nf-val { justify-self: end; padding: .2rem .6rem; border-radius: 999px; background: var(--surface); font-size: .8125rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.nf-cta { display: none; }
.nf-ex { grid-column: 1 / -1; margin: .15rem 0 0; padding: .4rem .6rem; border-left: 2px solid var(--line); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .7rem; line-height: 1.45; color: var(--ink); }
.nf-ex-lbl { display: inline-block; margin-right: .4rem; font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--forest-soft); }
@media (max-width: 639px) {
  .nf-row { grid-template-columns: auto auto minmax(0, 1fr); }
  .nf-id { display: contents; }
  .nf-id > p:first-child { grid-column: 3; min-width: 0; }
  .nf-id > p + p { grid-column: 1 / -1; }
  .nf-val { grid-column: 1 / -1; justify-self: start; max-width: 100%; white-space: normal; }
}
@media (min-width: 640px) {
  .nf-row { grid-template-columns: auto auto 1fr auto auto; padding: .9rem 1.25rem; }
  .nf-cta { display: inline-flex; }
  .nf-ex { grid-column: 3 / -1; }
}


/* Privatlån template (2026-09-29): broker vs bank · rate ranges · term costs · capacity · fact cards */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bb > div { display: flex; flex-direction: column; gap: 1rem; }
.bb > div > .mt-5 { margin-top: .25rem; }
.bb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.bb-stats dt { font-size: .75rem; color: var(--forest-soft); }
.bb-stats dd { font: 700 1.05rem var(--font-display); }
.bb-logos { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (min-width: 640px) { .bb.split-2 { grid-template-columns: 1fr 1fr; } .bb.split-2 > div + div { border-top: 0; border-left: 1px solid var(--line); } }
.rr-scale { position: relative; height: 1.25rem; margin: 0 0 .25rem; margin-left: var(--rr-name); margin-right: var(--rr-val); font-size: .7rem; color: var(--forest-soft); }
.rr-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rr-scale span:first-child { transform: none; }
.rr-scale span:last-child { transform: translateX(-100%); }
.card:has(.rr) { --rr-name: 11rem; --rr-val: 8rem; }
.rr { display: grid; gap: .45rem; }
.rr li { display: grid; grid-template-columns: var(--rr-name) 1fr var(--rr-val); align-items: center; gap: 0; font-size: .875rem; }
.rr-name { padding-right: .75rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-track { position: relative; height: .7rem; border-radius: 999px; background: var(--surface); }
.rr-bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--signal), var(--forest)); }
.rr-fixed { background: var(--forest); }
.rr-val { padding-left: .75rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) {
  .card:has(.rr) { --rr-name: 0px; --rr-val: 0px; }
  .rr li { grid-template-columns: 1fr auto; row-gap: .2rem; }
  .rr-track { grid-column: 1 / -1; grid-row: 2; }
  .rr-name { padding-right: .5rem; }
}
.tc-controls { display: grid; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.tc-controls .range { margin-top: .75rem; }
.tc-rate { font-size: .875rem; font-weight: 600; }
.tc-rate .unit-input { background: var(--card); }
@media (min-width: 640px) { .tc-controls { grid-template-columns: 1fr 12rem; align-items: end; padding: 1.25rem 1.75rem; } }
.tc-tbl td, .tc-tbl th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-barcol { position: relative; width: 32%; min-width: 7rem; }
.tc-bar { display: flex; height: .8rem; border-radius: 999px; overflow: hidden; background: var(--surface); }
.tc-bar-p { background: var(--forest); } .tc-bar-c { background: var(--signal); }
.panel-foot .legend { display: inline-flex; margin: 0 .5rem 0 0; vertical-align: middle; }
.cap-fields { display: grid; gap: .75rem; }
.cap-fields label { font-size: .875rem; font-weight: 600; }
.cap-select { flex: 1; min-width: 0; padding: .5rem 0; border: 0; background: transparent; outline: 0; }
@media (min-width: 640px) { .cap-fields { grid-template-columns: 1fr 1fr; } }
.cap-none { padding: .75rem 1rem; border-radius: var(--radius-sm); background: rgb(255 255 255 / .12); font-size: .875rem; }
.fc .card h3 { font-size: 1.05rem; }

/* Lender review template (2026-09-29): /langivare/{slug} */
.rv-hero { border-bottom: 1px solid var(--line); background: var(--card); }
.rv-hero-in { padding-block: 1.25rem 2rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .75rem; color: var(--forest-soft); }
.crumbs li + li::before { content: "›"; margin-right: .35rem; }
.crumbs a:hover { color: var(--signal); text-decoration: underline; }
.rv-top { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
.rv-brand { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.rv-type { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; background: var(--mint); color: var(--forest); font-size: .75rem; font-weight: 700; }
.rv-id h1 { margin-top: 1rem; font-size: 2.25rem; font-weight: 800; line-height: 1.05; }
.rv-lead { max-width: 60ch; margin-top: 1rem; font-size: 1.0625rem; line-height: 1.6; color: var(--forest-soft); }
.rv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; font-size: .75rem; color: var(--forest-soft); }
.rv-dot { opacity: .6; }
.rv-score { align-self: start; padding: 1.25rem; border: 2px solid var(--signal); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }
.rv-score-k { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--signal); }
.rv-score-v { display: flex; align-items: baseline; gap: .35rem; margin-top: .25rem; }
.rv-score-v strong { font: 800 3rem/1 var(--font-display); }
.rv-score-v span { font-size: 1rem; font-weight: 600; color: var(--forest-soft); }
.stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: .08em; color: var(--line); white-space: nowrap; }
.stars-on { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--signal); }
.stars-lg { margin-top: .4rem; font-size: 1.35rem; }
.rv-score .link-btn { display: flex; }
.rv-ext { margin-top: 1rem; border-top: 1px solid var(--line); font-size: .875rem; }
.rv-ext > div { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .6rem; }
.rv-ext dt { font-weight: 600; color: var(--forest-soft); }
.rv-ext dt a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.rv-ext dd { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem; text-align: right; }
.rv-ext dd .muted { font-size: .75rem; }
.rv-card { margin-top: 1.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.rv-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.rv-facts > div { padding: .85rem 1rem; background: var(--card); }
.rv-facts dt { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--forest-soft); }
.rv-facts dd { margin-top: .2rem; font: 700 1rem var(--font-display); }
.rv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 1rem; border-top: 1px solid var(--line); }
.rv-cta .btn { width: 100%; }
.rv-ex { padding: .75rem 1rem; border-top: 1px solid var(--line); background: var(--card); }
@media (min-width: 640px) { .rv-cta .btn { width: auto; } .rv-cta, .rv-ex { padding-inline: 1.25rem; } }
@media (min-width: 768px) { .rv-facts { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
  .rv-hero-in { padding-block: 1.5rem 2.5rem; }
  .rv-top { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; }
  .rv-id h1 { font-size: 3rem; }
}
.rv-verdict { display: flex; gap: .75rem; max-width: 52rem; padding: 1rem 1.25rem; border-left: 3px solid var(--signal); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--card); font: 600 1.0625rem/1.5 var(--font-display); }
.rv-verdict .ic { margin-top: .15rem; }
.prose { max-width: 48rem; display: grid; gap: 1rem; line-height: 1.7; }
.rv-terms { display: grid; gap: .75rem; }
@media (min-width: 768px) { .rv-terms { grid-template-columns: 1fr 1fr; } }
.kv > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; font-size: .875rem; }
.kv > div + div { border-top: 1px solid var(--line); }
.kv dt { color: var(--forest-soft); }
.kv dd { font-weight: 600; text-align: right; }
.note .rep-ex { color: var(--ink); }
.rv-bd-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rv-bd-head > div { max-width: 40rem; }
.rv-bd-total { display: grid; justify-items: end; gap: .2rem; }
.rv-bd-total strong { font: 800 2.25rem/1 var(--font-display); color: var(--signal); }
.rv-bd-total > span:not(.stars) { font-size: .75rem; color: var(--forest-soft); }
.rv-bars { display: grid; gap: 1.1rem; }
@media (min-width: 768px) { .rv-bars { grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; } }
.rv-bar-top { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.rv-bar { display: block; height: .5rem; margin-top: .4rem; border-radius: 999px; background: var(--surface); overflow: hidden; }
.rv-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--signal), var(--forest)); }
.hs-grid { display: grid; gap: .75rem; }
.hs-aside { background: var(--mint); border-color: transparent; }
@media (min-width: 1024px) { .hs-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.rv-peers tr.is-cur { background: color-mix(in oklch, var(--mint) 55%, white); }
.rv-peer-id { display: flex; align-items: center; gap: .75rem; }
.rv-peer-id .tag { margin-left: .35rem; vertical-align: middle; }
.rv-peer-ex { display: grid; gap: .5rem; padding: .9rem 1rem; border-top: 1px solid var(--line); background: var(--surface); }
@media (min-width: 640px) { .rv-peer-ex { padding-inline: 1.25rem; } }
.rv-company { margin-top: 1.75rem; }
@media (min-width: 1024px) { .rv-company { grid-template-columns: repeat(3, 1fr) !important; } }
.cap-hint { display: block; margin-top: .25rem; font-size: .7rem; font-weight: 400; color: var(--forest-soft); }
.cap-kids summary { cursor: pointer; font-size: .875rem; font-weight: 600; }
.cap-kid-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .75rem; }
.cap-kid-grid label { font-size: .8rem; font-weight: 600; }
@media (min-width: 640px) { .cap-kid-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-soon { opacity: .55; }

/* Lender directory (2026-09-29): /langivare — hero + logo wall, matcher, map, records, card grid */
:root { --g-broker: #2a78d6; --g-uc: #eb6834; --g-nouc: #1baf7a; }   /* categorical slots 1–3, validated all-pairs (dataviz validator) */
.g-broker { background: var(--g-broker); fill: var(--g-broker); } .g-uc { background: var(--g-uc); fill: var(--g-uc); } .g-nouc { background: var(--g-nouc); fill: var(--g-nouc); }
.dm-sw { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; flex-shrink: 0; }
.dh { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(120% 90% at 100% 0%, var(--mint), transparent 55%), var(--card); }
.dh-in { padding-block: 1.25rem 2rem; }
.dh h1 { max-width: 46rem; margin-top: 1.25rem; font-size: 2.25rem; font-weight: 800; line-height: 1.05; }
.dh-lead { max-width: 60ch; margin-top: 1rem; font-size: 1.0625rem; line-height: 1.6; color: var(--forest-soft); }
.dh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-width: 52rem; margin-top: 1.75rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.dh-stats > div { display: flex; flex-direction: column-reverse; padding: .9rem 1rem; background: var(--card); }
.dh-stats dd { font: 800 1.75rem/1.1 var(--font-display); color: var(--forest); font-variant-numeric: tabular-nums; }
.dh-stats dt { margin-top: .2rem; font-size: .75rem; color: var(--forest-soft); }
.dh-links { justify-content: flex-start; margin-top: 1.5rem; }
@media (min-width: 768px) { .dh-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .dh h1 { font-size: 3.25rem; } .dh-in { padding-block: 1.5rem 2.5rem; } }
.logo-wall { overflow: hidden; padding-block: .9rem; border-top: 1px solid var(--line); background: var(--surface); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-track { display: flex; gap: .75rem; width: max-content; animation: logo-scroll 70s linear infinite; }
.logo-wall:hover .logo-track, .logo-wall:focus-within .logo-track { animation-play-state: paused; }
.logo-chip { display: grid; place-items: center; width: 6.5rem; height: 3rem; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); transition: transform .15s, border-color .15s; }
.logo-chip:hover, .logo-chip:focus-visible { transform: translateY(-2px); border-color: var(--signal); }
.logo-chip img { max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; width: auto; padding-inline: var(--gutter); } .logo-track > [aria-hidden="true"] { display: none; } }

/* Matcher */
.dmx { display: grid; }
.dmx-q { display: grid; gap: 1px; background: var(--line); }
.dmx-g { padding: 1.1rem 1.25rem; background: var(--card); min-width: 0; }
.dmx-legend { display: flex; align-items: center; gap: .5rem; font: 700 1rem var(--font-display); }
.dmx-no { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--forest); color: var(--paper); font-size: .75rem; }
.seg-wrap { flex-wrap: wrap; margin-top: .75rem; }
.seg-wrap button { flex: 1 1 auto; }
.dmx-out { padding: 1.25rem; background: var(--forest); color: var(--paper); }
.dmx-idle { display: flex; gap: .75rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; opacity: .9; }
.dmx-count { font-size: .95rem; } .dmx-count strong { font: 800 2.25rem/1 var(--font-display); margin-right: .25rem; }
.dmx-top { display: grid; gap: .5rem; margin-top: 1rem; }
.dmx-hit { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
.dmx-hit:hover { outline: 2px solid var(--signal); }
.dmx-hit img { width: 3.5rem; height: 1.75rem; object-fit: contain; }
.dmx-rank { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--surface); font-size: .75rem; font-weight: 700; }
.dmx-txt { display: grid; min-width: 0; } .dmx-txt .xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmx-score { font: 800 1.1rem var(--font-display); color: var(--signal); }
.dmx-top > li.xs { color: var(--paper); opacity: .85; }
.dmx-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.dmx-actions .btn-ghost { color: var(--paper); border-color: rgb(255 255 255 / .3); }
.dmx-actions .btn-ghost:hover { background: rgb(255 255 255 / .1); }
@media (min-width: 640px) { .dmx-q { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .dmx { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .dmx-out { padding: 1.5rem; } }

/* Map */
.dm-legend { display: flex; flex-wrap: wrap; gap: .5rem; }
.dm-key { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .875rem; font-weight: 600; }
.dm-key[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.dm-key:hover { border-color: var(--ink); }
.dm-plot { position: relative; margin-top: 1rem; }
.dm-svg { width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.dm-scroll { overflow-x: auto; }
@media (max-width: 767px) { .dm-svg { min-width: 680px; } }   /* keep axis text legible on phones; the plot scrolls sideways */
.dm-svg .grid { stroke: var(--line); stroke-width: 1; }
.dm-svg .axis-line { stroke: var(--forest-soft); stroke-width: 1; }
.dm-svg .tick { fill: var(--forest-soft); font-size: 12px; }
.dm-svg .axis { fill: var(--forest-soft); font-size: 12px; font-weight: 600; }
.dm-zone { fill: var(--forest-soft); font-size: 13px; font-weight: 600; font-style: italic; opacity: .8; }
.dm-over { fill: var(--ink); font-size: 11px; }
.dm-pt { cursor: pointer; outline: none; transition: opacity .2s; }
.dm-hit { fill: transparent; }
.dm-dot { stroke: var(--card); stroke-width: 2; transition: r .15s; }
.dm-pt:hover .dm-dot, .dm-pt:focus-visible .dm-dot { r: 9; stroke: var(--ink); }
.dm-pt.is-dim { opacity: .18; }
.dm-pt.is-off { opacity: 0; pointer-events: none; }
.dm-tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 12px)); min-width: 9rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow-md); pointer-events: none; white-space: nowrap; }
.dm-tip-v { font: 700 .95rem var(--font-display); } .dm-tip-n { font-size: .8rem; font-weight: 600; } .dm-tip-g { font-size: .72rem; color: var(--forest-soft); }
.dm-table summary { cursor: pointer; }

/* Records */
.rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (min-width: 1024px) { .rec-grid { grid-template-columns: repeat(4, 1fr); } }
.rec { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); min-width: 0; }
.rec-k { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--forest-soft); }
.rec-v { font: 800 1.5rem/1.15 var(--font-display); }
.rec-n { font-size: .9rem; font-weight: 600; } .rec-n a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .rec-n a:hover { text-decoration-color: currentColor; }
.rec .xs { margin-top: auto; }

/* Card grid */
.dg-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
.dg-chip { display: inline-flex; align-items: center; gap: .4rem; }
.dg-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--card); color: var(--ink); }
.dg-chip[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.dg-sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; }
.dg-status .text-link { font-size: inherit; }
.dg { display: grid; gap: .75rem; }
@media (min-width: 768px) { .dg { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .dg { grid-template-columns: repeat(3, 1fr); } }
.dg-card { display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); min-width: 0; transition: box-shadow .2s, border-color .2s; }
.dg-card:target, .dg-card.is-flash { animation: card-flash 1.6s ease-out; }
@keyframes card-flash { 0%, 40% { border-color: var(--signal); box-shadow: 0 0 0 4px color-mix(in oklch, var(--signal) 25%, transparent); } 100% { border-color: var(--line); box-shadow: none; } }
.dg-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; }
.dg-type { display: flex; align-items: center; gap: .35rem; margin-top: .15rem; font-size: .75rem; color: var(--forest-soft); }
.dg-score { display: grid; justify-items: end; gap: .1rem; text-align: right; }
.dg-score strong { font: 800 1.35rem/1 var(--font-display); }
.dg-score .stars { font-size: .75rem; }
.dg-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; padding-block: .75rem; border-block: 1px solid var(--line); }
.dg-facts dt { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--forest-soft); }
.dg-facts dd { display: flex; align-items: center; gap: .25rem; margin-top: .15rem; font-size: .875rem; font-weight: 600; }
.dg-ex { font-size: .7rem; }
.dg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: auto; }
.dg > .empty { grid-column: 1 / -1; }

/* Author page (templates/sections/author.php) */
.author-id { display: flex; align-items: center; gap: 1rem; }
.author-photo { width: 6rem; height: 6rem; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--surface); }
.author-role { margin-top: .25rem; color: var(--forest-soft); font-weight: 500; }
.author-facts { margin-top: 1.5rem; }
@media (max-width: 480px) { .author-facts { grid-template-columns: 1fr; } }

/* Shared payout schedule comparison. */
.schedule-filters{display:flex;gap:16px;flex-wrap:wrap}.schedule-filters label{display:grid;gap:5px;max-width:100%;font-size:.875rem}.schedule-filters select{max-width:100%}
.schedule-table{width:100%;table-layout:fixed}.schedule-table th,.schedule-table td{white-space:normal;overflow-wrap:anywhere;vertical-align:top}.schedule-table th:first-child{width:20%}.schedule-table th:last-child{width:28%}.schedule-table tbody+tbody{border-top:2px solid #d2d9d7}.schedule-table .schedule-terms{padding-top:0}.schedule-terms summary{cursor:pointer;font-size:.875rem}.schedule-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.schedule-table tbody[hidden]{display:none}
@media(max-width:700px){.schedule-table,.schedule-table tbody,.schedule-table tr{display:block;width:100%}.schedule-table thead{display:none}.schedule-table .schedule-name{display:block;width:auto;font-size:1.15rem}.schedule-table td[data-label]{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;width:auto;padding-top:8px;padding-bottom:8px}.schedule-table td[data-label]::before{content:attr(data-label);font-weight:600}.schedule-table .schedule-terms{display:block;width:auto;padding-top:12px}.schedule-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:700px){.schedule-table tbody th.schedule-name{width:100%;box-sizing:border-box}}

/* Two-offer tables: long Swedish labels must stay inside their mobile cell. */
[data-h2h] .th-side { overflow-wrap: anywhere; }
@media (max-width: 639px) {
  [data-h2h] .tbl-fixed th, [data-h2h] .tbl-fixed td { padding: .5rem; hyphens: auto; }
}

/* Optional explanatory image shared by comparison fact sections. */
.section-figure { max-width: 34rem; margin-left: auto; margin-right: auto; }
.section-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: .75rem; }
.section-figure figcaption { margin-top: .75rem; color: var(--forest-soft); font-size: .875rem; line-height: 1.5; }

/* Closed / merged lender page (review-closed) */
.rv-type-closed { background: color-mix(in oklch, var(--danger) 14%, white); color: oklch(0.42 0.17 27); }
.cl-h1 { margin-top: 1rem; font-size: 2.25rem; font-weight: 800; line-height: 1.05; max-width: 46rem; }
@media (min-width: 1024px) { .cl-h1 { font-size: 3rem; } }
.cl-box { display: flex; gap: .85rem; max-width: 46rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-left: 4px solid var(--danger); border-radius: var(--radius-sm); background: var(--card); }
.cl-box .ic { margin-top: .1rem; color: var(--danger); }

/* /langivare: former lenders (templates/sections/dir-closed.php) */
.dc { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.dc-link { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: .9rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: color-mix(in oklch, var(--card) 60%, transparent); color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.dc-link:hover, .dc-link:focus-visible { border-style: solid; border-color: var(--danger); background: var(--card); }
.dc-name { font-weight: 700; color: color-mix(in oklch, currentColor 70%, transparent); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklch, var(--danger) 60%, transparent); }
.dc-merged .ic, .dc-tag .ic { flex: none; }
.dc-tag { display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: color-mix(in oklch, var(--danger) 12%, white); color: oklch(0.45 0.16 27); }
.dc-tag.dc-merged { background: color-mix(in oklch, var(--line) 50%, white); color: inherit; }

/* Static lender pages (templates/sections/review-static.php) + "Fler långivare" tiles on /langivare (dir-other.php) */
.st-note { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: color-mix(in oklch, var(--line) 35%, white); }
.st-note .ic { flex: none; margin-top: .15rem; }
.dc-link.dc-active { border-style: solid; background: var(--card); }
.dc-link.dc-active:hover, .dc-link.dc-active:focus-visible { border-color: var(--signal, currentColor); }
.dc-active .dc-name { color: inherit; text-decoration: none; }
.dc-tag.dc-on { background: color-mix(in oklch, var(--signal, #1a7f4b) 14%, white); color: inherit; }

/* read-first: "Risker med lån" + "Så granskar vi" after the first list on comparison pages */
.read-first { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .75rem; }
.read-first-card { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.read-first-card:hover, .read-first-card:focus-visible { border-color: var(--forest); box-shadow: 0 1px 6px oklch(0 0 0 / .06); }
.read-first-card > span { flex: 1; display: grid; gap: .15rem; min-width: 0; }
.read-first-ic { flex: none; width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: 50%; background: var(--mint); color: var(--forest); }
.read-first-arrow { flex: none; color: var(--forest-soft); }