/* Cost calculator page: dark product-hero treatment from #kurzprofil. */

body.robotics-page--cost-calculator {
  background: var(--cr-dark, #0e1117);
  color: rgba(245, 247, 250, 0.96);
  overflow-x: clip;
  max-width: 100%;
}

.cost-calculator-page {
  overflow-x: clip;
  max-width: 100%;
  padding-top: calc(var(--header-offset, 96px) + 1.75rem);
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-height: 100svh;
  background: var(--cr-dark, #0e1117);
}

.cost-calculator-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 22% 20%, rgba(var(--primary-rgb), 0.28) 0%, rgba(var(--primary-rgb), 0.08) 45%, transparent 75%),
    linear-gradient(160deg, #0e1117 0%, #091322 58%, #0e1117 100%);
  animation: product-hero-glow 10s ease-in-out infinite alternate;
}

.cost-calculator-breadcrumbs {
  width: min(1200px, calc(100% - 3rem));
  margin-inline: auto;
  padding: 0;
}

.cost-calculator-breadcrumbs .breadcrumbs ol {
  margin: 0;
}

.cost-calculator-breadcrumbs .breadcrumbs {
  color: rgba(244, 248, 252, 0.5);
}
.cost-calculator-breadcrumbs .breadcrumbs li + li::before { color: rgba(244, 248, 252, 0.32); }
.cost-calculator-breadcrumbs .breadcrumbs a { color: rgba(244, 248, 252, 0.68); }
.cost-calculator-breadcrumbs .breadcrumbs a:hover,
.cost-calculator-breadcrumbs .breadcrumbs a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}
.cost-calculator-breadcrumbs .breadcrumbs [aria-current="page"] { color: rgba(255, 255, 255, 0.88); }

.cost-calculator-note {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.cost-calculator-note__inner {
  max-width: 72ch;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(244, 248, 252, 0.55);
}

.cost-calculator-note__disclaimer,
.cost-calculator-note__assumptions {
  margin: 0 0 0.5rem;
}

.cost-calculator-note__assumptions {
  margin-bottom: 0;
}

/* The standalone page already provides the full dark hero surface. */
.cost-calculator-page .cr-roi::before {
  display: none;
}

.cost-calculator-page .cr-roi {
  width: min(1180px, calc(100% - 3rem));
  padding-top: clamp(1.25rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.cost-calculator-page .cr-roi .cr-section-header {
  max-width: 64rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  text-align: left;
}

.cost-calculator-page .cr-roi .cr-section-title {
  max-width: none;
  margin-inline: 0;
  font-size: clamp(1.35rem, 0.8vw + 1.05rem, 1.85rem);
  line-height: 1.15;
}

.cost-calculator-page .cr-roi .cr-section-subtitle {
  display: none;
}

.cost-calculator-page .cr-roi__intro {
  max-width: 64rem;
  margin: 0.4rem auto clamp(6rem, 12vw, 9rem);
  color: rgba(244, 248, 252, 0.78);
  font-size: clamp(0.92rem, 0.25vw + 0.86rem, 1rem);
  line-height: 1.6;
}

.cost-calculator-page .cr-roi__intro-title {
  margin: 0 0 0.6rem;
  color: rgba(245, 247, 250, 0.96);
  font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
}

.cost-calculator-page .cr-roi__intro p {
  margin: 0 0 0.7rem;
}

.cost-calculator-page .cr-roi__intro-list {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
}

.cost-calculator-page .cr-roi__intro-list li {
  margin-bottom: 0.3rem;
}

.cost-calculator-page .cr-roi__intro-list li::marker {
  color: var(--primary);
}

.cost-calculator-page .cr-roi__intro mark {
  background: transparent;
  color: var(--primary);
  font-weight: 600;
  padding: 0;
}

.cost-calculator-page .cr-roi__intro p.cr-roi__intro-cta-wrap {
  margin: 1.6rem 0 0;
  text-align: left;
}

.cost-calculator-page .cr-roi__intro-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--primary);
  color: #0e1117;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cost-calculator-page .cr-roi__intro-cta:hover,
.cost-calculator-page .cr-roi__intro-cta:focus-visible {
  background: rgba(var(--primary-rgb), 0.85);
  transform: translateY(-1px);
}

.cost-calculator-page .cr-roi__steps {
  display: none;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  color: rgba(244, 248, 252, 0.64);
  font-size: 0.82rem;
}

.cost-calculator-page .cr-roi__steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem 0.35rem 0;
}

.cost-calculator-page .cr-roi__steps span {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid rgba(var(--primary-rgb), 0.58);
  border-radius: 50%;
  color: var(--primary);
  font-family: 'Roboto Mono', 'RobotoMono', ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1;
}

.cost-calculator-page .cr-roi__step-index {
  color: var(--primary);
  font-family: 'Roboto Mono', 'RobotoMono', ui-monospace, monospace;
  font-size: clamp(1.15rem, 0.8vw + 0.95rem, 1.45rem);
  font-weight: 700;
  line-height: 1;
}

.cost-calculator-page .cr-roi__panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(0.85rem, 1.4vw, 1.2rem);
  color: rgba(244, 248, 252, 0.72);
}

