/* RingCentral.com theme: rc-outbound. Builds on rc-theme.css tokens.
   Scope: the top of #outbound only (intro, engine, channels, proof). #security and .outbound-handoff
   are nested in #outbound but owned elsewhere, so every rule names a slice class. */

#outbound > .wrap {
  --ob-col-gap: clamp(40px, 5.6vw, 80px);
  --ob-tile: 48px;
  /* Faded steps. 56% ink holds 3:1 for the >=24px desktop labels; smaller labels use --rc-ink-2. */
  --ob-step-fade: #2b29268f;
  --ob-tile-on: linear-gradient(150deg, #ffcfa8 0%, #ff9a4f 48%, #ff7a00 100%);
  --ob-tile-off: linear-gradient(150deg, #fff3ea 0%, #ffdcc2 55%, #ffc39b 100%);
  --ob-check-bg: #f8ede3;
  --ob-note: #2b2926cc;
}

/* ---------- Intro: left-aligned RingCentral-scale heading, partner lockup to its right ---------- */
/* No overflow clipping, heading background or heading ::before here: rc-clouds.css paints a soft
   cloud under #outbound-title and the subhead h3 with ::before. Both headings hug their text. */
#outbound .outbound-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px clamp(32px, 4vw, 64px);
  /* Room for the cloud that overhangs the heading by about 1.1em, plus breathing space. */
  margin: 0 0 clamp(72px, 6.4vw, 96px);
  text-align: left;
}
/* margin-bottom is left to rc-clouds.css (1.1em under the cloud) except in the side-by-side
   layout, where the partner block is centred on the heading text itself. */
#outbound .outbound-intro #outbound-title {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
  margin-inline: 0;
  padding-bottom: 0;
}
@media (min-width: 961px) {
  #outbound .outbound-intro #outbound-title { margin-bottom: 0; }
}
#outbound .outbound-intro #outbound-title::after { content: none; }

/* Both marks sit straight on the page, with the line centred beneath them. */
#outbound .outbound-partners {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
#outbound .outbound-partners-logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
#outbound .outbound-partners .winspeed-lockup {
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
  width: auto;
}
/* Whole Winspeed lockup in solid orange through its masks, matching the closing panel. */
#outbound .outbound-partners .winspeed-mark {
  width: 52px;
  height: 44px;
  background: var(--rc-orange);
}
#outbound .outbound-partners .winspeed-wordmark {
  width: 160px;
  height: 23px;
  background: var(--rc-orange);
}
/* Thin vertical hairline instead of a literal plus. */
#outbound .outbound-partners-plus {
  display: block;
  flex: none;
  width: 1px;
  height: 40px;
  background: var(--rc-line-strong);
}
/* RingCentral's SVG keeps its original colours. */
#outbound .outbound-partners-logos > img {
  display: block;
  flex: none;
  width: 224px;
  max-width: none;
  height: auto;
}
#outbound .outbound-partners > p {
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
  color: var(--rc-ink-2);
}

/* ---------- Engine: step list beside a warm stage ---------- */
#outbound .outbound-engine {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.6fr);
  gap: clamp(40px, 6.7vw, 96px);
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#outbound .outbound-steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}
#outbound .outbound-steps button {
  position: relative;
  isolation: auto;
  display: grid;
  grid-template-columns: var(--ob-tile) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  width: calc(100% + 24px);
  min-height: 0;
  margin: 0 -12px;
  padding: 24px 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--ob-step-fade);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}
/* Hairlines between steps, drawn on a pseudo-element so the focus ring can stay rounded. */
#outbound .outbound-steps button::before { content: none; }
#outbound .outbound-steps button + button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 12px auto;
  height: 1px;
  border-radius: 0;
  background: var(--rc-line);
  pointer-events: none;
}
/* Number tile, after RingCentral's AIR / AVA / ACE icon tiles. */
#outbound .outbound-steps button > span {
  display: grid;
  place-items: center;
  width: var(--ob-tile);
  height: var(--ob-tile);
  min-width: var(--ob-tile);
  min-height: var(--ob-tile);
  border: 0;
  border-radius: 14px;
  background: var(--ob-tile-off);
  box-shadow: inset 0 1px 0 #ffffffb3;
  color: var(--rc-ink-2);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
