/* Visual reference: RingCentral's RingEX landing page, inspected October 19, 2026. */
:root {
  --ink: #2b2926;
  --body: #4b4945;
  --navy: #2b2926;
  --blue: #007db8;
  --orange: #ff7a00;
  --line: #2b292620;
  --paper: #fff;
  --rc-mesh: radial-gradient(ellipse at 25% 0, #ffffffed 15%, transparent 68%), radial-gradient(ellipse at 92% 6%, #e5b8de70, transparent 55%), radial-gradient(ellipse at 58% 0, #bde5fa70, transparent 60%), radial-gradient(ellipse at 0 100%, #ffdb99d9, transparent 55%), radial-gradient(ellipse at 100% 100%, #ff8e449e, transparent 68%);
  --pearl-glass: linear-gradient(125deg, #ffffffe8, #ffffffe0 55%, #fff4e9db);
  --pearl-shadow: inset 0 1px 0 #fff, 0 12px 28px #2b292610;
}
html { scrollbar-color: #b7b4ae #f6f5f1; }
body { background: #f7f0e6; isolation: isolate; }
/* One viewport-sized cloud scene keeps the texture continuous between chapters. */
body::before {
  content: "";
  position: fixed;
  inset: -24px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, #ffffffa6, #ffffff94 55%, #fffaf0a1),
    url("assets/city-cloud-background.webp") center / cover no-repeat;
  animation: cloud-atmosphere 36s ease-in-out infinite alternate;
}
main { background: transparent; }
@keyframes cloud-atmosphere {
  from { transform: translate3d(-8px, 0, 0) scale(1.01); }
  to { transform: translate3d(8px, -8px, 0) scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) body::before { animation: none; }
}
::selection { background: #ffdb99; color: #2b2926; }
:focus-visible { outline-color: #007db8; }
h2 span { color: inherit; text-decoration: none; }
h2 { font-size: clamp(38px, 4vw, 56px); }
.shimmer-button {
  --button-surface: linear-gradient(180deg, #0789c2, #007db8 54%, #0074ac);
  --shimmer-color: #c9efff;
  color: #fff;
  border-color: #007db8;
  border-radius: 40px;
  background: #007db8;
  box-shadow: inset 0 1px 0 #ffffff40, 0 4px 12px #007db812;
}
.shimmer-button:hover {
  border-color: #006ca1;
  box-shadow: 0 8px 20px #007db824;
  --button-surface: #006ea6;
}
.glass-panel, .glass-panel--light { border-color: #fff9; background: var(--pearl-glass); box-shadow: var(--pearl-shadow); }
.edge-glow { box-shadow: var(--pearl-shadow); }
.hero--cinematic::after { background: linear-gradient(180deg, #fff0, #ffffff70 48%, #fff); }
.hero--cinematic + .outbound-section::before {
  background: linear-gradient(180deg, #fff, #fff0 240px);
}
.outbound-section { background: transparent; color: var(--ink); padding-bottom: 100px; }
.outbound-intro { margin-bottom: 56px; text-align: center; }
.outbound-intro h2, #outbound-title span { color: var(--ink); }
#outbound-title { padding-bottom: 0; margin-inline: auto; font-size: clamp(40px, 4.2vw, 60px); }
#outbound-title::after { content: none; }
.outbound-engine {
  gap: 30px;
  padding: 30px;
  border-radius: 28px;
  background: linear-gradient(135deg, #205987, #103452 75%);
  border: 1px solid #6a9fc0;
  box-shadow: inset 0 1px 0 #ffffff2b, 0 18px 45px #30251b33;
}
.outbound-steps { gap: 12px; }
.outbound-steps button {
  color: #fff3e3;
  border-color: #6a9fc0;
  border-radius: 20px;
  background: linear-gradient(115deg, #2b6491, #1b4d77);
  box-shadow: inset 0 1px 0 #ffffff24, 0 4px 12px #141a2340;
}
.outbound-steps button::before { background: linear-gradient(180deg, #ffffff18, #fff0); }
.outbound-steps button > span {
  color: #ffdbb4;
  background: #123e68;
  border-color: #80b4d2;
  box-shadow: none;
}
.outbound-steps button:hover { color: #fff3e3; background: #3477a6; border-color: #ffb86f; box-shadow: 0 6px 16px #11192440; }
.outbound-steps button[aria-selected="true"], .outbound-steps button[aria-selected="true"]:hover {
  color: #29231c;
  border-color: #ffc17a;
  background: linear-gradient(175deg, #ffb66b, #ff8d28 60%);
  box-shadow: inset 0 1px 0 #ffe4bd, 0 6px 16px #17141240;
}
.outbound-steps button[aria-selected="true"] > span { color: #29231c; background: #ffd29d; border-color: #b45b1d; }
.outbound-steps button:focus-visible { outline-color: #007db8; }
.outbound-detail {
  color: var(--ink);
  border: 10px solid #ff7a00;
  border-radius: 26px;
  background: #eed1aa;
  box-shadow: 0 10px 16px #2b29261a;
  padding: 32px;
}
.outbound-detail::before { background: linear-gradient(120deg, #f3dbba, #eac79d); }
.outbound-detail::after { border-color: transparent; border-radius: 16px; }
.outbound-detail h3 { color: var(--ink); }
.outbound-detail > p { color: var(--body); font-size: 20px; }
.outbound-path > span { background: #c2a989; }
.outbound-path > span.is-current { background: #ff7a00; box-shadow: none; }
.outbound-signals > span { color: #39332c; border-color: #c4a47f; background: #e2bd91; border-radius: 7px; font-size: 15px; }
.outbound-result > span { color: #0077ad; font-size: 16px; }
.outbound-result > p { color: var(--ink); border-color: #c4a47f; font-size: 19px; }
.outbound-channels { border-top: 0; margin-top: 84px; padding-top: 0; }
.outbound-subhead h3 { color: var(--ink); }
.outbound-subhead > p { color: var(--body); }
.channel-grid { gap: 24px; }
.channel-item {
  color: #fff3e3;
  border-color: #6a9fc0;
  border-radius: 20px;
  background: linear-gradient(155deg, #205987, #123e68 65%);
  box-shadow: inset 0 1px 0 #ffffff21, 0 8px 22px #29231c24;
}
.channel-item::before { background: linear-gradient(135deg, #ffffff0f, transparent 65%); }
.channel-item::after { border-color: #ffffff1f; }
.channel-item h4 { color: #fff3e3; }
.channel-item p { color: #e0ecf4; font-size: 18px; line-height: 1.65; }
.channel-item > span { background: #ff7a00; box-shadow: none; width: 32px; height: 4px; }
.outbound-proof { --metric-column-gap: 80px; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-inline: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--metric-column-gap); margin-top: 64px; }
.outbound-proof > article { min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.outbound-proof strong { color: #e86b08; font-size: clamp(64px, 7vw, 100px); }
.outbound-proof strong::after { display: none; }
.outbound-proof h4 { color: var(--ink); }
.outbound-proof p { color: #39332d; font-size: 16px; }
.outbound-proof article + article { position: relative; border-left: 0; padding-left: 0; }
.outbound-proof article + article::before { content: ""; position: absolute; inset-block: 0; left: calc(var(--metric-column-gap) * -.5); width: 1px; background: #e5e2dc; }
.outbound-handoff { background: transparent; color: var(--ink); padding: 0; margin-top: 84px; }
.outbound-handoff .wrap {
  padding: 52px;
  border: 1px solid #c4a47f;
  border-radius: 24px;
  background: linear-gradient(125deg, #f1d7b4, #e4bd90);
  box-shadow: inset 0 1px 0 #ffe9ca, 0 10px 26px #2b292624;
  gap: 64px;
}
.outbound-handoff p, .handoff-list span { color: var(--body); }
.handoff-list span { font-size: 18px; }
.handoff-list li, .handoff-list li:last-child { border-color: #2b292620; }
#outbound #security { padding: 84px 0 0; background: transparent; }
#proof .case-promise { max-width: 1000px; margin: 0 auto 52px; font-size: clamp(32px, 3.2vw, 46px); text-wrap: balance; }
#proof .case-promise span { color: #ff7a00; }
.manual-effort-note { margin: 0; padding-left: 20px; color: var(--body); font-size: 16px; line-height: 1.65; }
.manual-effort-note strong { font-weight: 500; }
#capacity .capacity-number { white-space: nowrap; letter-spacing: -.03em; word-spacing: .14em; }
@media (max-width: 1100px) {
  .outbound-engine { padding: 24px; gap: 22px; }
  .outbound-detail { padding: 26px; }
  .outbound-proof { --metric-column-gap: 45px; }
  .outbound-handoff .wrap { gap: 36px; padding: 36px; }
}
@media (max-width: 760px) {
  .outbound-section { padding-bottom: 64px; }
  .outbound-intro { margin-bottom: 36px; text-align: left; }
  #outbound-title { margin-inline: 0; text-wrap: balance; }
  #outbound-title br { display: none; }
  #outbound-title span { display: inline; }
  .outbound-engine { padding: 16px; gap: 14px; border-radius: 22px; }
  .outbound-steps { gap: 9px; scrollbar-color: #f1ba87 transparent; margin-inline: 0; padding: 4px 0 12px; }
  .outbound-steps button { border-radius: 28px; }
  .outbound-detail { padding: 24px; border-width: 7px; border-radius: 20px; min-height: 0; }
  .outbound-detail h3 { font-size: 30px; }
  .outbound-detail > p { font-size: 19px; }
  .outbound-steps button strong { font-size: 16px; }
  .outbound-result { margin-top: 28px; }
  .outbound-proof { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 12px 0; margin-top: 42px; }
  .outbound-proof > article { display: block; grid-row: auto; }
  .outbound-proof article + article { border-top-color: #e5e2dc; }
  .outbound-proof article + article::before { content: none; }
  .outbound-channels { margin-top: 64px; }
  .outbound-handoff { margin-top: 52px; }
  #outbound #security { padding-top: 64px; }
  .outbound-handoff .wrap { padding: 28px; border-radius: 20px; }
  #proof .case-promise { margin-bottom: 40px; }
}
@media (max-width: 400px) {
  .outbound-engine { padding: 12px; }
  .outbound-detail { padding: 20px; }
  .outbound-detail h3 { font-size: 27px; }
  .outbound-handoff .wrap { padding: 24px; }
}