/* Each band fills the page. Its inner .wrap aligns content with the site grid. */
.page-band {
  --band-ink: #152436;
  --band-secondary: #40546c;
  --band-emphasis: #3d5574;
  color: var(--band-ink);
}
.band-paper { background-color: #f8f7f4; }
.band-mist { background-color: #e2eaf2; }
.band-slate { background-color: #cbd9e6; }
.band-sand {
  --band-emphasis: #70472e;
  background-color: #f0dfd1;
}
.band-night {
  --band-ink: #f7f6f3;
  --band-secondary: #d6e0eb;
  --band-emphasis: #cad8e8;
  background-color: #22364e;
}
.section-banner {
  position: relative;
  isolation: isolate;
}
.section-banner.band-night,
.page-hero.hero-navy {
  background-color: #22364e;
  background-image: linear-gradient(112deg, #152436 0%, #22364e 54%, #3d5574 100%);
}
.section-banner.band-slate,
.page-hero.hero-blue {
  background-color: #cbd9e6;
  background-image: linear-gradient(110deg, #dbe5ef, #bfd0e0);
}
.section-banner.band-sand,
.page-hero.hero-peach {
  background-color: #f0dfd1;
  background-image: linear-gradient(110deg, #f5e8dc, #e7c8af);
}
.section-banner > .wrap {
  padding-block: clamp(44px, 5.2vw, 78px);
}
.section-banner .eyebrow {
  color: var(--band-secondary);
  margin-bottom: 16px;
}
.section-banner h1 {
  color: var(--band-ink);
  margin-bottom: 18px;
}
.page-band .muted { color: var(--band-emphasis); }
.section-banner .intro,
.section-banner .page-intro > p:not(.eyebrow) { color: var(--band-secondary); }
.section-banner .hero-actions {
  gap: 16px 24px;
  margin-top: 24px;
}
.section-banner .hero-actions a {
  min-height: 44px;
  font-size: 14px;
}
.section-banner .hero-actions .text-link { gap: 10px; }
.section-banner .hero-actions .button { padding: 14px 22px; }
.trial-banner {
  --band-emphasis: #f0c6a9;
}
.trial-banner .pricing-hero { position: relative; }
.trial-banner .pricing-hero .eyebrow { color: #f0c6a9; }
.trial-banner .pricing-hero h1 { font-size: clamp(40px, 4.8vw, 72px); }
.trial-banner h1 .muted { display: inline-block; }
.trial-banner .intro { max-width: 650px; }
.trial-banner .button {
  background-color: var(--copper);
  border-color: var(--copper);
  color: #101923;
}
.trial-banner .button:hover { background-color: #e0a47b; }
.trial-banner .text-link { color: #f7f6f3; }
.trial-banner .text-link:hover { color: #f0c6a9; }
.trial-banner a:focus-visible { outline: 3px solid #f7f6f3; outline-offset: 4px; }
.trial-terms {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--band-secondary);
}
@media (min-width: 1040px) {
  .trial-banner::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0;
    right: max(4%, calc((100% - 1320px) / 2));
    width: min(25%, 330px);
    background: url("/marketing/assets/ramrok-mark.svg") right center / contain no-repeat;
    opacity: .33;
    pointer-events: none;
  }
  .trial-banner h1 { max-width: 76%; }
}

.page-hero.hero-blue,
.hero-blue .page-hero-copy h1 { color: #152436; }
.hero-blue .page-hero-copy h1 em,
.hero-blue .page-hero-copy .eyebrow,
.hero-blue .page-hero-copy .hero-description,
.hero-blue .hero-example { color: #354d67; }
.hero-blue .hero-link,
.hero-peach .hero-link {
  background-color: #22364e;
  color: #f7f6f3;
}
.hero-blue .hero-link:hover,
.hero-peach .hero-link:hover { background-color: #152436; }
.hero-peach .page-hero-copy h1 em,
.hero-peach .page-hero-copy .eyebrow { color: #70472e; }
.hero-peach .hero-description,
.hero-peach .hero-example { color: #415067; }

.page-band > .section,
.feature-intro > .wrap {
  padding-block: clamp(46px, 6.2vw, 88px);
}
.plans-band > .wrap {
  padding-block: clamp(28px, 3.6vw, 54px) clamp(42px, 5.5vw, 78px);
}
.plans-band .pricing-currency { margin: 0 0 16px; }
.plans-band .pricing-grid { padding-bottom: 0; }
.cards-band > .wrap {
  margin-bottom: 0;
  padding-block: clamp(36px, 5.2vw, 76px);
}
.callout-band > :is(.note-band, .included-band) {
  margin-bottom: 0;
  padding: clamp(32px, 4.5vw, 64px) 0;
  background: transparent;
  border-radius: 0;
}
.callout-band :is(.text-link, a) { color: #22364e; }
.callout-band .note-band .button { color: #fff; }
.feature-band > .feature-row {
  padding-block: clamp(38px, 5.8vw, 84px);
  border: 0;
}
.feature-intro .section-heading { margin-bottom: 0; }
.feature-endnote { margin-block: 0; padding-bottom: 30px; }
.connections-summary .connection-flow {
  padding-block: clamp(32px, 4.4vw, 62px);
  border: 0;
}
.connection-flow > div > span,
.guide-band .guide section > span,
.page-band .capture-note,
.page-band .product-tabs button[aria-selected="false"] span { color: #4b6078; }
.connections-summary .flow-arrow { color: #875431; }
.page-integrations .data-ribbon,
.page-integrations .data-ribbon::before { background: #22364e; }
.page-integrations .data-ribbon p,
.page-integrations .data-ribbon i { color: #d6e0eb; }
.page-integrations .lab-band { background: #d3dfeb; }
.lab-band .lab-story > div:first-child p:not(.eyebrow) { color: #40546c; }
.lab-band .lab-story .text-link { color: #22364e; }
.page-customization .brand-section { background: #e2eaf2; }
.page-contact .contact-section { background: #e2eaf2; }
.page-contact .contact-grid > div > p:not(.eyebrow) { color: #40546c; }
.guide-band > .guide { padding-top: clamp(24px, 4vw, 52px); }

@media (max-width: 640px) {
  .section-banner .hero-actions { gap: 10px 12px; }
  .section-banner .hero-actions .button { gap: 8px; padding-inline: 12px; }
  .section-banner .hero-actions .text-link { gap: 6px; font-size: 13px; }
  .section-banner .hero-actions .text-link span { font-size: 18px; }
}