/* ==========================================================================
   Kladionica — detalji (recenzija kladionice)
   Screens: mobile 11j (390px) · desktop 11g (1360px).
   Every value below is measured from handoff/reference/mobile/11j.html and
   handoff/reference/desktop/11g.html — those two files are the pixel truth.

   Mobile-first; the desktop block at 1024px turns the single column into the
   11g grid (1fr / 380px rail) by moving the rail group into column 2.
   ========================================================================== */

.kl-kd {
  /* Values the shared token file does not carry, taken verbatim from the
     reference HTML. Declared once here instead of as raw hex down the sheet. */
  --kd-body: #4A4F56;          /* list + step copy */
  --kd-faint: #C4C9CE;         /* breadcrumb chevron */
  --kd-panel: #F8F9FA;         /* hero / terms / offer panel fill */
  --kd-amber-bg: #FFF7EC;      /* bonus warning box */
  --kd-amber-ico: #C77A1F;     /* warning glyph */
  --kd-amber-text: #7A6642;    /* warning copy */
  --kd-star: #F5A623;          /* rating stars */
  --kd-red-bg: #FBEEED;        /* "Nedostaci" panel */
  --kd-ph: #EDEFF1;            /* logo placeholder stripe (light) */

  display: block;
  background: var(--kl-surface);
  padding: var(--kl-sp-16) var(--kl-sp-20) var(--kl-sp-20);
  font-family: var(--kl-font-ui);
}

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

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

.kl-kd-grid,
.kl-kd-rail,
.kl-kd-main {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-16);
  min-width: 0;
}

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

.kl-kd-crumb {
  /* global.css hides every bare <nav> on mobile (legacy header rule) — the
     breadcrumb is a nav landmark, so restate display here. */
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--kl-text-4);
  margin-bottom: var(--kl-sp-16);
}

.kl-kd-crumb a {
  color: inherit;
  text-decoration: none;
}

.kl-kd-crumb a:hover {
  color: var(--kl-text-2);
}

.kl-kd-crumb span[aria-hidden] {
  color: var(--kd-faint);
  margin: 0 2px;
}

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

.kl-kd-hero {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-12);
  background: var(--kd-panel);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  padding: var(--kl-sp-16);
}

.kl-kd-hero-top {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-12);
}

.kl-kd-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--kl-r-12);
  object-fit: contain;
  background: var(--kl-surface);
  flex-shrink: 0;
}

.kl-kd-logo--empty {
  display: block;
  background: repeating-linear-gradient(45deg, var(--kd-ph), var(--kd-ph) 3px, var(--kl-logo-ph) 3px, var(--kl-logo-ph) 6px);
}

.kl-kd-hero-id {
  flex: 1;
  min-width: 0;
}

/* Card carries the bookmaker name only — the page H1 lives in the main
   column, above the first section. */
.kl-kd-name {
  font-family: var(--kl-font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--kl-ink);
  line-height: 1.2;
  margin: 0;
}

.kl-kd-rating {
  display: flex;
  align-items: baseline;
  gap: var(--kl-sp-6);
  margin: 3px 0 0;
}

.kl-kd-rating-num {
  font-family: var(--kl-font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--kl-ink);
}

.kl-kd-rating-max {
  font-size: 13px;
  font-weight: 600;
  color: var(--kl-text-4);
}

.kl-kd-stars {
  color: var(--kd-star);
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1;
}

.kl-kd-star-off {
  opacity: 0.35;
}

.kl-kd-tagline {
  font-size: var(--kl-fs-13);
  line-height: 1.55;
  color: var(--kl-text-2);
  margin: 0;
}

.kl-kd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kl-sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kl-kd-chips li {
  font-size: var(--kl-fs-11);
  font-weight: 600;
  color: var(--kl-text-2);
  background: var(--kl-surface);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-pill);
  padding: 4px 10px;
}

.kl-kd-cta {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--kl-on-dark);
  background: var(--kl-blue);
  border-radius: var(--kl-r-10);
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
}

.kl-kd-cta:hover {
  filter: brightness(0.94);
}

