/* ==========================================================================
   /for-retailers — retailer acquisition landing page
   --------------------------------------------------------------------------
   Page-scoped, `kcr-` prefixed, and built entirely on what site.css already
   publishes. It introduces no colour, no typeface and no type step of its own:

   · Type sizes are the DESIGN.md ramp only — 53.6 / 30 / 24.3 / 19 / 17.9 /
     17 / 16.3 / 15.2 / 14.7 / 14 / 12.5 / 11. Fluid headings clamp BETWEEN
     documented steps; they never invent an endpoint.
   · On-light colour is a --kc-* token in every case.
   · On-dark colour uses the ramp the shipped header and footer already use —
     #fff, rgba(255,255,255,.86 / .78 / .72 / .6 / .5) and --kc-brand-accent —
     because DESIGN.md has no on-dark text ramp and the footer is the incumbent
     answer to that question.
   · Sponsored chrome reuses --kc-sponsor and the .sponsored-* language.
     The coming-soon plan reuses the --kc-iq family, exactly as .plan-card--iq
     does on /plans.

   Loaded only by public_site/templates/retailer_landing.html.
   ========================================================================== */

.kcr-hero,
.kcr-stakes,
.kcr-show,
.kcr-feat,
.kcr-steps,
.kcr-marks,
.kcr-pledge,
.kcr-calc,
.kcr-vs,
.kcr-price,
.kcr-faq,
.kcr-close {
  /* One rhythm for the whole page. A band's inner wrapper never overrides it. */
  --kcr-band: clamp(56px, 6.5vw, 100px);
  /* The on-dark text ramp, taken from the shipped footer. */
  --kcr-on-dark:      #fff;
  --kcr-on-dark-1:    rgba(255, 255, 255, .86);
  --kcr-on-dark-2:    rgba(255, 255, 255, .78);
  --kcr-on-dark-3:    rgba(255, 255, 255, .72);
  --kcr-on-dark-4:    rgba(255, 255, 255, .60);
  --kcr-on-dark-5:    rgba(255, 255, 255, .50);
  --kcr-on-dark-rule: rgba(255, 255, 255, .12);
  --kcr-on-dark-wash: rgba(255, 255, 255, .045);
  padding-block: var(--kcr-band);
}

/* Alternating ground. The three dark bands are the page's anchors: it opens on
   one, turns on one in the middle, and closes on one. */
.kcr-stakes,
.kcr-feat,
.kcr-calc,
.kcr-price { background: var(--kc-surface-tint); }
.kcr-show,
.kcr-steps,
.kcr-vs,
.kcr-faq { background: var(--kc-surface-card); }
.kcr-marks { background: var(--kc-surface-tint); }

/* --------------------------------------------------------------------------
   Shared type — DESIGN.md steps only
   -------------------------------------------------------------------------- */

.kcr-h1 {
  font-family: Poppins, system-ui, sans-serif;
  font-size: clamp(30px, 4.4vw, 53.6px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin: 0 0 18px;
  text-wrap: balance;
}
/* "Right now." is one beat and never splits. */
.kcr-h1-em { color: var(--kc-brand-accent); white-space: nowrap; }
/* Shapes the two desktop lines. It is an empty inline element rather than a
   <br> so that turning it off on narrow screens leaves the real space in the
   text behind — a hidden <br> welds "already" to "being". */
.kcr-h1-br { display: block; }

.kcr-h2 {
  font-family: Poppins, system-ui, sans-serif;
  font-size: clamp(24.3px, 2.9vw, 30px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--kc-text-primary);
  margin: 0 0 14px;
  text-wrap: balance;
}
.kcr-h2-c { text-align: center; max-width: 22ch; margin-inline: auto; }

.kcr-sub {
  font-size: 16.3px;
  line-height: 1.68;
  color: var(--kc-text-secondary);
  margin: 0 0 34px;
  max-width: 66ch;
}
.kcr-sub-c { text-align: center; margin-inline: auto; }

.kcr-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

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

/* --------------------------------------------------------------------------
   Sticky offer rail
   -------------------------------------------------------------------------- */

.kcr-rail {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--kc-surface-inverse);
  border-bottom: 1px solid var(--kcr-on-dark-rule);
}
.kcr-rail[hidden] { display: none; }

.kcr-rail-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  flex-wrap: wrap;
  padding-block: 10px;
}
.kcr-rail-copy {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--kcr-on-dark-3);
}
.kcr-rail-copy strong { color: var(--kcr-on-dark); font-weight: 600; }
.kcr-rail-sep { color: var(--kcr-on-dark-5); }
.kcr-rail-price {
  font-family: Poppins, system-ui, sans-serif;
  font-size: 17px; font-weight: 600; color: var(--kcr-on-dark);
  font-variant-numeric: tabular-nums;
}
.kcr-rail-price span { font-size: 12.5px; font-weight: 500; color: var(--kcr-on-dark-3); }
.kcr-rail-save {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kc-surface-inverse); background: var(--kc-brand-accent);
  padding: 4px 9px; border-radius: 999px;
}
.kcr-rail-cta { flex: none; }

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.kcr-hero {
  position: relative;
  isolation: isolate;
  background: var(--kc-surface-inverse);
  color: var(--kcr-on-dark);
  overflow: hidden;
}
/* Material, not decoration: one low field of brand green pooled behind the demo
   panel, over a hairline rule grid that reads as ledger paper under raking
   light. Both are built from tokens already in the palette. */
