/* Kaizen Auto Shop Valuation Tool. Scoped styles.
   Brand tokens are sourced from data/brand-tokens.json. See Kaizen Brand
   Guidelines v.2026 pp. 11-13. All selectors are prefixed .ksv- to avoid
   collisions on the host HubSpot page. */

.ksv {
  /* ── Brand color tokens (named) ─────────────────────────── */
  --kz-onyx: #0F0F0F;
  --kz-tan: #DDCCA5;
  --kz-ember: #D66A4A;
  --kz-graphite: #3A3838;
  --kz-parchment: #F1EFEA;
  --kz-white: #FFFFFF;

  /* ── Derived utility tokens (use sparingly, prefer named) ─ */
  --kz-tan-soft: rgba(221, 204, 165, 0.32);
  --kz-tan-line: rgba(221, 204, 165, 0.55);
  --kz-onyx-on-parchment-line: rgba(15, 15, 15, 0.08);
  --kz-onyx-glow: rgba(15, 15, 15, 0.04);

  /* ── Typography ─────────────────────────────────────────── */
  --kz-font: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
}

.ksv,.ksv *{box-sizing:border-box;margin:0;padding:0}
.ksv{font-family:var(--kz-font);color:var(--kz-onyx);background:var(--kz-parchment);line-height:1.5;-webkit-font-smoothing:antialiased}
.ksv h1,.ksv h2,.ksv h3,.ksv h4{font-family:var(--kz-font);line-height:1.15;color:var(--kz-onyx)}
.ksv h1,.ksv h2{font-weight:800;letter-spacing:0.005em}
.ksv h3{font-weight:700}

/* ── Layout container ─────────────────────────────────────── */
.ksv-app{max-width:880px;margin:0 auto;padding:32px 20px 80px}
.ksv-card{background:var(--kz-white);border:1px solid var(--kz-tan);border-radius:12px;padding:32px 28px;box-shadow:0 1px 0 var(--kz-onyx-glow)}
.ksv-card+.ksv-card{margin-top:20px}

/* ── Hero ─────────────────────────────────────────────────── */
.ksv-hero{text-align:left;padding:8px 0 4px}
.ksv-eyebrow{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--kz-graphite);font-weight:700;margin-bottom:14px}
.ksv-h1{font-size:clamp(28px,3.4vw,40px);margin-bottom:14px;color:var(--kz-onyx)}
.ksv-lede{font-size:17px;color:var(--kz-onyx);max-width:60ch;margin-bottom:18px;line-height:1.5}
.ksv-disclaimer-banner{background:var(--kz-white);border:1px solid var(--kz-tan);border-left:4px solid var(--kz-onyx);color:var(--kz-onyx);border-radius:8px;padding:14px 16px 14px 18px;font-size:13px;line-height:1.5;margin-bottom:20px}
.ksv-disclaimer-banner strong{color:var(--kz-onyx);font-weight:700}

/* ── Progress bar ─────────────────────────────────────────── */
.ksv-progress{height:6px;background:var(--kz-parchment);border:1px solid var(--kz-tan-soft);border-radius:3px;overflow:hidden;margin:0 0 28px}
.ksv-progress-fill{height:100%;background:var(--kz-graphite);border-radius:3px;transition:width .35s ease}

/* ── Step header ──────────────────────────────────────────── */
.ksv-step-num{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--kz-graphite);font-weight:700;margin-bottom:8px}
.ksv-step-title{font-size:24px;margin-bottom:6px;color:var(--kz-onyx)}
.ksv-step-subtitle{font-size:15px;color:var(--kz-onyx);margin-bottom:24px;line-height:1.5}

/* ── Financial inputs ─────────────────────────────────────── */
.ksv-toggle-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding:12px 14px;background:var(--kz-parchment);border:1px solid var(--kz-tan-soft);border-radius:8px}
.ksv-toggle-row label{font-size:14px;color:var(--kz-onyx);font-weight:700;cursor:pointer}
.ksv-toggle-row input{margin-right:8px;cursor:pointer;accent-color:var(--kz-graphite)}
.ksv-input-grid{display:flex;flex-direction:column;gap:6px}

/* Row layout: [?] | label+hint | input
   3-yr mode:  [?] | label+hint | Y1 | Y2 | Y3
   The ? button is left-justified per the row, label is to its right, input(s) align right.
   Vertically tighter than v1 (input was on a new row below the label). */