.cost-calculator-page .cr-roi__panel-title span:last-child {
  min-width: 0;
}

.cost-calculator-page .cr-roi__field {
  margin-bottom: clamp(0.85rem, 1.3vw, 1.15rem);
}

.cost-calculator-page .cr-roi__label {
  display: block;
  margin-bottom: 0.32rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 248, 252, 0.55);
}

.cost-calculator-page .cr-roi__layout .cr-roi__select,
.cost-calculator-page .cr-roi__layout .cr-roi__number {
  font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.05rem);
  font-weight: 600;
  color: var(--primary);
}

.cost-calculator-page .cr-roi__layout .cr-roi__select {
  color-scheme: dark;
}

.cost-calculator-page .cr-roi__layout .cr-roi__select {
  color-scheme: dark;
}

.cost-calculator-page .cr-roi__layout .cr-roi__select option {
  padding: 0.6rem 0.85rem;
  background-color: #0e1117;
  color: rgba(245, 247, 250, 0.92);
  font-weight: 500;
  font-family: 'Inter', system-ui, sans-serif;
}

.cost-calculator-page .cr-roi__layout .cr-roi__select option:checked {
  background: linear-gradient(0deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.18)), #0e1117;
  color: var(--primary);
  font-weight: 600;
}

.cost-calculator-page .cr-roi__hint {
  min-height: 0;
}

