/**
 * Component layer — every .rt-* class used by patterns/templates.
 * Token-driven only: zero hardcoded colors or sizes.
 */

/* ── Layout ──────────────────────────────────────────────────────────── */
.rt-container {
  max-width: var(--rt-container);
  margin-inline: auto;
  padding-inline: var(--rt-gutter);
}
.rt-container--narrow {
  max-width: var(--rt-container-narrow);
}
.rt-container--wide {
  max-width: var(--rt-container-wide);
}

.rt-section {
  padding-block: var(--rt-section-y);
}
.rt-section--tight {
  padding-block: calc(var(--rt-section-y) / 2);
}
.rt-section--navy {
  background: var(--rt-navy);
}
.rt-section--navy-deep {
  background: var(--rt-navy-900);
  color: var(--rt-on-navy-soft);
}
.rt-section--soft {
  background: var(--rt-surface);
}

.rt-grid {
  display: grid;
  gap: var(--rt-space-5);
}
/* Stat trio in the "Made Right" trust band: a 3-col grid spanning the full
   72rem container leaves the three numbers stranded far apart. Cap the width
   and center it so the stats cluster as one readable group. Mobile (single
   column) is unaffected — the cap exceeds the viewport. */
.rt-stat-band {
  max-width: 44rem;
  margin-inline: auto;
}
.rt-grid--2,
.rt-grid--3,
.rt-grid--4 {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .rt-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .rt-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .rt-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .rt-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rt-split {
  display: grid;
  gap: var(--rt-space-6);
  align-items: center;
}
@media (min-width: 860px) {
  .rt-split {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .rt-split--rev {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* ── Centered hero (Printify-style): headline → check row → CTAs →
   reassurance → wide product render → award trust bar. ─────────────────── */
.rt-hero--center .rt-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rt-hero__title {
  font-size: var(--rt-text-hero);
  line-height: var(--rt-leading-tight);
  letter-spacing: var(--rt-tracking-tight);
  max-width: 18ch;
}
/* Homepage centered hero carries a longer, two-sentence H1 — widen its measure
   so it sets as two balanced lines instead of three. Scoped to the centered
   hero only; the other hero pages keep the tighter 18ch measure. */
.rt-hero--center .rt-hero__title {
  max-width: 36ch;
  text-wrap: balance;
}
/* Audience (/for/) hero + the /for/ hub: these H1s are full-sentence headlines,
   but .rt-hero__title caps the measure at 18ch — far too tight, so the lines
   overflowed that narrow box and the whole headline read as left-shifted next
   to the centered eyebrow, subhead, and CTAs. Widen the measure so the text
   actually fits, center the block (margin-inline:auto), and assert text-align
   centrally so each line is centered regardless of inheritance. Opt-in class —
   applied only by the audience renderer (inc/audience-pages.php) and the /for/
   hub — so no other page's hero (home, pricing, PLDS, etc.) is affected. Holds
   at every breakpoint: no media query re-aligns it. */
.rt-hero__title--center {
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
/* Inline check row — single line on desktop; 2×2 on mobile. */
.rt-hero-checks {
  list-style: none;
  margin: var(--rt-space-5) auto 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--rt-space-3) var(--rt-space-5);
  max-width: 100%;
}
.rt-hero-checks li {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-2);
  font-weight: var(--rt-weight-medium);
  font-size: var(--rt-text-sm);
  color: var(--rt-white);
  white-space: nowrap;
  flex: 0 0 auto;
}
.rt-hero-checks .rt-icon {
  color: var(--rt-cta);
  flex: none;
}
@media (min-width: 721px) and (max-width: 1100px) {
  .rt-hero-checks {
    gap: var(--rt-space-2) var(--rt-space-3);
  }
  .rt-hero-checks li {
    font-size: 0.8rem;
  }
}
/* Center the CTA pair inside the centered hero */
.rt-hero--center .rt-u-flex {
  justify-content: center;
}
/* Wide product render below the fold-text */
.rt-hero__media {
  position: relative;
  margin: var(--rt-space-7) auto 0;
  max-width: 720px;
  width: 100%;
}
.rt-hero__media img,
.rt-hero__media picture {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
}
/* Playful floating stickers (Printify-style), lightly rotated. Decorative —
   the same facts appear in the hero check row, so they're aria-hidden. */
.rt-hero__sticker {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1.1em;
  border-radius: var(--rt-radius-pill);
  font-weight: var(--rt-weight-heavy);
  font-size: var(--rt-text-sm);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.rt-hero__sticker--coral {
  top: 4%;
  right: 0;
  background: var(--rt-cta);
  color: var(--rt-white);
  transform: rotate(6deg);
}
.rt-hero__sticker--light {
  bottom: 8%;
  left: 0;
  background: var(--rt-white);
  color: var(--rt-navy);
  transform: rotate(-5deg);
}
@media (max-width: 720px) {
  .rt-hero__sticker {
    font-size: var(--rt-text-xs);
    padding: 0.45em 0.85em;
  }
  .rt-hero__sticker--coral {
    right: -2%;
  }
  .rt-hero__sticker--light {
    left: -2%;
  }
}
/* Headline stat row inside the hero (member revenue / units / years) */
.rt-hero-stats {
  margin-top: var(--rt-space-7);
  padding-top: var(--rt-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.rt-hero-stat {
  flex: 1 1 0;
  min-width: 150px;
  padding: 0 var(--rt-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rt-space-1);
}
.rt-hero-stat + .rt-hero-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.rt-hero-stat__num {
  font-size: var(--rt-text-2xl);
  font-weight: var(--rt-weight-heavy);
  line-height: 1;
  color: var(--rt-cta);
}
.rt-hero-stat__label {
  font-size: var(--rt-text-sm);
  color: var(--rt-on-navy-soft);
}
@media (max-width: 720px) {
  .rt-hero-stat {
    flex-basis: 100%;
    padding: var(--rt-space-3) 0;
  }
  .rt-hero-stat + .rt-hero-stat {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Award trust bar */
.rt-hero-trust {
  margin-top: var(--rt-space-6);
  padding-top: var(--rt-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rt-space-3) var(--rt-space-5);
  width: 100%;
}
.rt-hero-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-1);
  font-size: var(--rt-text-xs);
  color: var(--rt-on-navy-soft);
  letter-spacing: 0.02em;
}
.rt-hero-trust__item .rt-icon {
  color: var(--rt-cta);
  width: 1em;
  height: 1em;
}
@media (max-width: 720px) {
  .rt-hero--center .rt-u-flex {
    flex-direction: column;
    width: 100%;
  }
  .rt-hero--center .rt-u-flex .rt-btn {
    width: 100%;
  }
  .rt-hero-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-wrap: unset;
    gap: var(--rt-space-3) var(--rt-space-4);
    max-width: 28rem;
    justify-items: start;
  }
  .rt-hero-checks li {
    white-space: normal;
    font-size: var(--rt-text-sm);
    justify-content: flex-start;
  }
}

/* ── Video testimonial (click-to-load facade) ────────────────────────── */
.rt-video-testimonial {
  margin: 0 auto;
  max-width: 52rem;
}
.rt-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  background: var(--rt-navy);
  box-shadow: var(--rt-shadow-lg);
}
.rt-video iframe,
.rt-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.rt-video__poster,
.rt-video picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rt-video__poster {
  object-fit: cover;
}
.rt-video__trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rt-space-3);
  padding: var(--rt-space-6);
  cursor: pointer;
  border: 0;
  color: var(--rt-white);
  text-align: center;
  background: linear-gradient(135deg, var(--rt-navy-700) 0%, var(--rt-navy-900) 100%);
}
.rt-video__poster + .rt-video__play,
.rt-video__poster ~ .rt-video__play {
  /* When a poster image is present, dim it slightly behind the play button. */
  box-shadow: 0 0 0 100vmax rgba(11, 29, 51, 0.28);
}
.rt-video__play {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--rt-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rt-cta);
  color: var(--rt-white);
  transition: transform 0.2s ease, background 0.2s ease;
}
.rt-video__play svg {
  width: 1.85rem;
  height: 1.85rem;
  margin-left: 0.15rem;
}
.rt-video__trigger:hover .rt-video__play,
.rt-video__trigger:focus-visible .rt-video__play {
  transform: scale(1.08);
  background: var(--rt-cta-alt);
}
.rt-video__eyebrow {
  position: relative;
  color: var(--rt-white);
  opacity: 0.85;
}
.rt-video__name {
  position: relative;
  font-weight: var(--rt-weight-bold);
  font-size: var(--rt-text-lg);
}
.rt-video-testimonial__cap {
  margin: var(--rt-space-4) 0 0;
  text-align: center;
  font-weight: var(--rt-weight-medium);
  color: var(--rt-ink-soft, var(--rt-navy));
}
.rt-on-dark .rt-video-testimonial__cap {
  color: var(--rt-on-navy-soft, var(--rt-white));
}
@media (prefers-reduced-motion: reduce) {
  .rt-video__play {
    transition: none;
  }
}

/* ── Buttons & CTAs ──────────────────────────────────────────────────── */
/* Modern, sleek, centered. 10px radius (not pill) for a contemporary SaaS
   feel; 1px borders; semibold weight; layered subtle shadows; hover shifts
   color + shadow depth without bouncing. line-height: 1 + flex centering
   guarantees text sits exactly in the middle. */
.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-space-2);
  min-height: var(--rt-tap-min);
  padding: 0.85em 1.75em;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--rt-dur) var(--rt-ease),
    color var(--rt-dur) var(--rt-ease),
    border-color var(--rt-dur) var(--rt-ease),
    box-shadow var(--rt-dur) var(--rt-ease);
  /* Reset legacy Kadence inheritance edges. */
  text-align: center;
  vertical-align: middle;
}

