/* ==========================================================================
   ROI calculator
   ========================================================================== */

/* ---------- Hero ---------- */
.roi-hero {
  position: relative;
  padding: 44px 0 103px;
  background: linear-gradient(90deg, #fff 0%, #f5f5ff 100%);
}
.roi-hero__intro { text-align: center; }
.roi-hero__title { max-width: 940px; margin: 27px auto 0; }
.roi-hero__lead { max-width: 840px; margin: 15px auto 0; }

/* ---------- Calculator ---------- */
.roi-calc {
  display: grid;
  grid-template-columns: 640px 340px;
  grid-template-areas:
    ".    head"
    "form tiles";
  justify-content: center;
  column-gap: 60px;
  margin-top: 79px;
}
.roi-form {
  grid-area: form;
  align-self: start;
  padding: 23px 20px 28px;
  background: #fff;
  border: 1px solid #e5e8ef;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(7, 26, 95, 0.02), 0 14px 40px -18px rgba(7, 26, 95, 0.14);
}
.roi-field + .roi-field { margin-top: 35px; }
.roi-field__label { display: block; font-size: 14px; line-height: 20px; color: #656565; }
.roi-field__input {
  display: block;
  width: 100%;
  height: 72px;
  margin-top: 10px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius); /* 8px — same as the result boxes and cards */
  background: #eef2fe;
  font: 700 16px/1 var(--font);
  color: var(--blue);
  outline: none;
  caret-color: var(--blue);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s var(--ease-out);
}
/* Examples only: light grey + regular weight + "e.g." so an empty field never reads as a filled-in value */
.roi-field__input::placeholder { color: #a3a9ba; font-weight: 400; opacity: 1; transition: opacity 0.3s; }
.roi-field__input:hover { background: #e7ecfd; }
.roi-field__input:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(53, 90, 240, 0.08); }
.roi-field__input:focus::placeholder { opacity: 0.4; }
.roi-field__input:focus-visible { outline: none; }

.roi-results__title {
  grid-area: head;
  max-width: 310px;
  margin: 0 auto 17px;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  text-align: center;
}
.roi-results { grid-area: tiles; display: grid; gap: 17px; align-content: start; }
.roi-tile {
  padding: 20px 20px 19px;
  background: #fff;
  border: 1px solid #e9ebf3;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(7, 26, 95, 0.02), 0 14px 40px -18px rgba(7, 26, 95, 0.14);
  text-align: center;
}
.roi-tile__value {
  position: relative;
  display: grid;
  place-items: center;
  height: 98px;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: var(--navy);
}
.roi-tile__value::after {
  /* slow sheen so the result feels alive */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}
.roi-tile.is-updated .roi-tile__value::after { animation: roi-sheen 1s var(--ease-out); }
@keyframes roi-sheen { to { transform: translateX(100%); } }
.roi-tile__value--savings { background-image: url("../../img/roi-calculator/tile-savings-desktop.webp"); }
.roi-tile__value--revenue { background-image: url("../../img/roi-calculator/tile-revenue-desktop.webp"); }
.roi-tile__value output {
  position: relative;
  z-index: 1;
  display: block;
  font-size: var(--fs, 80px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.015em; /* digits need air at this size — the tighter display tracking cramped them */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: font-size 0.4s var(--ease-out);
}
.roi-tile__label { margin-top: 16px; font-size: 16px; line-height: 20px; font-weight: 700; }
.roi-results__cta { width: 100%; }

/* ---------- The difference ---------- */
.roi-diff { background: #eef2fe; padding: 84px 0 80px; }
.roi-diff__head { text-align: center; }
.roi-diff__title {
  max-width: 940px;
  margin: 26px auto 0;
  font-size: 52px;
  line-height: 61px;
  font-weight: 700;
  letter-spacing: -0.038em;
}
.roi-diff__lead { max-width: 830px; margin: 12px auto 0; }

/* Comparison table — one DOM (role="table"), re-flowed per breakpoint.
   Desktop: one 3-column grid, rows use display:contents and --r places cells.
   Tablet/phone: sticky column header + one 2-column grid per row (see the tablet block). */
.cmp {
  display: grid;
  grid-template-columns: 252px 405px minmax(0, 1fr); /* +5 % */
  max-width: 1050px;
  margin: 63px auto 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(7, 26, 95, 0.03), 0 24px 60px -30px rgba(53, 90, 240, 0.25);
}
.cmp__row { display: contents; }
.cmp__cell { position: relative; display: flex; align-items: center; transition: background-color 0.35s ease; }
.cmp__row--head .cmp__cell { grid-row: 1; }
.cmp__row:not(.cmp__row--head) .cmp__cell { grid-row: var(--r); }
.cmp__row:not(.cmp__row--head) .cmp__cell { min-height: 79px; }
.cmp__cell--cap { grid-column: 1; padding: 19px 22px; font-size: 12.6px; line-height: 19px; font-weight: 600; color: #101825; }
.cmp__cell--lytra { grid-column: 2; gap: 10px; padding: 19px 21px 19px 22px; background: #d1f2fb; font-size: 12.6px; line-height: 19px; font-weight: 600; color: #06195d; }
.cmp__cell--other { grid-column: 3; gap: 11px; padding: 19px 21px; font-size: 12.6px; line-height: 19px; font-weight: 600; color: #656565; }
.cmp__cell--lytra p { max-width: 328px; }
.cmp__row--head .cmp__cell { height: 92px; padding-top: 17px; padding-bottom: 17px; }
.cmp__row--head .cmp__cell--cap { align-items: flex-start; padding-top: 16px; }
.cmp__caption { font-size: 14px; line-height: 20px; font-weight: 600; text-transform: uppercase; color: #656565; }
.cmp__row--head .cmp__cell--lytra { flex-direction: column; justify-content: center; gap: 14px; }
.cmp__badge { width: 93px; height: 19px; }
.cmp__logo { width: 93px; height: 24px; transition: transform 0.6s var(--ease-spring); }
.cmp__row--head .cmp__cell--other { justify-content: center; padding-bottom: 24px; font-size: 20px; line-height: 28px; color: #656565; }

.cmp__ico {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: transform 0.5s var(--ease-spring);
}
.cmp__ico::after { content: ""; position: absolute; inset: 0; background: center / 100% no-repeat; }
.cmp__ico--yes { background: #345aef; box-shadow: 0 8px 20px -2px rgba(46, 86, 245, 0.34); }
.cmp__ico--yes::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.285 16.2 6.295 12.21l.998-.998 2.992 2.993 6.423-6.423.997.998z' fill='%23fff'/%3E%3C/svg%3E"); }
.cmp__ico--no { background: #e11d48; box-shadow: 0 8px 20px -2px rgba(225, 29, 72, 0.34); }
.cmp__ico--no::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.43 8.57 8.57 15.43M8.57 8.57l6.86 6.86' stroke='%23fff' stroke-width='1.715' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Row highlight (hover, or linked capability on tablet/phone) */
.cmp__row.is-hl .cmp__cell--cap,
.cmp__row.is-hl .cmp__cell--other { background: #f6f8ff; }
.cmp__row.is-hl .cmp__cell--lytra { background: #c3ecf8; }
.cmp__row.is-hl .cmp__ico { transform: scale(1.12); }
.cmp:hover .cmp__logo { transform: scale(1.04); }

/* Desktop: the comparison table at 110.3 % (+5 %, +2.5 %, +2.5 %): columns, type, spacing and icons scale together */
@media (min-width: 1200px) {
  .cmp { grid-template-columns: 278px 447px minmax(0, 1fr); max-width: 1158px; }
  .cmp__row:not(.cmp__row--head) .cmp__cell { min-height: 87px; }
  .cmp__cell--cap, .cmp__cell--lytra, .cmp__cell--other { padding-top: 21px; padding-bottom: 21px; font-size: 13.9px; line-height: 21px; }
  .cmp__cell--cap { padding-inline: 24.3px; }
  .cmp__cell--lytra { padding-inline: 24.3px 23.2px; }
  .cmp__cell--other { padding-inline: 23.2px; }
  .cmp__cell--lytra p { max-width: 362px; }
  .cmp__row--head .cmp__cell { height: 101.5px; padding-top: 18.75px; padding-bottom: 18.75px; }
  .cmp__row--head .cmp__cell--other { padding-bottom: 26.5px; font-size: 22.1px; line-height: 30.9px; }
  .cmp__caption { font-size: 15.4px; line-height: 22.1px; }
  .cmp__badge { width: 102.6px; height: 21px; }
  .cmp__logo { width: 102.6px; height: 26.5px; }
  .cmp__ico { width: 26.5px; height: 26.5px; }
  /* DE: the shared cta-band rule (max 440px) forced three lines; two balanced lines read better */
  html[lang="de"] .roi-cta .lead { max-width: 640px; }
}

/* ---------- CTA (page variant) ---------- */
.roi-cta { padding: 64px 0 60px; }
.roi-cta .eyebrow { max-width: none; margin: 0 auto 27px; }
.roi-cta h2 { max-width: none; font-size: 56px; line-height: 67px; }
.roi-cta .lead { max-width: 770px; margin: 17px auto 19px; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199px) {
  .roi-hero { padding: 38px 0 40px; }
  .roi-hero__title { margin-top: 18px; font-size: 44px; line-height: 48px; }
  .roi-hero__lead { max-width: 700px; margin-top: 14px; font-size: 16px; line-height: 22px; }

  .roi-calc { grid-template-columns: 1fr; grid-template-areas: "form" "head" "tiles"; margin-top: 64px; }
  .roi-form { padding: 23px 20px 26px; }
  .roi-field + .roi-field { margin-top: 17px; }
  .roi-field__input { height: 56px; }
  .roi-results__title { max-width: none; margin: 33px 0 16px; }
  .roi-tile__value--savings { background-image: url("../../img/roi-calculator/tile-savings-tablet.webp"); }
  .roi-tile__value--revenue { background-image: url("../../img/roi-calculator/tile-revenue-tablet.webp"); }

  .roi-diff { padding: 62px 0 63px; }
  .roi-diff__title { max-width: 700px; margin-top: 18px; font-size: 43px; line-height: 48px; }
  .roi-diff__lead { max-width: 690px; margin-top: 14px; font-size: 16px; line-height: 22px; }

  /* Sticky comparison (tablet + phone)
     The column header (lytra | Other AI platforms) sticks below the site header while the rows
     scroll under it. Each row = a full-width capability band + its lytra / other cells, so the
     capability always sits directly above the answers it belongs to.
     .cmp becomes a plain block (sticky needs the table — not a grid area — as its containing
     block, and no overflow:hidden); each row is its own 2-column grid. */
  .cmp {
    --cmp-top: calc(var(--banner-h) + var(--nav-h)); /* under the pinned banner + header */
    display: block;
    max-width: none;
    margin-top: 64px;
    overflow: visible;
  }
  .cmp__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp .cmp__row .cmp__cell { grid-row: auto; }

  .cmp__row--head {
    position: sticky;
    top: var(--cmp-top);
    z-index: 4;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    box-shadow: 0 1px 0 #e5e8ef;
    transition: box-shadow 0.35s ease, border-radius 0.35s ease;
  }
  .cmp__row--head.is-stuck { border-radius: 0; box-shadow: 0 1px 0 #e5e8ef, 0 12px 24px -14px rgba(7, 26, 95, 0.28); }
  .cmp__row--head .cmp__cell { height: 72px; padding: 10px; }
  .cmp__row--head .cmp__cell--lytra { grid-column: 1; gap: 10px; }
  .cmp__row--head .cmp__cell--other { grid-column: 2; padding-bottom: 10px; background: #fff; font-size: 16px; line-height: 20px; text-align: center; }
  /* keep the "Capability" header for screen readers (3 columns), hide it visually */
  .cmp__row--head .cmp__cell--cap { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .cmp__cell--cap {
    grid-column: 1 / -1;
    justify-content: center;
    padding: 13px 16px;
    border-top: 1px solid #e5e8ef;
    background: #f7f8ff;
    font-size: 14px;
    line-height: 20px;
    color: var(--navy);
    text-align: center;
    text-wrap: balance;
  }
  .cmp__row[data-row="1"] .cmp__cell--cap { border-top: 0; }
  .cmp__row:not(.cmp__row--head) .cmp__cell { min-height: 0; }
  .cmp__cell--lytra { grid-column: 1; gap: 14px; padding: 20px 16px 22px; }
  .cmp__cell--other { grid-column: 2; gap: 14px; padding: 20px 16px 22px; }
  .cmp__cell--lytra p { max-width: none; }
  .cmp__row[data-row="8"] .cmp__cell--lytra { border-bottom-left-radius: 12px; }
  .cmp__row[data-row="8"] .cmp__cell--other { border-bottom-right-radius: 12px; }
  .cmp__row.is-hl .cmp__cell--cap { background: #eef1fd; }

  .roi-cta { padding: 39px 0 40px; }
  .roi-cta .eyebrow { margin-bottom: 17px; }
  .roi-cta h2 { font-size: 39px; line-height: 48px; }
  .roi-cta .lead { max-width: 690px; margin: 10px auto 16px; font-size: 16px; line-height: 22px; }
  .roi-cta .btn-row { flex-direction: column; gap: 8px; }
  .roi-cta .btn { width: 100%; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 767px) {
  .roi-hero { padding: 38px 0 32px; }
  .roi-hero__title { margin-top: 20px; font-size: 39px; line-height: 44px; }
  .roi-hero__lead { margin-top: 12px; }

  .roi-calc { margin-top: 42px; }
  .roi-form { padding: 21px 20px 24px; }
  .roi-results__title { margin: 36px auto 16px; max-width: 290px; }
  .roi-tile__value--savings { background-image: url("../../img/roi-calculator/tile-savings-mobile.webp"); }
  .roi-tile__value--revenue { background-image: url("../../img/roi-calculator/tile-revenue-mobile.webp"); }

  .roi-diff { padding: 39px 0 40px; }
  .roi-diff__head { text-align: left; }
  .roi-diff__title { margin-top: 21px; font-size: 39px; line-height: 44px; }
  .roi-diff__lead { margin-top: 12px; }
  .cmp { margin-top: 40px; border-radius: 0; }
  .cmp__row--head { border-radius: 0; }
  .cmp__row--head .cmp__cell { height: 71px; }
  .cmp__cell--cap { padding: 11px 12px; font-size: 13px; line-height: 18px; }
  .roi-cta h2 { font-size: 39px; line-height: 44px; }
  .cmp__cell--lytra, .cmp__cell--other { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 10px 18px; }
  .cmp__row--head .cmp__cell--lytra, .cmp__row--head .cmp__cell--other { align-items: center; gap: 8px; }
  .cmp__row[data-row="8"] .cmp__cell--lytra, .cmp__row[data-row="8"] .cmp__cell--other { border-radius: 0; }
}

/* Desktop headline breaks as designed */
.roi-br { display: none; }
@media (min-width: 1200px) { .roi-br { display: inline; } }

/* ==========================================================================
   German (html[lang="de"]) — layout tweaks for the longer copy; EN untouched
   ========================================================================== */
html[lang="de"] .cmp__badge { width: 77px; }
/* Narrow table cells and key leads read cleaner without auto-hyphenation (no word overflows) */
html[lang="de"] .cmp__cell p,
html[lang="de"] .roi-hero__lead,
html[lang="de"] .roi-diff__lead,
html[lang="de"] .roi-cta .lead { -webkit-hyphens: manual; hyphens: manual; }
html[lang="de"] .roi-cta .lead { text-wrap: balance; }
@media (max-width: 767px) {
  /* "Einsparpotenzial & / neuer Serviceumsatz" on two lines instead of three */
  html[lang="de"] .roi-results__title { max-width: none; }
}
@media (max-width: 374px) {
  /* "vollautomatisiert." is wider than a 328px column at 39px */
  html[lang="de"] .roi-diff__title { font-size: 36px; line-height: 41px; }
}

/* Reveal: when the table enters, its rows blend in one after another (header first) */
@keyframes cmp-row-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
.cmp[data-reveal]:not(.is-in) .cmp__cell { opacity: 0; }
.cmp.is-in .cmp__cell { animation: cmp-row-in 0.7s var(--ease-out) both; animation-delay: calc(0.18s + var(--r, 0) * 0.07s); }
.cmp.is-in .cmp__row:not(.cmp__row--head) .cmp__ico { animation: cmp-ico-in 0.6s var(--ease-spring) both; animation-delay: calc(0.3s + var(--r, 0) * 0.07s); }
@keyframes cmp-ico-in { from { transform: scale(0.4); opacity: 0; } }