/* Only the five public homepages load this stylesheet. Keep the real image ratios. */
#captures-streamerpro .showcase-grid { align-items: start; }
@media (min-width: 1101px) {
  #captures-streamerpro .showcase-grid {
    grid-template-columns: minmax(240px, 1fr) minmax(0, 2.8fr);
  }
}

/* Loaded only by public static pages; excluded from the licence portal and forum.
   Preserve the payment section, all content, forms and the existing compact exceptions. */
body > main > .section:not(#paiement):not(.section--payment) {
  padding-top: 56px;
  padding-bottom: 56px;
}
body > main > :is(#affichage-dynamique-windows, #demo-video, #youtube-live-zowiebox, #guides-streamerpro, #support) {
  padding-top: 40px;
  padding-bottom: 40px;
}
body > main > #cout-local-vs-cloud { padding-top: 40px; padding-bottom: 36px; }
body > main > #sourceforge { padding-top: 40px; padding-bottom: 40px; }
body > main > #questions-streamerpro { padding-top: 32px; padding-bottom: 32px; }
.seo-hero > .seo-hero__inner { padding-top: 48px; padding-bottom: 40px; }
.seo-hero .seo-breadcrumb { margin-bottom: 16px; }
@media (max-width: 760px) {
  body > main > .section:not(#paiement):not(.section--payment) {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  body > main > :is(#affichage-dynamique-windows, #cout-local-vs-cloud, #demo-video, #youtube-live-zowiebox, #guides-streamerpro, #support, #sourceforge, #questions-streamerpro) {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .seo-hero > .seo-hero__inner { padding-top: 32px; padding-bottom: 28px; }
}

/* Public homepages only: retain the exact HTML, links, media and forms. */
@media (min-width: 1001px) {
  .youtube-live-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "copy frame" "copy actions";
    grid-template-rows: min-content 1fr;
    align-items: start;
    gap: 24px 32px;
  }
  .youtube-live-layout > .section-copy { grid-area: copy; }
  .youtube-live-layout > .youtube-live-frame { grid-area: frame; }
  .youtube-live-layout > .youtube-live-actions {
    grid-area: actions; width: 100%; max-width: 100%; margin: 0;
  }
  .youtube-live-actions .cta-row-primary,
  .youtube-live-actions .cta-row-secondary { gap: 10px; }
  .recording-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "eyebrow shot" "title shot" "intro shot" "points specs";
    align-items: start;
    gap: 12px 32px;
  }
  .recording-layout > .section-copy { display: contents; }
  .recording-layout > .section-copy > .eyebrow { grid-area: eyebrow; margin: 0; }
  .recording-layout > .section-copy > h2 { grid-area: title; margin: 0; }
  .recording-layout > .section-copy > p:not(.eyebrow) { grid-area: intro; margin: 0; }
  .recording-layout .recording-points { grid-area: points; margin-top: 12px; }
  .recording-layout .recording-specs { grid-area: specs; margin-top: 12px; }
  .recording-layout > .recording-shot { grid-area: shot; align-self: center; }
  .support {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy faq" "contact contact";
    gap: 24px 32px;
    align-items: start;
  }
  .support > .section-copy { grid-area: copy; }
  .support > .support-stack { display: contents; }
  .support > .support-stack > .faq-list { grid-area: faq; }
  .support > .support-stack > .contact-card { grid-area: contact; }
}
.highlight-grid, .seo-intent-grid { align-items: start; }

/* Five homepages: keep the three existing comparison links together. */
@media (min-width: 761px) {
  #cout-local-vs-cloud .local-costs__actions {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .85fr);
    align-items: stretch;
    justify-items: stretch;
    gap: 12px;
  }
  #cout-local-vs-cloud .local-costs__actions > .button {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    height: 100%;
    margin: 0;
    white-space: normal;
  }
}