.kl-kd-hero-legal {
  font-size: 10px;
  font-weight: 500;
  color: var(--kl-text-4);
  text-align: center;
  margin: 0;
}

/* --- Rail blocks (Brze činjenice, Naša ocjena) ------------------------------ */

.kl-kd-block-title {
  font-family: var(--kl-font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--kl-ink);
  margin: 0 0 var(--kl-sp-8);
}

.kl-kd-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kl-sp-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kl-kd-fact {
  display: flex;
  align-items: flex-start;
  gap: var(--kl-sp-8);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-12);
  padding: 10px 12px;
}

.kl-kd-fact .kl-kd-ico {
  color: var(--kl-blue);
  flex-shrink: 0;
  margin-top: 1px;
}

.kl-kd-fact-text {
  min-width: 0;
}

.kl-kd-fact-label,
.kl-kd-fact-value {
  display: block;
}

.kl-kd-fact-label {
  font-size: var(--kl-fs-10);
  font-weight: 600;
  color: var(--kl-text-4);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.kl-kd-fact-value {
  font-size: var(--kl-fs-13);
  font-weight: 700;
  color: var(--kl-ink);
  margin-top: 2px;
}

.kl-kd-scorebox {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-10);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
  padding: var(--kl-sp-14) var(--kl-sp-16);
}

.kl-kd-score {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-10);
}

.kl-kd-score-label {
  flex: 0 0 44%;
  font-size: 12px;
  font-weight: 500;
  color: var(--kl-ink);
}

.kl-kd-score-track {
  flex: 1;
  height: 6px;
  border-radius: var(--kl-r-3);
  background: var(--kl-surface-4);
  overflow: hidden;
}

.kl-kd-score-fill {
  display: block;
  height: 100%;
  border-radius: var(--kl-r-3);
  background: var(--kl-navy);
}

.kl-kd-score-val {
  flex: 0 0 26px;
  text-align: right;
  font-family: var(--kl-font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--kl-ink);
}

.kl-kd-note {
  font-size: var(--kl-fs-12);
  line-height: 1.55;
  color: var(--kl-text-4);
  margin: var(--kl-sp-8) 0 0;
}

/* --- Prednosti / Nedostaci -------------------------------------------------- */

.kl-kd-pc {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-8);
}

.kl-kd-pc-box {
  border-radius: var(--kl-r-12);
  padding: var(--kl-sp-12) var(--kl-sp-14);
}

.kl-kd-pc-box--pros {
  background: var(--kl-green-tint);
}

.kl-kd-pc-box--cons {
  background: var(--kd-red-bg);
}

.kl-kd-pc-title {
  font-family: var(--kl-font-display);
  font-size: var(--kl-fs-13);
  font-weight: 700;
  color: var(--kl-ink);
  margin: 0 0 var(--kl-sp-6);
}

.kl-kd-pc-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kl-kd-pc-list li {
  display: flex;
  gap: 7px;
  font-size: 12px;
  color: var(--kd-body);
}

.kl-kd-yes {
  color: var(--kl-green);
  flex-shrink: 0;
}

.kl-kd-no {
  color: var(--kl-red);
  flex-shrink: 0;
}

/* --- Page heading (H1 + intro, above the first section) --------------------- */
/* The mock has no page title, so these two sizes are ours: one step above the
   18px section titles on desktop, and on the token ladder at both widths. */

/* The heading is first in the DOM (so the page leads with its H1) but sits
   below the summary card on mobile, per the screen order. */
.kl-kd-head {
  display: block;
  order: 2;
}

.kl-kd-rail { order: 1; }
.kl-kd-main { order: 3; }

.kl-kd-h1 {
  font-family: var(--kl-font-display);
  font-size: var(--kl-fs-22);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--kl-ls-heading);
  color: var(--kl-ink);
  margin: 0;
}

.kl-kd-head-lead {
  font-size: var(--kl-fs-13);
  line-height: 1.55;
  color: var(--kl-text-2);
  margin: var(--kl-sp-8) 0 0;
}

