/* Parent-owned finishing touches that cross section files. Loaded last. */

/* "20 – 50": orange gradient figure with a soft warm glow around the glyphs (user request).
   drop-shadow follows the letter shapes, unlike a pseudo-element, which would paint over clipped text. */
#capacity .capacity-copy .capacity-number {
  width: fit-content;
  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;
  /* One moderate glow: a very wide, very faint second layer showed banding rings on the flat page colour. */
  filter: drop-shadow(0 2px 16px #ff8a3d80);
}
/* "Implementations. Moving in parallel." takes the same orange gradient (user request), with a lighter glow
   so the smaller letters stay crisp. */
#capacity .capacity-copy h3 {
  width: fit-content;
  color: var(--rc-orange);
  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 1px 8px #ff8a3d4d);
}

/* Section labels ("Winspeed Data Security", "Winspeed Implementations"; user request): RingCentral eyebrow style
   with a short orange rule. Extra space below keeps them clear of the headings' clouds. */
:is(#outbound, #capacity, #proof, #expertise, #partnership) .section-eyebrow {
  position: relative;
  z-index: 1; /* paints above the heading's cloud if they ever touch */
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 46px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rc-ink);
}
:is(#outbound, #capacity, #proof, #expertise, #partnership) .section-eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--rc-orange);
}

/* Decorative phone, tossed across the top corner of the AIR Pro panel (Higgsfield render, background removed). */
#outbound #security .rc-air-stage { position: relative; }
#outbound #security .rc-air-stage > .air-phone {
  position: absolute;
  z-index: 2;
  top: clamp(-96px, -6vw, -48px);
  right: clamp(-72px, -4.4vw, -28px);
  width: clamp(170px, 17vw, 270px);
  height: auto;
  rotate: 8deg;
  pointer-events: none;
  /* The cutout lost its contact shadow; a soft drop shadow puts it back on the "surface". */
  filter: drop-shadow(0 22px 26px #2b292633) drop-shadow(0 4px 6px #2b29261f);
}
#outbound #security .rc-air-stage > .security-demo { position: relative; z-index: 1; }
@media (max-width: 960px) {
  /* Stacked layout: give the phone its own headroom so it never sits over the paragraph above. */
  #outbound #security .rc-air-stage { margin-top: clamp(48px, 12vw, 80px); }
  #outbound #security .rc-air-stage > .air-phone { top: clamp(-80px, -11vw, -44px); right: 2px; width: clamp(110px, 28vw, 180px); }
}
@media (max-width: 620px) {
  :is(#outbound, #capacity, #proof, #expertise, #partnership) .section-eyebrow { margin-bottom: 32px; font-size: 15px; gap: 10px; }
}

/* Outbound metrics (3,000 / 10,000+): centred in their halves on an evenly inset band, no divider (user request). */
#outbound .outbound-proof {
  margin-inline: 0;
  padding-inline: clamp(24px, 4vw, 56px);
  text-align: center;
}
#outbound .outbound-proof > article { justify-items: center; }
#outbound .outbound-proof p { margin-inline: auto; }
#outbound .outbound-proof article + article::before { content: none; display: none; }
#outbound .outbound-proof article + article { border-top: 0; }

/* Implementations preface (user request): a big confident statement before "Built for the work." */
#services .capacity-hype { margin: 0 auto clamp(64px, 7vw, 112px); max-width: 1120px; text-align: center; }
#services .capacity-hype .capacity-hype-line {
  margin: 0;
  font-size: clamp(42px, 6vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--rc-ink);
  text-wrap: balance;
}
#services .capacity-hype .capacity-hype-line span {
  display: inline-block;
  color: var(--rc-orange);
  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);
}
#services .capacity-hype .capacity-hype-sub {
  max-width: 46em;
  margin: clamp(22px, 2.4vw, 32px) auto 0;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--rc-ink-2);
}

/* Team icon centred above "Your team joins a conversation with context." (user request): no tile, larger,
   orange with the same soft glow as the page's other orange accents. The title wrapper hugs the heading's
   width so the icon centres over the text, not over the whole column. */
