/* RingCentral.com theme: rc-delivery-proof. Builds on rc-theme.css tokens.
   Slice: #capacity (section top, 20 – 50, delivery illustration, scope tabs) and #proof (VanillaSoft case).
   Older files scope these with ids and a few !important flags, so selectors here start at #capacity / #proof
   and exceed them where needed. Local tokens are prefixed --dp-. */

#capacity,
#proof {
  --dp-cols: minmax(0, 0.92fr) minmax(0, 1.08fr);
  --dp-gap: clamp(40px, 5.2vw, 88px);
  --dp-ink-strong: #2b2926d9; /* 85% ink: small labels that sit on tinted fills */
  --dp-track: #e7e2da;
  --dp-station: #d3ccc0;
  background: var(--rc-page);
  color: var(--rc-ink);
}

/* ---------- Capacity: section top ---------- */
#capacity .section-top {
  display: grid;
  grid-template-columns: var(--dp-cols);
  gap: 24px var(--dp-gap);
  align-items: last baseline;
  margin-bottom: clamp(48px, 5.6vw, 88px);
}
#capacity .section-top > p {
  max-width: 540px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--rc-ink-2);
}

/* ---------- Capacity: number + illustration ---------- */
#capacity .capacity-grid {
  display: grid;
  grid-template-columns: var(--dp-cols);
  gap: 48px var(--dp-gap);
  align-items: center;
}
#capacity .capacity-copy { min-width: 0; }
#capacity .capacity-copy .capacity-number {
  margin: 0;
  font-size: clamp(88px, 7.6vw, 120px);
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.03em;
  word-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--rc-ink);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
#capacity .capacity-copy h3 {
  margin-top: clamp(20px, 2vw, 28px);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.25;
}
#capacity .capacity-copy > p:not(.capacity-number) {
  max-width: 400px;
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--rc-ink-2);
}

/* The illustration is a large RingCentral gradient panel holding a white product-UI card. */
#capacity .delivery-stage.glass-panel {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  padding: clamp(28px, 3.3vw, 52px) clamp(24px, 3.3vw, 52px) clamp(36px, 4vw, 60px);
  border: 0;
  border-radius: var(--rc-radius-xl) !important;
  /* A soft peach wash in the top-left corner gives the panel a visible edge on the off-white page. */
  background:
    radial-gradient(70% 55% at 0% 0%, #fde3d2 0%, #fde3d200 100%),
    var(--rc-grad-warm) !important;
  box-shadow: none !important;
  color: var(--rc-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#capacity .delivery-card {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 2.2vw, 32px) clamp(20px, 2.4vw, 36px) clamp(24px, 2.4vw, 36px);
  border-radius: var(--rc-radius-md);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow-lift);
}
#capacity .delivery-stage .delivery-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rc-line);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--rc-ink);
}
#capacity .delivery-stage .delivery-stage-head > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* The authentic Winspeed W, painted solid orange through the monogram mask set on .winspeed-mark in style.css.
   The box keeps the monogram's 57:49 proportion; size overrides the global .winspeed-mark breakpoints. */
#capacity .delivery-stage .delivery-stage-head .winspeed-mark {
  display: block;
  flex: none;
  width: 26px;
  height: 22px;
  background: var(--rc-orange);
}
#capacity .delivery-stage .visual-label {
  flex: none;
  padding: 5px 12px;
  border-radius: var(--rc-radius-xl);
  background: var(--rc-chip);
  color: var(--rc-ink-2) !important;
  font-size: 13px !important;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
}
#capacity .delivery-stage .lane-labels {
  display: flex;
  justify-content: space-between;
  margin: 24px 0 14px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--rc-ink-2);
}
/* Centre the middle labels over their stations; the outer two sit flush with the track ends. */
#capacity .delivery-stage .lane-labels > span {
  display: flex;
  justify-content: center;
  width: 10px;
  white-space: nowrap;
}
#capacity .delivery-stage .lane-labels > span:first-child { justify-content: flex-start; }
#capacity .delivery-stage .lane-labels > span:last-child { justify-content: flex-end; }