.kcr-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 8%,
      color-mix(in srgb, var(--kc-brand-deep) 62%, transparent) 0%,
      transparent 62%),
    radial-gradient(80% 70% at 4% 100%,
      color-mix(in srgb, var(--kc-green-900) 85%, transparent) 0%,
      transparent 70%);
}
.kcr-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 100% 34px;
  mask-image: linear-gradient(to bottom, var(--kc-text-primary) 0%, transparent 78%);
}

.kcr-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(32px, 4vw, 68px);
  align-items: center;
}

.kcr-lede {
  font-size: 16.3px;
  line-height: 1.7;
  color: var(--kcr-on-dark-2);
  margin: 0 0 30px;
  max-width: 56ch;
}
.kcr-lede strong { color: var(--kcr-on-dark); font-weight: 600; }

.kcr-hero-act { margin-bottom: 28px; }
.kcr-hero-act .btn { text-decoration: none; }
.kcr-hero-micro {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--kcr-on-dark-4);
  margin: 12px 0 0;
  max-width: 48ch;
}
.kcr-hero-alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kc-brand-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--kc-brand-accent) 40%, transparent);
  padding-bottom: 2px;
}
.kcr-hero-alt:hover { border-bottom-color: var(--kc-brand-accent); }

.kcr-ticks {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}
.kcr-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--kcr-on-dark-1);
}
.kcr-ticks svg { flex: none; margin-top: 2px; color: var(--kc-brand-accent); }

.kcr-hero-trust {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--kcr-on-dark-rule);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--kcr-on-dark-4);
  max-width: 54ch;
}
.kcr-hero-trust svg { flex: none; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Hero three-beat player
   -------------------------------------------------------------------------- */

.kcr-play {
  background: var(--kcr-on-dark-wash);
  border: 1px solid var(--kcr-on-dark-rule);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 26px 54px -26px color-mix(in srgb, var(--kc-green-900) 62%, transparent);
}

.kcr-play-rail {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
}
.kcr-play-rail button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  color: var(--kcr-on-dark-4);
  cursor: pointer;
  transition: color .22s ease, background-color .22s ease, border-color .22s ease;
}
.kcr-play-rail button:hover { color: var(--kcr-on-dark-1); }
.kcr-play-rail button.is-on {
  color: var(--kcr-on-dark);
  background: color-mix(in srgb, var(--kc-brand-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--kc-brand-accent) 36%, transparent);
}
.kcr-play-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 19px; height: 19px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.kcr-play-rail button.is-on .kcr-play-n {
  background: var(--kc-brand-accent);
  border-color: var(--kc-brand-accent);
  color: var(--kc-surface-inverse);
}

.kcr-play-stage { min-height: 336px; }

.kcr-beat[hidden] { display: none; }
.kcr-beat.is-on { animation: kcr-beat-in .42s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes kcr-beat-in {
  from { opacity: 0; transform: translateY(9px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.kcr-play-cap {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--kcr-on-dark-5);
}

/* --------------------------------------------------------------------------
   Mock UI shell — reused by every demonstration on the page
   -------------------------------------------------------------------------- */

.kcr-ui {
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default);
  border-radius: 14px;
  overflow: hidden;
  color: var(--kc-text-primary);
}
.kcr-ui-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--kc-surface-tint);
  border-bottom: 1px solid var(--kc-border-default);
}
.kcr-ui-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kc-text-secondary);
}
.kcr-ui-body { padding: 15px; }
.kcr-ui-body-flush { padding: 0; }
.kcr-ui-note {
  margin: 13px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kc-text-tertiary);
}
.kcr-ui-note-pad { padding: 0 15px 15px; }
.kcr-ui-lift {
  border-color: var(--kc-brand-soft-border);
  box-shadow: 0 16px 34px -20px rgba(22, 33, 28, .3);
}

.kcr-pill {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.kcr-pill-quiet {
  background: var(--kc-surface-card);
  color: var(--kc-text-tertiary);
  border: 1px solid var(--kc-border-default);
}
.kcr-pill-ok {
  background: var(--kc-brand-soft);
  color: var(--kc-brand-deep);
}
.kcr-pill-live {
  background: var(--kc-brand-deep);
  color: var(--kc-text-on-dark);
}
.kcr-pill-deal {
  background: var(--kc-deal-bg);
  color: var(--kc-deal-fg-text);
  border: 1px solid var(--kc-deal-border);
}
/* Sponsored chrome reuses --kc-sponsor exactly as .sponsored-block does. */
.kcr-pill-sponsor {
  background: var(--kc-surface-tint);
  color: var(--kc-text-secondary);
  border: 1px solid var(--kc-border-default);
  box-shadow: inset 3px 0 0 var(--kc-sponsor);
}

/* Beat 1 — search */
.kcr-fauxsearch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--kc-input-border);
  border-radius: 10px;
  background: var(--kc-surface-card);
  font-size: 15.2px;
  color: var(--kc-text-primary);
  min-height: 46px;
}
.kcr-fauxsearch-ic { display: flex; color: var(--kc-text-tertiary); }
.kcr-type::after {
  content: "";
  display: inline-block;
  width: 1.5px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: var(--kc-brand-deep);
  animation: kcr-caret 1s steps(1) infinite;
}
@keyframes kcr-caret { 50% { opacity: 0; } }