#outbound .outbound-handoff .handoff-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}
#outbound .outbound-handoff .handoff-icon {
  display: block;
  margin-bottom: 18px;
  color: var(--rc-orange);
  filter: drop-shadow(0 2px 12px #ff8a3d66);
}
#outbound .outbound-handoff .handoff-icon svg { display: block; width: 96px; height: 96px; }
#outbound .outbound-handoff .handoff-title > h3 { align-self: stretch; }
@media (max-width: 620px) {
  #outbound .outbound-handoff .handoff-icon svg { width: 78px; height: 78px; }
}

/* Outbound metrics numbers in the page's orange gradient + glow (user request). The band moves from peach to a
   white card, matching the VanillaSoft facts card, because orange on peach read too faintly. */
#outbound .outbound-proof {
  background: var(--rc-white);
  box-shadow: var(--rc-shadow);
}
#outbound .outbound-proof strong {
  width: fit-content;
  color: var(--rc-orange);
  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);
}
#outbound .outbound-proof h4 { text-wrap: balance; }

/* Professional services opener (moved to the top of the page per team feedback): the hype statement, then
   nine value-prop keywords with short definitions drawn from Winspeed's positioning draft. */
#services { padding-top: clamp(64px, 7vw, 112px); }
#services .services-title { margin: 0 0 clamp(28px, 3vw, 40px); }
#services .services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#services .services-grid > li {
  position: relative;
  padding: 30px 28px 32px;
  border-radius: var(--rc-radius-lg);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow);
}
/* Short orange rule, the same accent the section labels use. */
#services .services-grid > li::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: 2px;
  background: var(--rc-orange);
}
#services .services-grid h3 { margin: 0; font-size: 21px; line-height: 1.3; }
#services .services-grid p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; }
@media (max-width: 1100px) {
  #services .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  #services .services-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #services .services-grid > li { padding: 24px 22px 26px; }
}

/* Services pillars: Automation / Global reach / RingCentral experience (team feedback). Flat on the page with
   big orange words, so they read differently from the white value-prop cards below. */
#services .services-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin: 0 0 clamp(72px, 8vw, 120px);
  padding: 0;
  list-style: none;
}
#services .services-pillars h3 {
  width: fit-content;
  margin: 0;
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.1;
  color: var(--rc-orange);
  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 14px #ff8a3d73);
}
#services .services-pillars p { margin: 14px 0 0; font-size: 18px; line-height: 1.55; }
@media (max-width: 900px) {
  #services .services-pillars { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
/* Outbound intro centred (user request): heading in its cloud, partner marks centred beneath it. */
#outbound .outbound-intro { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
#outbound .outbound-intro #outbound-title { justify-self: center; margin-inline: auto; margin-bottom: 1.6em; }
#outbound .outbound-intro .outbound-partners { justify-self: center; }
/* A centred cloud needs even overhang on both sides, still kept inside the page gutter. */
#outbound .outbound-intro #outbound-title::before { inset-inline: calc(-1 * min(1.15em, var(--rc-gutter) - 4px)); }
@media (max-width: 620px) {
  #outbound .outbound-intro #outbound-title::before { inset-inline: calc(-1 * min(0.6em, var(--rc-gutter) - 3px)); }
}

/* Fourth pillar, full width under the three (leadership review): real-time data security, with a live dot and
   a pulse that sweeps left to right along a rule, like data moving through a protected route. */
#services .services-pillars { margin-bottom: clamp(44px, 4.6vw, 64px); }
#services .services-security { margin: 0 0 clamp(72px, 8vw, 120px); }
#services .services-security-head { display: flex; align-items: center; gap: 18px; }
#services .services-security h3 {
  width: fit-content;
  margin: 0;
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.1;
  color: var(--rc-orange);
  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 14px #ff8a3d73);
}
#services .services-security-dot {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rc-orange);
  box-shadow: 0 0 12px #ff8a3d99;
}
#services .services-security-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--rc-orange);
  border-radius: 50%;
  animation: rc-sec-ring 2.4s ease-out infinite;
}
#services .services-security-pulse {
  display: block;
  position: relative;
  height: 3px;
  margin: 22px 0 24px;
  border-radius: 2px;
  background: #ff7a002e;
  overflow: hidden;
}
#services .services-security-pulse i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 26%;
  background: linear-gradient(90deg, #ff7a0000, #ff7a00 60%, #ffc08a 85%, #ff7a0000);
  transform: translateX(-100%);
  animation: rc-sec-sweep 2.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
#services .services-security p { max-width: 1120px; margin: 0; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; }
@keyframes rc-sec-ring {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(3.2); opacity: 0; }
}
@keyframes rc-sec-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(390%); }
}
#services .services-security.ambient-paused .services-security-dot::after,
#services .services-security.ambient-paused .services-security-pulse i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #services .services-security-dot::after { animation: none; opacity: 0; }
  html:not([data-motion="full"]) #services .services-security-pulse i { animation: none; transform: none; width: 100%; opacity: 0.6; }
}

