/* KennCo quote journey — Motor Quote Form Prototype V5 + shared House/Travel */

:root {
  /* V5 prototype tokens (Motor Quote Form Prototype V5.html :root) */
  --kq-navy: #0e3354;
  --kq-text: #1d3b57;
  --kq-blue: #1f66ad;
  --kq-blue-dark: #17538e;
  --kq-sky: #eaf3fc;
  --kq-line: #cfd8e1;
  --kq-line-soft: #e3eaf1;
  --kq-track: #d3e6f7;
  /* Resting field stroke = neutral line (V5 .input); brand used for pills/cards/focus */
  --kq-field-border: #cfd8e1;
  --kq-field-error: #b3261e;
  --kq-field-error-bg: #fdecec;
  --kq-field-focus: #1e8a3f;
  --kq-on: #1e8a3f;
  --kq-on-soft: #e7f5ec;
  --kq-muted: #4d6175;
  --kq-placeholder: #8a99a8;
  --kq-leaf: #5a9a35;
  --kq-leaf-50: #eef8e6;
  --kq-leaf-dark: #4a842a;
  --kq-leaf-700: #2f5a17;
  --kq-leaf-bright: #8cc56a;
  --kq-sun: #f0cf8c;
  --kq-red: #b3261e;
  --kq-red-text: #7a1f1a;
  --kq-warn-bg: #fff6e5;
  --kq-plate-bg: #fffadf;
  --kq-leaf-25: #eef8e6;
  --kq-found-soft: #eef8e6;
  --kq-found-line: #8cc56a;
  --kq-hover-green: #e3f2d5;
  --kq-hover-green-line: #3b6a1e;
  --kq-brand-gradient: linear-gradient(90deg, #5a9a35 0%, #1f66ad 100%);
  --kq-card-shadow: 0 1px 3px rgba(14, 51, 84, 0.08);
  --kq-font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --kq-font-body: Poppins, "Segoe UI", system-ui, sans-serif;
  --kq-radius: 4px;
  --kq-card-radius: 12px;
  /* Prototype .wrap / body.wide .wrap */
  --kq-wrap: 660px;
  --kq-wrap-wide: 1080px;
}

body.kennco-quote-chrome {
  margin: 0;
  background: var(--kq-sky);
  font-family: var(--kq-font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color: var(--kq-text);
}

body.kennco-quote-chrome a {
  color: var(--kq-blue);
}

body.kennco-quote-chrome a:hover {
  color: var(--kq-blue-dark);
}

/* Password managers re-inject icons on every keystroke and block Get Quote. */
body.kennco-quote-chrome [data-lastpass-icon-root],
body.kennco-quote-chrome [data-lastpass-root],
body.kennco-quote-chrome [id^="__lpform"],
body.kennco-quote-chrome [id^="__lastpass"],
body.kennco-quote-chrome iframe[src*="lastpass.com"],
body.kennco-quote-chrome iframe[id^="lpiframe"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* CF7 reCAPTCHA badge is unused on quote journeys and often shows a domain error locally. */
body.kennco-quote-chrome .grecaptcha-badge,
body.kennco-quote-chrome .grecaptcha-error,
body.kennco-quote-chrome iframe[src*="recaptcha"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.kq-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--kq-sky);
}

.kq-app {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.kq-topbar {
  background: #fff;
  border-bottom: 1px solid var(--kq-line-soft);
}

.kq-topbar__inner {
  max-width: 1180px; /* prototype .site-header-in */
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kq-topbar__logo img {
  height: 34px;
  width: auto;
  display: block;
}

.kq-topbar__phone {
  text-align: right;
}

.kq-topbar__phone > a:not(.kq-topbar__phone-link) {
  display: block;
  font: 600 14px/1.3 Poppins, sans-serif;
  color: var(--kq-blue);
  text-decoration: none;
}

/* V6 prototype .phone-link */
.kq-topbar__phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--kq-navy);
  text-decoration: none;
  font: 400 14px/1.3 var(--kq-font-body);
}

.kq-topbar__phone-link svg {
  width: 16px;
  height: 16px;
  color: var(--kq-blue);
  flex: none;
}

.kq-topbar__phone-link b {
  font-size: 16px;
  font-weight: 600;
  color: var(--kq-blue);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.kq-topbar__phone-link:hover b {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kq-topbar__phone-link:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
  border-radius: 4px;
}

.kq-topbar__hours {
  display: block;
  margin-top: 2px;
  font: 400 11px/1.4 Poppins, sans-serif;
  color: var(--kq-muted);
}

@media (max-width: 480px) {
  .kq-topbar__phone-pre {
    display: none;
  }
}

.kq-topbar__aside {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.kq-mode-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 8px;
  padding: 0 12px 24px;
}

.kq-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  font: 600 11px/1.35 Poppins, sans-serif;
  text-decoration: none;
  white-space: normal;
  text-align: center;
  max-width: min(420px, 92vw);
}

.kq-mode--mock {
  background: var(--kq-plate-bg);
  color: var(--kq-navy);
  border: 1px solid var(--kq-sun);
}

.kq-mode--nav {
  background: var(--kq-leaf-25);
  color: var(--kq-leaf-dark);
  border: 1px solid var(--kq-leaf);
}

.kq-nav-debug {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  max-width: none;
  max-height: min(28vh, 260px);
  display: flex;
  flex-direction: column;
  background: #0b2740;
  color: #ecf6fe;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 32px rgba(6, 56, 91, 0.35);
  font: 500 12px/1.4 Poppins, sans-serif;
  overflow: hidden;
  border-top: 1px solid rgba(165, 216, 253, 0.35);
}

.kq-nav-debug.is-size-collapsed {
  max-height: none;
}

.kq-nav-debug.is-size-collapsed .kq-nav-debug__list {
  display: none;
}

.kq-nav-debug.is-size-compact {
  max-height: min(28vh, 260px);
}

.kq-nav-debug.is-size-tall {
  max-height: min(55vh, 520px);
}

.kq-nav-debug--off {
  max-height: none;
  width: auto;
  left: 12px;
  right: auto;
  bottom: 12px;
  border-radius: 10px;
  border-top: 0;
}

/* Keep quote CTAs clear of the dock */
html[data-kq-debug-size="collapsed"] body {
  padding-bottom: 52px;
}

html[data-kq-debug-size="compact"] body {
  padding-bottom: min(28vh, 260px);
}

html[data-kq-debug-size="tall"] body {
  padding-bottom: min(55vh, 520px);
}

.kq-nav-debug__journey {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 8px 12px 0;
  background: #06385b;
  color: #d3ecfd;
  font-size: 11.5px;
  line-height: 1.35;
  border-bottom: 0;
}

.kq-nav-debug__journey-product {
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.kq-nav-debug__journey-sep {
  opacity: 0.5;
}

.kq-nav-debug__journey-step {
  color: #a5d8fd;
  font-weight: 600;
}

.kq-nav-debug__journey-hint {
  flex: 1 1 100%;
  color: #7ddea2;
  font-weight: 500;
}

.kq-nav-debug__live {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 8px;
  background: #06385b;
  color: #a5d8fd;
  font-size: 11px;
  line-height: 1.3;
}

.kq-nav-debug__live.is-warn {
  color: #ffe2b0;
}

.kq-nav-debug__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ddea2;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(125, 222, 162, 0.25);
}

.kq-nav-debug__live.is-warn .kq-nav-debug__live-dot {
  background: #ffb86c;
  box-shadow: 0 0 0 2px rgba(255, 184, 108, 0.25);
}

.kq-nav-debug__draft {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(165, 216, 253, 0.28);
  border-radius: 8px;
  background: rgba(0, 40, 70, 0.55);
}

.kq-nav-debug__draft-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: #fff;
  font-size: 12px;
}

.kq-nav-debug__draft-tag {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(125, 222, 162, 0.2);
  color: #7ddea2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kq-nav-debug__draft-note {
  margin: 0 0 8px;
  color: #9ec9e8;
  font-size: 11px;
  line-height: 1.4;
}

.kq-nav-debug__draft-tip {
  margin: 0 0 8px;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(110, 180, 255, 0.12);
  border: 1px solid rgba(110, 180, 255, 0.25);
  color: #d7ecff;
  font-size: 11px;
  line-height: 1.4;
}

.kq-nav-debug__draft-tip strong {
  color: #9ec9e8;
}

.kq-nav-debug__golden {
  margin: 0 10px 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kq-nav-debug__golden strong {
  font-weight: 700;
}

.kq-nav-debug__golden.is-ok {
  background: rgba(125, 222, 162, 0.14);
  border: 1px solid rgba(125, 222, 162, 0.4);
  color: #c8f5d8;
}

.kq-nav-debug__golden.is-warn {
  background: rgba(255, 180, 60, 0.14);
  border: 1px solid rgba(255, 200, 100, 0.35);
  color: #ffe2b0;
}

.kq-nav-debug__golden.is-fail {
  background: rgba(220, 80, 80, 0.18);
  border: 1px solid rgba(255, 160, 160, 0.4);
  color: #ffd4d4;
}

.kq-nav-debug__postman {
  padding: 0 10px 6px;
  color: #b8e0ff;
  font-size: 11px;
}

.kq-nav-debug__postman span {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(165, 216, 253, 0.18);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kq-nav-debug__postman em {
  font-style: normal;
  color: #8fb4ce;
}

.kq-nav-debug__when {
  padding: 0 10px 6px;
  color: #9ec9e8;
  font-size: 11px;
}

.kq-nav-debug__reason {
  margin: 0 10px 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kq-nav-debug__reason strong {
  font-weight: 700;
}

.kq-nav-debug__reason.is-fail {
  background: rgba(220, 80, 80, 0.18);
  border: 1px solid rgba(255, 160, 160, 0.4);
  color: #ffd4d4;
}

.kq-nav-debug__reason.is-warn {
  background: rgba(255, 180, 60, 0.14);
  border: 1px solid rgba(255, 200, 100, 0.35);
  color: #ffe2b0;
}

.kq-nav-debug__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 8px 12px;
  background: #06385b;
  border-bottom: 1px solid rgba(165, 216, 253, 0.25);
  flex-shrink: 0;
}

.kq-nav-debug__title {
  flex: 1 1 180px;
  min-width: 140px;
  text-align: left;
  background: transparent;
  border: 0;
  color: #fff;
  font: 600 12px/1.3 Poppins, sans-serif;
  cursor: pointer;
  padding: 0;
}

.kq-nav-debug__btn {
  border: 1px solid rgba(165, 216, 253, 0.45);
  background: transparent;
  color: #a5d8fd;
  border-radius: 999px;
  padding: 4px 10px;
  font: 600 11px/1 Poppins, sans-serif;
  cursor: pointer;
}

.kq-nav-debug__btn:hover {
  background: rgba(165, 216, 253, 0.12);
  color: #fff;
}

.kq-nav-debug__btn.is-active {
  background: rgba(165, 216, 253, 0.18);
  color: #fff;
  border-color: #a5d8fd;
}

.kq-nav-debug__list {
  overflow: auto;
  padding: 8px 12px 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.kq-nav-debug__empty {
  margin: 8px 4px;
  color: #a5d8fd;
}

.kq-nav-debug__row {
  border: 1px solid rgba(165, 216, 253, 0.2);
  border-radius: 8px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.kq-nav-debug__row.is-err {
  border-color: rgba(220, 80, 80, 0.55);
}

.kq-nav-debug__summary {
  width: 100%;
  display: grid;
  grid-template-columns: 64px 42px 1fr;
  gap: 4px 8px;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 8px 10px;
  font: inherit;
}

.kq-nav-debug__kind {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 10px;
  color: #8fb4ce;
}

.kq-nav-debug__row.is-commit .kq-nav-debug__kind {
  color: #7ddea2;
}

.kq-nav-debug__status {
  font-weight: 700;
  color: #7ddea2;
}

.kq-nav-debug__row.is-err .kq-nav-debug__status {
  color: #ffb4b4;
}

.kq-nav-debug__op {
  grid-column: 1 / -1;
  color: #fff;
  font-weight: 600;
}

.kq-nav-debug__system {
  grid-column: 1 / -1;
  color: #a5d8fd;
}

.kq-nav-debug__ms {
  grid-column: 1 / -1;
  color: #8fb4ce;
}

.kq-nav-debug__expect {
  padding: 0 10px 8px;
  color: #c5e4f8;
  font-size: 11.5px;
  line-height: 1.45;
}

.kq-nav-debug__ops {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

.kq-nav-debug__opblock {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(125, 222, 162, 0.22);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
}

.kq-nav-debug__opblock.is-err {
  border-color: rgba(255, 120, 120, 0.45);
}

.kq-nav-debug__ophead {
  margin-bottom: 6px;
  color: #d3ecfd;
  font-size: 12px;
}

.kq-nav-debug__fields {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 6px;
  font-size: 11px;
}

.kq-nav-debug__fields th,
.kq-nav-debug__fields td {
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: top;
  word-break: break-word;
}

.kq-nav-debug__fields th {
  color: #9ec9e8;
  font-weight: 600;
}

.kq-nav-debug__fields tr.is-ok td:nth-child(2) {
  color: #7ddea2;
}

.kq-nav-debug__fields tr.is-return-empty td:nth-child(2) {
  color: #9ec9e8;
}

.kq-nav-debug__fields tr.is-empty td:nth-child(2),
.kq-nav-debug__fields tr.is-missing td:nth-child(2) {
  color: #ffb86c;
}

.kq-nav-debug__fields code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: #e8f4fc;
}

.kq-nav-debug__fields td.kq-nav-debug__help {
  color: #9eb6c8;
  font-size: 10.5px;
  max-width: 280px;
}

.kq-nav-debug__fields td.kq-nav-debug__help.is-fallback {
  color: #7a8fa3;
  font-style: italic;
}

.kq-nav-debug__ops ol {
  margin: 0;
  padding-left: 1.2rem;
  color: #d3ecfd;
}

.kq-nav-debug__ops li.is-err {
  color: #ffb4b4;
}

.kq-nav-debug__ops code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.kq-nav-debug__row.is-commit {
  border-color: rgba(125, 222, 162, 0.35);
}

.kq-nav-debug__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 8px;
}

.kq-nav-debug__chips span {
  background: rgba(0, 104, 178, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
}

.kq-nav-debug__bodies {
  display: none;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 10px 10px;
}

.kq-nav-debug__row.is-open .kq-nav-debug__bodies {
  display: grid;
}

@media (min-width: 720px) {
  .kq-nav-debug__bodies {
    grid-template-columns: 1fr 1fr;
  }
}

.kq-nav-debug__label {
  color: #a5d8fd;
  font-weight: 600;
  margin-bottom: 4px;
}

.kq-nav-debug__bodies pre {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 8px;
  border-radius: 6px;
  background: #021526;
  color: #d3ecfd;
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.kq-progress {
  max-width: var(--kq-wrap, 660px);
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px 0;
  box-sizing: border-box;
}

/* V5: quote + summary are wide — progress bar matches the layout width */
.kq-progress:has(+ .kq-main--quote),
.kq-progress:has(+ .kq-quote-back),
.kq-progress:has(+ .kq-main--summary) {
  max-width: var(--kq-wrap-wide, 1080px);
}

/* Legacy top Back — kept inert; Master V2 uses .kq-qp__quote-nav under the layout */
.kq-quote-back {
  display: none;
}

.kq-progress__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.kq-progress__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 14px var(--kq-font-body);
  color: var(--kq-blue);
}

.kq-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--kq-line);
  border-radius: 99px;
  padding: 3px 10px 3px 7px;
  font: 600 11.5px Poppins, sans-serif;
  color: var(--kq-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kq-chip svg,
.kq-chip img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.kq-progress__sub {
  font: 400 12px Poppins, sans-serif;
  color: var(--kq-muted);
}

.kq-progress__track {
  height: 6px;
  border-radius: 999px;
  background: var(--kq-track);
  overflow: hidden;
}

.kq-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--kq-blue);
  transition: width 0.4s ease;
}

.kq-main {
  flex: 1;
  width: 100%;
  /* Prototype .wrap — keep side padding at 16px so the card hits full wrap width */
  max-width: var(--kq-wrap, 660px);
  margin: 0 auto;
  padding: 20px 16px 96px;
  box-sizing: border-box;
}

.kq-main--picker {
  width: min(100% - 3rem, 46rem);
  max-width: 46rem;
  margin-inline: auto;
  padding: 3.25rem 0 3rem;
}

.kq-picker {
  margin-inline: auto;
  max-width: none;
  width: 100%;
}

/* Netlify get-a-quote page shell */
body.kq-picker-page {
  background: #f7fafb;
}

body.kq-picker-page .kq-shell,
body.kq-picker-page.kennco-quote-chrome {
  background: #f7fafb;
}

body.kq-picker-page .kq-legal {
  padding: 1.5rem;
  font-size: 0.6875rem;
  line-height: 1.8;
}

.kq-card {
  background: #fff;
  border-radius: var(--kq-card-radius);
  box-shadow: var(--kq-card-shadow);
  /* Prototype .card */
  padding: 40px 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (max-width: 560px) {
  .kq-card {
    padding: 28px 20px 32px;
  }
}

.kq-h1 {
  display: block;
  width: 100%;
  max-width: none;
  font: 700 clamp(26px, 5vw, 32px) / 1.2 var(--kq-font-display);
  letter-spacing: -0.01em;
  color: var(--kq-navy);
  margin: 0 0 4px;
}

/* Contact / Home screens with no lead — breathe between title and first field */
.kq-h1 + .kq-field,
.kq-h1 + .kq-home-about {
  margin-top: 18px;
}

.kq-h1--hero {
  font-size: clamp(28px, 6vw, 36px);
  margin: 16px 0 6px;
}

.kq-lead {
  font: 400 15px / 1.5 var(--kq-font-body);
  color: var(--kq-muted);
  margin: 0 0 24px;
}

/*
 * V6 page-sub + info-btn: tip must sit after the last word, not flex-pushed
 * to the far right of the card. Cover both:
 *   - new: <p class="kq-lead--with-tip">copy <button>
 *   - old: <div class="kq-lead-with-tip"><p class="kq-lead">…</p><button>
 */
.kq-lead-with-tip,
.kq-lead--with-tip {
  display: block;
  margin: 0 0 24px;
}

.kq-lead-with-tip .kq-lead {
  display: inline;
  margin: 0;
  flex: none;
}

.kq-lead--with-tip .kq-lead__text {
  display: inline;
}

.kq-lead--with-tip .kq-lead__tip-slot {
  display: inline;
  white-space: nowrap;
}

.kq-lead-with-tip .kq-tip-btn,
.kq-lead--with-tip .kq-tip-btn,
.kq-lead--with-tip .kq-tip-btn--after-text {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: auto !important;
  vertical-align: -0.2em;
  margin: 0 0 0 0.35em !important;
  float: none !important;
  position: static !important;
  inset: auto !important;
  flex: none !important;
}

.kq-lead-with-tip + .kq-tip,
.kq-lead--with-tip + .kq-tip {
  margin-top: -12px;
  margin-bottom: 16px;
}

.kq-lead--hero {
  font-size: 15px;
}

.kq-suit-stack,
.kq-stack.kq-suit-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Travel decls — title breathes above IMPORTANT NOTE suit-box (Motor .kq-page-head) */
.kq-h1 + .kq-suit-stack {
  margin-top: 22px; /* + .kq-h1 4px mb → 26px */
}

/* V5 .fields / .field — 10px label→control, 24px between fields */
.kq-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 24px;
  position: relative;
}

.kq-field--nested {
  margin-left: 12px;
  padding-left: 14px;
  border-left: 3px solid var(--kq-line-soft);
}

/* “Is this your car/van?” — sit tight under the found card */
.kq-field.kq-field--car-confirm,
.kq-reveal > .kq-field.kq-field--car-confirm {
  margin-bottom: 0;
}

/* Car/van not-found warn — sit tight under the Yes/No (no extra top gap) */
#kq-car-no-warn {
  margin-top: 0;
}

/* “Is this your address?” — sit tight before the next field
   (Travel Your details → Phone; Motor/Home end-of-screen is harmless).
   CSS-only via :has so Travel markup can stay untouched. */
.kq-field:has([data-field='addrConfirm']) {
  margin-bottom: 0;
}

.kq-field:has([data-field='addrConfirm']) > .kq-err-slot:empty {
  display: none;
  min-height: 0;
}

/* Van “Is this policy in a company name?” — tighter before DOB; helper already
   sits under the chips, so don’t also reserve an empty error line. */
.kq-field:has([data-field='isCompany']) {
  margin-bottom: 12px;
  gap: 8px;
}

.kq-field:has([data-field='isCompany']) > .kq-helper + .kq-err-slot:empty {
  display: none;
  min-height: 0;
}

/* Convictions page — title breathes above the guidance box; fields sit tight */
.kq-convs > .kq-h1 {
  margin-bottom: 1rem;
}

.kq-convs > .kq-note {
  margin-bottom: 1rem;
}

.kq-field.kq-field--flush {
  margin-bottom: 0;
}

/* Return date (Travel) — tighter gap before trip-length readout */
.kq-field.kq-field--after-tight {
  margin-bottom: 12px;
}

/* V2 prototype .readout — trip length / cover-ends line */
.kq-readout {
  margin: 0;
  padding: 0;
  font: 600 14.5px / 1.5 var(--kq-font-body);
  color: var(--kq-navy);
}

.kq-readout span {
  font-weight: 400;
  color: var(--kq-muted);
}

/* Home “A little about you” / “A few details about your home” — 12px field gaps */
.kq-home-about > .kq-field {
  margin-bottom: 12px;
}

.kq-home-about > .kq-field.kq-field--flush {
  margin-bottom: 0;
}

.kq-home-about > .kq-field:last-child {
  margin-bottom: 12px;
}

.kq-field:last-child {
  margin-bottom: 8px;
}

.kq-field > .kq-helper,
.kq-field > .kq-err,
.kq-field > .kq-err-slot {
  margin-top: 0;
}

/* Contact email — tighter gap before phone (24 → 12) */
.kq-field:has([name='quoteEmail']) {
  margin-bottom: 12px;
}

.kq-field:has([name='quoteEmail']) > .kq-helper {
  margin-bottom: 0.5rem;
}

/* KD-109: long email addresses must not overflow on mobile */
.kq-field:has([name='quoteEmail']),
.kq-field:has([name='email']) {
  min-width: 0;
}
.kq-input[name='quoteEmail'],
.kq-input[name='email'] {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kq-pay-check b,
.kq-pay-total__meta b,
.kq-qp-sum__rows dd,
.kq-recap__val,
.kq-sum-row dd {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Empty error slots stay out of the layout until an error is shown.
   Chip rows keep a reserved line (KD-29) so clearing a chip error does not bounce. */
.kq-err-slot:empty {
  display: none;
}

.kq-opts--h + .kq-err-slot:empty,
.kq-field:has(> .kq-opts--h) > .kq-err-slot:empty {
  display: block;
  min-height: calc(13px * 1.5);
  visibility: hidden;
  pointer-events: none;
}

.kq-opts--h + .kq-err-slot:not(:empty),
.kq-field:has(> .kq-opts--h) > .kq-err-slot:not(:empty),
.kq-consent + .kq-err-slot:not(:empty) {
  display: block;
  min-height: calc(13px * 1.5);
  visibility: visible;
}

/* Consent stacks: never reserve empty error space between boxes. */
.kq-stack > .kq-consent + .kq-err-slot:empty {
  display: none;
  min-height: 0;
  margin: 0;
}

/* Space between last field helper (e.g. phone) and consent stack */
.kq-field:has(+ .kq-stack) {
  margin-bottom: 24px;
}

/* Avoid scroll-anchoring nudges while chip rows re-render (KD-29). */
.kq-main .kq-field {
  overflow-anchor: none;
}

.kq-err-slot .kq-err {
  margin-top: 0;
}

/* KD-82: tip after last word of the label (inline), not a side flex sibling */
.kq-label {
  display: block;
  margin-bottom: 0;
  font: 600 15px / 1.5 var(--kq-font-body);
  color: var(--kq-navy);
}

.kq-label__text {
  display: inline;
  min-width: 0;
  margin-bottom: 0;
  line-height: 1.5;
}

.kq-label__text > .kq-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.2em;
  margin: 0 0 0 0.35em;
}

.kq-req {
  color: var(--kq-field-error, #b30000);
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}

.kq-consent .kq-req {
  margin-left: 4px;
}

.kq-input,
.kq-select,
.kq-textarea {
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--kq-field-border);
  border-radius: var(--kq-radius);
  font: 400 16px var(--kq-font-body);
  color: var(--kq-navy);
  background: #fff;
  outline: none;
  transition: none;
}

.kq-textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 16px;
}

.kq-input::placeholder,
.kq-textarea::placeholder {
  color: var(--kq-placeholder);
}

/* V5 .input.valid — green only when a real value is present (.has-value).
   Do not use :placeholder-shown — empty inputs without a placeholder were matching. */
.kq-input.has-value:not(.is-error):not(:focus),
.kq-date-btn.has-value:not(.is-error),
.kq-select-btn.has-value:not(.is-error),
.kq-select.has-value:not(.is-error):not(.kq-select--native):not(:focus) {
  border-color: var(--kq-on);
  box-shadow: inset 0 0 0 1px var(--kq-on);
}

/* Dropdown chevron — Figma 1124:195 (Tertiary/Dark Blue 500 #3E4883) */
.kq-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 48px;
  background-color: #fff;
  background-image: url("../images/quote/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;
}

.kq-select::-ms-expand {
  display: none;
}

/* V5: no layout-shift borders on hover/focus — outline only */
.kq-input:hover:not(.kq-plate):not(:focus):not(.is-error),
.kq-textarea:hover:not(:focus):not(.is-error) {
  border-color: var(--kq-blue);
}

.kq-input:focus-visible,
.kq-textarea:focus-visible,
.kq-select:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 1px;
  border-color: var(--kq-blue);
  box-shadow: none;
}

/* Neutralise browser :invalid until we mark .is-error after validation */
.kq-input:invalid,
.kq-input:user-invalid {
  border: 1px solid var(--kq-field-border);
  background: #fff;
  box-shadow: none;
}

.kq-input.is-error,
.kq-select.is-error,
.kq-textarea.is-error,
.kq-select-btn.is-error,
.kq-date-btn.is-error {
  border-color: var(--kq-field-error);
  box-shadow: inset 0 0 0 1px var(--kq-field-error);
  background: #fff;
}

.kq-input.is-error:focus-visible,
.kq-textarea.is-error:focus-visible {
  outline-color: #f0a8a4;
  border-color: var(--kq-field-error);
}

.kq-input:-webkit-autofill,
.kq-input:-webkit-autofill:hover,
.kq-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--kq-navy);
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 99999s ease-out;
}