/* --- Long-form sections ----------------------------------------------------- */

.kl-kd-sec-title {
  font-family: var(--kl-font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--kl-ink);
  margin: 0 0 var(--kl-sp-8);
}

.kl-kd-lead {
  font-size: var(--kl-fs-13);
  line-height: 1.55;
  color: var(--kl-text-2);
  margin: 0 0 var(--kl-sp-8);
}

.kl-kd-lead:last-child {
  margin-bottom: 0;
}

.kl-kd-lead b {
  color: var(--kl-ink);
}

/* Bonus terms panel */
.kl-kd-terms {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-8);
  background: var(--kd-panel);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
  padding: var(--kl-sp-14) var(--kl-sp-16);
}

.kl-kd-terms-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--kl-ink);
  margin: 0;
}

.kl-kd-terms-list {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kl-kd-terms-list li {
  font-size: 12px;
  color: var(--kd-body);
  padding-left: 12px;
  position: relative;
}

.kl-kd-terms-list li::before {
  content: "•";
  position: absolute;
  left: 0;
}

.kl-kd-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--kl-sp-8);
  background: var(--kd-amber-bg);
  border-radius: var(--kl-r-10);
  padding: 9px 11px;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--kd-amber-text);
}

.kl-kd-warn span[aria-hidden] {
  color: var(--kd-amber-ico);
  font-size: 12px;
  flex-shrink: 0;
}

/* Feature checklist */
.kl-kd-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kl-kd-feats li {
  display: flex;
  gap: 7px;
  font-size: 12px;
  color: var(--kd-body);
}

/* Screenshot figure */
.kl-kd-shot {
  margin: 0;
}

.kl-kd-shot img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--kl-r-16);
  background: var(--kl-surface-3);
}

.kl-kd-shot figcaption {
  font-size: 11px;
  color: var(--kl-text-4);
  text-align: center;
  margin-top: var(--kl-sp-6);
}

/* Payments */
.kl-kd-pays {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-8);
}

.kl-kd-pay {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-12);
  padding: var(--kl-sp-12) var(--kl-sp-14);
}

.kl-kd-pay-head {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-8);
  font-size: var(--kl-fs-13);
  font-weight: 700;
  color: var(--kl-ink);
  margin: 0 0 9px;
}

.kl-kd-pay-head .kl-kd-ico {
  color: var(--kl-blue);
  flex-shrink: 0;
}

.kl-kd-pay-vals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kl-sp-14);
}

.kl-kd-pay-num,
.kl-kd-pay-lbl {
  display: block;
}

.kl-kd-pay-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--kl-ink);
}

.kl-kd-pay-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--kl-text-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kl-kd-pays-note {
  font-size: var(--kl-fs-12);
  line-height: 1.55;
  color: var(--kl-text-4);
  font-style: italic;
  margin: var(--kl-sp-8) 0 0;
}

/* Admin-only draft-preview banner. */
.kl-kd-draft-note {
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-amber-notice-text);
  background: var(--kl-amber-tint);
  border: 1px solid var(--kl-amber-notice-border);
  border-radius: var(--kl-r-10);
  padding: var(--kl-sp-10) var(--kl-sp-14);
  margin: 0 0 var(--kl-sp-12);
}

.kl-kd-draft-note a { color: inherit; }

/* Per-country availability cards ("Dostupnost po zemljama"). */
.kl-kd-countries {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-8);
}

.kl-kd-country {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-12);
  padding: var(--kl-sp-12) var(--kl-sp-14);
}

.kl-kd-country-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--kl-sp-6);
  margin: 0 0 var(--kl-sp-8);
}

.kl-kd-country-name {
  font: 700 var(--kl-fs-13) var(--kl-font-display);
  color: var(--kl-ink);
}

.kl-kd-country-status {
  font: 700 var(--kl-fs-10) var(--kl-font-ui);
  border-radius: var(--kl-r-pill);
  padding: 3px 9px;
}