.rt-btn--primary {
  background: var(--rt-cta);
  color: var(--rt-white);
  box-shadow:
    0 1px 2px rgba(16, 40, 70, 0.08),
    0 2px 6px rgba(255, 87, 87, 0.25);
}
.rt-btn--primary:hover,
.rt-btn--primary:focus-visible {
  background: var(--rt-cta-alt);
  color: var(--rt-white);
  box-shadow:
    0 2px 4px rgba(16, 40, 70, 0.1),
    0 6px 16px rgba(255, 87, 87, 0.38);
}

.rt-btn--secondary {
  background: var(--rt-white);
  color: var(--rt-navy);
  border-color: var(--rt-line);
  box-shadow: 0 1px 2px rgba(16, 40, 70, 0.06);
}
.rt-btn--secondary:hover,
.rt-btn--secondary:focus-visible {
  background: var(--rt-navy);
  color: var(--rt-white);
  border-color: var(--rt-navy);
  box-shadow: 0 4px 12px rgba(16, 40, 70, 0.22);
}

/* On dark surfaces (navy heroes), the secondary becomes a glassy outline. */
.rt-on-dark .rt-btn--secondary,
.rt-section--navy .rt-btn--secondary {
  background: transparent;
  color: var(--rt-white);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}
.rt-on-dark .rt-btn--secondary:hover,
.rt-section--navy .rt-btn--secondary:hover {
  background: var(--rt-white);
  color: var(--rt-navy);
  border-color: var(--rt-white);
}

.rt-btn--ghost {
  background: transparent;
  color: var(--rt-navy-700);
  border-color: transparent;
  padding-inline: 0.5em;
  box-shadow: none;
}
.rt-btn--ghost:hover {
  color: var(--rt-cta);
  background: transparent;
  box-shadow: none;
}

.rt-btn--lg {
  font-size: 1.05rem;
  padding: 1em 2em;
}

/* ── Header nav: dropdowns, CTA buttons, mobile drawer ─────────────────
   Targets the Kadence-rendered primary menu (.menu, .main-navigation).
   We don't replace Kadence's chrome — just tune the CTA items and the
   dropdown panels so they match the brand tokens. */

/* Header CTAs — same modern sleek language as .rt-btn, tuned tighter for
   the header row. Selector specificity (and !important on color) beats
   Kadence's default .menu li a inheritance — that's why the primary text
   was rendering navy on coral before. */
.main-navigation .menu li a.rt-nav-cta,
.rt-nav-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.35em;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px solid transparent;
  text-align: center;
  vertical-align: middle;
  transition: background-color var(--rt-dur) var(--rt-ease),
    color var(--rt-dur) var(--rt-ease),
    border-color var(--rt-dur) var(--rt-ease),
    box-shadow var(--rt-dur) var(--rt-ease);
}

.main-navigation .menu li a.rt-nav-cta.rt-btn--primary,
.rt-nav-cta.rt-btn--primary {
  background: var(--rt-cta);
  color: var(--rt-white) !important;
  box-shadow:
    0 1px 2px rgba(16, 40, 70, 0.08),
    0 2px 6px rgba(255, 87, 87, 0.25);
}
.main-navigation .menu li a.rt-nav-cta.rt-btn--primary:hover,
.main-navigation .menu li a.rt-nav-cta.rt-btn--primary:focus,
.rt-nav-cta.rt-btn--primary:hover,
.rt-nav-cta.rt-btn--primary:focus {
  background: var(--rt-cta-alt);
  color: var(--rt-white) !important;
  box-shadow:
    0 2px 4px rgba(16, 40, 70, 0.1),
    0 6px 16px rgba(255, 87, 87, 0.38);
}

.main-navigation .menu li a.rt-nav-cta.rt-btn--secondary,
.rt-nav-cta.rt-btn--secondary {
  background: var(--rt-white);
  color: var(--rt-navy) !important;
  border-color: var(--rt-line);
  box-shadow: 0 1px 2px rgba(16, 40, 70, 0.06);
}
.main-navigation .menu li a.rt-nav-cta.rt-btn--secondary:hover,
.main-navigation .menu li a.rt-nav-cta.rt-btn--secondary:focus,
.rt-nav-cta.rt-btn--secondary:hover,
.rt-nav-cta.rt-btn--secondary:focus {
  background: var(--rt-navy);
  color: var(--rt-white) !important;
  border-color: var(--rt-navy);
  box-shadow: 0 4px 12px rgba(16, 40, 70, 0.22);
}
/* Push Login + CTAs to the right end of the desktop nav row. Kadence
   lays the nav as a flex/inline row; margin-left:auto on the first right-
   cluster item shoves Login / Book a Call / Get Started to the edge. */
.main-navigation .menu > li.menu-item-login,
.main-navigation .menu > li.menu-item-cta-secondary {
  margin-left: auto;
}
.main-navigation .menu > li.menu-item-login + li.menu-item-cta-secondary {
  margin-left: var(--rt-space-2);
}
.main-navigation .menu > li.menu-item-cta-secondary + li,
.main-navigation .menu > li.menu-item-cta-primary,
.main-navigation .menu > li.menu-item-login + li {
  margin-left: var(--rt-space-2);
}
/* When only the primary CTA exists (no Login/secondary in front of it), it
   still pushes itself to the right. */
.main-navigation .menu > li.menu-item-cta-primary:first-of-type {
  margin-left: auto;
}
.main-navigation .menu .rt-nav-cta {
  margin: 0;
}
.main-navigation .menu li a.rt-nav-login,
.rt-nav-login {
  color: var(--rt-navy) !important;
  border: 1px solid var(--rt-line);
  background: transparent;
}
.main-navigation .menu li a.rt-nav-login:hover,
.main-navigation .menu li a.rt-nav-login:focus,
.rt-nav-login:hover,
.rt-nav-login:focus {
  color: var(--rt-cta) !important;
  border-color: var(--rt-cta);
  background: var(--rt-coral-tint, transparent);
}

/* Dropdown panels — clean white card on brand line, no Kadence gradients. */
.main-navigation .menu .sub-menu {
  background: var(--rt-white);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius);
  box-shadow: var(--rt-shadow);
  padding: var(--rt-space-2) 0;
  min-width: 12rem;
}
.main-navigation .menu .sub-menu li > a {
  padding: var(--rt-space-2) var(--rt-space-4);
  color: var(--rt-ink);
  font-weight: var(--rt-weight-medium);
}
.main-navigation .menu .sub-menu li > a:hover,
.main-navigation .menu .sub-menu li > a:focus {
  background: var(--rt-coral-tint);
  color: var(--rt-cta);
}
/* Kadence already renders its own dropdown chevron — don't double up. */

/* ── "Who It's For" mega-menu ─────────────────────────────────────────────
   The Who It's For item (.rt-has-megamenu) holds 11 children: two non-link
   column headers (.rt-mega-head) each followed by its audience links. On
   desktop we lay the panel out as a two-column grid; provision.php emits the
   items in order header1 + 5 audiences, header2 + 4 audiences, so six grid
   rows flowing by column puts each header at the top of its column. Mobile
   inherits the flat accordion from the sub-menu reset below.

   Reveal: the grid layout is applied ONLY in the revealed state
   (:hover / :focus-within) so the panel inherits Kadence's default hide
   exactly like the Services/Resources dropdowns — we never set display on the
   default state, we only swap the revealed panel from Kadence's block reveal
   to a two-column grid. This works whether Kadence hides via display:none or
   visibility/opacity, since we don't touch the default state at all. */
.main-navigation .menu li.rt-mega-head > a {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-bold);
  color: var(--rt-cta);
  pointer-events: none;
  cursor: default;
}
.main-navigation .menu li.rt-mega-head > a:hover,
.main-navigation .menu li.rt-mega-head > a:focus {
  background: transparent;
  color: var(--rt-cta);
}
@media (min-width: 1024px) {
  /* Grid layout applies only when Kadence reveals the panel (hover/focus-within),
     mirroring the Services/Resources dropdowns. The default state is left to
     Kadence's hide, so the mega-menu is hidden until "Who It's For" is hovered
     or keyboard-focused — never stuck open. */
  .main-navigation .menu li.rt-has-megamenu:hover > .sub-menu,
  .main-navigation .menu li.rt-has-megamenu:focus-within > .sub-menu {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    column-gap: var(--rt-space-6);
    row-gap: 0;
    padding: var(--rt-space-4) var(--rt-space-4) var(--rt-space-2);
    min-width: 34rem;
  }
  /* Headers from the second row down get a little breathing room above. */
  .main-navigation .menu li.rt-has-megamenu > .sub-menu li.rt-mega-head + li {
    margin-top: var(--rt-space-1);
  }
}