#capacity .delivery-stage .delivery-lanes {
  gap: 22px;
  margin: 0;
}
#capacity .delivery-stage .delivery-lanes > div {
  height: 16px;
}
#capacity .delivery-stage .delivery-lanes > div::before {
  top: 7px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--dp-track) 0%, var(--dp-track) 66%, #ffd3b3 100%);
}
#capacity .delivery-stage .delivery-lanes b {
  width: 10px;
  height: 10px;
  border: 2px solid var(--dp-station);
  background: var(--rc-white);
}
#capacity .delivery-stage .delivery-lanes b:last-child {
  border-color: var(--rc-orange);
  background: var(--rc-orange);
  box-shadow: 0 0 0 4px #ff7a001f;
}
/* Travelling work items: RingCentral orange, peach and blue. Animation and reduced-motion handling stay in style.css. */
#capacity .delivery-stage .delivery-lanes i {
  top: 4px;
  width: 24px;
  height: 8px;
  border-radius: 8px;
  background: var(--rc-orange);
  filter: none;
  box-shadow: 0 0 0 3px #ff7a0024;
}
#capacity .delivery-stage .delivery-lanes > div:nth-child(2) i,
#capacity .delivery-stage .delivery-lanes > div:nth-child(4) i {
  background: var(--rc-blue);
  box-shadow: 0 0 0 3px #066fac1f;
}
#capacity .delivery-stage .delivery-lanes > div:nth-child(3) i {
  background: var(--rc-orange-soft);
  box-shadow: 0 0 0 3px #ff8e4624;
}

/* The footer becomes a floating status card that overlaps the main card, like RingCentral's layered UI. */
#capacity .delivery-stage .delivery-stage-foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: -22px 0 0 clamp(16px, 3vw, 44px);
  padding: 14px 22px 14px 14px;
  border: 0;
  border-radius: var(--rc-radius-md);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow-lift);
  font-size: 14px;
  line-height: 1.35;
  color: var(--rc-ink-2);
}
#capacity .delivery-stage .delivery-stage-foot::before {
  content: "";
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.4l3.1 3.1L15 6.6' fill='none' stroke='%23e46c00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat,
    var(--rc-peach);
}
#capacity .delivery-stage .delivery-stage-foot > span { grid-column: 2; }
#capacity .delivery-stage .delivery-stage-foot strong {
  grid-column: 2;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--rc-ink);
}

/* ---------- Capacity: scope explorer ---------- */
#capacity .scope-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: clamp(64px, 7vw, 112px);
  padding-top: 0;
  border-top: 0;
}
/* Segmented pill bar, as on ringcentral.com ("AI Business Phone / AI Agents / ..."). */
#capacity .scope-explorer .scope-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: var(--rc-radius-xl);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow);
}
#capacity .scope-explorer .scope-tabs button:not([aria-selected="true"]),
#capacity .scope-explorer .scope-tabs button[aria-selected="true"] {
  min-height: 52px;
  padding: 12px 20px;
  border-radius: var(--rc-radius-xl);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#capacity .scope-explorer .scope-tabs button:not([aria-selected="true"]) {
  color: var(--rc-ink-2);
  background: transparent;
  box-shadow: none;
}
/* Hover: light orange tint with burnt-orange text (#9a4300 on the tint is 5.9:1). */
#capacity .scope-explorer .scope-tabs button:not([aria-selected="true"]):hover {
  color: #9a4300;
  background: #ff7a001f;
  box-shadow: none;
}
/* Selected: solid RingCentral orange with ink text (5.6:1; white on #ff7a00 would be 2.6:1). */
#capacity .scope-explorer .scope-tabs button[aria-selected="true"],
#capacity .scope-explorer .scope-tabs button[aria-selected="true"]:hover {
  color: var(--rc-ink);
  background: var(--rc-orange);
  box-shadow: none;
}
#capacity .scope-explorer .scope-tabs button:focus-visible {
  outline: 2px solid var(--rc-blue);
  outline-offset: 2px;
}