.kcr-sugg { list-style: none; margin: 12px 0 0; padding: 0; }
.kcr-sugg li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 2px;
  border-top: 1px solid var(--kc-border-subtle);
  font-size: 14px;
  color: var(--kc-text-secondary);
}
.kcr-sugg li:first-child { border-top: 0; }
.kcr-sugg .kcr-num { color: var(--kc-text-tertiary); font-size: 12.5px; }

/* Beat 2 — comparison table */
.kcr-cmp { width: 100%; border-collapse: collapse; }
.kcr-cmp td {
  padding: 12px 15px;
  border-top: 1px solid var(--kc-border-subtle);
  font-size: 14px;
  color: var(--kc-text-secondary);
  vertical-align: middle;
}
.kcr-cmp tr:first-child td { border-top: 0; }
.kcr-cmp td:nth-child(2) {
  text-align: right;
  font-weight: 600;
  font-size: 17px;
  color: var(--kc-text-primary);
  white-space: nowrap;
}
.kcr-cmp-tag {
  text-align: right;
  font-size: 11px;
  color: var(--kc-text-tertiary);
  white-space: nowrap;
  width: 1%;
}
.kcr-cmp tr.is-you {
  background: var(--kc-brand-xsoft);
  box-shadow: inset 2px 0 0 var(--kc-brand-deep);
}
.kcr-you { font-weight: 700; color: var(--kc-text-primary); }
.kcr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand-deep);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.kcr-cmp-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px 15px;
  border-top: 1px solid var(--kc-border-default);
  background: var(--kc-surface-tint);
}
.kcr-cmp-foot p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kc-text-secondary);
  max-width: 44ch;
}
.kcr-cmp-act {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kc-brand-deep);
  text-decoration: none;
  white-space: nowrap;
}
.kcr-cmp-act:hover { text-decoration: underline; }

/* Beat 3 — enquiry */
.kcr-lead {
  border: 1px solid var(--kc-border-default);
  border-radius: 14px;
  padding: 14px;
  background: var(--kc-surface-card);
}
.kcr-lead > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}
.kcr-lead > header strong { font-size: 14.7px; }
.kcr-lead-price { font-size: 17px; font-weight: 600; }

.kcr-lead-meta { margin: 0 0 11px; display: grid; gap: 6px; }
.kcr-lead-meta > div { display: flex; gap: 10px; font-size: 12.5px; }
.kcr-lead-meta dt { flex: none; width: 88px; color: var(--kc-text-tertiary); }
.kcr-lead-meta dd { margin: 0; color: var(--kc-text-secondary); }

.kcr-lead-body {
  margin: 0 0 13px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--kc-surface-tint);
  font-size: 14px;
  line-height: 1.6;
  color: var(--kc-text-primary);
}
.kcr-lead-act { display: flex; gap: 8px; }
.kcr-btnish {
  padding: 8px 15px;
  border-radius: 10px;
  background: var(--kc-brand-deep);
  color: var(--kc-text-on-dark);
  font-size: 12.5px;
  font-weight: 700;
}
.kcr-btnish-quiet {
  background: var(--kc-surface-card);
  color: var(--kc-text-secondary);
  border: 1px solid var(--kc-field-border);
}

/* --------------------------------------------------------------------------
   2. Stakes
   -------------------------------------------------------------------------- */

.kcr-stakes-grid {
  list-style: none;
  margin: 34px 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.kcr-stakes-grid li {
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default);
  border-radius: 14px;
  padding: 22px 22px 24px;
  display: grid;
  gap: 6px;
  align-content: start;
}
.kcr-stakes-ic {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand-deep);
  margin-bottom: 6px;
}
.kcr-stakes-grid strong {
  font-family: Poppins, system-ui, sans-serif;
  font-size: clamp(24.3px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: var(--kc-text-primary);
}
.kcr-stakes-grid span:last-child {
  font-size: 14px;
  line-height: 1.55;
  color: var(--kc-text-secondary);
}

.kcr-stakes-body {
  max-width: 68ch;
  margin: 0 auto;
  text-align: center;
  font-size: 16.3px;
  line-height: 1.78;
  color: var(--kc-text-secondary);
}
.kcr-stakes-stamp {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--kc-text-tertiary);
}

/* --------------------------------------------------------------------------
   3. Showcase tabs
   -------------------------------------------------------------------------- */

.kcr-tabs-rail {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
}
.kcr-tabs-rail button {
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--kc-border-default);
  background: var(--kc-surface-card);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--kc-text-secondary);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.kcr-tabs-rail button:hover {
  color: var(--kc-text-primary);
  border-color: var(--kc-border-strong);
}
.kcr-tabs-rail button.is-on {
  background: var(--kc-brand-deep);
  border-color: var(--kc-brand-deep);
  color: var(--kc-text-on-dark);
}

.kcr-tabs-stage { max-width: 940px; margin-inline: auto; }
.kcr-panel[hidden] { display: none; }
.kcr-panel.is-on { animation: kcr-beat-in .36s cubic-bezier(.16, 1, .3, 1) both; }

.kcr-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.kcr-rowcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--kc-border-default);
  border-radius: 10px;
}
.kcr-rowcard > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.kcr-rowcard strong { font-size: 14.7px; }
.kcr-rowcard-meta { font-size: 11px; line-height: 1.45; color: var(--kc-text-tertiary); }
.kcr-rowcard-logo {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--kc-brand-deep);
  color: var(--kc-text-on-dark);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.kcr-rowcard-logo-lg { width: 48px; height: 48px; font-size: 15.2px; border-radius: 10px; }