/* Desktop header: pull the menu in close to the logo (kill Kadence's wide
   center-column gap) and keep the CTAs right-aligned via the existing
   margin-left:auto on .menu-item-cta-secondary. Targets the Kadence v3 row
   container so the inner items pack left-to-right against the logo. */
@media (min-width: 1024px) {
  .site-header-row-main .site-header-row-container-inner,
  .site-header-row-main-section-center,
  .site-header-main-section-center,
  .site-header-row-main-section-center-inner {
    justify-content: flex-start !important;
  }
  .site-header-row-main-section-center,
  .site-header-main-section-center {
    flex: 1 1 auto;
  }
  .site-header-main-section-center .main-navigation,
  .site-header-row-main-section-center .main-navigation {
    margin-left: var(--rt-space-3);
  }
  /* Keep the whole nav — links + both CTAs — on a single row. With seven
     top-level items the flex row could overflow and wrap the primary
     "Create Free Account" CTA onto a second line below the menu. nowrap forces
     one line; the CTAs carry white-space:nowrap so they stay intact, and
     margin-left:auto on the secondary CTA still pins the pair to the right. */
  .main-navigation .menu {
    flex-wrap: nowrap !important;
  }
  /* Each top-level label stays on one line (no mid-phrase breaks like
     "Why / Free?"), the items don't shrink below their text, and per-item
     padding is tightened so all seven links + both CTAs pack cleanly across
     desktop widths. */
  .main-navigation .menu > li > a {
    white-space: nowrap;
  }
  .main-navigation .menu > li:not(.menu-item-cta-primary):not(.menu-item-cta-secondary) {
    flex: 0 0 auto;
  }
  .main-navigation .menu > li:not(.menu-item-cta-primary):not(.menu-item-cta-secondary) > a {
    font-size: 0.9rem;
    padding-inline: 0.75rem;
  }
  /* Shrink the header CTAs too so the full row fits without clipping the
     primary "Create Free Account" off the right edge. */
  .main-navigation .menu li a.rt-nav-cta {
    font-size: 0.82rem;
    padding: 0.62em 1.05em;
  }
}
/* Narrower desktops (1024–1440px): trim the nav type and CTAs further so the
   eight labels + both CTAs still fit on one row without clipping. */
@media (min-width: 1024px) and (max-width: 1440px) {
  .main-navigation .menu > li:not(.menu-item-cta-primary):not(.menu-item-cta-secondary) > a {
    font-size: 0.85rem;
    padding-inline: 0.55rem;
  }
  .main-navigation .menu li a.rt-nav-cta {
    font-size: 0.78rem;
    padding: 0.55em 0.85em;
  }
  .site-header-main-section-center .main-navigation,
  .site-header-row-main-section-center .main-navigation {
    margin-left: var(--rt-space-2);
  }
}

/* Mobile: center the logo cleanly in the header row. */
@media (max-width: 1023px) {
  .site-header-row-main-section-left,
  .site-header-main-section-left,
  .site-header-row-main .site-branding,
  .site-header-row-main .site-logo {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    flex: 1 1 auto;
    justify-content: center;
  }
  .site-header-row-main .site-branding img,
  .site-header-row-main .custom-logo-link,
  .site-header-row-main .site-logo img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }
}

/* Mobile drawer: stack everything full-width, CTAs become real wide
   buttons at the bottom of the drawer. Kadence's mobile menu uses the
   same .menu container, so we just override the right-push and let the
   button styles take over. */
@media (max-width: 1023px) {
  .main-navigation .menu > li.menu-item-login,
  .main-navigation .menu > li.menu-item-cta-primary,
  .main-navigation .menu > li.menu-item-cta-secondary {
    margin-left: 0;
    margin-top: var(--rt-space-3);
  }
  .main-navigation .menu > li.menu-item-login .rt-nav-cta,
  .main-navigation .menu > li.menu-item-cta-primary .rt-nav-cta,
  .main-navigation .menu > li.menu-item-cta-secondary .rt-nav-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.9em 1.5em;
    font-size: var(--rt-text-base);
  }
  /* Mobile dropdowns: don't float — let Kadence's accordion behaviour
     show children inline, but keep the brand styling. */
  .main-navigation .menu .sub-menu {
    box-shadow: none;
    border: 0;
    background: transparent;
    padding-left: var(--rt-space-4);
  }
  .main-navigation .menu .sub-menu li > a:hover {
    background: transparent;
  }
}

/* ── Type accents ────────────────────────────────────────────────────── */
.rt-eyebrow {
  display: inline-block;
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-cta);
  margin-bottom: var(--rt-space-3);
}
.rt-lead {
  font-size: var(--rt-text-md);
  color: var(--rt-ink-soft);
  line-height: var(--rt-leading-snug);
}
.rt-on-dark .rt-lead,
.rt-section--navy .rt-lead {
  color: var(--rt-on-navy-soft);
}

/* ── Cards, badges, stats ────────────────────────────────────────────── */
.rt-card {
  background: var(--rt-white);
  border: 1px solid transparent;
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-6);
  box-shadow: var(--rt-shadow);
  transition: transform var(--rt-dur) var(--rt-ease);
}
.rt-section--soft .rt-card,
.rt-card--flat {
  border-color: var(--rt-line);
  box-shadow: var(--rt-shadow-sm);
}
.rt-card:hover {
  transform: translateY(-3px);
}
.rt-card--flat:hover {
  transform: none;
}
.rt-card--navy {
  background: var(--rt-navy);
  border-color: var(--rt-navy-700);
}

.rt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-1);
  padding: 0.2em 0.8em;
  border-radius: var(--rt-radius-pill);
  font-size: var(--rt-text-xs);
  font-weight: var(--rt-weight-bold);
  background: var(--rt-coral-tint);
  color: var(--rt-cta-alt);
}
.rt-badge--navy {
  background: var(--rt-surface-2);
  color: var(--rt-navy);
}
.rt-badge--solid {
  background: var(--rt-cta);
  color: var(--rt-white);
}

.rt-stat {
  text-align: center;
}
.rt-stat__num {
  display: block;
  font-size: var(--rt-text-2xl);
  font-weight: var(--rt-weight-heavy);
  letter-spacing: var(--rt-tracking-tight);
  color: var(--rt-navy);
}
.rt-on-dark .rt-stat__num,
.rt-section--navy .rt-stat__num {
  color: var(--rt-white);
}
.rt-stat__label {
  font-size: var(--rt-text-sm);
  color: var(--rt-ink-soft);
}
.rt-on-dark .rt-stat__label,
.rt-section--navy .rt-stat__label {
  color: var(--rt-on-navy-soft);
}

