/*
 * Shared public page system.
 * Flat x.ai-inspired surfaces for marketing, docs-adjacent, CLI, MCP, and rewards pages.
 */

:is(
  .features-page,
  .pricing-page,
  .how-page,
  .about-page,
  .faq-page,
  .blog-page,
  .cli-page,
  .rewards-page,
  .docs-page,
  .telegram-page,
  .mcp-page,
  .api-page,
  .download-page
) {
  min-height: 100vh;
  background: var(--bg, #0a0a0a) !important;
  color: var(--fg, var(--intel-text-primary));
  overflow-x: hidden;
}

:is(
  .features-page,
  .pricing-page,
  .how-page,
  .about-page,
  .faq-page,
  .blog-page,
  .cli-page,
  .rewards-page,
  .docs-page,
  .telegram-page,
  .mcp-page,
  .api-page,
  .download-page
) {
  padding-top: 76px;
}

:is(
  .features-hero,
  .pricing-hero,
  .how-hero,
  .about-hero,
  .faq-hero,
  .blog-hero,
  .cli-header,
  .rewards-hero,
  .telegram-hero,
  .api-header,
  .download-header
) {
  min-height: auto !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 54px 24px 52px !important;
  background: transparent !important;
  text-align: center !important;
}

:is(
  .features-hero__grid,
  .pricing-hero__grid,
  .how-hero__grid,
  .about-hero__grid,
  .faq-hero__grid,
  .telegram-hero__grid,
  .hero-background,
  .auth-preview-pattern
) {
  display: none !important;
}

:is(
  .features-hero__content,
  .pricing-hero__content,
  .how-hero__content,
  .about-hero__content,
  .faq-hero__content,
  .telegram-hero__content,
  .cli-header,
  .api-header,
  .download-header
) {
  max-width: 820px !important;
  margin: 0 auto !important;
}

:is(
  .features-hero__title,
  .pricing-hero__title,
  .how-hero__title,
  .about-hero__title,
  .faq-hero__title,
  .blog-hero__title,
  .cli-header h1,
  .rewards-title,
  .telegram-hero__title,
  .api-header h1,
  .download-header h1,
  .hero-title,
  .docs-title
) {
  margin: 0 0 16px !important;
  color: var(--fg, var(--intel-text-primary)) !important;
  font-size: clamp(2.2rem, 5.2vw, 4.35rem) !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

:is(
  .features-hero__title-accent,
  .pricing-hero__title-accent,
  .how-hero__title-accent,
  .about-hero__title-accent,
  .faq-hero__title-accent,
  .telegram-hero__title-accent
) {
  display: inline !important;
  color: var(--fg-secondary, var(--intel-text-secondary)) !important;
}

:is(
  .features-hero__subtitle,
  .pricing-hero__subtitle,
  .how-hero__subtitle,
  .about-hero__subtitle,
  .faq-hero__subtitle,
  .blog-hero__subtitle,
  .cli-header p,
  .rewards-subtitle,
  .telegram-hero__subtitle,
  .api-header p,
  .download-header p,
  .hero-description
) {
  max-width: 780px !important;
  margin: 0 auto 30px !important;
  color: var(--fg-secondary, var(--intel-text-secondary)) !important;
  font-size: clamp(1rem, 1.7vw, 1.18rem) !important;
  line-height: 1.65 !important;
}

:is(
  .features-main,
  .features-additional,
  .pricing-tiers,
  .pricing-comparison,
  .pricing-faq,
  .how-steps,
  .how-video,
  .how-usecases,
  .about-section,
  .faq-content,
  .blog-promo,
  .blog-filters,
  .cli-install,
  .cli-features,
  .cli-usage,
  .cli-config,
  .cli-cta,
  .cli-link-section,
  .campaigns-section,
  .rewards-table-section,
  .how-it-works,
  .telegram-section,
  .api-content,
  .download-container
) {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 24px 28px !important;
  background: transparent !important;
}

:is(
  .features-main__container,
  .features-additional__container,
  .pricing-tiers__container,
  .pricing-comparison__container,
  .pricing-faq__container,
  .how-steps__container,
  .how-video__container,
  .how-usecases__container,
  .about-section__container,
  .faq-content__container,
  .cli-container,
  .telegram-section__container,
  .api-container
) {
  max-width: 1180px !important;
}

:is(
  .features-main__container,
  .features-additional__grid,
  .pricing-tiers__container,
  .pricing-faq__grid,
  .how-usecases__grid,
  .about-values__grid,
  .about-team__grid,
  .faq-category__list,
  .blog-grid,
  .cli-features-grid,
  .campaigns-grid,
  .telegram-commands__grid,
  .telegram-features__grid,
  .telegram-plans__grid,
  .api-features-grid,
  .api-sdks-grid,
  .api-pricing-grid,
  .download-info-grid,
  .download-features-grid,
  .download-package-grid
) {
  gap: 12px !important;
}

:is(
  .features-card,
  .features-mini,
  .pricing-tier,
  .pricing-comparison__table,
  .pricing-faq__item,
  .how-step__content,
  .how-video__player-wrapper,
  .how-usecase,
  .about-mission__card,
  .about-value,
  .about-team__card,
  .faq-item,
  .blog-card,
  .blog-promo,
  .cli-install,
  .cli-features,
  .cli-usage,
  .cli-config,
  .cli-cta,
  .cli-link-section,
  .campaign-card,
  .step-card,
  .leaderboard-card,
  .leaderboard-display,
  .rewards-table-wrapper,
  .stats-card,
  .telegram-step__content,
  .telegram-command,
  .telegram-feature,
  .telegram-plan,
  .telegram-code,
  .api-section,
  .api-feature,
  .api-key-type,
  .api-endpoint,
  .api-sdk,
  .api-openapi,
  .api-pricing-tier,
  .api-rate-limits,
  .download-release-strip,
  .download-sidebar,
  .download-doc-section,
  .download-info-card,
  .download-feature,
  .download-package-card,
  .docs-body,
  .docs-toc,
  .mcp-stat,
  .mcp-key-reveal,
  .mcp-key-item,
  .mcp-table-wrap,
  .mcp-code-wrap
) {
  background: var(--card, #1c1c1e) !important;
  border: 1px solid var(--card-border, var(--intel-border-subtle)) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

:is(
  .features-card:hover,
  .features-mini:hover,
  .pricing-tier:hover,
  .how-step__content:hover,
  .how-usecase:hover,
  .about-value:hover,
  .about-team__card:hover,
  .faq-item:hover,
  .blog-card:hover,
  .campaign-card:hover,
  .step-card:hover,
  .leaderboard-card:hover,
  .telegram-command:hover,
  .telegram-feature:hover,
  .api-feature:hover,
  .download-package-card:hover
) {
  border-color: color-mix(in srgb, var(--accent, #00e67a) 46%, var(--card-border, #38383a)) !important;
  transform: translateY(-1px);
}

:is(
  .features-card__icon,
  .features-mini__icon,
  .how-step__icon,
  .how-usecase__icon,
  .about-mission__icon,
  .about-value__icon,
  .intel-feature__icon,
  .cli-feature .feature-icon,
  .docs-feature .feature-icon,
  .rate-limit-icon,
  .doc-link-icon,
  .auth-icon-wrapper,
  .auth-icon-wrap,
  .blog-promo__icon,
  .campaign-icon,
  .step-icon-wrapper,
  .telegram-hero__icon,
  .telegram-feature__icon,
  .telegram-connected__icon,
  .auth-split-logo,
  .api-logo,
  .download-feature-icon
) {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-secondary, #1c1c1e) !important;
  border: 1px solid var(--card-border, #38383a) !important;
  border-radius: 8px !important;
  color: var(--fg-secondary, #98989d) !important;
  flex-shrink: 0;
}

:is(
  .api-logo svg,
  .cli-logo svg,
  .download-checklist svg,
  .tier-features svg,
  .auth-trust-item svg,
  .pricing-check-icon,
  .docs-body .setup-card__icon,
  .blog-search-icon
) {
  color: var(--fg-secondary, #98989d) !important;
}

:is(
  .features-additional__title,
  .pricing-comparison__title,
  .pricing-faq__title,
  .how-video__title,
  .how-usecases__title,
  .about-section__title,
  .faq-category__title,
  .cli-install h2,
  .cli-features h2,
  .cli-usage h2,
  .cli-config h2,
  .cli-cta h2,
  .rewards-section-title,
  .campaigns-section h2,
  .telegram-section h2,
  .telegram-features__header h2,
  .telegram-plans__header h2,
  .api-section h2,
  .download-doc-section h2,
  .section-title
) {
  margin: 0 0 16px !important;
  color: var(--fg, var(--intel-text-primary)) !important;
  font-size: clamp(1.55rem, 2.4vw, 2.2rem) !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

:is(
  .features-card__description,
  .features-mini__desc,
  .pricing-tier__description,
  .pricing-faq__answer,
  .how-step__description,
  .how-usecase__desc,
  .about-section__text,
  .about-value__desc,
  .about-team__bio,
  .faq-item__answer,
  .blog-card__excerpt,
  .cli-feature p,
  .cli-install > p,
  .cli-config > p,
  .cli-cta p,
  .campaign-card > p,
  .rewards-intro,
  .step-card p,
  .telegram-step__content p,
  .telegram-command p,
  .telegram-feature p,
  .api-section p,
  .api-feature p,
  .download-doc-section p,
  .download-feature p
) {
  color: var(--fg-secondary, var(--intel-text-secondary)) !important;
  line-height: 1.65 !important;
}

:is(
  .features-cta,
  .pricing-cta,
  .how-cta,
  .about-cta,
  .faq-cta
) {
  max-width: 1180px;
  margin: 0 auto 70px;
  padding: 26px 24px !important;
  background: transparent !important;
  text-align: center;
}

:is(
  .features-cta__content,
  .pricing-cta__content,
  .how-cta__content,
  .about-cta__content,
  .faq-cta__content
) {
  max-width: none !important;
  padding: 34px;
  background: var(--card, #1c1c1e);
  border: 1px solid var(--card-border, #38383a);
  border-radius: 8px;
}

:is(
  .features-cta__button,
  .pricing-cta__button,
  .how-cta__button,
  .about-cta__button,
  .faq-cta__button,
  .pricing-tier__cta--primary,
  .campaign-join,
  .btn-primary,
  .claim-btn,
  .cli-generate-btn,
  .cli-telegram-btn,
  .telegram-btn--primary,
  .api-btn.primary,
  .download-primary-btn
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  border: 1px solid var(--fg, #f5f5f7) !important;
  border-radius: 999px !important;
  background: var(--fg, #f5f5f7) !important;
  color: var(--bg, #0a0a0a) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

:is(
  .btn-secondary,
  .pricing-tier__cta,
  .telegram-btn--secondary,
  .api-btn.secondary,
  .download-secondary-btn,
  .cli-copy-btn,
  .api-copy-btn
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid var(--card-border, #38383a) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--fg, #f5f5f7) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

:is(
  .blog-search,
  .blog-category-btn,
  .cli-code-block,
  .api-code-block,
  .mcp-code-block,
  .download-code-block,
  .docs-section-btn,
  .docs-sidebar__link,
  .mcp-tab,
  .tab-button,
  .api-nav-tab,
  .api-chain-badge,
  .download-sidebar-link
) {
  background: var(--bg-secondary, #101011) !important;
  border-color: var(--card-border, #38383a) !important;
  border-radius: 8px !important;
  color: var(--fg-secondary, #98989d) !important;
}

:is(
  .blog-category-btn.active,
  .docs-toc__link--active,
  .docs-section-btn--active,
  .docs-sidebar__link--active,
  .mcp-tab--active,
  .tab-button.active,
  .api-nav-tab.active,
  .download-sidebar-link.active
) {
  background: var(--fg, #f5f5f7) !important;
  border-color: var(--fg, #f5f5f7) !important;
  color: var(--bg, #0a0a0a) !important;
}

.blog-page {
  max-width: 1240px !important;
  padding: 120px 24px 80px !important;
}

.blog-hero {
  padding-top: 0 !important;
}

.blog-filters,
.blog-promo {
  padding: 18px 20px !important;
}

.cli-page .cli-container,
.api-container {
  max-width: 1180px !important;
}

.cli-logo,
.api-logo {
  justify-content: center;
}

.cli-install,
.cli-features,
.cli-usage,
.cli-config,
.cli-cta,
.cli-link-section,
.api-section {
  padding: 28px !important;
}

.cli-code-block,
.api-code-block,
.mcp-code-block,
.download-code-block {
  padding: 15px 16px !important;
  color: var(--fg, #f5f5f7) !important;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace) !important;
  overflow-x: auto;
}

.mcp-tabs,
.campaigns-tabs,
.api-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 auto 24px;
}

.rewards-stats,
.hero-stats,
.mcp-usage-stats,
.about-hero__stats {
  max-width: 980px;
  margin: 24px auto 0;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px !important;
}

.stat-card,
.mcp-stat,
.about-stat {
  padding: 18px;
}

.how-it-works,
.steps-grid {
  max-width: 1180px !important;
}

.docs-page {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr);
  max-width: 1360px !important;
  gap: 40px !important;
  padding: 42px 24px 80px !important;
}

.docs-content {
  max-width: none !important;
}

.docs-body {
  padding: 34px !important;
}

.docs-sidebar {
  background: transparent !important;
}

.download-layout {
  gap: 24px !important;
}

@media (max-width: 1024px) {
  :is(
    .features-main__container,
    .features-additional__grid,
    .pricing-tiers__container,
    .pricing-faq__grid,
    .how-usecases__grid,
    .about-values__grid,
    .about-team__grid,
    .blog-grid,
    .campaigns-grid,
    .api-features-grid,
    .api-pricing-grid,
    .download-package-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .about-mission,
  .download-layout,
  .docs-page {
    grid-template-columns: 1fr !important;
  }

  .docs-page {
    display: block !important;
  }
}

@media (max-width: 768px) {
  :is(
    .features-page,
    .pricing-page,
    .how-page,
    .about-page,
    .faq-page,
    .blog-page,
    .cli-page,
    .rewards-page,
    .telegram-page,
    .mcp-page,
    .api-page,
    .download-page
  ) {
    padding-top: 68px;
  }

  :is(
    .features-hero,
    .pricing-hero,
    .how-hero,
    .about-hero,
    .faq-hero,
    .blog-hero,
    .cli-header,
    .rewards-hero,
    .telegram-hero,
    .api-header,
    .download-header
  ) {
    padding: 36px 16px 38px !important;
  }

  :is(
    .features-main__container,
    .features-additional__grid,
    .pricing-tiers__container,
    .pricing-faq__grid,
    .how-usecases__grid,
    .about-values__grid,
    .about-team__grid,
    .faq-category__list,
    .blog-grid,
    .cli-features-grid,
    .campaigns-grid,
    .telegram-commands__grid,
    .telegram-features__grid,
    .telegram-plans__grid,
    .api-features-grid,
    .api-sdks-grid,
    .api-pricing-grid,
    .download-info-grid,
    .download-features-grid,
    .download-package-grid,
    .pricing-comparison__row
  ) {
    grid-template-columns: 1fr !important;
  }

  :is(
    .features-main,
    .features-additional,
    .pricing-tiers,
    .pricing-comparison,
    .pricing-faq,
    .how-steps,
    .how-video,
    .how-usecases,
    .about-section,
    .faq-content,
    .cli-install,
    .cli-features,
    .cli-usage,
    .cli-config,
    .cli-cta,
    .cli-link-section,
    .campaigns-section,
    .rewards-table-section,
    .telegram-section,
    .api-content,
    .download-container
  ) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .blog-page,
  .docs-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .blog-filters,
  .blog-search-wrapper {
    width: 100%;
  }

  .cli-code-block,
  .api-code-block {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .how-step {
    padding-left: 0 !important;
  }

  .how-step__number,
  .how-step__connector {
    display: none !important;
  }

  .docs-body {
    padding: 22px !important;
  }

  :is(
    .features-cta__content,
    .pricing-cta__content,
    .how-cta__content,
    .about-cta__content,
    .faq-cta__content,
    .cli-install,
    .cli-features,
    .cli-usage,
    .cli-config,
    .cli-cta,
    .cli-link-section,
    .api-section
  ) {
    padding: 22px !important;
  }
}

@media (max-width: 520px) {
  :is(
    .features-cta__button,
    .pricing-cta__button,
    .how-cta__button,
    .about-cta__button,
    .faq-cta__button,
    .pricing-tier__cta,
    .campaign-join,
    .claim-btn,
    .cli-generate-btn,
    .cli-telegram-btn,
    .telegram-btn,
    .api-btn,
    .download-primary-btn,
    .download-secondary-btn
  ) {
    width: 100%;
  }

  .docs-body {
    padding: 18px !important;
  }
}