/* Scope board (leadership review): one larger box with all three scopes visible side by side. Picking one
   highlights it with the orange ring; the board also steps through them on its own until someone picks. */
#capacity .scope-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(64px, 7vw, 112px);
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: var(--rc-radius-xl);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow);
}
#capacity .scope-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: var(--rc-radius-lg);
  background: #f3f5f8;
  box-shadow: inset 0 0 0 2px transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
#capacity .scope-item.is-active {
  background: #fff6ee;
  box-shadow: inset 0 0 0 2px var(--rc-orange), 0 14px 34px #ff7a0024;
  transform: translateY(-3px);
}
#capacity .scope-item > button {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--rc-radius-xl);
  background: #2b29260f;
  color: var(--rc-ink-2);
  font: 500 15px/1.25 var(--font);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
#capacity .scope-item.is-active > button { background: var(--rc-orange); color: var(--rc-ink); }
#capacity .scope-item > button:focus-visible { outline: 2px solid var(--rc-blue); outline-offset: 2px; }
#capacity .scope-item h3 { margin: 0; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.25; text-wrap: balance; }
#capacity .scope-item p { margin: 0; font-size: 17px; line-height: 1.5; }
@media (max-width: 900px) {
  #capacity .scope-board { grid-template-columns: minmax(0, 1fr); border-radius: var(--rc-radius-lg); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #capacity :is(.scope-item, .scope-item > button) { transition: none; }
  html:not([data-motion="full"]) #capacity .scope-item.is-active { transform: none; }
}

/* "Net new revenue for RingCentral." called out under the Winspeed Outreach heading (leadership review). */
#outbound .outbound-intro .outbound-lede {
  max-width: 760px;
  margin: -0.4em auto 34px;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
#outbound .outbound-intro .outbound-lede strong {
  display: block;
  width: fit-content;
  margin: 0 auto 8px;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
  font-weight: 500;
  color: var(--rc-orange);
  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 1px 10px #ff8a3d59);
}
/* Longer VanillaSoft promise lines: balance the wrap so phones don't strand a single word. */
#proof .case-intro .case-promise, #proof .case-intro .case-promise span, #proof .case-intro #proof-title { text-wrap: balance; }
/* Data-security pillar centred (user request): heading row, pulse rule and paragraph share the page's centre line. */
#services .services-security { text-align: center; }
#services .services-security-head { justify-content: center; }
#services .services-security p { margin-inline: auto; text-wrap: balance; }
/* Hammer-and-square icon to the right of "What we bring to every implementation." (user request), in the same
   orange-with-glow treatment as the team icon. */
#services .services-title-row { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px); margin: 0 0 clamp(28px, 3vw, 40px); }
#services .services-title-row .services-title { margin: 0; }
#services .services-title-icon { flex: none; display: block; color: var(--rc-orange); filter: drop-shadow(0 2px 12px #ff8a3d66); }
#services .services-title-icon svg { display: block; width: clamp(48px, 4.4vw, 64px); height: auto; }
/* "Winspeed did it in a weekend." (user request): larger than the line above, in the page's orange gradient
   with a soft glow. inline-block lets the gradient and glow hug the words. */
