/* Raydn svc677. Interactive pricing sections for electrician-cost-edmonton.
   Replaces three prose walls with tappable components.
   Palette locked to the DNA: navy, amber, green, grey, off white. No red. */

:root{
  --cst-navy:#0d1b2e; --cst-navy-2:#0a1526;
  --cst-amber:#f5a524; --cst-amber-2:#f7b23a;
  --cst-green:#4ade80; --cst-grey:#8a94a6; --cst-paper:#f4f6fb;
}

/* ---------- shared shell ---------- */
.cst{margin-top:24px}
.cst *{box-sizing:border-box}
.cst__note{margin:16px 0 0;font-size:16px;line-height:1.5;color:rgba(244,246,251,.62)}

/* ---------- 1. where the money goes, ledger ---------- */
.cstw{display:flex;flex-direction:column;gap:8px}
.cstw__row{
  border:1px solid rgba(245,165,36,.22);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  overflow:hidden;
  transition:border-color .22s ease, box-shadow .22s ease;
}
.cstw__row[data-open="1"]{
  border-color:rgba(245,165,36,.52);
  box-shadow:0 0 0 1px rgba(245,165,36,.14), 0 10px 30px -12px rgba(0,0,0,.6);
}
.cstw__head{
  width:100%;min-height:60px;display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:none;border:0;cursor:pointer;text-align:left;
  color:var(--cst-paper);font:inherit;
}
.cstw__num{
  flex:0 0 32px;width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,165,36,.13);border:1px solid rgba(245,165,36,.34);
  color:var(--cst-amber-2);font-size:16px;font-weight:700;letter-spacing:.02em;
}
.cstw__t{flex:1 1 auto;font-size:16px;font-weight:600;line-height:1.35}
.cstw__chev{
  flex:0 0 auto;width:22px;height:22px;position:relative;
  transition:transform .24s ease;color:var(--cst-amber);
}
.cstw__chev::before,.cstw__chev::after{
  content:"";position:absolute;top:10px;width:11px;height:2px;border-radius:2px;background:currentColor;
}
.cstw__chev::before{left:2px;transform:rotate(45deg)}
.cstw__chev::after{right:2px;transform:rotate(-45deg)}
.cstw__row[data-open="1"] .cstw__chev{transform:rotate(180deg)}
.cstw__body{display:none;padding:0 16px 16px}
.cstw__row[data-open="1"] .cstw__body{display:block}
.cstw__pair{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:660px){.cstw__pair{grid-template-columns:1fr 1fr}}
.cstw__card{border-radius:12px;padding:12px 16px;border:1px solid transparent}
.cstw__card--them{background:rgba(138,148,166,.09);border-color:rgba(138,148,166,.26)}
.cstw__card--us{background:rgba(74,222,128,.07);border-color:rgba(74,222,128,.30)}
.cstw__lbl{
  display:block;font-size:16px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;margin-bottom:8px;
}
.cstw__card--them .cstw__lbl{color:var(--cst-grey)}
.cstw__card--us .cstw__lbl{color:var(--cst-green)}
.cstw__card p{margin:0;font-size:16px;line-height:1.58;color:rgba(244,246,251,.90)}

