/* Copilot Lead Calculator — Public CSS v2 */
.clc-root{
  --clc-primary:#e8522a;--clc-accent:#0a0a0a;--clc-bg:#f5f2ec;
  --clc-card:#fff;--clc-text:#0a0a0a;--clc-mid:#5a5a52;
  --clc-border:#e0ddd6;--clc-radius:16px;
  --clc-font:'DM Sans',sans-serif;--clc-font-h:'DM Serif Display',Georgia,serif;
  font-family:var(--clc-font);color:var(--clc-text);background:var(--clc-bg);
  padding:0 0 64px;box-sizing:border-box;-webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
.clc-loading{display:flex;justify-content:center;padding:60px}
.clc-spinner{width:36px;height:36px;border:3px solid var(--clc-border);border-top-color:var(--clc-primary);border-radius:50%;animation:clcSpin .7s linear infinite}
@keyframes clcSpin{to{transform:rotate(360deg)}}

/* HERO */
.clc-hero{padding:56px 40px 36px;max-width:780px;margin:0 auto;text-align:center}
.clc-pill{display:inline-block;background:var(--clc-primary);color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 16px;border-radius:100px;margin-bottom:18px}
.clc-hero h1{font-family:var(--clc-font-h);font-size:clamp(1.8rem,4.5vw,3rem);line-height:1.1;letter-spacing:-.03em;color:var(--clc-text);margin:0 0 14px}
.clc-hero h1 em{color:var(--clc-primary);font-style:italic}
.clc-hero p{font-size:1rem;color:var(--clc-mid);line-height:1.65;max-width:560px;margin:0 auto}

/* PROGRESS */
.clc-progress-bar{height:3px;background:var(--clc-border);border-radius:100px;margin:0 auto 28px;max-width:700px;overflow:hidden}
.clc-progress-fill{height:100%;background:var(--clc-primary);border-radius:100px;transition:width .4s ease}

/* STEP DOTS */
.clc-steps-nav{display:flex;align-items:center;justify-content:center;margin:0 auto 28px;max-width:300px}
.clc-dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--clc-border);background:var(--clc-card);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;color:#bbb;transition:all .3s;flex-shrink:0}
.clc-dot.active{border-color:var(--clc-primary);background:var(--clc-primary);color:#fff}
.clc-dot.done{border-color:var(--clc-primary);background:var(--clc-primary);color:#fff}
.clc-line{flex:1;height:2px;background:var(--clc-border);max-width:55px;transition:background .3s}
.clc-line.done{background:var(--clc-primary)}

/* CARDS */
.clc-wrap{max-width:700px;margin:0 auto;padding:0 18px}
.clc-card{background:var(--clc-card);border-radius:var(--clc-radius);padding:36px 40px;border:1px solid var(--clc-border);box-shadow:0 4px 28px rgba(0,0,0,.06);display:none;animation:clcUp .4s ease}.clc-auto-results{display:block!important;visibility:visible!important;opacity:1!important}
.clc-card.active{display:block}
@keyframes clcUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.clc-card-label{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--clc-primary);margin-bottom:6px}
.clc-card h2{font-family:var(--clc-font-h);font-size:1.6rem;letter-spacing:-.02em;margin:0 0 5px;color:var(--clc-text)}
.clc-card-desc{color:var(--clc-mid);font-size:.88rem;margin:0 0 28px;line-height:1.6}

/* FIELDS */
.clc-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.clc-single-col{grid-template-columns:1fr}
.clc-fw{display:flex;flex-direction:column;gap:6px}
.clc-fw.clc-full{grid-column:1/-1}
.clc-fw label{font-size:.82rem;font-weight:500;color:var(--clc-text);display:flex;align-items:baseline;gap:6px}
.clc-hint-txt{font-weight:400;color:#bbb;font-size:.73rem}

/* Tooltip */
.clc-tooltip-wrap{position:relative;display:inline-block}
.clc-tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background:var(--clc-border);color:var(--clc-mid);border-radius:50%;font-size:.65rem;font-weight:700;cursor:help;flex-shrink:0;margin-left:4px;transition:background .2s}
.clc-tooltip-icon:hover{background:var(--clc-primary);color:#fff}
.clc-tooltip-box{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1a1a1a;color:#fff;font-size:.78rem;line-height:1.5;padding:10px 14px;border-radius:10px;width:240px;white-space:normal;pointer-events:none;opacity:0;transition:opacity .2s;z-index:100;text-align:left}
.clc-tooltip-box::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1a1a1a}
.clc-tooltip-wrap:hover .clc-tooltip-box{opacity:1}

.clc-fw input,.clc-fw select{padding:11px 14px;border:1.5px solid var(--clc-border);border-radius:calc(var(--clc-radius)*.6);font-family:var(--clc-font);font-size:.92rem;background:var(--clc-bg);color:var(--clc-text);transition:border-color .2s,box-shadow .2s;outline:none;width:100%;-webkit-appearance:none}
.clc-fw input:focus,.clc-fw select:focus{border-color:var(--clc-primary);box-shadow:0 0 0 3px rgba(232,82,42,.12);background:#fff}
.clc-fw input::placeholder{color:#bbb}
.clc-help-txt{font-size:.76rem;color:#aaa;line-height:1.4}
.clc-field-err{font-size:.74rem;color:#c0392b;display:none}
.clc-fw.has-error input,.clc-fw.has-error select{border-color:#c0392b}
.clc-fw.has-error .clc-field-err{display:block}

/* TOGGLES */
.clc-toggle-group{display:flex;gap:8px;flex-wrap:wrap}
.clc-tbtn{padding:9px 16px;border-radius:calc(var(--clc-radius)*.6);border:1.5px solid var(--clc-border);background:var(--clc-bg);font-family:var(--clc-font);font-size:.84rem;font-weight:500;cursor:pointer;transition:all .18s;color:var(--clc-mid);user-select:none}
.clc-tbtn:hover{border-color:var(--clc-primary);color:var(--clc-primary)}
.clc-tbtn.on{background:var(--clc-primary);color:#fff;border-color:var(--clc-primary)}

/* RANGE */
.clc-range-wrap{display:flex;flex-direction:column;gap:7px}
.clc-range-header{display:flex;justify-content:space-between;align-items:baseline}
.clc-range-val{font-family:var(--clc-font-h);font-size:1.4rem;color:var(--clc-primary)}
.clc-range-wrap input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:linear-gradient(to right,var(--clc-primary) 0%,var(--clc-primary) var(--pct,50%),var(--clc-border) var(--pct,50%));border-radius:6px;padding:0;border:none;outline:none;cursor:pointer}
.clc-range-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--clc-primary);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.clc-range-marks{display:flex;justify-content:space-between;font-size:.7rem;color:#bbb}

/* BUTTONS */
.clc-btn-row{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px}
.clc-btn{padding:13px 28px;border-radius:calc(var(--clc-radius)*.75);font-family:var(--clc-font);font-size:.92rem;font-weight:600;cursor:pointer;border:none;transition:all .2s;text-decoration:none;display:inline-block}
.clc-btn-primary{background:var(--clc-primary);color:#fff;box-shadow:0 4px 14px rgba(232,82,42,.28)}
.clc-btn-primary:hover{filter:brightness(.9);transform:translateY(-1px)}
.clc-btn-ghost{background:transparent;border:1.5px solid var(--clc-border);color:var(--clc-mid)}
.clc-btn-ghost:hover{border-color:var(--clc-primary);color:var(--clc-primary)}
.clc-btn-pdf{background:var(--clc-bg);border:1.5px solid var(--clc-border);color:var(--clc-mid);font-size:.84rem;padding:10px 20px}
.clc-btn-pdf:hover{border-color:var(--clc-primary);color:var(--clc-primary)}

/* ── RESULTS ── */
.clc-results-hero{text-align:center;padding:28px 0 22px;border-bottom:1px solid var(--clc-border);margin-bottom:28px}
.clc-results-pill{display:inline-block;background:var(--clc-bg);border:1px solid var(--clc-border);color:var(--clc-mid);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:4px 14px;border-radius:100px;margin-bottom:12px}
.clc-big-loss{font-family:var(--clc-font-h);font-size:clamp(2.6rem,8vw,4.5rem);color:var(--clc-primary);letter-spacing:-.04em;line-height:1}
.clc-loss-label{font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--clc-mid);margin-top:6px}
.clc-loss-annual{font-size:.9rem;color:var(--clc-mid);margin-top:10px;line-height:1.5}
.clc-loss-annual strong{color:var(--clc-primary)}

/* Metrics */
.clc-metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
.clc-metric{background:var(--clc-bg);border-radius:calc(var(--clc-radius)*.75);padding:16px;border:1px solid var(--clc-border);border-top:3px solid var(--clc-primary)}
.clc-metric.neutral{border-top-color:var(--clc-border)}
.clc-m-val{font-family:var(--clc-font-h);font-size:1.65rem;color:var(--clc-primary);letter-spacing:-.03em}
.clc-metric.neutral .clc-m-val{color:var(--clc-text)}
.clc-m-label{font-size:.7rem;font-weight:500;color:var(--clc-mid);text-transform:uppercase;letter-spacing:.07em;margin-top:3px;line-height:1.3}

/* Score */
.clc-score-section{margin-bottom:26px}
.clc-score-section h3{font-family:var(--clc-font-h);font-size:1.1rem;margin:0 0 12px}
.clc-score-bar-bg{background:var(--clc-border);border-radius:100px;height:12px;overflow:hidden;margin-bottom:5px}
.clc-score-bar-fill{height:100%;border-radius:100px;background:linear-gradient(to right,var(--clc-primary),#f07a57);transition:width 1.2s ease;width:0}
.clc-score-row{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:#bbb}
.clc-score-current{font-weight:700;color:var(--clc-primary);font-size:.8rem}

/* Key Findings */
.clc-findings{margin-bottom:28px}
.clc-findings h3{font-family:var(--clc-font-h);font-size:1.15rem;margin:0 0 16px}
.clc-finding{display:flex;gap:0;margin-bottom:10px;border-radius:calc(var(--clc-radius)*.75);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.clc-finding-icon{background:var(--clc-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem;padding:0 16px;flex-shrink:0}
.clc-finding.success .clc-finding-icon{background:#27ae60}
.clc-finding.info .clc-finding-icon{background:#3498db}
.clc-finding.opportunity .clc-finding-icon{background:#8e44ad}
.clc-finding-body{background:var(--clc-bg);padding:14px 16px;border:1px solid var(--clc-border);border-left:none;flex:1}
.clc-finding-body p{font-size:.86rem;line-height:1.65;color:#444;margin:0}
.clc-finding-body strong{color:var(--clc-text)}

/* Answers summary */
.clc-answers{margin-bottom:28px}
.clc-answers h3{font-family:var(--clc-font-h);font-size:1.1rem;margin:0 0 12px}
.clc-answers-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.clc-answer-row{background:var(--clc-bg);border-radius:8px;padding:10px 14px;border:1px solid var(--clc-border)}
.clc-answer-q{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#aaa;margin-bottom:3px}
.clc-answer-a{font-size:.9rem;font-weight:600;color:var(--clc-text)}

/* CTA */
.clc-cta{background:var(--clc-accent);border-radius:var(--clc-radius);padding:30px 36px;text-align:center;margin-top:6px}
.clc-cta h3{font-family:var(--clc-font-h);color:#fff;font-size:1.55rem;margin:0 0 8px;letter-spacing:-.02em}
.clc-cta p{color:rgba(255,255,255,.6);font-size:.88rem;margin:0 0 22px;line-height:1.6}
.clc-cta a{text-decoration:none}

/* Toolbar */
.clc-results-toolbar{display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}

/* Responsive */
@media(max-width:600px){
  .clc-hero{padding:32px 16px 22px}
  .clc-card{padding:22px 16px}
  .clc-fields{grid-template-columns:1fr}
  .clc-metrics-grid{grid-template-columns:1fr 1fr}
  .clc-answers-grid{grid-template-columns:1fr}
  .clc-btn-row{flex-direction:column}
  .clc-btn{width:100%;text-align:center}
}

/* ── EXTENDED COLOR VARIABLES (set via JS from admin settings) ── */
.clc-root {
  --clc-pill-bg:        #e8522a;
  --clc-pill-text:      #ffffff;
  --clc-step-label:     #e8522a;
  --clc-metric-bg:      #f5f2ec;
  --clc-metric-accent:  #e8522a;
  --clc-metric-neutral: #0a0a0a;
  --clc-score-bar:      #e8522a;
  --clc-find-warn:      #e8522a;
  --clc-find-ok:        #27ae60;
  --clc-find-info:      #3498db;
  --clc-find-opp:       #8e44ad;
  --clc-find-body:      #f5f2ec;
  --clc-answer-bg:      #f5f2ec;
  --clc-cta-title:      #ffffff;
  --clc-cta-text:       rgba(255,255,255,0.65);
  --clc-cta-btn:        #e8522a;
  --clc-cta-btn-text:   #ffffff;
}
/* Apply extended vars */
.clc-pill { background: var(--clc-pill-bg); color: var(--clc-pill-text); }
.clc-card-label { color: var(--clc-step-label); }
.clc-metric { background: var(--clc-metric-bg); border-top-color: var(--clc-metric-accent); }
.clc-m-val { color: var(--clc-metric-accent); }
.clc-metric.neutral .clc-m-val { color: var(--clc-metric-neutral); }
.clc-score-bar-fill { background: linear-gradient(to right, var(--clc-score-bar), var(--clc-score-bar)); }
.clc-finding.warning  .clc-finding-icon { background: var(--clc-find-warn); }
.clc-finding.success  .clc-finding-icon { background: var(--clc-find-ok); }
.clc-finding.info     .clc-finding-icon { background: var(--clc-find-info); }
.clc-finding.opportunity .clc-finding-icon { background: var(--clc-find-opp); }
.clc-finding-body { background: var(--clc-find-body); }
.clc-answer-row { background: var(--clc-answer-bg); }
.clc-cta h3 { color: var(--clc-cta-title); }
.clc-cta p  { color: var(--clc-cta-text); }
.clc-cta .clc-btn-primary { background: var(--clc-cta-btn); color: var(--clc-cta-btn-text); }