/* =============================================================================
   RMAI — AI & ICT SPEND CALCULATOR · styles
   All rules scoped under .rmai-spend-calc so nothing leaks into the page.
   Palette = RMAI Locked Palette (matches the design prototype + wp_blocks.BRAND).
   ============================================================================= */
.rmai-spend-calc {
  --rsc-ink: #1A1B25;
  --rsc-fg2: #555555;
  --rsc-mut: #8D8D92;
  --rsc-bd: #E8E8EB;
  --rsc-bg: #FAFAFA;
  --rsc-plum: #A77ACD;
  --rsc-plum-soft: #F0EBF4;
  --rsc-plum-bd: #E3DCEC;
  --rsc-orange: #F26541;
  --rsc-orange-hi: #DA5939;
  --rsc-green: #22C55E;
  --rsc-stone: #EDEBE8;
  --rsc-stone-bd: #E2DFD9;
  --rsc-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  max-width: 1140px;
  margin: 0 auto;
  padding: 36px 24px 48px;
  font-family: 'Epilogue', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--rsc-ink);
  box-sizing: border-box;
}
.rmai-spend-calc.is-compact { padding: 8px 0 12px; }
.rmai-spend-calc *, .rmai-spend-calc *::before, .rmai-spend-calc *::after { box-sizing: border-box; }

/* results fade in once JS has filled the numbers */
.rmai-spend-calc .rsc-results,
.rmai-spend-calc .rsc-curve-card { transition: opacity 200ms ease; }
.rmai-spend-calc:not(.is-ready) .rsc-results,
.rmai-spend-calc:not(.is-ready) .rsc-curve-card { opacity: 0.45; }

/* ---- masthead ---- */
.rmai-spend-calc .rsc-masthead { border-bottom: 2px solid var(--rsc-ink); padding-bottom: 22px; margin-bottom: 28px; }
.rmai-spend-calc .rsc-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rsc-plum); margin-bottom: 14px; }
.rmai-spend-calc .rsc-eyebrow-rule { width: 20px; height: 2px; background: var(--rsc-plum); display: inline-block; }
.rmai-spend-calc .rsc-title { font-size: 33px; line-height: 1.14; margin: 0 0 12px; font-weight: 700; letter-spacing: -0.015em; max-width: 24ch; }
.rmai-spend-calc .rsc-intro { color: var(--rsc-fg2); font-size: 15.5px; line-height: 1.55; max-width: 66ch; margin: 0; }

/* ---- mode toggle ---- */
.rmai-spend-calc .rsc-modes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.rmai-spend-calc .rsc-mode { flex: 1 1 160px; text-align: left; cursor: pointer; font-family: inherit; border: 1px solid var(--rsc-bd); background: #fff; border-radius: 10px; padding: 12px 14px; transition: border-color 180ms cubic-bezier(0.4,0,0.2,1), background 180ms cubic-bezier(0.4,0,0.2,1); }
.rmai-spend-calc .rsc-mode.is-active { border: 1.5px solid var(--rsc-plum); background: var(--rsc-plum-soft); }
.rmai-spend-calc .rsc-mode-name { font-weight: 600; font-size: 14px; display: block; color: var(--rsc-ink); }
.rmai-spend-calc .rsc-mode-desc { font-size: 12px; color: var(--rsc-mut); margin-top: 2px; display: block; }

/* ---- grid + cards ---- */
.rmai-spend-calc .rsc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; align-items: start; }
.rmai-spend-calc .rsc-card { border-radius: 12px; padding: 24px; }
.rmai-spend-calc .rsc-inputs { background: #fff; border: 1px solid var(--rsc-bd); }
.rmai-spend-calc .rsc-results { background: var(--rsc-plum-soft); border: 1px solid var(--rsc-plum-bd); }
.rmai-spend-calc .rsc-card-head { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rsc-mut); margin-bottom: 20px; }

/* ---- fields ---- */
.rmai-spend-calc .rsc-field-row { margin-bottom: 18px; }
.rmai-spend-calc .rsc-field-row--last { margin-bottom: 4px; }
.rmai-spend-calc .rsc-label { font-size: 13px; color: var(--rsc-fg2); font-weight: 500; display: block; margin-bottom: 7px; }
.rmai-spend-calc .rsc-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.rmai-spend-calc .rsc-label-row .rsc-label { margin-bottom: 0; }
.rmai-spend-calc .rsc-label-val { font-size: 13px; color: var(--rsc-fg2); }
.rmai-spend-calc .rsc-label-val b { font-family: var(--rsc-mono); color: var(--rsc-ink); font-weight: 500; }
.rmai-spend-calc .rsc-label-strong { font-size: 13px; font-weight: 600; color: var(--rsc-ink); }
.rmai-spend-calc .rsc-accent { color: var(--rsc-plum); }
.rmai-spend-calc .rsc-sub { font-size: 12px; color: var(--rsc-mut); margin-top: 6px; }
.rmai-spend-calc .rsc-note { font-size: 11.5px; color: var(--rsc-mut); font-style: italic; margin-top: 5px; }

