/* ==========================================================================
   ROI / business case calculator
   Shared by /en/, /fr/ and /de/. Tokens mirror the inline styles on those
   pages: Poppins headlines, Inter body, #101828 navy, #D9789A pink accent,
   #3F7D4E / #4F9160 indigo, 16-20px radii, soft rgba(16,24,40,.08) borders.
   ========================================================================== */

.roi-section {
  background: #ffffff;
  padding: 88px 2rem 100px;
}

.roi-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.roi-eyebrow {
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 12px;
}

.roi-headline {
  font: 800 clamp(26px, 3.5vw, 38px)/1.15 Poppins, Inter, sans-serif;
  color: #111827;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.roi-sub {
  font: 400 16.5px/1.65 Inter, sans-serif;
  color: #475569;
}

.roi-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 26px;
  align-items: start;
}

/* ------------------------------------------------------------- panels --- */

.roi-panel {
  background: #ffffff;
  border: 1px solid rgba(16,24,40, 0.09);
  border-radius: 16px;
  padding: 30px 32px 28px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 34px -18px rgba(16,24,40, 0.16);
}

.roi-panel-title {
  font: 700 16px/1.25 Poppins, Inter, sans-serif;
  color: #101828;
  margin-bottom: 4px;
}

.roi-panel-hint {
  font: 400 13px/1.55 Inter, sans-serif;
  color: #64748b;
  margin-bottom: 24px;
}

/* ------------------------------------------------------------ controls -- */

.roi-control { margin-bottom: 22px; }

.roi-control-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.roi-label {
  font: 600 13px/1.35 Inter, sans-serif;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}

.roi-value {
  font: 700 14px/1 Inter, sans-serif;
  color: #101828;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tooltip trigger — explains a formula or an assumption. */
.roi-info {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  flex-shrink: 0;
  background: #eef2f7;
  color: #64748b;
  font: 700 10px/15px Inter, sans-serif;
  cursor: help;
  position: relative;
}
.roi-info:hover, .roi-info:focus-visible { background: #DBE7F8; color: #33683F; }
.roi-info:focus-visible { outline: 2px solid #4F9160; outline-offset: 2px; }
.roi-info::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 250px;
  background: #101828;
  color: #fff;
  font: 400 11.5px/1.5 Inter, sans-serif;
  text-align: left;
  border-radius: 8px;
  padding: 8px 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  z-index: 5;
  pointer-events: none;
}
.roi-info:hover::after, .roi-info:focus-visible::after { opacity: 1; visibility: visible; }

/* The tooltip is centred on a 15px button and up to 250px wide, so it hangs
   ~117px past each side. It is absolutely positioned and hidden, but a hidden
   absolutely-positioned box still contributes scrollable overflow — which gave
   the whole page 34px of horizontal scroll at 375px, tooltip never opened.
   Anchoring its right edge to the button below tablet makes it open inward
   instead, and the page stops scrolling sideways. */
@media (max-width: 900px) {
  .roi-info::after {
    left: auto;
    right: 0;
    translate: 0 0;
    max-width: min(250px, 72vw);
  }
}

/* Range sliders */
.roi-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: #e9e7f5;
  outline: none;
  margin: 0;
}
.roi-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #3F7D4E;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(16,24,40, 0.32);
  cursor: pointer;
  transition: transform 0.12s;
}
.roi-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.roi-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #3F7D4E;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(16,24,40, 0.32);
  cursor: pointer;
}
.roi-range:focus-visible { outline: 2px solid #4F9160; outline-offset: 4px; }

/* Shown only when the entered trade investment exceeds what the revenue can
   credibly support. The estimate is computed on the capped figure, so saying
   so here is the difference between a guardrail and a silent substitution. */
.roi-cap-note {
  margin: 6px 0 0;
  font: 400 12px/1.45 Inter, sans-serif;
  color: #B54708;
}
.roi-cap-note[hidden] { display: none; }

.roi-range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font: 500 11px/1 Inter, sans-serif;
  color: #94a3b8;
}