#capacity .scope-explorer #scope-panel {
  display: grid;
  grid-template-columns: var(--dp-cols);
  gap: 16px var(--dp-gap);
  align-items: first baseline;
  align-content: start;
  min-width: 0;
  min-height: 0;
  padding: clamp(28px, 3.4vw, 52px);
  border: 0;
  border-radius: var(--rc-radius-lg);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow);
}
#capacity .scope-explorer #scope-panel:focus-visible {
  outline: 2px solid var(--rc-blue);
  outline-offset: 3px;
}
#capacity .scope-explorer #scope-panel h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.25;
  color: var(--rc-ink);
  text-wrap: balance;
}
#capacity .scope-explorer #scope-panel p {
  /* Room for the longest of the three panels (three lines at desktop), so switching tabs does not shift the page. */
  min-height: calc(3 * 1.5em);
  max-width: 620px;
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--rc-ink-2);
}

/* ---------- Proof: VanillaSoft customer story ---------- */
#proof.case-section { overflow: clip; }
#proof .case-atmosphere,
#proof .case-atmosphere::after {
  display: none;
  content: none;
  background: none;
}
#proof .case-intro {
  max-width: 1080px;
  margin-inline: auto;
  text-align: center;
}
#proof .case-intro .case-promise {
  max-width: 1080px;
  margin: 0 auto clamp(40px, 4.4vw, 64px);
  font-size: clamp(40px, 4.3vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--rc-ink);
  text-wrap: balance;
}
#proof .case-intro .case-promise span { color: var(--rc-orange); }
/* VanillaSoft logo (SVG): 460px on desktop, 400px on tablet, up to 320px on phones. */
#proof .case-intro > img {
  width: min(460px, 100%);
  height: auto;
  margin: 0 auto clamp(36px, 3.6vw, 56px);
  filter: none;
}
#proof .case-intro #proof-title {
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.17;
  font-weight: 500;
  color: var(--rc-ink);
}
#proof .case-intro #proof-title span { color: inherit; }
#proof .case-intro > p {
  max-width: 640px;
  margin: 20px auto 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--rc-ink-2);
}

/* Stats: large orange numbers, centred over their labels on a plain white card (orange stays large text only,
   and white keeps it clearer than the peach band). No dividers at any width. */
#proof .case-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px clamp(16px, 2.4vw, 40px);
  margin-top: clamp(48px, 5.6vw, 80px);
  padding: clamp(36px, 4vw, 64px) clamp(20px, 3vw, 48px);
  border: 0;
  border-radius: var(--rc-radius-lg);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow);
}
#proof .case-facts > div,
#proof .case-facts > div + div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  text-align: center;
}
#proof .case-facts > div > strong {
  display: block;
  font-size: clamp(56px, 5.2vw, 80px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.025em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--rc-orange);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
/* Fixed-width digits so the count-up does not jitter. */
#proof .case-facts > div > strong [data-count] { font-variant-numeric: tabular-nums; }
#proof .case-facts > div > strong sup {
  margin-left: 2px;
  font-size: 0.5em;
  font-weight: 500;
  vertical-align: 0.62em;
  line-height: 0;
  color: inherit;
}
#proof .case-facts > div > strong small {
  margin-left: 3px;
  font-size: 0.5em;
  font-weight: 500;
  color: inherit;
}
#proof .case-facts > div > span {
  display: block;
  max-width: 300px;
  margin: 12px auto 0;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: var(--rc-ink-2);
}