.kl-kd-country-status--ok   { color: var(--kl-green); background: var(--kl-green-tint); }
.kl-kd-country-status--warn { color: var(--kl-amber); background: var(--kl-amber-tint); }
.kl-kd-country-status--bad  { color: var(--kl-red);   background: var(--kl-red-tint); }

.kl-kd-country-rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-4);
}

.kl-kd-country-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kl-sp-10);
}

.kl-kd-country-row dt {
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
  flex-shrink: 0;
}

.kl-kd-country-row dd {
  margin: 0;
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text);
  text-align: right;
}

.kl-kd-country-note {
  font-size: var(--kl-fs-12);
  line-height: 1.55;
  color: var(--kl-text-4);
  margin: var(--kl-sp-8) 0 0;
}

/* Inline offer strip. It is an <aside>, and global.css styles bare <aside> as
   the legacy sidebar (flex: 0 0 320px, hidden on mobile) — restate display and
   flex here so the strip keeps its own size inside the column. */
.kl-kd-offer {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kl-sp-12);
  background: var(--kd-panel);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
  padding: var(--kl-sp-12) var(--kl-sp-14);
}

.kl-kd-offer-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--kl-r-10);
  object-fit: contain;
  background: var(--kl-surface);
  flex-shrink: 0;
}

.kl-kd-offer-text {
  flex: 1;
  min-width: 120px;
}

/* The padding:0 neutralizer that stood here is gone (CSS-FINAL Step 4): the bare
   `aside p` rule in global.css that made it necessary is now scoped to the legacy
   shell, and this card is on a .kl-main page, so nothing pads these paragraphs
   any more.
   font-weight on .kl-kd-offer-note is NOT a leftover — it is new and load-bearing.
   That element never declared a weight and had been taking 500 from the same bare
   rule, so scoping alone dropped it to the browser default 400. Measured, not
   assumed. */
.kl-kd-offer-title {
  font-family: var(--kl-font-display);
  font-size: var(--kl-fs-13);
  font-weight: 700;
  color: var(--kl-ink);
  margin: 0;
}

.kl-kd-offer-note {
  font-size: var(--kl-fs-11);
  font-weight: 500;
  color: var(--kl-text-4);
  margin: 2px 0 0;
}

.kl-kd-cta--sm {
  display: inline-block;
  font-size: 12px;
  padding: 8px 14px;
  white-space: nowrap;
}

/* App + registration: stacked bands on mobile, two columns on desktop. */
.kl-kd-cols {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-16);
}

/* Registration steps */
.kl-kd-steps {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-10);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: kl-kd-step;
}

.kl-kd-steps li {
  display: flex;
  gap: var(--kl-sp-10);
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.55;
  color: var(--kd-body);
  counter-increment: kl-kd-step;
}

.kl-kd-steps li::before {
  content: counter(kl-kd-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kl-blue);
  color: var(--kl-on-dark);
  font-family: var(--kl-font-display);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.kl-kd-cta--steps {
  margin-top: var(--kl-sp-12);
}

/* FAQ */
.kl-kd-faq {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-8);
}

.kl-kd-faq-item {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-12);
  padding: var(--kl-sp-12) var(--kl-sp-14);
}

.kl-kd-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-8);
  cursor: pointer;
  list-style: none;
}

.kl-kd-faq-item summary::-webkit-details-marker {
  display: none;
}

.kl-kd-faq-q {
  font-size: var(--kl-fs-13);
  font-weight: 700;
  color: var(--kl-ink);
}

.kl-kd-faq-chev {
  color: var(--kl-text-4);
  flex-shrink: 0;
  transition: transform var(--kl-dur-short) var(--kl-ease);
}

.kl-kd-faq-item[open] .kl-kd-faq-chev {
  transform: rotate(180deg);
}

.kl-kd-faq-a {
  font-size: var(--kl-fs-12);
  line-height: 1.55;
  color: var(--kl-text-2);
  margin: var(--kl-sp-6) 0 0;
}

/* Verdict */
.kl-kd-final {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-10);
  background: var(--kl-navy);
  border-radius: var(--kl-r-16);
  padding: 18px;
}

