/* Compose the provider reference with Ariel layouts and shared identity tokens. */
.sp-page {
  --sp-bg: var(--page-bg);
  --sp-surface: var(--page-surface);
  --sp-soft: var(--page-surface-soft);
  --sp-copy: var(--page-copy);
  --sp-muted: var(--page-muted);
  --sp-text: var(--page-text);
  --sp-line: var(--page-border);
  --sp-accent: var(--page-accent);
  --sp-mint: #9acdb8;
  --sp-logo-light: #f7f9fc;
  --sp-logo-dark: #132036;
  --sp-logo-clear-space: 24px;
  --sp-logo-clear-space-akamai: 42px;
  --sp-rsync-surface: rgb(43 89 168 / 71%);
  --sp-rsync-text: #fff;
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: var(--font-interface);
  line-height: 1.6;
}
html[data-ariel-theme="light"] .sp-page {
  --sp-mint: #206e61;
}
.sp-page :where(h1, h2, h3, h4, p, ul, ol) {
  margin: 0;
}
.sp-page :where(h1, h2, h3, h4) {
  font-family: var(--font-interface);
  line-height: 1.15;
  letter-spacing: -0.049em;
}
.sp-page :where(h1, h2) em {
  color: var(--sp-accent);
  font-family: var(--font-editorial);
  font-weight: 500;
  letter-spacing: -0.055em;
}
.sp-page :focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: 4px;
}
.sp-page svg {
  display: block;
}
.sp-container {
  inline-size: min(100% - 2.4rem, 80rem);
}
.sp-eyebrow {
  --ariel-gap: 0.75rem;
  flex-wrap: nowrap;
  color: var(--sp-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.sp-pin {
  flex: 0 0 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--sp-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sp-accent) 12%, transparent);
}
.sp-eyebrow__number,
.sp-eyebrow__separator,
.sp-flow__number,
.sp-checklist__no {
  flex-shrink: 0;
  color: var(--sp-accent);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.sp-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--header-height) + 1.55rem) 1.7rem;
  border-block-end: 1px solid var(--sp-line);
  background:
    radial-gradient(
      ellipse at 88% 57%,
      color-mix(in srgb, var(--sp-accent) 9%, transparent),
      transparent 56%
    ),
    var(--sp-bg);
}
.sp-breadcrumb {
  --ariel-gap: 0.8rem;
  color: var(--sp-muted);
  font-size: 0.73rem;
  font-weight: 750;
}
.sp-breadcrumb a:hover,
.sp-breadcrumb > span:nth-child(2) {
  color: var(--sp-accent);
}
.sp-intro__grid {
  --ariel-gap: 2.6rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(3.3rem, 7vi, 6.5rem) 3.4rem;
}
.sp-intro__text {
  position: relative;
  z-index: 1;
}
.sp-intro h1 {
  margin-block: 1.75rem 1.6rem;
  font-size: clamp(2.9rem, 10.8vi, 5.6rem);
  line-height: 1.07;
  font-weight: 790;
}
.sp-intro__lead {
  max-inline-size: 61ch;
  color: var(--sp-copy);
  font-size: clamp(1rem, 1.55vi, 1.23rem);
  line-height: 1.8;
}
.sp-underlink {
  display: inline-flex;
  max-inline-size: 100%;
  align-items: center;
  gap: 1.5rem;
  margin-block-start: 2.3rem;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--sp-accent);
  font-size: 0.85rem;
  font-weight: 800;
}
.sp-underlink > span {
  color: var(--sp-accent);
  font-size: 1.1rem;
}
.sp-underlink > span:last-child {
  flex-shrink: 0;
}
.sp-underlink:hover {
  color: var(--sp-accent);
}
.sp-intro__foot {
  --ariel-gap: 1rem;
  justify-content: space-between;
  padding-block-start: 1.35rem;
  border-block-start: 1px solid var(--sp-line);
  color: var(--sp-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.sp-constellation {
  position: relative;
  inline-size: min(78%, 17rem);
  aspect-ratio: 1;
  margin-inline: auto;
  color: var(--sp-accent);
}
.sp-constellation::before,
.sp-constellation::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.sp-constellation::before {
  inset: 13%;
  border: 1px solid color-mix(in srgb, var(--sp-accent) 30%, transparent);
  transform: rotate(25deg) scaleY(0.85);
  box-shadow:
    0 0 0 25px color-mix(in srgb, var(--sp-accent) 2%, transparent),
    0 0 0 70px color-mix(in srgb, var(--sp-accent) 2%, transparent);
}
.sp-constellation::after {
  inset: 25%;
  border: 1px dashed color-mix(in srgb, var(--sp-accent) 46%, transparent);
  transform: rotate(-28deg) scaleY(0.82);
}
.sp-constellation__arc {
  position: absolute;
  inset: 7% 3%;
  border-block-start: 1px solid var(--sp-accent);
  border-radius: 50%;
  transform: rotate(-30deg) scaleY(0.76);
  opacity: 0.6;
}
.sp-constellation__arc--b {
  transform: rotate(42deg) scaleY(0.68);
}
.sp-constellation__dot {
  position: absolute;
  z-index: 2;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--sp-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sp-accent) 13%, transparent);
}
.sp-constellation__dot--one {
  inset: 21% auto auto 16%;
}
.sp-constellation__dot--two {
  inset: 29% 9% auto auto;
}
.sp-constellation__dot--three {
  inset: auto auto 23% 10%;
}
.sp-constellation__dot--four {
  inset: auto 16% 14% auto;
}
.sp-constellation__core {
  position: absolute;
  z-index: 3;
  inset: 31%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.2rem;
  border: 1px solid var(--sp-line);
  border-radius: 50%;
  background: var(--sp-surface);
  box-shadow: 0 20px 80px rgb(0 0 0 / 15%);
}
.sp-constellation__core svg {
  inline-size: 54%;
}
.sp-constellation__core > span {
  color: var(--sp-text);
  font-size: clamp(0.35rem, 1vi, 0.5rem);
  font-weight: 850;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sp-constellation__core > span > span {
  color: var(--sp-accent);
}
.sp-constellation__label {
  position: absolute;
  z-index: 4;
  max-inline-size: 76%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--sp-line);
  border-radius: 4px;
  background: var(--sp-surface);
  color: var(--sp-copy);
  font-size: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.095em;
}
.sp-constellation__label--a {
  inset: 0 auto auto 33%;
}
.sp-constellation__label--b {
  inset: auto auto 19% -3%;
}
.sp-constellation__label--c {
  inset: 37% -8% auto auto;
}
.sp-jump {
  border-block-end: 1px solid var(--sp-line);
  background: var(--sp-surface);
}
.sp-jump__inner {
  --ariel-gap: 0.8rem clamp(1.3rem, 3vi, 3rem);
  padding-block: 1.25rem;
}
.sp-jump a {
  padding-block: 0.4rem;
  border-block-end: 1px solid transparent;
  color: var(--sp-copy);
  font-size: 0.78rem;
  font-weight: 780;
}
.sp-jump a:hover {
  border-color: var(--sp-accent);
  color: var(--sp-accent);
}
.sp-section {
  padding-block: clamp(4rem, 8vi, 8.2rem);
}
.sp-section__top {
  --ariel-gap: 1.4rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  margin-block-end: 2.6rem;
}
.sp-section h2 {
  margin-block-start: 1.45rem;
  font-size: clamp(2.3rem, 5.8vi, 4.1rem);
  font-weight: 780;
}
.sp-section__lead {
  max-inline-size: 52ch;
  color: var(--sp-copy);
  font-size: 1.03rem;
  line-height: 1.78;
}
.sp-infra__rule {
  --ariel-gap: 0.9rem;
  flex-wrap: nowrap;
  align-items: start;
  margin-block-end: clamp(3rem, 6vi, 5rem);
  padding: clamp(1.35rem, 3vi, 2.25rem);
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: var(--sp-soft);
}
.sp-rule__icon {
  display: grid;
  flex: 0 0 2.9rem;
  block-size: 2.9rem;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sp-accent) 16%, transparent);
  color: var(--sp-accent);
}
.sp-rule__icon svg {
  inline-size: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.sp-infra__rule h3 {
  margin-block-end: 0.35rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.sp-infra__rule p {
  color: var(--sp-copy);
  font-size: 0.92rem;
}
.sp-listing-head {
  --ariel-gap: 1.2rem;
  justify-content: space-between;
  align-items: end;
  margin-block-end: 1.3rem;
}
.sp-listing-head h3,
.sp-storage-heading h3 {
  font-size: clamp(1.4rem, 2.5vi, 1.85rem);
  font-weight: 780;
}
.sp-listing-head p,
.sp-storage-heading p {
  margin-block-start: 0.4rem;
  color: var(--sp-muted);
  font-size: 0.87rem;
}
.sp-directory {
  --ariel-gap: clamp(2.5rem, 5vi, 4.3rem);
  grid-template-columns: minmax(0, 1fr);
}
.sp-directory-group {
  min-inline-size: 0;
}
.sp-directory-group__heading {
  --ariel-gap: 0.85rem;
  flex-wrap: nowrap;
  margin-block-end: 1.2rem;
}
.sp-directory-group__heading h4 {
  color: var(--sp-copy);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.sp-directory-group__tick {
  flex: 0 0 24px;
  block-size: 6px;
  border-radius: 1rem;
  background: var(--sp-accent);
}
.sp-hosts {
  --ariel-gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  list-style: none;
}
.sp-host {
  min-inline-size: 0;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  background: var(--sp-surface);
}
.sp-host:hover {
  border-color: color-mix(in srgb, var(--sp-accent) 42%, var(--sp-line));
  box-shadow: 0 12px 28px rgb(0 0 0 / 9%);
}
.sp-host__link {
  --ariel-gap: 1.1rem;
  block-size: 100%;
  min-block-size: 13.3rem;
  justify-content: space-between;
  padding: 1rem;
  border-radius: inherit;
}
.sp-host__link:focus-visible {
  outline-offset: -3px;
}
/* Preserve the supplied logo bytes, native proportions, and owner-safe surface. */
.sp-host__brand,
.sp-target__brand {
  display: grid;
  inline-size: 100%;
  min-inline-size: 0;
  flex-shrink: 0;
  place-items: center;
  padding: var(--sp-logo-clear-space);
  border-radius: 9px;
  background: var(--sp-logo-light);
}
.sp-host__brand {
  block-size: 9.2rem;
}
.sp-host__brand--dark,
.sp-target__brand--dark {
  background: var(--sp-logo-dark);
}
.sp-host__brand img,
.sp-target__brand img {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: 76px;
  object-fit: contain;
}
.sp-host--akamai .sp-host__brand {
  block-size: 8.6rem;
  padding: var(--sp-logo-clear-space-akamai);
}
.sp-host--akamai .sp-host__brand img {
  inline-size: 104px;
  min-inline-size: 100px;
  max-block-size: none;
}
.sp-host--digitalocean .sp-host__brand img {
  inline-size: 152px;
  min-inline-size: 120px;
}
.sp-host--scaleway .sp-host__brand img {
  inline-size: 173px;
  min-block-size: 32px;
}
.sp-host--ibm .sp-host__brand img {
  inline-size: 144px;
}
.sp-host--google .sp-host__brand img {
  inline-size: 160px;
}
.sp-host--tencent .sp-host__brand img,
.sp-host--alibaba .sp-host__brand img {
  inline-size: 175px;
}
.sp-host--aruba .sp-host__brand img {
  inline-size: 126px;
}
.sp-host__bottom {
  --ariel-gap: 1rem;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.sp-host__name {
  color: var(--sp-text);
  font-size: 0.87rem;
  font-weight: 770;
  line-height: 1.35;
  letter-spacing: -0.024em;
}
.sp-host__out,
.sp-target__glyph {
  flex-shrink: 0;
  color: var(--sp-accent);
  font-size: 1.1rem;
  line-height: 1;
}
.sp-bottom-note {
  --ariel-gap: 0.9rem;
  max-inline-size: 80ch;
  flex-wrap: nowrap;
  align-items: start;
  margin-block-start: 1.35rem;
  color: var(--sp-muted);
  font-size: 0.8rem;
}
.sp-bottom-note__symbol {
  flex-shrink: 0;
  color: var(--sp-accent);
  font-size: 1.1rem;
}
.sp-own {
  --ariel-gap: 1.35rem;
  flex-wrap: nowrap;
  margin-block-start: 2.3rem;
  padding: clamp(1.4rem, 3vi, 2.15rem);
  border: 1px dashed color-mix(in srgb, var(--sp-accent) 45%, var(--sp-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sp-accent) 5%, var(--sp-bg));
}
.sp-own__mark {
  display: grid;
  flex: 0 0 3rem;
  block-size: 3rem;
  place-items: center;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  color: var(--sp-accent);
}
.sp-own__mark svg {
  inline-size: 1.8rem;
}
.sp-own h3 {
  margin-block-end: 0.4rem;
  font-size: 1.1rem;
  letter-spacing: -0.025em;
}
.sp-own p {
  max-inline-size: 85ch;
  color: var(--sp-copy);
  font-size: 0.88rem;
}
.sp-backup {
  border-block: 1px solid var(--sp-line);
  background: var(--sp-surface);
}
.sp-flow {
  --ariel-gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: 3.2rem 5rem;
  padding: 0;
  list-style: none;
}
.sp-flow > li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.8rem;
  min-inline-size: 0;
  min-block-size: 7.6rem;
  padding: clamp(0.9rem, 2vi, 1.45rem);
  border: 1px solid var(--sp-line);
  border-radius: 9px;
  background: var(--sp-bg);
}
.sp-flow__number {
  font-size: 0.7rem;
  font-weight: 800;
}
.sp-flow strong {
  font-size: clamp(0.86rem, 1.6vi, 1.02rem);
  font-weight: 780;
  line-height: 1.3;
  letter-spacing: -0.022em;
}
.sp-storage-heading {
  --ariel-gap: 1rem;
  justify-content: space-between;
  align-items: end;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--sp-line);
}
.sp-targets {
  --ariel-gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: 1.45rem;
}
.sp-target {
  --ariel-gap: 0;
  min-block-size: 16rem;
  padding: 1.6rem;
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  background: var(--sp-bg);
}
.sp-target:hover {
  border-color: color-mix(in srgb, var(--sp-accent) 60%, var(--sp-line));
}
.sp-target__top {
  --ariel-gap: 0.5rem;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: start;
}
.sp-target__protocol {
  color: var(--sp-mint);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.sp-target__brand {
  block-size: 7.3rem;
  margin-block-start: 1rem;
}
.sp-target__brand img {
  max-inline-size: min(100%, 195px);
  max-block-size: 64px;
}
.sp-target h4 {
  margin-block: 1rem 0.8rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.sp-target p {
  color: var(--sp-copy);
  font-size: 0.84rem;
  line-height: 1.7;
}
.sp-target__link {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: auto;
  padding-block-start: 1.8rem;
  color: var(--sp-accent);
  font-size: 0.76rem;
  font-weight: 800;
}
.sp-target__link > span:last-child {
  flex-shrink: 0;
}
.sp-target__link:hover {
  color: var(--sp-text);
}
/* Retain the supplied rsync.net text treatment without substituting a logo. */
.sp-rsync-wordmark {
  display: inline-block;
  max-inline-size: 100%;
  padding: 5px clamp(12px, 3vi, 43px);
  background: var(--sp-rsync-surface);
  color: var(--sp-rsync-text);
  font:
    400 1rem / 1.5 Arial,
    sans-serif;
  letter-spacing: normal;
  white-space: nowrap;
}
.sp-protection {
  --ariel-gap: 1.7rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-block-start: clamp(3rem, 5vi, 5rem);
  padding: clamp(1.55rem, 4vi, 3.5rem);
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background:
    radial-gradient(
      ellipse at 0 0,
      color-mix(in srgb, var(--sp-mint) 11%, transparent),
      transparent 58%
    ),
    var(--sp-soft);
}
.sp-protection__stamp {
  display: grid;
  inline-size: 4.2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--sp-mint) 40%, transparent);
  border-radius: 50%;
  color: var(--sp-mint);
}
.sp-protection__stamp svg {
  inline-size: 3rem;
}
.sp-protection h3 {
  margin-block: 0.8rem;
  font-size: clamp(1.4rem, 2.4vi, 2rem);
}
.sp-protection p:not(.sp-eyebrow) {
  max-inline-size: 70ch;
  color: var(--sp-copy);
  font-size: 0.88rem;
  line-height: 1.75;
}
.sp-link-arrow {
  display: inline-flex;
  max-inline-size: 100%;
  justify-self: start;
  align-items: center;
  gap: 0.7rem;
  padding-block-end: 0.4rem;
  border-block-end: 1px solid var(--sp-accent);
  color: var(--sp-accent);
  font-size: 0.79rem;
  font-weight: 800;
}
.sp-link-arrow > span:last-child {
  flex-shrink: 0;
}
.sp-link-arrow:hover {
  color: var(--sp-text);
}
.sp-req__heading {
  max-inline-size: 56rem;
}
.sp-req__heading > p:last-child {
  margin-block-start: 1.35rem;
  color: var(--sp-copy);
  font-size: 1.05rem;
  line-height: 1.75;
}
.sp-checklist {
  margin-block: 3rem 4.5rem;
  border-block-start: 1px solid var(--sp-line);
}
.sp-checklist article {
  --ariel-gap: 1.3rem;
  grid-template-columns: 2rem minmax(0, 1fr);
  padding-block: 2.2rem;
  border-block-end: 1px solid var(--sp-line);
}
.sp-checklist__no {
  font-size: 0.7rem;
  font-weight: 800;
}
.sp-checklist h3 {
  margin-block-end: 0.75rem;
  font-size: clamp(1.06rem, 2vi, 1.38rem);
}
.sp-checklist p {
  max-inline-size: 70ch;
  color: var(--sp-copy);
  font-size: 0.92rem;
  line-height: 1.75;
}
.sp-checklist small {
  display: block;
  margin-block-start: 0.9rem;
  color: var(--sp-muted);
  font-size: 0.75rem;
}
.sp-final {
  --ariel-gap: 1.8rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: clamp(1.5rem, 4vi, 3.5rem);
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: var(--sp-soft);
}
.sp-final h2 {
  margin-block: 1rem;
  font-size: clamp(1.75rem, 3.5vi, 2.85rem);
}
.sp-final p:last-child {
  color: var(--sp-copy);
  font-size: 0.9rem;
}
.sp-final__links {
  --ariel-gap: 1rem;
  inline-size: 100%;
  align-items: start;
}
.sp-final__cta {
  gap: 1.1rem;
  inline-size: 100%;
  padding: 0.95rem 1.3rem;
  border: 1px solid var(--sp-accent);
  border-radius: 7px;
  background: var(--sp-accent);
  color: var(--brand-surface);
  font-size: 0.84rem;
  font-weight: 800;
  text-align: center;
  white-space: normal;
}
.sp-final__cta > span:last-child {
  flex-shrink: 0;
}
.sp-final__secondary {
  padding-block: 0.4rem;
  border-block-end: 1px solid var(--sp-accent);
  font-size: 0.79rem;
  font-weight: 800;
}
.sp-final__secondary:hover {
  color: var(--sp-accent);
}
/* Keep the template's single transition; let card columns fit their safe zones. */
@media (min-width: 64rem) {
  .sp-intro__grid {
    --ariel-gap: 3rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
  }
  .sp-constellation {
    inline-size: min(95%, 25rem);
  }
  .sp-constellation__label {
    padding: 0.65rem 0.9rem;
    font-size: 0.54rem;
  }
  .sp-section__top {
    --ariel-gap: 4rem;
    grid-template-columns: 1.2fr 0.8fr;
  }
  .sp-infra__rule {
    --ariel-gap: 1.55rem;
    align-items: center;
  }
  .sp-rule__icon {
    flex-basis: 3.4rem;
    block-size: 3.4rem;
  }
  .sp-hosts {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  }
  .sp-host__link {
    min-block-size: 13.1rem;
  }
  .sp-flow {
    --ariel-gap: 1.9rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sp-flow > li {
    position: relative;
    padding: 1.45rem;
  }
  .sp-flow > li:not(:last-child)::after {
    content: "→";
    position: absolute;
    inset-inline-end: -1.5rem;
    inset-block-start: 50%;
    color: var(--sp-accent);
    transform: translateY(-50%);
  }
  .sp-targets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sp-protection {
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, auto);
  }
  .sp-checklist article {
    grid-template-columns: 6rem minmax(0, 1fr);
  }
  .sp-final {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  }
  .sp-final__links {
    inline-size: auto;
    align-items: end;
  }
  .sp-final__cta {
    inline-size: auto;
  }
}
