/* A shared, compact spacing scale for the homepage and all task pages. */
:root {
  --section-space: clamp(48px, 4vw, 72px);
  --heading-space: clamp(28px, 2.5vw, 40px);
  --column-space: clamp(24px, 3vw, 48px);
}

body:not(.task-page) main > .section,
body:not(.task-page) main > #research,
body:not(.task-page) main > #research + section,
.task-page .task-section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

body:not(.task-page) .section-heading {
  margin-bottom: var(--heading-space);
}
body:not(.task-page) .section-heading p { margin-top: 20px; }
body:not(.task-page) .models { padding-block: 40px; }
.models p { margin-bottom: 20px; }
.app-card-inner { gap: 24px; min-height: 0; }
.app-detail .cta { margin-top: 16px; }
.workflow-tabs { margin-bottom: 28px; }
.gallery-heading { margin-bottom: 28px; }
.club-scroll { height: 125svh; margin-top: 0; }
.club-sticky { gap: 24px; }

#research .research-copy { gap: 28px; }
#research [data-rule-list] a { padding-block: 24px; }
#research [data-rule-list] a > div { gap: 10px; }
body:not(.task-page) #research + section ul { margin-top: 32px; }
body:not(.task-page) #research + section ul a > div { gap: 14px; }
body:not(.task-page) .faq { column-gap: 6%; }
.faq-intro .eyebrow { margin-bottom: 16px; }
.faq-question { padding-block: 20px; }
.faq-answer p { padding-bottom: 20px; }
body:not(.task-page) .final-cta { padding-block: var(--section-space); }
.final-cta h2 { margin: 20px 0 28px; }

.task-section .eyebrow { margin-bottom: 14px; }
.task-heading { gap: var(--column-space); margin-bottom: var(--heading-space); }
.breadcrumbs { margin-bottom: 24px; }
.concept-grid { row-gap: 28px; }
.concept-card h3 { margin-top: 16px; }
.concept-note { margin-top: 20px; }
.process-grid { gap: var(--column-space); }
.process-step { padding-block: 24px; }
.feature-card { min-height: 0; padding: 26px; }
.feature-index { margin-bottom: 22px; }
.feature-card h3 { margin-top: 0; }
.feature-card p { margin-top: 14px; }
.feature-media { margin-top: 24px; }
.prompt-card { padding: 24px; }
.prompt-top { gap: 18px; margin-bottom: 18px; }
.copy-status { min-height: 0; margin-top: 10px; }
.copy-status:empty { display: none; }
.guide-layout { gap: var(--column-space); }
.guide-intro { margin-bottom: 24px; }
.guide-item { padding-block: 22px; }
.guide-item h3 { margin-bottom: 12px; }
.task-page .task-faq { padding-top: 32px; }
.task-end { padding-block: var(--section-space); }
.task-end p { margin-top: 22px; }
.task-end .cta { margin-top: 22px; }
.related-pages { margin-top: 36px; padding-top: 22px; }
.camera-layout { column-gap: var(--column-space); }
.camera-layout .feature-card { padding-block: 24px; }

body footer[class] { padding-top: 32px; }
body footer nav[class] { margin-top: 32px; row-gap: 28px !important; }
body footer nav > div[class],
body footer nav ul[class] { gap: 16px; }

@media (max-width: 767px) {
  :root {
    --section-space: 40px;
    --heading-space: 24px;
    --column-space: 24px;
  }
  body:not(.task-page) .section-heading p { margin-top: 16px; }
  body:not(.task-page) .models { padding-block: 28px; }
  .app-cards { gap: 16px; }
  .app-card-inner,
  .app-card.active .app-card-inner { gap: 16px; }
  .workflow-tabs { margin-bottom: 22px; }
  .gallery-heading { margin-bottom: 24px; }
  .gallery-actions { margin-top: 18px; }
  .club-scroll { height: auto; }
  .club-sticky { padding: 12px; gap: 20px; }
  .club-scene { height: 56svh; min-height: 320px; max-height: 560px; }
  .club-description { padding-bottom: 28px; gap: 18px; }
  #research .research-copy { gap: 24px; }
  #research [data-rule-list] a { padding-block: 20px; }
  body:not(.task-page) #research + section ul { margin-top: 24px; }
  .faq-intro { margin-bottom: 24px; }
  .faq-question { padding-block: 18px; }
  .final-cta h2 { margin: 18px 0 24px; }
  .task-heading > p { margin-top: 18px; }
  .concept-grid { row-gap: 24px; }
  .concept-card h3 { margin-top: 12px; }
  .process-step { padding-block: 20px; }
  .feature-card { padding: 20px; }
  .feature-index { margin-bottom: 16px; }
  .feature-card p { margin-top: 12px; }
  .prompt-card { padding: 20px; }
  .prompt-top { margin-bottom: 16px; }
  .guide-layout > h2 { margin-bottom: 24px; }
  .guide-item { padding-block: 20px; }
  .task-page .task-faq { padding-top: 24px; }
  .task-end p { margin-top: 18px; }
  .task-end .cta { margin-top: 20px; }
  .related-pages { margin-top: 28px; padding-top: 20px; }
  .related-pages > span { margin-bottom: 4px; }
  .camera-layout { row-gap: 24px; }
  .camera-layout .feature-card { padding-block: 20px; }
  body footer[class] { padding-top: 24px; }
  body footer nav[class] { margin-top: 24px; row-gap: 28px !important; }
  body footer nav > div[class],
  body footer nav ul[class] { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .club-scroll { height: auto; }
}