/* Section boxes size to content. Their parent owns the external gap.
   Only filled background bands receive half-gap vertical padding. */
:is(.home-page, .about-page, .cr-regular, .contact-page) {
  --public-section-gap: 120px;
  --public-section-half: calc(var(--public-section-gap) / 2);
  --public-heading-gap: 40px;
  --public-intro-gap: 16px;
}
main.home-page,
main.about-page { gap: var(--public-section-gap); }
/* Keep the hero exclusion at zero specificity so filled-band padding wins. */
.home-page > section:where(:not(#main-banner-container)),
.about-page > section:where(:not(#about-banner-container)) {
  height: auto;
  min-height: 0;
  max-height: none;
  padding-top: 0;
  padding-bottom: 0;
}
.home-page :is(#main-ai-method, #main-career-container, #main-slogan-container),
.about-page :is(#about-instructor, #about-career-container) {
  padding-top: var(--public-section-half);
  padding-bottom: var(--public-section-half);
}
.home-page #main-slogan-container {
  height: auto;
  min-height: 0;
  max-height: none;
}
/* Hero heights and inner spacing remain owned by main.css and about.css. */
.home-page #main-intro-container { gap: var(--public-section-half); }
main.contact-page { row-gap: var(--public-section-gap); }

.home-page :is(#main-portfolio-container, #main-learning, #main-career-container),
.contact-page #contacts-titel-area { gap: var(--public-heading-gap); }
.home-page #main-ins-title,
.about-page #about-instructor-title { margin-bottom: 0; }
.home-page #main-ins-text,
.about-page #about-instructor-text { gap: var(--public-intro-gap); }
.home-page #main-ins-text > .home-link,
.about-page .about-instructor-facts { margin-top: calc(var(--public-heading-gap) - var(--public-intro-gap)); }
.home-page .home-heading > h2 + p,
.about-page .about-section-heading > h2 + p,
.contact-page #cont-title-text > h1 + p { margin-top: calc(var(--public-intro-gap) - 12px); }
.home-page .method-copy > h2 + p { margin-top: var(--public-intro-gap); }
.home-page .home-youtube-copy h3 { margin-bottom: var(--public-intro-gap); }
.home-page .home-youtube {
  margin-top: 0;
  padding-top: var(--public-section-half);
  border-top: 0;
}
.about-page :is(.about-section-heading, #about-ob-title-area, #about-career-title-area) {
  margin-bottom: var(--public-heading-gap);
}
.contact-page .con_map { margin-top: 0; }
.contact-page .contact-form-note { margin-top: var(--public-intro-gap); }
.contact-page .consultation-flow { margin-top: var(--public-heading-gap); }

/* Keep width wrappers while giving every section a real external gap. */
.cr-regular,
.cr-regular > .cr-wrap,
.cr-regular .cr-planning-band > .cr-wrap,
.cr-regular .cr-classroom {
  display: flex;
  flex-direction: column;
  gap: var(--public-section-gap);
}
.cr-regular { padding-top: var(--public-section-half); padding-bottom: var(--public-section-gap); }
.cr-regular > .cr-wrap,
.cr-regular .cr-planning-band > .cr-wrap { width: 100%; margin: 0 auto; }
.cr-regular .cr-intro-group { display: flex; flex-direction: column; gap: var(--public-heading-gap); }
.cr-regular .cr-section-nav { margin-top: 0; }
.cr-regular :is(.cr-hero, .cr-section, .cr-ai, .cr-final),
.cr-regular #project-builder {
  height: auto;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.cr-regular :is(.cr-ai, .cr-start-inline, .cr-facts-clear),
.cr-regular #project-builder {
  padding-top: var(--public-section-half);
  padding-bottom: var(--public-section-half);
}
.cr-regular .cr-start-inline { margin-top: 0; }
.cr-regular .cr-classroom > .cr-wrap { width: 100%; margin: 0 auto; }
.cr-regular .cr-section-head,
.cr-regular .cr-start-inline .cr-start-title { margin-bottom: var(--public-heading-gap); }
.cr-regular .cr-section-head > p:not(.cr-eyebrow),
.cr-regular .cr-head-split > p,
.cr-regular #project-builder > .cr-section-head > p:not(.cr-eyebrow) {
  margin-top: var(--public-intro-gap);
}
.cr-regular .cr-learning-grid { margin-top: 0; }
.cr-regular .cr-ai-method { margin-top: var(--public-heading-gap); }

@media (min-width: 768px) and (max-width: 1023px) {
  :is(.home-page, .about-page, .cr-regular, .contact-page) {
    --public-section-gap: 100px;
  }
}
@media (max-width: 767px) {
  :is(.home-page, .about-page, .cr-regular, .contact-page) {
    --public-section-gap: 64px;
    --public-heading-gap: 32px;
  }
  .home-page .home-youtube {
    row-gap: var(--public-heading-gap);
  }
  .home-page .home-youtube-copy { padding-top: 0; }
}

/* Title + supporting copy form a compact introduction; content follows after the larger gap. */
.about-page #about-ob-title-area { gap: var(--public-intro-gap); }
.about-page .about-ai-copy h3 { margin-bottom: var(--public-intro-gap); }
.about-page #about-slog .large-text { margin-top: var(--public-intro-gap); }
.home-page #main-slogan-container h2 + p {
  margin-top: calc(var(--public-intro-gap) - 12px);
}
.cr-regular .cr-ai-method-copy > h3 + p,
.cr-regular .cr-process-details-body > h3 + p { margin-top: var(--public-intro-gap); }
.cr-regular .cr-process-details-body > h3 + p { margin-bottom: var(--public-heading-gap); }
.cr-regular .cr-final .cr-button,
.home-page .method-copy .home-link,
.home-page .home-youtube-copy .home-link,
.about-page .about-contact-link { margin-top: var(--public-heading-gap); }
.home-page #main-slogan-container .home-cta {
  margin-top: calc(var(--public-heading-gap) - 12px);
}
.home-page .main-bn-con-text { gap: var(--public-intro-gap); }
.home-page .home-hero-actions { margin-top: calc(var(--public-heading-gap) - var(--public-intro-gap)); }

/* A shared ruled group owns the spacing at its internal boundary.
   60px below course details + 1px rule + 60px above FAQ on desktop.
   The outer stack still separates this group from other sections by 120px. */
.cr-regular .cr-logistics-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cr-regular .cr-logistics-group > .cr-info {
  border-top: 0;
  padding-bottom: var(--public-section-half);
}
.cr-regular .cr-logistics-group > .cr-faq-section {
  padding-top: var(--public-section-half);
}
/* The preceding filled starting-point band already marks this boundary. */
.cr-regular .cr-fields { border-top: 0; }