#proof .case-intro .case-promise { max-width: 1240px; }
#proof .case-intro .case-promise span {
  display: inline-block;
  margin-top: 0.08em;
  font-size: 1.22em;
  line-height: 1.08;
  color: var(--rc-orange);
  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);
}
/* "Winspeed Outreach." in the orange gradient with a glow (user request). Styled on an inner span: a filter on
   the h2 itself would also put an orange glow around the heading's cloud (its ::before). */
#outbound .outbound-intro #outbound-title .outbound-title-text {
  display: inline-block;
  color: var(--rc-orange);
  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);
}

/* Pillars centred (user request). */
#services .services-pillars { text-align: center; }
#services .services-pillars h3 { margin-inline: auto; }

/* Marker-pen underlines under "Nobody" and "like Winspeed." (user request). Each is a tapered swoosh drawn as an
   SVG; it wipes in left to right when the line comes into view (app.js adds .marks-ready, then .marks-drawn). */
#services .capacity-hype .capacity-hype-line em.hype-mark { font-style: normal; color: inherit; }
#services .capacity-hype .capacity-hype-line .hype-mark { position: relative; }
#services .capacity-hype .capacity-hype-line .hype-mark::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -0.05em;
  height: 0.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath fill='%23ff7a00' d='M6 21C80 15 200 12 394 7c3 1 3 6-1 7C230 16 110 20 9 27c-5 0-6-5-3-6z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
#services .capacity-hype .capacity-hype-line span.hype-mark::after {
  bottom: -0.09em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath fill='%23ff7a00' d='M4 17c116 7 256 3 386-8 4 0 7 4 3 6C270 25 130 30 7 25c-5-1-6-6-3-8z'/%3E%3C/svg%3E");
}
#services .capacity-hype .capacity-hype-line.marks-ready .hype-mark::after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.42s cubic-bezier(0.55, 0, 0.25, 1);
}
#services .capacity-hype .capacity-hype-line.marks-drawn .hype-mark::after { clip-path: inset(0 0 0 0); }
#services .capacity-hype .capacity-hype-line.marks-drawn span.hype-mark::after { transition-delay: 0.38s; }

/* Value-prop cards: an orange glow passes through them one after another on first view (user request). */
#services .services-grid.is-lit > li { animation: rc-card-glow 1.5s ease both; animation-delay: calc(var(--i, 0) * 150ms); }
@keyframes rc-card-glow {
  0%, 100% { box-shadow: var(--rc-shadow); }
  35% { box-shadow: 0 0 0 2px #ff7a00, 0 10px 34px #ff7a0059; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #services .services-grid.is-lit > li { animation: none; }
}

/* Faint city skyline running behind the page below the hero (user request: "faint and super tasteful").
   It is fixed to the bottom of the screen behind all content, so cards and clouds sit in front of it. Sections
   must stay transparent (the page colour comes from the body) or the skyline would show section edges. */
main { background: transparent; }
:is(#services, #capacity, #proof, #expertise, #outbound, #partnership) { background-color: transparent; }
.city-horizon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: clamp(150px, 26vh, 280px);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
  /* Rises out of mist at the top and settles into mist at the base: no hard edge anywhere. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, #000 78%, transparent 100%);
}
.city-horizon.is-on { opacity: 0.75; }
.city-horizon > span {
  position: absolute;
  left: 0;
  right: -240px;
  bottom: 0;
  height: 100%;
  background: url(assets/skyline-back.svg?v=2) left bottom / auto 100% repeat-x;
  will-change: transform;
}
.city-horizon > .city-horizon-front { height: 64%; background-image: url(assets/skyline-front.svg?v=2); background-position: 37% bottom; }
/* With motion allowed, the same layers carry a few slow-blinking red aviation lights on the tallest towers. */
@media (prefers-reduced-motion: no-preference) {
  .city-horizon > .city-horizon-back { background-image: url(assets/skyline-back-lights.svg?v=2); }
  .city-horizon > .city-horizon-front { background-image: url(assets/skyline-front-lights.svg?v=2); }
}
html[data-motion="full"] .city-horizon > .city-horizon-back { background-image: url(assets/skyline-back-lights.svg?v=2); }
html[data-motion="full"] .city-horizon > .city-horizon-front { background-image: url(assets/skyline-front-lights.svg?v=2); }
/* A slow sideways drift tied to page scroll, the far layer slower than the near one. */
@supports (animation-timeline: scroll()) {
  .city-horizon > span { animation: rc-city-drift linear both; animation-timeline: scroll(root); }
  .city-horizon > .city-horizon-front { animation-name: rc-city-drift-near; }
}
@keyframes rc-city-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-90px, 0, 0); } }
@keyframes rc-city-drift-near { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-220px, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .city-horizon > span { animation: none; }
}