/* Route: a calm horizontal stepper of chips joined by thin connectors. */
#proof .case-route {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1040px;
  margin: clamp(40px, 4.4vw, 64px) auto 0;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--rc-ink);
}
#proof .case-route span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 12px 22px 12px 16px;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-xl);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow);
  white-space: nowrap;
}
#proof .case-route span::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc-orange);
  box-shadow: 0 0 0 4px #ff7a001f;
}
#proof .case-route i {
  flex: 1 1 24px;
  min-width: 16px;
  height: 1px;
  background: var(--rc-line-strong);
}
#proof .case-route i::after {
  top: -3px;
  width: 7px;
  height: 7px;
  background: var(--dp-station);
}

#proof .case-bottom {
  display: grid;
  grid-template-columns: var(--dp-cols);
  gap: 24px var(--dp-gap);
  align-items: center;
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: 32px;
  border-top: 1px solid var(--rc-line);
}
#proof .case-bottom > p {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--rc-ink-2);
}
#proof .case-bottom .manual-effort-note {
  margin: 0;
  padding: 18px 24px 18px 44px;
  border-radius: var(--rc-radius-md);
  background: var(--rc-cream);
  list-style: disc outside;
  font-size: 16px;
  line-height: 1.55;
  color: var(--dp-ink-strong);
}
#proof .case-bottom .manual-effort-note li { display: list-item; }
#proof .case-bottom .manual-effort-note li::marker { color: var(--rc-ink); font-size: 1.1em; }
#proof .case-bottom .manual-effort-note strong { font-weight: 500; color: var(--rc-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  #proof .case-intro > img { width: min(400px, 100%); }
}
@media (max-width: 1100px) {
  #capacity .capacity-copy .capacity-number { font-size: clamp(80px, 8.4vw, 96px); }
  /* Give the panel copy more of the row so every tab stays within three lines. */
  #capacity .scope-explorer #scope-panel { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
  #proof .case-route { font-size: 18px; gap: 10px; }
  #proof .case-route span { padding: 10px 18px 10px 14px; }
}
@media (max-width: 900px) {
  #capacity .section-top,
  #capacity .capacity-grid,
  #proof .case-bottom { grid-template-columns: minmax(0, 1fr); }
  #capacity .section-top { align-items: start; gap: 24px; }
  #capacity .capacity-grid { gap: 40px; }
  #capacity .capacity-copy > p:not(.capacity-number) { max-width: 560px; }
  #capacity .scope-explorer #scope-panel { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #proof .case-route { flex-wrap: wrap; justify-content: center; }
  #proof .case-route i { display: none; }
}
@media (max-width: 760px) {
  /* Three large numbers no longer fit side by side here: stack vertically, still centred, no dividers. */
  #proof .case-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 40px;
    padding: 36px 20px;
    border-radius: 24px;
  }
  #proof .case-facts > div > strong { font-size: clamp(48px, 15vw, 60px); }
  #proof .case-facts > div > span { margin-top: 8px; font-size: 16px; }
}
@media (max-width: 620px) {
  #capacity .section-top { margin-bottom: 40px; }
  #capacity .capacity-copy .capacity-number { font-size: min(84px, 23.5vw); }
  #capacity .capacity-copy h3 { margin-top: 18px; font-size: 24px; }
  #capacity .capacity-copy > p:not(.capacity-number) { font-size: 17px; }

  #capacity .delivery-stage.glass-panel {
    padding: 18px 14px 26px;
    border-radius: var(--rc-radius-lg) !important;
  }
  #capacity .delivery-card { padding: 18px 16px 22px; border-radius: 16px; }
  #capacity .delivery-stage .delivery-stage-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 10px;
    padding-bottom: 14px;
    font-size: 16px;
  }
  #capacity .delivery-stage .delivery-stage-head .winspeed-mark { width: 22px; height: 19px; }
  #capacity .delivery-stage .visual-label { font-size: 12px !important; padding: 4px 10px; }
  #capacity .delivery-stage .lane-labels { margin-top: 18px; font-size: 12px; }
  #capacity .delivery-stage .lane-labels > span,
  #capacity .delivery-stage .lane-labels > span:first-child,
  #capacity .delivery-stage .lane-labels > span:last-child { width: auto; justify-content: flex-start; }
  #capacity .delivery-stage .delivery-lanes { gap: 18px; }
  #capacity .delivery-stage .delivery-stage-foot {
    width: auto;
    margin: -16px 6px 0;
    padding: 12px 16px 12px 12px;
    column-gap: 12px;
    font-size: 13px;
  }
  #capacity .delivery-stage .delivery-stage-foot::before { width: 32px; height: 32px; background-size: 16px, auto; }
  #capacity .delivery-stage .delivery-stage-foot strong { font-size: 16px; }

  #capacity .scope-explorer { gap: 14px; margin-top: 56px; }
  /* Three long labels cannot share one row on a phone, so the segmented bar stacks. */
  #capacity .scope-explorer .scope-tabs {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 6px;
    border-radius: var(--rc-radius-lg);
  }
  #capacity .scope-explorer .scope-tabs button:not([aria-selected="true"]),
  #capacity .scope-explorer .scope-tabs button[aria-selected="true"] {
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 22px;
    font-size: 16px;
    text-align: left;
  }
  #capacity .scope-explorer #scope-panel { padding: 24px 22px; border-radius: 24px; }
  #capacity .scope-explorer #scope-panel h3 { font-size: 24px; }
  #capacity .scope-explorer #scope-panel p { min-height: calc(4 * 1.5em); font-size: 17px; }

  #proof .case-intro .case-promise { margin-bottom: 36px; font-size: clamp(30px, 8.6vw, 38px); line-height: 1.15; }
  #proof .case-intro > img { width: min(320px, 100%); margin-bottom: 32px; }
  #proof .case-intro #proof-title { font-size: clamp(28px, 7.8vw, 34px); }
  #proof .case-intro > p { font-size: 17px; }


  #proof .case-route {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    margin-top: 32px;
    font-size: 17px;
  }
  #proof .case-route span {
    min-height: 56px;
    padding: 12px 14px;
    border-radius: 18px;
    white-space: normal;
  }
  #proof .case-route i { display: none; }
  #proof .case-bottom { gap: 20px; margin-top: 40px; padding-top: 28px; }
  #proof .case-bottom > p { font-size: 17px; }
  #proof .case-bottom .manual-effort-note { padding: 16px 18px 16px 36px; font-size: 16px; }
}
/* Panel heights sized to the longest of the three tabs, so switching tabs does not move the page. */
@media (max-width: 400px) {
  #capacity .scope-explorer #scope-panel { min-height: 252px; }
}
@media (max-width: 340px) {
  #capacity .scope-explorer #scope-panel { min-height: 304px; }
}
@media (max-width: 360px) {
  #capacity .delivery-stage .delivery-stage-foot { margin-inline: 0; }
  #proof .case-route { gap: 10px; }
  #proof .case-route span { padding: 12px 12px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #capacity .scope-explorer .scope-tabs button { transition: none; }
  /* style.css stops the lanes and parks every item at 45%; stagger them between stations instead,
     so the still frame still reads as parallel work at different stages. */
  html:not([data-motion="full"]) #capacity .delivery-stage .delivery-lanes > div i { left: calc(50% - 12px); }
  html:not([data-motion="full"]) #capacity .delivery-stage .delivery-lanes > div:nth-child(2) i,
  html:not([data-motion="full"]) #capacity .delivery-stage .delivery-lanes > div:nth-child(5) i { left: calc(83.3% - 12px); }
  html:not([data-motion="full"]) #capacity .delivery-stage .delivery-lanes > div:nth-child(3) i { left: calc(16.7% - 12px); }
}
@media (forced-colors: active) {
  #capacity .delivery-stage.glass-panel,
  #capacity .delivery-card,
  #capacity .delivery-stage .delivery-stage-foot,
  #capacity .scope-explorer .scope-tabs,
  #capacity .scope-explorer #scope-panel,
  #proof .case-facts,
  #proof .case-route span,
  #proof .case-bottom .manual-effort-note { border: 1px solid CanvasText; }
  #capacity .scope-explorer .scope-tabs button[aria-selected="true"] { outline: 2px solid Highlight; }
  #capacity .delivery-stage .delivery-stage-head .winspeed-mark { forced-color-adjust: none; background: CanvasText; }
}