.ksv-input-row{display:grid;grid-template-columns:28px minmax(0,1fr) 200px;column-gap:14px;row-gap:0;align-items:center;padding:10px 0;border-bottom:1px solid var(--kz-tan-soft);position:relative}
.ksv-input-row.multi{grid-template-columns:28px minmax(0,1fr) 110px 110px 110px}
.ksv-input-row:last-child{border-bottom:0}
.ksv-input-label-cell{min-width:0}
.ksv-input-label{display:block;font-size:14px;font-weight:700;color:var(--kz-onyx);line-height:1.3}
.ksv-input-hint{display:block;font-size:12px;color:var(--kz-graphite);line-height:1.4;margin-top:2px}
.ksv-input-wrap{position:relative}
.ksv-input-wrap::before{content:'$';position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--kz-graphite);font-size:15px;pointer-events:none}
.ksv-input{width:100%;padding:9px 12px 9px 24px;font-size:15px;border:1px solid var(--kz-tan-line);border-radius:6px;background:var(--kz-white);color:var(--kz-onyx);font-family:var(--kz-font);font-weight:400;text-align:right;-moz-appearance:textfield}
.ksv-input::-webkit-outer-spin-button,.ksv-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ksv-input:focus{outline:none;border-color:var(--kz-onyx);box-shadow:0 0 0 3px var(--kz-tan-soft)}
.ksv-info-btn{width:24px;height:24px;border:1px solid var(--kz-tan-line);background:var(--kz-white);color:var(--kz-graphite);border-radius:50%;font-size:13px;font-weight:700;cursor:help;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .2s;font-family:var(--kz-font);align-self:start;margin-top:2px}
.ksv-info-btn:hover,.ksv-info-btn:focus-visible,.ksv-info-btn[aria-expanded="true"]{background:var(--kz-onyx);color:var(--kz-tan);border-color:var(--kz-onyx);outline:none}

/* Floating popover anchored under the ? button. Hidden by default; shown on hover/focus
   of the ? button (or on tap-to-pin via .on for touch devices). Absolute-positioned so it
   doesn't push other rows down. No layout jump on hover. */
.ksv-info-popover{display:none;position:absolute;top:calc(100% - 6px);left:0;right:0;background:var(--kz-onyx);color:var(--kz-white);border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.5;z-index:20;box-shadow:0 8px 24px rgba(15,15,15,0.22);pointer-events:none}
.ksv-info-popover::before{content:'';position:absolute;top:-5px;left:7px;width:10px;height:10px;background:var(--kz-onyx);transform:rotate(45deg)}
.ksv-info-popover strong{color:var(--kz-tan);display:block;margin-bottom:4px;font-weight:700}
.ksv-info-popover.on{display:block;pointer-events:auto}
.ksv-info-btn:hover ~ .ksv-info-popover,
.ksv-info-btn:focus-visible ~ .ksv-info-popover{display:block}
.ksv-yr-label{font-size:10px;color:var(--kz-graphite);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:2px;font-weight:700;text-align:left}

/* ── Running total ────────────────────────────────────────── */
.ksv-running{margin-top:18px;padding:16px 18px;background:var(--kz-onyx);color:var(--kz-white);border-radius:8px;display:flex;justify-content:space-between;align-items:center}
.ksv-running-label{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--kz-tan);font-weight:700}
.ksv-running-value{font-size:22px;font-weight:800;color:var(--kz-white);font-family:var(--kz-font)}

/* ── Quiz ─────────────────────────────────────────────────── */
.ksv-question-prompt{font-size:18px;font-weight:700;color:var(--kz-onyx);margin-bottom:18px;line-height:1.4}
.ksv-answer-list{display:flex;flex-direction:column;gap:10px}
.ksv-answer-list[hidden]{display:none}
.ksv-answer{display:block;padding:14px 16px;border:1px solid var(--kz-tan-line);border-radius:8px;background:var(--kz-white);cursor:pointer;font-size:15px;color:var(--kz-onyx);text-align:left;font-family:var(--kz-font);font-weight:400;transition:all .15s;width:100%;line-height:1.45}
.ksv-answer:hover{border-color:var(--kz-onyx);background:var(--kz-parchment)}
.ksv-answer.selected{border-color:var(--kz-onyx);background:var(--kz-parchment);box-shadow:0 0 0 1px var(--kz-onyx) inset}
.ksv-answer-radio{display:inline-block;width:18px;height:18px;border:2px solid var(--kz-tan-line);border-radius:50%;vertical-align:middle;margin-right:10px;position:relative;transition:border-color .15s}
.ksv-answer.selected .ksv-answer-radio{border-color:var(--kz-onyx)}
.ksv-answer.selected .ksv-answer-radio::after{content:'';position:absolute;top:3px;left:3px;width:8px;height:8px;background:var(--kz-onyx);border-radius:50%}