#outbound .outbound-steps button strong {
  font-size: clamp(24px, 1.75vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: inherit;
  white-space: normal;
}
#outbound .outbound-steps button:hover {
  color: #2b2926c2;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
#outbound .outbound-steps button:hover > span { box-shadow: inset 0 1px 0 #ffffffb3, 0 4px 12px #ff7a0024; }
#outbound .outbound-steps button[aria-selected="true"],
#outbound .outbound-steps button[aria-selected="true"]:hover {
  color: var(--rc-ink);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
#outbound .outbound-steps button[aria-selected="true"] > span {
  background: var(--ob-tile-on);
  color: var(--rc-ink);
  box-shadow: inset 0 1px 0 #ffffffa6, 0 6px 16px #ff7a0033;
}
#outbound .outbound-steps button:focus-visible {
  outline: 2px solid var(--rc-blue);
  outline-offset: 2px;
}

/* Stage: the big soft panel, holding the detail as a white product-style card. */
#outbound .outbound-stage {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: clamp(24px, 3.9vw, 56px);
  border-radius: var(--rc-radius-xl);
  background: var(--rc-grad-warm);
}
#outbound .outbound-detail {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: var(--ob-card-h, 0px);
  margin: 0;
  padding: clamp(28px, 3.4vw, 48px);
  overflow: visible;
  border: 0;
  border-radius: var(--rc-radius-md);
  background: var(--rc-white);
  box-shadow: var(--rc-shadow-lift);
  color: var(--rc-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#outbound .outbound-detail::before,
#outbound .outbound-detail::after { content: none; }
#outbound .outbound-detail:focus-visible {
  outline: 2px solid var(--rc-blue);
  outline-offset: 4px;
}

/* Progress becomes slim segments across the top of the card. */
#outbound .outbound-path {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 clamp(28px, 2.8vw, 40px);
}
#outbound .outbound-path > span {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: #2b292614;
  box-shadow: none;
  transition: background 0.3s ease;
}
#outbound .outbound-path > span.is-current { background: linear-gradient(90deg, #ffa766, var(--rc-orange)); }

#outbound .outbound-detail h3 {
  max-width: 21em;
  margin: 0;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--rc-ink);
  text-wrap: balance;
}
#outbound .outbound-detail > p {
  max-width: 36em;
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--rc-ink-2);
}
#outbound .outbound-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 36px;
}
#outbound .outbound-signals > span {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--rc-chip);
  color: var(--rc-ink);
  font-size: 15px;
  line-height: 1.25;
}
#outbound .outbound-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 32px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--rc-line);
}
#outbound .outbound-result > span {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--rc-ink-2);
}
#outbound .outbound-result > p {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--rc-ink);
}
@container (max-width: 540px) {
  #outbound .outbound-result { grid-template-columns: minmax(0, 1fr); }
}

/* Each step gets its own keyframe name, so switching steps restarts the soft content reveal. */
@keyframes ob-in-0 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ob-in-1 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ob-in-2 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ob-in-3 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ob-in-4 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#outbound .outbound-detail :is(h3, [data-outbound-body], .outbound-signals, [data-outbound-result]) {
  animation: ob-in-0 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
#outbound .outbound-detail [data-outbound-body] { animation-delay: 0.03s; }
#outbound .outbound-detail .outbound-signals { animation-delay: 0.06s; }
#outbound .outbound-detail [data-outbound-result] { animation-delay: 0.09s; }
#outbound .outbound-detail[aria-labelledby="outbound-step-1"] :is(h3, [data-outbound-body], .outbound-signals, [data-outbound-result]) { animation-name: ob-in-1; }
#outbound .outbound-detail[aria-labelledby="outbound-step-2"] :is(h3, [data-outbound-body], .outbound-signals, [data-outbound-result]) { animation-name: ob-in-2; }
#outbound .outbound-detail[aria-labelledby="outbound-step-3"] :is(h3, [data-outbound-body], .outbound-signals, [data-outbound-result]) { animation-name: ob-in-3; }
#outbound .outbound-detail[aria-labelledby="outbound-step-4"] :is(h3, [data-outbound-body], .outbound-signals, [data-outbound-result]) { animation-name: ob-in-4; }