/* Credibility bar */
.rt-cred-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rt-space-5);
  padding-block: var(--rt-space-6);
}
@media (min-width: 860px) {
  .rt-cred-bar {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ── Steps (how it works) ────────────────────────────────────────────── */
.rt-steps {
  display: grid;
  gap: var(--rt-space-5);
  counter-reset: rt-step;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .rt-steps--row {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}
.rt-steps > li {
  counter-increment: rt-step;
  position: relative;
  padding-top: calc(var(--rt-space-7) + var(--rt-space-2));
}
.rt-steps > li::before {
  content: counter(rt-step, decimal-leading-zero);
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
  padding-inline: 0.4em;
  border-radius: var(--rt-radius-pill);
  background: var(--rt-cta);
  color: var(--rt-white);
  font-size: var(--rt-text-md);
  font-weight: var(--rt-weight-heavy);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(255, 87, 87, 0.28);
}
.rt-steps > li > h3,
.rt-steps > li > h4 {
  margin-top: 0;
}
/* The numbered badge is the visual anchor — decorative step icons are
   redundant clutter, so they never render inside a step. */
.rt-steps .rt-icon {
  display: none;
}

/* ── How It Works stepper (.rk-stepper) — Printify-style two-column ──────
   One product in the showcase; the FRAMING around it changes per step (bare →
   label editor → storefront). data-active on the root is the SINGLE source of
   truth — CSS derives both the active step row AND the active showcase frame
   from it, so the list and panel can never desync. Scoped, tokens only,
   vanilla. JS sets the active step's fill width transition inline (linear). */
.rk-stepper {
  display: grid;
  gap: var(--rt-space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .rk-stepper {
    grid-template-columns: 1fr 1fr;
    gap: var(--rt-space-9);
  }
}
.rk-stepper__heading {
  margin: var(--rt-space-2) 0 var(--rt-space-6);
  max-width: 16ch;
}
.rk-stepper__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rt-space-2);
}
/* Clean rows — no heavy card. Dim inactive; the FILL is the primary cue. */
.rk-stepper__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--rt-space-4);
  padding: var(--rt-space-4) var(--rt-space-3);
  border-radius: var(--rt-radius);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.4s ease, background-color 0.4s ease;
}
.rk-stepper__step:hover {
  opacity: 0.85;
}
.rk-stepper__step:focus-visible {
  outline: 2px solid var(--rt-cta);
  outline-offset: 2px;
}
.rk-stepper__num {
  font-size: var(--rt-text-md);
  font-weight: var(--rt-weight-heavy);
  font-variant-numeric: tabular-nums;
  color: var(--rt-ink-soft);
  line-height: 1.4;
  transition: color 0.4s ease;
}
.rk-stepper__title {
  margin: 0;
  font-size: var(--rt-text-md);
}
.rk-stepper__desc {
  margin: var(--rt-space-1) 0 0;
  font-size: var(--rt-text-sm);
  color: var(--rt-ink-soft);
}
/* Thin progress track under the active step; fill animated 0→100% by JS. */
.rk-stepper__track {
  display: block;
  height: 2px;
  margin-top: var(--rt-space-3);
  background: var(--rt-surface-2);
  border-radius: var(--rt-radius-pill);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.rk-stepper__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rt-cta);
  border-radius: inherit;
  /* JS sets inline: transition: width <interval>ms linear; width: 100%. */
}
/* Active step + its number + its track — all derived from data-active. */
.rk-stepper[data-active="0"] .rk-stepper__step--0,
.rk-stepper[data-active="1"] .rk-stepper__step--1,
.rk-stepper[data-active="2"] .rk-stepper__step--2 {
  opacity: 1;
  background: var(--rt-white);
}
.rk-stepper[data-active="0"] .rk-stepper__step--0 .rk-stepper__num,
.rk-stepper[data-active="1"] .rk-stepper__step--1 .rk-stepper__num,
.rk-stepper[data-active="2"] .rk-stepper__step--2 .rk-stepper__num {
  color: var(--rt-cta);
}
.rk-stepper[data-active="0"] .rk-stepper__step--0 .rk-stepper__track,
.rk-stepper[data-active="1"] .rk-stepper__step--1 .rk-stepper__track,
.rk-stepper[data-active="2"] .rk-stepper__step--2 .rk-stepper__track {
  opacity: 1;
}
/* CTA row */
.rk-stepper__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rt-space-4);
  margin-top: var(--rt-space-6);
}
.rk-stepper__link {
  font-weight: var(--rt-weight-bold);
  color: var(--rt-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rk-stepper__link:hover {
  color: var(--rt-cta);
}

/* ── Showcase (right) — one product; framing changes per step ──────────── */
.rk-stepper__showcase {
  position: relative;
  border-radius: var(--rt-radius-lg);
  background: linear-gradient(160deg, var(--rt-surface) 0%, var(--rt-surface-2) 100%);
  border: 1px solid var(--rt-line);
  min-height: 22rem;
  padding: var(--rt-space-7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rk-stepper__product {
  position: relative;
  z-index: 1;
  width: min(60%, 250px);
}
.rk-stepper__product img,
.rk-stepper__product picture {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 30px rgba(16, 40, 70, 0.18));
}
/* Framing layers — cross-fade with ease (report step-swap timing). */
.rk-stepper__chrome {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.rk-stepper[data-active="1"] .rk-stepper__chrome--editor {
  opacity: 1;
}
.rk-stepper[data-active="2"] .rk-stepper__chrome--shop {
  opacity: 1;
}
/* Editor frame: vertical tool rail + selection box + Label/Cap toggle. */
.rk-stepper__rail {
  position: absolute;
  left: var(--rt-space-5);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-2);
  padding: var(--rt-space-2);
  background: var(--rt-white);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius-pill);
  box-shadow: var(--rt-shadow-sm);
}
.rk-stepper__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--rt-navy);
}
.rk-stepper__tool:first-child {
  background: var(--rt-cta);
  color: var(--rt-white);
}
.rk-stepper__tool svg {
  width: 1.1rem;
  height: 1.1rem;
}
.rk-stepper__select {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 42%;
  height: 30%;
  border: 1.5px solid var(--rt-cta);
  border-radius: 4px;
}
.rk-stepper__handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--rt-white);
  border: 1.5px solid var(--rt-cta);
  border-radius: 2px;
}
.rk-stepper__handle:nth-child(1) { top: -4px; left: -4px; }
.rk-stepper__handle:nth-child(2) { top: -4px; right: -4px; }
.rk-stepper__handle:nth-child(3) { bottom: -4px; left: -4px; }
.rk-stepper__handle:nth-child(4) { bottom: -4px; right: -4px; }
.rk-stepper__seltag {
  position: absolute;
  top: -1.45rem;
  left: -1.5px;
  font-size: var(--rt-text-xs);
  font-weight: var(--rt-weight-bold);
  color: var(--rt-white);
  background: var(--rt-cta);
  padding: 0.1em 0.5em;
  border-radius: 4px;
  white-space: nowrap;
}
.rk-stepper__toggle {
  position: absolute;
  right: var(--rt-space-5);
  bottom: var(--rt-space-5);
  display: inline-flex;
  background: var(--rt-white);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius-pill);
  padding: 3px;
  box-shadow: var(--rt-shadow-sm);
  font-size: var(--rt-text-xs);
  font-weight: var(--rt-weight-bold);
}
.rk-stepper__toggle span {
  padding: 0.3em 0.8em;
  border-radius: var(--rt-radius-pill);
  color: var(--rt-ink-soft);
}
.rk-stepper__toggle .is-on {
  background: var(--rt-navy);
  color: var(--rt-white);
}
/* Storefront frame: a product card with price + add-to-cart. */
.rk-stepper__shopcard {
  position: absolute;
  right: var(--rt-space-5);
  bottom: var(--rt-space-5);
  width: min(72%, 15rem);
  display: grid;
  gap: var(--rt-space-1);
  padding: var(--rt-space-4);
  background: var(--rt-white);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius);
  box-shadow: var(--rt-shadow);
}
.rk-stepper__shopname {
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-bold);
  color: var(--rt-navy);
}
.rk-stepper__price {
  font-size: var(--rt-text-lg);
  font-weight: var(--rt-weight-heavy);
  color: var(--rt-navy);
}
.rk-stepper__instock {
  font-size: var(--rt-text-xs);
  color: var(--rt-ink-soft);
}
.rk-stepper__addcart {
  margin-top: var(--rt-space-2);
  text-align: center;
  padding: 0.5em 1em;
  border-radius: var(--rt-radius-sm);
  background: var(--rt-cta);
  color: var(--rt-white);
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-heavy);
}
/* prefers-reduced-motion: all steps readable, no fill, bare product only. */
.rk-stepper--static .rk-stepper__step {
  opacity: 1;
  cursor: default;
}
.rk-stepper--static .rk-stepper__track {
  display: none;
}
@media (max-width: 640px) {
  .rk-stepper__showcase {
    min-height: 18rem;
    padding: var(--rt-space-5);
  }
  .rk-stepper__rail {
    left: var(--rt-space-3);
  }
}

/* ── Tables: pricing, comparison, value stack ────────────────────────── */
.rt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rt-table th,
.rt-table td {
  padding: var(--rt-space-3) var(--rt-space-4);
  text-align: left;
  border-bottom: 1px solid var(--rt-line);
}
.rt-table thead th {
  font-size: var(--rt-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rt-ink-soft);
}
.rt-table .rt-check {
  color: var(--rt-success);
  font-weight: var(--rt-weight-bold);
}
.rt-table .rt-cross {
  color: var(--rt-ink-soft);
}

.rt-pricing {
  display: grid;
  gap: var(--rt-space-5);
  align-items: stretch;
}
@media (min-width: 860px) {
  .rt-pricing {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Two-plan layout: large side-by-side panels, centered */
  .rt-pricing--duo {
    grid-template-columns: repeat(2, 1fr);
    max-width: 58rem;
    margin-inline: auto;
    gap: var(--rt-space-6);
  }
}
.rt-plan {
  display: flex;
  flex-direction: column;
  background: var(--rt-white);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-6);
}
.rt-pricing--duo .rt-plan {
  padding: var(--rt-space-7) var(--rt-space-6);
  border-radius: calc(var(--rt-radius-lg) + 6px);
  box-shadow: var(--rt-shadow-sm);
}
.rt-plan--featured {
  border: 2px solid var(--rt-cta);
  box-shadow: var(--rt-shadow);
  position: relative;
}
.rt-pricing--duo .rt-plan--featured {
  box-shadow: 0 24px 64px rgba(255, 87, 87, 0.18), var(--rt-shadow);
  transform: translateY(-6px);
}
.rt-plan__flag {
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%);
}
.rt-plan__tagline {
  display: inline-block;
  align-self: flex-start;
  padding: 0.25em 1em;
  border-radius: var(--rt-radius-pill);
  font-size: var(--rt-text-xs);
  font-weight: var(--rt-weight-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--rt-surface-2);
  color: var(--rt-navy);
  margin-bottom: var(--rt-space-4);
}
.rt-plan--featured .rt-plan__tagline {
  background: var(--rt-coral-tint);
  color: var(--rt-cta-alt);
}
.rt-plan__price {
  font-size: var(--rt-text-2xl);
  font-weight: var(--rt-weight-heavy);
  color: var(--rt-navy);
}
.rt-pricing--duo .rt-plan__price {
  font-size: var(--rt-text-3xl);
  letter-spacing: var(--rt-tracking-tight);
}
.rt-plan__per {
  font-size: var(--rt-text-sm);
  color: var(--rt-ink-soft);
}
.rt-plan__features {
  list-style: none;
  padding: 0;
  margin: var(--rt-space-4) 0 var(--rt-space-5);
  flex: 1;
}
.rt-plan__features li {
  padding: var(--rt-space-2) 0 var(--rt-space-2) 1.6em;
  position: relative;
}
.rt-plan__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--rt-cta);
  font-weight: var(--rt-weight-heavy);
}
.rt-plan__billing-note {
  margin-bottom: 0;
  line-height: var(--rt-leading-snug, 1.45);
  max-width: 28rem;
}