/* Segmented three-state selectors */
.roi-segment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: #f5f4fb;
  border-radius: 10px;
  padding: 4px;
}
/* Five maturity levels; the label text wraps rather than the row. */
.roi-segment[data-roi-segment="fragmentation"] { grid-template-columns: repeat(5, 1fr); }
.roi-segment-btn {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 9px 6px;
  font: 600 12.5px/1.25 Inter, sans-serif;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.roi-segment-btn:hover { color: #33683F; }
.roi-segment-btn:focus-visible { outline: 2px solid #4F9160; outline-offset: 2px; }
/* The scenario now sets the headline rate (3% / 5% / 7.5%), so which one is
   active has to be unmistakable, not merely a lighter pill. */
.roi-segment-btn[aria-checked="true"] {
  background: #ffffff;
  color: #101828;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(16,24,40, 0.14);
}
.roi-segment[data-roi-segment="scenario"] .roi-segment-btn[aria-checked="true"] {
  color: #33683F;
  box-shadow: 0 1px 3px rgba(16,24,40, 0.14), inset 0 0 0 1px rgba(63,125,78,0.35);
}

/* One line explaining the active scenario, where the choice is made. All
   three are in the markup and one is shown, so the text is correct with the
   script absent — it just does not follow the selection. */
.roi-scenario-notes { margin-top: 9px; min-height: 15px; }
.roi-scenario-note {
  font: 400 12px/1.25 Inter, sans-serif;
  color: #64748b;
}
.roi-scenario-note:not(.is-on) { display: none; }
/* Before the script runs, show the default scenario's line rather than none. */
.roi-scenario-notes:not(.is-live) .roi-scenario-note[data-roi-scenario-note="expected"] {
  display: inline;
}

/* Advanced assumptions */
.roi-advanced {
  margin-top: 26px;
  border-top: 1px solid rgba(16,24,40, 0.08);
  padding-top: 18px;
}
.roi-advanced > summary {
  font: 600 13px/1 Inter, sans-serif;
  color: #33683F;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
}
.roi-advanced > summary::-webkit-details-marker { display: none; }
.roi-advanced > summary::before {
  content: "▸";
  font-size: 11px;
  transition: rotate 0.15s;
}
.roi-advanced[open] > summary::before { rotate: 90deg; }
.roi-advanced > summary:focus-visible { outline: 2px solid #4F9160; outline-offset: 3px; border-radius: 4px; }
.roi-advanced-body { padding-top: 20px; }
.roi-advanced-note {
  font: 400 11.5px/1.55 Inter, sans-serif;
  color: #94a3b8;
  margin-top: 4px;
}

/* ------------------------------------------------------------- results -- */

.roi-results { display: flex; flex-direction: column; gap: 16px; }

.roi-summary {
  background: #eef5ed;
  border: 1px solid rgba(63,125,78, 0.16);
  border-radius: 16px;
  padding: 28px 30px 26px;
}
.roi-summary-label {
  font: 700 10.5px/1 Inter, sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #6d6a9c;
  margin-bottom: 12px;
}
.roi-summary-value {
  font: 800 clamp(34px, 5vw, 52px)/1 Poppins, Inter, sans-serif;
  color: #101828;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.roi-summary-sub {
  font: 400 13.5px/1.55 Inter, sans-serif;
  color: #475569;
}
.roi-summary-opportunity {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(63,125,78, 0.14);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font: 400 12.5px/1.5 Inter, sans-serif;
  color: #6d6a9c;
}
.roi-summary-opportunity strong {
  font: 600 13px/1.5 Inter, sans-serif;
  color: #3f3c73;
  font-variant-numeric: tabular-nums;
}

/* Three value pools */
.roi-pools { display: flex; flex-direction: column; gap: 10px; }

.roi-pool {
  background: linear-gradient(160deg, #FFFFFF 0%, var(--roi-pool-tint, #F6F7F2) 100%);
  border: 1px solid rgba(16,24,40, 0.09);
  border-left: 3px solid var(--roi-pool-accent, #3F7D4E);
  border-radius: 12px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
}
/* One colour per value driver, used for the card's edge and ground, its name,
   and its bar in the breakdown, so a figure and its bar are recognisably the
   same thing. All three were previously blue, which made the bars decorative
   rather than informative.

   Desaturated on purpose: these sit next to each other on a white panel, and
   three saturated hues would compete with the numbers they describe.
   --accent draws the edge and the bar, --tint is the card ground, --ink is the
   name, darkened enough to stay readable on the tint. */
.roi-pool--optimization {
  --roi-pool-accent: #3F7D4E;   /* brand blue */
  --roi-pool-tint:   #F2F6FE;
  --roi-pool-ink:    #33683F;
}
.roi-pool--efficiency {
  --roi-pool-accent: #6B72B8;   /* muted periwinkle */
  --roi-pool-tint:   #F3F3FB;
  --roi-pool-ink:    #4A50A0;
}
.roi-pool--growth {
  --roi-pool-accent: #3E8E7E;   /* muted teal */
  --roi-pool-tint:   #EFF7F4;
  --roi-pool-ink:    #2E6F61;
}

.roi-pool-name {
  font: 600 13.5px/1.3 Inter, sans-serif;
  color: var(--roi-pool-ink, #101828);
}
.roi-pool-value {
  font: 700 19px/1 Poppins, Inter, sans-serif;
  color: #101828;
  font-variant-numeric: tabular-nums;
  justify-self: end;
  white-space: nowrap;
}
.roi-pool-desc {
  grid-column: 1 / -1;
  font: 400 12px/1.5 Inter, sans-serif;
  color: #64748b;
}

/* The arithmetic behind the figure above it: investment x rate = value.
   Monospaced digits so the three terms line up as the sliders move, and set
   quietly enough that it reads as a footnote to the number rather than
   competing with it. */
.roi-pool-calc {
  grid-column: 1 / -1;
  margin-top: 2px;
  font: 500 11.5px/1.5 Inter, sans-serif;
  color: #475569;
  font-variant-numeric: tabular-nums;
}
.roi-pool-calc span[data-roi], .roi-pool-calc strong { color: #101828; }
.roi-pool-calc strong { font-weight: 700; }

/* "x" and "=" are read aloud as words; the glyphs are decorative. */
.roi-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Where the value comes from */
.roi-breakdown {
  background: #fff;
  border: 1px solid rgba(16,24,40, 0.09);
  border-radius: 12px;
  padding: 18px 20px;
}
.roi-breakdown-title {
  font: 700 10.5px/1 Inter, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 14px;
}
.roi-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}
.roi-breakdown-row:last-child { margin-bottom: 0; }
.roi-breakdown-label {
  font: 500 12px/1.3 Inter, sans-serif;
  color: var(--roi-pool-ink, #475569);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roi-breakdown-track {
  height: 8px;
  border-radius: 4px;
  background: #eef2f7;
  overflow: hidden;
}
.roi-breakdown-fill {
  /* The track is a grid item so it blockifies automatically; this span is a
     plain inline child, and width/height do not apply to inline elements.
     Without display:block the bar renders 0x0 with the correct colour. */
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--roi-pool-accent, #3F7D4E);
  transition: width 0.35s ease;
}
.roi-breakdown-pct {
  font: 600 12px/1 Inter, sans-serif;
  color: #64748b;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ROI + payback */
.roi-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.roi-kpi {
  background: #fff;
  border: 1px solid rgba(16,24,40, 0.09);
  border-radius: 12px;
  padding: 16px 18px;
}
.roi-kpi-label {
  font: 700 10.5px/1 Inter, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}
.roi-kpi-value {
  font: 700 24px/1 Poppins, Inter, sans-serif;
  color: #101828;
  font-variant-numeric: tabular-nums;
}
.roi-kpi-unit {
  font: 500 13px/1 Inter, sans-serif;
  color: #64748b;
}
.roi-disclaimer {
  font: 400 11.5px/1.6 Inter, sans-serif;
  color: #94a3b8;
  max-width: 1400px;
  margin: 20px auto 0;
  text-align: center;
}

/* ----------------------------------------------------------- CTA panel -- */

.roi-cta {
  max-width: 1400px;
  margin: 36px auto 0;
  background: #101828;
  border-radius: 16px;
  padding: 38px 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 40px;
  align-items: center;
}
.roi-cta-title {
  font: 800 22px/1.25 Poppins, Inter, sans-serif;
  color: #fff;
  margin-bottom: 8px;
}
.roi-cta-copy {
  font: 400 14.5px/1.65 Inter, sans-serif;
  color: rgba(255, 255, 255, 0.7);
  max-width: 620px;
}
.roi-cta-action { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.roi-cta-btn {
  /* Inverted, because this button sits on the dark .roi-cta panel. It used to
     be #101828 on a #101828 ground with no border and no shadow, which made
     the site's most important call to action invisible: the label read as a
     line of white text, not something to press. Dark-on-light everywhere else,
     light-on-dark here. */
  appearance: none;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #101828;
  font: 700 14px/1 Inter, sans-serif;
  padding: 15px 28px;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16), 0 8px 20px -12px rgba(0, 0, 0, 0.55);
}
.roi-cta-btn:hover {
  background: #F2F4F7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.2), 0 12px 26px -12px rgba(0, 0, 0, 0.6);
}
.roi-cta-btn:active { transform: none; }
.roi-cta-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.roi-cta-support {
  font: 400 12px/1.4 Inter, sans-serif;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

/* Snapshot of the numbers carried into the lead form. */
.roi-form-snapshot {
  background: #f6f7f2;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.roi-form-snapshot-title {
  font: 700 10.5px/1 Inter, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 10px;
}
.roi-form-snapshot-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 400 12.5px/1.7 Inter, sans-serif;
  color: #64748b;
}
.roi-form-snapshot-row strong {
  font-weight: 600;
  color: #101828;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 980px) {
  .roi-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .roi-cta { grid-template-columns: minmax(0, 1fr); padding: 30px 26px; }
  .roi-cta-action { align-items: stretch; }
}

@media (max-width: 640px) {
  .roi-section { padding: 60px 1.25rem 72px; }
  .roi-panel { padding: 22px 18px 20px; border-radius: 16px; }
  .roi-summary { padding: 22px 20px 20px; border-radius: 16px; }
  .roi-summary-opportunity { flex-direction: column; gap: 2px; }
  .roi-kpis { grid-template-columns: 1fr; }
  .roi-breakdown-row { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) 34px; gap: 8px; }
  .roi-cta { border-radius: 16px; }
  /* Bigger hit area for touch */
  .roi-range { height: 6px; }
  .roi-range::-webkit-slider-thumb { width: 23px; height: 23px; }
  .roi-segment-btn { padding: 10px 4px; font-size: 12px; }
  /* Five labels cannot share one phone-width row; stack them. */
  .roi-segment[data-roi-segment="fragmentation"] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .roi-breakdown-fill { transition: none; }
  .roi-range::-webkit-slider-thumb { transition: none; }
}

/* ------------------------------------------------------------------------
   Business-case request: the visitor confirms the inputs reflect their own
   business before we build a case around them. `required` gates submission
   through the form's existing checkValidity() call.
   ------------------------------------------------------------------------ */
.bc-confirm {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 16px; padding: 12px 14px;
  background: #f5f6fb; border: 1px solid #E4E9EF; border-radius: 10px;
}
.bc-confirm input[type="checkbox"] {
  width: 17px; height: 17px; margin: 1px 0 0; flex-shrink: 0;
  accent-color: #3F7D4E; cursor: pointer;
}
.bc-confirm label {
  font: 400 12.5px/1.5 Inter, system-ui, sans-serif; color: #4b5266; cursor: pointer;
}
.bc-confirm input:focus-visible { outline: 3px solid #3F7D4E; outline-offset: 2px; }
/* make the unmet requirement obvious rather than only announced by the browser */
.bc-confirm input:invalid:not(:focus) ~ label { color: #64748b; }

/* ---------------------------------------------------- lead value driver ----
   Trade optimization is the most defensible of the three terms — a stated rate
   applied to a figure the reader typed in — so it leads the results and is set
   one step heavier than its neighbours. The difference is weight and ground,
   not another card: the three still read as one family. */
.roi-pool--lead {
  /* The lead treatment is weight and ground, not a different colour: it uses
     whichever driver is ranked first, so the emphasis follows the ranking. */
  background: linear-gradient(160deg, #FFFFFF 0%, var(--roi-pool-tint, #F6F7F2) 100%);
  border-color: rgba(63,125,78,0.22);
  border-color: color-mix(in srgb, var(--roi-pool-accent, #3F7D4E) 24%, transparent);
  border-left-width: 4px;
  padding: 19px 20px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 14px 32px -24px rgba(16,24,40,0.34);
}
.roi-pool--lead .roi-pool-name { font-size: 14.5px; }
.roi-pool--lead .roi-pool-value { font-size: 25px; letter-spacing: -0.02em; }

/* The rate that produced the figure, shown next to the name so the arithmetic
   is checkable at a glance: investment x this = the number on the right. */
.roi-pool-rate {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(63,125,78,0.10);
  background: color-mix(in srgb, var(--roi-pool-accent, #3F7D4E) 10%, transparent);
  border: 1px solid rgba(63,125,78,0.20);
  border: 1px solid color-mix(in srgb, var(--roi-pool-accent, #3F7D4E) 22%, transparent);
  color: var(--roi-pool-ink, #33683F);
  font: 700 11px/1.35 Inter, sans-serif;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}

/* Growth is real but the least measurable of the three, and says so. */
.roi-pool-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #F6F7F2;
  border: 1px solid rgba(16,24,40,0.10);
  color: #667085;
  font: 600 10px/1.35 Inter, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 1px;
}

@media (max-width: 560px) {
  .roi-pool--lead { padding: 16px 16px; }
  .roi-pool--lead .roi-pool-value { font-size: 21px; }
  .roi-pool-rate, .roi-pool-tag { margin-left: 6px; }
}