/* 06 — Business Results: dark bento (Figma 712:8954 desktop 1920 / 353:2491 mobile) */
.bento {
  position: relative;
  z-index: 2;
  background: var(--brand-primary);
  font-family: var(--font);
  color: var(--text-ink);
  --rot-h: 58px;
}
.bento .bento-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: var(--section-pad) var(--page-pad);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

/* the dark section rides up over the pinned Controlled-proof block (awwwards-style overlap) */
@media (min-width: 1440px) {
  .bento {
    margin-top: -100vh;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    box-shadow: 0 -24px 60px rgba(8, 42, 28, .18);
  }
}

/* ---------- Header ---------- */
.bento .bento-header { display: flex; flex-direction: column; gap: 24px; }
.bento .bento-title { margin: 0; color: var(--text-inverse); white-space: nowrap; }

/* ---------- Grid ---------- */
.bento .bento-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.bento .bento-row {
  display: grid;
  /* Figma 712:8966 grid: 0.75fr / 1fr (3:4), gap 24 */
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.bento .bento-card {
  display: flex;
  box-sizing: border-box;
  padding: 16px; /* Figma 712:8957 / 712:8967: the visual sits 16px from the card edge; the text block adds its own 32px */
  gap: 48px;
  border-radius: var(--radius-16);
  overflow: hidden;
}
.bento .bento-card-wide {
  /* Figma 712:8957 grid: 0.75fr / 1fr (3:4), gap 48 — text column scales with the viewport, no fixed width */
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  align-items: start;
  width: 100%;
}
.bento .bento-card-accuracy,
.bento .bento-card-control { background: var(--surface-subtle); }
.bento .bento-card-wide .bento-card-text { width: 100%; min-width: 0; box-sizing: border-box; padding: 32px; }
.bento .bento-card-wide .bento-visual { width: 100%; min-width: 0; align-self: start; }

.bento .bento-card-tall { flex-direction: column; align-items: flex-start; gap: 24px; }
.bento .bento-card-capacity { background: var(--brand-secondary); }
.bento .bento-card-focus { background: var(--surface-section); }
.bento .bento-card-tall .bento-visual { width: 100%; flex-shrink: 0; }
.bento .bento-card-tall .bento-card-text { width: 100%; box-sizing: border-box; padding: 0 32px 32px; } /* 32 + the card's 16 = 48 to the edge */

.bento .bento-visual {
  background: var(--text-inverse);
  border-radius: var(--radius-8);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.bento .bento-visual::before { content: ""; display: block; grid-area: 1 / 1; width: 100%; padding-top: 62.5%; }
.bento .bento-visual { grid-template-columns: minmax(0, 1fr); }
.bento .bento-visual > * { grid-area: 1 / 1; }
.bento .bento-visual-icon { display: block; width: 64px; height: 64px; flex-shrink: 0; }
.bento .bento-visual picture { display: block; width: 100%; height: 100%; }
.bento .bento-visual-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bento .bento-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.bento .bento-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-primary);
  white-space: nowrap;
}
.bento .bento-eyebrow-icon { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.bento .bento-eyebrow-icon-wide { width: 21px; }
.bento .bento-card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.bento .bento-card-title { margin: 0; color: var(--brand-primary); }
.bento .bento-card-wide .bento-card-title { width: 100%; }
.bento .bento-card-accuracy .bento-card-title { white-space: nowrap; }
.bento .bento-card-desc { margin: 0; color: var(--text-muted); width: 100%; }
.bento .bento-card-capacity .bento-card-desc { color: var(--text-ink); opacity: 0.7; }

/* ---------- Payoff card ---------- */
.bento .bento-card-payoff {
  background: var(--surface-white);
  padding: 48px; /* no visual here: the copy keeps the full 48px inset */
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.bento .bento-payoff-text {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  overflow: hidden;
}
.bento .bento-payoff-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--brand-primary);
  white-space: nowrap;
  --rot-h: 58px;
  --rot-step: 88px; /* slot pitch: taller than the pill, so the word that left sits fully above it — no tails peeking in */
}
/* Figma 1011:57420 / 1011:57436 — the rotating word lives in a pill that grows and shrinks
   smoothly to fit whatever word is showing */
.bento .bento-rotator {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 69px;                 /* 12 + cap(39) + 18 as in Figma, measured cap-to-baseline */
  padding: 0 28px;
  width: calc(var(--rot-w, 6ch) + 56px);
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--brand-accent);
  overflow: hidden;
  /* the rounded clip must survive the compositing layer the sliding words get promoted to */
  contain: paint;
  isolation: isolate;
  transform: translateZ(0);
  transition: width .7s cubic-bezier(.16, 1, .3, 1);
  vertical-align: middle;
}
.bento .bento-rotator-words {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--rot-h) / 2 + var(--rot-nudge, -3px)); /* word 0 centred, nudged to Figma's 12/18 optical balance */
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%) translateY(calc(var(--rot-i, 0) * var(--rot-step) * -1));
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.bento .bento-rotator-word {
  display: block;
  height: var(--rot-h);
  line-height: var(--rot-h);
  margin-bottom: calc(var(--rot-step) - var(--rot-h));
  white-space: nowrap;
  transition: opacity .45s ease;
}
@media (prefers-reduced-motion: reduce) {
  .bento .bento-rotator-words, .bento .bento-rotator { transition: none; }
}
.bento .bento-payoff-desc { margin: 0; color: var(--text-muted); width: 100%; }
.bento .bento-payoff-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-shrink: 0;
}
.bento .bento-payoff-cta .btn { width: 230px; box-sizing: border-box; padding: 11px 24px; } /* 230x48 */
.bento .bento-payoff-note { margin: 0; color: var(--text-muted); text-align: center; white-space: nowrap; }

