/**
 * Aligns the exported marketing page with the main app landing (globals.css + landing-page.tsx):
 * Plus Jakarta Sans (linked in index by sync script), brand #58bfed / hover #46b0e6.
 * Loaded last (injected before </body>) so it wins over bundled Tailwind utilities.
 */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400;
  color: rgb(15, 23, 42);
}

.font-display {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
}

/* Brand utilities — match --brand / --brand-hover */
.text-reweyou-red,
.text-reweyou-red-dark {
  color: #58bfed !important;
}

.bg-reweyou-red,
.bg-reweyou-red-dark {
  background-color: #58bfed !important;
}

.bg-reweyou-red\/8 {
  background-color: rgba(88, 191, 237, 0.08) !important;
}

.hover\:bg-reweyou-red:hover,
.hover\:bg-reweyou-red-dark:hover {
  background-color: #46b0e6 !important;
}

.hover\:text-reweyou-red:hover {
  color: #46b0e6 !important;
}

.from-reweyou-red\/10 {
  --tw-gradient-from: rgba(88, 191, 237, 0.1) var(--tw-gradient-from-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.shadow-reweyou-red\/25,
.hover\:shadow-reweyou-red\/25:hover {
  --tw-shadow-color: rgba(88, 191, 237, 0.25);
}

.hover\:shadow-reweyou-red\/35:hover {
  --tw-shadow-color: rgba(88, 191, 237, 0.35);
}

.ring-reweyou-red\/20 {
  --tw-ring-color: rgba(88, 191, 237, 0.2);
}

/* Headline accent — solid brand (avoid gradient “box”: align sheet loads after site-overrides and must not drop background-clip:text) */
.text-gradient-animated {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: #58bfed !important;
  animation: none !important;
}

/* Footer accent — brand-forward (old landing footer is neutral; this keeps bar on-brand) */
.site-footer-accent {
  background: linear-gradient(90deg, #58bfed 0%, #7accf0 40%, #46b0e6 100%) !important;
}

::selection {
  background-color: rgba(88, 191, 237, 0.28) !important;
  color: inherit;
}

/*
 * Capabilities marquee (#services-marquee): export uses one brand gradient for every icon.
 * RTL row repeats 5 cards ×2 (10 <article>s); LTR row repeats 4 cards ×2 (8). nth-child maps each product to its own accent.
 */
/* RTL: Link hub, Subscriptions, Shop, Bookings, Forms (each duplicated for seamless loop) */
#services-marquee .services-marquee-row--rtl .services-marquee-track > article.value-prop:nth-child(10n + 1),
#services-marquee .services-marquee-row--rtl .services-marquee-track > article.value-prop:nth-child(10n + 6) {
  --rw-cap-icon-bg: rgb(56 189 248 / 0.3);
  --rw-cap-icon-fg: rgb(14 165 233);
  --rw-cap-icon-ring: rgb(14 165 233 / 0.38);
}

#services-marquee .services-marquee-row--rtl .services-marquee-track > article.value-prop:nth-child(10n + 2),
#services-marquee .services-marquee-row--rtl .services-marquee-track > article.value-prop:nth-child(10n + 7) {
  --rw-cap-icon-bg: rgb(251 113 133 / 0.3);
  --rw-cap-icon-fg: rgb(244 63 94);
  --rw-cap-icon-ring: rgb(244 63 94 / 0.38);
}

#services-marquee .services-marquee-row--rtl .services-marquee-track > article.value-prop:nth-child(10n + 3),
#services-marquee .services-marquee-row--rtl .services-marquee-track > article.value-prop:nth-child(10n + 8) {
  --rw-cap-icon-bg: rgb(167 139 250 / 0.3);
  --rw-cap-icon-fg: rgb(139 92 246);
  --rw-cap-icon-ring: rgb(139 92 246 / 0.38);
}