/* ── Buttons ──────────────────────────────────────────────── */
.ksv-btn-row{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px;flex-wrap:wrap}
.ksv-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;border:1px solid transparent;font-family:var(--kz-font);transition:all .15s;text-decoration:none;letter-spacing:0.01em}
.ksv-btn:focus{outline:none;box-shadow:0 0 0 3px var(--kz-tan-soft)}
/* Primary CTA: Kaizen orange (Forged Ember). All "Continue", "Submit", "Open report"
   actions render in Ember to signal Kaizen brand action. Holds across the project. */
.ksv-btn-primary{background:var(--kz-ember);color:var(--kz-white);border-color:var(--kz-ember)}
.ksv-btn-primary:hover:not(:disabled){background:#c25b3d;border-color:#c25b3d}
.ksv-btn-primary:disabled{background:var(--kz-tan-line);border-color:var(--kz-tan-line);cursor:not-allowed;color:var(--kz-white)}
.ksv-btn-secondary{background:transparent;color:var(--kz-onyx);border-color:var(--kz-tan-line)}
.ksv-btn-secondary:hover{border-color:var(--kz-onyx)}
/* Accent CTA: same Ember treatment as primary. Class kept for legacy markup. */
.ksv-btn-accent{background:var(--kz-ember);color:var(--kz-white);border-color:var(--kz-ember)}
.ksv-btn-accent:hover{background:#c25b3d;border-color:#c25b3d}

/* ── Result ───────────────────────────────────────────────── */
.ksv-result-hero{text-align:center;padding:8px 0 24px;border-bottom:1px solid var(--kz-tan-soft);margin-bottom:24px}
.ksv-result-eyebrow{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--kz-graphite);font-weight:700;margin-bottom:8px}
.ksv-result-value{font-size:clamp(36px,5.5vw,56px);font-weight:800;color:var(--kz-onyx);margin-bottom:6px;line-height:1.05;letter-spacing:-0.02em;font-family:var(--kz-font)}
.ksv-result-range{font-size:15px;color:var(--kz-graphite);margin-bottom:12px}
.ksv-result-stage{display:inline-block;padding:6px 14px;background:var(--kz-parchment);border:1px solid var(--kz-tan);color:var(--kz-onyx);border-radius:100px;font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase}
.ksv-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.ksv-result-cell{padding:14px 16px;background:var(--kz-parchment);border-radius:8px}
.ksv-result-cell-label{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--kz-graphite);font-weight:700;margin-bottom:4px}
.ksv-result-cell-value{font-size:20px;font-weight:800;color:var(--kz-onyx);font-family:var(--kz-font)}

.ksv-asset-only{padding:24px;background:var(--kz-parchment);border:1px solid var(--kz-onyx);border-radius:8px;text-align:center}
.ksv-asset-only h3{color:var(--kz-onyx);margin-bottom:8px}
.ksv-asset-only p{color:var(--kz-onyx);font-size:15px;line-height:1.5}

/* ── Email gate (Parchment surface, light + branded with Foundry Tan accents) ─
   Light, engaging treatment instead of an Onyx wall. Foundry Tan border + accent strip
   on the left signals the brand without dominating. Forged Ember stays on the submit
   button (the conversion moment) so it pops harder against the warm-light background. */
.ksv-gate{margin-top:28px;padding:28px 28px 28px 32px;background:var(--kz-parchment);border:1px solid var(--kz-tan);border-left:4px solid var(--kz-onyx);border-radius:12px;color:var(--kz-onyx);position:relative}
.ksv-gate-eyebrow{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--kz-graphite);font-weight:700;margin-bottom:8px}
.ksv-gate h3{color:var(--kz-onyx);font-size:24px;margin-bottom:10px;font-weight:800;letter-spacing:0.005em;line-height:1.2}
.ksv-gate p{font-size:15px;color:var(--kz-onyx);margin-bottom:20px;line-height:1.5;max-width:62ch}
.ksv-gate-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ksv-gate-form .full{grid-column:1/-1}
.ksv-gate-input{width:100%;padding:12px 14px;font-size:15px;border:1px solid var(--kz-tan-line);border-radius:6px;background:var(--kz-white);color:var(--kz-onyx);font-family:var(--kz-font);font-weight:400}
.ksv-gate-input::placeholder{color:var(--kz-graphite);opacity:0.72}
.ksv-gate-input:focus{outline:none;border-color:var(--kz-onyx);box-shadow:0 0 0 3px var(--kz-tan-soft);background:var(--kz-white)}
.ksv-gate-error{color:var(--kz-ember);font-size:13px;margin-top:8px;min-height:18px;font-weight:700}
.ksv-gate-fine{font-size:11px;color:var(--kz-graphite);margin-top:10px;line-height:1.5}