.kcr-rowcard-logo-empty {
  background: var(--kc-surface-tint);
  color: var(--kc-text-quiet);
  border: 1px dashed var(--kc-border-strong);
}
.kcr-rowcard-price { flex: none; font-size: 17px; font-weight: 600; }

.kcr-miss, .kcr-gain { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 8px; }
.kcr-miss li, .kcr-gain li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; line-height: 1.45;
}
.kcr-miss li { color: var(--kc-text-tertiary); }
.kcr-miss svg { flex: none; margin-top: 2px; color: var(--kc-danger); }
.kcr-gain li { color: var(--kc-text-secondary); }
.kcr-gain svg { flex: none; margin-top: 2px; color: var(--kc-brand-deep); }

.kcr-same {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--kc-brand-xsoft);
  border: 1px solid var(--kc-brand-soft-border);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kc-brand-deep);
  font-weight: 600;
}
.kcr-same svg { flex: none; margin-top: 2px; }

.kcr-prof { display: grid; gap: 16px; }
.kcr-prof-id { display: flex; align-items: center; gap: 13px; }
.kcr-prof-id > div { display: grid; gap: 3px; }
.kcr-prof-id strong { font-size: 17.9px; }

.kcr-fields {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 24px;
}
.kcr-fields > div {
  display: grid; gap: 3px;
  padding-top: 10px;
  border-top: 1px solid var(--kc-border-subtle);
}
.kcr-fields dt {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--kc-text-tertiary);
}
.kcr-fields dd { margin: 0; font-size: 14px; color: var(--kc-text-primary); }

.kcr-inbox { list-style: none; margin: 0; padding: 0; }
.kcr-inbox li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border-top: 1px solid var(--kc-border-subtle);
}
.kcr-inbox li:first-child { border-top: 0; }
.kcr-inbox li > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.kcr-inbox strong { font-size: 14px; }
.kcr-inbox li span:not(.kcr-dot):not(.kcr-num) {
  font-size: 12.5px; color: var(--kc-text-tertiary);
}
.kcr-inbox .kcr-num { flex: none; font-size: 17px; font-weight: 600; }
.kcr-inbox li.is-done { opacity: 0.6; }
.kcr-dot {
  flex: none; width: 8px; height: 8px; border-radius: 999px;
  background: var(--kc-brand-deep);
}
.kcr-dot-done { background: var(--kc-border-strong); }

.kcr-kpis {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px;
}
.kcr-kpis li {
  display: grid; gap: 4px;
  padding: 13px 14px;
  border: 1px solid var(--kc-border-default);
  border-radius: 10px;
  background: var(--kc-surface-tint);
}
.kcr-kpis span { font-size: 11px; color: var(--kc-text-tertiary); }
.kcr-kpis strong { font-size: 24.3px; font-weight: 700; letter-spacing: -0.03em; }

.kcr-bars-h {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--kc-text-tertiary);
}
.kcr-bars ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.kcr-bars li {
  display: grid;
  grid-template-columns: minmax(0, 158px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--kc-text-secondary);
}
.kcr-bar {
  height: 7px; border-radius: 999px;
  background: var(--kc-border-subtle);
  overflow: hidden;
}
.kcr-bar i {
  display: block; height: 100%; width: var(--w, 0%);
  border-radius: 999px;
  background: var(--kc-brand-deep);
}
.kcr-bars .kcr-num { font-size: 12.5px; font-weight: 600; color: var(--kc-text-primary); }

.kcr-synth {
  margin: 20px auto 0;
  text-align: center;
  font-size: 11px;
  color: var(--kc-text-tertiary);
}

.kcr-midcta {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.kcr-midcta-alt { font-size: 14px; font-weight: 600; color: var(--kc-text-secondary); }

/* --------------------------------------------------------------------------
   4. Feature grid
   -------------------------------------------------------------------------- */

.kcr-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.kcr-fcard {
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default);
  border-radius: 16px;
  padding: 24px 22px 22px;
  display: grid;
  align-content: start;
  gap: 10px;
}
.kcr-fcard-ic {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand-deep);
  margin-bottom: 2px;
}
.kcr-fcard h3 {
  font-family: Poppins, system-ui, sans-serif;
  font-size: 17.9px; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--kc-text-primary);
  margin: 0;
}
.kcr-fcard p {
  margin: 0;
  font-size: 14px;
  line-height: 1.66;
  color: var(--kc-text-secondary);
}
.kcr-fcard p strong { color: var(--kc-text-primary); font-weight: 600; }

.kcr-mini {
  margin-top: 6px;
  border: 1px solid var(--kc-border-default);
  border-radius: 10px;
  overflow: hidden;
  background: var(--kc-surface-tint);
}
.kcr-mini-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--kc-border-default);
  background: var(--kc-surface-card);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kc-text-secondary);
}
.kcr-mini-rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  padding: 11px;
  font-size: 12.5px;
  color: var(--kc-text-secondary);
}
.kcr-mini-rows .kcr-num { font-weight: 700; color: var(--kc-text-primary); }
.kcr-tick { display: flex; justify-content: flex-end; color: var(--kc-brand-deep); }