/* ── FAQ accordion (no JS dependency) ────────────────────────────────── */
.rt-faq {
  border-top: 1px solid var(--rt-line);
}
.rt-faq details {
  border-bottom: 1px solid var(--rt-line);
}
.rt-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rt-space-4);
  min-height: var(--rt-tap-min);
  padding: var(--rt-space-4) 0;
  font-weight: var(--rt-weight-bold);
  font-size: var(--rt-text-md);
  cursor: pointer;
  list-style: none;
}
.rt-faq summary::-webkit-details-marker {
  display: none;
}
.rt-faq summary::after {
  content: "+";
  font-size: var(--rt-text-lg);
  color: var(--rt-cta);
  transition: transform var(--rt-dur) var(--rt-ease);
}
.rt-faq details[open] summary::after {
  transform: rotate(45deg);
}
.rt-faq .rt-faq__a {
  padding: 0 0 var(--rt-space-5);
  color: var(--rt-ink-soft);
  max-width: 65ch;
}

/* ── Sticky webinar announcement bar ─────────────────────────────────── */
.rt-announce {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  background: linear-gradient(90deg, var(--rt-navy) 0%, #1a3a66 55%, var(--rt-cta) 160%);
  color: var(--rt-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
body.admin-bar .rt-announce {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .rt-announce {
    top: 46px;
  }
}
.rt-announce.is-hidden {
  display: none;
}
.rt-announce__link {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.85rem;
  padding: 0.7rem 1rem;
  color: var(--rt-white) !important;
  text-decoration: none !important;
  font-size: 0.92rem;
  font-weight: var(--rt-weight-medium);
  line-height: 1.3;
  min-height: 2.75rem;
}
.rt-announce__link:hover,
.rt-announce__link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.rt-announce__live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18em 0.55em;
  border-radius: 999px;
  background: var(--rt-cta);
  color: var(--rt-white);
  font-size: 0.68rem;
  font-weight: var(--rt-weight-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rt-announce__live::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: rt-announce-pulse 1.6s ease-out infinite;
}
@keyframes rt-announce-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70% { box-shadow: 0 0 0 0.45em rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.rt-announce__copy {
  text-align: center;
}
.rt-announce__cta {
  font-weight: var(--rt-weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}
.rt-announce__dismiss {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0 0.85rem;
  cursor: pointer;
}
.rt-announce__dismiss:hover,
.rt-announce__dismiss:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}
@media (max-width: 720px) {
  .rt-announce__link {
    justify-content: flex-start;
    padding: 0.65rem 0.75rem;
    font-size: 0.84rem;
    gap: 0.45rem 0.65rem;
  }
  .rt-announce__copy {
    text-align: left;
    flex: 1 1 10rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rt-announce__live::before {
    animation: none;
  }
}

/* ── Webinar promo (homepage) ────────────────────────────────────────── */
.rt-webinar-promo__link {
  position: relative;
  display: block;
  max-width: 44rem;
  margin: var(--rt-space-6) auto 0;
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  box-shadow: var(--rt-shadow, 0 16px 40px rgba(16, 40, 70, 0.18));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rt-webinar-promo__link:hover,
.rt-webinar-promo__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(16, 40, 70, 0.28);
  outline: none;
}
.rt-webinar-promo__link:focus-visible {
  box-shadow: 0 0 0 3px var(--rt-white), 0 0 0 6px var(--rt-cta);
}
.rt-webinar-promo__img,
.rt-webinar-promo__link picture,
.rt-webinar-promo__link img {
  display: block;
  width: 100%;
  height: auto;
}
.rt-webinar-promo__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  z-index: 1;
  pointer-events: none;
}
.rt-webinar-promo__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.15rem;
  border-color: transparent transparent transparent #fff;
}
.rt-webinar-promo__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--rt-space-4);
  margin-top: var(--rt-space-8);
  margin-bottom: var(--rt-space-4);
  padding: var(--rt-space-7) var(--rt-space-5);
}
.rt-webinar-promo__cta .rt-btn {
  min-width: 12rem;
}
@media (max-width: 720px) {
  .rt-webinar-promo__play {
    width: 3.5rem;
    height: 3.5rem;
  }
  .rt-webinar-promo__play::after {
    border-width: 0.55rem 0 0.55rem 0.9rem;
  }
  .rt-webinar-promo__cta {
    flex-direction: column;
    margin-top: var(--rt-space-7);
    padding: var(--rt-space-6) var(--rt-space-3);
  }
  .rt-webinar-promo__cta .rt-btn {
    width: 100%;
  }
}

/* ── CTA bands ───────────────────────────────────────────────────────── */
.rt-cta-band {
  background: var(--rt-navy);
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-7) var(--rt-space-6);
  text-align: center;
}
.rt-cta-band--coral {
  background: linear-gradient(
    135deg,
    var(--rt-coral-soft) 0%,
    var(--rt-cta) 45%,
    var(--rt-cta-alt) 100%
  );
  box-shadow: 0 30px 70px -24px rgba(255, 80, 80, 0.6);
}
.rt-cta-band--coral .rt-btn--primary {
  background: var(--rt-white);
  color: var(--rt-cta-alt);
}
.rt-cta-band--coral .rt-lead,
.rt-cta-band--coral .rt-cta-band__note {
  color: rgba(255, 255, 255, 0.92);
}

/* ── Forms ───────────────────────────────────────────────────────────── */
.rt-form {
  display: grid;
  gap: var(--rt-space-4);
}
.rt-input,
.rt-select,
.rt-textarea {
  width: 100%;
  min-height: var(--rt-tap-min);
  padding: 0.6em 1em;
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius);
  background: var(--rt-white);
  color: var(--rt-ink);
}
.rt-label {
  font-weight: var(--rt-weight-bold);
  font-size: var(--rt-text-sm);
}
.rt-field {
  display: grid;
  gap: var(--rt-space-1);
}
.rt-form__note {
  font-size: var(--rt-text-xs);
  color: var(--rt-ink-soft);
}

/* ── Lead-magnet card (used by /download-catalog/) ───────────────────── */
.rt-lead-magnet {
  background: var(--rt-white);
  border-radius: var(--rt-radius-lg);
  box-shadow:
    0 4px 12px rgba(16, 40, 70, 0.1),
    0 16px 40px rgba(16, 40, 70, 0.18);
  overflow: hidden;
  color: var(--rt-ink);
}
.rt-lead-magnet__cover {
  background: linear-gradient(160deg, var(--rt-navy) 0%, var(--rt-navy-700) 100%);
  color: var(--rt-white);
  padding: var(--rt-space-6) var(--rt-space-5);
  text-align: center;
}
.rt-lead-magnet__cover-inner {
  display: grid;
  gap: var(--rt-space-3);
  justify-items: center;
}
.rt-lead-magnet__cover-title {
  margin: 0;
  font-size: var(--rt-text-md);
  font-weight: var(--rt-weight-heavy);
  line-height: var(--rt-leading-tight);
  color: var(--rt-white);
}
.rt-lead-magnet__cover-meta {
  margin: 0;
  font-size: var(--rt-text-xs);
  color: var(--rt-on-navy-soft);
}
.rt-lead-magnet__form,
.rt-lead-magnet__success {
  display: grid;
  gap: var(--rt-space-3);
  padding: var(--rt-space-5);
}
.rt-lead-magnet__success {
  text-align: center;
}
/* The display:grid above would otherwise beat the [hidden] attribute, leaving
   the success card visible in the opt-in view. Re-assert hide-when-hidden so
   it only appears after the form is submitted (JS toggles .hidden). */
.rt-lead-magnet__form[hidden],
.rt-lead-magnet__success[hidden] {
  display: none;
}
.rt-lead-magnet__success h3 {
  margin: 0;
  font-size: var(--rt-text-md);
}
.rt-lead-magnet__upsell {
  margin-top: var(--rt-space-4);
  padding-top: var(--rt-space-4);
  border-top: 1px solid var(--rt-line);
  text-align: left;
}

/* Real-product proof strip (below the hero form) */
.rt-proof-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--rt-space-4);
}
.rt-proof-tile {
  display: grid;
  gap: var(--rt-space-2);
  text-align: center;
}
.rt-proof-tile img,
.rt-proof-tile picture {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.rt-proof-tile__name {
  font-size: var(--rt-text-xs);
  color: var(--rt-ink-soft);
  line-height: 1.3;
}
@media (max-width: 720px) {
  .rt-proof-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .rt-proof-strip > .rt-proof-tile:nth-child(n + 4) {
    display: none;
  }
}

/* Range sliders (calculators): explicit track + fill so the control reads
   at a glance. JS keeps --rt-range-fill in sync (rt-site.js). */
.rt-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: var(--rt-tap-min);
  background: transparent;
  cursor: pointer;
}
.rt-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: var(--rt-radius-pill);
  background: linear-gradient(
    to right,
    var(--rt-cta) 0%,
    var(--rt-cta) var(--rt-range-fill, 50%),
    var(--rt-surface-2) var(--rt-range-fill, 50%),
    var(--rt-surface-2) 100%
  );
}
.rt-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--rt-cta);
  border: 3px solid var(--rt-white);
  box-shadow: var(--rt-shadow);
}
.rt-range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}
.rt-range::-moz-range-track {
  height: 10px;
  border-radius: var(--rt-radius-pill);
  background: var(--rt-surface-2);
}
.rt-range::-moz-range-progress {
  height: 10px;
  border-radius: var(--rt-radius-pill);
  background: var(--rt-cta);
}
.rt-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rt-cta);
  border: 3px solid var(--rt-white);
  box-shadow: var(--rt-shadow);
}