/* ---------- Channels: two-column subhead and an orange-check feature list ---------- */
#outbound .outbound-channels {
  margin-top: clamp(88px, 9vw, 144px);
  padding-top: 0;
  border-top: 0;
}
#outbound .outbound-subhead {
  --ob-subhead-size: clamp(30px, 2.8vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ob-col-gap);
  row-gap: 20px;
  /* Last-baseline alignment keeps the paragraph level with the heading's last line whatever bottom
     margin rc-clouds.css gives the h3 for its cloud. */
  align-items: end;
  align-items: last baseline;
}
#outbound .outbound-subhead h3 {
  justify-self: start;
  width: fit-content;
  max-width: min(14em, 100%);
  margin: 0;
  font-size: var(--ob-subhead-size);
  line-height: 1.17;
  letter-spacing: -0.005em;
  color: var(--rc-ink);
  text-wrap: balance;
}
#outbound .outbound-subhead > p {
  max-width: 30em;
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--rc-ink-2);
}

#outbound .channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 3.4vw, 48px) clamp(28px, 3.4vw, 48px);
  margin-top: clamp(40px, 4.4vw, 64px);
}
#outbound .channel-item {
  position: relative;
  isolation: auto;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 8px 16px;
  min-width: 0;
  padding: 28px 0 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--rc-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--rc-ink);
}
#outbound .channel-item::before,
#outbound .channel-item::after { content: none; }
/* The existing decorative span becomes a soft circle holding an orange check. */
#outbound .channel-item > span {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: block;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 50%;
  background: var(--ob-check-bg);
  box-shadow: none;
}
#outbound .channel-item > span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rc-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4 6.6 11.3 12.4 4.9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4 6.6 11.3 12.4 4.9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
#outbound .channel-item h4 {
  grid-column: 2;
  grid-row: 1;
  margin: 1px 0 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--rc-ink);
}
#outbound .channel-item p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: 28em;
  font-size: 17px;
  line-height: 1.55;
  color: var(--rc-ink-2);
}

/* ---------- Proof: RingCentral stats row on a soft band ---------- */
#outbound .outbound-proof {
  /* The band bleeds past the wrap by its own padding where there is room, so both metric columns
     line up with the subhead columns above. */
  --ob-bleed: clamp(0px, calc(max(var(--rc-gutter), (100vw - var(--rc-wrap)) / 2) - 24px), 56px);
  --ob-pad: max(var(--ob-bleed), 24px);
  --metric-column-gap: var(--ob-col-gap);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ob-col-gap);
  row-gap: 0;
  margin: clamp(72px, 7.4vw, 120px) calc(-1 * var(--ob-bleed)) 0;
  padding: clamp(40px, 4.4vw, 64px) var(--ob-pad);
  border: 0;
  border-radius: var(--rc-radius-lg);
  background: var(--rc-grad-band);
  box-shadow: none;
}
#outbound .outbound-proof > article {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
#outbound .outbound-proof article + article { border: 0; padding: 0; }
#outbound .outbound-proof article + article::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(var(--ob-col-gap) * -0.5);
  width: 1px;
  background: var(--rc-line-strong);
}
#outbound .outbound-proof strong {
  display: block;
  font-size: clamp(48px, 4.4vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rc-ink);
  -webkit-text-fill-color: currentColor;
  background: none;
}
#outbound .outbound-proof strong::after { content: none; display: none; }
#outbound .outbound-proof h4 {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--rc-ink);
}
#outbound .outbound-proof p {
  max-width: 30em;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ob-note);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #outbound > .wrap { --ob-tile: 44px; --ob-step-fade: var(--rc-ink-2); }
  #outbound .outbound-engine { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px; }
  #outbound .outbound-steps button { gap: 16px; padding-block: 20px; }
  #outbound .outbound-steps button > span { border-radius: 12px; font-size: 18px; }
  #outbound .outbound-steps button strong { font-size: 21px; }
  #outbound .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #outbound .outbound-partners { gap: 14px; }
  #outbound .outbound-partners-logos { gap: 22px; }
  #outbound .outbound-partners .winspeed-lockup { gap: 8px; }
  #outbound .outbound-partners .winspeed-mark { width: 42px; height: 36px; }
  #outbound .outbound-partners .winspeed-wordmark { width: 130px; height: 19px; }
  #outbound .outbound-partners-plus { height: 32px; }
  #outbound .outbound-partners-logos > img { width: 180px; }
  #outbound .outbound-partners > p { font-size: 18px; }
}

