:root{--brand:#1e7f4e;--brand-900:#155f3b;--ink:#222;--muted:#666;--paper:#fff;--ui:#f6f7f8;--border:#d8dadd}
.kcobj-wrap{max-width:980px;margin:24px auto 64px;padding:24px;background:var(--paper);border:1px solid var(--border);border-radius:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);line-height:1.45}
.kcobj-wrap h1{text-align:center;margin:0 0 12px}
.kcobj-wrap .lead{text-align:center;color:var(--muted);margin:0 0 24px}
.kc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.kc-card{border:1px solid var(--border);border-radius:12px;padding:16px;background:#fff}
.full{grid-column:span 12}
.half{grid-column:span 6}
.kc-grid.two{grid-template-columns:1fr 1fr}
label{display:block;font-weight:600;margin:10px 0 6px}
label.inline{display:flex;align-items:flex-start;gap:10px;font-weight:500}
input[type=text],textarea{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:15px;background:#fff}
input[readonly],input[disabled]{background:#f5f5f5;color:#555}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;align-items:center}
button{appearance:none;border:0;border-radius:999px;padding:10px 16px;font-weight:700;background:var(--brand);color:#fff;cursor:pointer;transition:transform .05s ease,background .15s ease,box-shadow .15s ease;box-shadow:0 2px 0 rgba(0,0,0,.15)}
button:hover{background:var(--brand-900);transform:translateY(-1px)}
button:active{transform:translateY(0);box-shadow:none}
#letter-preview{margin-top:24px}
#letter-preview h2{text-align:center;margin:0 0 12px}
#letter-content{border:1px solid var(--border);border-radius:12px;background:#fff;padding:24px}
.hdr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hdr div:last-child{text-align:right;color:#999}
.section-title{font-weight:800;display:block;margin:16px 0 4px}
.policy-line{color:#3b3b3b;font-size:14px;margin:8px 0 0}
.refs{margin-top:24px;padding-top:16px;border-top:1px dashed var(--border);color:var(--muted);font-size:14px}
.hint{font-size:13px;color:#666;margin-top:-4px}
@media print{
 .kcobj-wrap,.kc-card,#letter-content{border:0;border-radius:0}
 .kc-grid,.kc-card,.actions,h1,.lead{display:none!important}
 #letter-preview,#letter-content{display:block!important}
 #letter-content{padding:0}
 @page{size:A4;margin:8mm 10mm 10mm 10mm}
}
/* === Mobile UX upgrades === */
@media (max-width: 640px){
  .kcobj-wrapper .grid.two{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .kcobj-wrapper label > span{
    display:block;
    font-size:14px;
    margin-bottom:6px;
  }
  .kcobj-wrapper input[type="text"],
  .kcobj-wrapper textarea{
    width:100%;
    padding:12px;
    font-size:16px; /* prevents iOS zoom */
    border:1px solid #d9d9d9;
    border-radius:10px;
  }
  .checks label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px;
    border:1px solid #e6e6e6;
    border-radius:12px;
    margin:8px 0;
    line-height:1.4;
  }
  .checks input[type="checkbox"]{
    width:22px; height:22px; margin-top:2px;
    accent-color:#0b5ed7;
  }
  #kc-objection-form .actions{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  /* Make the main action row sticky at the bottom on phones */
  #kc-objection-form .actions:last-of-type{
    position: sticky;
    bottom: 0;
    background:#fff;
    padding:10px;
    border-top:1px solid #eee;
    box-shadow: 0 -8px 16px rgba(0,0,0,.06);
    z-index: 9;
  }
  #kc-objection-form .actions button{
    width:100%;
    padding:14px;
    font-size:16px;
    border-radius:10px;
  }
  #letter-preview h3{
    position: sticky;
    top: 0;
    background:#fff;
    padding:8px 0;
    z-index: 5;
  }
}
/* Busy state visual for our click locks (already in your JS) */
.kc-busy{ opacity:.7; pointer-events:none; }
/* === Stepper === */
.kc-steps .kc-step{ display:block; }
.kc-steps .kc-step:not(:first-child){ display:none; }
.kc-step-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid #eee;
}
.kc-step-nav .primary, .kc-step-nav .secondary{
  padding:10px 14px; border-radius:10px; border:1px solid #d9d9d9; background:#f7f7f7; cursor:pointer;
}
.kc-step-nav .primary{ background:#0b5ed7; color:#fff; border-color:#0b5ed7; }
.kc-dots{ display:flex; gap:8px; }
.kc-dots .dot{ width:10px; height:10px; border-radius:50%; background:#ddd; }
.kc-dots .dot.active{ background:#0b5ed7; }

/* === Consent === */
.kc-consent{ display:flex; align-items:center; gap:8px; margin-top:6px; font-size:14px; }
.kc-consent input{ width:18px; height:18px; accent-color:#0b5ed7; }

/* === Floating CTA === */
#kc-float-preview{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  padding:14px 18px; border-radius:999px; border:none; font-weight:600; font-size:16px;
  background:#0b5ed7; color:#fff; box-shadow:0 12px 24px rgba(0,0,0,.18);
}
@media (max-width:640px){ #kc-float-preview{ left:16px; right:16px; width:calc(100% - 32px); } }
 .kc-step-nav .primary:disabled { opacity:.5; cursor:not-allowed; }

/* Stepper buttons: make Back (secondary) an outline-blue, Next (primary) solid blue */
#kc-steps .kc-step-nav .primary{
  background:#0b5ed7 !important;
  color:#fff !important;
  border:1px solid #0b5ed7 !important;
}
#kc-steps .kc-step-nav .primary:hover{
  background:#084dbf !important;
  border-color:#084dbf !important;
}

/* Back button as outline */
#kc-steps .kc-step-nav .secondary{
  background:transparent !important;
  color:#0b5ed7 !important;
  border:2px solid #0b5ed7 !important;
}
#kc-steps .kc-step-nav .secondary:hover{
  background:#e7f1ff !important; /* subtle blue tint on hover */
}

/* Keep the disabled state obvious on Next */
#kc-steps .kc-step-nav .primary:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
}

/* Ensure both buttons have same shape/spacing regardless of theme */
#kc-steps .kc-step-nav .primary,
#kc-steps .kc-step-nav .secondary{
  border-radius:10px !important;
  padding:10px 14px !important;
  font-weight:600 !important;
}