/* "How each implementation runs." Four stages matching the illustration's lanes (added by parent). */
#capacity .delivery-flow { margin-top: clamp(56px, 6vw, 88px); }
#capacity .delivery-flow > h3 { margin-bottom: 28px; }
#capacity .delivery-flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#capacity .delivery-flow-steps > li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px 30px;
  border-radius: var(--rc-radius-lg);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow);
}
/* Same orange-gradient tile as the outbound step numbers. */
#capacity .delivery-flow-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 13px;
  background: linear-gradient(150deg, #ffcfa8 0%, #ff9a4f 48%, #ff7a00 100%);
  box-shadow: inset 0 1px 0 #ffffffb3;
  color: var(--rc-ink);
  font: 500 19px/1 var(--font);
}
#capacity .delivery-flow-steps h4 { margin: 0; font-size: 20px; }
#capacity .delivery-flow-steps p { margin: 0; font-size: 16px; line-height: 1.5; }
@media (max-width: 1100px) {
  #capacity .delivery-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  #capacity .delivery-flow-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #capacity .delivery-flow-steps > li { padding: 22px 20px 24px; }
}

/* ---------- Proof: manual-effort comparison callout (user request: "call this out a bit more") ----------
   Replaces the small manual-effort bullet. A calm --rc-grad-cool panel holds two cards with a "vs" chip
   between them. Both large figures take the "20 – 50" orange gradient (user request); the left side reads as the
   estimate through its "Manual estimate" label and the verbatim caption, not through a muted colour. Units stay ink
   so orange is only ever the large numeral. No speed-up multiple is computed or shown.
   The callout is now the only child of .case-bottom (closing paragraph removed by user request), so the old
   two-column grid and top rule give way to a single full-width block. Local tokens are prefixed --ec-. */