.kq-input::placeholder {
  color: var(--kq-placeholder);
}

/* Travel Step 2 — start + return stacked (prototype column; V5 date-btn each) */
.kq-date-range {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

.kq-date {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 100%;
  min-width: 0; /* KD-114 */
}

.kq-date > *,
.kq-dob > * {
  min-width: 0;
}

/* V5 Prototype .select / .select-btn + .listbox (no native iOS reopen). */
.kq-select-wrap {
  position: relative;
  width: 100%;
}

.kq-select-btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--kq-blue, #2f6fad);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  color: var(--kq-navy);
  font: 400 16px / 1.3 Poppins, sans-serif;
  box-sizing: border-box;
}

.kq-select-btn__val.is-ph {
  color: #4d6175;
}

.kq-select-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--kq-navy);
  transition: transform 0.15s ease;
}

.kq-select-btn[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.kq-select-btn:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 1px;
}

.kq-select-btn.has-value {
  border-color: var(--kq-on, #1e8a3f);
  box-shadow: inset 0 0 0 1px var(--kq-on, #1e8a3f);
}

.kq-select-btn.is-error {
  border-color: var(--kq-field-error, #b30000);
  box-shadow: inset 0 0 0 1px var(--kq-field-error, #b30000);
}

.kq-select--native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
  background: none !important;
}

.kq-select__popup {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
}

.kq-select__popup:empty {
  display: none;
}

.kq-listbox {
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 290px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--kq-line, #c3ccd5);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(14, 51, 84, 0.18);
}

.kq-lb-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  background: none;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: var(--kq-navy);
  font: 400 15px / 1.3 Poppins, sans-serif;
  box-sizing: border-box;
}

.kq-lb-opt:hover,
.kq-lb-opt:focus-visible {
  background: var(--kq-sky, #e8f2fb);
  outline: none;
}

.kq-lb-opt[aria-selected='true'] {
  background: var(--kq-blue, #2f6fad);
  color: #fff;
  font-weight: 600;
}

.kq-lb-opt svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.kq-lb-empty {
  padding: 11px 12px;
  color: var(--kq-muted, #6b7c8f);
  font-size: 14px;
}

.kq-field:has(.kq-listbox),
.kq-field:has(.kq-select-btn[aria-expanded='true']) {
  position: relative;
  z-index: 20;
}

/* V5 Prototype .date-wrap / .date-btn — button opens custom calendar (no typing). */
.kq-date--v5 {
  position: relative;
  display: block;
  width: 100%;
}

.kq-date-btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--kq-line);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  color: var(--kq-navy);
  font: 400 16px / 1.3 Poppins, sans-serif;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.kq-date-btn:hover {
  border-color: var(--kq-blue);
}

.kq-date-btn:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 1px;
  border-color: var(--kq-blue);
}

.kq-date-btn.has-value {
  border-color: var(--kq-on, #1e8a3f);
  box-shadow: inset 0 0 0 1px var(--kq-on, #1e8a3f);
}

.kq-date-btn__val.is-ph {
  color: #8a99a8;
}

.kq-date-btn svg {
  width: 20px;
  height: 20px;
  color: var(--kq-blue);
  flex: none;
}

.kq-date__popup {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  /* Above sticky quote chrome / NAV debug dock / stacked driver cards */
  z-index: 10090;
}

.kq-date__popup.is-above,
.kq-dob__popup.is-above {
  top: auto;
  bottom: calc(100% + 6px);
  z-index: 10090;
}

.kq-date__popup:empty {
  display: none;
}

.kq-field:has(.kq-date .picker),
.kq-field:has(.kq-date .kq-cal),
.kq-field:has(.kq-dob .kq-cal) {
  position: relative;
  /* Keep open calendar above subsequent fields, cards, and the debug dock */
  z-index: 10090;
}

/* Reuse V5 DOB picker chrome under ISO date fields */
.kq-date .picker {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--kq-line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(6, 56, 91, 0.14);
  box-sizing: border-box;
}

.kq-date .pk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.kq-date .pk-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--kq-navy);
  font: 600 15px / 1.2 Poppins, sans-serif;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.kq-date span.pk-title {
  cursor: default;
}

.kq-date .pk-title:hover {
  background: var(--kq-blue-soft, #ecf6fe);
}

.kq-date span.pk-title:hover {
  background: transparent;
}

.kq-date .pk-title svg {
  width: 14px;
  height: 14px;
}

.kq-date .pk-nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--kq-blue);
  cursor: pointer;
  padding: 0;
}

.kq-date .pk-nav:hover:not(:disabled) {
  background: var(--kq-blue-soft, #ecf6fe);
}

.kq-date .pk-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.kq-date .pk-nav svg {
  width: 18px;
  height: 18px;
}

.kq-date .pk-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.kq-date .pk-grid.wide {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.kq-date .pk-dow {
  text-align: center;
  font: 500 11px / 1 Poppins, sans-serif;
  color: var(--kq-muted);
  padding: 4px 0;
}

.kq-date .pk-day,
.kq-date .pk-cell {
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--kq-navy);
  font: 500 14px / 1 Poppins, sans-serif;
  cursor: pointer;
  padding: 0;
}

.kq-date .pk-day:hover:not(:disabled),
.kq-date .pk-cell:hover:not(:disabled) {
  background: var(--kq-blue-soft, #ecf6fe);
}

.kq-date .pk-day:disabled,
.kq-date .pk-cell:disabled {
  opacity: 0.3;
  cursor: default;
}

.kq-date .pk-day.today {
  box-shadow: inset 0 0 0 1.5px var(--kq-blue);
}

.kq-date .pk-day.sel,
.kq-date .pk-cell.sel {
  background: var(--kq-blue);
  color: #fff;
}

.kq-date .pk-day:focus-visible,
.kq-date .pk-cell:focus-visible,
.kq-date .pk-nav:focus-visible,
.kq-date .pk-title:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 1px;
}

.kq-date__text {
  flex: 1;
  min-width: 0;
}

.kq-date__cal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kq-blue);
  cursor: pointer;
  border-radius: 4px;
}

.kq-date__cal:hover,
.kq-date__cal:focus-visible {
  color: var(--kq-navy);
  outline: none;
  background: var(--kq-blue-soft, #ecf6fe);
}

.kq-date__picker {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* Litepicker — KennCo quote journey skin (overrides vendor CSS variables) */
body.kennco-quote-chrome {
  --litepicker-container-months-color-bg: #fff;
  --litepicker-container-months-box-shadow-color: transparent;
  --litepicker-month-header-color: var(--kq-navy);
  --litepicker-button-prev-month-color: var(--kq-blue);
  --litepicker-button-next-month-color: var(--kq-blue);
  --litepicker-button-prev-month-color-hover: var(--kq-navy);
  --litepicker-button-next-month-color-hover: var(--kq-navy);
  --litepicker-month-weekday-color: var(--kq-muted);
  --litepicker-day-color: var(--kq-navy);
  --litepicker-day-color-hover: var(--kq-blue);
  --litepicker-is-today-color: var(--kq-blue);
  --litepicker-is-in-range-color: var(--kq-line-soft);
  --litepicker-is-locked-color: var(--kq-placeholder);
  --litepicker-is-start-color: #fff;
  --litepicker-is-start-color-bg: var(--kq-blue);
  --litepicker-is-end-color: #fff;
  --litepicker-is-end-color-bg: var(--kq-blue);
  --litepicker-tooltip-color-bg: var(--kq-navy);
  --litepicker-day-width: 40px;
  --litepicker-month-width: 280px;
}

.litepicker,
.litepicker.kq-litepicker {
  font-family: Poppins, system-ui, sans-serif;
  color: var(--kq-navy);
  border: 1px solid var(--kq-line);
  border-radius: 8px;
  box-shadow: var(--kq-card-shadow), 0 12px 32px rgba(6, 56, 91, 0.12);
  /* Above quote chrome / Buggie; do not clip dual-month range panels */
  z-index: 10050;
  overflow: visible;
}

.litepicker .container__months {
  background: #fff;
  border-radius: 8px;
}

.litepicker .month-item-header {
  padding: 12px 8px 8px;
  color: var(--kq-navy);
  font: 600 14px / 1.4 Poppins, sans-serif;
  align-items: center;
  gap: 16px;
}

/* Month + year dropdown row (DOB pickers with dropdowns.months/years) */
.litepicker .month-item-header > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  /* Keep selects clear of prev/next arrows even when the column is tight */
  padding-inline: 6px;
}

.litepicker .container__months .month-item-header .button-previous-month,
.litepicker .container__months .month-item-header .button-next-month {
  color: var(--kq-blue);
  cursor: pointer;
  flex: 0 0 auto;
  padding: 4px 6px;
}

.litepicker .month-item-header .button-previous-month:hover,
.litepicker .month-item-header .button-next-month:hover {
  color: var(--kq-navy);
}

.litepicker .month-item-weekdays-row {
  color: var(--kq-muted);
  font: 500 12px / 1.4 Poppins, sans-serif;
}

.litepicker .month-item-name,
.litepicker .month-item-year {
  font: 600 14px / 1.4 Poppins, sans-serif !important;
  color: var(--kq-navy) !important;
}

/* Equal-height month/year <select>s — match quote field chrome */
.litepicker select.month-item-name,
.litepicker select.month-item-year {
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  margin-right: 0 !important;
  padding: 0 32px 0 10px !important;
  border: 1px solid var(--kq-field-border);
  border-radius: 4px;
  background-color: #fff;
  background-image: url("../images/quote/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
  color: var(--kq-navy) !important;
  font: 500 14px / 1 Poppins, sans-serif !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  vertical-align: middle;
  text-overflow: clip;
}

.litepicker select.month-item-name {
  flex: 0 1 auto;
  width: auto;
  min-width: 116px;
  max-width: 100%;
}

.litepicker select.month-item-year {
  flex: 0 0 auto;
  width: 72px;
  min-width: 72px;
}

/* Two-month range: tighter chevron padding so "September"/"November" fit */
.litepicker select.month-item-name,
.litepicker select.month-item-year {
  padding: 0 24px 0 8px !important;
  background-position: right 6px center;
  font-size: 13px !important;
}

.litepicker select.month-item-name:hover,
.litepicker select.month-item-year:hover,
.litepicker select.month-item-name:focus,
.litepicker select.month-item-year:focus,
.litepicker select.month-item-name:focus-visible,
.litepicker select.month-item-year:focus-visible {
  border-color: var(--kq-field-border);
  background-color: var(--kq-sky);
  outline: none;
}

.litepicker select.month-item-name::-ms-expand,
.litepicker select.month-item-year::-ms-expand {
  display: none;
}

.litepicker .container__days .day-item {
  color: var(--kq-navy);
  font: 500 13px / 1 Poppins, sans-serif;
  border-radius: 4px;
}

.litepicker .container__days .day-item:hover {
  background: var(--kq-sky) !important;
  color: var(--kq-navy) !important;
  box-shadow: none !important;
}

.litepicker .container__days .day-item.is-today {
  box-shadow: inset 0 0 0 1px var(--kq-field-border) !important;
}

.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date,
.litepicker .container__days .day-item.is-start-date:hover,
.litepicker .container__days .day-item.is-end-date:hover {
  background: var(--kq-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.litepicker .container__days .day-item.is-in-range,
.litepicker .container__days .day-item.is-in-range:hover {
  background: var(--kq-line-soft) !important;
  color: var(--kq-navy) !important;
  box-shadow: none !important;
}

.litepicker .container__days .day-item.is-locked,
.litepicker .container__days .day-item.is-locked:hover {
  color: var(--kq-placeholder) !important;
  background: transparent !important;
  opacity: 0.45;
}

.litepicker .container__tooltip {
  background: var(--kq-navy);
  color: #fff;
  font: 500 12px / 1.3 Poppins, sans-serif;
  border-radius: 4px;
}

/* V5: resume text-link sits tight under the reg helper (inside the same field rhythm) */
.kq-field:has(+ .kq-reg-resume) {
  margin-bottom: 6px;
}

/* V6: space above “If you do not have a registration number…” (prototype .field gap 10px) */
.kq-field:has(+ .kq-reg-resume) > .kq-row + .kq-helper {
  margin-top: 10px;
}

.kq-reg-resume {
  margin: 2px 0 16px;
}

.kq-found + .kq-reg-resume {
  margin-top: 12px;
}

/* Reg confirm → “Next we’ll ask…” note — pull up under Yes/No */
.kq-reveal > .kq-field:has(+ .kq-helper) {
  margin-bottom: 8px;
}

.kq-reveal > .kq-helper {
  margin: 0 0 4px;
  color: var(--kq-muted);
  font: 400 13.5px / 1.5 var(--kq-font-body);
}

/* Highlighted registration field — light yellow fill + brand gradient stroke (Figma 452:1786 / 452:1802) */
.kq-input.kq-plate {
  flex: 1;
  min-width: 170px;
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: 4px;
  background:
    linear-gradient(var(--kq-plate-bg), var(--kq-plate-bg)) padding-box,
    var(--kq-brand-gradient) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--kq-navy);
  font: 600 14px / 20px Poppins, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kq-input.kq-plate::placeholder {
  color: #667085;
  font-weight: 500;
  opacity: 1;
}

.kq-input.kq-plate:hover,
.kq-input.kq-plate:active {
  border: 2px solid transparent;
  padding: 12px 14px;
  background:
    linear-gradient(var(--kq-plate-bg), var(--kq-plate-bg)) padding-box,
    var(--kq-brand-gradient) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.kq-input.kq-plate:focus,
.kq-input.kq-plate:focus-visible {
  border: 2px solid transparent;
  padding: 12px 14px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 104, 178, 0.18);
  background:
    linear-gradient(var(--kq-plate-bg), var(--kq-plate-bg)) padding-box,
    var(--kq-brand-gradient) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Successful vehicle/address lookup — Leaf Green/25 fill + Leaf Green/400 stroke (Figma 452:1797) */
.kq-input.kq-plate.kq-plate--success,
.kq-input.kq-plate.kq-plate--success:hover,
.kq-input.kq-plate.kq-plate--success:focus,
.kq-input.kq-plate.kq-plate--success:focus-visible {
  border: 2px solid var(--kq-leaf-bright);
  padding: 12px 14px;
  background: var(--kq-leaf-25);
  box-shadow: none;
}

.kq-input.kq-plate.kq-plate--locked,
.kq-input.kq-plate.kq-plate--locked:hover,
.kq-input.kq-plate.kq-plate--locked:focus,
.kq-input.kq-plate.kq-plate--locked:focus-visible {
  cursor: default;
  opacity: 0.92;
  box-shadow: none;
}

.kq-row--locked {
  align-items: stretch;
}

/* Locked reg helper — space before the found-car card */
.kq-field > .kq-row--locked + .kq-helper {
  padding-bottom: 12px;
}

/* Locked registration: plate above Change registration on narrow phones */
@media (max-width: 475px) {
  .kq-row--locked {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .kq-row--locked .kq-input,
  .kq-row--locked .kq-plate,
  .kq-row--locked .kq-btn {
    width: 100%;
    flex: none;
  }
}

.kq-dob {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* V5 prototype --on */
  --kq-on: #1e8a3f;
}

.kq-dob .kq-input {
  text-align: center;
  flex: 1 1 56px;
  width: auto;
  min-width: 0;
  max-width: 64px;
  height: 50px;
  padding: 0 6px;
  box-sizing: border-box;
  font-size: 16px;
}

.kq-dob .kq-input--year {
  flex: 1.35 1 72px;
  max-width: 86px;
}

/* Narrow phones: DD/MM/YYYY + calendar must fit inside the quote card */
@media (max-width: 400px) {
  .kq-dob {
    gap: 6px;
  }

  .kq-dob .kq-input {
    padding: 0 4px;
  }

  .kq-dob__cal {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }

  .kq-dob__cal svg {
    width: 20px;
    height: 20px;
  }
}

.kq-input--upper {
  text-transform: uppercase;
}

/* Keep 50px DOB boxes when global .kq-input:hover fattens the border */
.kq-dob .kq-input:hover:not(.kq-plate),
.kq-dob .kq-input:focus,
.kq-dob .kq-input:focus-visible {
  padding: 0 5px;
  height: 50px;
}

.kq-field:has(.kq-cal) {
  position: relative;
  /* Match open date/DOB popup stacking (was 20 — sat under following driver cards) */
  z-index: 10090;
}

/* V5 prototype cal-btn — opens custom years→months→days overlay */
.kq-dob__cal {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kq-blue);
  cursor: pointer;
  border-radius: 8px;
}

.kq-dob__cal svg {
  width: 22px;
  height: 22px;
}

.kq-dob__cal:hover,
.kq-dob__cal:focus-visible {
  color: var(--kq-blue);
  outline: none;
  background: var(--kq-blue-soft, #ecf6fe);
}

.kq-dob__cal:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 1px;
}

.kq-dob__popup {
  position: absolute;
  z-index: 10060;
  top: calc(100% + 6px);
  left: 0;
}

.kq-dob__popup:empty {
  display: none;
}

/* V5 prototype .picker — custom DOB calendar (not the product-picker page) */
.kq-cal {
  width: 320px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border: 1px solid var(--kq-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(14, 51, 84, 0.18);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.kq-pk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.kq-pk-title {
  font-weight: 600;
  color: var(--kq-navy);
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 15px;
}

span.kq-pk-title {
  cursor: default;
}

.kq-pk-title:hover {
  background: var(--kq-blue-soft, #ecf6fe);
}

span.kq-pk-title:hover {
  background: none;
}

.kq-pk-title svg {
  width: 14px;
  height: 14px;
  color: var(--kq-blue);
}

.kq-pk-nav {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--kq-blue);
  display: grid;
  place-items: center;
  padding: 0;
}

.kq-pk-nav:hover:not(:disabled) {
  background: var(--kq-blue-soft, #ecf6fe);
}

.kq-pk-nav:disabled {
  color: #c3ccd5;
  cursor: default;
}

.kq-pk-nav svg {
  width: 18px;
  height: 18px;
}

.kq-pk-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.kq-pk-grid--wide {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.kq-pk-dow {
  font-size: 11.5px;
  color: var(--kq-muted);
  font-weight: 600;
  padding: 4px 0;
  letter-spacing: 0.04em;
}

.kq-pk-day {
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--kq-navy);
  font-family: inherit;
  padding: 0;
}

.kq-pk-cell {
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--kq-navy);
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  padding: 0;
}

.kq-pk-day:hover:not(:disabled),
.kq-pk-cell:hover:not(:disabled) {
  background: var(--kq-blue-soft, #ecf6fe);
}

.kq-pk-day:disabled,
.kq-pk-cell:disabled {
  color: #c3ccd5;
  cursor: default;
}

.kq-pk-day.is-today {
  box-shadow: inset 0 0 0 1px var(--kq-blue);
}

.kq-pk-day.is-sel,
.kq-pk-cell.is-sel {
  background: var(--kq-blue);
  color: #fff;
  font-weight: 600;
}

.kq-pk-day:focus-visible,
.kq-pk-cell:focus-visible,
.kq-pk-nav:focus-visible,
.kq-pk-title:focus-visible {
  outline: 2px solid var(--kq-blue);
  outline-offset: 1px;
}

/* Legacy native DOB input slot (unused; kept for older markup) */
.kq-dob__picker {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.kq-helper {
  margin-top: 0;
  color: var(--kq-muted);
  font: 400 13.5px / 1.5 var(--kq-font-body);
}

/* Prototype #f-nameNote — sit tight under Title, pull First name up */
.kq-field:has(+ .kq-name-note) {
  margin: 0px;
}

.kq-name-note {
  margin: 0 0 -4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  font-family: var(--kq-font-body);
  color: var(--kq-navy);
  margin-bottom: 0.5rem;
}

/* First name + surname pair — tighter than the default 24px field rhythm */
.kq-name-note + .kq-field {
  margin-bottom: 12px;
}

.kq-err {
  margin: 0;
  margin-top: 6px;
  color: var(--kq-red);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  font-family: Poppins, sans-serif;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.kq-err svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}

/* V5 / Travel V2 .hint-box — bubble on container; text is margin-only */
.kq-tip {
  margin-top: 12px;
  margin-bottom: 8px;
  background: var(--kq-navy);
  border-radius: 4px;
  padding: 10px 14px;
  font: 700 13.5px / 1.5 Poppins, sans-serif;
  color: #fff;
}

.kq-tip__text {
  margin: 0;
  font: 700 13.5px / 1.5 Poppins, sans-serif;
  color: #fff;
}

.kq-tip__text + .kq-tip__text {
  margin-top: 0.75em;
}

.kq-tip__text strong {
  font-weight: 700;
}

/* Tip is navy — beat body.kennco-quote-chrome a (brand blue) so links stay readable. */
body.kennco-quote-chrome .kq-tip a,
.kq-tip a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.kennco-quote-chrome .kq-tip a:hover,
body.kennco-quote-chrome .kq-tip a:focus-visible,
.kq-tip a:hover,
.kq-tip a:focus-visible {
  color: #dce9f5;
}

.kq-tip__img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-top: 10px;
  border-radius: 4px;
}

.kq-label + .kq-tip {
  margin-top: 0;
  margin-bottom: 0;
}

.kq-field > .kq-tip {
  margin-top: 0;
  margin-bottom: 0;
}

/* Tip / info button — desktop 22×22; mobile (≤640px) 28×28 */
.kq-tip-btn {
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  align-self: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  padding: 0;
  color: var(--kq-blue);
  vertical-align: middle;
}

.kq-tip-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}

.kq-tip-btn:hover {
  background: var(--kq-blue-soft, #ecf6fe);
}

.kq-tip-btn:focus-visible {
  outline: 2px solid var(--kq-blue);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .kq-tip-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  .kq-tip-btn svg {
    width: 28px;
    height: 28px;
  }
}

/* Space tip away from Yes/No (and similar) option rows */
.kq-row > .kq-opts + .kq-tip-btn,
.kq-opts--h + .kq-tip-btn {
  margin-left: 12px;
}

.kq-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kq-row:has(.kq-opts) {
  gap: 14px;
  align-items: center;
}

.kq-row .kq-input {
  flex: 1;
  min-width: 0;
}

/* Narrow phones: Eircode / Find car — input full width above button */
@media (max-width: 380px) {
  .kq-row:has([data-act='lookup-eircode']),
  .kq-row:has([data-act='lookup-car']) {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .kq-row:has([data-act='lookup-eircode']) .kq-input,
  .kq-row:has([data-act='lookup-car']) .kq-input,
  .kq-row:has([data-act='lookup-eircode']) .kq-btn,
  .kq-row:has([data-act='lookup-car']) .kq-btn {
    width: 100%;
    flex: none;
  }
}

.kq-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kq-opts--h {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

.kq-opts--cover {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
}

.kq-opts--cover .kq-opt,
.kq-opt--cover {
  flex: none;
  width: 100%;
  margin-bottom: 0;
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  box-sizing: border-box;
}

.kq-opts--cover .kq-opt.is-on,
.kq-opt--cover.is-on {
  border: 1px solid var(--kq-blue);
  background: var(--kq-blue);
  color: #fff;
}

.kq-opts--cover .kq-opt.is-on:hover,
.kq-opt--cover.is-on:hover {
  background: var(--kq-blue-dark);
  border-color: var(--kq-blue-dark);
}

.kq-opt.is-on .kq-opt__title {
  color: #fff;
  font-weight: 600;
}

.kq-opt.is-on .kq-opt__feat {
  color: #fff;
}

.kq-opt.is-on .kq-opt__tick {
  color: #9fe0b2;
}

.kq-opt.is-on .kq-opt__note {
  background: rgba(255, 255, 255, 0.12);
  color: #e6f0fa;
}

.kq-opt__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kq-opt__title {
  font: 500 14.5px Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-opt__feats {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 30px;
  width: 100%;
  box-sizing: border-box;
}

.kq-opt__feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 13.5px / 20.25px Poppins, sans-serif;
  color: var(--kq-navy);
  text-align: left;
}

.kq-opt__tick {
  flex: 0 0 auto;
  color: #5a9e2e;
  font: 700 13.5px / 20.25px Poppins, sans-serif;
}

.kq-opt__note {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #f6fbff;
  font: 400 13px / 19.5px Poppins, sans-serif;
  color: var(--kq-muted);
  text-align: left;
}

.kq-field--cover {
  margin-bottom: 0;
  padding-bottom: 8px;
}

.kq-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  min-height: 52px;
  border: 1px solid var(--kq-blue);
  border-radius: var(--kq-radius);
  cursor: pointer;
  background: #fff;
  font: 500 15px var(--kq-font-body);
  color: var(--kq-navy);
  user-select: none;
  text-align: left;
  box-sizing: border-box;
  transition: background-color 0.15s ease;
}

.kq-opt:hover {
  background: #f4f9fe;
  border-color: #5a9fd4;
}

.kq-opt:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

/* Selected = solid brand fill + white text (V5 .pill.on / .card-opt.on) */
.kq-opt.is-on {
  border-color: var(--kq-blue);
  background: var(--kq-blue);
  color: #fff;
  font-weight: 600;
}

.kq-opt.is-on:hover {
  background: var(--kq-blue-dark);
  border-color: var(--kq-blue-dark);
}

/* Chips (Title / Yes-No) — same hover language as full-width opts */
.kq-opt--chip:hover:not(.is-on) {
  background: #f4f9fe;
  border-color: #5a9fd4;
}

.kq-opt.is-on:active {
  background: var(--kq-blue-dark);
  border-color: var(--kq-blue-dark);
}

.kq-cover-incl {
  border: 1px solid #D3ECFD;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  width: 100%;
}

.kq-cover-incl__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 0;
  background: #fff;
  cursor: pointer;
  font: 600 14px Poppins, sans-serif;
  color: var(--kq-navy);
  text-align: left;
}

.kq-cover-incl__body {
  padding: 0 18px 18px;
}

.kq-cover-incl .kq-incl {
  grid-template-columns: 1fr;
  gap: 0;
}

.kq-cover-incl .kq-incl__item {
  gap: 10px;
}

.kq-cover-incl__note {
  background: #F6FBFF;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
}

.kq-opt--chip {
  /* V5 .pill — Yes/No and title chips */
  justify-content: center;
  min-width: 56px;
  height: 46px;
  min-height: 46px;
  padding: 0 16px;
  gap: 0;
  box-sizing: border-box;
}

.kq-opt__sub {
  display: block;
  font: 400 13px / 1.45 Poppins, sans-serif;
  color: var(--kq-muted);
}

.kq-opt.is-on .kq-opt__sub {
  color: #dbe9f7;
}

.kq-opt__price {
  font: 600 14px Poppins, sans-serif;
  color: var(--kq-blue);
  flex: none;
}

.kq-opt.is-on .kq-opt__price {
  color: #fff;
}

.kq-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #344054;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.kq-opt.is-on .kq-dot {
  border-color: #fff;
}

.kq-dot__in {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kq-blue);
  display: block;
}

.kq-opt.is-on .kq-dot__in {
  background: #fff;
}

/* Check inside a selected option / consent row — white box + brand tick */
.kq-opt.is-on .kq-check.is-on,
.kq-consent.is-on .kq-check.is-on {
  border-color: #fff;
  background: #fff;
  color: var(--kq-blue);
}

.kq-opt.is-on .kq-check.is-on svg,
.kq-consent.is-on .kq-check.is-on svg {
  stroke: var(--kq-blue);
}

.kq-check {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid #344054;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  box-sizing: border-box;
  color: #fff;
}

.kq-check.is-on {
  /* Keep 2px border so tick toggle does not resize the box (consent bounce). */
  border: 2px solid #fff;
  background: #fff;
  color: var(--kq-blue);
}

.kq-consent {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  padding: 13px 16px;
  border: 1px solid var(--kq-blue);
  border-radius: var(--kq-radius);
  font: 400 14.5px / 1.5 var(--kq-font-body);
  color: var(--kq-navy);
  background: #fff;
  transition: background-color 0.15s ease;
}

.kq-consent > span:not(.kq-check) {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.kq-consent:hover {
  background: #f4f9fe;
  border-color: #5a9fd4;
}

/* V5 .check-row.on */
.kq-consent.is-on,
.kq-consent:has(.kq-check.is-on) {
  background: var(--kq-blue);
  color: #fff;
  border-color: var(--kq-blue);
}

.kq-consent.is-on .kq-req,
.kq-consent:has(.kq-check.is-on) .kq-req {
  color: #ffd0cc;
}

.kq-consent a {
  color: var(--kq-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kq-consent a:hover {
  text-decoration: none;
}

.kq-consent.is-on a,
.kq-consent:has(.kq-check.is-on) a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kq-consent.is-on a:hover,
.kq-consent:has(.kq-check.is-on) a:hover {
  text-decoration: none;
}

.kq-consent.is-on .kq-optional,
.kq-consent:has(.kq-check.is-on) .kq-optional {
  color: #dbe9f7;
}

.kq-btn {
  min-height: 52px;
  padding: 0 28px;
  background: var(--kq-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  font: 600 16px var(--kq-font-body);
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kq-btn:hover {
  background: var(--kq-blue-dark);
}

body.kennco-quote-chrome a.kq-btn {
  color: #fff;
  text-decoration: none;
}

body.kennco-quote-chrome a.kq-btn--ghost,
body.kennco-quote-chrome button.kq-btn--ghost,
body.kennco-quote-chrome .kq-btn.kq-btn--ghost {
  color: var(--kq-blue);
  background: #fff;
}

.kq-btn--ghost {
  background: #fff;
  border: 1px solid var(--kq-blue);
  color: var(--kq-blue);
  box-shadow: none;
}

.kq-btn--ghost:hover {
  background: var(--kq-sky);
  color: var(--kq-blue);
}

.kq-btn--leaf {
  background: var(--kq-leaf);
}

.kq-btn--leaf:hover {
  background: var(--kq-leaf-dark);
}

/* Travel V2 Worldnet sim — .btn-go */
.kq-btn--go {
  background: var(--kq-leaf);
  color: #fff;
  border: 0;
}

.kq-btn--go:hover {
  background: var(--kq-leaf-dark);
  color: #fff;
}

.kq-btn--lg {
  min-height: 52px;
  padding: 0 28px;
  font-size: 16px;
}

.kq-btn--block {
  width: 100%;
  padding: 16px;
  font-size: 16px;
}

.kq-btn:disabled,
.kq-btn.is-disabled,
.kq-btn[aria-disabled="true"] {
  background: #d5dde5;
  color: #5c6b79;
  cursor: not-allowed;
  box-shadow: none;
}

/* V6 Find my car / Find address — keep brand colour while looking up (prototype .btn-find[disabled]) */
.kq-btn.is-looking,
.kq-btn.is-looking:disabled {
  gap: 8px;
  background: var(--kq-blue);
  color: #fff;
  opacity: 0.75;
  cursor: progress;
  box-shadow: none;
}

.kq-btn.is-looking:hover,
.kq-btn.is-looking:disabled:hover {
  background: var(--kq-blue-dark);
  color: #fff;
}

.kq-btn.is-looking .kq-spin {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .kq-btn.is-looking .kq-spin {
    animation: none;
  }
}

.kq-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.kq-back {
  font: 600 14px Poppins, sans-serif;
  color: var(--kq-blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
}

/* KD-120: ≤442px — "Back to re-cap" sits below the primary button. */
@media (max-width: 442px) {
  .kq-nav.kq-nav--recap {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .kq-nav.kq-nav--recap .kq-btn {
    width: 100%;
  }
  .kq-nav.kq-nav--recap .kq-back {
    justify-content: center;
    padding: 8px 0;
  }
}

/* Master V2 .nav: Back left + primary right at every width (no full-width stack on phones). */

/* Successful search result — Leaf Green/25 + Leaf Green/400 (Figma 452:1797) */
.kq-found {
  background: var(--kq-found-soft);
  border: 1px solid var(--kq-found-line);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Optional cover / promo strip (not a search result) */
.kq-offer {
  background: var(--kq-sky);
  border: 1px solid var(--kq-line);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

/* Additional driver was easy to scroll past in client review — give it a stronger edge. */
.kq-offer--driver {
  border-left: 4px solid var(--kq-leaf, #75c044);
}

.kq-offer--driver.kq-offer--disabled {
  border-left-color: #98a2b3;
  opacity: 0.92;
  background: #f8fafc;
}

.kq-offer--driver.kq-offer--disabled .kq-btn.is-disabled {
  pointer-events: none;
}

.kq-found__kicker {
  font: 600 12px var(--kq-font-body);
  color: var(--kq-leaf-700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0;
}

.kq-found__row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.kq-found__marque {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--kq-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-sizing: border-box;
}

.kq-found__marque img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.kq-found__title {
  font: 600 17px var(--kq-font-body);
  color: var(--kq-navy);
}

.kq-found__body {
  font: 400 14px var(--kq-font-body);
  color: var(--kq-muted);
}

.kq-need {
  background: var(--kq-sky);
  border: 1px solid #b7d4ee;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kq-need strong,
.kq-need .kq-need__title {
  display: block;
  font: 600 13px Poppins, sans-serif;
  color: var(--kq-navy);
  margin-bottom: 4px;
}

.kq-need p,
.kq-need .kq-need__body {
  font: 400 13px / 1.6 Poppins, sans-serif;
  color: var(--kq-muted);
  margin: 0;
}

.kq-alert {
  background: #fdecec;
  border: 1px solid var(--kq-red);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
  color: var(--kq-red-text);
}

.kq-alert h2 {
  font: 600 14px Poppins, sans-serif;
  margin: 0 0 4px;
}

.kq-alert p {
  font: 400 13.5px / 1.55 Poppins, sans-serif;
  margin: 0;
}

.kq-alert p + p {
  margin-top: 10px;
}

.kq-alert__ref {
  letter-spacing: 0.04em;
}

.kq-alert a {
  display: inline-block;
  margin-top: 10px;
  font: 600 14px Poppins, sans-serif;
  color: var(--kq-red-text);
}

/* Inline tel links in stop copy (suitability / non-motor) stay in the sentence. */
.kq-alert p a {
  display: inline;
  margin-top: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
}

.kq-note {
  background: var(--kq-warn-bg);
  border: 1px solid var(--kq-sun);
  border-radius: 8px;
  padding: 14px 18px;
  font: 400 13.5px / 1.55 Poppins, sans-serif;
  color: var(--kq-navy);
  margin-bottom: 20px;
}

/* Master V2: inline “summary page” link inside amber notes */
.kq-inline-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--kq-blue, #1a6fb5);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.kq-inline-link:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Master V2 Driver & licence — stacked driver cards
 * Prototype .field.drv-f.d-last { padding-bottom: 24px } */
.kq-drv-card {
  border: 1px solid #cfe0f1;
  border-radius: 12px;
  background: #fff;
  margin: 0 0 20px;
  padding-bottom: 24px;
  /* Clip header fill to radius; open calendars need overflow:visible (below). */
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/*
 * Licence expiry (and DOB) calendars sit in .kq-date__popup inside the card.
 * overflow:hidden clips them when they open below/above the field; sibling
 * cards also paint over a low z-index popup. Lift the open card and unclip.
 */
.kq-drv-card:has(.kq-date__popup:not(:empty)),
.kq-drv-card:has(.kq-dob__popup:not(:empty)),
.kq-drv-card:has(.kq-cal) {
  overflow: visible;
  z-index: 10080;
}
.kq-drv-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 28px;
  background: #f3f8fd;
  border-bottom: 1px solid #dde9f5;
  /* Keep rounded top when the card temporarily uses overflow:visible for calendars */
  border-radius: 12px 12px 0 0;
}
.kq-drv-card__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kq-muted, #5c6b79);
}
.kq-drv-card__title {
  margin: 2px 0 0;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--kq-navy, #0e3354);
}
.kq-drv-card__status {
  flex: none;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef1f4;
  color: #5b6b7b;
  white-space: nowrap;
}
.kq-drv-card__status.is-done {
  background: #e7f5ec;
  color: #1e6b35;
}
.kq-drv-card__meta {
  margin: 16px 28px 8px;
  display: grid;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #f3f6f9;
  border: 1px solid #dfe6ee;
}
/* Card padding-bottom owns the d-last gap when meta is the last block (renew). */
.kq-drv-card__meta:last-child {
  margin-bottom: 0;
}
.kq-drv-card__meta > div {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 8px;
}
.kq-drv-card__meta dt {
  color: var(--kq-muted, #5c6b79);
  font-size: 14px;
}
.kq-drv-card__meta dd {
  margin: 0;
  font-weight: 600;
  color: var(--kq-navy, #0e3354);
}
.kq-drv-card .kq-field,
.kq-drv-card > .kq-note {
  margin-left: 28px;
  margin-right: 28px;
}

/* Licence expiry — always 18px under the field (KD-126). */
.kq-drv-card .kq-field.kq-field--dn-expiry {
  margin-bottom: 18px;
}
.kq-drv-card > .kq-note {
  margin-bottom: 20px;
}
.kq-drv-card > .kq-note:last-child {
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .kq-drv-card__head {
    padding-left: 16px;
    padding-right: 16px;
  }
  .kq-drv-card__meta,
  .kq-drv-card .kq-field,
  .kq-drv-card > .kq-note {
    margin-left: 16px;
    margin-right: 16px;
  }
  .kq-drv-card__meta > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.kq-note--info {
  background: var(--kq-sky);
  border: 1px solid var(--kq-line);
  font-size: 14.5px;
}

/* Home V3 / Travel V2 .notice-info — icon + body (when rendered via K.info) */
.kq-note--info:has(.kq-note__info-ico) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.kq-note--info .kq-note__info-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--kq-blue);
  display: inline-grid;
  place-items: center;
}

.kq-note--info .kq-note__info-ico svg {
  width: 18px;
  height: 18px;
  display: block;
}

.kq-note--info .kq-note__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* V5 Prototype .notice-warn — stop / check-registration messages */
.kq-note--warn {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff6e5;
  border: 1px solid #f0cf8c;
  color: #5a3d00;
  margin-top: 12px;
  margin-bottom: 8px;
}

.kq-note--warn .kq-note__warn-ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #b7791f;
}

.kq-note--warn .kq-note__body {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

.kq-note--warn .kq-tel {
  color: var(--kq-blue);
}

/* Renewal Check your details — Motor Renewal Prototype .rn-change */
.kq-note--rn-change {
  margin-top: 0;
  padding: 14px 16px;
  border-radius: var(--kq-radius, 4px);
}

.kq-note--rn-change .kq-note__body strong {
  display: block;
  margin-bottom: 2px;
  color: #3d2900;
}

.kq-note--rn-change .kq-tel,
.kq-note--rn-change .kq-tel:hover,
.kq-note--rn-change .kq-tel:focus-visible {
  color: inherit;
  font-weight: 600;
}

.kq-note--expect {
  background: var(--kq-sky);
  border: 1px dashed var(--kq-line);
  border-radius: 8px;
  padding: 14px 18px;
  max-width: 420px;
  margin: 0 auto 28px;
  text-align: left;
  font: 400 13.5px / 1.55 Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-note--expect strong {
  font-weight: 600;
}

.kq-partner {
  font-weight: 600;
}

.kq-spin {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--kq-line-soft);
  border-top-color: var(--kq-blue);
  border-radius: 50%;
  animation: kqspin 0.7s linear infinite;
  display: inline-block;
}

.kq-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--kq-blue);
  font: 500 14px Poppins, sans-serif;
  margin-bottom: 20px;
}

/* Prototype .saving — full-page loading between renew / quote steps */
.kq-calc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 72px 16px 96px;
  text-align: center;
  outline: none;
  animation: kqfade 0.3s ease;
}

.kq-calc .kq-spin {
  width: 64px;
  height: 64px;
  border-width: 6px;
  border-color: #d6e7f8;
  border-top-color: var(--kq-blue);
  border-right-color: var(--kq-blue);
  animation: kqspin 1s linear infinite;
}

.kq-calc p {
  margin: 0;
  font-family: var(--kq-font-display);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.25;
  color: var(--kq-navy);
}

@media (prefers-reduced-motion: reduce) {
  .kq-calc .kq-spin {
    animation-duration: 3s;
  }
}

.kq-quote {
  background: var(--kq-navy);
  border-radius: 12px;
  padding: clamp(22px, 5vw, 34px);
  color: #fff;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.kq-quote__kicker {
  font: 600 12px Poppins, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kq-line);
  margin-bottom: 6px;
}

.kq-quote__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.kq-quote__top .kq-quote__kicker {
  margin-bottom: 0;
}

.kq-quote__data-link {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff !important;
  font: 500 13px / 1.4 Poppins, sans-serif;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.kq-quote__data-link:hover,
.kq-quote__data-link:focus-visible {
  color: #fff !important;
  text-decoration: none;
  outline: none;
}

.kq-quote__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.kq-quote__price strong {
  font: 700 clamp(34px, 7vw, 46px) / 1 "Plus Jakarta Sans", Poppins, sans-serif;
}

.kq-quote__price span,
.kq-quote__meta {
  font: 400 13px / 1.5 Poppins, sans-serif;
  color: var(--kq-line);
}

.kq-quote__price span {
  font-size: 15px;
}

.kq-quote__bar {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(165, 216, 253, 0.3);
  padding-top: 12px;
  font: 400 13px / 1.5 Poppins, sans-serif;
  color: var(--kq-line);
}

.kq-quote__bar strong {
  color: #fff;
  letter-spacing: 0.06em;
}

.kq-quote__bar .kq-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font: 600 13px / 1.4 Poppins, sans-serif;
}

.kq-quote__breakdown {
  margin-top: 12px;
  border-top: 1px solid rgba(165, 216, 253, 0.3);
  padding-top: 12px;
}

.kq-quote__complete {
  margin-top: 28px;
}

.kq-quote__complete-title {
  font: 700 28px / 1.25 "Plus Jakarta Sans", Poppins, sans-serif;
  color: #fff;
  margin: 0 0 6px;
}

.kq-quote__complete-copy {
  margin: 0 0 14px;
  max-width: 32rem;
  font: 400 13px / 1.5 Poppins, sans-serif;
  color: var(--kq-line);
}

.kq-btn__phone-ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 2px;
  vertical-align: -2px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kq-callback {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.kq-callback__title {
  font: 700 28px / 1.25 "Plus Jakarta Sans", Poppins, sans-serif;
  color: var(--kq-navy);
  margin: 0;
}

.kq-callback__copy {
  margin: 6px 0 0;
  font: 400 13px / 1.5 Poppins, sans-serif;
  color: #475467;
}

.kq-callback__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.kq-callback__confirm {
  font: 600 18px / 1.4 "Plus Jakarta Sans", Poppins, sans-serif;
  color: var(--kq-navy);
}

@media (max-width: 640px) {
  .kq-callback__fields {
    grid-template-columns: 1fr;
  }

  .kq-quote__complete-title,
  .kq-callback__title {
    font-size: 22px;
  }
}

.kq-input--upper {
  text-transform: uppercase;
}

.kq-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 520px) {
  .kq-card-grid {
    grid-template-columns: 1fr;
  }
}

.kq-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 56, 91, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font: 600 15px Poppins, sans-serif;
  color: #fff;
}

.kq-summary {
  border: 1px solid var(--kq-line-soft);
  border-radius: 8px;
  padding: 16px 18px;
}

.kq-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.kq-summary__head span {
  font: 600 14px Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-link {
  font: 600 13px Poppins, sans-serif;
  color: var(--kq-blue);
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
}

/* V5 — tappable sales number inside helpers / notes */
.kq-tel {
  color: var(--kq-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kq-tel:hover,
.kq-tel:focus-visible {
  color: var(--kq-blue-dark);
}

.kq-reg-resume .kq-link {
  font-size: 14.5px;
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Helper sits under the control — field gap already provides ~10px; do not add more */
.kq-field > .kq-helper {
  margin-top: 0;
  font-size: 13.5px;
  color: var(--kq-muted);
}

.kq-field > .kq-input + .kq-helper,
.kq-field > .kq-row + .kq-helper,
.kq-field > .kq-date + .kq-helper,
.kq-field > .kq-select-wrap + .kq-helper,
.kq-field > .kq-dob + .kq-helper {
  margin-top: -4px;
}

.kq-optional {
  font-weight: 400;
  color: var(--kq-muted);
  font-size: 0.92em;
}

.kq-kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 400 13.5px / 1.45 Poppins, sans-serif;
}

.kq-kv span:first-child {
  color: var(--kq-muted);
  flex-shrink: 0;
}

.kq-kv span:last-child {
  color: var(--kq-navy);
  font-weight: 500;
  text-align: right;
}

/* —— Get a Quote picker (Netlify /get-a-quote/ parity) —— */
.kq-topbar--picker {
  border-bottom: 1px solid #e3edf2;
}

/* Netlify .quote-header-inner + .container-shell (fluid --layout-width ≥1440) */
.kq-topbar--picker .kq-topbar__inner {
  width: min(100%, var(--layout-width, 83rem));
  max-width: var(--layout-width, 83rem);
  min-height: 6.5rem;
  margin-inline: auto;
  padding: 0 4rem;
  box-sizing: border-box;
  gap: 1.5rem;
}

.kq-topbar--picker .kq-topbar__logo img {
  width: 7rem;
  height: auto;
}

/* Netlify .quote-help a — flex, 15px / 1.5, gap 12 */
.kq-topbar--picker .kq-topbar__phone-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 400;
  color: #035086;
}

.kq-topbar--picker .kq-topbar__phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #f0fbe9;
  color: #035086;
  flex: none;
}

.kq-topbar--picker .kq-topbar__phone-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
}

.kq-topbar--picker .kq-topbar__phone-link b {
  font-size: inherit;
  font-weight: 600;
  color: #035086;
  letter-spacing: normal;
  font-variant-numeric: normal;
}

/* Netlify has no underline on the number */
.kq-topbar--picker .kq-topbar__phone-link:hover b {
  text-decoration: none;
}

/* Netlify .quote-help p — 12px / 1.5, margin-top 2px, right-aligned via parent */
.kq-topbar--picker .kq-topbar__hours {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
  color: #526779;
}

/* Netlify .quote-intro — font/line-height set so inline .eyebrow strut matches (16/24) */
.kq-picker-intro {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #06385b;
}

/* Netlify .eyebrow */
.kq-picker-eyebrow {
  display: inline;
  font-family: var(--kq-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #486b7b;
}

/* Netlify .eyebrow-line */
.kq-picker-eyebrow__line {
  display: inline-block;
  width: 1.5625rem;
  height: 0.125rem;
  margin-right: 0.625rem;
  background: #75c044;
  vertical-align: middle;
}

/* Netlify .quote-intro h1 */
.kq-picker-title {
  margin: 0.75rem 0 0;
  font-family: var(--kq-font-display);
  font-size: 2.625rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.22;
  color: #035086;
}

/* Netlify .hero-highlight */
.kq-picker-highlight {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.kq-picker-highlight::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0.125rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #75c044;
  opacity: 0.45;
  transform: rotate(-2deg);
}

/* Netlify .quote-intro p */
.kq-picker-lead {
  margin: 1rem 0 0;
  font-size: 1rem;
  color: #526779;
}

.kq-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

body.kennco-quote-chrome .kq-picker-card,
.kq-picker-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 16.75rem;
  padding: 1rem 1.5rem 1.5rem;
  border: 0.0625rem solid #d8e8f2;
  border-radius: 1rem;
  background: linear-gradient(160deg, #edf7fe, #fff 78%);
  box-shadow: 0 0.5rem 1.25rem -0.75rem rgba(3, 80, 134, 0.18);
  text-decoration: none;
  color: #06385b;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
  cursor: pointer;
}

body.kennco-quote-chrome .kq-picker-card:hover,
.kq-picker-card:hover {
  border-color: #8fbad5;
  transform: translateY(-0.25rem);
  box-shadow: 0 0.75rem 1.75rem -0.8125rem #03508640;
  color: #06385b;
}

.kq-picker-card:focus {
  outline: none;
}

.kq-picker-card:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

/* Product tints — beat body.kennco-quote-chrome .kq-picker-card base gradient */
body.kennco-quote-chrome .kq-picker-card--van,
.kq-picker-card--van {
  background: linear-gradient(160deg, #f0f9e9, #fff 78%);
  border-color: #dfebd7;
}

body.kennco-quote-chrome .kq-picker-card--home,
.kq-picker-card--home {
  background: linear-gradient(160deg, #eef5f7, #fff 78%);
}

body.kennco-quote-chrome .kq-picker-card--travel,
.kq-picker-card--travel {
  background: linear-gradient(160deg, #fff4dc, #fff 78%);
  border-color: #eee4ce;
}

.kq-picker-card__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9rem;
}

.kq-picker-card__disc {
  position: absolute;
  top: 0.875rem;
  left: 50%;
  width: 7.375rem;
  height: 7.375rem;
  border-radius: 50%;
  background: #d2eafb;
  transform: translate(-50%);
}

.kq-picker-card--van .kq-picker-card__disc {
  background: #dff0d1;
}

.kq-picker-card--home .kq-picker-card__disc {
  background: #dcebf1;
}

.kq-picker-card--travel .kq-picker-card__disc {
  background: #fce6b4;
}

.kq-picker-card__orbit {
  position: absolute;
  top: 0.1875rem;
  left: 50%;
  width: 8.75rem;
  height: 8.75rem;
  border-radius: 50%;
  border: 0.0625rem solid transparent;
  border-color: transparent transparent #03508621 #03508621;
  transform: translate(-50%) rotate(-28deg);
}

.kq-picker-card__dot {
  position: absolute;
  top: 1.8125rem;
  right: calc(50% - 4.5rem);
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #75c044;
}

.kq-picker-card--travel .kq-picker-card__dot {
  background: #f4b544;
}

.kq-picker-card__icon {
  position: relative;
  width: 8.5rem;
  height: 6.25rem;
  object-fit: contain;
  filter: drop-shadow(0 0.5rem 0.3125rem #0350861f);
  transition: transform 0.24s;
}

.kq-picker-card:hover .kq-picker-card__icon {
  transform: translateY(-0.1875rem);
}

.kq-picker-card__icon--home {
  width: 5.9375rem;
  height: 6.25rem;
}

.kq-picker-card__icon--travel {
  width: 5.8125rem;
  height: 6.875rem;
  transform: rotate(-8deg);
}

.kq-picker-card:hover .kq-picker-card__icon--travel {
  transform: rotate(-4deg) translateY(-0.1875rem);
}

.kq-picker-card__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.kq-picker-card__label h2 {
  margin: 0;
  font-family: var(--kq-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #035086;
}

/* Match homepage .kennco-cover-explore arrow — plain SVG, slide on hover */
.kq-picker-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1875rem;
  height: 1.1875rem;
  flex-shrink: 0;
  color: #035086;
  background: none;
  border: 0;
  border-radius: 0;
}

.kq-picker-card__arrow svg {
  width: 1.1875rem;
  height: 1.1875rem;
  transition: transform 0.22s;
}

.kq-picker-card:hover .kq-picker-card__arrow {
  background: none;
  border: 0;
  color: #035086;
}

.kq-picker-card:hover .kq-picker-card__arrow svg {
  transform: translateX(3px);
}

.kq-picker-existing {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #dbe8ee;
}

.kq-picker-existing > h2 {
  margin: 0 0 1rem;
  font-family: var(--kq-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #06385b;
}

.kq-picker-existing__links {
  display: grid;
  gap: 0.75rem;
}

/* Netlify .support-link + .quote-support-link (computed: 13/16 pad, 8px radius, 12px gap) */
body.kennco-quote-chrome .kq-picker-support,
.kq-picker-support {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.8125rem 1rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid #d8e8ed;
  background: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  color: #06385b;
  font-family: var(--kq-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s;
}

body.kennco-quote-chrome .kq-picker-support:hover,
.kq-picker-support:hover {
  background: #fff;
  border-color: #91b8cd;
  color: #06385b;
}

.kq-picker-support:focus {
  outline: none;
}

.kq-picker-support:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

.kq-picker-support__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  /* Default / renew = pale green (Netlify .faq-help-icon) */
  background: #f0fbe9;
  color: #437a1f;
}

/* Resume card = pale blue icon well */
.kq-picker-existing__links .kq-picker-support:first-child .kq-picker-support__icon {
  background: #ecf6fe;
  color: #035086;
}

.kq-picker-support__copy {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.kq-picker-support__copy strong {
  font-family: var(--kq-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  color: #035086;
}

.kq-picker-support__copy > span {
  font-family: var(--kq-font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.65;
  color: #526779;
}

.kq-picker-support__arrow {
  margin-left: auto;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: #035086;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kq-picker-support__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.kq-picker-travel {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding-inline: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.8;
  color: #526779;
}

.kq-picker-travel > svg {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  color: #035086;
}

.kq-picker-travel strong {
  color: #06385b;
  font-weight: 600;
}

/* Legacy tile hooks (smoke / other tools) — keep usable if referenced */
.kq-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.kq-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 180px;
  padding: 16px 32px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--kq-blue);
  text-decoration: none;
  color: var(--kq-blue-dark);
  box-sizing: border-box;
}

.kq-tile__icon {
  width: 88px;
  height: 88px;
  border-radius: 100px;
  background: var(--kq-line-soft);
  display: flex;
  justify-content: center;
  align-items: center;
}

.kq-tile__label {
  display: flex;
  align-items: center;
  gap: 2px;
  font: 400 24px / 30px Poppins, sans-serif;
}

.kq-tile__chevron {
  display: block;
  flex-shrink: 0;
}

/* Anchor to .kq-typeahead (input only) — never the whole .kq-field, or helper
   text opens a large gap above the list (Industry). */
.kq-typeahead {
  position: relative;
  width: 100%;
}

/* KD-159: always open below the typeahead input — never flip above. */
.kq-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  bottom: auto;
  z-index: 20;
  width: 100%;
  margin: 0;
  background: #fff;
  border: 1px solid var(--kq-line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(6, 56, 91, 0.14);
  overflow: hidden;
  max-height: 230px;
  overflow-y: auto;
  transform: none;
}

/* Legacy fields without .kq-typeahead: keep list in flow under the input. */
.kq-field > .kq-suggest {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 10;
}

.kq-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  font: 400 14px Poppins, sans-serif;
  color: var(--kq-navy);
  cursor: pointer;
  border: 0;
  border-bottom: 1px solid var(--kq-sky);
  background: #fff;
}

.kq-suggest button:hover {
  background: var(--kq-sky);
}

.kq-rel {
  position: relative;
}

.kq-entry {
  position: relative;
  border: 1px solid var(--kq-line-soft);
  border-radius: 8px;
  padding: 18px;
  padding-top: 44px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kq-entry__dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--kq-muted, #4d6175);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.kq-entry__dismiss svg {
  width: 18px;
  height: 18px;
  display: block;
}

.kq-entry__dismiss:hover {
  background: #f3f7fb;
  color: var(--kq-navy, #06385b);
}

.kq-entry__dismiss:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

.kq-entry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.kq-entry-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--kq-sky);
  border: 1px solid var(--kq-line);
  border-radius: 6px;
  padding: 10px 14px;
  font: 500 13.5px Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-entry-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.kq-prefix {
  display: flex;
  gap: 8px;
}

.kq-prefix .kq-input {
  flex: 1;
  min-width: 0;
}

.kq-prefix__sym {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--kq-field-border);
  border-radius: 4px;
  background: var(--kq-sky);
  font: 500 15px Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kq-stepper button {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--kq-blue);
  background: #fff;
  color: var(--kq-blue);
  font: 600 20px Poppins, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.kq-stepper button:hover:not(:disabled) {
  background: #f4f9fe;
  border-color: #5a9fd4;
}

.kq-stepper button:disabled {
  border-color: var(--kq-line-soft);
  color: #cbd5e1;
  cursor: not-allowed;
}

.kq-stepper strong {
  min-width: 36px;
  text-align: center;
  font: 700 20px "Plus Jakarta Sans", Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-confirm {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--kq-card-shadow);
  padding: clamp(24px, 6vw, 48px);
  text-align: center;
  animation: kqfade 0.3s ease;
}

/* V6 Payment successful — form styles: pale green tick, page sub, blue info box, section heading. */
.kq-confirm--paid {
  text-align: left;
  max-width: var(--kq-wrap, 660px);
  margin: 0 auto;
  padding: 40px 40px 44px;
}
@media (max-width: 560px) {
  .kq-confirm--paid {
    padding: 28px 20px 32px;
  }
}
.kq-confirm__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kq-confirm--paid .kq-h1 {
  margin: 0;
  flex: 1 1 auto;
}
.kq-confirm__tick {
  flex: none;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid #b5dfc2;
  background: var(--kq-leaf-50, #eef8e6);
  color: var(--kq-leaf-700, #1e8a3f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kq-confirm__tick svg {
  width: 20px;
  height: 20px;
  display: block;
}
.kq-confirm--paid .kq-confirm__sub,
.kq-confirm--paid .kq-lead.kq-confirm__sub {
  margin: 6px 0 0;
  font: 400 15px / 1.5 Poppins, sans-serif;
  color: var(--kq-muted, #5c6b79);
}
.kq-confirm__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
  font: 400 15px / 1.55 Poppins, sans-serif;
  color: var(--kq-text, #1d3b57);
}
.kq-confirm__body p {
  margin: 0;
}
.kq-confirm__policy {
  margin: 0;
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--kq-sky, #eaf3fc);
  border: 1px solid #b7d4ee;
  color: var(--kq-text, #1d3b57);
  font: 400 15px / 1.5 Poppins, sans-serif;
}
.kq-confirm__policy b {
  color: var(--kq-blue, #0b6eaf);
  font-weight: 700;
}
.kq-confirm__next-h {
  margin: 8px 0 0;
  font: 700 18px / 1.3 "Plus Jakarta Sans", Poppins, sans-serif;
  color: var(--kq-navy, #06385b);
}
.kq-confirm__docs {
  margin: -8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}
.kq-confirm__docs li {
  list-style: disc;
}

/* Figma 1172:1154 — expired quote (cover start past / resume window). */
.kq-confirm--expired {
  max-width: var(--kq-wrap, 660px);
  margin: 0 auto;
  padding: 40px 40px 44px;
}
@media (max-width: 560px) {
  .kq-confirm--expired {
    padding: 28px 20px 32px;
  }
}

.kq-confirm--expired .kq-h1 {
  font-size: clamp(22px, 4.5vw, 28px);
  line-height: 1.25;
  margin: 0 0 12px;
}

.kq-confirm--expired .kq-lead {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}

body.kennco-quote-chrome .kq-confirm--expired .kq-lead a.kq-tel {
  font-weight: 700;
  color: var(--kq-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.kennco-quote-chrome .kq-confirm--expired .kq-lead a.kq-tel:hover {
  color: var(--kq-blue);
  text-decoration: none;
}

.kq-confirm--expired .kq-btn--ghost {
  min-height: 48px;
  padding: 12px 22px;
}

.kq-tick {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--kq-leaf-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #fff;
  font-size: 32px;
}

.kq-tick--azure {
  background: var(--kq-blue);
  color: #fff;
}

.kq-tick__face {
  display: block;
  width: 29px;
  height: 29px;
}

.kq-tick__emoji {
  font-size: 29px;
  line-height: 1;
}

.kq-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--kq-navy);
  color: #fff;
  font: 500 13.5px Poppins, sans-serif;
  padding: 11px 20px;
  border-radius: 99px;
  box-shadow: 0 8px 24px rgba(6, 56, 91, 0.3);
  z-index: 50;
  animation: kqfade 0.25s ease;
}

.kq-legal {
  padding: 20px;
  text-align: center;
  font: 400 12px / 1.6 Poppins, sans-serif;
  color: var(--kq-muted);
}

.kq-stack {
  display: flex;
  flex-direction: column;
  gap: 14px; /* KD-70 (Dariia): restore 14px stack gap */
}

/* Contact consent rows — restore breathing room (Motor/Van/Home contact). */
.kq-stack--consent-gap {
  gap: 12px; /* Master V2 ≈ 10px */
}

/* Home V3 prototype uses a wider consent gap. */
.kq-stack--consent-gap-home {
  gap: 24px;
}

/* Master V2 / V5 — honest answers notice above contact consent ticks */
.kq-honest-note {
  margin: 8px 0 14px;
}

.kq-phone-row {
  display: flex;
  gap: 8px;
}

.kq-phone-row .kq-select {
  width: 104px;
  padding-right: 36px;
  background-position: right 8px center;
  background-size: 20px 20px;
}

.kq-dial {
  width: 104px;
}

.kq-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--kq-line-soft);
  border-radius: 8px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.kq-band span {
  font: 600 14.5px Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-addon {
  border: 1px solid var(--kq-line-soft);
  border-radius: 8px;
  padding: 16px 18px;
}

.kq-addon__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.kq-addon__head span:last-child {
  flex: 1;
}

.kq-addon__title {
  display: block;
  font: 600 15px Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-addon__sub {
  display: block;
  font: 400 13px / 1.5 Poppins, sans-serif;
  color: var(--kq-muted);
}

.kq-addon__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--kq-sky);
  flex-wrap: wrap;
  font: 500 13.5px Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-incl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 18px;
}

.kq-incl__item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font: 400 13.5px / 1.5 Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-incl__item::before {
  content: "✓";
  color: var(--kq-leaf);
  font-weight: 700;
  flex-shrink: 0;
}

/* Travel V2 .sec-sub — People insured / Check your details */
.kq-sec-sub {
  margin: 8px 0 0;
  padding-top: 16px;
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--kq-navy, #0e3354);
}

/* Travel V2 .name-row — First name + Surname side by side */
.kq-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 560px) {
  .kq-name-row {
    grid-template-columns: 1fr;
  }
}

.kq-trav {
  /* KD-110/111: no card border around People Insured travellers */
  border: 0;
  border-radius: 0;
  padding: 24px 0 22px; /* KD-119: 24px top */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kq-trav.is-proposer {
  border: 0;
}

.kq-trav__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.kq-trav__head strong {
  font: 600 14px Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-band-chip {
  font: 500 12px Poppins, sans-serif;
  color: var(--kq-blue);
  background: var(--kq-sky);
  border-radius: 99px;
  padding: 3px 10px;
}

/* Travel V2 Role — same .pill / .pill.on as the prototype */
.kq-role {
  min-width: 56px;
  height: 46px;
  padding: 0 16px;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid var(--kq-blue);
  border-radius: var(--kq-radius, 4px);
  background: #fff;
  font: 500 14.5px / 1 var(--kq-font-body, Poppins, sans-serif);
  color: var(--kq-navy, #0e3354);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

.kq-role:hover {
  background: #f4f9fe;
}

.kq-role.is-on {
  background: var(--kq-blue);
  border-color: var(--kq-blue);
  color: #fff;
  font-weight: 600;
}

.kq-role.is-on:hover {
  background: var(--kq-blue-dark);
  border-color: var(--kq-blue-dark);
}

.kq-role:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

.kq-error-summary {
  background: #fdecec;
  border: 1px solid var(--kq-red);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
  color: var(--kq-red-text);
}

.kq-error-summary strong {
  display: block;
  font: 600 14px Poppins, sans-serif;
  margin-bottom: 8px;
}

.kq-error-summary div {
  font: 400 13px / 1.5 Poppins, sans-serif;
}

.kq-switch {
  background: #fff;
  border: 1px solid var(--kq-sun);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.kq-switch--plain {
  border-color: var(--kq-line);
}

.kq-switch strong {
  display: block;
  font: 600 15px Poppins, sans-serif;
  color: var(--kq-navy);
}

.kq-switch p {
  margin: 4px 0 0;
  font: 400 13px / 1.5 Poppins, sans-serif;
  color: var(--kq-muted);
}

@keyframes kqfade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kqspin {
  to {
    transform: rotate(360deg);
  }
}

/* Cascade: tablet (768–1023) → ≤767 → ≤600 (later wins when both match) */

/* Netlify .cover-card ≤1023 — tablet only (≥768) */
@media (max-width: 1023px) and (min-width: 768px) {
  .kq-topbar--picker .kq-topbar__inner {
    padding-inline: 2.5rem;
  }

  body.kennco-quote-chrome .kq-picker-card,
  .kq-picker-card {
    min-height: 15.3125rem;
    padding-inline: 1.625rem;
  }
}

/* Netlify ≤767: eyebrow 10px, header pad, logo 6rem, cover-card denser */
@media (max-width: 767px) {
  .kq-picker-eyebrow {
    font-size: 0.625rem;
  }


  .kq-topbar--picker .kq-topbar__inner {
    padding-inline: 1.5rem;
  }

  .kq-topbar--picker .kq-topbar__logo img {
    width: 6rem;
  }

  body.kennco-quote-chrome .kq-picker-card,
  .kq-picker-card {
    min-height: 13.4375rem;
    padding: 0.75rem 1.0625rem 1.25rem;
  }

  .kq-picker-card__disc {
    width: 5.5rem;
    height: 5.5rem;
    top: 1.0625rem;
  }

  .kq-picker-card__orbit {
    width: 6.875rem;
    height: 6.875rem;
    top: 0.375rem;
  }

  .kq-picker-card__dot {
    width: 0.375rem;
    height: 0.375rem;
    top: 1.75rem;
  }

  .kq-picker-card__icon {
    width: 6.75rem;
    height: 4.875rem;
  }

  .kq-picker-card__icon--home {
    width: 4.6875rem;
    height: 5.125rem;
  }

  .kq-picker-card__icon--travel {
    width: 4.375rem;
    height: 5.4375rem;
  }
}

/* Netlify get-a-quote ≤600px */
@media (max-width: 600px) {
  .kq-topbar--picker .kq-topbar__inner {
    min-height: 5.5rem;
    padding-inline: 1.5rem;
  }

  .kq-topbar--picker .kq-topbar__logo img {
    width: 5.5rem;
  }

  .kq-topbar--picker .kq-topbar__phone-link {
    font-size: 0.8125rem;
    gap: 0.375rem;
  }

  .kq-topbar--picker .kq-topbar__phone-pre {
    display: none;
  }

  .kq-topbar--picker .kq-topbar__phone-icon {
    width: 1.75rem;
    height: 1.75rem;
    background: transparent;
  }

  .kq-topbar--picker .kq-topbar__phone-icon svg {
    width: 1rem;
    height: 1rem;
  }

  .kq-topbar--picker .kq-topbar__hours {
    font-size: 0.625rem;
    line-height: 1.5;
    margin: 0;
  }

  .kq-main--picker {
    width: calc(100% - 2.5rem);
    padding-block: 2rem;
  }

  .kq-picker-title {
    font-size: 1.875rem;
  }

  .kq-picker-lead {
    font-size: 0.8125rem;
  }

  .kq-picker-grid {
    gap: 0.75rem;
  }

  .kq-picker-card__art {
    height: 7.5rem;
    transform: scale(0.8);
    transform-origin: center;
  }

  .kq-picker-card__label {
    gap: 0.375rem;
  }

  .kq-picker-card__label h2 {
    font-size: 1.125rem;
  }

  .kq-picker-card__arrow,
  .kq-picker-card__arrow svg {
    width: 1.1875rem;
    height: 1.1875rem;
  }

  .kq-picker-existing {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .kq-picker-existing > h2 {
    font-size: 1rem;
  }

  .kq-picker-support__icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .kq-picker-support__copy strong {
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .kq-picker-support__copy > span {
    font-size: 0.6875rem;
  }
}

.kq-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 56, 91, 0.45);
  animation: kqfade 0.2s ease;
}

.kq-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.kq-modal__panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px;
  max-width: 460px;
  width: 100%;
  padding: 24px;
  box-shadow: 0 18px 48px rgba(6, 56, 91, 0.28);
}

.kq-modal--data .kq-modal__panel {
  max-width: 560px;
  max-height: min(85vh, 720px);
  overflow: auto;
  padding-top: 18px;
}

.kq-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.kq-modal__head .kq-modal__title {
  margin-bottom: 0;
}

.kq-modal__close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--kq-navy);
  font: 400 28px / 1 Poppins, sans-serif;
  cursor: pointer;
  padding: 0;
}

.kq-modal__close:hover,
.kq-modal__close:focus-visible {
  background: var(--kq-sky);
  outline: none;
}

.kq-modal__title {
  font: 600 17px Poppins, sans-serif;
  color: var(--kq-navy);
  margin-bottom: 8px;
}

.kq-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font: 400 14px / 1.6 Poppins, sans-serif;
  color: var(--kq-muted);
}

.kq-modal__body > p {
  margin: 0;
}

.kq-modal--data .kq-modal__body {
  color: var(--kq-navy);
}

.kq-modal__actions {
  margin-top: 20px;
  justify-content: flex-end;
}

/* Travel Quote Form Prototype V2 — .suit-box (IMPORTANT NOTE / medical) */
.suit-box,
.kq-suit-box {
  border: 1px solid #d7e5f3;
  border-radius: var(--kq-radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  background: #fff;
  color: var(--kq-text);
}

.suit-box h2,
.kq-suit-box h2 {
  margin: 0;
  font: 600 15px / 1.35 var(--kq-font-body);
  letter-spacing: 0.04em;
  color: var(--kq-navy);
}

.suit-box p,
.suit-box ol,
.suit-box ul,
.kq-suit-box p,
.kq-suit-box ol,
.kq-suit-box ul {
  margin: 0;
}

.suit-box ol,
.suit-box ul,
.kq-suit-box ol,
.kq-suit-box ul {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Tailwind Preflight sets ol/ul to list-style: none — restore numbers. */
  list-style: decimal;
  list-style-position: outside;
}

/* Travel Quote Form Prototype V2 — .suit-confirm (six Yes/No questions) */
.suit-confirm,
.kq-suit-confirm {
  border: 1.5px solid var(--kq-blue);
  border-radius: var(--kq-radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
  background: #fff;
}

.suit-confirm.invalid,
.kq-suit-confirm.invalid {
  border-color: var(--kq-red);
  box-shadow: inset 0 0 0 1px var(--kq-red);
}

.kq-suit-lead {
  margin: 0;
  font-size: 14.5px;
  color: var(--kq-text, #1a2b3c);
}

.kq-suit-stem {
  margin: 10px 0 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kq-text, #1a2b3c);
}

.suit-confirm .kq-decl,
.kq-suit-confirm .kq-decl {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.suit-confirm .kq-decl + .kq-decl,
.kq-suit-confirm .kq-decl + .kq-decl {
  border-top: 1px solid var(--kq-line-soft);
  padding-top: 16px;
}

.suit-q,
.kq-suit-q {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.suit-qt,
.kq-suit-confirm .kq-decl__q {
  margin: 0;
  font: 500 15px / 1.5 var(--kq-font-body);
  color: var(--kq-navy);
}

.suit-n,
.kq-decl__n {
  font-weight: 600;
  margin-right: 4px;
}

.kq-decl__answers {
  margin: 0;
}

.kq-decl__note {
  margin-top: 10px;
  font: 400 12.5px / 1.5 Poppins, sans-serif;
  color: #b42318;
}

/* Stacked prototype layout (not Figma side-by-side) inside suit-confirm */
@media (min-width: 720px) {
  .suit-confirm .kq-decl,
  .kq-suit-confirm .kq-decl {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: stretch;
  }

  .suit-confirm .kq-decl__q,
  .kq-suit-confirm .kq-decl__q {
    flex: none;
    margin-bottom: 0;
  }

  .suit-confirm .kq-decl__answers,
  .kq-suit-confirm .kq-decl__answers {
    flex: none;
    justify-content: flex-start;
  }
}

/* Travel Quote Form V2 + Motor V5 progressive field reveal */
.kq-reveal,
.kq-field--enter {
  animation: kq-reveal-in 0.28s ease-out;
}

@keyframes kq-reveal-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kq-reveal,
  .kq-field--enter {
    animation: none;
  }
}

.kq-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;
}

/* Legacy quote price bar: sticky bottom. V5 motor quote (.kq-main--quote / .kq-qp) uses fixed top on phones — see Motor Quote Page V5 section at end of file. */
.kq-pricebar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px -4px 0;
  padding: 12px 16px;
  background: #06385b;
  color: #fff;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 16px rgba(6, 56, 91, 0.2);
}

.kq-pricebar__price {
  font: 500 13px Poppins, sans-serif;
}

.kq-pricebar__price strong {
  font-size: 18px;
  font-weight: 700;
}

.kq-quote-page.is-repricing,
.kq-card.is-repricing {
  pointer-events: none;
  opacity: 0.92;
}

.kq-quote-page {
  position: relative;
}

/* Motor Quote Form V5 — existing customer cards (.ex-card) */
.kq-resume-cards {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--kq-line-soft);
}

.kq-resume-cards__title {
  font: 700 18px var(--kq-font-display);
  color: var(--kq-navy);
  margin: 0 0 12px;
}

.kq-resume-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.kq-resume-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px 16px 16px 18px;
  text-align: left;
  background: #fff;
  border: 2px solid var(--kq-blue);
  border-radius: 10px;
  cursor: pointer;
  color: var(--kq-navy);
  font: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.kq-resume-card:hover,
.kq-resume-card:focus-visible {
  background: var(--kq-hover-green);
  border-color: var(--kq-hover-green-line);
  outline: none;
}

.kq-resume-card:focus-visible {
  box-shadow: 0 0 0 3px #8dbbe8;
}

.kq-resume-card__title {
  font: 600 16px var(--kq-font-body);
}

.kq-resume-card__sub {
  font: 400 14px var(--kq-font-body);
  color: var(--kq-muted);
}

/* V5 page-head — title + sub sit tight (4px), then 26px before fields */
.kq-page-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 26px;
}

/* Renewal: greeting above Check your details (Motor Renewal Prototype .rn-hello) */
.kq-hello {
  margin: 0;
  font-family: var(--kq-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--kq-blue);
}

.kq-page-head .kq-h1 {
  margin: 0;
}

.kq-page-sub {
  margin: 0;
  color: var(--kq-muted, #5c6b79);
  font: 400 15px / 1.5 var(--kq-font-body, Poppins, sans-serif);
}

.kq-text-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--kq-blue, #0068b2);
  font: 600 14.5px / 1.4 Poppins, sans-serif;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}

.kq-text-link:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
  border-radius: 2px;
}

/* V5 fold-away summary (sum-acc) — preferred default */
.kq-sum-tools {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  margin-bottom: 24px;
}

.kq-sum-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kq-sum-acc {
  border: 1px solid var(--kq-line-soft, #e3eaf1);
  border-radius: 8px;
  background: #fff;
}

.kq-sum-acc.is-open {
  border-color: #b7d4ee;
}

.kq-sum-acc__head {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Keep tight vertical pad; restore right inset so Edit isn’t flush to the border. */
  padding: 4px 16px 4px 4px;
}

.kq-sum-acc__head .kq-text-link {
  align-self: center;
  flex: none;
}

.kq-sum-acc__h {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16px;
}

.kq-sum-acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 12px 14px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--kq-navy, #06385b);
}

.kq-sum-acc__btn:hover {
  background: #f4f9fe;
}

.kq-sum-acc__btn:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: -1px;
}

.kq-sum-acc__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kq-sum-acc__title {
  font: 600 16px / 1.35 Poppins, sans-serif;
  color: var(--kq-navy, #06385b);
}

.kq-sum-acc__peek {
  font: 400 14px / 1.4 Poppins, sans-serif;
  color: var(--kq-muted, #5c6b79);
  overflow-wrap: anywhere;
}

.kq-sum-acc.is-open .kq-sum-acc__peek {
  display: none;
}

.kq-sum-acc__chev {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--kq-blue-soft, #ecf6fe);
  color: var(--kq-blue, #0068b2);
  transition: transform 0.2s ease;
}

.kq-sum-acc__chev svg {
  width: 18px;
  height: 18px;
}

.kq-sum-acc.is-open .kq-sum-acc__chev {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .kq-sum-acc__chev {
    transition: none;
  }
}

.kq-sum-acc__body {
  margin: 0 18px;
  padding: 4px 0 12px;
  border-top: 1px solid var(--kq-line-soft, #e3eaf1);
}

.kq-sum-card {
  border: 1px solid var(--kq-line-soft, #e3eaf1);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
}

.kq-sum-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.kq-sum-card__h {
  margin: 0;
  font: 600 16px Poppins, sans-serif;
  color: var(--kq-navy, #06385b);
}

.kq-sum-list {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.kq-sum-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 1.3fr);
  gap: 4px 16px;
  padding: 7px 0;
  font-size: 14.5px;
}

.kq-sum-row dt {
  color: var(--kq-muted, #5c6b79);
  font-weight: 400;
}

.kq-sum-row dd {
  margin: 0;
  color: var(--kq-navy, #06385b);
  overflow-wrap: anywhere;
  text-align: right;
  font-weight: 500;
}

@media (max-width: 560px) {
  .kq-sum-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .kq-sum-row dd {
    text-align: left;
  }
}

/*
 * V5/V6 sum-wide (prototype body.sum-wide .wrap):
 * Desktop: drivers 340px left of the form card (sticky).
 * Phones: summary card → Add another driver → .kq-nav (Back/Next).
 */
.kq-main--summary {
  max-width: var(--kq-wrap, 660px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kq-main--summary .kq-summary-wide__form {
  order: 1;
  min-width: 0;
}

.kq-main--summary .kq-drivers-panel {
  order: 2;
  min-width: 0;
}

.kq-main--summary > .kq-nav {
  order: 3;
  margin-top: 0;
}

.kq-main--summary > .kq-mode-wrap {
  order: 4;
  margin-top: 0;
  padding-bottom: 8px;
}

@media (min-width: 960px) {
  .kq-main--summary:not(.kq-main--summary-solo) {
    max-width: var(--kq-wrap-wide, 1080px);
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 18px;
    align-items: start;
  }

  .kq-main--summary:not(.kq-main--summary-solo) .kq-drivers-panel {
    order: 0;
    grid-column: 1;
    grid-row: 1 / span 3;
    position: sticky;
    top: 16px;
  }

  .kq-main--summary:not(.kq-main--summary-solo) .kq-summary-wide__form {
    order: 0;
    grid-column: 2;
    grid-row: 1;
  }

  .kq-main--summary:not(.kq-main--summary-solo) > .kq-nav {
    order: 0;
    grid-column: 2;
    grid-row: 2;
  }

  .kq-main--summary:not(.kq-main--summary-solo) > .kq-mode-wrap {
    order: 0;
    grid-column: 2;
    grid-row: 3;
  }
}

/* Renew Check details: no drivers column — centre the form like other renew pages. */
.kq-main--summary-solo {
  max-width: var(--kq-wrap, 660px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kq-progress:has(+ .kq-main--summary-solo) {
  max-width: var(--kq-wrap, 660px);
}

/* V5 sum-drivers panel */
.kq-drivers-panel {
  min-width: 0;
}

.kq-drivers-panel__card {
  background: #fff;
  border: 1px solid var(--kq-line, #d3ecfd);
  border-radius: var(--kq-card-radius, 12px);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--kq-card-shadow);
}

.kq-drivers-panel__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.kq-drivers-panel__title {
  font: 700 20px / 1.2 var(--kq-font-display, Poppins, sans-serif);
  margin: 0;
  color: var(--kq-navy, #06385b);
}

.kq-drivers-panel__count {
  flex: none;
  font: 600 13px Poppins, sans-serif;
  color: var(--kq-muted, #667085);
  margin: 0;
}

.kq-drivers-panel__sub {
  margin: 0;
  font: 400 14px / 1.5 Poppins, sans-serif;
  color: var(--kq-muted, #667085);
}

.kq-drivers-panel__note {
  margin: 0;
  font: 400 13.5px / 1.5 Poppins, sans-serif;
  color: var(--kq-muted, #667085);
}

.kq-drivers-panel__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  border: 1.5px dashed #9cc3e6;
  border-radius: 12px;
  background: #f6fafe;
  color: var(--kq-blue, #0068b2);
  font: 600 15px / 1.3 Poppins, sans-serif;
  cursor: pointer;
  padding: 10px 16px;
}

.kq-drivers-panel__add:hover {
  background: #edf5fc;
  border-color: var(--kq-blue, #0068b2);
}

.kq-drivers-panel__add:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

.kq-drivers-panel__add svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.kq-drivers-panel__max {
  margin: 0;
  font: 400 13.5px / 1.5 Poppins, sans-serif;
  color: var(--kq-muted, #667085);
}

.kq-sd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kq-sd-drv {
  border: 1px solid var(--kq-line, #d3ecfd);
  border-radius: 12px;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
}

.kq-sd-drv.is-pending {
  border-color: #f0cf8c;
  background: #fff8eb;
}

.kq-sd-drv__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.kq-sd-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e3effa;
  color: var(--kq-blue, #0068b2);
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
}

.kq-sd-drv.is-pending .kq-sd-avatar {
  background: #fbe7c0;
  color: #8a5a00;
}

.kq-sd-drv__name {
  margin: 0;
  font: 600 16px Poppins, sans-serif;
  color: var(--kq-navy, #06385b);
}

.kq-sd-drv__meta {
  margin: 2px 0 0;
  font: 400 13.5px Poppins, sans-serif;
  color: var(--kq-muted, #667085);
}

.kq-sd-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font: 600 13.5px Poppins, sans-serif;
  color: #1e8a4e;
}

.kq-sd-state svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.kq-sd-state--warn {
  color: #8a5a00;
}

.kq-sd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  border-top: 1px solid rgba(14, 51, 84, 0.1);
  padding-top: 6px;
}

.kq-sd-act {
  background: none;
  border: 0;
  padding: 6px 0;
  min-height: 36px;
  color: var(--kq-blue, #0068b2);
  font: 600 14px Poppins, sans-serif;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kq-sd-act--danger {
  color: var(--kq-field-error, #b30000);
}

.kq-sd-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(14, 51, 84, 0.1);
}

.kq-sd-confirm__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kq-sd-details {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(14, 51, 84, 0.1);
}

.kq-sd-details div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kq-sd-details dt {
  color: var(--kq-muted, #667085);
  font-weight: 400;
}

.kq-sd-details dd {
  margin: 0;
  color: var(--kq-navy, #06385b);
  font-weight: 500;
}

/* Master V2 §5.6 additional-driver pages (replace the V5 add-driver dialog) */
.kq-card--driver {
  position: relative;
}

.kq-ad-remove {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  background: none;
  border: 0;
  padding: 6px 0;
  min-height: 36px;
  color: var(--kq-field-error, #b30000);
  font: 600 14px Poppins, sans-serif;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kq-ad-remove:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
  border-radius: 4px;
}

.kq-card--driver .kq-h1 {
  padding-right: 88px;
}

.kq-ad-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #fdecec;
  border-left: 4px solid var(--kq-field-error, #b30000);
}

.kq-ad-confirm p {
  margin: 0;
  font: 600 15px / 1.4 Poppins, sans-serif;
  color: var(--kq-navy, #06385b);
}

.kq-ad-confirm__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kq-ad-consent {
  margin-top: 18px;
}

.kq-ad-consent__hint {
  margin-top: 14px;
}


@media (max-width: 719px) {
  .kq-main:not(.kq-main--quote) .kq-pricebar {
    position: sticky;
    top: 0;
    bottom: auto;
    border-radius: 0 0 10px 10px;
    margin: 0 -4px 16px;
  }
}

/* Home V3 quote panel */
.kq-quote__ref {
  font: 500 14px Poppins, sans-serif;
  color: #7dd3fc;
  margin-top: 4px;
}
.kq-quote__ref strong {
  color: #fff;
  letter-spacing: 0.06em;
}
.kq-quote__uw {
  font: 400 13px Poppins, sans-serif;
  color: #bae6fd;
  margin-top: 6px;
}
.kq-quote__uw strong {
  color: #fff;
  font-weight: 600;
}
/* Legacy .kq-summary used on quote pay accordion — keep head usable */
.kq-summary .kq-summary__head {
  font: 600 15px Poppins, sans-serif;
  color: var(--kq-navy, #06385b);
}

/* =============================================================================
   Motor Quote Page V5 (.kq-qp) — layout, premium panel, options, price bar
   Matches V5 Developer Handoff prototype (two-column quote + sticky premium).
   ============================================================================= */

.kq-main--quote {
  max-width: var(--kq-wrap-wide, 1080px);
}

.kq-qp {
  position: relative;
  color-scheme: light;
  /* V5 prototype --premium */
  --kq-qp-premium: #0f3557;
  --kq-qp-premium-muted: #b9d1e8;
  --kq-qp-ref: #7fd3c9;
  --kq-qp-facts: #dce9f5;
  --kq-qp-go: #5a9a35;
  --kq-qp-go-dark: #4a842a;
  --kq-qp-brand: #1f66ad;
}

/* aria-busy lock while repricing */
.kq-qp.is-busy,
.kq-qp.is-busy *,
.kq-main--quote .kq-pricebar.is-busy,
.kq-main--quote .kq-pricebar.is-busy * {
  cursor: progress !important;
}

.kq-qp.is-busy .kq-qp__options .kq-qp-row:not(.is-changing),
.kq-qp.is-busy .kq-qp__premium-links,
.kq-qp.is-busy .kq-qp-premium-links,
.kq-qp.is-busy .kq-qp__cta,
.kq-qp.is-busy .kq-qp__cta-mobile,
.kq-qp.is-busy .kq-qp__quote-nav,
.kq-qp.is-busy .kq-qp__new-quote-row {
  opacity: 0.5;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .kq-qp.is-busy .kq-qp__options .kq-qp-row {
    transition: none;
  }
}

.kq-qp__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (min-width: 960px) {
  .kq-qp__layout {
    grid-template-columns: 370px minmax(0, 1fr);
    gap: 28px;
  }
}

.kq-qp__layout.is-locked {
  opacity: 0.45;
  filter: grayscale(0.5);
  pointer-events: none;
  user-select: none;
}

/* Premium panel — match prototype: aside is sticky shell; .kq-qp-premium is the navy card */
.kq-qp__premium {
  min-width: 0;
  background: transparent;
  padding: 0;
  border-radius: var(--kq-card-radius, 12px);
}

.kq-qp-premium {
  background: var(--kq-qp-premium, #0f3557);
  color: #fff;
  border-radius: var(--kq-card-radius, 12px);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

@media (min-width: 960px) {
  .kq-qp__premium {
    position: sticky;
    top: calc(16px + env(safe-area-inset-top, 0px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}

.kq-qp__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
}

.kq-qp__eyebrow-your {
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.kq-qp__eyebrow-ref {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--kq-qp-ref, #7fd3c9);
}

.kq-qp__scheme {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px 0 0;
  font-size: 13.5px;
  color: var(--kq-qp-premium-muted, #b9d1e8);
}

.kq-qp__scheme b {
  color: #fff;
  font-weight: 600;
}

.kq-qp__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.kq-qp__price {
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-weight: 800;
  font-size: clamp(40px, 9vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.2s ease;
}

.kq-qp-premium.is-updating .kq-qp__price,
.kq-qp__premium.is-updating .kq-qp__price {
  opacity: 0.45;
}

.kq-qp__per {
  color: var(--kq-qp-premium-muted, #b9d1e8);
  font-size: 16px;
}

.kq-qp__status {
  min-height: 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.kq-qp__status:empty {
  display: none;
}

.kq-qp__vs-orig {
  font-size: 13px;
  color: var(--kq-qp-premium-muted, #b9d1e8);
}

.kq-qp__updating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--kq-qp-premium-muted, #b9d1e8);
}

.kq-qp__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: kq-qp-spin 0.8s linear infinite;
}

@keyframes kq-qp-spin {
  to {
    transform: rotate(360deg);
  }
}

.kq-qp-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 14px;
  font-weight: 600;
}

.kq-qp-change--down,
.kq-qp-change.is-down {
  background: rgba(142, 227, 168, 0.16);
  color: #8ee3a8;
}

.kq-qp-change--up,
.kq-qp-change.is-up {
  background: rgba(255, 213, 138, 0.16);
  color: #ffd58a;
}

.kq-qp-change svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.kq-qp__facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--kq-qp-facts, #dce9f5);
}

.kq-qp__facts b {
  color: #fff;
  font-weight: 600;
}

.kq-qp__facts-valid {
  font-size: 13px;
  color: var(--kq-qp-premium-muted, #b9d1e8);
}

.kq-qp__premium-links,
.kq-qp-premium-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.kq-qp__link-btn {
  background: none;
  border: 0;
  padding: 4px 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  text-align: left;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.kq-qp__link-btn:focus-visible {
  outline: 2px solid #8dbbe8;
  outline-offset: 3px;
  border-radius: 2px;
}

.kq-qp__breakdown {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 0;
  font-size: 13.5px;
}

.kq-qp__breakdown th,
.kq-qp__breakdown td {
  padding: 3px 0;
  vertical-align: baseline;
}

.kq-qp__breakdown thead th {
  padding-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kq-qp-premium-muted, #b9d1e8);
  text-align: right;
}

.kq-qp__breakdown tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--kq-qp-facts, #dce9f5);
  padding-right: 12px;
}

.kq-qp__breakdown td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #fff;
}

.kq-qp__breakdown td + td {
  padding-left: 14px;
  width: 4.2em;
  color: var(--kq-qp-premium-muted, #b9d1e8);
}

.kq-qp__breakdown .kq-qp-bd-group th {
  padding-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kq-qp-premium-muted, #b9d1e8);
}

.kq-qp__breakdown .kq-qp-bd-base th,
.kq-qp__breakdown .kq-qp-bd-base td:first-of-type {
  color: #fff;
  font-weight: 600;
}

.kq-qp__breakdown .kq-qp-bd-sub th,
.kq-qp__breakdown .kq-qp-bd-sub td {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 6px;
  font-weight: 600;
  color: #fff;
}

.kq-qp__breakdown .kq-qp-bd-total th,
.kq-qp__breakdown .kq-qp-bd-total td {
  font-weight: 600;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 6px;
}

.kq-qp__breakdown.is-stale {
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.kq-qp__bd-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--kq-qp-premium-muted, #b9d1e8);
}

.kq-qp__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.kq-qp__cta-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.kq-qp__cta .kq-btn {
  min-height: 52px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
}

.kq-qp__cta-note {
  margin: 0;
  font-size: 13px;
  color: var(--kq-qp-premium-muted, #b9d1e8);
  text-align: center;
}

.kq-qp__cta-note a {
  color: inherit;
  font-weight: 600;
}

.kq-qp__cta-mobile {
  padding: 4px 0 0;
}

@media (min-width: 960px) {
  .kq-qp__cta-mobile {
    display: none;
  }

  .kq-qp__premium .kq-qp__cta,
  .kq-qp-premium .kq-qp__cta {
    display: flex;
  }
}

@media (max-width: 959.98px) {
  .kq-qp__premium .kq-qp__cta,
  .kq-qp-premium .kq-qp__cta {
    display: none;
  }
}

@media (min-width: 560px) and (max-width: 959.98px) {
  .kq-qp__cta-mobile .kq-qp__cta-buttons {
    grid-template-columns: 1fr 1fr;
  }
}

.kq-qp__new-quote-row {
  display: flex;
  justify-content: center;
}

.kq-qp-new-quote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 6px 2px;
  color: var(--kq-blue, #0068b2);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.kq-qp__premium .kq-qp-new-quote,
.kq-qp-premium .kq-qp-new-quote {
  color: #fff;
}

.kq-qp-new-quote svg {
  width: 16px;
  height: 16px;
}

.kq-qp-new-quote:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kq-qp-new-quote:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Options card */
.kq-qp__options {
  background: #fff;
  border-radius: var(--kq-card-radius, 12px);
  padding: 4px 24px;
  min-width: 0;
  box-shadow: var(--kq-card-shadow, 0 1px 3px rgba(14, 51, 84, 0.08));
}

@media (max-width: 560px) {
  .kq-qp__options {
    padding: 4px 18px;
  }
}

.kq-qp-row {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kq-qp-row + .kq-qp-row {
  border-top: 1px solid var(--kq-line-soft, #e3eaf1);
}

.kq-qp-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kq-qp-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kq-qp-row__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--kq-navy, #06385b);
}

.kq-qp-row__sub {
  margin: 0;
  font-size: 14px;
  color: var(--kq-muted, #4d6175);
}

.kq-qp-row__sub b {
  color: var(--kq-navy, #06385b);
  font-weight: 600;
}

.kq-qp__group-label {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--kq-line-soft, #e3eaf1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kq-muted, #4d6175);
}

.kq-qp__group-label + .kq-qp-row {
  border-top: 0;
  padding-top: 12px;
}

/* Collapsible rows */
.kq-qp-collapse__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.kq-qp-collapse__btn:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 6px;
  border-radius: 4px;
}

.kq-qp-collapse__chev {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--kq-sky, #eaf3fc);
  color: var(--kq-blue, #0068b2);
  transition: transform 0.2s ease;
}

.kq-qp-collapse__chev svg {
  width: 18px;
  height: 18px;
}

.kq-qp-collapse__btn[aria-expanded="true"] .kq-qp-collapse__chev {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .kq-qp-collapse__chev {
    transition: none;
  }
}

.kq-qp-collapse__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

/* Standard excess */
.kq-qp-std {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.kq-qp-std__tile {
  flex: none;
  min-width: 132px;
  min-height: 64px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1.5px solid var(--kq-blue, #0068b2);
  background: var(--kq-sky, #eaf3fc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

.kq-qp-std__amt {
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-weight: 800;
  font-size: 20px;
  color: var(--kq-navy, #06385b);
  font-variant-numeric: tabular-nums;
}

.kq-qp-std__lbl {
  font-size: 12.5px;
  color: var(--kq-muted, #4d6175);
}

.kq-qp-std__text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--kq-navy, #06385b);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.kq-qp-xs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.kq-qp-xs-head .kq-qp-row__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* KennCo 2026-11-04 — navy info panels under standard / voluntary excess */
.kq-qp-info {
  margin: 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--kq-qp-premium, #0f3557);
  color: #fff;
  font: 400 14.5px / 1.55 Poppins, sans-serif;
}

.kq-qp-info p {
  margin: 0 0 10px;
}

.kq-qp-info p:last-child {
  margin: 0;
}

.kq-qp-info__link,
.kq-qp-info a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kq-qp-info__link:hover,
.kq-qp-info a:hover,
.kq-qp-info__link:focus-visible,
.kq-qp-info a:focus-visible {
  color: #dce9f5;
}

.kq-qp-std-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--kq-sky, #eaf3fc);
  border: 1px solid #b7d4ee;
  color: var(--kq-navy, #06385b);
  font-size: 13.5px;
  white-space: nowrap;
}

.kq-qp-std-tag b {
  font-size: 15px;
  font-weight: 700;
}

.kq-qp-xs-effect {
  margin: 0;
  font-size: 15px;
  color: var(--kq-navy, #06385b);
  background: var(--kq-sky, #eaf3fc);
  border-radius: 8px;
  padding: 10px 14px;
}

.kq-qp-xs-effect b {
  font-weight: 700;
}

/* Voluntary excess segment grid */
.kq-qp-seg {
  display: grid;
  grid-template-columns: repeat(var(--kq-seg-n, 6), minmax(0, 1fr));
  gap: 8px;
}

.kq-qp-seg--split {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kq-qp-seg__std-row {
  display: flex;
}

.kq-qp-seg__std-row .kq-qp-seg-opt {
  width: calc((100% - 24px) / 4);
}

.kq-qp-seg__rest {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 520px) {
  .kq-qp-seg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kq-qp-seg__rest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kq-qp-seg__std-row .kq-qp-seg-opt {
    width: 100%;
  }
}

.kq-qp-seg-opt {
  position: relative;
}

.kq-qp-seg-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.kq-qp-seg-opt label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px 4px;
  border: 1px solid var(--kq-blue, #0068b2);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease;
}

.kq-qp-seg-opt label:hover {
  background: #f4f9fe;
}

.kq-qp-seg-amt {
  font-weight: 600;
  font-size: 16px;
  color: var(--kq-navy, #06385b);
  font-variant-numeric: tabular-nums;
}

.kq-qp-seg-opt small {
  font-size: 12.5px;
  color: var(--kq-muted, #4d6175);
  min-height: 1.2em;
}

.kq-qp-seg-opt input:checked + label {
  background: var(--kq-blue, #0068b2);
  border-color: var(--kq-blue, #0068b2);
}

.kq-qp-seg-opt input:checked + label:hover {
  background: var(--kq-blue-dark, #17538e);
}

.kq-qp-seg-opt input:checked + label .kq-qp-seg-amt {
  color: #fff;
  font-weight: 700;
  font-size: 17px;
}

.kq-qp-seg-opt input:checked + label small {
  color: #dbe9f7;
}

.kq-qp-seg-opt input:focus-visible + label {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

/* Bonus protection add-on */
.kq-qp-addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--kq-line, #cfd8e1);
  border-radius: 8px;
  padding: 16px 18px;
  background: #fff;
  cursor: pointer;
}

.kq-qp-addon:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

.kq-qp-addon.is-on {
  border-color: var(--kq-on, #1e8a3f);
  background: var(--kq-on-soft, #e7f5ec);
}

.kq-qp-addon.is-pending {
  border-color: #f0cf8c;
  background: #fff8eb;
}

.kq-qp-addon__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 200px;
}

.kq-qp-pill {
  flex: none;
  min-width: 88px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--kq-blue, #1f66ad);
  background: #fff;
  color: var(--kq-blue, #1f66ad);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.kq-qp-pill:hover {
  background: #f4f9fe;
}

.kq-qp-pill.is-on {
  background: var(--kq-blue, #1f66ad);
  border-color: var(--kq-blue, #1f66ad);
  color: #fff;
}

.kq-qp-pill:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

.kq-qp-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kq-qp-addon__title {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  color: var(--kq-navy, #06385b);
}

.kq-qp-addon__title .kq-tip-btn,
.kq-qp-incl-note .kq-tip-btn {
  margin-left: 6px;
  vertical-align: middle;
}

.kq-qp-addon__desc {
  margin: 0;
  font-size: 14px;
  color: var(--kq-muted, #4d6175);
}

.kq-qp-addon__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1e8a4e;
  font-weight: 600;
  font-size: 14px;
  margin-top: 2px;
}

.kq-qp-addon__state svg {
  width: 16px;
  height: 16px;
}

.kq-qp-addon__more {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kq-qp-addon-more-btn {
  background: none;
  border: 0;
  padding: 4px 0;
  min-height: 28px;
  align-self: flex-start;
  color: var(--kq-blue, #0068b2);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: left;
}

.kq-qp-addon-more-btn:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Cover cards */
.kq-qp-cover-cards,
.kq-qp-covers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kq-qp-cover {
  position: relative;
  border: 1px solid var(--kq-blue, #0068b2);
  border-radius: var(--kq-radius, 4px);
  background: #fff;
}

.kq-qp-cover:has(input:checked) {
  background: var(--kq-blue, #0068b2);
  color: #fff;
}

.kq-qp-cover:has(input:focus-visible) {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

.kq-qp-cover input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.kq-qp-cover label {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 2px 14px;
  align-items: start;
  padding: 14px 16px 4px;
  cursor: pointer;
}

.kq-qp-cover__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--kq-navy, #06385b);
  display: grid;
  place-items: center;
  margin-top: 2px;
}

.kq-qp-cover input:checked + label .kq-qp-cover__dot {
  border-color: #fff;
}

.kq-qp-cover input:checked + label .kq-qp-cover__dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

.kq-qp-cover__name {
  font-weight: 600;
  color: var(--kq-navy, #06385b);
}

.kq-qp-cover__desc {
  grid-column: 2;
  font-size: 13.5px;
  color: var(--kq-muted, #4d6175);
}

.kq-qp-cover input:checked + label .kq-qp-cover__name {
  color: #fff;
}

.kq-qp-cover input:checked + label .kq-qp-cover__desc {
  color: #dbe9f7;
}

/* V5: toggle sits outside the radio so expanding the list never changes cover */
.kq-qp-cover > .kq-qp-more {
  margin: 0 16px 8px 50px;
  font-size: 13.5px;
}

.kq-qp-cover:has(input:checked) > .kq-qp-more {
  color: #fff;
}

.kq-qp-cover-more {
  padding: 0 16px 14px 50px;
}

.kq-qp-cover__ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
}

.kq-qp-cover__ticks li {
  position: relative;
  padding-left: 18px;
}

.kq-qp-cover__ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 8px;
  height: 5px;
  border-left: 2px solid #1e8a3f;
  border-bottom: 2px solid #1e8a3f;
  transform: rotate(-45deg);
}

.kq-qp-cover:has(input:checked) .kq-qp-cover__ticks li::before {
  border-color: #9fe0b2;
}

.kq-qp-save-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--kq-on-soft, #e7f5ec);
  border: 1px solid #b5dfc2;
  color: #134d26;
  font-size: 13.5px;
  white-space: nowrap;
}

.kq-qp-save-pill b {
  font-size: 14.5px;
  font-weight: 700;
  color: #134d26;
}

.kq-qp-cover-warn {
  display: flex;
  gap: 14px 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--kq-warn-bg, #fff6e5);
  border: 1px solid #f0cf8c;
  color: #5a3d00;
  font-size: 13.5px;
  line-height: 1.45;
}

.kq-qp-cover-warn svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: #b7791f;
}

.kq-qp-cover-warn__body {
  flex: 1 1 auto;
  min-width: 0;
}

.kq-qp-cover-warn p {
  margin: 0;
}

.kq-qp-cover-warn__body > p + ul,
.kq-qp-cover-warn__body > ul + p {
  margin-top: 8px;
}

/* KD-133: preflight kills list-style — force visible bullets. */
.kq-qp-cover-warn ul,
.kq-qp-cover-warn__body ul {
  margin: 8px 0 0 !important;
  padding: 0 0 0 0.15em !important;
  list-style: none !important;
}

.kq-qp-cover-warn li,
.kq-qp-cover-warn__body li {
  position: relative;
  display: block !important;
  margin: 0.4em 0 !important;
  padding: 0 0 0 1.15em !important;
  list-style: none !important;
}

.kq-qp-cover-warn li::before,
.kq-qp-cover-warn__body li::before {
  content: "•" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  font-size: 1.05em !important;
  line-height: 1.45 !important;
}

.kq-qp-cover-warn__xs {
  flex: none;
  align-self: flex-start;
  margin-left: auto;
  min-width: 84px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #f0cf8c;
  text-align: center;
}

.kq-qp-cover-warn__xs b {
  display: block;
  font-size: 20px;
  line-height: 1.1;
  color: var(--kq-navy, #06385b);
}

.kq-qp-cover-warn__xs span {
  font-size: 12px;
  color: #5a3d00;
}

/* Legacy class kept so older markup does not break */
.kq-qp-cw-xs {
  flex: 1 1 100%;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
  padding: 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #f0cf8c;
  color: var(--kq-navy, #06385b);
  font-size: 14px;
}

.kq-qp-cw-xs-amt {
  flex: none;
  min-width: 84px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--kq-warn-bg, #fff6e5);
  text-align: center;
}

.kq-qp-cw-xs-amt b {
  display: block;
  font-size: 20px;
  line-height: 1.1;
  color: var(--kq-navy, #06385b);
}

.kq-qp-cw-xs-amt span {
  font-size: 12px;
  color: #5a3d00;
}

/* Payment rows inside collapsed panel */
.kq-qp-pay-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kq-qp-pay-group h3 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kq-blue, #0068b2);
}

.kq-qp-pay-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

.kq-qp-pay-row span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--kq-navy, #06385b);
}

.kq-qp-pay-row--strong {
  font-weight: 600;
}

.kq-qp-pay-row--extra {
  align-items: center;
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fdf3e1;
  border-left: 4px solid #c98a12;
  font-weight: 600;
}

.kq-qp-pay-row--extra span:last-child {
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

/* Promo */
.kq-qp-promo-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kq-qp-promo-row input {
  flex: 1 1 200px;
  min-width: 0;
  height: 46px;
  border: 1px solid var(--kq-line, #cfd8e1);
  border-radius: var(--kq-radius, 4px);
  padding: 0 14px;
  background: #fff;
}

.kq-qp-promo-row input:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 1px;
  border-color: var(--kq-blue, #0068b2);
}

.kq-qp-promo-applied {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--kq-on-soft, #e7f5ec);
  border: 1px solid #b5dfc2;
  color: #134d26;
  font-size: 14px;
}

.kq-qp-promo-applied svg {
  width: 16px;
  height: 16px;
  color: var(--kq-on, #1e8a3f);
  flex: none;
}

.kq-qp-promo-remove {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--kq-blue, #0068b2);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Document links */
.kq-qp-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.kq-qp-doc-link {
  display: inline-flex;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  background: none;
  border: 0;
  padding: 4px 0;
  min-height: 28px;
  color: var(--kq-blue, #0068b2);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kq-qp-doc-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
}

.kq-qp-doc-link:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
  border-radius: 2px;
}

/* KD-132: back link at top-left under the progress bar */
.kq-qp__quote-nav--top {
  justify-content: flex-start;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* Quote nav / back row */
.kq-qp__quote-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.kq-qp__back {
  background: none;
  border: 0;
  color: var(--kq-blue, #0068b2);
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kq-qp__back:hover {
  text-decoration: underline;
}

.kq-qp__back:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Confirm new quote dialog */
.kq-qp-nq-dialog {
  border: 0;
  border-radius: var(--kq-card-radius, 12px);
  padding: 24px;
  width: min(440px, calc(100% - 32px));
  color: var(--kq-text, #1d3b57);
  box-shadow: 0 20px 50px rgba(14, 51, 84, 0.35);
}

.kq-qp-nq-dialog::backdrop {
  background: rgba(14, 51, 84, 0.45);
}

.kq-qp-nq-dialog h2 {
  margin: 0 0 8px;
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 20px;
  color: var(--kq-navy, #06385b);
}

.kq-qp-nq-dialog p {
  margin: 0 0 18px;
}

.kq-qp-nq-actions {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 10px;
}

.kq-qp-nq-actions .kq-btn {
  flex: 1 1 160px;
}

/* V5 price bar: fixed top on phones only (overrides legacy sticky bottom) */
.kq-main--quote .kq-pricebar {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  margin: 0;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--kq-qp-premium, #0f3557);
  color: #fff;
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(14, 51, 84, 0.25);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.kq-main--quote .kq-pricebar.show {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease, visibility 0s;
}

.kq-main--quote .kq-pricebar.cta-in .kq-pricebar__go,
.kq-main--quote .kq-pricebar.cta-in > .kq-btn[data-act="next"] {
  display: none;
}

.kq-main--quote .kq-pricebar__left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kq-main--quote .kq-pricebar__price {
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kq-main--quote .kq-pricebar__price small {
  font-family: var(--kq-font-body, Poppins, sans-serif);
  font-weight: 400;
  font-size: 13px;
  color: var(--kq-qp-premium-muted, #b9d1e8);
  margin-left: 4px;
}

.kq-main--quote .kq-pricebar__sub {
  font-size: 12.5px;
  color: var(--kq-qp-premium-muted, #b9d1e8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kq-main--quote .kq-pricebar__status:empty {
  display: none;
}

.kq-main--quote .kq-pricebar .kq-qp-change,
.kq-main--quote .kq-pricebar .kq-qp-updating,
.kq-main--quote .kq-pricebar .kq-qp__updating {
  white-space: nowrap;
  align-self: flex-start;
  padding: 1px 10px;
  font-size: 12.5px;
}

.kq-main--quote .kq-pricebar .kq-qp-updating,
.kq-main--quote .kq-pricebar .kq-qp__updating {
  padding: 0;
}

.kq-main--quote .kq-pricebar__go {
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  border: 0;
  font-size: 14px;
}

@media (min-width: 960px) {
  .kq-main--quote .kq-pricebar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kq-main--quote .kq-pricebar,
  .kq-qp__price {
    transition: none;
  }

  .kq-qp__spinner {
    animation: none;
  }
}

/* —— JS/CSS class bridges (viewQuote markup ↔ V5 quote styles) —— */
.kq-qp-premium__eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.kq-qp-premium__your { font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif); font-weight: 700; font-size: 18px; letter-spacing: 0.02em; }
.kq-qp-premium__ref { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--kq-qp-ref, #7fd3c9); }
.kq-qp-premium__uw { margin: -4px 0 0; font-size: 13.5px; color: var(--kq-qp-premium-muted, #b9d1e8); }
.kq-qp-premium__uw b { color: #fff; font-weight: 600; }
.kq-qp-premium__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kq-qp-premium__amt { font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif); font-weight: 800; font-size: clamp(40px, 9vw, 52px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: opacity 0.2s ease; }
.kq-qp-premium.is-updating .kq-qp-premium__amt { opacity: 0.45; }
.kq-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; animation: kq-qp-spin 0.8s linear infinite; display: inline-block; flex: none; }
.kq-qp-premium__per { color: var(--kq-qp-premium-muted, #b9d1e8); font-size: 16px; white-space: nowrap; }
.kq-qp-premium__status { min-height: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.kq-qp-premium__status:empty { display: none; }
.kq-qp-premium__facts { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--kq-qp-facts, #dce9f5); }
.kq-qp-premium__facts b { color: #fff; font-weight: 600; }
.kq-qp-premium__valid { font-size: 13px; color: var(--kq-qp-premium-muted, #b9d1e8); }
/* Manual DiscAndLoad note only — renewal invite copy uses .kq-qp-premium__rn-* (no green strips). */
.kq-qp-premium__discount {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #e8f5e1;
  background: rgba(90, 154, 53, 0.28);
}
.kq-qp-premium__discount--manual {
  color: #fff6e5;
  background: rgba(240, 207, 140, 0.22);
}
.kq-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #5a9a35;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Motor Renewal Prototype .rn-tag / .rn-save / muted helper lines */
.kq-tag--rn {
  margin-right: 0;
  padding: 3px 10px;
  background: #75c044;
  color: #0e3354;
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.kq-qp-premium__rn-online {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.kq-qp-premium__online-h {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.kq-qp-premium__save {
  color: #b8e39a;
  font-weight: 600;
  font-size: 14px;
}
.kq-qp-premium__online-sub {
  margin: 0;
  font-size: 13.5px;
  color: #dce9f5;
}
.kq-qp-premium__rn-call {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.kq-qp-premium__call-row {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--kq-qp-premium-muted, #b9d1e8);
  font-size: 14px;
}
.kq-qp-premium__call-row b {
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.kq-qp-premium__call-sub {
  margin: 0;
  font-size: 13px;
  color: var(--kq-qp-premium-muted, #b9d1e8);
}
.kq-qp-premium__rn-terms {
  margin: 0;
  font-size: 12.5px;
  color: var(--kq-qp-premium-muted, #b9d1e8);
}
.kq-qp-premium__online,
.kq-qp-premium__call { margin: 8px 0 0; font-size: 14px; color: #e8f5e1; }
.kq-qp-premium__call b { color: #fff; font-weight: 700; }
.kq-qp-premium__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.kq-qp-link { background: none; border: 0; padding: 4px 0; min-height: 28px; display: inline-flex; align-items: center; text-align: left; color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; }
.kq-qp-link:focus-visible { outline: 2px solid #6fb3f2; outline-offset: 3px; border-radius: 2px; }
.kq-qp__options .kq-qp-link,
.kq-qp-options .kq-qp-link,
.kq-qp__nav .kq-qp-link { color: var(--kq-qp-brand, #1f66ad); }
.kq-qp-updating { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--kq-qp-premium-muted, #b9d1e8); }
.kq-qp-vs-orig { font-size: 13px; color: var(--kq-qp-premium-muted, #b9d1e8); }
/* Delta pills sit on the dark premium panel (V5 prototype colours) */
.kq-qp-premium .kq-qp-change.is-down,
.kq-qp-change.is-down { background: rgba(142, 227, 168, 0.16); color: #8ee3a8; }
.kq-qp-premium .kq-qp-change.is-up,
.kq-qp-change.is-up { background: rgba(255, 213, 138, 0.16); color: #ffd58a; }
.kq-qp-save-pill { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--kq-on-soft, #e7f5ec); border: 1px solid #b5dfc2; color: #134d26; font-size: 13.5px; white-space: nowrap; font-weight: 600; }
.kq-qp-save-pill b { font-size: 14.5px; font-weight: 700; color: #134d26; }
.kq-qp-collapse__peek .kq-qp-save-pill { vertical-align: middle; }
.kq-qp-collapse__peek b { color: var(--kq-navy, #0e3354); font-weight: 600; }

.kq-qp-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.kq-qp-cta__btns { display: grid; grid-template-columns: 1fr; gap: 10px; }
.kq-qp-cta__btns .kq-btn { width: 100%; height: 52px; min-height: 52px; border-radius: 6px; font-weight: 600; font-size: 16px; padding: 0 20px; }
.kq-qp-cta__pay,
.kq-qp-cta__btns .kq-btn--leaf {
  background: var(--kq-qp-go, #5a9a35);
  border: 0;
  color: #fff;
}
.kq-qp-cta__pay:hover,
.kq-qp-cta__btns .kq-btn--leaf:hover {
  background: var(--kq-qp-go-dark, #4a842a);
}
.kq-qp-premium .kq-qp-cta__btns .kq-btn--ghost,
.kq-qp-cta--desk .kq-btn--ghost {
  background: #fff;
  color: var(--kq-qp-brand, #1f66ad);
  border: 1px solid var(--kq-qp-brand, #1f66ad);
}
.kq-qp-premium .kq-qp-cta__btns .kq-btn--ghost:hover,
.kq-qp-cta--desk .kq-btn--ghost:hover {
  background: #f4f9fe;
}
.kq-qp-cta__note { margin: 0; font-size: 13px; text-align: center; color: var(--kq-qp-premium-muted, #b9d1e8); }
.kq-qp__options .kq-qp-cta__note,
.kq-qp-cta--mobile .kq-qp-cta__note { color: var(--kq-muted, #4d6175); }
.kq-qp-new { display: flex; justify-content: center; }
.kq-qp-new__btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 2px; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; }
.kq-qp-new__btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.kq-qp__options .kq-qp-new__btn,
.kq-qp-cta--mobile .kq-qp-new__btn { color: var(--kq-qp-brand, #1f66ad); }
.kq-qp-new__btn svg { width: 16px; height: 16px; }
@media (min-width: 960px) {
  .kq-qp-cta--mobile { display: none; }
  .kq-qp-cta--desk { display: flex; }
}
@media (max-width: 959.98px) {
  .kq-qp-cta--desk { display: none; }
  .kq-qp-cta--mobile { display: flex; }
}
/* Tablet: side-by-side only when Save quote is present; renew’s lone Proceed stays full width. */
@media (min-width: 560px) and (max-width: 959.98px) {
  .kq-qp-cta--mobile .kq-qp-cta__btns:has(> :nth-child(2)) {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 959.98px) {
  .kq-qp-cta--mobile,
  .kq-qp-cta--mobile .kq-qp-cta__btns,
  .kq-qp-cta--mobile .kq-qp-cta__btns .kq-btn {
    width: 100%;
  }
}

.kq-qp-options { min-width: 0; }
.kq-qp__options > .kq-qp-options { /* options live inside white card */ }
.kq-qp-group { margin: 0; padding-top: 20px; border-top: 1px solid var(--kq-line-soft, #e3eaf1); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kq-muted, #4d6175); }
.kq-qp-extras { display: flex; flex-direction: column; }
.kq-qp-row__h { margin: 0; }
.kq-qp-collapse { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.kq-qp-collapse__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kq-qp-collapse__title { font-size: 16px; font-weight: 600; color: var(--kq-navy, #06385b); }
.kq-qp-collapse__peek { font-size: 14px; color: var(--kq-muted, #4d6175); }
.kq-qp-chev { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--kq-sky, #eaf3fc); color: var(--kq-blue, #0068b2); transition: transform 0.2s ease; }
.kq-qp-chev svg { width: 18px; height: 18px; }
.kq-qp-collapse[aria-expanded="true"] .kq-qp-chev { transform: rotate(180deg); }
.kq-qp-reveal { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }

.kq-qp-std__inner { display: flex; align-items: center; gap: 16px; width: 100%; }
.kq-qp-seg { --seg-n: 6; grid-template-columns: repeat(var(--seg-n, 6), minmax(0, 1fr)); }
@media (max-width: 520px) {
  .kq-qp-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kq-qp-seg__opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 4px; border: 1px solid var(--kq-blue, #0068b2); border-radius: 6px; background: #fff; cursor: pointer; text-align: center; font: inherit; color: inherit; }
.kq-qp-seg__opt:hover { background: #f4f9fe; }
.kq-qp-seg__opt.is-on { background: var(--kq-blue, #0068b2); border-color: var(--kq-blue, #0068b2); }
.kq-qp-seg__amt { font-weight: 600; font-size: 16px; color: var(--kq-navy, #06385b); font-variant-numeric: tabular-nums; }
.kq-qp-seg__opt.is-on .kq-qp-seg__amt { color: #fff; font-weight: 700; font-size: 17px; }
.kq-qp-seg__opt small { font-size: 12.5px; color: var(--kq-muted, #4d6175); }
.kq-qp-seg__opt.is-on small { color: #dbe9f7; }
.kq-qp-seg__opt:focus-visible { outline: 3px solid #8dbbe8; outline-offset: 2px; }

.kq-qp-more { background: none; border: 0; padding: 4px 0; min-height: 28px; align-self: flex-start; color: var(--kq-blue, #0068b2); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; font-family: inherit; }
.kq-qp-bp-detail { margin: 0; font-size: 13.5px; color: var(--kq-navy, #06385b); background: #f3f7fb; border-radius: 6px; padding: 10px 12px; }

.kq-qp-covers { display: flex; flex-direction: column; gap: 10px; }

.kq-qp-pay { display: flex; flex-direction: column; gap: 3px; margin-bottom: 0; }
.kq-qp-pay h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--kq-blue, #0068b2); }
.kq-qp-pay__row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.kq-qp-pay__row span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--kq-navy, #06385b); }
/* Pay in full — title + amount on one row (change request, all Motor quote screens) */
.kq-qp-pay__row--head {
  align-items: baseline;
}
.kq-qp-pay__row--head h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.kq-qp-pay__row--head > span:last-child {
  font-weight: 600;
}
.kq-qp-pay__strong { font-weight: 600; }
.kq-qp-pay__extra { align-items: center; margin: 6px 0; padding: 10px 12px; border-radius: 6px; background: #fdf3e1; border-left: 4px solid #c98a12; font-weight: 600; }
.kq-qp-pay__extra span:last-child { font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif); font-size: 20px; font-weight: 800; }
/* Master V2 .notice under Payment options */
.kq-qp-notice {
  margin: 0;
  background: var(--kq-sky, #eaf3fc);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kq-text, #1a2b3c);
}

.kq-qp-promo { display: flex; gap: 8px; flex-wrap: wrap; }
.kq-qp-promo .kq-input { flex: 1 1 180px; }
.kq-qp-promo-on { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 8px; background: var(--kq-on-soft, #e7f5ec); border: 1px solid #b5dfc2; color: #134d26; font-size: 14px; font-weight: 600; }
.kq-qp-doc { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--kq-blue, #0068b2); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.kq-qp-doc svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }

.kq-qp__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

.kq-qp-bd { width: 100%; border-collapse: collapse; border-top: 1px solid rgba(255, 255, 255, 0.18); margin: 0; font-size: 13.5px; }
.kq-qp-bd th, .kq-qp-bd td { padding: 3px 0; vertical-align: baseline; }
.kq-qp-bd thead th { padding-top: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kq-qp-premium-muted, #b9d1e8); text-align: right; }
.kq-qp-bd thead th:first-child { text-align: left; }
.kq-qp-bd tbody th { text-align: left; font-weight: 400; color: #dce9f5; padding-right: 12px; }
.kq-qp-bd td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
.kq-qp-bd td + td { padding-left: 14px; width: 4.2em; color: var(--kq-qp-premium-muted, #b9d1e8); }
/* Beat `.kq-qp-bd tbody th` specificity so group / base / sub / total match V5 .breakdown */
.kq-qp-bd tbody tr.kq-qp-bd__group th {
  padding-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kq-qp-premium-muted, #b9d1e8);
}
.kq-qp-bd tbody tr.kq-qp-bd__base th,
.kq-qp-bd tbody tr.kq-qp-bd__base td:first-of-type {
  color: #fff;
  font-weight: 600;
}
.kq-qp-bd tbody tr.kq-qp-bd__sub th,
.kq-qp-bd tbody tr.kq-qp-bd__sub td,
.kq-qp-bd tbody tr.kq-qp-bd__total th,
.kq-qp-bd tbody tr.kq-qp-bd__total td {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 6px;
  font-weight: 600;
  color: #fff;
}
.kq-qp-bd.is-stale, .kq-qp-bd[aria-busy="true"] { opacity: 0.45; transition: opacity 0.2s ease; }
.kq-qp-bd__note { margin: 0; font-size: 12.5px; color: var(--kq-qp-premium-muted, #b9d1e8); }
.kq-qp-premium__facts b { font-weight: 600; background: none; }

.kq-qp.is-busy .kq-qp-premium__links,
.kq-qp.is-busy .kq-qp-cta,
.kq-qp.is-busy .kq-qp-new,
.kq-qp.is-busy .kq-qp__nav { opacity: 0.5; pointer-events: none; }

/* Options column: white card wraps .kq-qp-options — put card on parent */
.kq-qp__options {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.kq-qp__options > .kq-qp-options {
  background: #fff;
  border-radius: var(--kq-card-radius, 12px);
  padding: 12px 24px;
  box-shadow: var(--kq-card-shadow, 0 1px 3px rgba(14, 51, 84, 0.08));
}
@media (max-width: 560px) {
  .kq-qp__options > .kq-qp-options { padding: 12px 18px; }
}

/* —— Testing jump tools (V5 prototype “Go to page”; gated by showJumpTools) —— */
/* Top-right FAB/panel. Quote screen nudges Buggie to bottom-left so they don’t stack. */
.kq-jump {
  position: fixed;
  z-index: 60;
  top: 16px;
  right: 16px;
  left: auto;
  bottom: auto;
  width: min(320px, calc(100vw - 32px));
  max-height: min(48vh, 420px);
  overflow: auto;
  background: #0f3557;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(14, 51, 84, 0.35);
  font-size: 13px;
}
.kq-jump__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.kq-jump__eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7fd3c9;
  margin-bottom: 2px;
}
.kq-jump__head strong { font-size: 15px; }
.kq-jump__hide {
  flex: none;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.kq-jump__hide:hover { background: rgba(255, 255, 255, 0.18); }
.kq-jump__body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.kq-jump__note { margin: 0; color: #b9d1e8; line-height: 1.4; }
.kq-jump__note code {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
}
.kq-jump__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.kq-jump__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kq-jump__btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.kq-jump__btn:hover { background: rgba(255, 255, 255, 0.14); }
.kq-jump__btn.is-on {
  background: #0068b2;
  border-color: #0068b2;
}
.kq-jump-fab {
  position: fixed;
  z-index: 60;
  /* Bottom-right so the FAB never covers sticky quote “Proceed” (top-right). */
  top: auto;
  right: 16px;
  left: auto;
  bottom: 88px;
  background: #0f3557;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(14, 51, 84, 0.35);
  cursor: pointer;
}
.kq-jump-fab:hover { background: #164a73; }
@media (max-width: 560px) {
  .kq-jump { top: auto; right: 10px; left: auto; bottom: 72px; width: min(300px, calc(100vw - 20px)); }
  .kq-jump-fab { top: auto; right: 10px; left: auto; bottom: 72px; }
}

/* Travel / Home quote — upsell, ticks, summary (Travel Quote Page V3 + Motor .kq-qp)
   Prototype: .upsell / .upsell-price / .upsell-perk / .btn-switch — amber is #f0b429
   (not --kq-sun #f0cf8c, which reads as a faint cream stroke). */
.kq-qp-upsell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  box-sizing: border-box;
  padding: 22px 24px;
  margin: 0;
  background: #fff;
  border: 1.5px solid #f0b429;
  border-radius: var(--kq-card-radius, 12px);
}
@media (min-width: 640px) {
  .kq-qp-upsell {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
@media (max-width: 560px) {
  .kq-qp-upsell {
    padding: 20px 18px;
  }
}
.kq-qp-upsell--done {
  border-color: var(--kq-line, #cfd8e1);
}
.kq-qp-upsell__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kq-qp-upsell__title {
  margin: 0;
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--kq-navy, #0e3354);
  line-height: 1.3;
}
.kq-qp-upsell__sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--kq-muted, #4d6175);
}
.kq-qp-upsell__price {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--kq-navy, #0e3354);
  vertical-align: baseline;
}
.kq-qp-upsell__price small {
  font-family: var(--kq-font-body, Poppins, sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: var(--kq-muted, #4d6175);
}
.kq-qp-upsell__perk {
  width: 100%;
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kq-qp-go-dark, var(--kq-leaf-dark, #4a842a));
}
@media (min-width: 640px) {
  .kq-qp-upsell__perk {
    white-space: nowrap;
  }
}
.kq-qp-upsell__perk svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.kq-qp-upsell__btn {
  flex: none;
  align-self: center;
  width: auto;
  min-height: 48px;
  height: auto;
  margin: 0;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
}
.kq-qp-upsell__btn--go {
  border: 0;
  background: var(--kq-blue, #1f66ad);
  color: #fff;
}
.kq-qp-upsell__btn--go:hover {
  background: var(--kq-blue-dark, #17538e);
  color: #fff;
}
.kq-qp-upsell__btn--back {
  background: #fff;
  color: var(--kq-blue, #1f66ad);
  border: 1.5px solid var(--kq-blue, #1f66ad);
}
.kq-qp-upsell__btn--back:hover {
  background: #f4f9fe;
}
.kq-qp-upsell__btn:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}
.kq-qp-upsell__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 639px) {
  .kq-qp-upsell__btn {
    width: 100%;
    align-self: stretch;
  }
}

.kq-qp-addon__price {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--kq-navy, #06385b);
}

.kq-qp-addon-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.kq-qp-addon-qty__q {
  font-size: 14px;
  color: var(--kq-navy, #06385b);
}
.kq-qp-addon-qty__note {
  margin: 0;
  font-size: 13px;
  color: var(--kq-muted, #4d6175);
}

.kq-qp-incl-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  margin: 20px 0 4px;
  border-radius: 8px;
  background: var(--kq-on-soft, #e7f5ec);
  border: 1px solid #b5dfc2;
  color: #134d26;
  font-size: 14px;
  font-weight: 600;
}
.kq-qp-incl-note svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}

.kq-qp-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 24px;
  font-size: 14.5px;
  color: var(--kq-navy, #06385b);
}
@media (min-width: 560px) {
  .kq-qp-ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.kq-qp-ticks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}
.kq-qp-ticks li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 7px;
  margin-top: 7px;
  border-left: 2px solid #1e8a3f;
  border-bottom: 2px solid #1e8a3f;
  transform: rotate(-45deg);
}
.kq-qp-tick__txt {
  min-width: 0;
  flex: 1 1 auto;
}
.kq-qp-tick-added {
  display: inline;
  white-space: nowrap;
  margin-left: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #2f6b2f;
}

.kq-qp-sum {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kq-qp-sum__card {
  border: 1px solid var(--kq-line-soft, #e3eaf1);
  border-radius: 8px;
  padding: 14px 16px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden; /* KD-109: keep long emails inside Contact card */
}
.kq-qp-sum__card .kq-qp-sum__rows,
.kq-qp-sum__card .kq-qp-sum__rows dd,
.kq-qp-sum__card .kq-qp-sum__rows dt {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kq-qp-sum__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.kq-qp-sum__head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--kq-navy, #06385b);
}
.kq-qp-sum__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 6px 16px;
  margin: 0;
}
.kq-qp-sum__rows dt {
  margin: 0;
  font-size: 13.5px;
  color: var(--kq-muted, #4d6175);
  min-width: 0;
}
.kq-qp-sum__rows dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--kq-navy, #06385b);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kq-qp-sum__line {
  display: block;
}

@media (max-width: 560px) {
  .kq-qp-sum__rows {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .kq-qp-sum__rows dd {
    text-align: left;
    margin-bottom: 8px;
  }

  .kq-qp-sum__rows dd:last-child {
    margin-bottom: 0;
  }
}

.kq-qp-back-link {
  display: inline-flex;
  align-items: center;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kq-blue, #0068b2);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kq-qp-back-link:hover {
  text-decoration: none;
}

.kq-qp-options > .kq-qp-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.kq-qp.is-busy .kq-qp-upsell,
.kq-qp.is-busy .kq-qp-back-link {
  opacity: 0.5;
  pointer-events: none;
}

/* —— Travel V2 Worldnet / payment placeholder —— */
.kq-page-head {
  margin: 0 0 20px;
}

.kq-page-sub[hidden] {
  display: none;
}

.kq-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kq-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kq-block:empty {
  display: none;
}

.kq-stub-band {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff8e8;
  border: 1px solid #f0d9a8;
  color: #5a3d00;
  font-size: 14px;
  line-height: 1.5;
}

.kq-stub-band svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
}

.kq-stub-band b {
  font-weight: 700;
}

.kq-notice-danger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 24px;
  border-radius: 8px;
  background: #fbeceb;
  border: 1px solid #c9605a;
  color: #7a1f1a;
}

/* Renewal login (A5.1): red not-found sits above the fields, after the lead. */
.kq-lead + .kq-notice-danger,
#kq-rn-not-found {
  margin: 0 0 20px;
}

.kq-notice-danger b {
  color: #7a1f1a;
  font-weight: 700;
}

.kq-notice-danger .kq-tel {
  color: var(--kq-blue, #0068b2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kq-notice-danger .kq-tel:hover,
.kq-notice-danger .kq-tel:focus-visible {
  color: var(--kq-blue, #0068b2);
  text-decoration: none;
}

.kq-notice-danger:focus {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

/* A5.4 Driver & licence (renew) */
.kq-dn-renew > .kq-lead {
  margin: 0 0 12px;
}

.kq-dn-renew > .kq-note--warn {
  margin-bottom: 24px;
}

.kq-dn-renew > .kq-field--lic-confirm {
  margin-bottom: 0;
}

.kq-sim-box {
  border: 1px dashed #9cb4cc;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kq-sim-h {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kq-muted);
}

.kq-sim-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kq-sim-btns .kq-btn {
  flex: 1 1 200px;
}

.kq-worldnet-nav {
  margin-top: 16px;
}

/* Travel V2 confirmation (done) — prototype .done-panel / .sum-card / .btn-add */
.kq-done .kq-page-head {
  margin-bottom: 26px;
}

.kq-done-fields,
.kq-done .fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kq-done .block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.done-panel {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #eef7f0;
  border: 1px solid #b9dcc3;
  border-radius: var(--kq-card-radius, 14px);
  padding: 20px 22px;
}

.done-tick {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kq-leaf, #3a8a3a);
  color: #fff;
  display: grid;
  place-items: center;
}

.done-tick svg {
  width: 22px;
  height: 22px;
}

.done-panel .eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kq-leaf-700, #2f5a17);
}

.done-num {
  margin: 2px 0 6px;
  font-family: var(--kq-font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--kq-navy);
  letter-spacing: 0.02em;
}

.done-sub {
  margin: 0;
  font-size: 14.5px;
  color: var(--kq-text);
}

.done-sub b {
  color: var(--kq-navy);
  font-weight: 600;
}

.sum-card.done-card,
.kq-done .sum-card {
  border: 1px solid var(--kq-line);
  border-radius: 8px;
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kq-done .sum-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kq-done .sum-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--kq-navy);
}

.kq-done .sum-rows {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  font-size: 14px;
}

.kq-done .sum-rows dt {
  color: var(--kq-muted);
}

.kq-done .sum-rows dd {
  margin: 0;
  text-align: right;
  color: var(--kq-navy);
  font-weight: 500;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.kq-done .btn-add,
button.btn-add {
  align-self: flex-start;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--kq-blue);
  border-radius: 6px;
  background: #fff;
  color: var(--kq-blue);
  font: 600 15px / 1 var(--kq-font-body);
  cursor: pointer;
}

.kq-done .btn-add:hover,
button.btn-add:hover {
  background: #f4f9fe;
}

.kq-done .btn-add:focus-visible,
button.btn-add:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
}

/* Travel V2 re-cap / pay (prototype .card / .stub-price.pay-total / .sum-card) */
/* -------------------------------------------------------------------------- */
.kq-pay-card {
  gap: 26px; /* prototype .card gap */
}
.kq-pay-card .kq-page-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0; /* spacing from .kq-pay-card gap, not page-head margin */
}
.kq-pay-card .kq-h1 {
  margin: 0;
}

/* Dark navy Total to pay panel — port of .stub-price.pay-total */
.kq-pay-total {
  background: var(--kq-navy, #0e3354);
  color: #fff;
  border-radius: 14px;
  padding: 26px 28px;
  margin: 0;
}
@media (max-width: 560px) {
  .kq-pay-total {
    padding: 22px 20px;
  }
}
.kq-pay-total__eyebrow {
  margin: 0;
  font: 600 12px / 1.4 var(--kq-font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b9d3ea;
}
.kq-pay-total__amt {
  margin: 4px 0 0;
  font: 800 44px / 1.1 var(--kq-font-display);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.kq-pay-total__amt small {
  margin-left: 6px;
  font: 500 16px / 1.2 var(--kq-font-body);
  color: #cfe0ef;
}
.kq-pay-total__meta {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kq-pay-total__meta p {
  margin: 0;
  color: #dce9f5;
  font-size: 14.5px;
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kq-pay-total__meta p b {
  color: #fff;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kq-pay-total__meta p:first-child b {
  display: block;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
/* KD-109: long confirmation email must wrap on mobile */
.kq-pay-total__meta p:not(:first-child) b {
  display: inline;
}

/* Check your details + sum-cards — port of .q-sum.pay-check / .sum-card */
.kq-pay-check {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kq-pay-check__h {
  margin: 4px 0 0;
  font: 700 18px / 1.3 var(--kq-font-display);
  color: var(--kq-navy, #0e3354);
}
.kq-pay-check__help {
  margin: -6px 0 2px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--kq-muted, #4d6175);
}

/* Scoped under .kq-pay-check so we don't clash with Motor .kq-sum-card */
.kq-pay-check .kq-sum-card {
  border: 1px solid var(--kq-line, #cfd8e1);
  border-radius: 8px;
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  box-shadow: none;
}
.kq-pay-check .kq-sum-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kq-pay-check .kq-sum-card__head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--kq-navy, #0e3354);
}
.kq-sum-card__edit {
  flex: none;
  background: none;
  border: 0;
  padding: 4px 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  color: var(--kq-blue, #1f66ad);
  font: 600 14px / 1.2 var(--kq-font-body);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kq-sum-card__edit:hover {
  color: var(--kq-blue-dark, #17538e);
}
.kq-sum-card__edit:focus-visible {
  outline: 3px solid #8dbbe8;
  outline-offset: 2px;
  border-radius: 2px;
}
.kq-pay-check .kq-sum-card__rows {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  font-size: 14px;
}
.kq-pay-check .kq-sum-card__rows dt {
  margin: 0;
  color: var(--kq-muted, #4d6175);
  font-weight: 400;
}
.kq-pay-check .kq-sum-card__rows dd {
  margin: 0;
  text-align: right;
  color: var(--kq-navy, #0e3354);
  font-weight: 500;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.kq-sum-card__line {
  display: block;
}

.kq-pay-docs {
  margin: 0 !important;
  font-size: 14.5px;
  color: var(--kq-text, #1d3b57);
}
.kq-pay-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  flex-wrap: wrap;
}

/* Motor V6 — How would you like to pay? / Payment plan details */
.kq-opt.is-disabled,
.kq-opt[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
/* Master V2 .credit-box — tinted credit-agreement statement under Pay options */
.kq-pay-credit {
  margin: 16px 0 0;
  padding: 14px 18px;
  border-radius: 8px;
  background: #f3f8fd;
  font: 400 14.5px / 1.6 Poppins, sans-serif;
  color: var(--kq-text, #1a2b3c);
}
.kq-pay-credit strong {
  color: var(--kq-navy, #06385b);
  font-weight: 600;
}
/* Prototype .field.drv-f card — pale header bar + #cfe0f1 border */
.kq-pay-plan {
  margin-top: 20px;
  border: 1px solid #cfe0f1;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kq-pay-plan__h {
  margin: 0;
  padding: 16px 28px;
  background: #f3f8fd;
  border-bottom: 1px solid #dde9f5;
  font-family: var(--kq-font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--kq-navy, #0e3354);
}
.kq-pay-plan__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 28px 24px;
}
/* Prototype .plan-table */
.kq-pay-plan__rows {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.kq-pay-plan__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid #e8eef4;
  font: 400 15px / 1.4 var(--kq-font-body, Poppins, sans-serif);
  color: var(--kq-text, #1d3b57);
}
.kq-pay-plan__row:first-child {
  border-top: 0;
}
.kq-pay-plan__row dt {
  margin: 0;
  font-weight: 400;
  color: var(--kq-text, #1d3b57);
}
.kq-pay-plan__row dd {
  margin: 0;
  font-weight: 600;
  color: var(--kq-navy, #0e3354);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.kq-pay-plan__row--total {
  background: #f3f8fd;
}
.kq-pay-plan__row--total dt,
.kq-pay-plan__row--total dd {
  font-weight: 700;
  color: var(--kq-navy, #0e3354);
}
/* Prototype .info-box.rn-bank */
.kq-pay-plan__bank.kq-note--info {
  background: var(--kq-sky, #eaf3fc);
  border: 1px solid #b7d4ee;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0;
}
.kq-input.is-readonly {
  background: #f3f6f9;
  color: var(--kq-muted, #5c6b79);
  cursor: default;
}
/* Payment plan fields: tighter than journey-default 24px. */
.kq-pay-plan .kq-field {
  margin-bottom: 12px;
}
.kq-pay-plan .kq-field:last-of-type {
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .kq-pay-plan__h,
  .kq-pay-plan__body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* IBAN sits tight above the criteria block (.kq-pay-plan gap handles spacing). */
.kq-field.kq-field--iban {
  margin-bottom: 0;
  padding-bottom: 0;
}

.kq-iban-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.kq-iban-row .kq-input {
  flex: 1;
  min-width: 0;
}
.kq-iban-validate {
  flex: none;
  white-space: nowrap;
}
.kq-input--iban.is-valid {
  border-color: #2e9b5a;
}
.kq-iban-ok {
  margin: 8px 0 0;
  font: 500 14px / 1.35 Poppins, sans-serif;
  color: #2e9b5a;
}
/* Match V6 prototype .plan-criteria (Tailwind/site CSS zeros list-style on ul). */
.kq-pay-criteria {
  margin: 0;
  font: 400 15px / 1.55 Poppins, sans-serif;
  color: var(--kq-text, #1d3b57);
}
.kq-pay-criteria__intro {
  margin: 0;
  font: inherit;
  color: inherit;
}
.kq-pay-criteria__list {
  /* Equal space above and below the bullets (matches .kq-pay-plan gap). */
  margin: 16px 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
  list-style: disc;
  list-style-position: outside;
  font: inherit;
  color: inherit;
}
.kq-pay-criteria__list li {
  list-style: disc;
  display: list-item;
}
/* Keep “I have read and confirm…” on one line on wide screens. */
@media (min-width: 960px) {
  .kq-pay-criteria .kq-consent > span:not(.kq-check) {
    white-space: nowrap;
  }
}
@media (max-width: 640px) {
  .kq-iban-row {
    flex-direction: column;
  }
  .kq-iban-validate {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Home V3 quote page — panel / options polish vs prototype                   */
/* -------------------------------------------------------------------------- */
.kq-qp-premium__ref-no {
  color: #fff;
  letter-spacing: 0.06em;
}

.kq-qp-bd-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kq-qp-bd.home-bd td {
  width: auto;
}

/* Call CTA full width (JS historically used __buttons; Motor uses __btns) */
.kq-qp-cta__buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.kq-qp-cta__buttons .kq-btn,
.kq-qp-cta__btns .kq-qp-cta__pay,
.kq-qp-cta__buttons .kq-qp-cta__pay {
  width: 100%;
  height: 52px;
  min-height: 52px;
  justify-content: center;
}

/* Options: less empty space above first block; space between Call-us paras */
.kq-qp__options > .kq-qp-options > .kq-qp-row:first-child {
  padding-top: 12px;
}
.kq-qp-row--call .kq-qp-row__text {
  gap: 0;
}
.kq-qp-row__text .kq-qp-row__sub + .kq-qp-row__sub {
  margin-top: 8px;
}

/* View summary cards: prototype .q-sum gap */
.kq-qp-reveal .kq-qp-sum {
  gap: 12px;
}
.kq-qp-reveal .kq-qp-sum__card {
  border-color: var(--kq-line, #cfd8e1);
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kq-qp-reveal .kq-qp-sum__head {
  margin-bottom: 0;
}
.kq-qp-reveal .kq-qp-sum__rows {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  font-size: 14px;
}