/* Shared button states and page spacing, loaded after the base styles. */
main {
  --site-section-padding: clamp(64px, 4.6vw, 88px);
  --site-section-padding-related: clamp(48px, 3.4vw, 64px);
  --site-section-padding-chapter: clamp(80px, 5.5vw, 104px);
  --site-content-gap: clamp(36px, 3vw, 48px);
}

body .button:is(.button--secondary, .button--outline) {
  box-shadow: none !important;
  transition: color 160ms cubic-bezier(.2, 0, 0, 1), background-color 160ms cubic-bezier(.2, 0, 0, 1), border-color 160ms cubic-bezier(.2, 0, 0, 1), transform 100ms cubic-bezier(.2, 0, 0, 1);
}

body .button:is(.button--secondary, .button--outline):hover:not(:active):not(:disabled) {
  color: #075fc9;
  border-color: #9fc5f7;
  background-color: #eaf3ff;
  box-shadow: none !important;
  transform: none !important;
}

body .button:is(.button--secondary, .button--outline):active:not(:disabled) {
  color: #064da2;
  border-color: #82b2f3;
  background-color: #d5e7ff;
  box-shadow: none !important;
  transform: scale(.99) !important;
}

/* Let the first screen fill the available viewport and center both columns. */
main > .hero.section-pad {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--site-header-size));
  min-height: calc(100svh - var(--site-header-size));
  padding-block: clamp(48px, 4vw, 72px);
}

.hero .hero-grid {
  align-items: center;
}

.hero .hero-copy,
.hero .hero-media {
  align-self: center;
  margin-block: 0;
}

.hero .hero-copy {
  padding-block: 0;
}

/* Adjacent section paddings add up: keep related blocks closer than chapters. */
main > .section-pad:not(.hero, .cta) {
  min-height: 0;
  padding-block: var(--site-section-padding);
}

main > .story.section-pad {
  --story-top-padding: var(--site-section-padding-chapter);
  padding-block-start: var(--story-top-padding);
}

main > .capabilities.section-pad {
  padding-block-end: var(--site-section-padding-related);
}

main > .product.section-pad {
  padding-block-start: var(--site-section-padding-related);
}

main > .ai.section-pad,
main > .automation.section-pad,
main > .formats.section-pad {
  padding-block-start: var(--site-section-padding-chapter);
}

main > .formats.section-pad {
  padding-block-end: var(--site-section-padding-related);
}

main > .telegram-news.section-pad {
  padding-block-start: var(--site-section-padding-related);
}

main > .faq.section-pad {
  padding-block-end: var(--site-section-padding-related);
}

.automation .automation-stack {
  /* The audience is a separate reading stop inside the automation section. */
  gap: calc(var(--site-section-padding) * 2);
}

main > .cta.section-pad {
  padding-block: var(--site-section-padding-chapter);
}

/* Consistent heading-to-content spacing, without changing the rows themselves. */
main .pain .card-grid,
main .pain .note,
main .capabilities .capability-showcase,
main .product .product-grid,
main .ai .ai-scenario,
main .automation .comparison-table,
main .automation .audience .audience-grid,
main .result .result-features,
main .result .how-grid,
main .formats .plan-list {
  margin-top: var(--site-content-gap);
}

main .result .result-how-title {
  margin-top: calc(var(--site-content-gap) + 8px);
}

@media (max-width: 1000px) {
  main {
    --site-section-padding: 56px;
    --site-section-padding-related: 40px;
    --site-section-padding-chapter: 64px;
    --site-content-gap: 36px;
  }
}

@media (max-width: 740px) {
  main {
    --site-section-padding: 40px;
    --site-section-padding-related: 32px;
    --site-section-padding-chapter: 48px;
    --site-content-gap: 28px;
  }
}