/* ============================================================
   ARCTURA ROI CALCULATOR — scoped to #arctura-roi
   Self-contained, transparent background, inherits host page.
   ============================================================ */

#arctura-roi{
  --aroi-navy:#1B4F72;
  --aroi-ink:#0F2E44;
  --aroi-body:#3D5567;
  --aroi-muted:#6B8299;
  --aroi-line:#DCE5EC;
  --aroi-line-strong:#B9C9D6;
  --aroi-surface:#FFFFFF;
  --aroi-canvas:#F4F7FA;
  --aroi-accent:#A97C2F;
  --aroi-neg:#A6362A;
  --aroi-radius:3px;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  color:var(--aroi-body);
  max-width:1060px;
  margin:0 auto;
  -webkit-font-smoothing:antialiased;
}
#arctura-roi *{box-sizing:border-box}

#arctura-roi .aroi-head{margin-bottom:22px}
#arctura-roi .aroi-eyebrow{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--aroi-navy);font-weight:600;margin-bottom:9px;
}
#arctura-roi h2.aroi-title{
  font-size:clamp(22px,3vw,30px);line-height:1.18;color:var(--aroi-ink);
  margin:0 0 10px;font-weight:600;letter-spacing:-.01em;
}
#arctura-roi .aroi-sub{margin:0;max-width:62ch;font-size:14.5px;color:var(--aroi-body)}

#arctura-roi .aroi-cols{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:22px;align-items:start;
}
@media (max-width:840px){#arctura-roi .aroi-cols{grid-template-columns:1fr}}

/* ---------- inputs ---------- */
#arctura-roi .aroi-inputs{
  background:var(--aroi-canvas);border:1px solid var(--aroi-line);
  border-radius:var(--aroi-radius);padding:18px;
}
#arctura-roi .aroi-group{margin-bottom:20px}
#arctura-roi .aroi-group:last-child{margin-bottom:0}
#arctura-roi .aroi-gtitle{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--aroi-navy);
  font-weight:600;margin-bottom:11px;padding-bottom:6px;border-bottom:1px solid var(--aroi-line);
}
#arctura-roi .aroi-field{margin-bottom:12px}
#arctura-roi .aroi-field:last-child{margin-bottom:0}
#arctura-roi label{display:block;font-size:13px;color:var(--aroi-ink);margin-bottom:4px;font-weight:500}
#arctura-roi .aroi-hint{display:block;font-weight:400;color:var(--aroi-muted);font-size:11.5px;margin-top:1px}
#arctura-roi input[type=number]{
  width:100%;background:var(--aroi-surface);border:1px solid var(--aroi-line-strong);
  color:var(--aroi-ink);font:500 14px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:8px 10px;border-radius:var(--aroi-radius);
}
#arctura-roi input[type=number]:focus{outline:2px solid var(--aroi-navy);outline-offset:1px;border-color:transparent}
#arctura-roi input[type=range]{width:100%;accent-color:var(--aroi-navy);margin:3px 0 0}
#arctura-roi .aroi-rangerow{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#arctura-roi .aroi-rangeval{font:600 13px ui-monospace,Menlo,Consolas,monospace;color:var(--aroi-navy)}

/* ---------- results ---------- */
#arctura-roi .aroi-pad{
  background:var(--aroi-surface);border:1px solid var(--aroi-line);border-radius:var(--aroi-radius);
  overflow:hidden;
}
#arctura-roi .aroi-padhead{
  padding:14px 20px;border-bottom:2px solid var(--aroi-navy);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
}
#arctura-roi .aroi-padtitle{font-size:16px;font-weight:600;color:var(--aroi-ink)}
#arctura-roi .aroi-padmeta{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--aroi-muted)}