/* Five homepages only. Keep the presentation above the download choice. */
.hero > .hero__content > .download-security--choice {
  width: 100%;
  max-width: 100%;
}
.hero > .hero__content > :is(.hero__reassurance, .hero__stats-note) { max-width: 100%; }
@media (min-width: 1001px) {
  .hero > .hero__content {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 0 28px;
  }
  .hero > .hero__content > * { grid-column: 1 / -1; min-width: 0; }
  .hero > .hero__content > .hero-interface {
    grid-column: 1;
    grid-row: auto / span 2;
    width: 100%;
    max-width: 100%;
    margin: 0;
    align-self: start;
  }
  .hero > .hero__content > .hero__stats {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-self: start;
  }
  .hero > .hero__content > .hero__stats > div { min-width: 0; padding: 12px 16px; }
  .hero > .hero__content > .hero__stats-note { grid-column: 2; align-self: start; margin-top: 14px; }
}

/* Five homepages. Reserve a full-width row for all five live indicators. */
@media (min-width: 1001px) {
  .youtube-live-layout { position: relative; padding-bottom: 64px; }
  .youtube-live-layout .live-badges {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
  }
  .youtube-live-layout .live-badges > span { white-space: nowrap; }
}

/* Only the outer gap requested between payment and use cases.
   No checkout, pricing, licence, email field or status-message rule is changed. */
body > main > #paiement { padding-bottom: 32px; }
body > main > .section.section--testers#testeurs { padding-top: 32px; }
body > main > .section.section--youtube-live#youtube-live-zowiebox { padding-bottom: 20px; }
body > main > .section.section--positioning#usages { padding-top: 24px; }
@media (max-width: 760px) {
  body > main > #paiement { padding-bottom: 24px; }
  body > main > .section.section--testers#testeurs { padding-top: 24px; }
  body > main > .section.section--youtube-live#youtube-live-zowiebox { padding-bottom: 16px; }
  body > main > .section.section--positioning#usages { padding-top: 24px; }
}

/* Public static pages only. Keep the original desktop navigation intact. */
.sp-mobile-menu { display: none; }
@media (max-width: 700px) {
  header.sp-public-header { gap: 4px 12px; padding: 8px 12px; }
  header.sp-public-header--home { padding-block: 6px; }
  header.sp-public-header > .sp-public-links { display: none; }
  header.sp-public-header > .sp-public-identity { flex: 0 1 auto; min-width: 0; }
  header.sp-public-header--home > .sp-public-identity { gap: 2px; }
  .sp-public-header--home .sp-public-creator { height: 22px; padding-block: 1px; }
  .sp-mobile-menu { display: block; order: 2; margin-left: auto; }
  .sp-mobile-menu > summary {
    display: flex; align-items: center; justify-content: center;
    min-width: 80px; min-height: 44px; padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.3); border-radius: 8px;
    color: #fff8ea; background: #243b32; cursor: pointer;
    font-size: 15px; font-weight: 700; list-style: none;
  }
  .sp-mobile-menu > summary::-webkit-details-marker { display: none; }
  .sp-mobile-menu > summary:focus-visible { outline: 2px solid #ffd65c; outline-offset: 3px; }
  header.sp-public-header > .sp-public-languages {
    order: 3; flex: 1 0 100%; width: 100%; padding: 1px; gap: 2px;
    margin: 0; overflow: visible;
  }
  .sp-public-languages a {
    display: flex; align-items: center; justify-content: center;
    flex: 1 1 0; min-width: 44px; min-height: 44px;
    padding: 6px; font-size: 13px;
  }
  .sp-mobile-menu[open] > .sp-mobile-menu__links {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
    position: absolute; top: calc(100% + 6px); left: 12px; right: 12px;
    width: auto; margin: 0; padding: 10px; gap: 4px;
    max-height: calc(100vh - 150px); overflow-y: auto; overflow-x: hidden;
    background: #1d2d25; border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.25);
  }
  .sp-mobile-menu__links a {
    display: flex; align-items: center; min-height: 44px;
    min-width: 0; padding: 8px 10px; white-space: normal;
    line-height: 1.35; font-size: 14px;
  }
}

