/*
 * Consistency layer for every public page below /ai.
 * The stylesheet is conditionally registered by the main layout.
 */
:where(.ai-page, .ai-editorial-page, .fish-page),
:where(.ai-page, .ai-editorial-page, .fish-page) :where(*) {
  font-family: Roboto, Arial, sans-serif !important;
}

:where(.ai-page, .ai-editorial-page, .fish-page) {
  --ai-guideline-blue: #3b4173;
  --ai-guideline-red: #c1492e;
  --ai-guideline-red-dark: #a83c28;
  --ai-guideline-canvas: #f6f7fb;
  --ai-guideline-white: #fff;
  --ai-guideline-line: rgba(59, 65, 115, 0.12);
  overflow: clip;
  background: var(--ai-guideline-canvas) !important;
  color: var(--ai-guideline-blue) !important;
}

/* One site-wide content width: text never sits against the viewport edge. */
:where(
  .ai-page.ai-page .ai-page__container,
  .ai-editorial-page.ai-editorial-page .kg-wrap,
  .ai-editorial-page.ai-editorial-page .music-container,
  .ai-editorial-page.ai-editorial-page .song-container,
  .ai-editorial-page.ai-editorial-page .suno-container,
  .fish-page.fish-page .fish-shell,
  .ai-editorial-page.ai-editorial-page .ae-inline-cta__inner
) {
  width: min(1268px, calc(100% - 48px)) !important;
  max-width: 1268px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* A single quiet canvas replaces repeated full-width colour bands. */
.ai-page.ai-page :is(.ai-hero, .ai-section, .ai-section--soft, .ai-section--compact),
.ai-editorial-page.ai-editorial-page :is(
  .kg-hero,
  .music-hero,
  .song-hero,
  .suno-hero,
  .kg-nav,
  .music-toc,
  .song-toc,
  .suno-toc,
  .music-quick,
  .song-quick,
  .suno-quick,
  .kg-section,
  .music-section,
  .song-section,
  .suno-section,
  .ae-inline-cta
),
.fish-page.fish-page :is(.fish-hero, .fish-section, .fish-section--paper, .fish-section--lilac) {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.ai-editorial-page.ai-editorial-page :is(.kg-nav, .music-toc, .song-toc, .suno-toc) {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

.ai-editorial-page.ai-editorial-page :is(.kg-section, .music-section, .song-section, .suno-section) {
  border-top-width: 0 !important;
}

/* Content cards remain the only recurring surface on the calm page canvas. */
.ai-page.ai-page :is(
  .ai-compact-card,
  .ai-service-card,
  .ai-example-card,
  .ai-review,
  .ai-benefit-card,
  .ai-tool,
  .ai-experience-card,
  .ai-faq__item
),
.ai-editorial-page.ai-editorial-page :is(
  .kg-card,
  .kg-step,
  .kg-media,
  .kg-media-card,
  .kg-audio,
  .kg-sample,
  .music-card,
  .music-step,
  .music-example,
  .music-warning,
  .song-card,
  .song-step,
  .song-audio,
  .suno-card,
  .suno-step,
  .suno-visual-card,
  .suno-warning,
  .kg-callout,
  .music-callout,
  .song-callout,
  .suno-callout
),
.fish-page.fish-page :is(
  .fish-card,
  .fish-usecase,
  .fish-box,
  .fish-pc,
  .fish-related a,
  .fish-faq details
) {
  background: var(--ai-guideline-white) !important;
}

/* Every real control uses the requested 15 px corner radius. */
:where(.ai-page, .ai-editorial-page, .fish-page) :is(
  button,
  a.ai-action,
  a.ai-calculator__purchase-button,
  a.kg-btn,
  a.music-button,
  a.song-button,
  a.suno-button,
  a.fish-btn,
  a.ae-inline-cta__button,
  a.tts-action
) {
  border-radius: 15px !important;
}

/* Orange/red actions never inherit the blue page colour. */
:where(.ai-page, .ai-editorial-page, .fish-page) :is(
  a.ai-action,
  a.ai-calculator__purchase-button,
  a.kg-btn:not(.kg-btn--ghost),
  a.music-button:not(.music-button--ghost),
  a.song-button:not(.song-button--ghost),
  a.suno-button:not(.suno-button--ghost),
  a.fish-btn:not(.fish-btn--ghost),
  a.ae-inline-cta__button,
  button.kg-play,
  button.music-play,
  button.song-play,
  button.suno-play
),
:where(.ai-page, .ai-editorial-page, .fish-page) :is(
  a.ai-action,
  a.ai-calculator__purchase-button,
  a.kg-btn:not(.kg-btn--ghost),
  a.music-button:not(.music-button--ghost),
  a.song-button:not(.song-button--ghost),
  a.suno-button:not(.suno-button--ghost),
  a.fish-btn:not(.fish-btn--ghost),
  a.ae-inline-cta__button,
  button.kg-play,
  button.music-play,
  button.song-play,
  button.suno-play
) :where(*) {
  color: var(--ai-guideline-white) !important;
}

.fish-page.fish-page .fish-step::before,
.fish-page.fish-page .fish-score__mark,
.fish-page.fish-page .fish-coming::before {
  color: var(--ai-guideline-white) !important;
}

.ai-editorial-page.ai-editorial-page .kg-plaque i {
  color: var(--ai-guideline-white) !important;
}

@media (max-width: 720px) {
  :where(
    .ai-page.ai-page .ai-page__container,
    .ai-editorial-page.ai-editorial-page .kg-wrap,
    .ai-editorial-page.ai-editorial-page .music-container,
    .ai-editorial-page.ai-editorial-page .song-container,
    .ai-editorial-page.ai-editorial-page .suno-container,
    .fish-page.fish-page .fish-shell,
    .ai-editorial-page.ai-editorial-page .ae-inline-cta__inner
  ) {
    width: min(1268px, calc(100% - 30px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ai-page, .ai-editorial-page, .fish-page) :where(*) {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}