.kcr-mini-count { display: flex; align-items: baseline; gap: 9px; padding: 13px 11px; }
.kcr-mini-count strong { font-size: 24.3px; font-weight: 700; letter-spacing: -0.03em; }
.kcr-mini-count span { font-size: 12.5px; color: var(--kc-text-tertiary); }

.kcr-mini-promo { display: grid; gap: 3px; padding: 12px 11px; }
.kcr-mini-promo strong { font-size: 14px; color: var(--kc-text-primary); }
.kcr-mini-promo span { font-size: 11px; color: var(--kc-text-tertiary); }

.kcr-mini-sponsor { display: grid; gap: 7px; padding: 12px 11px; }
.kcr-mini-sponsor-block {
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default);
  box-shadow: inset 3px 0 0 var(--kc-sponsor);
  color: var(--kc-text-secondary);
}
.kcr-mini-sponsor-organic {
  background: var(--kc-brand-soft);
  border-color: var(--kc-brand-soft-border);
  box-shadow: inset 3px 0 0 var(--kc-brand-deep);
  color: var(--kc-brand-deep);
}
.kcr-mini-sponsor-rule { height: 1px; background: var(--kc-border-strong); }

/* --------------------------------------------------------------------------
   5. Steps
   -------------------------------------------------------------------------- */

.kcr-steps-list {
  list-style: none;
  counter-reset: kcr-step;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.kcr-steps-list li {
  counter-increment: kcr-step;
  padding-top: 22px;
  border-top: 2px solid var(--kc-brand-deep);
  display: grid;
  align-content: start;
  gap: 9px;
}
/* The number carries real sequence information — these steps only work in this
   order — so it earns its place. */
.kcr-steps-list li::before {
  content: counter(kcr-step);
  font-family: Poppins, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--kc-brand-deep);
}
.kcr-steps-list h3 {
  font-family: Poppins, system-ui, sans-serif;
  font-size: 19px; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--kc-text-primary);
  margin: 0;
}
.kcr-steps-list p {
  margin: 0;
  font-size: 15.2px; line-height: 1.65;
  color: var(--kc-text-secondary);
}
.kcr-steps-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 3px;
  font-size: 14px; font-weight: 700;
  color: var(--kc-brand-deep);
  text-decoration: none;
}
.kcr-steps-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   5b. Brand wall
   The one place on the page carrying outside imagery. The marks arrive as
   third-party URLs at wildly different aspect ratios and ink weights, so each
   sits in a fixed box, is contained rather than cropped, and is desaturated at
   rest — the wall has to read as one field, not eighteen competing logos.
   -------------------------------------------------------------------------- */

.kcr-marks { --kcr-band: clamp(40px, 4.5vw, 64px); }

.kcr-marks-lede {
  margin: 0 0 26px;
  text-align: center;
  font-size: 16.3px;
  line-height: 1.6;
  color: var(--kc-text-secondary);
}
.kcr-marks-lede strong { color: var(--kc-text-primary); font-weight: 600; }

/* Flex, not grid: the wall's length is however many brands qualify today, and
   an auto-fit grid leaves the tail of the last row as an empty coloured track —
   a hole where a logo should be. Wrapping flex items centre their last row
   instead, and each cell draws its own hairlines so there is no gap colour to
   show through. */
.kcr-marks-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default);
  border-radius: 16px;
  overflow: hidden;
}
.kcr-marks-wall li {
  /* 12 x 120px = 1440, inside the 1600 content column, so the twelve marks
     hold one row at full width and wrap in even pairs below. */
  flex: 1 1 120px;
  max-width: 220px;
  border-left: 1px solid var(--kc-border-subtle);
  border-top: 1px solid var(--kc-border-subtle);
}
.kcr-marks-wall a {
  display: grid;
  place-items: center;
  height: 74px;
  padding: 14px 16px;
  transition: background-color .2s ease;
}
/* Desaturated so a dozen house styles read as one field, but not dimmed at all:
   these are third-party assets at every ink weight, and dimming was making the
   palest of them vanish. Even at full opacity a mark drawn light-on-transparent
   stays faint — there is no CSS fix for that, only replacing the asset, which is
   why the claim on this band lives in the text ("417 brands") and the wall only
   illustrates it. */
.kcr-marks-wall img {
  max-width: 100%;
  max-height: 38px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.15);
  opacity: 1;
  transition: filter .22s ease, opacity .22s ease;
}
.kcr-marks-wall a:hover { background: var(--kc-surface-tint); }
.kcr-marks-wall a:hover img,
.kcr-marks-wall a:focus-visible img { filter: none; opacity: 1; }

.kcr-marks-foot {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 20px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kc-text-tertiary);
}
.kcr-marks-foot > span {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  max-width: 56ch;
}
.kcr-marks-foot svg { flex: none; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Commercial terms under the pricing grid
   -------------------------------------------------------------------------- */

.kcr-terms {
  max-width: 900px;
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--kc-border-default);
  border-radius: 14px;
  overflow: hidden;
  background: var(--kc-surface-card);
}
.kcr-terms > div {
  padding: 16px 18px;
  border-left: 1px solid var(--kc-border-subtle);
  display: grid;
  gap: 5px;
  align-content: start;
}
.kcr-terms > div:first-child { border-left: 0; }
.kcr-terms dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kc-text-tertiary);
}
.kcr-terms dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--kc-text-secondary);
}

/* A "no" tick in a mini panel: same slot, opposite meaning. */
.kcr-tick-no { color: var(--kc-border-strong); }

