/* RepBot marketing system v1. Scope on <body class="rb-marketing">.
 * Canonical shared values for all marketing pages; see BRAND_GUIDELINES.md.
 * Homepage composition live in pages/home.css.
 */
body.rb-marketing {
  --rb-font-heading: Sora, Arial, sans-serif;
  --rb-font-body: Manrope, Arial, sans-serif;
  --rb-page: #fff;
  --rb-ink: #101211;
  --rb-muted: #5c6265;
  --rb-line: #e3e5e8;
  --rb-soft: #f5f5f7;
  --rb-surface-lavender: #e4e0f2;
  --rb-surface-mint: #dcebe6;
  --rb-accent: #835bc7;
  --rb-teal: #368e90;
  --rb-inverse: #1f1f1f;
  --rb-inverse-panel: #282828;
  --rb-inverse-ink: #fff;
  --rb-inverse-muted: #c2c5c3;
  --rb-inverse-line: #454545;
  --rb-gradient: linear-gradient(110deg, #9569c8 5%, #526fba 55%, #409e9b 100%);
  --rb-button-gradient: linear-gradient(102deg, #8258c8, #6766c8 32%, #2c84c8);
  --rb-cta-primary: linear-gradient(110deg, #6142a6 0%, #4d57ad 55%, #2b668f 100%);
  --rb-cta-primary-hover: linear-gradient(110deg, #7655c2 0%, #5668c3 55%, #337da7 100%);
  --rb-cta-secondary: linear-gradient(110deg, #126e71 0%, #176779 55%, #1a587a 100%);
  --rb-cta-secondary-hover: linear-gradient(110deg, #18868a 0%, #1d7b91 55%, #236b94 100%);
  --rb-focus: #9569c8;
  --rb-radius: 8px;
  --rb-radius-control: 6px;
  --rb-space-1: 4px;
  --rb-space-2: 8px;
  --rb-space-3: 12px;
  --rb-space-4: 16px;
  --rb-space-6: 24px;
  --rb-space-8: 32px;
  --rb-space-10: 40px;
  --rb-space-12: 48px;
  --rb-space-16: 64px;
  --rb-space-20: 80px;
  --rb-space-28: 112px;
  --rb-gutter: 112px;
  --rb-container: min(1316px, calc(100vw - 2 * var(--rb-gutter)));
  --rb-section-space: var(--rb-space-28);
  --rb-content-gap: var(--rb-space-12);
  --rb-column-gap: var(--rb-space-16);
  --rb-card-padding: var(--rb-space-8);
  --rb-title-size: 52px;
  --rb-panel-size: 36px;
  --rb-card-size: 20px;
  --rb-button-height: 64px;
  --rb-button-text: 16px;
  margin: 0;
  background: var(--rb-page);
  color: var(--rb-ink);
  font: 400 16px/1.75 var(--rb-font-body);
  -webkit-font-smoothing: antialiased;
}

body.rb-marketing.rb-dark {
  --rb-page: #141716;
  --rb-ink: #f4f5f3;
  --rb-muted: #b3bdb6;
  --rb-line: #353c37;
  --rb-soft: #282e2a;
  --rb-surface-lavender: #322e3d;
  --rb-surface-mint: #263c36;
  --rb-accent: #b69ae6;
  --rb-gradient: linear-gradient(110deg, #c197eb 5%, #8fa5ef 55%, #68c9b9 100%);
  --rb-cta-primary: linear-gradient(110deg, #7650bf 0%, #6654bb 55%, #255f9f 100%);
  --rb-cta-secondary: linear-gradient(110deg, #137b77 0%, #176f84 55%, #215b99 100%);
}

body.rb-marketing *,
body.rb-marketing *::before,
body.rb-marketing *::after { box-sizing: border-box; }
body.rb-marketing :focus-visible { outline: 3px solid var(--rb-focus); outline-offset: 5px; }
body.rb-marketing [hidden] { display: none !important; }
:where(body.rb-marketing) img { display: block; max-width: 100%; height: auto; }
:where(body.rb-marketing) a { color: inherit; text-decoration: none; }
:where(body.rb-marketing) button { font-family: var(--rb-font-body); cursor: pointer; }
:where(body.rb-marketing) p { margin: 0; }

/* Typography is assigned by role, never by a page-specific heading selector. */
body.rb-marketing :is(.rb-display, .rb-section-title, .rb-panel-title, .rb-plan-title) {
  font-family: var(--rb-font-heading);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
body.rb-marketing .rb-display { font-size: clamp(48px, 5.15cqw, 68px); line-height: 1.04; letter-spacing: -.05em; }
body.rb-marketing .rb-section-title { font-size: var(--rb-title-size); line-height: 1.16; letter-spacing: -.045em; }
body.rb-marketing .rb-panel-title { font-size: var(--rb-panel-size); line-height: 1.25; letter-spacing: -.035em; }
body.rb-marketing .rb-plan-title { font-size: 28px; line-height: 1.25; letter-spacing: -.035em; }
body.rb-marketing .rb-card-title { font: 600 var(--rb-card-size)/1.5 var(--rb-font-body); letter-spacing: 0; margin: 0; text-wrap: pretty; }
body.rb-marketing .rb-body { font: 400 16px/1.75 var(--rb-font-body); letter-spacing: 0; }
body.rb-marketing .rb-small { font: 400 14px/1.75 var(--rb-font-body); letter-spacing: 0; }
body.rb-marketing .rb-meta { font: 400 12px/1.5 var(--rb-font-body); letter-spacing: 0; }
body.rb-marketing .rb-eyebrow {
  font: 600 13px/1.5 var(--rb-font-body);
  letter-spacing: .01em;
  /* The old V2 eyebrow uses !important. This is the sole compatibility exception. */
  margin: 0 0 var(--rb-space-6) !important;
}
body.rb-marketing .rb-eyebrow::before { content: '[ '; color: var(--rb-accent); }
body.rb-marketing .rb-eyebrow::after { content: ' ]'; color: var(--rb-accent); }
body.rb-marketing .rb-gradient { background: var(--rb-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; }
body.rb-marketing .rb-muted { color: var(--rb-muted); }
body.rb-marketing .rb-footer-title { font: 600 14px/1.5 var(--rb-font-body); letter-spacing: 0; margin: 0 0 var(--rb-space-4); color: var(--rb-muted); }

/* Layout primitives. Band decoration may be wider; content always shares this grid. */
body.rb-marketing .rb-container { width: var(--rb-container); max-width: calc(100% - 24px); margin-inline: auto; }
body.rb-marketing .rb-section { padding-block: var(--rb-section-space); }
body.rb-marketing .rb-section--compact { padding-block: var(--rb-content-gap); }
body.rb-marketing .rb-section-heading { margin-bottom: var(--rb-content-gap); }
body.rb-marketing .rb-section-heading > .rb-body { margin-top: var(--rb-space-6); }
body.rb-marketing .rb-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rb-column-gap); align-items: start; }
body.rb-marketing .rb-stack > * + * { margin-top: var(--rb-space-6); }
body.rb-marketing .rb-card { padding: var(--rb-card-padding); border: 1px solid var(--rb-line); border-radius: var(--rb-radius); }
body.rb-marketing .rb-inverse { --rb-ink: var(--rb-inverse-ink); --rb-muted: var(--rb-inverse-muted); --rb-line: var(--rb-inverse-line); --rb-accent: #b69ae6; color: var(--rb-ink); background-color: var(--rb-inverse); }

/* Buttons. Reuse the two-SVG arrow markup from rb_v2_arrow() in WordPress. */
body.rb-marketing .rb-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rb-space-6);
  min-height: var(--rb-button-height);
  max-width: 100%;
  padding: var(--rb-space-3) var(--rb-space-6);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  background: var(--rb-cta-primary);
  color: #fff;
  font: 600 var(--rb-button-text)/1.35 var(--rb-font-heading);
  letter-spacing: -.015em;
  text-align: center;
  text-shadow: 0 1px 1px rgba(15, 22, 42, .2);
  white-space: normal;
  box-shadow: 0 8px 20px rgba(50, 52, 116, .23), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
body.rb-marketing .rb-button--outline { --rb-cta-primary-hover: var(--rb-cta-secondary-hover); background: var(--rb-cta-secondary); box-shadow: 0 8px 20px rgba(19, 100, 106, .22), inset 0 1px 0 rgba(255, 255, 255, .23); }
body.rb-marketing .rb-button--compact { min-height: 48px; padding: var(--rb-space-3) var(--rb-space-4); gap: var(--rb-space-4); font-size: 14px; }
body.rb-marketing .rb-button:is(:hover, :focus-visible) { background: var(--rb-cta-primary-hover); box-shadow: 0 12px 24px rgba(50, 52, 116, .3), inset 0 1px 0 rgba(255, 255, 255, .3); color: #fff; transform: translateY(-2px); }
body.rb-marketing .rb-button:active { transform: translateY(0); }
body.rb-marketing .rb-button-arrow { position: relative; display: inline-block; flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .16); }
body.rb-marketing .rb-button-arrow svg { position: absolute; inset: 8px; width: 12px; height: 12px; transition: transform .3s ease; }
body.rb-marketing .rb-button-arrow svg:last-child { transform: translate(-150%, 150%); }
body.rb-marketing .rb-button:is(:hover, :focus-visible) .rb-button-arrow svg:first-child { transform: translate(150%, -150%); }
body.rb-marketing .rb-button:is(:hover, :focus-visible) .rb-button-arrow svg:last-child { transform: translate(0, 0); }
body.rb-marketing .home-button.rb-button--white,
body.rb-marketing.rb-dark .home-button.rb-button--solid { color: #fff !important; }
@media (prefers-reduced-motion: reduce) {
  body.rb-marketing .rb-button { transition: none; }
}

/* Native details group: use a shared name attribute for exclusive expansion. */
body.rb-marketing .rb-faq details { border-bottom: 1px solid var(--rb-line); padding-block: var(--rb-space-6); }
body.rb-marketing .rb-faq details:first-child { padding-top: 0; }
body.rb-marketing .rb-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--rb-space-6); list-style: none; cursor: pointer; color: var(--rb-ink); font: 400 18px/1.5 var(--rb-font-heading); letter-spacing: -.025em; }
body.rb-marketing .rb-faq summary::-webkit-details-marker { display: none; }
body.rb-marketing .rb-faq summary > span { position: relative; width: 18px; height: 18px; flex: none; }
body.rb-marketing .rb-faq summary > span::before,
body.rb-marketing .rb-faq summary > span::after { content: ''; position: absolute; background: currentColor; width: 14px; height: 1px; top: 8px; left: 2px; }
body.rb-marketing .rb-faq summary > span::after { transform: rotate(90deg); }
body.rb-marketing .rb-faq details[open] summary > span::after { transform: none; }
body.rb-marketing .rb-faq p { font: 400 16px/1.75 var(--rb-font-body); margin: var(--rb-space-4) 0 0; color: var(--rb-muted); }

@media (max-width: 1250px) {
  body.rb-marketing { --rb-gutter: 64px; }
}
@media (max-width: 1050px) {
  body.rb-marketing { --rb-gutter: 48px; --rb-section-space: var(--rb-space-20); --rb-column-gap: var(--rb-space-10); --rb-title-size: 44px; --rb-panel-size: 32px; }
  body.rb-marketing .rb-display { font-size: clamp(36px, 5vw, 52px); }
}
@media (max-width: 767px) {
  body.rb-marketing { --rb-gutter: 24px; --rb-section-space: var(--rb-space-16); --rb-content-gap: var(--rb-space-8); --rb-column-gap: var(--rb-space-8); --rb-card-padding: var(--rb-space-6); --rb-title-size: 34px; --rb-panel-size: 28px; --rb-card-size: 18px; --rb-button-height: 56px; --rb-button-text: 14px; }
  body.rb-marketing .rb-display { font-size: clamp(32px, 9.3vw, 55px); line-height: 1.08; letter-spacing: -.06em; }
  body.rb-marketing .rb-split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.rb-marketing *, body.rb-marketing *::before, body.rb-marketing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}