/* ---------- Tablet (768–1199): keep bento, loosen fixed widths ---------- */
@media (max-width: 1199px) {
  .bento .bento-title { white-space: normal; }
  .bento .bento-card-wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bento .bento-card-accuracy .bento-card-title { white-space: normal; }
  .bento .bento-row { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento .bento-card-payoff { flex-direction: column; align-items: flex-start; }
  .bento .bento-payoff-text { flex: none; width: 100%; }
  .bento .bento-payoff-title { flex-wrap: wrap; white-space: normal; }
}

/* ---------- Mobile (Figma 353:2491, 375 wide) ---------- */
@media (max-width: 767px) {
  .bento { --rot-h: 36px; --rot-step: 56px; }
  .bento .bento-inner { padding: 64px 16px; gap: 24px; align-items: center; }
  .bento .bento-header { gap: 16px; width: 100%; align-items: center; text-align: center; padding: 16px 0 8px; }
  .bento .bento-title { font-size: 32px; line-height: 36px; letter-spacing: -0.03em; white-space: normal; text-align: center; }
  .bento .bento-grid { gap: 16px; }

  /* Card: padding 24, gap 16, radius 12 (Figma 353:2495 ... 353:2532) */
  .bento .bento-card {
    padding: 8px; /* the visual sits 8px from the edge; the text block adds 16 → 24 */
    gap: 16px;
    border-radius: var(--radius-12);
  }
  .bento .bento-card-wide .bento-visual,
  .bento .bento-card-tall .bento-visual { width: 100%; height: auto; flex: none; }
  /* on phones the visual always leads, the text follows */
  .bento .bento-card-wide .bento-visual { order: -1; }
  .bento .bento-card-tall { gap: 16px; }
  .bento .bento-card-text { gap: 12px; }
  .bento .bento-card-wide .bento-card-text, .bento .bento-card-tall .bento-card-text { padding: 0 16px 16px; } /* the card's 16px gap is the whole distance from the visual */
  .bento .bento-card-payoff { padding: 24px; }
  .bento .bento-card-copy { gap: 16px; }
  /* H5 mobile 20/24 -2% on wide cards, H4 mobile 24/28 -2% on tall cards */
  .bento .bento-card-wide .bento-card-title { font-size: 20px; line-height: 24px; letter-spacing: -0.02em; }
  .bento .bento-card-tall .bento-card-title { font-size: 24px; line-height: 28px; letter-spacing: -0.02em; }
  .bento .bento-card-desc { font-size: 16px; line-height: 20px; letter-spacing: -0.04em; }
  .bento .bento-card-capacity .bento-card-desc { color: var(--text-ink); opacity: 1; }

  /* Scroll stack (client-approved): every card sticks under the header and the next one slides over it.
     Final rest state mirrors Figma "Overlap group" 409:1399: each lower card peeks 16-20px above the next. */
  .bento .bento-grid { position: relative; }
  .bento .bento-row { display: contents; }
  /* the stack must never be see-through: the reveal fade is dropped for the cards here */
  .bento .bento-card[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bento .bento-card {
    width: 100%;
    max-width: none;
    flex-shrink: 0;
    overflow: hidden;
    position: sticky;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45); /* Figma 353:2514 */
  }
  .bento .bento-row .bento-card,
  .bento .bento-card-accuracy { min-height: 412px; }
  /* cards pin at the top of the screen (no room kept for the header — it hides on the way down anyway) */
  .bento .bento-card-accuracy { top: 16px; z-index: 1; box-shadow: none; }
  .bento .bento-card-capacity { top: 48px; z-index: 2; }
  .bento .bento-card-focus    { top: 80px; z-index: 3; }
  .bento .bento-card-control  { top: 112px; z-index: 4; }
  .bento .bento-card-payoff   { top: 144px; z-index: 5; }

  /* Payoff card (Figma 353:2532): surface/card, H2 mobile 32/36, Text Medium 18/24, full-width CTA */
  /* everything inside the card is centred on mobile */
  .bento .bento-card-payoff { background: var(--surface-card); gap: 16px; align-items: center; text-align: center; }
  .bento .bento-payoff-text { flex: none; gap: 16px; width: 100%; align-items: center; }
  .bento .bento-payoff-title {
    font-size: 32px; line-height: 36px; letter-spacing: -0.03em; --rot-h: 36px; --rot-step: 56px;
    /* the pill keeps its own line so the layout never jumps as the word length changes */
    flex-direction: column; align-items: center; gap: 8px; white-space: nowrap; width: 100%;
  }
  /* Figma 1011:57436: 32/36 type, 7 + cap(23) + 11 tall, 18px sides */
  .bento .bento-rotator { height: 41px; padding: 0 18px; width: calc(var(--rot-w, 5ch) + 36px); --rot-nudge: -2px; }
  .bento .bento-payoff-desc { font-size: 18px; line-height: 24px; letter-spacing: -0.03em; }
  .bento .bento-payoff-cta { width: 100%; gap: 12px; }
  .bento .bento-payoff-cta .btn { width: 100%; height: 48px; padding: 12px 24px; }
  .bento .bento-payoff-note { font-weight: 600; white-space: normal; width: 100%; }
}