/* Small tilted Winspeed W tucked on the claim card's top-left corner (user request). */
.hero-claim > .hero-claim-mark {
  position: absolute;
  top: clamp(-22px, -1.4vw, -14px);
  left: clamp(-18px, -1.4vw, -8px);
  width: clamp(36px, 3.3vw, 54px);
  height: auto;
  rotate: -16deg;
  filter: drop-shadow(0 3px 6px #2b29262e);
  pointer-events: none;
}

/* Outreach heading: the Winspeed logo stands in for the word "Winspeed" (user request), in the same orange
   gradient and glow as "Outreach." Sized in em so it tracks the heading at every width. */
#outbound .outbound-intro #outbound-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.12em 0.32em; }
#outbound .outbound-intro #outbound-title .outbound-title-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  width: auto;
  filter: drop-shadow(0 2px 14px #ff8a3d73);
}
#outbound .outbound-intro #outbound-title .outbound-title-logo .winspeed-mark { width: 1.2em; height: 1.02em; }
#outbound .outbound-intro #outbound-title .outbound-title-logo .winspeed-wordmark {
  width: 3.3em;
  height: 0.74em;
  background: linear-gradient(180deg, #ffa451 0%, #ff7a00 56%, #f06200 100%);
}
/* "#1 RingCX seller globally." all in the orange gradient (user request). Inline, not inline-block, so the phrase
   can still wrap on phones; clone keeps the gradient whole on each line. */
.hero-claim .hero-claim-rank { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Scope labels are static now (all three scopes end up highlighted); same pill look as before. */
#capacity .scope-item { cursor: default; }
#capacity .scope-item > .scope-label {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--rc-radius-xl);
  background: #2b29260f;
  color: var(--rc-ink-2);
  font: 500 15px/1.25 var(--font);
  transition: background-color 0.3s ease, color 0.3s ease;
}
#capacity .scope-item.is-active > .scope-label { background: var(--rc-orange); color: var(--rc-ink); }

/* Marker underline under "Winspeed did it in a weekend." (user request): a touch thicker than the hero ones. */
#proof .case-intro .case-promise .hype-mark { position: relative; }
#proof .case-intro .case-promise .hype-mark::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.1em;
  height: 0.26em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath fill='%23ff7a00' d='M4 17c116 7 256 3 386-8 4 0 7 4 3 6C270 25 130 30 7 25c-5-1-6-6-3-8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
#proof .case-intro .case-promise.marks-ready .hype-mark::after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.45s cubic-bezier(0.55, 0, 0.25, 1) 0.15s;
}
#proof .case-intro .case-promise.marks-drawn .hype-mark::after { clip-path: inset(0 0 0 0); }

/* VanillaSoft route (user request): each connecting line fills orange in turn and the step it reaches lights
   up; everything stays lit. Lit is the default, so without motion or script the finished state shows. */