.rmai-spend-calc .rsc-money { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rsc-bd); border-radius: 8px; padding: 0 12px; background: #fff; height: 46px; transition: border-color 120ms, box-shadow 120ms; }
.rmai-spend-calc .rsc-money:focus-within { border-color: var(--rsc-plum); box-shadow: 0 0 0 3px var(--rsc-plum-soft); }
.rmai-spend-calc .rsc-money-sign { color: var(--rsc-mut); font-size: 16px; }
.rmai-spend-calc .rsc-money-suffix { white-space: nowrap; }
.rmai-spend-calc .rsc-num { flex: 1; border: none; outline: none; font-family: inherit; font-size: 16px; color: var(--rsc-ink); background: transparent; height: 44px; width: 100%; }
.rmai-spend-calc .rsc-readout { font-size: 12px; color: var(--rsc-mut); margin-top: 6px; font-family: var(--rsc-mono); }

.rmai-spend-calc .rsc-select { width: 100%; height: 46px; border: 1px solid var(--rsc-bd); border-radius: 8px; padding: 0 38px 0 14px; background-color: #fff; font-family: inherit; font-size: 15px; color: var(--rsc-ink); cursor: pointer; -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 14px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.rmai-spend-calc .rsc-select:focus { border-color: var(--rsc-plum); box-shadow: 0 0 0 3px var(--rsc-plum-soft); outline: none; }
.rmai-spend-calc .rsc-select:disabled { color: var(--rsc-ink); opacity: 1; cursor: default; background-color: #F7F6F9; }

/* ---- range sliders ---- */
.rmai-spend-calc .rsc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: #E3E0EA; outline: none; }
.rmai-spend-calc .rsc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--rsc-plum); cursor: pointer; border: 3px solid #fff; box-shadow: 0 0 0 1px #D9D3E2; transition: box-shadow 120ms; }
.rmai-spend-calc .rsc-range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 5px rgba(167,122,205,0.18); }
.rmai-spend-calc .rsc-range::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; background: var(--rsc-plum); cursor: pointer; box-shadow: 0 0 0 1px #D9D3E2; }
.rmai-spend-calc .rsc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(167,122,205,0.28); }
.rmai-spend-calc .rsc-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--rsc-mut); margin-top: 7px; }

/* ---- results ---- */
.rmai-spend-calc .rsc-showing { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rsc-mut); font-weight: 600; margin-bottom: 16px; }
.rmai-spend-calc .rsc-showing b { color: var(--rsc-plum); }
.rmai-spend-calc .rsc-copy { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: none; color: var(--rsc-plum); background: #fff; border: 1px solid var(--rsc-plum-bd); border-radius: 6px; padding: 5px 11px; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.rmai-spend-calc .rsc-copy:hover { background: var(--rsc-plum-soft); border-color: var(--rsc-plum); }
.rmai-spend-calc .rsc-copy.is-copied { color: #0f7a3d; border-color: #9ad8b4; background: #e4f7ec; }
.rmai-spend-calc .rsc-headline { margin: 2px 0 20px; }
.rmai-spend-calc .rsc-headline-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rsc-fg2); margin-bottom: 8px; }
.rmai-spend-calc .rsc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rmai-spend-calc .rsc-dot--green { background: var(--rsc-green); }
.rmai-spend-calc .rsc-dot--plum { background: var(--rsc-plum); }
.rmai-spend-calc .rsc-dollars { font-size: 50px; font-weight: 700; letter-spacing: -0.025em; line-height: 0.95; color: var(--rsc-ink); }
.rmai-spend-calc .rsc-headline .rsc-sub { font-size: 13px; color: var(--rsc-fg2); margin-top: 9px; }
.rmai-spend-calc .rsc-headline .rsc-sub span { font-family: var(--rsc-mono); color: var(--rsc-ink); }

.rmai-spend-calc .rsc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.rmai-spend-calc .rsc-metric { background: #fff; border: 1px solid var(--rsc-bd); border-radius: 10px; padding: 14px 15px; }
.rmai-spend-calc .rsc-metric-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rsc-mut); margin-bottom: 7px; }
.rmai-spend-calc .rsc-metric-val { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; color: var(--rsc-ink); }
.rmai-spend-calc .rsc-metric-sub { font-size: 11.5px; color: var(--rsc-mut); margin-top: 5px; font-family: var(--rsc-mono); }

/* ---- allocation ---- */
.rmai-spend-calc .rsc-alloc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.rmai-spend-calc .rsc-alloc-title { font-size: 13px; color: var(--rsc-ink); font-weight: 600; }
.rmai-spend-calc .rsc-alloc-lens { font-size: 12px; color: var(--rsc-mut); font-style: italic; }
.rmai-spend-calc .rsc-alloc-bar { display: flex; height: 46px; border-radius: 8px; overflow: hidden; border: 1px solid var(--rsc-plum-bd); margin-bottom: 14px; }
.rmai-spend-calc .rsc-alloc-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; transition: flex 250ms cubic-bezier(0.4,0,0.2,1); }
.rmai-spend-calc .rsc-alloc-legend { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-bottom: 16px; }
.rmai-spend-calc .rsc-legend-item { display: flex; align-items: center; gap: 8px; }
.rmai-spend-calc .rsc-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.rmai-spend-calc .rsc-legend-label { font-size: 12.5px; color: var(--rsc-ink); font-weight: 500; }
.rmai-spend-calc .rsc-legend-val { font-size: 12px; color: var(--rsc-mut); font-family: var(--rsc-mono); }
.rmai-spend-calc .rsc-alloc-caption { font-size: 12.5px; color: var(--rsc-fg2); line-height: 1.55; margin: 0; }

