/* =====================================================================
   SunState CDL Lead Tools — stylesheet
   All rules are scoped under .sscdl so nothing leaks into the theme,
   and theme styles are neutralised on our own controls.
   Colours and fonts come from CSS variables printed inline by the
   plugin from Settings -> SunState CDL Tools, so the tools can be
   rebranded without editing this file.
   ===================================================================== */

.sscdl{
  /* Fallbacks only — live values are printed inline by the plugin. */
  --brand:#E8452C;
  --brand-dark:#C4341D;
  --brand-soft:#FDEDE9;
  --navy:#16266B;
  --navy-soft:#22357F;
  --accent:#3B5BD9;
  --accent-dark:#2F49B4;
  --ink:#1B2733;
  --muted:#63758A;
  --line:#E2E8F0;
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --success:#1E8E5A;
  --success-soft:#E8F5EE;
  --wrong:#C4342B;
  --wrong-soft:#FDECEA;
  --font-head:inherit;
  --font-body:inherit;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(13,36,56,.08);
  display:block;
}

/* Neutralise theme styles on our own controls */
.sscdl button,
.sscdl input,
.sscdl select{
  margin:0; text-transform:none; letter-spacing:normal;
  box-shadow:none; min-height:0; width:auto; max-width:none;
}
.sscdl button{ background:none; border:none; }
.sscdl ul,.sscdl ol{ margin:0; padding:0; }
.sscdl li{ list-style:none; }
.sscdl a{ text-decoration:none; box-shadow:none; }
.sscdl a:hover{ text-decoration:none; }
.sscdl img{ max-width:100%; height:auto; }
.sscdl h1,.sscdl h2,.sscdl h3,.sscdl h4,.sscdl h5{ text-transform:none; }

/* Primary actions use the theme's button blue; the accent colour
   (eyebrow labels, progress, highlights) is the theme's red. */
.sscdl .btn-primary{ background:var(--accent); }
.sscdl .btn-primary:hover{ background:var(--accent-dark); }
.sscdl .eyebrow{ color:var(--brand); background:var(--brand-soft); border-color:var(--brand-soft); }
.sscdl .eyebrow::before{ background:var(--brand); }

/* Screen-reader only */
.sscdl .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;
}

/* Loading + error states */
.sscdl .is-busy{ opacity:.6; pointer-events:none; }
.sscdl .spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:sscdl-spin .7s linear infinite; display:inline-block;
}
@keyframes sscdl-spin{ to{ transform:rotate(360deg); } }