.kl-kd-final-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--kl-on-dark-10);
  border-radius: var(--kl-r-12);
  padding: 8px 14px;
  margin: 0;
  align-self: flex-start;
  flex-shrink: 0;
}

.kl-kd-final-num {
  font-family: var(--kl-font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--kl-on-dark);
}

.kl-kd-final-lbl {
  font-size: 8px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
}

.kl-kd-final-title {
  font-family: var(--kl-font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--kl-on-dark);
  margin: 0;
}

.kl-kd-final-text p {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: var(--kl-sp-10) 0 0;
}

.kl-kd-final-cta {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--kl-navy);
  background: var(--kl-surface);
  border-radius: var(--kl-r-10);
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.kl-kd-final-cta:hover {
  filter: brightness(0.94);
}

/* Mobile puts the score chip and the "Zaključak" title on one row. */
@media (max-width: 1023px) {
  .kl-kd-final-title {
    display: flex;
    align-items: center;
    min-height: 100%;
  }

  .kl-kd-final {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--kl-sp-10) var(--kl-sp-12);
  }

  .kl-kd-final-text {
    display: contents;
  }

  .kl-kd-final-text p,
  .kl-kd-final-cta {
    grid-column: 1 / -1;
  }
}

/* 18+ strip */
.kl-kd-legal {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-10);
  background: var(--kl-surface-3);
  border-radius: var(--kl-r-10);
  padding: var(--kl-sp-10) var(--kl-sp-12);
  font-size: var(--kl-fs-11);
  line-height: 1.5;
  color: var(--kl-text-3);
  margin: 0;
}

.kl-kd-legal-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kl-ink);
  color: var(--kl-on-dark);
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ==========================================================================
   Desktop — screen 11g (1360px): main column + 380px rail.
   ========================================================================== */

