/* FEC ROI Calculator — restyle per owner feedback + luna design consult (2026-07-21):
   "professional planning tool inside the ACS site", not a gamified dashboard.
   Neutral grays + single ACS red accent, 1px hairlines, near-zero shadows,
   8px radii, no emoji/gradients/four-color coding. Logic untouched. */
.acs-roi { --accent:#e63946; --ink:#101010; --text:#2b2b2b; --muted:#707070; --line:#ececec; --soft:#f7f7f7;
  color:var(--text); font-family:inherit;
  max-width:1100px; margin:0 auto; padding:0 20px 64px; }

.acs-roi-hero { text-align:left; padding:38px 0 26px; }
.acs-roi-kicker { text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:12px; color:var(--accent); margin:0 0 10px; }
.acs-roi-hero h1 { font-size:clamp(26px,3.4vw,38px); font-weight:800; line-height:1.15; margin:0 0 10px; color:var(--ink); }
.acs-roi-sub { color:var(--muted); font-size:16px; margin:0; max-width:640px; }

.acs-roi-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media (max-width:880px){ .acs-roi-grid{ grid-template-columns:1fr; } }

.acs-roi-card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:26px; }
.acs-roi-results { position:sticky; top:24px; }
@media (max-width:880px){ .acs-roi-results{ position:static; } }