#arctura-roi .aroi-kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  padding:18px 20px;background:var(--aroi-canvas);border-bottom:1px solid var(--aroi-line);
}
@media (max-width:600px){#arctura-roi .aroi-kpis{grid-template-columns:1fr;gap:12px}}
#arctura-roi .aroi-klab{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--aroi-muted);margin-bottom:5px}
#arctura-roi .aroi-kval{
  font:600 25px/1 ui-monospace,Menlo,Consolas,monospace;color:var(--aroi-navy);
  font-variant-numeric:tabular-nums;
}
#arctura-roi .aroi-ksub{font-size:11.5px;color:var(--aroi-muted);margin-top:5px}
#arctura-roi .aroi-kpi.aroi-warn .aroi-kval{color:var(--aroi-neg)}

#arctura-roi .aroi-slab{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--aroi-navy);
  font-weight:600;padding:16px 20px 5px;
}
#arctura-roi .aroi-rows{padding:0 20px}
#arctura-roi .aroi-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--aroi-line);
}
#arctura-roi .aroi-lab{font-size:13.5px;color:var(--aroi-ink);min-width:0}
#arctura-roi .aroi-lab small{display:block;color:var(--aroi-muted);font-size:11.5px;line-height:1.35;margin-top:1px}
#arctura-roi .aroi-val{
  font:500 14.5px ui-monospace,Menlo,Consolas,monospace;white-space:nowrap;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--aroi-ink);
}
#arctura-roi .aroi-derived .aroi-val{color:var(--aroi-body)}
#arctura-roi .aroi-row.aroi-cost .aroi-val{color:var(--aroi-neg)}
#arctura-roi .aroi-row.aroi-total{border-top:1px solid var(--aroi-navy);border-bottom:2px solid var(--aroi-navy);margin-top:4px}
#arctura-roi .aroi-row.aroi-total .aroi-lab{font-weight:600;font-size:14.5px}
#arctura-roi .aroi-row.aroi-total .aroi-val{font-size:18px;font-weight:600;color:var(--aroi-navy)}
#arctura-roi .aroi-row.aroi-last{border-bottom:none}

#arctura-roi .aroi-note{
  margin:16px 20px 0;padding:13px 15px;background:var(--aroi-canvas);
  border-left:3px solid var(--aroi-accent);font-size:12.5px;line-height:1.5;color:var(--aroi-body);
}
#arctura-roi .aroi-note b{color:var(--aroi-ink)}
#arctura-roi .aroi-note.aroi-alert{border-left-color:var(--aroi-neg)}

#arctura-roi .aroi-actions{padding:16px 20px 20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#arctura-roi .aroi-email{
  flex:1 1 200px;min-width:170px;background:var(--aroi-surface);border:1px solid var(--aroi-line-strong);
  color:var(--aroi-ink);font-size:13.5px;padding:9px 10px;border-radius:var(--aroi-radius);
}
#arctura-roi .aroi-email:focus{outline:2px solid var(--aroi-navy);outline-offset:1px;border-color:transparent}
#arctura-roi button.aroi-btn{
  font:500 13.5px inherit;background:var(--aroi-navy);color:#fff;border:none;
  padding:10px 16px;border-radius:var(--aroi-radius);cursor:pointer;
}
#arctura-roi button.aroi-btn.aroi-ghost{background:transparent;color:var(--aroi-navy);border:1px solid var(--aroi-navy)}
#arctura-roi button.aroi-btn:hover{opacity:.88}
#arctura-roi button.aroi-btn:focus-visible{outline:2px solid var(--aroi-accent);outline-offset:2px}
#arctura-roi .aroi-msg{font-size:12.5px;color:var(--aroi-navy)}
#arctura-roi .aroi-cta{
  margin:0 20px 20px;padding:15px 16px;background:var(--aroi-navy);color:#fff;border-radius:var(--aroi-radius);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
#arctura-roi .aroi-cta p{margin:0;font-size:13.5px;max-width:52ch}
#arctura-roi .aroi-cta a{
  color:var(--aroi-navy);background:#fff;text-decoration:none;font-weight:600;font-size:13.5px;
  padding:9px 15px;border-radius:var(--aroi-radius);white-space:nowrap;
}
#arctura-roi .aroi-foot{margin-top:18px;font-size:12px;color:var(--aroi-muted);max-width:74ch}