#proof .case-bottom {
  display: block;
  margin-top: clamp(40px, 4.4vw, 64px);
  padding-top: 0;
  border-top: 0;
}
#proof .effort-compare {
  --ec-num: clamp(64px, 6.2vw, 100px);
  --ec-ink-strong: #2b2926e6; /* 90% ink for small text on the translucent card */
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(20px, 2.4vw, 36px);
  border-radius: var(--rc-radius-xl);
  background: var(--rc-grad-cool);
}
#proof .effort-compare-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
}
#proof .effort-compare .effort-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: clamp(32px, 3.4vw, 56px) clamp(20px, 2.4vw, 40px);
  border-radius: var(--rc-radius-lg);
  text-align: center;
}
#proof .effort-compare .effort-side--manual {
  background: #ffffffb3;
  box-shadow: inset 0 0 0 1px #ffffffd9;
}
#proof .effort-compare .effort-side--winspeed {
  background: var(--rc-white);
  box-shadow: var(--rc-shadow-lift);
}
/* The chip overlaps both card edges (negative inline margins), so it reads as a single "versus" hinge. */
#proof .effort-compare .effort-vs {
  position: relative;
  z-index: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-inline: -18px;
  border-radius: 50%;
  background: var(--rc-ink);
  box-shadow: 0 0 0 6px #ffffff8c, var(--rc-shadow);
  color: var(--rc-white);
  font: 500 17px/1 var(--font);
  letter-spacing: 0.02em;
}
#proof .effort-compare .effort-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ec-ink-strong);
}
#proof .effort-compare .effort-label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.5px solid var(--rc-ink-3);
}
#proof .effort-compare .effort-side--winspeed .effort-label { color: var(--rc-ink); }
#proof .effort-compare .effort-side--winspeed .effort-label::before {
  border: 0;
  background: var(--rc-orange);
  box-shadow: 0 0 0 4px #ff7a001f;
}
#proof .effort-compare .effort-value {
  margin: 0;
  font-size: var(--ec-num);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--rc-ink);
}
/* Same look as "20 – 50" in rc-polish.css: orange gradient clipped to the glyphs plus one soft drop-shadow
   (a single layer only; a wide faint second layer caused banding rings). The "+" and "<" sit inside .effort-num,
   so they share the gradient. Inline-block with a little block padding keeps the raised "+" inside the painted box. */