/* shared components */
.sscdl *{ box-sizing:border-box; }
.sscdl *::before{ box-sizing:border-box; }
.sscdl *::after{ box-sizing:border-box; }
.sscdl{ -webkit-text-size-adjust:100%; }
.sscdl{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
}
.sscdl h1{ font-family:var(--font-head); color:var(--navy); margin:0 0 .5em; line-height:1.2; font-weight:700; }
.sscdl h2{ font-family:var(--font-head); color:var(--navy); margin:0 0 .5em; line-height:1.2; font-weight:700; }
.sscdl h3{ font-family:var(--font-head); color:var(--navy); margin:0 0 .5em; line-height:1.2; font-weight:700; }
.sscdl h4{ font-family:var(--font-head); color:var(--navy); margin:0 0 .5em; line-height:1.2; font-weight:700; }
.sscdl h5{ font-family:var(--font-head); color:var(--navy); margin:0 0 .5em; line-height:1.2; font-weight:700; }
.sscdl p{ margin:0 0 1em; }
.sscdl button{ font:inherit; cursor:pointer; }
.sscdl a{ color:var(--brand-dark); }
.sscdl :focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:6px; }
.sscdl .wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }
.sscdl .tool{ padding:52px 0 72px; }
.sscdl .hero{ text-align:center; max-width:760px; margin:0 auto 34px; }
.sscdl .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:600; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-dark);
  background:var(--brand-soft); border:1px solid #F6D9AF;
  padding:7px 14px; border-radius:999px; margin-bottom:18px;
}
.sscdl .eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.sscdl .hero h1{ font-size:clamp(30px,4.6vw,46px); font-weight:800; letter-spacing:-.02em; }
.sscdl .hero h1 em{ font-style:normal; color:var(--brand-dark); }
.sscdl .hero p{ color:var(--muted); font-size:17.5px; max-width:620px; margin:0 auto; }
.sscdl .card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.sscdl .road{ background:var(--navy); padding:20px 24px 22px; }
.sscdl .road-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; gap:12px; }
.sscdl .road-step{ font-family:var(--font-head); font-weight:600; color:#fff; font-size:15px; }
.sscdl .step{ display:none; padding:34px 32px 30px; }
.sscdl .step.is-active{ display:block; animation:slideIn .32s ease both; }
.sscdl .step h2{ font-size:25px; margin-bottom:6px; }
.sscdl .step .hint{ color:var(--muted); margin-bottom:24px; font-size:15.5px; }
.sscdl .opts.two{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.sscdl .opt:hover{ border-color:#C9D4E1; transform:translateY(-2px); box-shadow:var(--shadow); }
.sscdl .opt.is-on{ border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 4px rgba(247,148,29,.14); }
.sscdl .opt-badge{
  font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand-dark); display:block; margin-bottom:6px;
}
.sscdl .opt-title{ font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--navy); display:block; }
.sscdl .opt-desc{ color:var(--muted); font-size:14.5px; margin-top:5px; display:block; line-height:1.5; }
.sscdl .opt-check{
  position:absolute; top:16px; right:16px; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--line); background:#fff; display:grid; place-items:center;
  font-size:12px; color:#fff; font-weight:700;
}
.sscdl .opt.is-on .opt-check{ background:var(--brand); border-color:var(--brand); }
.sscdl .opt.is-on .opt-check::after{ content:"✓"; }
.sscdl .field{ margin-bottom:20px; }
.sscdl .field:last-child{ margin-bottom:0; }
.sscdl .field label{ display:block; font-family:var(--font-head); font-weight:600; font-size:14.5px; color:var(--navy); margin-bottom:7px; }
.sscdl select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M2 5l5 5 5-5' fill='none' stroke='%2363758A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.sscdl input[type=text]{
  width:100%; padding:13px 14px; font:inherit; color:var(--ink);
  border:2px solid var(--line); border-radius:var(--radius-sm); background:#fff;
  transition:border-color .15s;
}
.sscdl input[type=email]{
  width:100%; padding:13px 14px; font:inherit; color:var(--ink);
  border:2px solid var(--line); border-radius:var(--radius-sm); background:#fff;
  transition:border-color .15s;
}
.sscdl input[type=tel]{
  width:100%; padding:13px 14px; font:inherit; color:var(--ink);
  border:2px solid var(--line); border-radius:var(--radius-sm); background:#fff;
  transition:border-color .15s;
}
.sscdl select:hover{ border-color:#C9D4E1; }
.sscdl select:focus{ border-color:var(--brand); outline:none; }
.sscdl input:focus{ border-color:var(--brand); outline:none; }
.sscdl .chips{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.sscdl .chip{
  display:flex; gap:12px; align-items:flex-start; text-align:left;
  border:2px solid var(--line); border-radius:var(--radius-sm); background:#fff; padding:14px 15px;
  transition:border-color .18s, background .18s;
}
.sscdl .chip:hover{ border-color:#C9D4E1; }
.sscdl .chip.is-on{ border-color:var(--brand); background:var(--brand-soft); }
.sscdl .chip-box{
  flex:0 0 auto; width:21px; height:21px; border-radius:6px; border:2px solid var(--line);
  background:#fff; display:grid; place-items:center; margin-top:2px; color:#fff; font-size:12px; font-weight:700;
}
.sscdl .chip.is-on .chip-box::after{ content:"✓"; }
.sscdl .chip.is-on .chip-box{ background:var(--brand); border-color:var(--brand); }
.sscdl .chip-name{ font-family:var(--font-head); font-weight:600; color:var(--navy); font-size:15.5px; display:block; }
.sscdl .chip-note{ color:var(--muted); font-size:13.5px; display:block; line-height:1.45; }
.sscdl .chip-lift{ color:var(--success); font-weight:600; font-size:13.5px; }
.sscdl .rec-note{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--brand-soft); border:1px solid #F6D9AF; border-radius:var(--radius-sm);
  padding:15px 17px; margin-bottom:22px;
}
.sscdl .rec-note .ico{ margin-top:1px; }
.sscdl .rec-note b{ font-family:var(--font-head); color:var(--navy); display:block; font-size:15.5px; }
.sscdl .rec-note span{ color:var(--muted); font-size:14.5px; line-height:1.5; }
.sscdl .nav{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:18px 32px 26px; border-top:1px solid var(--line); background:#FBFCFD; }
.sscdl .nav[hidden]{ display:none; }
.sscdl .btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:var(--font-head); font-weight:600; font-size:15.5px;
  padding:13px 26px; border-radius:999px; border:2px solid transparent; text-decoration:none;
  transition:background .18s, color .18s, border-color .18s, transform .12s;
}
.sscdl .btn:active{ transform:translateY(1px); }
.sscdl .btn-primary{ background:var(--brand); color:#fff; }
.sscdl .btn-primary:hover{ background:var(--brand-dark); }
.sscdl .btn-primary[disabled]{ background:#D8DFE7; color:#93A2B2; cursor:not-allowed; }
.sscdl .btn-ghost{ background:transparent; color:var(--muted); border-color:var(--line); }
.sscdl .btn-ghost:hover{ color:var(--navy); border-color:#C9D4E1; }
.sscdl .btn-dark{ background:var(--navy); color:#fff; }
.sscdl .btn-dark:hover{ background:var(--navy-soft); }
.sscdl .btn-lg{ padding:16px 34px; font-size:17px; }
.sscdl .gate::before{
  content:""; position:absolute; top:-80px; right:-80px; width:250px; height:250px; border-radius:50%;
  background:radial-gradient(circle,rgba(247,148,29,.28),transparent 70%);
}
.sscdl .gate > *{ position:relative; }
.sscdl .gate .lead{ color:rgba(255,255,255,.76); max-width:580px; }
.sscdl .gate ul{ margin:0 0 24px; padding:0; list-style:none; display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); }
.sscdl .gate li{ color:rgba(255,255,255,.9); font-size:15px; padding-left:26px; position:relative; }
.sscdl .gate li::before{ content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:700; }
.sscdl .gate label{ display:block; font-family:var(--font-head); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.8); margin-bottom:6px; }
.sscdl .gate input{ border-color:transparent; }
.sscdl .gate select{ border-color:transparent; }
.sscdl .form-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.sscdl .form-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:22px; }
.sscdl .consent{ color:rgba(255,255,255,.6); font-size:12.5px; max-width:440px; line-height:1.5; margin:0; }
.sscdl .err{ color:#FFB4A2; font-size:13.5px; margin:12px 0 0; display:none; }
.sscdl .err.show{ display:block; }
.sscdl .gate-back{ background:none; border:none; color:rgba(255,255,255,.6); text-decoration:underline; font-size:14.5px; padding:0; margin-top:20px; }
.sscdl .gate-back:hover{ color:#fff; }
.sscdl .preview{
  display:flex; gap:9px; flex-wrap:wrap; margin:0 0 22px;
}
.sscdl .tagline{
  font-family:var(--font-head); font-size:13px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  padding:6px 14px; border-radius:999px;
}
.sscdl .sscdl-results{ display:none; }
.sscdl .sscdl-results.is-active{ display:block; animation:slideIn .4s ease both; }
.sscdl .payout{ background:var(--navy); color:#fff; padding:38px 32px 34px; text-align:center; position:relative; }
.sscdl .payout::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:repeating-linear-gradient(90deg,var(--brand) 0 26px, transparent 26px 46px); }
.sscdl .payout .label{ font-family:var(--font-head); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:16px; }
.sscdl .odometer{
  display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  background:#0A1B29; border:1px solid rgba(255,255,255,.1); border-radius:12px;
  padding:16px 26px; box-shadow:inset 0 2px 12px rgba(0,0,0,.5);
}
.sscdl .odo-num{ font-family:var(--font-head); font-weight:800; font-size:clamp(30px,6vw,50px); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#fff; line-height:1.05; }
.sscdl .odo-dash{ width:26px; height:3px; background:var(--brand); border-radius:2px; }
.sscdl .payout .per{ color:rgba(255,255,255,.62); font-size:15px; margin:16px 0 0; }
.sscdl .payout .per strong{ color:#fff; font-weight:600; }
.sscdl .payout .chipline{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.sscdl .res-body{ padding:32px; }
.sscdl .grid-2{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.sscdl .panel{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:22px 22px 20px; background:#fff; }
.sscdl .panel h3{ font-size:17px; margin-bottom:4px; display:flex; align-items:center; gap:9px; }
.sscdl .panel .sub{ color:var(--muted); font-size:14px; margin-bottom:16px; }
.sscdl .ico{ width:30px; height:30px; border-radius:8px; background:var(--brand-soft); color:var(--brand-dark); display:grid; place-items:center; font-size:15px; flex:0 0 auto; }
.sscdl .match{ border:1px solid #F0C58A; background:var(--brand-soft); border-radius:var(--radius-sm); padding:22px 24px; margin-bottom:24px; }
.sscdl .match .kicker{ font-family:var(--font-head); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-dark); font-weight:700; }
.sscdl .match h3{ font-size:23px; margin:6px 0 6px; }
.sscdl .match p{ margin:0; color:var(--ink); font-size:15.5px; }
.sscdl .meter{ height:11px; border-radius:999px; background:#EDF1F6; overflow:hidden; margin:6px 0 10px; }
.sscdl .meter-fill{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#F7B733,var(--brand-dark)); transition:width 1.1s cubic-bezier(.22,1,.36,1); }
.sscdl .meter-legend{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); }
.sscdl .demand-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:4px; }
.sscdl .demand-word{ font-family:var(--font-head); font-weight:700; font-size:21px; color:var(--navy); }
.sscdl .demand-score{ font-family:var(--font-head); font-weight:700; color:var(--brand-dark); font-size:15px; }
.sscdl .tl{ list-style:none; margin:0; padding:0; }
.sscdl .tl li{ position:relative; padding:0 0 20px 34px; }
.sscdl .tl li:last-child{ padding-bottom:0; }
.sscdl .tl li::before{
  content:""; position:absolute; left:8px; top:6px; width:11px; height:11px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft);
}
.sscdl .tl li::after{ content:""; position:absolute; left:13px; top:20px; bottom:0; width:2px; background:var(--line); }
.sscdl .tl li:last-child::after{ display:none; }
.sscdl .tl b{ font-family:var(--font-head); color:var(--navy); font-size:15.5px; display:block; }
.sscdl .tl-total{ margin-top:16px; padding:12px 14px; background:var(--brand-soft); border-radius:var(--radius-sm); font-size:14.5px; color:var(--navy); }
.sscdl .careers{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:6px; }
.sscdl .career{ border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius-sm); padding:16px 18px; background:#fff; }
.sscdl .career b{ font-family:var(--font-head); color:var(--navy); font-size:16px; display:block; }
.sscdl .career .pay{ color:var(--success); font-weight:700; font-family:var(--font-head); font-size:15px; display:block; margin:3px 0 5px; }
.sscdl .career p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.sscdl .section-head h3{ font-size:21px; margin-bottom:3px; }
.sscdl .section-head p{ color:var(--muted); margin:0; font-size:15px; }
.sscdl .boosts{ display:grid; gap:10px; }
.sscdl .boost{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 16px; border:1px dashed #F0C58A; background:var(--brand-soft); border-radius:var(--radius-sm); }
.sscdl .boost span{ font-size:14.5px; color:var(--navy); }
.sscdl .boost b{ font-family:var(--font-head); color:var(--success); white-space:nowrap; }
.sscdl .foot{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:30px; padding:24px; background:var(--navy); border-radius:var(--radius); }
.sscdl .foot b{ font-family:var(--font-head); color:#fff; font-size:18px; display:block; }
.sscdl .foot span{ color:rgba(255,255,255,.72); font-size:14.5px; }
.sscdl .foot .btns{ display:flex; gap:10px; flex-wrap:wrap; }
.sscdl .disclaimer{ color:var(--muted); font-size:12.8px; line-height:1.6; margin:22px auto 0; max-width:820px; text-align:center; }
.sscdl .restart{ text-align:center; margin-top:18px; }
.sscdl .linkish{ background:none; border:none; color:var(--muted); text-decoration:underline; font-size:14.5px; }
.sscdl .linkish:hover{ color:var(--navy); }
.sscdl .screen{ display:none; padding:34px 32px 30px; }
.sscdl .screen.is-active{ display:block; animation:slideIn .3s ease both; }
.sscdl .screen h2{ font-size:25px; margin-bottom:6px; }
.sscdl .screen .hint{ color:var(--muted); margin-bottom:24px; font-size:15.5px; }
.sscdl .q-meta{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.sscdl .tag{ font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-dark); background:var(--brand-soft); border:1px solid #F6D9AF; padding:5px 12px; border-radius:999px; }
.sscdl .timer{ font-family:var(--font-head); font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
.sscdl .q-text{ font-family:var(--font-head); font-size:clamp(19px,2.4vw,23px); font-weight:600; color:var(--navy); line-height:1.35; margin-bottom:22px; }
.sscdl .answers{ display:grid; gap:11px; }
.sscdl .ans{ display:flex; gap:14px; align-items:flex-start; text-align:left; border:2px solid var(--line); background:#fff;
  border-radius:var(--radius-sm); padding:15px 17px; transition:border-color .15s, background .15s; }
.sscdl .ans:hover{ border-color:#C9D4E1; }
.sscdl .ans-key{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; background:#F1F5F9; color:var(--muted);
  font-family:var(--font-head); font-weight:700; font-size:14px; display:grid; place-items:center; }
.sscdl .ans-text{ font-size:15.8px; color:var(--ink); padding-top:2px; }
.sscdl .ans.is-on{ border-color:var(--brand); background:var(--brand-soft); }
.sscdl .ans.is-on .ans-key{ background:var(--brand); color:#fff; }
.sscdl .score{ background:var(--navy); color:#fff; padding:38px 32px 34px; text-align:center; position:relative; }
.sscdl .score::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:repeating-linear-gradient(90deg,var(--brand) 0 26px,transparent 26px 46px); }
.sscdl .dial{ position:relative; width:190px; height:190px; margin:0 auto 8px; }
.sscdl .dial svg{ transform:rotate(-90deg); }
.sscdl .dial .track{ stroke:rgba(255,255,255,.12); }
.sscdl .dial .val{ stroke:var(--brand); stroke-linecap:round; transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1); }
.sscdl .dial .mid{ position:absolute; inset:0; display:grid; place-content:center; }
.sscdl .dial .pct{ font-family:var(--font-head); font-weight:800; font-size:46px; line-height:1; font-variant-numeric:tabular-nums; }
.sscdl .dial .of{ font-size:13.5px; color:rgba(255,255,255,.6); margin-top:6px; }
.sscdl .verdict.pass{ color:#6BE3A8; }
.sscdl .verdict.fail{ color:#FFB4A2; }
.sscdl .score p{ color:rgba(255,255,255,.7); margin:0 auto; max-width:520px; font-size:15.5px; }
.sscdl .score .chipline{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.sscdl .section-head.spaced{ margin-top:34px; }
.sscdl .cats{ display:grid; gap:14px; }
.sscdl .cat{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; background:#fff; }
.sscdl .cat-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px; }
.sscdl .cat-name{ font-family:var(--font-head); font-weight:600; color:var(--navy); font-size:15.5px; }
.sscdl .cat-score{ font-family:var(--font-head); font-weight:700; font-size:14.5px; font-variant-numeric:tabular-nums; }
.sscdl .cat-score.good{ color:var(--success); }
.sscdl .cat-score.weak{ color:var(--wrong); }
.sscdl .bar{ height:9px; border-radius:999px; background:#EDF1F6; overflow:hidden; }
.sscdl .bar i{ display:block; height:100%; width:0; border-radius:999px; transition:width 1s cubic-bezier(.22,1,.36,1); }
.sscdl .bar i.good{ background:linear-gradient(90deg,#4CC38A,var(--success)); }
.sscdl .bar i.weak{ background:linear-gradient(90deg,#F7B733,var(--wrong)); }
.sscdl .plan{ display:grid; gap:12px; }
.sscdl .plan-item{ display:flex; gap:14px; align-items:flex-start; border:1px dashed #F0C58A; background:var(--brand-soft);
  border-radius:var(--radius-sm); padding:15px 17px; }
.sscdl .plan-item .n{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; background:var(--brand); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:14px; display:grid; place-items:center; }
.sscdl .plan-item b{ font-family:var(--font-head); color:var(--navy); display:block; font-size:15.5px; }
.sscdl .plan-item span{ color:var(--muted); font-size:14.5px; line-height:1.5; }
.sscdl .review{ display:grid; gap:14px; }
.sscdl .rev{ border:1px solid var(--line); border-left:4px solid var(--success); border-radius:var(--radius-sm); padding:18px 20px; background:#fff; }
.sscdl .rev.miss{ border-left-color:var(--wrong); }
.sscdl .rev-top{ display:flex; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.sscdl .pill{ font-family:var(--font-head); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; }
.sscdl .pill.ok{ background:var(--success-soft); color:var(--success); }
.sscdl .pill.no{ background:var(--wrong-soft); color:var(--wrong); }
.sscdl .pill.cat{ background:#F1F5F9; color:var(--muted); }
.sscdl .rev q{ quotes:none; font-family:var(--font-head); font-weight:600; color:var(--navy); font-size:16.5px; display:block; margin-bottom:10px; }
.sscdl .rev-line{ font-size:14.8px; margin:0 0 4px; }
.sscdl .rev-line span{ color:var(--muted); }
.sscdl .rev-line b{ font-weight:600; }
.sscdl .rev-line b.ok{ color:var(--success); }
.sscdl .rev-line b.no{ color:var(--wrong); }
.sscdl .rev-exp{ margin:10px 0 0; font-size:14.6px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; }
.sscdl .filters{ display:flex; gap:9px; flex-wrap:wrap; margin:0 0 16px; }
.sscdl .filter{ font-family:var(--font-head); font-size:13.5px; font-weight:600; color:var(--muted); background:#fff;
  border:2px solid var(--line); border-radius:999px; padding:7px 15px; }
.sscdl .filter.is-on{ border-color:var(--brand); color:var(--brand-dark); background:var(--brand-soft); }
.sscdl .retakes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.sscdl .verdict::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:repeating-linear-gradient(90deg,var(--brand) 0 26px,transparent 26px 46px); }
.sscdl .verdict .label{ font-family:var(--font-head); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:18px; }
.sscdl .plate{
  display:inline-block; background:#fff; border-radius:12px; padding:16px 40px 18px;
  border:3px solid #0A1B29; box-shadow:0 10px 30px rgba(0,0,0,.35); position:relative;
}
.sscdl .plate .state{ font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); display:block; }
.sscdl .plate .cls{ font-family:var(--font-head); font-weight:800; font-size:clamp(40px,8vw,64px); line-height:1.05; color:var(--navy); letter-spacing:.02em; display:block; }
.sscdl .plate .sub{ font-family:var(--font-head); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-dark); display:block; margin-top:2px; }
.sscdl .verdict .why{ color:rgba(255,255,255,.78); max-width:600px; margin:22px auto 0; font-size:16px; }
.sscdl .verdict .chipline{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.sscdl .tiles{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.sscdl .tile{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:20px; background:#fff; text-align:left; }
.sscdl .tile .ico{ width:34px; height:34px; border-radius:9px; background:var(--brand-soft); color:var(--brand-dark);
  display:grid; place-items:center; font-size:16px; margin-bottom:12px; }
.sscdl .tile .k{ font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; }
.sscdl .tile .v{ font-family:var(--font-head); font-weight:800; font-size:26px; color:var(--navy); line-height:1.15; display:block; margin:4px 0 5px; }
.sscdl .tile .n{ color:var(--muted); font-size:14px; line-height:1.5; display:block; }
.sscdl .section-head:first-child{ margin-top:0; }
.sscdl .ends{ display:grid; gap:12px; }
.sscdl .end{ display:flex; gap:14px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; background:#fff; }
.sscdl .end.req{ border-color:#F0C58A; background:var(--brand-soft); }
.sscdl .end .mark{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; font-size:13px; background:#F1F5F9; color:var(--muted); }
.sscdl .end.req .mark{ background:var(--brand); color:#fff; }
.sscdl .end b{ font-family:var(--font-head); color:var(--navy); font-size:16px; display:block; }
.sscdl .end .tagsm{ font-family:var(--font-head); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-dark); display:inline-block; margin-left:8px; vertical-align:2px; }
.sscdl .end span.d{ color:var(--muted); font-size:14.5px; line-height:1.5; display:block; margin-top:3px; }
.sscdl .paths{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.sscdl .path{ border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius-sm); padding:17px 19px; background:#fff; }
.sscdl .path b{ font-family:var(--font-head); color:var(--navy); font-size:16px; display:block; }
.sscdl .path .pay{ color:var(--success); font-weight:700; font-family:var(--font-head); font-size:15px; display:block; margin:3px 0 5px; }
.sscdl .path p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.sscdl .checks{ display:grid; gap:10px; }
.sscdl .check{ display:flex; gap:12px; align-items:flex-start; font-size:14.8px; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 16px; background:#fff; }
.sscdl .check i{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--success-soft); color:var(--success);
  display:grid; place-items:center; font-size:11px; font-style:normal; font-weight:700; margin-top:2px; }
.sscdl .check.warn i{ background:var(--brand-soft); color:var(--brand-dark); }
.sscdl .callout{ margin-top:20px; border:1px dashed #F0C58A; background:var(--brand-soft); border-radius:var(--radius-sm); padding:16px 18px; }
.sscdl .callout b{ font-family:var(--font-head); color:var(--navy); display:block; font-size:15.5px; margin-bottom:2px; }
.sscdl .callout p{ margin:0; color:var(--muted); font-size:14.5px; }
@media (max-width:640px){
.sscdl .step{ padding:26px 20px 22px; }
.sscdl .res-body{ padding:26px 20px 22px; }
.sscdl .nav{ padding:16px 20px 22px; }
.sscdl .payout{ padding:30px 20px; }
.sscdl .gate{ padding:30px 20px; }
.sscdl .nav .btn{ flex:1; }
.sscdl .screen{ padding:26px 20px 22px; }
.sscdl .score{ padding:30px 20px; }
.sscdl .gate.screen{ padding:30px 20px; }
.sscdl .verdict{ padding:30px 20px; }
.sscdl .plate{ padding:14px 26px 16px; }
}
@media (prefers-reduced-motion:reduce){
.sscdl *{ animation:none !important; transition:none !important; }
}

/* per-tool overrides */
.sscdl--estimator .road-count{ font-family:var(--font-head); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.sscdl--practice .road-count{ font-family:var(--font-head); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; }
.sscdl--whichcdl .road-count{ font-family:var(--font-head); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.sscdl--estimator .lane{
  position:relative; height:12px; border-radius:999px; background:#0A1B29;
  background-image:linear-gradient(90deg, rgba(255,255,255,.28) 0 14px, transparent 14px 30px);
  background-size:30px 2px; background-position:0 center; background-repeat:repeat-x; overflow:hidden;
}
.sscdl--practice .lane{ position:relative; height:12px; border-radius:999px; background:#0A1B29;
  background-image:linear-gradient(90deg,rgba(255,255,255,.28) 0 14px,transparent 14px 30px);
  background-size:30px 2px; background-position:0 center; background-repeat:repeat-x; overflow:hidden; }
.sscdl--whichcdl .lane{ position:relative; height:12px; border-radius:999px; background:#0A1B29;
  background-image:linear-gradient(90deg,rgba(255,255,255,.28) 0 14px,transparent 14px 30px);
  background-size:30px 2px; background-position:0 center; background-repeat:repeat-x; overflow:hidden; }
.sscdl--estimator .lane-fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg,var(--brand-dark),var(--brand));
  border-radius:999px; transition:width .45s cubic-bezier(.65,0,.35,1);
}
.sscdl--practice .lane-fill{ position:absolute; inset:0 auto 0 0; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--brand-dark),var(--brand)); transition:width .4s cubic-bezier(.65,0,.35,1); }
.sscdl--whichcdl .lane-fill{ position:absolute; inset:0 auto 0 0; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--brand-dark),var(--brand)); transition:width .4s cubic-bezier(.65,0,.35,1); }
.sscdl--estimator .lane-truck{
  position:absolute; top:-6px; left:0; transform:translate(-50%,-50%);
  transition:left .45s cubic-bezier(.65,0,.35,1); font-size:19px; line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); pointer-events:none;
}
.sscdl--practice .lane-truck{ position:absolute; top:-6px; left:0; transform:translate(-50%,-50%); font-size:19px; line-height:1;
  transition:left .4s cubic-bezier(.65,0,.35,1); filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); pointer-events:none; }
.sscdl--whichcdl .lane-truck{ position:absolute; top:-6px; left:0; transform:translate(-50%,-50%); font-size:19px; line-height:1;
  transition:left .4s cubic-bezier(.65,0,.35,1); filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); pointer-events:none; }
.sscdl--estimator .opts{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.sscdl--practice .opts{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.sscdl--whichcdl .opts{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.sscdl--estimator .opt{
  position:relative; text-align:left; background:var(--surface);
  border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:20px 46px 18px 18px; transition:border-color .18s, box-shadow .18s, transform .18s;
}
.sscdl--practice .opt{ position:relative; text-align:left; background:#fff; border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:20px 46px 18px 18px; transition:border-color .18s, box-shadow .18s, transform .18s; }
.sscdl--whichcdl .opt{ position:relative; text-align:left; background:#fff; border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:20px 46px 18px 18px; transition:border-color .18s, box-shadow .18s, transform .18s; }
.sscdl--estimator .gate{ background:var(--navy); color:#fff; padding:36px 32px 34px; position:relative; overflow:hidden; }
.sscdl--practice .gate{ background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.sscdl--whichcdl .gate{ background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.sscdl--estimator .gate h2{ color:#fff; font-size:26px; margin-bottom:6px; }
.sscdl--practice .gate h2{ color:#fff; font-size:26px; }
.sscdl--whichcdl .gate h2{ color:#fff; font-size:26px; }
.sscdl--estimator .tl span{ color:var(--muted); font-size:14px; }
.sscdl--whichcdl .tl span{ color:var(--muted); font-size:14.4px; }
.sscdl--estimator .section-head{ margin:34px 0 14px; }
.sscdl--practice .section-head{ margin:0 0 14px; }
.sscdl--whichcdl .section-head{ margin:34px 0 14px; }
.sscdl--practice .verdict{ font-family:var(--font-head); font-weight:700; font-size:22px; margin:10px 0 4px; }
.sscdl--whichcdl .verdict{ background:var(--navy); color:#fff; padding:40px 32px 36px; text-align:center; position:relative; }

/* animations */
@keyframes slideIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
/* The shortcode wrapper replaces the prototype's <main class="tool"> */
.sscdl{ padding:40px 0 56px; }
@media (max-width:640px){ .sscdl{ padding:28px 0 40px; } }