/* ---------- mode switching ---------- */
#arctura-roi[data-mode="support"] .aroi-only-ret,
#arctura-roi[data-mode="retention"] .aroi-only-sup{display:none !important}

/* ===== ROI page tabs ===== */
.roi-tabs {
  max-width: 1060px;
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: #F4F7FA;
  border: 1px solid #DCE5EC;
  border-radius: 12px;
  padding: 6px;
}
.roi-tab {
  border: none;
  background: transparent;
  padding: 14px 18px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #0F2E44;
  font: inherit;
}
.roi-tab:hover { background: rgba(27, 79, 114, 0.05); }
.roi-tab.is-active {
  background: #FFFFFF;
  box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.35);
}
.roi-tab-label {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: #0F2E44;
}
.roi-tab.is-active .roi-tab-label { color: #1B4F72; }
.roi-tab-sub {
  font-size: 12px;
  color: #6B8299;
  font-weight: 500;
}
.roi-panel { max-width: 1060px; margin: 0 auto; }
@media (max-width: 640px) {
  .roi-tabs { grid-template-columns: 1fr; }
}

/* ===== PlayerDesk support calculator (extends aroi-*) ===== */
#arctura-roi-support {
  --aroi-navy:#1B4F72;
  --aroi-ink:#0F2E44;
  --aroi-body:#3D5567;
  --aroi-muted:#6B8299;
  --aroi-line:#DCE5EC;
  --aroi-line-strong:#B9C9D6;
  --aroi-surface:#FFFFFF;
  --aroi-canvas:#F4F7FA;
  --aroi-accent:#A97C2F;
  --aroi-neg:#A6362A;
  --aroi-radius:3px;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  color:var(--aroi-body);
  max-width:1060px;
  margin:0 auto;
  -webkit-font-smoothing:antialiased;
}
#arctura-roi-support * { box-sizing: border-box; }

#arctura-roi-support .aroi-head { margin-bottom: 22px; }
#arctura-roi-support .aroi-eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--aroi-navy); font-weight: 600; margin-bottom: 9px;
}
#arctura-roi-support h2.aroi-title {
  font-size: clamp(22px, 3vw, 30px); line-height: 1.18; color: var(--aroi-ink);
  margin: 0 0 10px; font-weight: 600; letter-spacing: -.01em;
}
#arctura-roi-support .aroi-sub { margin: 0; max-width: 62ch; font-size: 14.5px; color: var(--aroi-body); }

#arctura-roi-support .aroi-cols {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 22px; align-items: start;
}
@media (max-width: 840px) { #arctura-roi-support .aroi-cols { grid-template-columns: 1fr; } }

#arctura-roi-support .aroi-inputs {
  background: var(--aroi-canvas); border: 1px solid var(--aroi-line);
  border-radius: var(--aroi-radius); padding: 18px;
}
#arctura-roi-support .aroi-group { margin-bottom: 20px; }
#arctura-roi-support .aroi-group:last-child { margin-bottom: 0; }
#arctura-roi-support .aroi-gtitle {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--aroi-navy);
  font-weight: 600; margin-bottom: 11px; padding-bottom: 6px; border-bottom: 1px solid var(--aroi-line);
}
#arctura-roi-support .aroi-field { margin-bottom: 12px; }
#arctura-roi-support .aroi-field:last-child { margin-bottom: 0; }
#arctura-roi-support label {
  display: block; font-size: 13px; color: var(--aroi-ink); margin-bottom: 4px; font-weight: 500;
}
#arctura-roi-support .aroi-hint {
  display: block; font-weight: 400; color: var(--aroi-muted); font-size: 11.5px; margin-top: 1px;
}
#arctura-roi-support input[type=number] {
  width: 100%; background: var(--aroi-surface); border: 1px solid var(--aroi-line-strong);
  color: var(--aroi-ink); font: 500 14px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding: 8px 10px; border-radius: var(--aroi-radius);
}
#arctura-roi-support input[type=number]:focus {
  outline: 2px solid var(--aroi-navy); outline-offset: 1px; border-color: transparent;
}
#arctura-roi-support input[type=range] { width: 100%; accent-color: var(--aroi-navy); margin: 3px 0 0; }
#arctura-roi-support .aroi-rangerow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
#arctura-roi-support .aroi-rangeval {
  font: 600 13px ui-monospace,Menlo,Consolas,monospace; color: var(--aroi-navy);
}
#arctura-roi-support .aroi-currency-row {
  display: grid; grid-template-columns: 84px 1fr; gap: 8px;
}
#arctura-roi-support .aroi-currency-row select {
  padding: 8px 6px; background: var(--aroi-surface); border: 1px solid var(--aroi-line-strong);
  border-radius: var(--aroi-radius); font: 600 13.5px inherit; color: var(--aroi-ink);
}