#proof .case-route span { transition: border-color 0.35s ease, box-shadow 0.35s ease; }
#proof .case-route span,
#proof .case-route.is-lit span { border-color: var(--rc-orange); box-shadow: 0 0 0 1px var(--rc-orange), 0 8px 22px #ff7a002e; }
#proof .case-route i { position: relative; height: 2px; border-radius: 1px; }
#proof .case-route i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffa451, #ff7a00);
  filter: drop-shadow(0 0 4px #ff8a3d);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.55, 0, 0.3, 1);
}
#proof .case-route.route-ready:not(.is-lit) span { border-color: var(--rc-line); box-shadow: var(--rc-shadow); }
#proof .case-route.route-ready:not(.is-lit) i::before { transform: scaleX(0); }
#proof .case-route.route-ready span:nth-of-type(2) { transition-delay: 0.55s; }
#proof .case-route.route-ready span:nth-of-type(3) { transition-delay: 1.15s; }
#proof .case-route.route-ready span:nth-of-type(4) { transition-delay: 1.75s; }
#proof .case-route.route-ready i:nth-of-type(1)::before { transition-delay: 0.15s; }
#proof .case-route.route-ready i:nth-of-type(2)::before { transition-delay: 0.75s; }
#proof .case-route.route-ready i:nth-of-type(3)::before { transition-delay: 1.35s; }
/* The small station dot at each line's end turns orange as the line reaches it. */
#proof .case-route i::after { background: var(--rc-orange); transition: background-color 0.25s ease; }
#proof .case-route.route-ready:not(.is-lit) i::after { background: var(--dp-station); }
#proof .case-route.route-ready i:nth-of-type(1)::after { transition-delay: 0.5s; }
#proof .case-route.route-ready i:nth-of-type(2)::after { transition-delay: 1.1s; }
#proof .case-route.route-ready i:nth-of-type(3)::after { transition-delay: 1.7s; }

/* "Winspeed Outreach." as big as the VanillaSoft promise, with a slow breathing glow (Tim's call). Everything in
   the heading is sized in em, so the logo and cloud scale with it. */
#outbound .outbound-intro #outbound-title { font-size: clamp(44px, 5.6vw, 84px); line-height: 1.05; }
#outbound .outbound-intro #outbound-title :is(.outbound-title-text, .outbound-title-logo) { animation: rc-outreach-pulse 2.8s ease-in-out infinite; }
@keyframes rc-outreach-pulse {
  0%, 100% { filter: drop-shadow(0 2px 14px #ff8a3d66); }
  50% { filter: drop-shadow(0 2px 30px #ff8a3dcc) drop-shadow(0 0 6px #ffb06e99); }
}
/* "OUTREACH." drawn in the logo's lettering (qa/outreach-wordmark-gen.py), since the logo has no font. Same mask-
   over-gradient build as the logo wordmark, with letters the same height: the logo's letters fill 133/924 of its
   3.3em box. The glow stays on the outer span; a filter on the masked element would be masked away. */
#outbound .outbound-intro #outbound-title .outbound-title-text {
  display: inline-flex;
  align-items: center;
  background: none;
  -webkit-text-fill-color: currentColor;
}
#outbound .outbound-intro #outbound-title .outreach-wordmark {
  display: block;
  height: calc(3.3em * 133 / 924);
  width: auto;
  aspect-ratio: 1043 / 132;
  background: linear-gradient(180deg, #ffa451 0%, #ff7a00 56%, #f06200 100%);
  -webkit-mask: url(assets/outreach-wordmark.svg?v=1) center / contain no-repeat;
  mask: url(assets/outreach-wordmark.svg?v=1) center / contain no-repeat;
}
@media (max-width: 620px) {
  #outbound .outbound-intro #outbound-title { font-size: clamp(30px, 9.4vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #outbound .outbound-intro #outbound-title :is(.outbound-title-text, .outbound-title-logo) { animation: none; }
}

/* Outreach step chips in two pairs, so the fourth sits beside the third (Tim's call). A full-width spacer ordered
   between the pairs forces the break; a pair too long for its row still wraps instead of overflowing. Row gap
   moves onto the chips because the spacer would otherwise add a second gap. Phones keep the plain wrapping row. */
@media (min-width: 621px) {
  #outbound .outbound-signals { row-gap: 0; margin-bottom: 28px; }
  #outbound .outbound-signals > span { order: 1; margin-bottom: 8px; }
  #outbound .outbound-signals > span:nth-child(n + 3) { order: 3; }
  #outbound .outbound-signals::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
}