#services-marquee .services-marquee-row--rtl .services-marquee-track > article.value-prop:nth-child(10n + 4),
#services-marquee .services-marquee-row--rtl .services-marquee-track > article.value-prop:nth-child(10n + 9) {
  --rw-cap-icon-bg: rgb(52 211 153 / 0.3);
  --rw-cap-icon-fg: rgb(16 185 129);
  --rw-cap-icon-ring: rgb(16 185 129 / 0.38);
}

#services-marquee .services-marquee-row--rtl .services-marquee-track > article.value-prop:nth-child(10n + 5),
#services-marquee .services-marquee-row--rtl .services-marquee-track > article.value-prop:nth-child(10n + 10) {
  --rw-cap-icon-bg: rgb(251 191 36 / 0.34);
  --rw-cap-icon-fg: rgb(217 119 6);
  --rw-cap-icon-ring: rgb(245 158 11 / 0.42);
}

/* LTR: Blog, Courses, APIs, Invoices (×2) */
#services-marquee .services-marquee-row--ltr .services-marquee-track > article.value-prop:nth-child(8n + 1),
#services-marquee .services-marquee-row--ltr .services-marquee-track > article.value-prop:nth-child(8n + 5) {
  --rw-cap-icon-bg: rgb(129 140 248 / 0.3);
  --rw-cap-icon-fg: rgb(99 102 241);
  --rw-cap-icon-ring: rgb(99 102 241 / 0.38);
}

#services-marquee .services-marquee-row--ltr .services-marquee-track > article.value-prop:nth-child(8n + 2),
#services-marquee .services-marquee-row--ltr .services-marquee-track > article.value-prop:nth-child(8n + 6) {
  --rw-cap-icon-bg: rgb(45 212 191 / 0.3);
  --rw-cap-icon-fg: rgb(20 184 166);
  --rw-cap-icon-ring: rgb(20 184 166 / 0.38);
}

#services-marquee .services-marquee-row--ltr .services-marquee-track > article.value-prop:nth-child(8n + 3),
#services-marquee .services-marquee-row--ltr .services-marquee-track > article.value-prop:nth-child(8n + 7) {
  --rw-cap-icon-bg: rgb(192 132 252 / 0.3);
  --rw-cap-icon-fg: rgb(168 85 247);
  --rw-cap-icon-ring: rgb(168 85 247 / 0.38);
}

#services-marquee .services-marquee-row--ltr .services-marquee-track > article.value-prop:nth-child(8n + 4),
#services-marquee .services-marquee-row--ltr .services-marquee-track > article.value-prop:nth-child(8n + 8) {
  --rw-cap-icon-bg: rgb(251 146 60 / 0.3);
  --rw-cap-icon-fg: rgb(249 115 22);
  --rw-cap-icon-ring: rgb(249 115 22 / 0.38);
}

#services-marquee .services-marquee-track > article.value-prop > div.mb-4.inline-flex.h-14 {
  background-image: none !important;
  background-color: var(--rw-cap-icon-bg, rgb(56 189 248 / 0.28)) !important;
  color: var(--rw-cap-icon-fg, rgb(14 165 233)) !important;
  box-shadow: inset 0 0 0 1px var(--rw-cap-icon-ring, rgb(14 165 233 / 0.35));
}

/*
 * Home iframe: sync adds html.rw-marketing-embed — the real header is GlobalHeader outside the iframe.
 * Drop the large first-section top inset that was meant for in-document #site-nav (phantom gap otherwise).
 */
html.rw-marketing-embed {
  --rw-header-scroll-offset: clamp(0.75rem, 3vw, 1.25rem);
}

html.rw-marketing-embed main > section:first-of-type {
  padding-top: max(1rem, env(safe-area-inset-top, 0px)) !important;
}

@media (min-width: 640px) {
  html.rw-marketing-embed main > section:first-of-type {
    padding-top: max(1.125rem, env(safe-area-inset-top, 0px)) !important;
  }
}