#proof .effort-compare .effort-num {
  display: inline-block;
  width: fit-content;
  padding-block: 0.08em;
  margin-block: -0.08em;
  color: var(--rc-orange); /* fallback where background-clip: text is unsupported */
  background: linear-gradient(180deg, #ffa451 0%, #ff7a00 56%, #f06200 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 16px #ff8a3d80);
}
#proof .effort-compare .effort-num sup {
  margin-left: 2px;
  font-size: 0.5em;
  font-weight: 500;
  line-height: 0;
  vertical-align: 0.62em;
}
#proof .effort-compare .effort-unit {
  font-size: 0.4em;
  letter-spacing: -0.01em;
  color: var(--rc-ink);
}
#proof .effort-compare .effort-sub {
  max-width: 400px;
  margin: clamp(12px, 1.2vw, 16px) auto 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--rc-ink-2);
  text-wrap: balance;
}
#proof .effort-compare .effort-side--manual .effort-sub { color: var(--ec-ink-strong); }
#proof .effort-compare-caption {
  max-width: 780px;
  margin: clamp(20px, 2.2vw, 30px) auto 0;
  padding: 0 8px;
  text-align: center;
}
#proof .effort-compare-caption p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--rc-ink);
  text-wrap: pretty;
}
#proof .effort-compare-caption strong { font-weight: 700; color: var(--rc-ink); }

/* Optional motion: the two large figures rise in as they scroll into view; the Winspeed side lands slightly later.
   The ranges finish while the figures are still in the lower half of the viewport, so they are settled well before
   they are read. Without scroll-timeline support the figures simply show. */
@supports (animation-timeline: view()) {
  #proof .effort-compare .effort-value {
    animation: ec-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
  }
  #proof .effort-compare .effort-side--winspeed .effort-value {
    animation-name: ec-rise-strong;
    animation-range: entry 30% cover 30%;
  }
}
@keyframes ec-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes ec-rise-strong {
  from { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #proof .effort-compare .effort-value { animation: none; }
}
html[data-motion="reduced"] #proof .effort-compare .effort-value { animation: none; }

/* Phones: stack the two sides with the chip between them, overlapping both card edges vertically. */
@media (max-width: 760px) {
  #proof .effort-compare { --ec-num: clamp(52px, 16vw, 72px); padding: 14px; border-radius: var(--rc-radius-lg); }
  #proof .effort-compare-sides { grid-template-columns: minmax(0, 1fr); }
  #proof .effort-compare .effort-side { padding: 30px 18px 34px; border-radius: 20px; }
  #proof .effort-compare .effort-vs {
    justify-self: center;
    width: 48px;
    height: 48px;
    margin: -16px 0;
    font-size: 16px;
  }
  #proof .effort-compare-caption { margin-top: 20px; padding: 0 6px 6px; }
  #proof .effort-compare-caption p { font-size: 15px; }
}
@media (forced-colors: active) {
  #proof .effort-compare,
  #proof .effort-compare .effort-side,
  #proof .effort-compare .effort-vs { border: 1px solid CanvasText; }
}