/* ==========================================================================
   TYTEN v2 — /roi-calculator
   Inputs panel (styled range sliders) + results panel. Every colour is a
   --v2-* token or a page token defined per theme below.
   ========================================================================== */

:root,
[data-theme="light"] {
  --roi-warn: #9A4A12;                       /* "cost of every month" figure */
  --roi-warn-border: rgba(154, 74, 18, 0.4);
  --roi-warn-bg: rgba(236, 150, 100, 0.10);
}
[data-theme="dark"] {
  --roi-warn: #F6B27A;
  --roi-warn-border: rgba(246, 178, 122, 0.45);
  --roi-warn-bg: rgba(236, 150, 100, 0.08);
}

/* Hero ------------------------------------------------------------------- */
.roi-hero__inner { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 1.875rem); justify-items: start; }
.roi-hero__title { max-width: 1000px; text-wrap: balance; }

/* Calculator ------------------------------------------------------------- */
.roi-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 1rem + 1.2vw, 32px);
}
@media (min-width: 861px) { .roi-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.roi-panel {
  padding: clamp(24px, 1.2rem + 1.4vw, 40px);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-r-card);
  background: var(--v2-card-bg);
}
.roi-panel--out {
  background: var(--v2-glass-bg);
  border-color: var(--v2-glass-border);
  box-shadow: var(--v2-shadow-panel);
}
.roi-panel__title {
  margin: 0 0 clamp(22px, 2vw, 30px);
  font-size: var(--v2-fs-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-accent-ink);
}

.roi-field + .roi-field { margin-top: 30px; }
.roi-field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  font-size: var(--v2-fs-ui);
  line-height: 1.35;
  color: var(--v2-text-body);
}
.roi-val {
  font-family: var(--v2-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  white-space: nowrap;
  color: var(--v2-text);
  font-variant-numeric: tabular-nums;
}

/* Range slider: thin track + round accent thumb (Firefox also paints the filled part) */
.roi-field input[type="range"] {
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--v2-accent);
}
.roi-field input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-line);
}
.roi-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  border: 6px solid var(--v2-accent);
  background: var(--v2-bg);
  box-shadow: 0 2px 8px var(--v2-accent-halo);
  transition: transform var(--v2-dur) ease;
}
.roi-field input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-line);
}
.roi-field input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-accent);
}
.roi-field input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--v2-accent);
  background: var(--v2-bg);
}
.roi-field input[type="range"]:hover::-webkit-slider-thumb,
.roi-field input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.roi-field input[type="range"]:focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 4px; border-radius: 6px; }

/* Results ---------------------------------------------------------------- */
.roi-out { display: grid; gap: 14px; }
.roi-stat {
  padding: 20px 22px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-r-banner);
  background: var(--v2-card-bg);
}
.roi-num {
  font-family: var(--v2-font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem);   /* 30 → 40 */
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--v2-accent-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.roi-lbl { margin-top: 8px; font-size: var(--v2-fs-small); line-height: 1.5; color: var(--v2-text-muted); }
.roi-stat--delay { border-color: var(--roi-warn-border); background: var(--roi-warn-bg); }
.roi-stat--delay .roi-num { color: var(--roi-warn); }

.roi-bridge {
  margin: clamp(32px, 3vw, 48px) auto 0;
  text-align: center;
  font-family: var(--v2-font-display);
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);   /* 19 → 24 */
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--v2-text);
  text-wrap: balance;
}
.roi-bridge strong { color: var(--v2-accent-ink); font-weight: 600; }
.roi-note {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--v2-line-soft);
  font-size: var(--v2-fs-xs);
  line-height: 1.7;
  color: var(--v2-text-muted);
}
.roi-note strong { color: var(--v2-text); font-weight: 600; }

/* Closing CTA ------------------------------------------------------------ */
.roi-cta .v2-sub { max-width: 760px; }
@media (max-width: 420px) { .roi-cta .v2-btn { white-space: normal; } }