/* ---- spend curve ---- */
.rmai-spend-calc .rsc-curve-card { background: #fff; border: 1px solid var(--rsc-bd); padding: 22px 24px 18px; margin-top: 20px; }
.rmai-spend-calc .rsc-curve-title { font-size: 14px; font-weight: 600; color: var(--rsc-ink); margin-bottom: 3px; }
.rmai-spend-calc .rsc-curve-sub { font-size: 12.5px; color: var(--rsc-mut); margin-bottom: 8px; max-width: 78ch; line-height: 1.5; }
.rmai-spend-calc .rsc-curve { width: 100%; height: auto; display: block; }
.rmai-spend-calc .rsc-curve-val { font-family: var(--rsc-mono); font-size: 15px; font-weight: 500; }
.rmai-spend-calc .rsc-curve-axis1 { font-family: inherit; font-size: 13px; font-weight: 600; }
.rmai-spend-calc .rsc-curve-axis2 { font-family: inherit; font-size: 11.5px; fill: var(--rsc-mut); }

/* ---- callout ---- */
.rmai-spend-calc .rsc-callout { background: var(--rsc-stone); border: 1px solid var(--rsc-stone-bd); border-radius: 12px; padding: 16px 18px; margin-top: 20px; font-size: 13.5px; color: #3A3B45; line-height: 1.58; }
.rmai-spend-calc .rsc-callout b { color: var(--rsc-plum); }

/* ---- CTA band ---- */
.rmai-spend-calc .rsc-cta { background: var(--rsc-ink); border-radius: 12px; padding: 28px 30px; margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.rmai-spend-calc .rsc-cta-copy { max-width: 48ch; }
.rmai-spend-calc .rsc-cta-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rsc-plum); margin-bottom: 9px; }
.rmai-spend-calc .rsc-cta-title { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.25; letter-spacing: -0.01em; }
.rmai-spend-calc .rsc-cta-body { font-size: 14px; color: #B7B7BA; margin-top: 11px; line-height: 1.55; }
.rmai-spend-calc .rsc-cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.rmai-spend-calc .rsc-cta-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--rsc-orange); color: #fff; font-size: 15px; font-weight: 600; padding: 13px 24px; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background 180ms cubic-bezier(0.4,0,0.2,1); }
.rmai-spend-calc .rsc-cta-primary:hover { background: var(--rsc-orange-hi); }
.rmai-spend-calc .rsc-cta-secondary { font-size: 14px; font-weight: 600; color: var(--rsc-plum); text-decoration: none; padding-left: 4px; }
.rmai-spend-calc .rsc-cta-secondary:hover { color: #fff; }

/* ---- methodology ---- */
.rmai-spend-calc .rsc-method { margin-top: 20px; border: 1px solid var(--rsc-bd); border-radius: 12px; background: #fff; overflow: hidden; }
.rmai-spend-calc .rsc-method summary { cursor: pointer; padding: 16px 20px; font-size: 13px; font-weight: 600; color: var(--rsc-ink); display: flex; align-items: center; justify-content: space-between; list-style: none; }
.rmai-spend-calc .rsc-method summary::-webkit-details-marker { display: none; }
.rmai-spend-calc .rsc-chev { color: var(--rsc-mut); transition: transform 180ms cubic-bezier(0.4,0,0.2,1); flex-shrink: 0; }
.rmai-spend-calc .rsc-method[open] summary .rsc-chev { transform: rotate(180deg); }
.rmai-spend-calc .rsc-method-body { padding: 4px 20px 18px; font-size: 13px; color: var(--rsc-fg2); line-height: 1.62; border-top: 1px solid var(--rsc-bd); }
.rmai-spend-calc .rsc-method-body p { margin: 14px 0; }
.rmai-spend-calc .rsc-method-body strong { color: var(--rsc-ink); font-weight: 600; }
.rmai-spend-calc .rsc-disclaimer { color: var(--rsc-mut); font-size: 12px; }

/* ---- footer line ---- */
.rmai-spend-calc .rsc-footer { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rsc-bd); font-size: 12px; color: var(--rsc-mut); line-height: 1.6; }
.rmai-spend-calc .rsc-footer-brand { font-weight: 700; color: var(--rsc-plum); }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .rmai-spend-calc { padding: 24px 16px 36px; }
  .rmai-spend-calc .rsc-title { font-size: 26px; }
  .rmai-spend-calc .rsc-dollars { font-size: 40px; }
  .rmai-spend-calc .rsc-cta { padding: 24px; }
}