.cost-calculator-page .cr-roi__robot-cell {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.cost-calculator-page .cr-roi__product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 1.25rem;
  border-radius: 0.6rem;
  background: rgba(var(--primary-rgb), 0.16);
  border: 1px solid rgba(var(--primary-rgb), 0.55);
  color: #ffd9a3;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.cost-calculator-page .cr-roi__product-cta:hover,
.cost-calculator-page .cr-roi__product-cta:focus-visible {
  background: rgba(var(--primary-rgb), 0.32);
  color: #fff;
  border-color: rgba(var(--primary-rgb), 0.9);
  text-decoration: none;
  outline: none;
  transform: translateY(-1px);
}

.cost-calculator-page .cr-roi__panel {
  position: relative;
  padding: 1.8rem 1.4rem;
  border-radius: 1rem;
}

.cost-calculator-page .cr-roi__panel-preview {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  pointer-events: none;
  opacity: 0.95;
}

.cost-calculator-page .cr-roi__panel-preview-img {
  height: 120px;
  width: 138px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

/* Beetle: source image carries a flag pole at the top that compresses the
   robot vertically. Crop the top off and scale the visible body up. */
.cost-calculator-page .cr-roi__panel-preview-img[data-roi-key="beetle"] {
  height: 162px;
  width: 175px;
  object-fit: cover;
  object-position: center 80%;
}

/* CD-01 is shot in portrait orientation, so contain renders it taller
   than its actual physical footprint. Shrink the bounding box. */
.cost-calculator-page .cr-roi__panel-preview-img[data-roi-key="cd-01"] {
  height: 98px;
  width: 75px;
}

.cost-calculator-page .cr-roi__panel-preview-plus {
  align-self: center;
  color: rgba(244, 248, 252, 0.5);
  font-size: 0.85rem;
  font-weight: 400;
}

.cost-calculator-page .cr-roi__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 3px solid #EF9F27;
  border-radius: inherit;
  pointer-events: none;
}

.cost-calculator-page .cr-roi__layout .cr-roi__panel,
.cost-calculator-page .cr-roi__layout .cr-roi__results-inner,
.cost-calculator-page .cr-roi__layout .cr-roi__hero-result,
.cost-calculator-page .cr-roi__layout .cr-roi__metric {
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cost-calculator-page .cr-roi__layout .cr-roi__hero-result::before {
  display: none;
}

.cost-calculator-page .cr-roi__layout .cr-roi__panel,
.cost-calculator-page .cr-roi__layout .cr-roi__results-inner {
  --cr-text: rgba(245, 247, 250, 0.96);
  --cr-muted: rgba(244, 248, 252, 0.58);
  --cr-border: rgba(255, 255, 255, 0.18);
  color: var(--cr-text);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.cost-calculator-page .cr-roi__layout .cr-roi__panel:hover,
.cost-calculator-page .cr-roi__layout .cr-roi__results-inner:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.cost-calculator-page .cr-roi__layout .cr-roi__results-inner {
  border-radius: 1rem;
  padding: 1.8rem 1.4rem;
}

.cost-calculator-page .cr-roi__layout .cr-roi__number {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.cost-calculator-page .cr-roi__layout .cr-roi__select {
  position: relative;
  max-width: 22rem;
  padding: 0.65rem 2.5rem 0.65rem 0.85rem;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.55rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.cost-calculator-page .cr-roi__layout .cr-roi__select:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--primary-rgb), 0.45);
}

.cost-calculator-page .cr-roi__method-row {
  max-width: 22rem;
}

.cost-calculator-page .cr-roi__method-row .cr-roi__select {
  max-width: none;
}

.cost-calculator-page .cr-roi__layout .cr-roi__tab,
.cost-calculator-page .cr-roi__layout .cr-roi__service-option,
.cost-calculator-page .cr-roi__layout .cr-roi__service-option.is-locked {
  background: transparent;
  box-shadow: none;
}

.cost-calculator-page .cr-roi__layout .cr-roi__tab.is-active {
  background: transparent;
  border-color: var(--cr-primary);
  color: var(--cr-text);
}

.cost-calculator-page .cr-roi__layout .cr-roi__tab:hover,
.cost-calculator-page .cr-roi__layout .cr-roi__service-option:hover {
  background: transparent;
}

.cost-calculator-page .cr-roi__layout .cr-roi__number {
  border: 1px solid rgba(var(--primary-rgb), 0.32);
}

.cost-calculator-page .cr-roi__layout .cr-roi__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EF9F27' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 11px 7px;
}

.cost-calculator-page .cr-roi__layout .cr-roi__number:focus {
  border-color: rgba(var(--primary-rgb), 0.72);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.12);
}

.cost-calculator-page .cr-roi__layout .cr-roi__select:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(var(--primary-rgb), 0.7);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16);
}

body.robotics-page--cost-calculator .footer {
  position: relative;
  z-index: 2;
}