/* The one line in beat 1 that is about the visitor rather than the buyer. */
.kcr-sugg-you { color: var(--kc-text-primary); font-weight: 600; }
.kcr-sugg-you-n { color: var(--kc-brand-deep) !important; font-weight: 700; }

/* --------------------------------------------------------------------------
   6. Pledge
   -------------------------------------------------------------------------- */

.kcr-pledge {
  background: var(--kc-surface-inverse);
  color: var(--kcr-on-dark);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.kcr-pledge::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 120% at 88% 50%,
    color-mix(in srgb, var(--kc-brand-deep) 46%, transparent) 0%, transparent 68%);
}
.kcr-pledge-in {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 62px);
  align-items: center;
}
.kcr-pledge .kcr-h2 { color: var(--kcr-on-dark); max-width: 17ch; }
.kcr-pledge-copy p {
  font-size: 15.2px;
  line-height: 1.72;
  color: var(--kcr-on-dark-2);
  margin: 0 0 16px;
  max-width: 54ch;
}
.kcr-pledge-sig {
  display: flex; align-items: flex-start; gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--kcr-on-dark-rule);
  font-size: 12.5px !important;
  color: var(--kcr-on-dark-4) !important;
  margin-bottom: 0 !important;
}
.kcr-pledge-sig svg { flex: none; margin-top: 2px; }
.kcr-pledge-sig a { color: var(--kc-brand-accent); text-decoration: underline; text-underline-offset: 2px; }

.kcr-nevers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.kcr-nevers li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px 20px;
  background: var(--kcr-on-dark-wash);
  font-family: Poppins, system-ui, sans-serif;
  font-size: clamp(15.2px, 1.35vw, 17.9px);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--kcr-on-dark-1);
}
.kcr-nevers li:first-child { border-radius: 14px 14px 0 0; }
.kcr-nevers li:last-child { border-radius: 0 0 14px 14px; }
/* The refusals are struck through in muted white, not red: four alarm-coloured
   crosses on a trust statement would read as danger rather than as discipline.
   The single affirmation is the only coloured line, so it lands. */
.kcr-nevers li > span { flex: none; display: flex; margin-top: 2px; color: var(--kcr-on-dark-5); }
.kcr-nevers-yes {
  background: color-mix(in srgb, var(--kc-brand-accent) 15%, transparent) !important;
  color: var(--kcr-on-dark) !important;
  font-weight: 600 !important;
}
.kcr-nevers-yes > span { color: var(--kc-brand-accent) !important; }

/* --------------------------------------------------------------------------
   7. Calculator
   -------------------------------------------------------------------------- */

.kcr-calc-box {
  max-width: 920px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 44px -30px rgba(22, 33, 28, .34);
}
.kcr-calc-in {
  padding: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: center;
}
.kcr-calc-in label {
  display: grid;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kc-text-secondary);
}
.kcr-field {
  display: flex;
  align-items: center;
  border: 1px solid var(--kc-field-border);
  border-radius: 10px;
  background: var(--kc-surface-card);
  padding: 0 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.kcr-field:focus-within {
  border-color: var(--kc-brand-deep);
  box-shadow: 0 0 0 3px var(--kc-brand-xsoft);
}
.kcr-field-pre, .kcr-field-post {
  flex: none;
  font-size: 14.7px;
  font-weight: 600;
  color: var(--kc-text-tertiary);
}
.kcr-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 11px 6px;
  font: inherit;
  /* 16px floor so iOS does not zoom the page on focus — the documented
     `input.minMobileFontSize` in DESIGN.md. */
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--kc-text-primary);
}
.kcr-field input:focus { outline: none; }
.kcr-field input::-webkit-outer-spin-button,
.kcr-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.kcr-calc-out {
  padding: 26px;
  background: var(--kc-surface-inverse);
  color: var(--kcr-on-dark);
  display: grid;
  align-content: start;
}
.kcr-calc-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--kcr-on-dark-rule);
  font-size: 14px;
  color: var(--kcr-on-dark-3);
}
.kcr-calc-line strong {
  font-size: 17px;
  font-weight: 600;
  color: var(--kcr-on-dark);
  white-space: nowrap;
}
.kcr-calc-cost { color: var(--kcr-on-dark-3) !important; font-weight: 500 !important; }
.kcr-calc-net { border-bottom: 0; padding-top: 14px; }
.kcr-calc-net span { font-weight: 700; color: var(--kcr-on-dark); }
.kcr-calc-net strong {
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--kc-brand-accent);
}
.kcr-calc-net strong.is-down { color: var(--kcr-on-dark-3); }

.kcr-calc-verdict {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
  background: var(--kcr-on-dark-wash);
  color: var(--kcr-on-dark-2);
}
.kcr-calc-verdict.is-up {
  background: color-mix(in srgb, var(--kc-brand-accent) 16%, transparent);
  color: var(--kcr-on-dark);
}
.kcr-calc-verdict.is-down {
  background: var(--kcr-on-dark-wash);
  color: var(--kcr-on-dark-2);
}
.kcr-calc-verdict:empty { display: none; }

.kcr-calc-note {
  margin: 18px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kc-text-tertiary);
}

/* --------------------------------------------------------------------------
   8. Before / after
   -------------------------------------------------------------------------- */