/* Min/current/max captions under a slider */
.rt-range-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--rt-text-xs);
  color: var(--rt-ink-soft);
  margin-top: var(--rt-space-1);
}
.rt-range-value {
  display: inline-block;
  padding: 0.1em 0.7em;
  border-radius: var(--rt-radius-pill);
  background: var(--rt-coral-tint);
  color: var(--rt-cta-alt);
  font-weight: var(--rt-weight-heavy);
  font-variant-numeric: tabular-nums;
}

/* MSRP marker overlaid on a sell-price slider: a tick on the track + a small
   labelled pill above it, so the shopper sees where MSRP sits as they drag. */
.rt-rangewrap {
  position: relative;
  padding-top: 1.5rem;
}
.rt-range-marker {
  position: absolute;
  top: 1.5rem;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.rt-range-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: var(--rt-navy);
  opacity: 0.5;
}
.rt-range-marker__tag {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  font-size: var(--rt-text-xs);
  font-weight: var(--rt-weight-bold);
  color: var(--rt-navy);
  background: var(--rt-coral-tint);
  padding: 1px 7px;
  border-radius: var(--rt-radius-pill);
}
.rt-output {
  font-size: var(--rt-text-xl);
  font-weight: var(--rt-weight-heavy);
  color: var(--rt-navy);
}
.rt-output--pos {
  color: var(--rt-success);
}

/* ── Figures / inline SVG infographics ──────────────────────────────── */
.rt-figure {
  margin: 0;
}
.rt-figure svg {
  width: 100%;
  height: auto;
  display: block;
}
.rt-figure figcaption {
  font-size: var(--rt-text-sm);
  color: var(--rt-ink-soft);
  margin-top: var(--rt-space-3);
}

/* ── Blog / prose ───────────────────────────────────────────────────── */
.rt-prose {
  max-width: 65ch;
  margin-inline: auto;
}
.rt-prose h2 {
  margin-top: var(--rt-space-7);
}
.rt-prose h3 {
  margin-top: var(--rt-space-6);
}
.rt-prose blockquote {
  border-left: 4px solid var(--rt-cta);
  margin: var(--rt-space-5) 0;
  padding: var(--rt-space-2) var(--rt-space-5);
  color: var(--rt-ink-soft);
}
.rt-prose img {
  border-radius: var(--rt-radius);
}

/* Blog single posts: give the article a wider reading column than the default
   --narrow (46rem). The display-size H1 was crowding into a thin strip on
   desktop and the body measure (65ch) sat well inside the container, leaving
   large empty margins. Scoped to .single-post so other --narrow / .rt-prose
   uses (pages, PDPs, resource guides) are untouched. Mobile is unaffected:
   these max-widths exceed the viewport, so the column stays full-width under
   the gutter. The wider container lifts the header, breadcrumb, featured
   image, and footer in step so the whole article aligns to one column. */
.single-post .rt-container--narrow {
  max-width: 60rem;
}
.single-post .rt-prose {
  max-width: 74ch;
}

.rt-toc {
  position: sticky;
  top: var(--rt-space-6);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius);
  padding: var(--rt-space-5);
  font-size: var(--rt-text-sm);
}
.rt-toc ol {
  margin: 0;
  padding-left: 1.1em;
}
.rt-toc a {
  text-decoration: none;
}

.rt-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--rt-cta);
  z-index: 70;
}

.rt-author-box {
  display: flex;
  gap: var(--rt-space-5);
  align-items: flex-start;
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-5);
  background: var(--rt-surface);
}
.rt-author-box__avatar {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--rt-radius-pill);
  overflow: hidden;
  background: var(--rt-navy);
}

.rt-post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  background: var(--rt-white);
  transition: transform var(--rt-dur) var(--rt-ease);
}
.rt-post-card:hover {
  transform: translateY(-3px);
}
.rt-post-card__media {
  aspect-ratio: 1200 / 630;
  background: var(--rt-surface-2);
}
.rt-post-card__body {
  padding: var(--rt-space-5);
}

/* ── SKU showcase ───────────────────────────────────────────────────── */
.rt-sku-card {
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-5);
  background: var(--rt-white);
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-2);
}
.rt-sku-card__media {
  aspect-ratio: 1;
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  margin-bottom: var(--rt-space-3);
}
.rt-sku-card__name {
  font-weight: var(--rt-weight-bold);
}
.rt-sku-card__meta {
  font-size: var(--rt-text-sm);
  color: var(--rt-ink-soft);
}
.rt-sku-card--link {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--rt-dur) var(--rt-ease),
    transform var(--rt-dur) var(--rt-ease);
}
.rt-sku-card--link:hover {
  border-color: var(--rt-cta);
  transform: translateY(-2px);
}

/* PDP spec table — scannable, AI-parseable key/value rows */
.rt-spec-table {
  width: 100%;
  border-collapse: collapse;
}
.rt-spec-table th,
.rt-spec-table td {
  text-align: left;
  padding: var(--rt-space-3) var(--rt-space-4);
  border-bottom: 1px solid var(--rt-line);
  vertical-align: top;
}
.rt-spec-table th[scope="row"] {
  width: 38%;
  color: var(--rt-ink-soft);
  font-weight: var(--rt-weight-medium);
}
.rt-spec-table tr:last-child th,
.rt-spec-table tr:last-child td {
  border-bottom: 0;
}

/* Checklist — audience / who-it's-for lists */
.rt-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rt-space-3);
}
.rt-checklist li {
  position: relative;
  padding-left: var(--rt-space-6);
}
.rt-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--rt-cta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Old-vs-new comparison ("The Old Way" home section). Reuses .rt-card and the
   masked-marker technique from .rt-checklist; coral ✗ for the old way, green
   success ✓ for the Rocktomic way. Tokens only. */
.rt-vs-card {
  height: 100%;
}
.rt-vs-card--new {
  border-top: 3px solid var(--rt-cta);
}
.rt-vs-card__tag {
  margin: 0 0 var(--rt-space-4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  color: var(--rt-navy);
  opacity: 0.55;
}
.rt-vs-card__tag--new {
  color: var(--rt-cta);
  opacity: 1;
}
.rt-marklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rt-space-4);
}
.rt-marklist li {
  position: relative;
  padding-left: var(--rt-space-6);
}
.rt-marklist li strong {
  color: var(--rt-navy);
}
.rt-marklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
}
.rt-marklist--bad li::before {
  background: var(--rt-cta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 60% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.rt-marklist--good li::before {
  background: var(--rt-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ── Product slider (top sellers) ───────────────────────────────────── */
.rt-slider {
  position: relative;
}
.rt-slider__track {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--rt-space-3);
  display: flex;
  gap: var(--rt-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rt-slider__track::-webkit-scrollbar {
  display: none;
}
/* Slider items reuse the .rt-sku-card visual (media tile + attribute badges
   + name + meta) from the catalog showcase, so the homepage slider matches
   the /products/ proven-seller cards exactly. These rules only add the
   horizontal-slider sizing + scroll-snap on top of that shared card style. */
.rt-slider__track > .rt-sku-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 78%;
  max-width: 280px;
}
.rt-slider__nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--rt-line);
  background: var(--rt-white);
  color: var(--rt-navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--rt-shadow);
  display: none;
}
.rt-slider__nav--prev {
  left: -0.75rem;
}
.rt-slider__nav--next {
  right: -0.75rem;
}
.rt-slider__nav:hover {
  border-color: var(--rt-cta);
  color: var(--rt-cta);
}
.rt-slider__nav:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}
@media (min-width: 720px) {
  .rt-slider__track > .rt-sku-card {
    width: 280px;
  }
  .rt-slider__nav {
    display: block;
  }
}

/* Filter chips */
.rt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-2);
}

/* Sell-everywhere strip — wordmark channel chips (homepage integrations). */
.rt-channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rt-space-3) var(--rt-space-4);
}
.rt-channel {
  display: inline-flex;
  align-items: center;
  padding: var(--rt-space-3) var(--rt-space-5);
  border-radius: var(--rt-radius-pill);
  background: var(--rt-white);
  border: 1px solid var(--rt-line);
  box-shadow: var(--rt-shadow-sm);
  color: var(--rt-navy);
  font-weight: var(--rt-weight-bold);
  font-size: var(--rt-text-md);
  line-height: 1;
  text-decoration: none;
  transition: transform var(--rt-dur) var(--rt-ease),
    border-color var(--rt-dur) var(--rt-ease),
    color var(--rt-dur) var(--rt-ease);
}
.rt-channel:hover,
.rt-channel:focus-visible {
  transform: translateY(-2px);
  border-color: var(--rt-cta);
  color: var(--rt-cta-alt);
}