@media (max-width: 960px) {
  #outbound .outbound-engine { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #outbound .outbound-steps { justify-content: flex-start; }

  /* Stack the partner card under the heading. The intro becomes a size container so the marks
     scale with the available width and always fit side by side (proportions of the 1100px set). */
  #outbound .outbound-intro {
    container-type: inline-size;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  #outbound .outbound-partners {
    --pl-gap: clamp(12px, 4cqw, 22px);
    --pl-avail: calc(100cqw - 2 * var(--pl-gap) - 1px);
    justify-self: start;
  }
  #outbound .outbound-partners-logos { gap: var(--pl-gap); }
  #outbound .outbound-partners .winspeed-lockup { gap: min(8px, calc(var(--pl-avail) * 0.0222)); }
  #outbound .outbound-partners .winspeed-mark {
    width: min(42px, calc(var(--pl-avail) * 0.1167));
    height: min(36px, calc(var(--pl-avail) * 0.1));
  }
  #outbound .outbound-partners .winspeed-wordmark {
    width: min(130px, calc(var(--pl-avail) * 0.3611));
    height: min(19px, calc(var(--pl-avail) * 0.0528));
  }
  #outbound .outbound-partners-plus { height: min(32px, calc(var(--pl-avail) * 0.09)); }
  #outbound .outbound-partners-logos > img { width: min(180px, calc(var(--pl-avail) * 0.5)); }
}

@media (max-width: 760px) {
  #outbound > .wrap { --ob-tile: 38px; }
  #outbound .outbound-intro { margin-bottom: 36px; }
  #outbound .outbound-engine { gap: 24px; }
  #outbound .outbound-steps { flex-direction: column; overflow: visible; padding: 0; margin: 0; }
  #outbound .outbound-steps button {
    display: grid;
    flex: none;
    width: calc(100% + 16px);
    min-height: 0;
    margin: 0 -8px;
    gap: 14px;
    padding: 12px 8px;
    border-radius: 14px;
  }
  #outbound .outbound-steps button + button::before { inset-inline: 8px; }
  #outbound .outbound-steps button > span { border-radius: 11px; font-size: 16px; }
  #outbound .outbound-steps button strong { font-size: 19px; white-space: normal; }
  #outbound .outbound-stage { padding: 14px; border-radius: var(--rc-radius-lg); }
  #outbound .outbound-detail { padding: 24px 22px; border-radius: var(--rc-radius-md); }
  #outbound .outbound-path { margin-bottom: 24px; }
  #outbound .outbound-detail h3 { font-size: 24px; }
  #outbound .outbound-detail > p { font-size: 17px; }
  #outbound .outbound-signals { margin: 22px 0 28px; gap: 6px; }
  #outbound .outbound-signals > span { padding: 7px 12px; font-size: 14px; }
  #outbound .outbound-result > p { font-size: 17px; }
  #outbound .outbound-channels { margin-top: 72px; }
  #outbound .outbound-subhead { --ob-subhead-size: 30px; grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  #outbound .outbound-partners > p { font-size: 17px; }
  #outbound .outbound-subhead > p { font-size: 17px; }
  #outbound .channel-grid { gap: 32px 24px; margin-top: 36px; }
  #outbound .channel-item { padding-top: 24px; }
  #outbound .channel-item h4 { font-size: 19px; }
  #outbound .channel-item p { font-size: 16px; }
  #outbound .outbound-proof {
    grid-template-columns: minmax(0, 1fr);
    margin: 64px 0 0;
    padding: 32px 24px;
    border-radius: var(--rc-radius-md);
  }
  #outbound .outbound-proof > article { display: block; grid-row: auto; }
  #outbound .outbound-proof article + article { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rc-line-strong); }
  #outbound .outbound-proof article + article::before { content: none; }
  #outbound .outbound-proof strong { font-size: clamp(44px, 13vw, 56px); }
  #outbound .outbound-proof h4 { margin-top: 12px; font-size: 19px; }
  #outbound .outbound-proof p { font-size: 15px; }
}

