/* Homepage-derived standards. Layouts and product accent colors remain contextual. */
body.website-brand {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Roca Two", "Inter", Georgia, serif;
  --font-family: var(--font);
  --bg-primary: var(--bg);
  --bg-secondary: var(--bg-subtle);
  --bg-tertiary: var(--bg-subtle);
  --bg-card: var(--white);
  --bg-card-hover: var(--bg-subtle);
  --text-primary: var(--text);
  --text-tertiary: var(--text-muted);
  --primary: var(--blue);
  --primary-dark: #2878ad;
  --secondary: var(--teal);
  --accent: var(--teal);
  --gradient-primary: var(--gradient-brand);
  --gradient-secondary: var(--gradient-brand);
  --gradient-accent: var(--gradient-brand);
  --gradient-hero: var(--gradient-brand);
  --gradient-bg: radial-gradient(ellipse at 15% 10%, var(--blue-soft), transparent 55%), radial-gradient(ellipse at 90% 85%, var(--teal-soft), transparent 55%);
  --motion-duration: .75s;
  --motion-easing: cubic-bezier(.4, 0, .2, 1);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}
.website-brand :is(h1,h2,h3,h4) { font-family: var(--font); letter-spacing: -.035em; text-wrap: balance; }
.website-brand :is(button,input,select,textarea) { font-family: var(--font); }
.website-brand :is(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.website-brand :is(section,[id]) { scroll-margin-top: 100px; }
.website-brand .page-hero__title { font-weight: 700; font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: 1.1; }
.website-brand :is(.page-hero,.fk-hero) { position: relative; isolation: isolate; }
.website-brand :is(.page-hero,.fk-hero)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 10% 15%, var(--blue-soft), transparent 55%), radial-gradient(ellipse at 95% 80%, var(--teal-soft), transparent 55%);
}
.website-brand :is(.section-label,.section-badge,.tag) { font-family: var(--font-display); }
.website-brand :is(.btn,.fk-btn) { transition: transform var(--ease-spring), box-shadow var(--ease), background var(--ease); }
.website-brand :is(.btn-primary,.fk-btn--primary) { background: var(--gradient-brand); color: var(--ink); border-color: transparent; }
.website-brand :is(.btn-secondary,.fk-btn--ghost) { background: var(--white); color: var(--text); border: 1px solid var(--border); }
.website-brand :is(.benefit-card,.feature-card,.ai-card,.mod-card,.mod-related-card,.fk-card,.partner-card,.pricing-card,.post-card,.featured-post,.step-card,.feature-item) {
  border-radius: var(--radius-lg); border-color: var(--border); box-shadow: var(--shadow-sm);
  transition: transform var(--ease-spring), box-shadow var(--ease), border-color var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .website-brand :is(.btn,.fk-btn):hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .website-brand :is(.benefit-card,.feature-card,.ai-card,.mod-card,.mod-related-card,.fk-card,.partner-card,.pricing-card,.post-card,.featured-post,.step-card,.feature-item):hover {
    transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue);
  }
}
/* Animate only elements explicitly armed by the observer. Content works without JS. */
.website-brand .brand-reveal { transition: opacity var(--motion-duration) var(--motion-easing), translate var(--motion-duration) var(--motion-easing); }
.website-brand .brand-reveal.is-pending { opacity: 0; translate: 0 32px; }
.website-brand .brand-reveal.is-visible { opacity: 1; translate: 0; }
.website-brand .brand-reveal:focus-within { opacity: 1; translate: 0; }
.screenshot-placeholder {
  margin: 0; width: 100%; min-height: 220px; aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 32px; border: 1px dashed var(--blue); border-radius: var(--radius-lg);
  background: radial-gradient(circle at 20% 10%, var(--blue-soft), transparent 60%), var(--bg-subtle);
  color: var(--text-secondary); text-align: center; overflow: hidden;
}
.screenshot-placeholder i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--gradient-brand); color: var(--ink); font-size: 24px; }
.screenshot-placeholder figcaption { max-width: 38ch; font-size: 14px; }
.screenshot-placeholder small { color: var(--text-muted); font-size: 12px; }
/* Legacy layouts retain their page-specific grids and content, using the shared shell. */
body.legacy-page { padding-top: 80px !important; }
.legacy-page .container { width: min(100% - 48px, var(--max)); max-width: var(--max); padding-inline: 0; }
.legacy-page :is(.hero,.intro-section,.blog-header,.article-header) {
  min-height: auto; padding-block: clamp(48px, 7vw, 96px); background: var(--gradient-bg); position: relative;
}
.legacy-page :is(.hero-title,.influencer-title,.thank-you-title,.post-title,.article-title,.blog-header h1) {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: 1.12; font-weight: 700; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor; margin-bottom: 24px;
}
.legacy-page :is(.hero-subtitle,.hero-description,.intro-description,.section-description,.sub) { color: var(--text-secondary); font-size: 18px; line-height: 1.7; }
.legacy-page :is(.hero-content,.section-header) { position: relative; z-index: 1; }
.legacy-page :is(.feature-card,.pricing-card,.step-card,.post-card,.featured-post,.panel,.referral-form,.form-container,.content-card,.thank-you-content,.support-card) {
  background: var(--white); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.legacy-page :is(.section,.steps-section,.pricing-section,.content-section,.contact-section,.video-section) { padding-block: clamp(48px, 7vw, 96px); }
.legacy-page :is(.cta,.cta-section) { background: var(--gradient-bg); padding: 64px 24px; border-block: 1px solid var(--border); color: var(--text); }
.legacy-page :is(.cta-title,.pricing-title,.intro-title,.steps-title,.video-title) { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.2; color: var(--text); }
.legacy-page :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 12px; }
.legacy-page :is(.feature-icon,.step-number,.success-icon) { background: var(--gradient-brand); color: var(--ink); border-radius: 16px; }
/* Reading surfaces use restrained motion and comfortable line lengths. */
.page-kind-reading :is(.content-section > .container,.article-container,.blog-post,.post-container,.article-content) { max-width: 820px; margin-inline: auto; }
.page-kind-reading :is(.article-content,.post-content,.content-card) { font-size: 17px; line-height: 1.85; color: var(--text-secondary); }
.page-kind-reading :is(.article-content,.post-content,.content-card) h2 { color: var(--text); margin-block: 40px 16px; }
.page-kind-reading :is(.article-content,.post-content,.content-card) a { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme=dark] .page-kind-reading :is(.article-content,.post-content,.content-card) a { color: var(--blue); }
.page-kind-reading :is(.content-card,.article-content,.post-content):hover { transform: none; }
.page-kind-conversion :is(.referral-form,.form-container,.panel) { border-top: 4px solid var(--teal); }
.page-kind-conversion .thank-you-section { min-height: 65vh; padding: 72px 24px; background: var(--gradient-bg); }
.page-kind-directory :is(.filter-tag,.category-btn) { border: 1px solid var(--border); border-radius: 100px; background: var(--white); color: var(--text-secondary); }
.page-kind-directory :is(.filter-tag,.category-btn).active { background: var(--gradient-brand); color: var(--ink); }
.page-nata-videos .container-xxl { max-width: var(--max); padding: 48px 24px; }
.page-nata-videos :is(.card,.modal-content) { background: var(--white); color: var(--text); border-radius: var(--radius-lg); }
.page-nata-videos .text-body-secondary { color: var(--text-secondary) !important; }
/* Older scripts may assign navigation colors inline; the common header stays authoritative. */
.website-brand #siteNavbar { background: var(--nav-bg) !important; box-shadow: var(--shadow-sm) !important; }
.website-brand #siteNavbar.scrolled { background: var(--nav-bg-scrolled) !important; }
@media (max-width: 768px) {
  .legacy-page .container { width: calc(100% - 32px); }
  .legacy-page :is(.panel-grid,.feature-grid,.pricing-grid,.steps-grid,.form-row,.hero-buttons) { grid-template-columns: 1fr; flex-wrap: wrap; }
  .legacy-page :is(.panel,.referral-form,.form-container,.content-card) { padding: 24px; }
  .website-brand .screenshot-placeholder { min-height: 180px; padding: 20px; }
  .website-brand :is(.page-hero__title,.hero-title,.post-title,.article-title) { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .website-brand *, .website-brand *::before, .website-brand *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .website-brand .brand-reveal.is-pending { opacity: 1; translate: none; }
}
.contact-paths { display: grid; gap: 16px; }
.contact-email { display: inline-flex; align-items: center; gap: 12px; padding: 16px 0; font-weight: 600; }
.mission-path { list-style: none; margin: 0; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--gradient-bg), var(--white); }
.mission-path li { display: flex; gap: 20px; padding: 24px 0; position: relative; }
.mission-path li + li { border-top: 1px solid var(--border); }
.mission-path li > span { flex: 0 0 44px; height: 44px; display: grid; place-items: center; background: var(--gradient-brand); border-radius: 14px; font-weight: 700; color: var(--ink); }
.mission-path h3 { margin: 0 0 8px; font-size: 20px; }
.mission-path p { margin: 0; color: var(--text-secondary); }
/* Light and dark text tokens also override legacy theme values on the body itself. */
html:not([data-theme=dark]) body.website-brand { --text-secondary: #4b5563; --text-muted: #6b7280; }
html[data-theme=dark] body.website-brand { --text-secondary: #c5cbd6; --text-muted: #8b93a1; }
.website-brand :is(.reveal,.animate-on-scroll):not(.is-pending) { opacity: 1; }
.legacy-page .animate-on-scroll { transform: none; }
.feature-card__visual .screenshot-placeholder { min-height: 0; height: 100%; aspect-ratio: auto; padding: 16px; border: 0; border-radius: 0; }
.feature-card__visual .screenshot-placeholder i { width: 40px; height: 40px; font-size: 18px; }
.brand-workflow { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 32px 0 0; padding: 0; }
.brand-workflow li { display: flex; flex-direction: column; gap: 12px; position: relative; padding: 28px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.brand-workflow li:not(:last-child)::after { content: '→'; position: absolute; right: -21px; top: 40px; color: var(--teal); }
.brand-workflow i { width: 48px; height: 48px; display: grid; place-items: center; background: var(--gradient-brand); color: var(--ink); border-radius: 14px; font-size: 20px; }
.brand-workflow strong { font-size: 18px; letter-spacing: -.02em; }
.brand-workflow span { color: var(--text-secondary); }
@media (max-width: 768px) { .brand-workflow { grid-template-columns: 1fr; } .brand-workflow li:not(:last-child)::after { content: '↓'; right: 50%; top: auto; bottom: -25px; } }
/* Destination integration: Benevolate's newer homepage tokens and sticky shell win. */
body.website-brand.bv-page {
  --font: var(--bv-font);
  --font-display: var(--bv-display);
  --bg: var(--bv-cream);
  --bg-subtle: var(--bv-cream-deep);
  --text: var(--bv-ink);
  --text-secondary: var(--bv-muted);
  --text-muted: var(--bv-faint);
  --border: var(--bv-line);
  --radius: var(--bv-radius);
  --radius-lg: var(--bv-radius-lg);
  --max: var(--bv-wrap-wide);
  padding-top: 0 !important;
}
body.website-brand.bv-page :is(.bv-kicker, .bv-tile__kind) { font-family: var(--bv-font); }