@media (min-width: 1024px) {

  .kl-kd {
    padding: var(--kl-sp-28) var(--kl-sp-40) var(--kl-sp-40);
  }

  .kl-kd-crumb {
    font-size: 12px;
    margin-bottom: var(--kl-sp-24);
  }

  .kl-kd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--kl-sp-24) 36px;
    align-items: start;
  }

  /* Heading above the main column; the rail spans both rows beside them. */
  .kl-kd-head {
    grid-column: 1;
    grid-row: 1;
  }

  .kl-kd-main {
    grid-column: 1;
    grid-row: 2;
    gap: var(--kl-sp-24);
  }

  /* The rail follows the long main column. It is usually taller than the
     viewport, so it also caps its own height and scrolls internally instead of
     having its bottom (pros/cons) clipped off permanently. When it fits, no
     inner scrollbar appears. 64px = the sticky app bar above it. */
  .kl-kd-rail {
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: var(--kl-sp-20);
    position: sticky;
    top: calc(64px + var(--kl-sp-20));
    max-height: calc(100vh - 64px - var(--kl-sp-40));
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* Without this the capped flex column squeezes its cards to fit instead of
     scrolling them. */
  .kl-kd-rail > * {
    flex-shrink: 0;
  }

  /* Hero */
  .kl-kd-hero {
    padding: 18px;
  }

  .kl-kd-name {
    font-size: 18px;
  }

  .kl-kd-h1 {
    font-size: var(--kl-fs-27);
  }

  .kl-kd-head-lead {
    font-size: var(--kl-fs-14);
    line-height: 1.6;
    margin-top: var(--kl-sp-10);
  }

  .kl-kd-cta {
    padding: 11px 16px;
  }

  /* Rail blocks become bordered cards with their own header row. */
  .kl-kd-block {
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-r-16);
    overflow: hidden;
  }

  .kl-kd-block-title {
    font-size: 14px;
    font-weight: 700;
    padding: var(--kl-sp-14) var(--kl-sp-16);
    border-bottom: 1px solid var(--kl-divider);
    margin: 0;
  }

  .kl-kd-block--facts .kl-kd-block-body {
    padding: var(--kl-sp-12) var(--kl-sp-16) var(--kl-sp-16);
  }

  .kl-kd-block--scores .kl-kd-block-body {
    padding: var(--kl-sp-14) var(--kl-sp-16) var(--kl-sp-16);
  }

  /* Desktop quick facts carry no icon (11g) and drop the inner card padding. */
  .kl-kd-fact .kl-kd-ico {
    display: none;
  }

  .kl-kd-scorebox {
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .kl-kd-note {
    margin-top: var(--kl-sp-12);
  }

  /* Long-form column */
  .kl-kd-sec-title {
    font-size: 18px;
  }

  .kl-kd-lead {
    font-size: var(--kl-fs-14);
    line-height: 1.6;
    margin-bottom: var(--kl-sp-10);
  }

  .kl-kd-terms {
    padding: var(--kl-sp-16) 18px;
  }

  .kl-kd-terms-title {
    font-size: var(--kl-fs-13);
  }

  .kl-kd-terms-list li {
    font-size: var(--kl-fs-13);
  }

  .kl-kd-warn {
    padding: var(--kl-sp-10) var(--kl-sp-12);
    font-size: var(--kl-fs-12);
  }

  .kl-kd-feats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kl-sp-8) var(--kl-sp-20);
  }

  .kl-kd-feats li {
    font-size: 13px;
  }

  .kl-kd-shot img {
    height: 260px;
  }

  .kl-kd-shot figcaption {
    font-size: var(--kl-fs-12);
  }

  /* Payments: three cards side by side, values in a 2×2 grid. */
  .kl-kd-pays {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kl-sp-10);
  }

  /* Countries: one card per country side by side, notes aligned to the bottom. */
  .kl-kd-countries {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kl-sp-10);
    align-items: stretch;
  }

  .kl-kd-country {
    padding: var(--kl-sp-14) var(--kl-sp-16);
  }

  .kl-kd-pay {
    padding: var(--kl-sp-14) var(--kl-sp-16);
  }

  .kl-kd-pay-head {
    margin-bottom: var(--kl-sp-10);
  }

  .kl-kd-pay-vals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kl-sp-10);
  }

  .kl-kd-pays-note {
    font-size: 12px;
  }

  /* Offer strip */
  .kl-kd-offer {
    flex-wrap: nowrap;
    gap: var(--kl-sp-14);
    padding: var(--kl-sp-14) 18px;
  }

  .kl-kd-offer-logo {
    width: 44px;
    height: 44px;
  }

  .kl-kd-offer-title {
    font-size: var(--kl-fs-14);
  }

  .kl-kd-offer-note {
    font-size: 11px;
  }

  .kl-kd-cta--sm {
    padding: 9px 16px;
  }

  /* App + registration sit side by side; the registration CTA is mobile-only. */
  .kl-kd-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kl-sp-24);
    align-items: start;
  }

  .kl-kd-cta--steps {
    display: none;
  }

  .kl-kd-steps li {
    font-size: var(--kl-fs-13);
  }

  /* FAQ */
  .kl-kd-faq-item {
    padding: 13px var(--kl-sp-16);
  }

  .kl-kd-faq-q {
    font-size: 13px;
  }

  .kl-kd-faq-a {
    font-size: var(--kl-fs-13);
  }

  /* Verdict becomes one row: score chip · text · CTA */
  .kl-kd-final {
    flex-direction: row;
    align-items: center;
    gap: var(--kl-sp-20);
    padding: 22px var(--kl-sp-24);
  }

  .kl-kd-final-score {
    align-self: auto;
    padding: var(--kl-sp-10) var(--kl-sp-16);
  }

  .kl-kd-final-num {
    font-size: 24px;
  }

  .kl-kd-final-text {
    flex: 1;
  }

  .kl-kd-final-title {
    font-size: 16px;
  }

  .kl-kd-final-text p {
    font-size: var(--kl-fs-13);
    margin-top: var(--kl-sp-4);
  }

  .kl-kd-final-cta {
    display: inline-block;
    padding: 11px var(--kl-sp-20);
    flex-shrink: 0;
  }

  .kl-kd-legal {
    font-size: 11px;
  }
}