@media (min-width: 901px) {
  /* Inputs: facility + cleaning stacked in column 1, robot in column 2
     spanning both rows. Result: full-width row below, centered and
     capped so it reads as an answer card, not a banner. */

  .cost-calculator-page .cr-roi__layout {
    grid-template-columns: minmax(0, 20rem) minmax(0, 20rem) minmax(0, 1fr);
    column-gap: clamp(0.75rem, 1.5vw, 1.25rem);
    row-gap: clamp(1.25rem, 2.4vw, 2rem);
    align-items: stretch;
  }

  .cost-calculator-page .cr-roi__panel--facility,
  .cost-calculator-page .cr-roi__robot-cell {
    width: 100%;
    max-width: 20rem;
  }

  .cost-calculator-page .cr-roi__panel--facility .cr-roi__field {
    margin-bottom: clamp(1.4rem, 2.2vw, 1.9rem);
  }

  .cost-calculator-page .cr-roi__panel--facility .cr-roi__field:last-child {
    margin-bottom: 0;
  }

  .cost-calculator-page .cr-roi__results {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
    align-self: start;
    position: sticky;
    top: calc(var(--header-offset, 96px) + 1rem);
  }

  .cost-calculator-page .cr-roi__layout .cr-roi__results-inner {
    padding: clamp(1.25rem, 1.7vw, 1.6rem) clamp(1rem, 1.5vw, 1.4rem);
    gap: clamp(1.1rem, 1.5vw, 1.4rem);
    /* Bound the result card and centre it within column 3. As the
       viewport grows the column expands while the card stays narrow,
       so the result drifts toward the layout centre instead of
       sticking to the right edge. */
    max-width: clamp(18rem, 28vw, 26rem);
    margin-inline: auto;
  }

  /* Cap upper bound so the value (e.g. "1.125 €*") never overflows the
     narrow result column at the 901-1100px range, where col 3 is ~180px. */
  .cost-calculator-page .cr-roi__hero-value {
    font-size: clamp(2.5rem, 4vw, 3.4rem);
  }

  .cost-calculator-page .cr-roi__layout .cr-roi__cta {
    width: auto;
    max-width: 100%;
    margin-top: 0;
    padding: 0.85rem 1.6rem;
    font-size: 0.95rem;
    min-height: 3rem;
  }

  .cost-calculator-page .cr-roi__layout .cr-roi__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: 30rem;
    margin-inline: auto;
  }

  .cost-calculator-page .cr-roi__layout .cr-roi__metric {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.1rem;
    padding: 0.15rem 0.5rem;
    border: none;
    background: transparent;
  }

  .cost-calculator-page .cr-roi__layout .cr-roi__metric + .cr-roi__metric {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .cost-calculator-page .cr-roi__layout .cr-roi__metric-value {
    font-size: clamp(0.88rem, 0.25vw + 0.82rem, 1rem);
    white-space: normal;
  }

  .cost-calculator-page .cr-roi__layout .cr-roi__metric-label {
    margin-left: 0;
    text-align: center;
    font-size: clamp(0.58rem, 0.15vw + 0.55rem, 0.65rem);
    opacity: 0.75;
  }

  .cost-calculator-page .cr-roi__cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }

  .cost-calculator-page .cr-roi__layout .cr-roi__cta--ghost {
    margin-top: 0;
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    border-color: rgba(255, 255, 255, 0.18);
  }
}

.cost-calculator-page .cr-roi__assumptions {
  margin-top: 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 0.8rem;
}

.cost-calculator-page .cr-roi__results-inner {
  gap: clamp(1rem, 2vw, 1.45rem);
}

/* ── Hero — vertical centered stack ─────────────────────────────────────
   Eyebrow → Value → Label → Comparison, then the CTA below. Spacing is
   controlled by margins between elements (hero-result and hero-main gap
   are zeroed) so the rhythm reads cleanly card → eyebrow → result. */
.cost-calculator-page .cr-roi__hero-result {
  padding: 0;
  gap: 0;
  text-align: center;
}

.cost-calculator-page .cr-roi__hero-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.cost-calculator-page .cr-roi__hero-label {
  flex-basis: auto;
  margin: 0;
  font-size: clamp(0.82rem, 0.25vw + 0.78rem, 0.94rem);
  letter-spacing: 0.13em;
  color: rgba(var(--cr-primary-rgb), 0.92);
}

.cost-calculator-page .cr-roi__hero-value {
  margin-top: 0.75rem;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 1;
}

.cost-calculator-page .cr-roi__hero-value[data-mark]::after {
  content: attr(data-mark);
  color: inherit;
  font-weight: 700;
  font-size: 0.5em;
  vertical-align: 0.7em;
  margin-left: 0.05em;
}

.cost-calculator-page .cr-roi__hero-period {
  margin-top: 0.35rem;
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.18rem);
  color: rgba(244, 248, 252, 0.72);
}

/* Comparison line — accent benefit row separated from the hero label. */
.cost-calculator-page .cr-roi__hero-meta {
  justify-content: center;
  margin-top: 1rem;
}
.cost-calculator-page .cr-roi__hero-meta-item {
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.14rem);
  font-weight: 600;
  color: var(--roi-accent-strong, #4ade80);
  letter-spacing: 0.005em;
}

.cost-calculator-page .cr-roi__metrics {
  gap: 0.7rem;
}

.cost-calculator-page .cr-roi__metric {
  padding: 0;
}

.cost-calculator-page .cr-roi__cta {
  margin-top: 0;
}

/* Cost-breakdown header */
.cost-calculator-page .cr-roi__details {
  gap: 0.4rem;
  padding-top: 0;
  border-top: none;
}
.cost-calculator-page .cr-roi__details-title {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(244, 248, 252, 0.55);
}