/* Success state, same warm-light treatment with two side-by-side CTAs. */
.ksv-gate-success{margin-top:28px;padding:28px;background:var(--kz-parchment);border:1px solid var(--kz-tan);border-left:4px solid var(--kz-onyx);border-radius:12px;text-align:left}
.ksv-gate-success-eyebrow{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--kz-graphite);font-weight:700;margin-bottom:8px}
.ksv-gate-success h4{color:var(--kz-onyx);font-size:24px;margin-bottom:10px;font-weight:800;letter-spacing:0.005em;line-height:1.2}
.ksv-gate-success p{color:var(--kz-onyx);font-size:15px;line-height:1.5;margin-bottom:18px;max-width:62ch}
.ksv-gate-success-actions{display:flex;flex-wrap:wrap;gap:10px}
.ksv-gate-success a.ksv-btn{text-decoration:none}

/* ── Persistent disclaimer footer (full-width strip across the bottom) ─
   Always visible across all stages. Light Parchment surface so it stays
   in keeping with the lightened result page; subtle Tan top border to
   demarcate it as fine-print legal copy. */
.ksv-disclaimer-footer{background:var(--kz-parchment);border-top:1px solid var(--kz-tan);padding:18px 0 24px;margin-top:32px;width:100%}
.ksv-disclaimer-footer-inner{max-width:880px;margin:0 auto;padding:0 20px;font-size:12px;line-height:1.55;color:var(--kz-graphite);text-align:center}
.ksv-disclaimer-footer-inner strong{color:var(--kz-onyx);font-weight:700}

@media(max-width:640px){
  .ksv-app{padding:18px 14px 60px}
  .ksv-card{padding:22px 18px}
  /* On narrow screens, ? stays left, label takes the rest, input wraps to a new row spanning columns 2-3 */
  .ksv-input-row{grid-template-columns:28px 1fr;column-gap:12px;row-gap:6px}
  .ksv-input-row .ksv-input-wrap{grid-column:2/-1}
  .ksv-input-row.multi{grid-template-columns:28px 1fr 1fr 1fr}
  .ksv-input-row.multi .ksv-input-wrap{grid-column:auto}
  .ksv-input-row.multi .ksv-input-label-cell{grid-column:2/-1}
  .ksv-gate-form{grid-template-columns:1fr}
  .ksv-btn-row{flex-direction:column-reverse;align-items:stretch}
  .ksv-btn{justify-content:center;width:100%}
}

/* ── Dark surface overlay ───────────────────────────────────────
   Flips surfaces to black with light text. Layered on top of the
   light tokens above so the original palette is preserved and the
   overlay can be removed in one block to revert. Body text uses
   weight 300 for the "light + airy" feel against the black canvas;
   headings stay 700/800 so hierarchy still reads. */