/* ---------- 2. audit the quote you already have ---------- */
.cstq__step{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.075)}
.cstq__step:first-child{padding-top:4px}
.cstq__q{margin:0 0 4px;font-size:16px;font-weight:600;line-height:1.4;color:var(--cst-paper)}
.cstq__why{margin:0 0 12px;font-size:16px;line-height:1.55;color:rgba(244,246,251,.60)}
.cstq__set{display:flex;flex-wrap:wrap;gap:8px}
.cstq__b{
  min-height:44px;padding:12px 16px;border-radius:11px;cursor:pointer;
  font:inherit;font-size:16px;font-weight:600;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(244,246,251,.20);
  color:rgba(244,246,251,.84);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease;
}
.cstq__b:hover{background:rgba(255,255,255,.085)}
.cstq__b:active{transform:translateY(1px)}
.cstq__b[aria-pressed="true"][data-v="ok"]{
  background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.62);color:#bff3d2;
}
.cstq__b[aria-pressed="true"][data-v="flag"]{
  background:rgba(245,165,36,.16);border-color:rgba(245,165,36,.66);color:#ffd894;
}
.cstq__out{
  margin-top:16px;border-radius:14px;padding:16px 16px;
  border:1px solid rgba(245,165,36,.30);
  background:linear-gradient(180deg,rgba(245,165,36,.09),rgba(245,165,36,.03));
}
.cstq__meter{display:flex;gap:4px;margin-bottom:12px}
.cstq__pip{
  flex:1 1 0;height:6px;border-radius:99px;background:rgba(244,246,251,.14);
  transition:background .25s ease;
}
.cstq__pip[data-s="ok"]{background:var(--cst-green)}
.cstq__pip[data-s="flag"]{background:var(--cst-amber)}
.cstq__verdict{margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.3;color:var(--cst-paper)}
.cstq__say{margin:0;font-size:16px;line-height:1.6;color:rgba(244,246,251,.86)}
.cstq__asks{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.cstq__asks li{
  font-size:16px;line-height:1.5;padding-left:20px;position:relative;
  color:rgba(244,246,251,.88);
}
.cstq__asks li::before{
  content:"";position:absolute;left:4px;top:7px;width:7px;height:7px;
  border-radius:2px;background:var(--cst-amber);
}
.cstq__cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;margin-top:16px;padding:12px 24px;border-radius:12px;
  background:var(--cst-amber);color:#12203a;font-size:16px;font-weight:700;
  text-decoration:none;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 22px -10px rgba(245,165,36,.65);
}
.cstq__cta:hover{background:var(--cst-amber-2)}

/* ---------- 3. same request, two houses ---------- */
.csth__sw{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:8px 6px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(244,246,251,.16);
}
.csth__tab{
  min-height:52px;border:0;border-radius:10px;cursor:pointer;font:inherit;
  padding:8px 12px;background:transparent;color:rgba(244,246,251,.70);
  font-size:16px;font-weight:600;line-height:1.3;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.csth__tab[aria-selected="true"]{
  background:rgba(245,165,36,.16);color:#ffd894;
  box-shadow:inset 0 0 0 1px rgba(245,165,36,.55);
}
.csth__panel{margin-top:16px}
.csth__rows{display:flex;flex-direction:column;gap:8px}
.csth__r{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(244,246,251,.11);
}
.csth__ic{
  flex:0 0 34px;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;
  background:rgba(245,165,36,.12);border:1px solid rgba(245,165,36,.30);color:var(--cst-amber-2);
}
.csth__txt{flex:1 1 auto;min-width:0}
.csth__k{
  display:block;font-size:16px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(244,246,251,.50);margin-bottom:4px;
}
.csth__v{margin:0;font-size:16px;line-height:1.55;color:rgba(244,246,251,.92)}
.csth__tot{
  margin-top:12px;padding:16px 16px;border-radius:13px;
  border:1px solid rgba(245,165,36,.34);
  background:linear-gradient(180deg,rgba(245,165,36,.10),rgba(245,165,36,.03));
}
.csth__tot b{display:block;font-size:16px;color:var(--cst-paper);margin-bottom:4px}
.csth__tot span{font-size:16px;line-height:1.58;color:rgba(244,246,251,.84)}
.csth__punch{
  margin:16px 0 0;padding:16px 16px;border-radius:13px;
  border:1px solid rgba(244,246,251,.14);background:rgba(255,255,255,.035);
  font-size:16px;line-height:1.6;color:rgba(244,246,251,.90);
}
.csth__punch b{color:var(--cst-amber-2)}

@media (prefers-reduced-motion:reduce){
  .cst *,.cstw__chev{transition:none !important}
}