/* Shared public UI. Edit once; sync-shared-ui.py copies canonical components. */
.ry-site-header {
  --color-tokens-background-base: var(--color-base-base-light-100);
  --color-tokens-tone-strong: var(--color-base-base-dark-100);
  --color-tokens-tone-subtle: var(--color-base-base-dark-48);
  --color-tokens-button-primary-default-text: var(--color-base-base-light-100);
  --color-tokens-button-secondary-default-text: var(--color-base-base-dark-100);
  --color-tokens-button-primary-hover-text: var(--color-base-base-light-100);
  --color-tokens-button-secondary-hover-text: var(--color-base-base-light-100);
  --color-tokens-button-primary-default-border: var(--color-base-base-light-0);
  --color-tokens-button-primary-default-background: var(--color-base-base-dark-100);
  --color-tokens-button-secondary-default-border: var(--color-base-base-dark-0);
  --color-tokens-button-secondary-default-background: var(--color-base-base-dark-8);
  --color-tokens-button-primary-hover-border: var(--color-base-base-dark-0);
  --color-tokens-button-primary-hover-background: var(--color-base-base-dark-100);
  --color-tokens-button-secondary-hover-border: var(--color-base-base-dark-0);
  --color-tokens-button-secondary-hover-background: var(--color-base-base-dark-100);
  --color-tokens-tone-medium: var(--color-base-base-dark-64);
  --color-tokens-tone-faint: var(--color-base-base-dark-8);
  --color-tokens-button-tertiary-default-text: var(--color-base-base-dark-100);
  --color-tokens-button-tertiary-hover-text: var(--color-base-base-dark-88);
  --color-tokens-background-depth: var(--color-base-depth-light);
  --color-tokens-background-lift: var(--color-base-lift-light);
  --color-tokens-background-shadow: var(--color-base-base-dark-8);
  --color-tokens-background-gradient-purposes-gradient-0: var(--color-base-base-light-0);
  --color-tokens-background-gradient-purposes-gradient-64: var(--color-base-base-light-64);
  --color-tokens-background-semi-transparent: var(--color-base-base-light-32);
  --color-tokens-background-gradient-purposes-gradient-100: var(--color-base-base-light-100);
  color: var(--color-base-base-dark-100);
}
.ry-site-footer {
  --color-tokens-button-primary-default-text: var(--color-base-base-light-100);
  --color-tokens-button-primary-default-background: var(--color-base-base-dark-100);
  --color-tokens-button-primary-hover-text: var(--color-base-base-dark-100);
  --color-tokens-button-primary-hover-background: var(--color-base-accent-primary);
}
.ry-site-page .ry-page-content, .ry-section-shell { min-width: 0; }
.ry-section {
  --ry-heading-ink: var(--color-tokens-tone-strong);
  --ry-heading-muted: var(--color-tokens-tone-medium);
}
.ry-section--dark {
  --ry-heading-ink: var(--color-base-base-light-100);
  --ry-heading-muted: var(--color-base-base-light-64);
}
.ry-section-heading--center { text-align: center; align-items: center; }
.ry-section-heading--split { text-align: start; }
.ry-site-page .ry-section-heading .ry-section-title {
  color: var(--ry-heading-ink, inherit);
  font-family: var(--typography-font-family-h2);
  font-size: var(--ry-title-size, var(--typography-size-h2));
  font-weight: var(--typography-font-weight-h2);
  line-height: var(--ry-title-line, var(--typography-line-height-h2));
  letter-spacing: var(--ry-title-spacing, var(--typography-letter-spacing-h2));
}
/* Line grouping changes wrapping only; size comes from the shared title above. */
.ry-section-title-line { display: block; text-wrap: balance; }
.ry-section-title--h3 { --ry-title-size: var(--typography-size-h3); --ry-title-line: var(--typography-line-height-h3); --ry-title-spacing: var(--typography-letter-spacing-h3); }
.ry-section-title--h4 { --ry-title-size: var(--typography-size-h4); --ry-title-line: var(--typography-line-height-h4); --ry-title-spacing: var(--typography-letter-spacing-h4); }
.ry-section-title--h5 { --ry-title-size: var(--typography-size-h5); --ry-title-line: var(--typography-line-height-h5); --ry-title-spacing: var(--typography-letter-spacing-h5); }
.ry-section-title--h6 { --ry-title-size: var(--typography-size-h6); --ry-title-line: var(--typography-line-height-h6); --ry-title-spacing: var(--typography-letter-spacing-h6); }
.ry-site-page .ry-section-heading .ry-section-subtitle {
  color: var(--ry-heading-muted, var(--color-tokens-tone-medium));
  font-family: var(--typography-font-family-b1);
  font-size: var(--ry-subtitle-size, var(--typography-size-b1));
  font-weight: var(--typography-font-weight-b1);
  line-height: var(--ry-subtitle-line, var(--typography-line-height-b1));
}
.ry-section-subtitle--body { --ry-subtitle-size: var(--typography-size-b2); --ry-subtitle-line: var(--typography-line-height-b2); }
.ry-section-subtitle--small { --ry-subtitle-size: var(--typography-size-b3); --ry-subtitle-line: var(--typography-line-height-b3); }

.ry-site-page .ry-section-heading .ry-section-muted { color: var(--ry-heading-muted, var(--color-tokens-tone-medium)); }

/* One vertical rhythm for major sections. Inner wrappers must not add it twice. */
.ry-site-page {
  --ry-section-space: 6rem;
  --ry-section-heading-space: 3rem;
}
.ry-site-page .ry-page-content > .ry-section {
  padding-block: var(--ry-section-space);
  margin-block: 0;
}
.ry-site-page .ry-page-content > .ry-section > .padding-global,
.ry-site-page .ry-page-content > .ry-section > .padding-global > .container-large,
.ry-site-page .ry-page-content > .ry-section > .padding-global > .container-large > .padding-section-medium,
.ry-site-page .ry-page-content > .ry-section--showcase > #sv-preview-content > .sv-section {
  padding-block: 0;
}
/* Continuous light sections share one gap rather than stacking two gaps. */
.ry-site-page .ry-page-content > .ry-section:not(.ry-section--dark) + .ry-section:not(.ry-section--dark) {
  padding-top: 0;
}
.ry-site-page .ry-page-content > .ry-section .ry-section-heading,
.ry-site-page #pricing.ry-section .ry-section-heading {
  margin-bottom: var(--ry-section-heading-space);
}
.ry-site-page #pricing.ry-section > .ry-section--video-reviews {
  padding-block: var(--ry-section-space) 0;
  margin-block: 0;
}
.ry-site-page .ry-site-footer .ry-mf-close { padding-top: var(--ry-section-space); }
@media (max-width: 991px) {
  .ry-site-page { --ry-section-space: 4rem; --ry-section-heading-space: 2.5rem; }
}
@media (max-width: 767px) {
  .ry-site-page { --ry-section-space: 3rem; --ry-section-heading-space: 2rem; }
}