/* Foursixty shoppable UGC ROI calculator page styles.
   Design direction: "the term sheet in the gallery" — a dark, confident hero
   flowing into the calculator band, with a dark results panel (the one bold
   move) and quiet, evenly-rhythmed editorial sections below.
   Tokens: ink #0d1024 (dark surfaces), indigo #6366f1 (brand primary),
   #a5b4fc / #c7d2fe (light-indigo data accents on dark), tint #f7f8fc. */

/* ---------- Eyebrows + section rhythm ---------- */

.roi-eyebrow {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--si-primary, #6366f1);
}
.roi-eyebrow-light { color: #a5b4fc; }

.roi-section { padding: 4rem 0; }
@media (min-width: 992px) {
  .roi-section { padding: 5.5rem 0; }
}
.roi-section-tint { background: #f7f8fc; }

/* ---------- Hero ---------- */

.roi-hero {
  background-color: #0d1024;
  background-image:
    radial-gradient(ellipse 60% 50% at 18% 8%, rgba(99, 102, 241, .28), transparent 65%),
    radial-gradient(ellipse 50% 45% at 85% 70%, rgba(99, 102, 241, .16), transparent 70%);
  padding-top: 4.5rem;
  padding-bottom: 150px; /* overlap zone the calculator band rises into */
}
@media (min-width: 992px) {
  .roi-hero { padding-top: 5.5rem; padding-bottom: 210px; }
}

.roi-hero-inner { max-width: 780px; }
.roi-hero-sub { color: rgba(255, 255, 255, .82); max-width: 640px; }
.roi-hero-sub strong { color: #fff; }
.roi-hero-caveat { color: rgba(255, 255, 255, .55); max-width: 560px; }

.roi-hero-stats {
  max-width: 760px;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.roi-hero-stat { padding: 0 .75rem; }
.roi-hero-stat + .roi-hero-stat { border-left: 1px solid rgba(255, 255, 255, .12); }
.roi-stat-num {
  display: block;
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: .35rem;
}
.roi-stat-label {
  display: block;
  font-size: .8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .6);
}
.roi-stat-brand { font-weight: 600; color: rgba(255, 255, 255, .85); }
.roi-stat-caption { color: rgba(255, 255, 255, .45); margin-top: 1.25rem; }

.roi-calc-intro { max-width: 680px; margin-top: 4rem; }
.roi-calc-intro-sub { color: rgba(255, 255, 255, .65); }

/* ---------- Calculator band (overlaps the hero) ---------- */

.roi-calc-band { margin-top: -110px; position: relative; z-index: 2; }
@media (min-width: 992px) {
  .roi-calc-band { margin-top: -160px; }
}

.roi-form-card,
.roi-results-card {
  border-radius: 1rem;
  box-shadow: 0 24px 64px -16px rgba(13, 16, 36, .35);
}
.roi-form-card { background: #fff; }

/* Sticky results on desktop; offset clears the fixed navbar */
@media (min-width: 992px) {
  .roi-sticky { position: sticky; top: 6rem; }
}

/* ---------- Dark results panel ---------- */

.roi-results-card {
  background: #151a30;
  border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8);
}
.roi-results-title {
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .55);
  font-size: .8125rem;
}

.roi-headline-label {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .35rem;
}
.roi-headline-amount {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  min-height: 1.15em; /* reserve one line so JS init causes no layout shift */
}
.roi-headline-note {
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
  margin-top: .35rem;
  min-height: 1.4em;
}

/* Metric grid: ledger-style hairline rows */
.roi-metrics { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.roi-metric {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: .8rem 1rem .8rem 0;
}
.roi-metric dt {
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .15rem;
}
.roi-metric dd,
.roi-metric-value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  min-height: 1.55em; /* reserve space against layout shift during count-up */
}

.roi-chart-caption { color: rgba(255, 255, 255, .85); }
.roi-chart svg {
  display: block;
  width: 100%;
  height: auto;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
#roi-chart-table { color: rgba(255, 255, 255, .7); }
#roi-chart-table .fw-semibold { color: #fff; }

.roi-swatch {
  display: inline-block;
  width: .65rem;
  height: .65rem;
  border-radius: 2px;
  vertical-align: baseline;
}
/* Swatches mirror the SVG bar fills: neutral slate for today, brand indigo for
   the projection, palest indigo (the focal series) for the increment. */
.roi-swatch-current { background-color: #64748b; }
.roi-swatch-projected { background-color: #8b8ff8; }
.roi-swatch-incremental { background-color: #c7d2fe; }

.roi-assumptions { color: rgba(255, 255, 255, .55); }
.roi-results-cta { border-top: 1px solid rgba(255, 255, 255, .1); }
.roi-results-cta p { color: rgba(255, 255, 255, .8); }
.roi-link-light { color: #a5b4fc; }
.roi-link-light:hover, .roi-link-light:focus { color: #c7d2fe; }

/* ---------- Form details ---------- */

.roi-legend {
  letter-spacing: .08em;
  font-size: .75rem;
  margin-bottom: .9rem;
  float: none;
  width: auto;
}

/* Error slots: hidden while empty, danger-colored when populated */
.roi-error {
  color: var(--si-danger, #ef4444);
  font-size: .8125rem;
  margin: .35rem 0 0;
}
.roi-error:empty { display: none; }

/* Tooltip trigger: 24px touch target, quiet until needed */
.roi-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--si-gray-600, #9397ad);
  font-size: 1rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
}
.roi-tip:hover { color: var(--si-primary, #6366f1); }
.roi-tip:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .25rem var(--si-focus-ring-color, rgba(99, 102, 241, .25));
}

/* Popover bubble (element is created by JS) */
.roi-tip-pop {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  max-width: min(280px, 82vw);
  background: #33354d;
  color: #fff;
  font-size: .8125rem;
  line-height: 1.5;
  padding: .65rem .85rem;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.125rem -.5rem rgba(11, 15, 25, .5);
  margin-top: .4rem;
}
.roi-tip-pop::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 1rem;
  width: 8px;
  height: 8px;
  background: #33354d;
  transform: rotate(45deg);
}

/* Scenario chips: equal thirds, selection is never color-only */
.roi-scenarios { display: flex; flex-wrap: wrap; gap: .5rem; }
.roi-scenario {
  flex: 1 1 0;
  min-width: 8.5rem;
  /* The theme's .btn is inline-flex, which would lay the label and hint out
     side by side; stack them instead. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .5rem .25rem;
  line-height: 1.35;
  white-space: normal;
  border-color: var(--si-gray-300, #d4d7e5);
  color: var(--si-gray-800, #33354d);
}
.roi-scenario .fs-xs { color: var(--si-gray-600, #9397ad); }
.roi-scenario:hover { border-color: var(--si-primary, #6366f1); }
.roi-scenario[aria-selected="true"] {
  --si-btn-color: #3e429f;
  --si-btn-bg: #eef0fd;
  --si-btn-border-color: var(--si-primary, #6366f1);
  --si-btn-hover-color: #3e429f;
  --si-btn-hover-bg: #eef0fd;
  --si-btn-hover-border-color: var(--si-primary, #6366f1);
  --si-btn-active-color: #3e429f;
  --si-btn-active-bg: #eef0fd;
  --si-btn-active-border-color: var(--si-primary, #6366f1);
  box-shadow: inset 0 0 0 1px var(--si-primary, #6366f1);
}
.roi-scenario[aria-selected="true"] .fw-semibold::before {
  /* #3e429f: deliberate darker-indigo step; theme has no third indigo token */
  content: "\2713\00a0" / "";
  color: #3e429f;
}
.roi-scenario[aria-selected="true"] .fs-xs { color: #3e429f; }
.roi-scenario:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .25rem var(--si-focus-ring-color, rgba(99, 102, 241, .25));
}
.roi-scenario[aria-selected="true"]:focus-visible {
  box-shadow: inset 0 0 0 1px var(--si-primary, #6366f1),
              0 0 0 .25rem var(--si-focus-ring-color, rgba(99, 102, 241, .25));
}

/* Focus rings on the dark panel need a lighter hue to stay visible */
.roi-results-card .btn-outline-light:focus-visible,
.roi-results-card a:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

/* ---------- Steps rail (How it works) ---------- */

.roi-steps { max-width: 860px; }
.roi-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 1.5rem;
  padding-bottom: 2.75rem;
}
.roi-step::before {
  content: "";
  position: absolute;
  left: 1.1875rem;
  top: 2.75rem;
  bottom: .25rem;
  width: 2px;
  background: #e4e7f5;
}
.roi-step-last { padding-bottom: 0; }
.roi-step-last::before { display: none; }
.roi-step-num {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #eef0fd;
  color: var(--si-primary, #6366f1);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roi-step-body { min-width: 0; }

.roi-steps code,
.roi-formula-table code {
  display: inline-block;
  background: #eef0fd;
  color: #3e429f;
  padding: .45rem .7rem;
  border-radius: .5rem;
  font-size: .875em;
}
.roi-formula-table th { font-weight: 600; }
.roi-formula-table { --bs-table-bg: transparent; }

/* Editorial note: hairline rule + small-caps kicker, no box */
.roi-note {
  border-top: 2px solid var(--si-gray-800, #33354d);
  padding-top: 1.25rem;
  margin-top: 2rem;
}
.roi-note-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--si-primary, #6366f1);
  margin-bottom: .5rem;
}
.roi-note-body { color: var(--si-gray-700, #565973); }
@media (min-width: 768px) {
  .roi-note { display: grid; grid-template-columns: 11rem 1fr; column-gap: 2.5rem; }
  .roi-note-label { margin-bottom: 0; padding-top: .2rem; }
}

/* ---------- Cards: inputs + metric groups ---------- */

.roi-input-card {
  border-radius: 1rem;
  border: 1px solid #e9ebf4;
  background: #fff;
}
.roi-icon-chip {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .75rem;
  background: #eef0fd;
  color: var(--si-primary, #6366f1);
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roi-metric-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.roi-metric-list li {
  padding: .45rem 0;
  font-size: .9375rem;
}
.roi-metric-list li + li { border-top: 1px solid #eef0f7; }

/* ---------- Ledger (worked example) ---------- */

.roi-ledger {
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e9ebf4;
}
.roi-ledger-title { letter-spacing: .1em; color: var(--si-gray-600, #9397ad); }
.roi-ledger-table {
  --bs-table-bg: transparent;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.roi-ledger-table td { padding-top: .55rem; padding-bottom: .55rem; }
.roi-ledger-total td {
  border-top: 2px solid #33354d;
  background: #eef0fd;
  color: #3e429f;
}

/* ---------- Checklists + mistakes ---------- */

.roi-checklist { padding-left: 0; }
.roi-checklist li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: .7rem;
}
.roi-checklist li > i {
  color: var(--si-success, #22c55e);
  font-size: 1.25rem;
  line-height: 1.35;
  flex-shrink: 0;
}

/* Themed group cards (costs + playbook share this family) */
.roi-group-card {
  background: #fff;
  border: 1px solid #e9ebf4;
  border-radius: 1rem;
  padding: 1.75rem;
}
.roi-group-card .roi-checklist li { font-size: .9375rem; }
.roi-group-card .roi-checklist li:last-child { margin-bottom: 0; }

/* Mistake cards: numbered, danger-accented */
.roi-mistakes { padding-left: 0; list-style: none; }
.roi-mistake-card {
  position: relative;
  background: #fff;
  border: 1px solid #e9ebf4;
  border-radius: 1rem;
  padding: 1.5rem 1.5rem 1.5rem 4rem;
  font-size: .9375rem;
}
.roi-mistake-num {
  position: absolute;
  top: 1.35rem;
  left: 1.25rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #fdeeee;
  color: var(--si-danger, #ef4444);
  font-weight: 700;
  font-size: .875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* "Not equals" distinction cards */
.roi-neq-card {
  background: #fff;
  border: 1px solid #e9ebf4;
  border-radius: 1rem;
  padding: 1.75rem;
}
.roi-neq-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--si-gray-800, #33354d);
  border-bottom: 1px solid #e4e7f5;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.roi-neq-sign {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--si-danger, #ef4444);
  line-height: 1;
}

/* Model-at-a-glance rail (right column of How It Works) */
.roi-glance {
  background: #fff;
  border: 1px solid #e9ebf4;
  border-radius: 1rem;
  padding: 1.75rem;
}
.roi-glance-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--si-gray-600, #9397ad);
  margin-bottom: 1.25rem;
}
.roi-glance-row {
  background: #f7f8fc;
  border: 1px solid #e9ebf4;
  border-radius: .65rem;
  padding: .75rem 1rem;
}
.roi-glance-formula {
  display: block;
  font-family: var(--si-font-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .75rem;
  color: #3e429f;
}
.roi-glance-label {
  display: block;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--si-gray-800, #33354d);
  margin-top: .15rem;
}
.roi-glance-arrow {
  color: var(--si-primary, #6366f1);
  font-weight: 700;
  padding: .4rem 0 .4rem 1rem;
}
.roi-glance-arrow span {
  font-size: .75rem;
  font-weight: 500;
  color: var(--si-gray-600, #9397ad);
}
.roi-glance-final {
  background: #eef0fd;
  border-color: var(--si-primary, #6366f1);
}

/* Definitions image: oversized, bleeding off the right edge (homepage idiom) */
.roi-bleed-section { overflow: hidden; overflow: clip; }
@media (min-width: 992px) {
  .roi-bleed-img { width: 130%; max-width: none; }
}

/* Use-case pill tabs + metric chips */
.roi-tabs { gap: .5rem; }
.roi-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  font-weight: 600;
  color: var(--si-gray-800, #33354d);
  background: #fff;
  border: 1px solid #e9ebf4;
  border-radius: 50rem;
  padding: .55rem 1.15rem;
}
.roi-tabs .nav-link i { font-size: 1.15rem; color: var(--si-primary, #6366f1); }
.roi-tabs .nav-link:hover { border-color: var(--si-primary, #6366f1); }
.roi-tabs .nav-link.active {
  background: var(--si-primary, #6366f1);
  border-color: var(--si-primary, #6366f1);
  color: #fff;
}
.roi-tabs .nav-link.active i { color: #fff; }
.roi-tab-content {
  background: #fff;
  border: 1px solid #e9ebf4;
  border-radius: 1rem;
  padding: 2rem;
}
.roi-tab-metrics .roi-chip { margin: 0 .4rem .5rem 0; }
.roi-chip {
  display: inline-block;
  background: #fff;
  border: 1px solid #dfe3f3;
  border-radius: 50rem;
  padding: .3rem .8rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #3e429f;
}

/* ---------- Validation methods ---------- */

.roi-method {
  border: 1px solid #e9ebf4;
  border-radius: 1rem;
  padding: 1.5rem;
  background: #fff;
}
.roi-method-rank {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--si-primary, #6366f1);
  margin-bottom: .4rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Mid-page CTA band ---------- */

.roi-cta-section { padding: 0; }
/* The band straddles the seam with the tinted section above: that section
   reserves extra bottom padding and the band pulls up over the boundary. */
.roi-has-overhang { padding-bottom: 9rem; }
@media (min-width: 992px) {
  .roi-has-overhang { padding-bottom: 11rem; }
}
.roi-cta-band { margin-top: -6rem; }
@media (min-width: 992px) {
  .roi-cta-band { margin-top: -6.5rem; }
}
.roi-cta-band {
  position: relative;
  overflow: hidden;
  overflow: clip;
  background-color: #0d1024;
  background-image: radial-gradient(ellipse 60% 80% at 15% 0%, rgba(99, 102, 241, .3), transparent 65%);
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
}
@media (min-width: 992px) {
  .roi-cta-band { padding: 3.25rem 3.5rem; }
  .roi-cta-formula { display: block; }
}
.roi-cta-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.roi-cta-sub { color: rgba(255, 255, 255, .65); max-width: 34rem; }
.roi-cta-formula {
  display: none;
  position: absolute;
  right: 2rem;
  bottom: 1.1rem;
  font-family: var(--si-font-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .07);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ---------- Wave dividers (one language, used at high-contrast seams) ---------- */

.roi-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 34px;
  line-height: 0;
  pointer-events: none;
}
@media (min-width: 992px) {
  .roi-wave { height: 56px; }
}
.roi-wave svg { display: block; width: 100%; height: 100%; }
.roi-wave-t { top: -1px; }
.roi-wave-b { bottom: -1px; transform: scaleY(-1); }
.roi-has-wave-t { position: relative; padding-top: calc(4rem + 34px); }
.roi-has-wave-b { position: relative; padding-bottom: calc(4rem + 34px); }
@media (min-width: 992px) {
  .roi-has-wave-t { padding-top: calc(5.5rem + 56px); }
  .roi-has-wave-b { padding-bottom: calc(5.5rem + 56px); }
}

/* ---------- Dark proof band ---------- */

.roi-dark-band {
  background-color: #0d1024;
  background-image: radial-gradient(ellipse 55% 60% at 80% 10%, rgba(99, 102, 241, .18), transparent 65%);
}
.roi-dark-lede { color: rgba(255, 255, 255, .75); font-size: 1.125rem; }
.roi-proof-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1rem;
  padding: 1.75rem;
}
.roi-proof-num {
  display: block;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  color: #a5b4fc;
  font-variant-numeric: tabular-nums;
  margin-bottom: .4rem;
}
.roi-proof-what {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.roi-proof-cat { font-size: .8125rem; color: rgba(255, 255, 255, .45); }
.roi-proof-copy { color: rgba(255, 255, 255, .75); }

/* ---------- Motion (opt-in: reduced-motion users get none) ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Bar growth pairs with the JS count-up tween (also reduced-motion aware) */
  #roi-chart rect[data-roi-bar] { transition: width .4s ease-out; }

  .roi-tip-pop { animation: roi-tip-in .15s ease-out; }
  @keyframes roi-tip-in {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: none; }
  }

  .roi-scenario { transition: border-color .15s ease, background-color .15s ease; }
  .roi-input-card { transition: transform .2s ease, box-shadow .2s ease; }
  .roi-input-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px rgba(13, 16, 36, .18); }
}