.ksv{background:#000;color:#f1efea;font-weight:300}
.ksv h1,.ksv h2,.ksv h3,.ksv h4{color:#f1efea}
.ksv-card{background:#0f0f0f;border-color:#242424;box-shadow:0 1px 0 rgba(255,255,255,0.02)}
.ksv-eyebrow,.ksv-step-num{color:#b5ac95}
.ksv-h1,.ksv-step-title{color:#f1efea}
.ksv-lede,.ksv-step-subtitle{color:#d8d3c5;font-weight:300}
.ksv-disclaimer-banner{background:#161616;border-color:#242424;border-left-color:#ddcca5;color:#d8d3c5}
.ksv-disclaimer-banner strong{color:#f1efea;font-weight:600}
.ksv-progress{background:#161616;border-color:#242424}
.ksv-progress-fill{background:#ddcca5}
.ksv-toggle-row{background:#161616;border-color:#242424}
.ksv-toggle-row label{color:#f1efea;font-weight:600}
.ksv-input-row{border-bottom-color:#242424}
.ksv-input-label{color:#f1efea;font-weight:600}
.ksv-input-hint{color:#9a9384;font-weight:300}
.ksv-input{background:#161616;color:#f1efea;border-color:#2f2f2f;font-weight:300}
.ksv-input:focus{border-color:#ddcca5;box-shadow:0 0 0 3px rgba(221,204,165,0.18)}
.ksv-input-wrap::before{color:#9a9384}
.ksv-info-btn{background:#161616;color:#ddcca5;border-color:#2f2f2f}
.ksv-info-btn:hover,.ksv-info-btn:focus-visible,.ksv-info-btn[aria-expanded="true"]{background:#ddcca5;color:#0f0f0f;border-color:#ddcca5}
.ksv-info-popover{background:#1c1c1c;color:#f1efea;border:1px solid #2f2f2f;box-shadow:0 8px 24px rgba(0,0,0,0.6)}
.ksv-info-popover::before{background:#1c1c1c;border-top:1px solid #2f2f2f;border-left:1px solid #2f2f2f}
.ksv-info-popover strong{color:#ddcca5}
.ksv-yr-label{color:#9a9384}
.ksv-running{background:#ddcca5;color:#0f0f0f}
.ksv-running-label{color:#6b5e3b}
.ksv-running-value{color:#0f0f0f;font-weight:800}
.ksv-question-prompt{color:#f1efea}
.ksv-answer{background:#161616;color:#f1efea;border-color:#2f2f2f;font-weight:300}
.ksv-answer:hover{background:#1c1c1c;border-color:#ddcca5}
.ksv-answer.selected{background:#1c1c1c;border-color:#ddcca5;box-shadow:0 0 0 1px #ddcca5 inset}
.ksv-answer-radio{border-color:#3a3a3a}
.ksv-answer.selected .ksv-answer-radio{border-color:#ddcca5}
.ksv-answer.selected .ksv-answer-radio::after{background:#ddcca5}
.ksv-btn-secondary{color:#f1efea;border-color:#2f2f2f;background:transparent}
.ksv-btn-secondary:hover{border-color:#ddcca5;color:#ddcca5}
.ksv-btn-primary:disabled{background:#2f2f2f;border-color:#2f2f2f;color:#6a6a6a}
.ksv-result-hero{border-bottom-color:#242424}
.ksv-result-eyebrow{color:#b5ac95}
.ksv-result-value{color:#f1efea}
.ksv-result-range{color:#9a9384}
.ksv-result-stage{background:#161616;border-color:#242424;color:#f1efea}
.ksv-result-cell{background:#161616}
.ksv-result-cell-label{color:#9a9384}
.ksv-result-cell-value{color:#f1efea}
.ksv-asset-only{background:#161616;border-color:#ddcca5}
.ksv-asset-only h3,.ksv-asset-only p{color:#f1efea}
.ksv-asset-only p{font-weight:300}
.ksv-gate{background:#161616;border-color:#242424;border-left-color:#ddcca5;color:#f1efea}
.ksv-gate-eyebrow{color:#b5ac95}
.ksv-gate h3{color:#f1efea}
.ksv-gate p{color:#d8d3c5;font-weight:300}
.ksv-gate-input{background:#0f0f0f;color:#f1efea;border-color:#2f2f2f;font-weight:300}
.ksv-gate-input::placeholder{color:#7a7264}
.ksv-gate-input:focus{border-color:#ddcca5;box-shadow:0 0 0 3px rgba(221,204,165,0.18);background:#0f0f0f}
.ksv-gate-fine{color:#9a9384}
.ksv-gate-success{background:#161616;border-color:#242424;border-left-color:#ddcca5}
.ksv-gate-success-eyebrow{color:#b5ac95}
.ksv-gate-success h4{color:#f1efea}
.ksv-gate-success p{color:#d8d3c5;font-weight:300}
.ksv-disclaimer-footer{background:#000;border-top-color:#242424}
.ksv-disclaimer-footer-inner{color:#9a9384;font-weight:300}
.ksv-disclaimer-footer-inner strong{color:#f1efea;font-weight:600}

/* ── Target sub-step (last question of the quiz) ──────────────────
   Single dollar input + a "skip" toggle. The input is wider and
   centered so the moment of "name your number" feels weightier than
   a row of small financial inputs. Lives inside the quiz card now,
   so we lose the outer padding/border that the standalone step had. */
.ksv-target-input-row{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin:8px 0 16px;padding:24px 20px;background:#161616;border:1px solid #242424;border-radius:10px}
.ksv-target-input-wrap{position:relative;max-width:360px;width:100%;margin:0 auto}
.ksv-target-input-wrap::before{content:'$';position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9a9384;font-size:22px;font-weight:300;pointer-events:none}
.ksv-target-input{width:100%;padding:18px 18px 18px 32px;font-size:28px;font-weight:300;text-align:right;background:#0f0f0f;color:#f1efea;border:1px solid #2f2f2f;border-radius:8px;font-family:var(--kz-font);-moz-appearance:textfield}
.ksv-target-input::-webkit-outer-spin-button,.ksv-target-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ksv-target-input:focus{outline:none;border-color:#ddcca5;box-shadow:0 0 0 3px rgba(221,204,165,0.18)}
.ksv-target-hint{font-size:13px;color:#9a9384;line-height:1.5;font-weight:300;text-align:center;max-width:60ch;margin:0 auto}
.ksv-target-skip{display:flex;align-items:center;gap:10px;font-size:13px;color:#b5ac95;font-weight:300;cursor:pointer;padding:10px 14px;border:1px dashed #2f2f2f;border-radius:8px;margin-bottom:8px}
.ksv-target-skip input{accent-color:#ddcca5;cursor:pointer}

/* ── Target-gap visual (replaces the old market-percentile bench) ─
   Three side-by-side cells (today / target / potential) over a single
   horizontal bar with three markers positioned along it. The bar uses
   a subtle gradient to imply progress; the three markers are color-coded:
   tan (today), ember (your target), light-tan (with recommended moves). */
.ksv-target-gap{margin-top:24px}
.ksv-target-gap h3{font-size:18px;color:#f1efea;margin-bottom:14px;font-weight:700}
.ksv-target-gap-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.ksv-target-gap-cell{padding:14px 14px;background:#161616;border:1px solid #242424;border-radius:8px;text-align:center}
.ksv-target-gap-cell-target{border-color:#d66a4a;background:rgba(214,106,74,0.08)}
.ksv-target-gap-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#9a9384;font-weight:700;margin-bottom:6px;line-height:1.3}
.ksv-target-gap-value{font-size:22px;font-weight:800;color:#f1efea;font-family:var(--kz-font);letter-spacing:-0.01em}
.ksv-target-gap-cell-target .ksv-target-gap-value{color:#e8a98c}
.ksv-target-gap-bar{position:relative;height:42px;background:linear-gradient(to right,rgba(221,204,165,0.12),rgba(221,204,165,0.32));border:1px solid #242424;border-radius:8px;margin:30px 0 56px}
.ksv-target-gap-marker{position:absolute;top:-8px;bottom:-8px;width:3px;border-radius:2px;transition:left .35s ease}
.ksv-target-gap-marker-estimate{background:#ddcca5;box-shadow:0 0 0 2px #0f0f0f,0 2px 6px rgba(0,0,0,0.6)}
.ksv-target-gap-marker-potential{background:rgba(221,204,165,0.55);box-shadow:0 0 0 2px #0f0f0f}
.ksv-target-gap-marker-target{background:#d66a4a;box-shadow:0 0 0 2px #0f0f0f,0 2px 6px rgba(214,106,74,0.4)}
.ksv-target-gap-marker-label{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);transform-origin:center top;transition:transform .35s ease;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;color:#b5ac95}
.ksv-target-gap-marker-target .ksv-target-gap-marker-label{color:#e8a98c}
.ksv-target-gap-narrative{font-size:15px;color:#d8d3c5;line-height:1.55;font-weight:300;margin-top:8px}
.ksv-target-gap-narrative strong{color:#f1efea;font-weight:600}

.ksv-target-skipped{margin-top:24px;padding:24px;background:#161616;border:1px solid #242424;border-radius:10px;text-align:center}
.ksv-target-skipped h3{color:#f1efea;font-size:18px;margin-bottom:8px;font-weight:700}
.ksv-target-skipped p{color:#d8d3c5;font-size:14px;line-height:1.55;font-weight:300;max-width:60ch;margin:0 auto}

@media(max-width:640px){
  .ksv-target-gap-cells{grid-template-columns:1fr;gap:8px}
  .ksv-target-input{font-size:22px}
}