/* Titles and subtitles on SEO and tools pages match VidAU AI Image / AI Video.
   Those two pages keep their own styles. */

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  .seo-modals-hero:not(.seo-modals-hero--ai-image)
  .seo-modals-hero-inner
  h1 {
  margin-bottom: 10px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.96px;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  .seo-modals-hero:not(.seo-modals-hero--ai-image)
  .seo-modals-hero-title-line:not(.seo-modals-hero-title-line--gradient) {
  background: none;
  background-image: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Blue fills and blue control marks on SEO and tools pages use the signup purple. */
.seo-tools-type :is([class*="bg-blue-solid-600"], [class*="bg-blue-600"]) {
  background-color: #5f34ff !important;
}

.seo-tools-type [class*="text-blue-solid-600"] {
  color: #8b6cff !important;
}

/* Last hero line keeps the purple gradient the type rules had flattened. */
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  .seo-modals-hero:not(.seo-modals-hero--ai-image):not(.seo-modals-hero--ttv):not(
    .seo-modals-hero--photo-editor
  ):not(.seo-modals-hero--art-gen)
  .seo-modals-hero-title-line--gradient {
  background-image: linear-gradient(90deg, #8b6cff, #a66cff, #e984da);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  .seo-modals-hero:not(.seo-modals-hero--ai-image):not(.seo-modals-hero--rtv)
  .seo-modals-hero-inner
  > .seo-modals-sub {
  color: #fff;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  .seo-modals-hero--rtv
  .seo-modals-hero-inner
  > .seo-modals-sub {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) h1 {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.96px;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) :is(h2, h3) {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  letter-spacing: -0.96px;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) h1 + div.font-normal,
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) h1 + p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) h2 + div.font-normal,
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) h2 + p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.seo-tools-type .ai-video-editor-hero h1 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

@media (min-width: 640px) {
  .seo-tools-type .ai-video-editor-hero h1 {
    font-size: 48px;
    line-height: 1.1;
  }
}

.seo-tools-type .ai-video-editor-hero h1,
.seo-tools-type .ai-video-editor-hero h1 + p {
  width: 100%;
  max-width: 820px;
}

.seo-tools-type .ai-video-editor-hero h1 + p {
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
}

.ai-video-editor-page .iu-home-end .hv3-t-heading,
.ai-video-editor-page .iu-home-end .hv3-faq h2,
.ai-video-editor-page .iu-home-end .hv3-cta-panel h2,
.ai-video-editor-page .iu-home-end .hv3-cta-panel p,
.ai-video-editor-page .iu-home-end .hv3-testimonials .sub {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Even line lengths on the video editor page, without stretching word spacing. */
.ai-video-editor-page {
  text-wrap: balance;
}

/* Same even wrapping and 820px title/subtitle measure on the other SEO and tools pages.
   AI Image and AI Video keep their own layout. Headings that already set a tighter
   max-width keep it. Centered sections keep center alignment inside the 820px box. */
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  :is(h1, h2):not([class*="max-w-"]):not([class*="keep-all"]):not([class*="whitespace-nowrap"]) {
  max-width: 820px;
  text-wrap: balance;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  :is(.text-center, .items-center)
  > :is(h1, h2):not([class*="keep-all"]):not([class*="whitespace-nowrap"]),
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  :is(h1, h2)[class*="text-center"]:not([class*="keep-all"]):not([class*="whitespace-nowrap"]) {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  :is(h1, h2)
  + :is(p, div.font-normal) {
  width: 100%;
  max-width: 820px;
  white-space: normal !important;
  text-wrap: balance;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  :is(.text-center, .items-center)
  > :is(h1, h2)
  + :is(p, div.font-normal) {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  white-space: normal !important;
  text-wrap: balance;
}

/* Section copy with saved line breaks reflows to the real width on every screen. */
.seo-tools-type
  :is(p, div.font-normal)[class*="whitespace-pre-line"]:not(
    .seo-modals-hero *,
    .ai-video-editor-hero *,
    [class*="uppercase"]
  ) {
  max-width: min(820px, 100%);
  white-space: normal !important;
  text-wrap: balance;
}

.seo-tools-type .ai-video-editor-hero h1 + p,
.seo-tools-type .seo-modals-hero-inner > :is(.seo-modals-sub, .seo-modals-hero-kicker) {
  white-space: pre-line !important;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  .seo-modals-hero:not(.seo-modals-hero--ai-image)
  .seo-modals-hero-inner
  > :is(h1, .seo-modals-hero-kicker, .seo-modals-sub) {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) :is(
  p.max-w-\[1280px\],
  .max-w-\[1100px\].text-center:not([class*="max-w-none"]),
  .max-w-\[1100px\].items-center:not([class*="max-w-none"]),
  .max-w-\[980px\].text-center,
  .max-w-\[980px\].items-center,
  .max-w-\[960px\].text-center,
  .max-w-\[960px\].items-center,
  .max-w-\[920px\].text-center,
  .max-w-\[920px\].items-center,
  .max-w-\[900px\].text-center,
  .max-w-\[900px\].items-center,
  .max-w-\[860px\]
) {
  max-width: 820px;
}

/* Section headings that are exactly 48px become 36px. Hero titles and any
   heading larger or smaller than 48px stay as they are. */
@media (min-width: 640px) {
  .seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
    :is(h1, h2, h3, h4, h5, h6).sm\:text-\[48px\]:not(
      [class*="lg:text-"],
      [class*="xl:text-"],
      [class*="2xl:text-"],
      .seo-modals-hero *,
      .ai-video-editor-hero *
    ) {
    font-size: 36px;
    line-height: 44px;
  }
}

@media (min-width: 901px) {
  .seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
    .iu-home-end
    :is(.hv3-faq h2, .hv3-cta-panel h2, .hv3-testimonials h2) {
    font-size: 36px;
    line-height: 44px;
  }
}

/* Image to video hero: keep "Video" on the first line and pull the two lines closer. */
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
  .image-to-video-page
  .seo-modals-hero
  .seo-modals-hero-inner
  h1 {
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.seo-tools-type .image-to-video-page .seo-modals-hero-title-line {
  letter-spacing: -0.045em;
  white-space: nowrap;
  text-wrap: nowrap;
}

@media (max-width: 400px) {
  .seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page))
    .image-to-video-page
    .seo-modals-hero
    .seo-modals-hero-inner
    h1 {
    font-size: 24px;
  }
}

.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) .iu-home-end .hv3-t-heading,
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) .iu-home-end .hv3-testimonials h2,
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) .iu-home-end .hv3-faq h2,
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) .iu-home-end .hv3-cta-panel,
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) .iu-home-end .hv3-cta-panel h2,
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) .iu-home-end .hv3-cta-panel p,
.seo-tools-type:not(:has(.vidau-ai-image-page, .vidau-ai-video-page)) .iu-home-end .hv3-testimonials .sub {
  width: 100%;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  text-wrap: balance;
}