#arctura-roi-support .aroi-pad {
  background: var(--aroi-surface); border: 1px solid var(--aroi-line);
  border-radius: var(--aroi-radius); overflow: hidden;
}
#arctura-roi-support .aroi-padhead {
  padding: 14px 20px; border-bottom: 2px solid var(--aroi-navy);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
#arctura-roi-support .aroi-padtitle { font-size: 16px; font-weight: 600; color: var(--aroi-ink); }
#arctura-roi-support .aroi-padmeta {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--aroi-muted);
}
#arctura-roi-support .aroi-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 18px 20px; background: var(--aroi-canvas); border-bottom: 1px solid var(--aroi-line);
}
@media (max-width: 600px) { #arctura-roi-support .aroi-kpis { grid-template-columns: 1fr; gap: 12px; } }
#arctura-roi-support .aroi-kpi { padding: 4px 0; }
#arctura-roi-support .aroi-klab {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--aroi-muted); margin-bottom: 5px;
}
#arctura-roi-support .aroi-kval {
  font: 600 25px/1 ui-monospace,Menlo,Consolas,monospace; color: var(--aroi-navy);
  font-variant-numeric: tabular-nums;
}
#arctura-roi-support .aroi-ksub {
  font-size: 11.5px; color: var(--aroi-muted); margin-top: 5px;
}
#arctura-roi-support .aroi-kpi.aroi-warn .aroi-kval { color: var(--aroi-neg); }
#arctura-roi-support .aroi-kpi-hero {
  grid-column: 3 / 4; padding: 12px 14px; background: #FFF7EA;
  border: 1px solid rgba(244, 164, 53, 0.5); border-radius: 6px;
}
#arctura-roi-support .aroi-kpi-hero .aroi-klab { color: var(--aroi-accent); }
#arctura-roi-support .aroi-kpi-hero .aroi-kval { color: #A97C2F; font-size: 32px; }

#arctura-roi-support .aroi-slab {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--aroi-navy);
  font-weight: 600; padding: 16px 20px 5px;
}
#arctura-roi-support .aroi-rows { padding: 0 20px; }
#arctura-roi-support .aroi-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 7px 0; border-bottom: 1px solid var(--aroi-line);
}
#arctura-roi-support .aroi-lab { font-size: 13.5px; color: var(--aroi-ink); min-width: 0; }
#arctura-roi-support .aroi-lab small {
  display: block; color: var(--aroi-muted); font-size: 11.5px; line-height: 1.35; margin-top: 1px;
}
#arctura-roi-support .aroi-val {
  font: 500 14.5px ui-monospace,Menlo,Consolas,monospace; white-space: nowrap; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--aroi-ink);
}
#arctura-roi-support .aroi-derived .aroi-val { color: var(--aroi-body); }
#arctura-roi-support .aroi-row.aroi-cost .aroi-val { color: var(--aroi-neg); }
#arctura-roi-support .aroi-row.aroi-total {
  border-top: 1px solid var(--aroi-navy); border-bottom: 2px solid var(--aroi-navy); margin-top: 4px;
}
#arctura-roi-support .aroi-row.aroi-total .aroi-lab { font-weight: 600; font-size: 14.5px; }
#arctura-roi-support .aroi-row.aroi-total .aroi-val {
  font-size: 18px; font-weight: 600; color: var(--aroi-navy);
}
#arctura-roi-support .aroi-row.aroi-total .aroi-val.aroi-neg-val { color: var(--aroi-neg); }
#arctura-roi-support .aroi-row.aroi-last { border-bottom: none; }