/* Summary row anchors the math: the same number that sits in the hero. */
.cost-calculator-page .cr-roi__details-row--summary {
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  font-size: clamp(0.82rem, 0.3vw + 0.78rem, 0.95rem);
}
.cost-calculator-page .cr-roi__details-row--summary dt {
  color: rgba(245, 247, 250, 0.92);
  font-weight: 600;
}
.cost-calculator-page .cr-roi__details-row--summary dd {
  color: var(--cr-primary, #f3992c);
  font-weight: 700;
}
.cost-calculator-page .cr-roi__details-row--summary[data-negative="true"] dd {
  color: #f87171;
}
.cost-calculator-page .cr-roi__details-row--summary dd[data-mark]::after {
  content: attr(data-mark);
  color: inherit;
  font-weight: 700;
  font-size: 0.6em;
  vertical-align: 0.55em;
  margin-left: 0.1em;
}

/* KPI extras row (sits below the cost breakdown) */
.cost-calculator-page .cr-roi__extras {
  margin-top: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 900px) {
  html,
  body.robotics-page--cost-calculator {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    touch-action: pan-y;
  }

  /* Static padding-top + static sticky-top for the cards. Both used to
     reference --header-offset, but header.js rewrites that variable on
     every scroll tick (the header condenses), and on iOS the URL bar
     animation compounds the recalculation — the cards visibly jumped
     when scrolling up/down quickly. The values below match the
     condensed header (the state the user is in once they reach the
     calculator), so the layout is stable through scroll. */
  .cost-calculator-page {
    padding-top: 5rem;
    /* Stop overscroll bounce from chaining into ancestor scrollers and
       firing extra repaint passes. */
    overscroll-behavior-y: contain;
  }

  .cost-calculator-breadcrumbs,
  .cost-calculator-page .cr-roi {
    width: min(calc(100% - 2rem), 720px);
  }

  .cost-calculator-page .cr-roi .cr-section-header,
  .cost-calculator-page .cr-roi__layout,
  .cost-calculator-page .cr-roi__inputs,
  .cost-calculator-page .cr-roi__results-inner {
    width: 100%;
  }

  .cost-calculator-page .cr-roi .cr-section-title {
    max-width: calc(100vw - 2rem);
    font-size: clamp(1.25rem, 4vw, 1.55rem);
    line-height: 1.2;
  }

  .cost-calculator-page .cr-roi__steps {
    display: none;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    max-width: 100%;
  }

  .cost-calculator-page .cr-roi .cr-section-title,
  .cost-calculator-page .cr-roi .cr-section-subtitle,
  .cost-calculator-page .cr-roi__steps li,
  .cost-calculator-page .cr-roi__panel,
  .cost-calculator-page .cr-roi__results,
  .cost-calculator-page .cr-roi__results-inner {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Standard inputs spacing — cards stack as normal scroll content. */
  .cost-calculator-page .cr-roi__inputs {
    gap: 1.25rem;
  }

  /* Prevent mobile browsers from auto-zooming focused form controls. */
  .cost-calculator-page .cr-roi__layout input,
  .cost-calculator-page .cr-roi__layout select,
  .cost-calculator-page .cr-roi__layout textarea {
    font-size: 16px;
  }

  /* Results section sits at the end of the page. The hero is lifted
     above the inputs (see sticky-top block below); the breakdown +
     KPIs stay here as the final read once inputs are done. */
  .cost-calculator-page .cr-roi__results {
    order: 0;
  }

  /* CTA inside the results section follows the breakdown, not precedes
     it: action after context. */
  .cost-calculator-page .cr-roi__results-inner {
    display: flex;
    flex-direction: column;
  }
  .cost-calculator-page .cr-roi__cta-group {
    order: 1;
  }

  /* Centre the consultation CTA in the intro block. */
  .cost-calculator-page .cr-roi__intro p.cr-roi__intro-cta-wrap {
    text-align: center;
  }

  /* Hero result is lifted out of .cr-roi__results-inner via JS and
     re-inserted as the first child of .cr-roi__layout. It is pinned to
     the physical viewport top on mobile so Safari's dynamic browser
     chrome cannot create a direction-dependent gap while scrolling.

     Selector includes .cr-roi__layout so the specificity matches the
     desktop reset rule above (which strips background/border on the
     hero inside layout). Same specificity, this one wins by cascade
     order since it is in the mobile @media block. */
  .cost-calculator-page .cr-roi__layout .cr-roi__hero-result {
    position: sticky;
    top: 0;
    z-index: 9998;
    /* Break out of the section's max-width container with a negative
       inline margin so the bar runs edge-to-edge across the viewport. */
    margin-block: 0;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding: 0.95rem 3.75rem 1.05rem 3.75rem;
    background:
      linear-gradient(135deg, rgba(var(--roi-accent, 74, 222, 128), 0.18) 0%, rgba(var(--roi-accent, 74, 222, 128), 0.07) 100%),
      rgba(14, 22, 35, 0.94);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    /* Banner edge: only a bottom border so it reads as a top-stuck strip
       rather than a floating card. */
    border: none;
    border-bottom: 1px solid rgba(var(--roi-accent, 74, 222, 128), 0.55);
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    /* CONTENT-INDEPENDENT HEIGHT — the bar must never grow/shrink with
       content, otherwise the page below jumps when the label swaps
       (positive ↔ negative), the percent line appears/disappears, or
       the value changes width. Fixed height + clip + nowrap on each
       text node guarantee a stable box. */
    height: 5.15rem;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    /* Eat taps so the brand link in the header (sitting beneath this
       full-width banner) cannot be activated through it. */
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 260ms ease,
      transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
      visibility 0s linear 0s;
  }
  .cost-calculator-page .cr-roi__layout .cr-roi__hero-result.is-mobile-fixed {
    position: fixed;
    inset-block-start: var(--roi-mobile-top, 0px);
    inset-inline: 0;
    margin-inline: 0;
    width: auto;
  }
  .cost-calculator-page .cr-roi__layout .cr-roi__hero-result.is-mobile-managed {
    position: fixed;
    inset-block-start: var(--roi-mobile-top, 0px);
    inset-inline: 0;
    margin-inline: 0;
    width: auto;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -0.8rem, 0);
    transition:
      opacity 260ms ease,
      transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
      visibility 0s linear 320ms;
  }
  .cost-calculator-page .cr-roi__layout .cr-roi__hero-result.is-mobile-managed.is-mobile-revealed {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }
  /* Stripe doesn't fit a flush edge banner. */
  .cost-calculator-page .cr-roi__layout .cr-roi__hero-result::before {
    display: none;
  }
  .cost-calculator-page .cr-roi__layout .cr-roi__hero-main {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
  }
  .cost-calculator-page .cr-roi__layout .cr-roi__hero-label,
  .cost-calculator-page .cr-roi__layout .cr-roi__hero-value,
  .cost-calculator-page .cr-roi__layout .cr-roi__hero-meta-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  /* Reserve the meta line's vertical slot even when JS toggles its
     [hidden] attribute — visibility:hidden keeps the layout stable
     so the surrounding page doesn't reflow when the percent appears
     or disappears. */
  .cost-calculator-page .cr-roi__layout .cr-roi__hero-meta[hidden] {
    display: flex;
    visibility: hidden;
  }

  /* Compact bar typography: label + value on one line, meta below. */
  .cost-calculator-page .cr-roi__hero-main {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.12rem 0.55rem;
    transform: none;
  }
  .cost-calculator-page .cr-roi__hero-label {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .cost-calculator-page .cr-roi__hero-value {
    margin-top: 0;
    font-size: 1.42rem;
    line-height: 1;
  }
  .cost-calculator-page .cr-roi__hero-meta {
    margin-top: 0.62rem;
    justify-content: center;
    transform: none;
  }
  .cost-calculator-page .cr-roi__hero-meta-item {
    font-size: 0.78rem;
  }

  .cost-calculator-page .cr-roi__metric {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .cost-calculator-page .cr-roi__metric-label {
    margin-left: 0;
    text-align: left;
  }

  .cost-calculator-page .cr-roi__cta {
    max-width: 100%;
    white-space: normal;
  }

  /* Larger thumb for finger targets — 18px is hard to grab on touch. */
  .cost-calculator-page .cr-roi__range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  .cost-calculator-page .cr-roi__range::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
}

/* Page-scoped FAQ spacing: more breathing room between the heading and
   the question list than the product-page default. */
.cost-calculator-faq .cr-section-header {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}