/* inputs */
.acs-roi-field { margin-bottom:20px; }
.acs-roi-label { font-size:13px; font-weight:700; color:var(--ink); }
.acs-roi-label em { font-style:normal; font-weight:400; color:var(--muted); }
.acs-roi-labelrow { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.acs-roi-labelrow output { font-size:14px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }

.acs-roi-seg { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
@media (max-width:520px){ .acs-roi-seg{ grid-template-columns:repeat(3,1fr); } }
.acs-roi-seg button { border:1px solid var(--line); background:#fff; border-radius:12px; padding:0 6px;
  min-height:46px; font-size:12px; font-weight:600; cursor:pointer; color:var(--text);
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.3;
  transition:border-color .15s, box-shadow .15s, background .15s; }
.acs-roi-seg button:hover { border-color:var(--accent); box-shadow:0 3px 10px rgba(230,57,70,.08); }
.acs-roi-seg button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.acs-roi-seg button.is-on { border-color:var(--accent); color:var(--ink); font-weight:700;
  background:rgba(230,57,70,.05);
  box-shadow:0 3px 10px rgba(230,57,70,.08), inset 0 1px 0 rgba(255,255,255,.6); }

input[type=range] { width:100%; accent-color:var(--accent); height:32px; }

.acs-roi-adv { border-top:1px solid var(--line); padding-top:14px; margin-top:4px; }
.acs-roi-adv summary { font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; margin-bottom:14px; }

/* results */
.acs-roi-stat { border-bottom:1px solid var(--line); padding:14px 0; }
.acs-roi-stat:first-child { padding-top:0; }
.acs-roi-statlabel { display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.acs-roi-statlabel .yournum { font-style:normal; text-transform:none; letter-spacing:0; font-weight:400; }
.acs-roi-huge { font-size:42px; font-weight:800; margin:0; line-height:1.05; font-variant-numeric:tabular-nums; color:var(--ink); }
.acs-roi-big { font-size:24px; font-weight:800; margin:0; font-variant-numeric:tabular-nums; color:var(--ink); }
.acs-roi-accent { color:var(--accent); }
.acs-roi-chip { display:block; margin-top:8px; font-size:12px; color:var(--muted); }
.acs-roi-chip.is-live { color:var(--accent); }
.acs-roi-duo { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.acs-roi-duo .acs-roi-stat { border-bottom:1px solid var(--line); }

/* mix bar: slim grayscale-tint segments, direct-labeled legend below */
.acs-roi-bar { display:flex; height:8px; border-radius:3px; overflow:hidden; background:var(--soft); gap:1px; }
.acs-roi-bar span { display:block; height:100%; transition:flex-basis .25s; }
.acs-roi-legend { list-style:none; margin:10px 0 0; padding:0; font-size:13px; }
.acs-roi-legend li { display:flex; align-items:center; gap:8px; padding:3px 0; }
.acs-roi-legend .sw { width:10px; height:10px; border-radius:2px; flex:0 0 auto; }
.acs-roi-legend a { color:var(--ink); font-weight:600; text-decoration:none; }
.acs-roi-legend a:hover { color:var(--accent); }
.acs-roi-legend .pct { margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; color:var(--muted); }

.acs-roi-scalelabels { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); margin-top:4px; }
.acs-roi-hint { background:#fff; border-left:2px solid var(--accent); padding:8px 12px; font-size:13px; margin:10px 0 0; color:var(--text); }

/* CTA visual contract locked against theme button styles (scoped !important — staging
   confirmed the theme strips the red fill; scope is this one component only) */
#acs-roi button.acs-roi-cta { display:block !important; width:100% !important; box-sizing:border-box !important;
  min-height:48px !important; margin-top:18px !important; padding:14px 18px !important;
  background:#e63946 !important; background-image:none !important; color:#fff !important;
  font-family:inherit !important; font-weight:700 !important; font-size:15px !important; line-height:1.3 !important;
  text-align:center !important; text-transform:none !important; text-decoration:none !important;
  border:0 !important; border-radius:8px !important; box-shadow:none !important;
  appearance:none !important; -webkit-appearance:none !important; cursor:pointer !important;
  transition:transform .15s, background .15s !important; }
#acs-roi button.acs-roi-cta:hover { transform:translateY(-1px) !important; background:#d32f3d !important; color:#fff !important; }
#acs-roi button.acs-roi-cta:active { transform:translateY(0) !important; background:#c22835 !important; }
#acs-roi button.acs-roi-cta:focus-visible { outline:2px solid var(--ink) !important; outline-offset:2px !important; }
.acs-roi-trust { font-size:12px; color:var(--muted); line-height:1.6; margin:12px 0 0;
  padding-top:10px; border-top:1px solid var(--line); }

/* related reading: same format as the site's post-navigation (kicker + bold titles) */
.acs-roi-related { margin-top:34px; border-top:1px solid var(--line); padding-top:18px; }
.acs-roi-relatedkicker { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.acs-roi-relatedlist { list-style:none; margin:0; padding:0; }
.acs-roi-relatedlist li { padding:4px 0; }
.acs-roi-relatedlist a { font-size:19px; font-weight:700; color:var(--ink); text-decoration:none; line-height:1.35; }
.acs-roi-relatedlist a:hover { color:var(--accent); }

.acs-roi-method { margin-top:26px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:26px; }
.acs-roi-method h2 { margin-top:0; font-size:17px; color:var(--ink); }
.acs-roi-method p { font-size:14px; line-height:1.65; color:var(--text); }

/* progress: slim tool-status bar (no gradient, no gamified pill) */
.acs-roi-progress { margin-bottom:22px; }
.acs-roi-progressbar { height:4px; border-radius:2px; background:var(--soft); overflow:hidden; }
.acs-roi-progressbar div { height:100%; width:40%; background:var(--accent); transition:width .35s; }
.acs-roi-progress span { display:block; margin-top:6px; font-size:12px; font-weight:600; color:var(--muted); }
.stepnum { font-weight:800; color:var(--accent); margin-right:6px; font-variant-numeric:tabular-nums; }
.acs-roi-field.is-done .stepnum { color:var(--ink); }
.acs-roi-field.is-done .acs-roi-label { border-left:2px solid var(--accent); padding-left:8px; margin-left:-10px; }

.acs-roi-huge { transition:opacity .2s; }
.acs-roi-payzone { font-size:20px; font-weight:800; margin-left:14px; vertical-align:middle;
  text-transform:uppercase; letter-spacing:.06em; }

/* payback gauge: 3 neutral gray duration bands + slim needle */
.acs-roi-gauge { position:relative; height:10px; margin-top:10px; }
.acs-roi-zones { display:flex; height:100%; border-radius:3px; overflow:hidden; gap:1px; }
.acs-roi-zones span { height:100%; }
.acs-roi-zones .z1 { flex:18 0 0; background:#def0e2; }
.acs-roi-zones .z2 { flex:18 0 0; background:#fbe8c9; }
.acs-roi-zones .z3 { flex:24 0 0; background:#f5cdd1; }
.acs-roi-needle { position:absolute; top:-3px; width:2px; height:16px; background:var(--ink); transition:left .3s; }
.acs-roi-zonenote { font-size:11.5px; color:var(--muted); line-height:1.55; margin:8px 0 0; }
.acs-roi-zonenote a { color:var(--muted); }
.acs-roi-finenote { font-size:11px; color:var(--muted); line-height:1.5; margin:8px 0 0; }

.acs-roi-cta { position:relative; }
.acs-roi-ctabadge { display:inline; margin-left:6px; font-weight:800; color:#fff; }
.acs-roi-ctabadge[hidden] { display:none; }
.acs-roi-ctabadge::before { content:"("; }
.acs-roi-ctabadge::after { content:")"; }

/* recommendations: catalog-entry cards, hairline borders, no shadows */
.acs-roi-reco { margin-top:34px; }
.acs-roi-reco h2 { font-size:22px; font-weight:800; margin:0 0 6px; color:var(--ink); }
.acs-roi-recosub { color:var(--muted); font-size:14px; margin:0 0 16px; }
.acs-roi-recogrid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:980px){ .acs-roi-recogrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .acs-roi-recogrid{ grid-template-columns:1fr; } }
.acs-roi-recocard { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px;
  cursor:pointer; transition:border-color .15s; position:relative; }
.acs-roi-recocard:hover { border-color:var(--accent); }
.acs-roi-recocard:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.acs-roi-recocard.is-picked { border-color:var(--accent); }
.acs-roi-recocard .img { height:176px; border-radius:6px; background:var(--soft); display:flex; align-items:center;
  justify-content:center; margin-bottom:10px; position:relative; overflow:hidden; }
@media (max-width:520px){ .acs-roi-recocard .img { height:172px; } }
.acs-roi-recocard .img .ovl { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column;
  gap:2px; padding:26px 10px 8px; background:linear-gradient(transparent, rgba(0,0,0,.65)); }
.acs-roi-recocard .img .ocat { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:rgba(255,255,255,.85); }
.acs-roi-recocard .img .oname { font-size:13px; font-weight:700; color:#fff; line-height:1.3; }
.acs-roi-recocard .img.is-text { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); text-align:center; padding:0 10px; }
.acs-roi-recocard .img img { width:100%; height:100%; object-fit:contain; border-radius:6px; display:block; }
.acs-roi-recocard .img.is-photo { background:#fff; border:1px solid var(--line); }
.acs-roi-recocard .cat { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.acs-roi-recocard .cat::before { content:""; display:inline-block; width:10px; height:2px; background:var(--accent);
  vertical-align:middle; margin-right:6px; }
.acs-roi-recocard .name { font-size:13.5px; font-weight:700; margin:4px 0 8px; line-height:1.35; color:var(--ink); }
.acs-roi-recocard .pick { font-size:12px; font-weight:700; color:var(--accent); }
.acs-roi-recocard.is-picked .pick::before { content:"\2713 "; }
.acs-roi-recocard .tick { position:absolute; top:10px; right:12px; font-size:13px; font-weight:800;
  color:var(--accent); display:none; }
.acs-roi-recocard.is-picked .tick { display:block; }