.kcr-vs-table {
  max-width: 900px;
  margin: 34px auto 0;
  border: 1px solid var(--kc-border-default);
  border-radius: 14px;
  overflow: hidden;
}
.kcr-vs-head, .kcr-vs-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kcr-vs-head > span {
  padding: 13px 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--kc-surface-tint);
  color: var(--kc-text-tertiary);
}
.kcr-vs-head-on {
  background: var(--kc-surface-inverse) !important;
  color: var(--kc-text-on-dark) !important;
}
.kcr-vs-row > span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid var(--kc-border-subtle);
  font-size: 14px;
  line-height: 1.55;
  color: var(--kc-text-tertiary);
}
.kcr-vs-row > span:last-child {
  background: var(--kc-brand-xsoft);
  color: var(--kc-text-primary);
  font-weight: 600;
  border-left: 1px solid var(--kc-brand-soft-border);
}
.kcr-vs-row > span svg { flex: none; margin-top: 2px; }
.kcr-vs-row > span:first-child svg { color: var(--kc-danger); }
.kcr-vs-row > span:last-child svg { color: var(--kc-brand-deep); }
.kcr-vs-row-same > span:first-child { color: var(--kc-text-primary); font-weight: 600; }
.kcr-vs-row-same > span:first-child svg { color: var(--kc-brand-deep) !important; }

.kcr-vs-foot {
  max-width: 58ch;
  margin: 20px auto 0;
  text-align: center;
  font-size: 15.2px;
  line-height: 1.65;
  color: var(--kc-text-secondary);
}

/* --------------------------------------------------------------------------
   9. Pricing
   -------------------------------------------------------------------------- */

.kcr-price-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-top: 12px;
}
.kcr-pcard {
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default);
  border-radius: 16px;
  padding: 24px 21px 21px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.kcr-pcard.is-founding {
  border-color: var(--kc-brand-deep);
  box-shadow: 0 20px 42px -26px rgba(11, 110, 63, .45);
}
.kcr-pcard.is-soon { background: var(--kc-surface-tint); }

.kcr-pcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  flex-wrap: wrap;
}
.kcr-pcard-head h3 {
  font-family: Poppins, system-ui, sans-serif;
  font-size: 17.9px; font-weight: 600; letter-spacing: -0.025em;
  color: var(--kc-text-primary);
  margin: 0;
}
.kcr-pcard-flag {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
  background: var(--kc-brand-deep); color: var(--kc-text-on-dark);
  white-space: nowrap;
}
.kcr-pcard-flag-q {
  background: var(--kc-surface-tint);
  color: var(--kc-text-tertiary);
}
/* Same violet the /plans KitchenIQ card uses, keyed on "cannot be bought". */
.kcr-pcard-flag-soon { background: var(--kc-iq-soft); color: var(--kc-iq-ink); }
.kcr-pcard.is-soon .kcr-pcard-feats svg { color: var(--kc-iq); }

.kcr-pcard-price { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kcr-pcard-amt {
  font-family: Poppins, system-ui, sans-serif;
  font-size: 30px; font-weight: 700; line-height: 1.05;
  letter-spacing: -0.032em;
  color: var(--kc-text-primary);
  font-variant-numeric: tabular-nums;
}
.kcr-pcard-per { font-size: 12.5px; color: var(--kc-text-tertiary); }

.kcr-pcard-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--kc-text-secondary);
}
.kcr-pcard-note-save {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--kc-brand-xsoft);
  border: 1px solid var(--kc-brand-soft-border);
  color: var(--kc-brand-deep);
  font-weight: 600;
}

.kcr-pcard-feats {
  list-style: none;
  margin: 0;
  padding: 13px 0 0;
  border-top: 1px solid var(--kc-border-subtle);
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
}
.kcr-pcard-feats li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--kc-text-secondary);
}
.kcr-pcard-feats svg { flex: none; margin-top: 2px; color: var(--kc-brand-deep); }
.kcr-pcard-feats li.is-off { color: var(--kc-text-tertiary); }
.kcr-pcard-feats li.is-off svg { color: var(--kc-border-strong); }

.kcr-pcard-act { display: grid; gap: 8px; }
.kcr-pcard-soon {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--kc-text-tertiary);
}

.kcr-price-foot {
  margin: 26px auto 0;
  max-width: 72ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--kc-text-secondary);
}
.kcr-price-foot-ic {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 6px;
  color: var(--kc-brand-deep);
}

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */

.kcr-faq-in { max-width: 840px; }
.kcr-faq-list { display: grid; gap: 9px; margin-top: 30px; }

.kcr-faq-list details {
  border: 1px solid var(--kc-border-default);
  border-radius: 14px;
  background: var(--kc-surface-card);
  overflow: hidden;
}
.kcr-faq-list details[open] { border-color: var(--kc-border-strong); }
.kcr-faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 19px;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 15.2px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.38;
  color: var(--kc-text-primary);
}
.kcr-faq-list summary::-webkit-details-marker { display: none; }
.kcr-faq-list summary > span {
  flex: none;
  position: relative;
  width: 15px; height: 15px;
}
.kcr-faq-list summary > span::before,
.kcr-faq-list summary > span::after {
  content: "";
  position: absolute;
  background: var(--kc-brand-deep);
  border-radius: 999px;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), opacity .24s ease;
}
.kcr-faq-list summary > span::before { inset: 6.5px 0; height: 2px; }
.kcr-faq-list summary > span::after  { inset: 0 6.5px; width: 2px; }
.kcr-faq-list details[open] summary > span::after { transform: rotate(90deg); opacity: 0; }