@media (max-width: 560px) {
  #outbound .channel-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #outbound .channel-item { padding: 22px 0 24px; }
  #outbound .channel-item:last-child { padding-bottom: 0; }
}

@media (max-width: 400px) {
  #outbound .outbound-partners { gap: 12px; }
  #outbound .outbound-stage { padding: 10px; }
  #outbound .outbound-detail { padding: 22px 18px; }
  #outbound .outbound-detail h3 { font-size: 23px; }
  #outbound .outbound-proof { padding: 28px 20px; }
}

/* Card height floor per width band, sampled from the tallest of the five steps, so switching
   steps never makes the panel or the content below it jump. */
#outbound .outbound-detail { --ob-card-h: 564px; }
@media (max-width: 1439px) { #outbound .outbound-detail { --ob-card-h: 580px; } }
@media (max-width: 1279px) { #outbound .outbound-detail { --ob-card-h: 600px; } }
@media (max-width: 1100px) { #outbound .outbound-detail { --ob-card-h: 636px; } }
@media (max-width: 960px) { #outbound .outbound-detail { --ob-card-h: 464px; } }
@media (max-width: 760px) { #outbound .outbound-detail { --ob-card-h: 445px; } }
@media (max-width: 640px) { #outbound .outbound-detail { --ob-card-h: 499px; } }
@media (max-width: 560px) { #outbound .outbound-detail { --ob-card-h: 499px; } }
@media (max-width: 513px) { #outbound .outbound-detail { --ob-card-h: 537px; } }
@media (max-width: 489px) { #outbound .outbound-detail { --ob-card-h: 563px; } }
@media (max-width: 448px) { #outbound .outbound-detail { --ob-card-h: 588px; } }
@media (max-width: 428px) { #outbound .outbound-detail { --ob-card-h: 614px; } }
@media (max-width: 400px) { #outbound .outbound-detail { --ob-card-h: 608px; } }
@media (max-width: 375px) { #outbound .outbound-detail { --ob-card-h: 645px; } }
@media (max-width: 366px) { #outbound .outbound-detail { --ob-card-h: 672px; } }
@media (max-width: 349px) { #outbound .outbound-detail { --ob-card-h: 725px; } }
@media (max-width: 326px) { #outbound .outbound-detail { --ob-card-h: 751px; } }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #outbound .outbound-steps button,
  html:not([data-motion="full"]) #outbound .outbound-steps button > span,
  html:not([data-motion="full"]) #outbound .outbound-path > span { transition: none; }
  html:not([data-motion="full"]) #outbound .outbound-detail :is(h3, [data-outbound-body], .outbound-signals, [data-outbound-result]) { animation: none; }
}

@media (forced-colors: active) {
  #outbound .outbound-steps button[aria-selected="true"] strong { text-decoration: underline; text-underline-offset: 0.2em; }
  #outbound .outbound-path > span { background: CanvasText; opacity: 0.35; }
  #outbound .outbound-path > span.is-current { opacity: 1; }
  #outbound .channel-item > span::before { background: CanvasText; }
}