/* ── Integration logo wall ("Sell Everywhere") ───────────────────────── */
.rt-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rt-space-4);
  max-width: 46rem;
  margin-inline: auto;
}
.rt-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rt-space-3);
  padding: var(--rt-space-5) var(--rt-space-3);
  background: var(--rt-white);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius);
  box-shadow: var(--rt-shadow-sm);
  color: var(--rt-navy);
  text-decoration: none;
  transition: transform var(--rt-dur) var(--rt-ease),
    border-color var(--rt-dur) var(--rt-ease),
    box-shadow var(--rt-dur) var(--rt-ease);
}
.rt-logo-card:hover,
.rt-logo-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--rt-cta);
  box-shadow: var(--rt-shadow);
}
.rt-logo-card__mark {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
}
.rt-logo-card__mark svg {
  width: 100%;
  height: 100%;
}
.rt-logo-card__name {
  font-weight: var(--rt-weight-bold);
  font-size: var(--rt-text-base);
  line-height: 1.2;
  text-align: center;
}
/* Brand-tinted marks (partner trademarks; colors routed through tokens).
   Scoped to the tile so the tint wins over the dark-section link color
   (.rt-section--navy a), otherwise the currentColor marks render white. */
.rt-hub__tile.rt-logo--shopify { color: var(--rt-brand-shopify); }
.rt-hub__tile.rt-logo--tiktok { color: var(--rt-brand-tiktok); }
.rt-hub__tile.rt-logo--amazon { color: var(--rt-brand-amazon); }
.rt-hub__tile.rt-logo--woo { color: var(--rt-brand-woo); }
.rt-hub__tile.rt-logo--walmart { color: var(--rt-brand-walmart); }
.rt-hub__tile.rt-logo--web { color: var(--rt-navy); }
@media (max-width: 720px) {
  .rt-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rt-space-3);
  }
}

/* ── Integration hub ("Sell Everywhere", hub-and-spoke) ──────────────── */
.rt-hub-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--rt-space-8);
  align-items: center;
}
.rt-hub {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  aspect-ratio: 5 / 4;
}
.rt-hub__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rt-hub__wires line {
  stroke: var(--rt-on-navy-soft);
  stroke-width: 0.4;
  stroke-dasharray: 1.3 1.6;
  opacity: 0.45;
}
.rt-hub__node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 23%;
  aspect-ratio: 1;
  border-radius: var(--rt-radius);
  background: var(--rt-cta);
  color: var(--rt-white);
  display: grid;
  place-items: center;
  box-shadow: var(--rt-shadow);
}
.rt-hub__node picture {
  display: block;
  width: 78%;
}
.rt-hub__logo {
  display: block;
  width: 100%;
  height: auto;
}
.rt-hub__tile {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 17%;
  aspect-ratio: 1;
  border-radius: var(--rt-radius-sm);
  background: var(--rt-white);
  display: grid;
  place-items: center;
  box-shadow: var(--rt-shadow-sm);
  transition: transform var(--rt-dur) var(--rt-ease),
    box-shadow var(--rt-dur) var(--rt-ease);
}
.rt-hub__tile svg {
  width: 60%;
  height: 60%;
  transition: transform var(--rt-dur) var(--rt-ease);
}
/* Hover lifts the card and zooms the mark — transform stays off the tile so it
   doesn't fight the floating bob animation (which owns the tile's transform). */
.rt-hub__tile:hover,
.rt-hub__tile:focus-visible {
  box-shadow: var(--rt-shadow);
  z-index: 2;
  animation-play-state: paused;
}
.rt-hub__tile:hover svg,
.rt-hub__tile:focus-visible svg {
  transform: scale(1.12);
}
/* 7 channels on a ring around the Rocktomic node. */
.rt-hub__tile--1 { left: 50%; top: 10%; }
.rt-hub__tile--2 { left: 79.6%; top: 25%; }
.rt-hub__tile--3 { left: 87%; top: 59%; }
.rt-hub__tile--4 { left: 66.5%; top: 86%; }
.rt-hub__tile--5 { left: 33.5%; top: 86%; }
.rt-hub__tile--6 { left: 13%; top: 59%; }
.rt-hub__tile--7 { left: 20.3%; top: 25%; }
@media (max-width: 880px) {
  .rt-hub-split {
    grid-template-columns: 1fr;
    gap: var(--rt-space-7);
    text-align: center;
  }
  .rt-hub-copy .rt-u-flex {
    justify-content: center;
  }
  .rt-hub {
    max-width: 21rem;
  }
}

/* Horizontal scrollable pill nav (blog landing) */
.rt-pillnav {
  display: flex;
  gap: var(--rt-space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: var(--rt-space-3);
}
.rt-pillnav::-webkit-scrollbar {
  display: none;
}
.rt-pillnav .rt-chip {
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--rt-navy);
}
.rt-pillnav .rt-chip[aria-current] {
  background: var(--rt-navy);
  color: var(--rt-white);
  border-color: var(--rt-navy);
}

/* Two-line clamp for card excerpts */
.rt-u-clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rt-chip {
  min-height: var(--rt-tap-min);
  display: inline-flex;
  align-items: center;
  padding: 0.3em 1em;
  border-radius: var(--rt-radius-pill);
  border: 1px solid var(--rt-line);
  background: var(--rt-white);
  /* Explicit color so <button class="rt-chip"> (e.g. the niche quiz options)
     is legible. Without it, button elements fall back to the UA default text
     color and render invisibly on the white pill — links pick up the global
     <a> color, but buttons don't. The aria-pressed state flips to white. */
  color: var(--rt-navy);
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-medium);
  cursor: pointer;
}
.rt-chip[aria-pressed="true"] {
  background: var(--rt-navy);
  color: var(--rt-white);
  border-color: var(--rt-navy);
}

/* ── Breadcrumbs ────────────────────────────────────────────────────── */
.rt-crumbs {
  font-size: var(--rt-text-sm);
  color: var(--rt-ink-soft);
}
.rt-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-2);
  padding: 0;
  margin: 0;
}
.rt-crumbs li + li::before {
  content: "›";
  margin-right: var(--rt-space-2);
}

/* ── Value stack (offer page) ───────────────────────────────────────── */
.rt-value-stack .rt-table td:last-child {
  text-align: right;
  white-space: nowrap;
}
.rt-value-stack__total td {
  font-weight: var(--rt-weight-heavy);
  font-size: var(--rt-text-md);
  color: var(--rt-navy);
}

/* TBD placeholder slots — visually obvious, cannot ship unnoticed */
.rt-tbd {
  border: 2px dashed var(--rt-warn);
  border-radius: var(--rt-radius);
  padding: var(--rt-space-5);
  background: var(--rt-white);
  color: var(--rt-warn);
  font-weight: var(--rt-weight-bold);
}

/* Header branding: logo-only — site title/tagline text hidden, logo
   slightly enlarged (Kadence renders the header; we restyle it). */
.site-header .site-branding .site-title,
.site-header .site-branding .site-description {
  display: none;
}
.site-header .site-branding img.custom-logo,
.site-header .custom-logo-link img {
  height: 3.25rem;
  max-height: 3.25rem;
  width: auto;
}


/* ── v3 conversion components (POD-converter grade) ─────────────────── */

/* Trust panel: elevated stat band that pops off the page. */
.rt-trustbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rt-space-5);
  background: var(--rt-white);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-shadow-lg);
  padding: var(--rt-space-6) var(--rt-space-5);
  text-align: center;
}
@media (min-width: 640px) {
  .rt-trustbar {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: var(--rt-space-7) var(--rt-space-6);
  }
  .rt-trustbar__item + .rt-trustbar__item {
    border-left: 1px solid var(--rt-line);
  }
}
.rt-trustbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rt-space-1);
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-medium);
  color: var(--rt-ink-soft);
  padding-inline: var(--rt-space-3);
}
.rt-trustbar__item strong {
  font-size: clamp(2.2rem, 5vw, 3.052rem);
  line-height: 1;
  font-weight: var(--rt-weight-heavy);
  letter-spacing: var(--rt-tracking-tight);
  color: var(--rt-cta);
  font-variant-numeric: tabular-nums;
}

/* Breadcrumb hero pages (tools): tighten the gap under the site header. */
.rt-section:has(.rt-crumbs) {
  padding-top: var(--rt-space-6);
}

/* Masonry-style wall of review screenshots (real images) */
.rt-review-wall {
  columns: 1;
  column-gap: var(--rt-space-5);
}
@media (min-width: 640px) {
  .rt-review-wall {
    columns: 2;
  }
}
@media (min-width: 960px) {
  .rt-review-wall {
    columns: 3;
  }
}
.rt-review-wall > * {
  break-inside: avoid;
  margin-bottom: var(--rt-space-5);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  box-shadow: var(--rt-shadow);
  display: block;
}
.rt-review-wall img {
  width: 100%;
  height: auto;
  display: block;
}