.kcr-faq-list details > div { padding: 0 19px 18px; }
.kcr-faq-list details p {
  margin: 0;
  font-size: 15.2px;
  line-height: 1.78;
  color: var(--kc-text-secondary);
  max-width: 68ch;
}
.kcr-faq-list details p strong { color: var(--kc-text-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Close
   -------------------------------------------------------------------------- */

.kcr-close {
  background: var(--kc-surface-inverse);
  color: var(--kcr-on-dark);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.kcr-close::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 130% at 50% 0%,
    color-mix(in srgb, var(--kc-brand-deep) 52%, transparent) 0%, transparent 70%);
}
.kcr-close-in { text-align: center; }
.kcr-close .kcr-h2 { color: var(--kcr-on-dark); max-width: 24ch; margin-inline: auto; }
.kcr-close-in > p {
  max-width: 58ch;
  margin: 0 auto;
  font-size: 16.3px;
  line-height: 1.7;
  color: var(--kcr-on-dark-2);
}
.kcr-close-act {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.kcr-close-alt { margin: 18px 0 0; font-size: 14px; color: var(--kcr-on-dark-4); }
.kcr-close-alt a { color: var(--kc-brand-accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   Focus — one visible ring everywhere, on both grounds
   -------------------------------------------------------------------------- */

.kcr-hero :focus-visible,
.kcr-pledge :focus-visible,
.kcr-close :focus-visible,
.kcr-rail :focus-visible,
.kcr-calc-out :focus-visible {
  outline: 2px solid var(--kc-brand-accent);
  outline-offset: 2px;
  border-radius: 7px;
}
.kcr-show :focus-visible,
.kcr-feat :focus-visible,
.kcr-steps :focus-visible,
.kcr-vs :focus-visible,
.kcr-price :focus-visible,
.kcr-faq :focus-visible,
.kcr-calc-in :focus-visible {
  outline: 2px solid var(--kc-brand-deep);
  outline-offset: 2px;
  border-radius: 7px;
}

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

@media (max-width: 1180px) {
  .kcr-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .kcr-hero-in,
  .kcr-pledge-in { grid-template-columns: minmax(0, 1fr); }
  .kcr-hero-in { gap: 40px; }
  .kcr-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcr-steps-list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .kcr-h2-c { max-width: 26ch; }
}

@media (max-width: 780px) {
  .kcr-h1-br { display: inline; }
  .kcr-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcr-terms > div:nth-child(3) { border-left: 0; }
  .kcr-terms > div:nth-child(n+3) { border-top: 1px solid var(--kc-border-subtle); }
  .kcr-stakes-grid { grid-template-columns: minmax(0, 1fr); }
  .kcr-feat-grid { grid-template-columns: minmax(0, 1fr); }
  .kcr-split { grid-template-columns: minmax(0, 1fr); }
  .kcr-fields { grid-template-columns: minmax(0, 1fr); }
  .kcr-calc-box { grid-template-columns: minmax(0, 1fr); }
  .kcr-price-grid { grid-template-columns: minmax(0, 1fr); }
  .kcr-ticks { grid-template-columns: minmax(0, 1fr); }
  .kcr-play-stage { min-height: 0; }
  .kcr-cmp-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kcr-bars li { grid-template-columns: minmax(0, 1fr) auto; }
  .kcr-bars .kcr-bar { grid-column: 1 / -1; }
  .kcr-rail-in { justify-content: space-between; }
  .kcr-rail-save { display: none; }

  /* The two comparison columns stack, so each needs its own visible label. */
  .kcr-vs-head { display: none; }
  .kcr-vs-row { grid-template-columns: minmax(0, 1fr); }
  .kcr-vs-row > span:first-child::after {
    content: "Unclaimed";
    margin-left: auto;
    font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--kc-text-tertiary);
    align-self: center;
  }
  .kcr-vs-row > span:last-child {
    border-left: 0;
    border-top: 1px solid var(--kc-brand-soft-border);
  }
  .kcr-vs-row > span:last-child::after {
    content: "Member";
    margin-left: auto;
    font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--kc-brand-deep);
    align-self: center;
  }
}

@media (max-width: 560px) {
  .kcr-play { padding: 10px; border-radius: 14px; }
  .kcr-terms { grid-template-columns: minmax(0, 1fr); }
  .kcr-terms > div { border-left: 0; }
  .kcr-terms > div + div { border-top: 1px solid var(--kc-border-subtle); }
  .kcr-marks-wall { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .kcr-marks-wall a { height: 62px; }
  .kcr-play-rail { grid-template-columns: minmax(0, 1fr); }
  .kcr-play-rail button { padding: 8px 10px; }
  .kcr-calc-in { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .kcr-calc-out { padding: 20px; }
  .kcr-kpis { grid-template-columns: minmax(0, 1fr); }
  .kcr-close-act .btn { width: 100%; }
  .kcr-rail-copy .kcr-rail-price span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kcr-beat.is-on,
  .kcr-panel.is-on { animation: none; }
  .kcr-type::after { animation: none; }
  .kcr-play-rail button,
  .kcr-tabs-rail button,
  .kcr-field,
  .kcr-faq-list summary > span::before,
  .kcr-faq-list summary > span::after { transition: none; }
}