#arctura-roi-support .aroi-note {
  margin: 16px 20px 0; padding: 13px 15px; background: var(--aroi-canvas);
  border-left: 3px solid var(--aroi-accent); font-size: 12.5px; line-height: 1.5; color: var(--aroi-body);
}
#arctura-roi-support .aroi-note b { color: var(--aroi-ink); }
#arctura-roi-support .aroi-note.aroi-alert { border-left-color: var(--aroi-neg); }

#arctura-roi-support .aroi-assumptions {
  margin: 16px 20px 0; background: var(--aroi-canvas); border: 1px solid var(--aroi-line);
  border-radius: var(--aroi-radius); padding: 12px 16px;
}
#arctura-roi-support .aroi-assumptions summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--aroi-ink);
  letter-spacing: 0.4px; text-transform: uppercase;
}
#arctura-roi-support .aroi-assumptions ul {
  margin: 12px 0 0; padding: 0 0 0 18px; list-style: disc; color: var(--aroi-body); font-size: 13px; line-height: 1.6;
}
#arctura-roi-support .aroi-assumptions li { margin-bottom: 6px; }
#arctura-roi-support .aroi-assumptions strong { color: var(--aroi-ink); }
#arctura-roi-support .aroi-assumptions em { font-style: italic; color: var(--aroi-body); }

#arctura-roi-support .aroi-actions {
  padding: 16px 20px 20px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
#arctura-roi-support .aroi-email {
  flex: 1 1 200px; min-width: 170px; background: var(--aroi-surface);
  border: 1px solid var(--aroi-line-strong); color: var(--aroi-ink);
  font-size: 13.5px; padding: 9px 10px; border-radius: var(--aroi-radius);
}
#arctura-roi-support .aroi-email:focus {
  outline: 2px solid var(--aroi-navy); outline-offset: 1px; border-color: transparent;
}
#arctura-roi-support button.aroi-btn {
  font: 500 13.5px inherit; background: var(--aroi-navy); color: #fff; border: none;
  padding: 10px 16px; border-radius: var(--aroi-radius); cursor: pointer;
}
#arctura-roi-support button.aroi-btn.aroi-ghost {
  background: transparent; color: var(--aroi-navy); border: 1px solid var(--aroi-navy);
}
#arctura-roi-support button.aroi-btn:hover { opacity: .88; }
#arctura-roi-support button.aroi-btn:focus-visible {
  outline: 2px solid var(--aroi-accent); outline-offset: 2px;
}
#arctura-roi-support .aroi-msg { font-size: 12.5px; color: var(--aroi-navy); }
#arctura-roi-support .aroi-cta {
  margin: 0 20px 20px; padding: 15px 16px; background: var(--aroi-navy); color: #fff;
  border-radius: var(--aroi-radius); display: flex; justify-content: space-between;
  align-items: center; gap: 14px; flex-wrap: wrap;
}
#arctura-roi-support .aroi-cta p { margin: 0; font-size: 13.5px; max-width: 52ch; }
#arctura-roi-support .aroi-cta a {
  color: var(--aroi-navy); background: #fff; text-decoration: none;
  font-weight: 600; font-size: 13.5px; padding: 9px 15px; border-radius: var(--aroi-radius); white-space: nowrap;
}
#arctura-roi-support .aroi-foot {
  margin-top: 18px; font-size: 12px; color: var(--aroi-muted); max-width: 74ch;
}