/* Full-bleed image band with overlay copy */
.rt-img-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--rt-radius-lg);
}
.rt-img-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rt-img-band__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--rt-space-7) var(--rt-space-6);
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--rt-navy) 88%, transparent) 100%);
  color: var(--rt-white);
}

/* Oversized section heading treatment */
.rt-h-display {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: var(--rt-tracking-tight);
  line-height: var(--rt-leading-tight);
}

/* ── Homepage earnings calculator — Printify-style hero earnings block ── */
/* Centered, width-constrained card; inner controls stay left-aligned even
   inside a centered (.rt-u-center) section. */
.rt-calc-card {
  max-width: 560px;
  margin-inline: auto;
  text-align: left;
}
/* Plan toggle — segmented control (Free / Scale). */
.rt-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rt-space-1);
  padding: var(--rt-space-1);
  margin-bottom: var(--rt-space-5);
  background: var(--rt-surface-2);
  border-radius: var(--rt-radius);
}
.rt-seg__btn {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: var(--rt-radius-sm);
  padding: var(--rt-space-3) var(--rt-space-2);
  font: inherit;
  font-weight: var(--rt-weight-bold);
  color: var(--rt-ink-soft);
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background var(--rt-dur) var(--rt-ease),
    color var(--rt-dur) var(--rt-ease);
}
.rt-seg__btn small {
  display: block;
  margin-top: 2px;
  font-size: var(--rt-text-xs);
  font-weight: var(--rt-weight-medium);
  opacity: 0.7;
}
.rt-seg__btn.is-active {
  background: var(--rt-white);
  color: var(--rt-navy);
  box-shadow: var(--rt-shadow-sm);
}
.rt-seg__btn:focus-visible {
  outline: 2px solid var(--rt-cta);
  outline-offset: 2px;
}
.rt-earn {
  margin-top: var(--rt-space-5);
  padding: var(--rt-space-5) var(--rt-space-5) var(--rt-space-6);
  border-radius: var(--rt-radius);
  background: linear-gradient(135deg, var(--rt-earn-bg-1) 0%, var(--rt-earn-bg-2) 100%);
  color: var(--rt-earn-ink);
  text-align: center;
}
.rt-earn__label {
  display: block;
  font-size: var(--rt-text-xs);
  font-weight: var(--rt-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.92;
}
.rt-earn__num {
  display: block;
  font-size: clamp(2.5rem, 6vw, 3.4rem);
  font-weight: var(--rt-weight-heavy);
  line-height: 1.04;
  letter-spacing: var(--rt-tracking-tight);
  margin: var(--rt-space-2) 0;
}
.rt-earn__sub {
  display: block;
  font-size: var(--rt-text-sm);
  opacity: 0.95;
}
.rt-earn__sub strong {
  font-weight: var(--rt-weight-heavy);
}
.rt-earn__cta {
  margin-top: var(--rt-space-5);
}
.rt-earn .rt-btn--primary {
  background: var(--rt-earn-ink);
  color: var(--rt-white);
  box-shadow: none;
}
.rt-earn .rt-btn--primary:hover,
.rt-earn .rt-btn--primary:focus-visible {
  background: var(--rt-navy);
  color: var(--rt-white);
}
.rt-earn-breakdown {
  margin-top: var(--rt-space-4);
  border-top: 1px solid var(--rt-line);
  padding-top: var(--rt-space-2);
}
.rt-earn-breakdown > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-bold);
  color: var(--rt-navy);
  padding: var(--rt-space-2) 0;
}
.rt-earn-breakdown > summary::-webkit-details-marker {
  display: none;
}
.rt-earn-breakdown > summary::after {
  content: " +";
  color: var(--rt-cta);
}
.rt-earn-breakdown[open] > summary::after {
  content: " −";
}

/* ── Footer v4 ──────────────────────────────────────────────────────── */
/* Kadence's default footer rows are cleared in PHP (rt_strip_kadence_footer);
   hide the now-contentless parent wrapper so no grey credit strip remains. The
   custom rt-footer renders above #colophon via kadence_before_footer. */
#colophon.site-footer {
  display: none;
}
.rt-footer {
  background: linear-gradient(180deg, var(--rt-navy) 0%, var(--rt-navy-900) 100%);
  padding-block: var(--rt-space-8) var(--rt-space-6);
}
.rt-footer__brand {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-6);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--rt-space-7);
  border-bottom: 1px solid color-mix(in srgb, var(--rt-white) 12%, transparent);
}
.rt-footer__logo img,
img.rt-footer__logo {
  max-width: 180px;
  height: auto;
}
.rt-footer__wordmark {
  font-size: var(--rt-text-xl);
  font-weight: var(--rt-weight-heavy);
  color: var(--rt-white);
  letter-spacing: var(--rt-tracking-tight);
}
.rt-footer__tag {
  color: var(--rt-on-navy-soft);
  max-width: 34ch;
  margin: var(--rt-space-3) 0 0;
}
.rt-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rt-space-6);
  padding-block: var(--rt-space-7);
}
@media (min-width: 860px) {
  .rt-footer__cols {
    grid-template-columns: repeat(4, 1fr);
  }
}
.rt-footer__cols h4 {
  color: var(--rt-white);
  font-size: var(--rt-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--rt-space-4);
}
.rt-footer__cols ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--rt-space-2);
}
.rt-footer__cols a {
  color: var(--rt-on-navy-soft);
  text-decoration: none;
}
.rt-footer__cols a:hover {
  color: var(--rt-white);
}
.rt-footer__awards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-4);
  align-items: center;
  padding-block: var(--rt-space-5);
  border-top: 1px solid color-mix(in srgb, var(--rt-white) 12%, transparent);
}
.rt-footer__badge img,
img.rt-footer__badge,
.rt-footer__awards picture img {
  max-height: 56px;
  width: auto;
  background: var(--rt-white);
  border-radius: var(--rt-radius-sm);
  padding: var(--rt-space-1);
}
.rt-footer__legal {
  padding-top: var(--rt-space-5);
}
.rt-footer__legal p {
  color: var(--rt-on-navy-soft);
  font-size: var(--rt-text-xs);
  margin-bottom: var(--rt-space-2);
}
.rt-footer__disclaimer {
  max-width: 70ch;
}

/* ── Typeset testimonial quote cards ────────────────────────────────── */
.rt-quote-card {
  position: relative;
  margin: 0;
  background: var(--rt-white);
  border-radius: var(--rt-radius-lg);
  padding: var(--rt-space-6);
  padding-top: var(--rt-space-7);
  box-shadow: var(--rt-shadow);
}
.rt-quote-card::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem;
  left: var(--rt-space-5);
  font-size: 4rem;
  line-height: 1;
  font-weight: var(--rt-weight-heavy);
  color: var(--rt-cta);
  opacity: 0.85;
}
.rt-quote-card__text {
  margin: 0 0 var(--rt-space-4);
  border: 0;
  padding: 0;
  color: var(--rt-ink);
  font-size: var(--rt-text-base);
  line-height: var(--rt-leading-body);
}
.rt-quote-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-space-3);
}
.rt-quote-card__name {
  font-weight: var(--rt-weight-bold);
  color: var(--rt-navy);
}
.rt-quote-card__stars {
  color: var(--rt-cta);
  letter-spacing: 0.1em;
}
.rt-section--navy .rt-quote-card,
.rt-on-dark .rt-quote-card {
  background: var(--rt-white);
}

/* Review slider — quote cards as a clean, equal-height horizontal slider
   (replaces the cramped masonry wall). Cards share a width, the quote text
   clamps so heights stay tidy, and the name/stars pin to the card bottom. */
.rt-review-slider .rt-slider__track {
  align-items: stretch;
  padding-block: var(--rt-space-2) var(--rt-space-5);
}
.rt-slider__track > .rt-quote-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 86%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 720px) {
  .rt-slider__track > .rt-quote-card {
    width: 380px;
  }
}
.rt-slider__track > .rt-quote-card .rt-quote-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rt-slider__track > .rt-quote-card .rt-quote-card__meta {
  margin-top: auto;
  padding-top: var(--rt-space-3);
}

/* Real product/post photos: contain within the square media box (fixes
   tall bottle shots inflating/overflowing, especially on mobile). */
.rt-sku-card__media,
.rt-post-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--rt-white);
}
.rt-sku-card__media picture,
.rt-post-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.rt-sku-card__media img,
.rt-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Product attribute pills (factual catalog attributes) */
.rt-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-1);
  margin-top: var(--rt-space-2);
}
.rt-attr {
  font-size: var(--rt-text-xs);
  font-weight: var(--rt-weight-medium);
  line-height: 1.4;
  padding: 0.1em 0.6em;
  border-radius: var(--rt-radius-pill);
  background: var(--rt-surface-2);
  color: var(--rt-navy);
  white-space: nowrap;
}
.rt-attr--more {
  background: transparent;
  color: var(--rt-ink-soft);
}

/* PDP hero media */
.rt-pdp__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rt-white);
  padding: var(--rt-space-5);
  aspect-ratio: 1;
}
.rt-pdp__media img,
.rt-pdp__media picture { width: 100%; height: 100%; object-fit: contain; display: block; }
.rt-pdp .rt-stat__num { font-size: var(--rt-text-xl); }