/* RingCentral.com theme foundation. Reference: www.ringcentral.com, captured October 19, 2026.
   Loaded after every older theme file, so it wins ties. Section files (rc-*.css) build on these tokens. */
:root {
  /* Cool grey-blue page (user request) so white cards and warm panels stand off it; RingCentral itself uses #fbfbf9. */
  --rc-page: #e0e6ed;
  --rc-page-clear: #e0e6ed00;
  --rc-white: #fff;
  --rc-ink: #2b2926;
  --rc-ink-2: #2b2926b3; /* RingCentral's 70% secondary text */
  --rc-ink-3: #2b292673;
  --rc-line: #2b29261f;
  --rc-line-strong: #2b292633;
  --rc-chip: #c8c2b433; /* warm grey fill used for tab bars and chips */
  --rc-blue: #066fac; /* primary pill buttons */
  --rc-blue-hover: #055b8e;
  --rc-link: #007db8;
  --rc-orange: #ff7a00;
  --rc-orange-soft: #ff8e46;
  --rc-peach: #ffdbd1;
  --rc-cream: #fef4e8;

  /* Signature soft panel: cream top-left warming to orange bottom-right. */
  --rc-grad-warm:
    radial-gradient(120% 90% at 100% 100%, #ff8e46 0%, #ffaf7a 26%, #fde1d3 52%, #fef4e800 78%),
    linear-gradient(135deg, #fefcf8 0%, #fef4e8 100%);
  /* Cooler variant: blue-lavender top-left into orange bottom-right. */
  --rc-grad-cool:
    radial-gradient(110% 90% at 100% 100%, #ff8e46 0%, #ffb488 30%, #ffb48800 62%),
    radial-gradient(90% 80% at 0% 0%, #b7d3f2 0%, #d9d4f2 40%, #d9d4f200 75%),
    linear-gradient(135deg, #eef1fb, #fde1d3);
  /* Full-width band behind stats, like the "global leader" strip. */
  --rc-grad-band: linear-gradient(100deg, #f7d7c0 0%, #f6e3d6 45%, #ebd8ca 100%);

  --rc-radius-xl: 40px;
  --rc-radius-lg: 28px;
  --rc-radius-md: 20px;
  --rc-radius-sm: 12px;
  --rc-shadow: 0 1px 2px #2b29260a, 0 8px 24px #2b29260f;
  --rc-shadow-lift: 0 2px 4px #2b29260d, 0 18px 40px #2b292617;
  --rc-wrap: 1312px;
  --rc-gutter: clamp(20px, 4.4vw, 64px);
  --rc-section-y: clamp(72px, 8.5vw, 128px);

  /* Remap the older theme variables so legacy rules inherit the new palette. */
  --ink: var(--rc-ink);
  --body: var(--rc-ink-2);
  --navy: var(--rc-ink);
  --blue: var(--rc-blue);
  --line: var(--rc-line);
  --paper: var(--rc-white);
  --font: NeueHaasGroteskDisplayPro, Helvetica, Arial, sans-serif;
}

html { scrollbar-color: #b4bfcc var(--rc-page); }
body { background: var(--rc-page); color: var(--rc-ink); font-family: var(--font); }
/* The fixed cloud plate belonged to the previous direction; RingCentral pages sit on flat off-white. */
body::before { content: none; display: none; animation: none; }
main { background: var(--rc-page); }
::selection { background: var(--rc-peach); color: var(--rc-ink); }
:focus-visible { outline: 2px solid var(--rc-blue); outline-offset: 3px; }

.wrap { width: min(var(--rc-wrap), calc(100% - 2 * var(--rc-gutter))); }
.section { padding-block: var(--rc-section-y); }

/* Typography. The id-scoped list matches the specificity of the older theme files so these win. */
:is(#outbound, #security, #capacity, #proof, #expertise, #partnership, #services) h2 {
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.17;
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--rc-ink);
  text-wrap: balance;
}
:is(#outbound, #security, #capacity, #proof, #expertise, #partnership, #services) h2 span { color: inherit; }
:is(#outbound, #security, #capacity, #proof, #expertise, #partnership, #services) h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.25;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--rc-ink);
}
:is(#outbound, #security, #capacity, #proof, #expertise, #partnership, #services) h4 {
  font-size: 18px;
  line-height: 1.33;
  font-weight: 500;
  color: var(--rc-ink);
}
:is(#outbound, #security, #capacity, #proof, #expertise, #partnership, #services) p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--rc-ink-2);
}

/* Small uppercase label, as RingCentral uses above section headings ("RINGEX"). */
.rc-eyebrow {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-ink);
}

/* Pill buttons. */
.shimmer-button {
  --button-surface: var(--rc-blue);
  --shimmer-color: #ffffff59;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--rc-radius-xl);
  background: var(--rc-blue);
  color: #fff;
  font: 500 16px/1.2 var(--font);
  box-shadow: none;
}
.shimmer-button:hover { --button-surface: var(--rc-blue-hover); background: var(--rc-blue-hover); box-shadow: none; }

/* Legacy glass surfaces become plain RingCentral cards. */
.glass-panel, .glass-panel--light {
  border: 1px solid var(--rc-line);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow);
  backdrop-filter: none;
}
.edge-glow { box-shadow: var(--rc-shadow); }

/* Hero hands off to the flat page colour instead of white over clouds. */
.hero--cinematic::after { background: linear-gradient(180deg, var(--rc-page-clear), #e0e6edb3 52%, var(--rc-page)); }
/* The outbound section's old tinted chapter background (outbound.css) must stay off wherever the section sits,
   or its edges show against the page. Previously this only applied while it followed the hero. */
#outbound::before { background: none; }

@media (max-width: 620px) {
  :is(#outbound, #security, #capacity, #proof, #expertise, #partnership, #services) h2 { font-size: clamp(30px, 8.4vw, 36px); line-height: 1.17; }
  :is(#outbound, #security, #capacity, #proof, #expertise, #partnership, #services) h3 { font-size: 24px; }
  :is(#outbound, #security, #capacity, #proof, #expertise, #partnership, #services) p { font-size: 17px; }
}