/* Page rhythm is owned here so adjacent sections never double their spacing. */
:root {
    --space-section: 64px;
    --space-page-start: 48px;
    --space-heading: 32px;
    --space-related: 24px;
}

main .section {
    padding-block: 0 var(--space-section);
}

main .section:first-child {
    padding-top: var(--space-page-start);
}

main .section-heading {
    margin-bottom: var(--space-heading);
}

main .section-heading > .badge + h1,
main .section-heading > .badge + h2 {
    margin-top: 12px;
}

main .section-heading > p {
    margin-top: 16px;
}

main .section-heading:last-child {
    margin-bottom: 0;
}

.site-footer {
    margin-top: 0;
}

/* The custom panel belongs to the printer range above it. */
main .printer-range-section {
    padding-bottom: var(--space-related);
}

main .home-ar-heading {
    margin-bottom: 0;
}

.home-ar-action {
    margin-top: 24px;
}

.printer-range-card {
    min-height: 20rem;
    padding: 32px 36px 56px;
}

.printer-range-card h3 {
    margin-bottom: 16px;
}

.printer-range-card p {
    margin: 0 0 24px;
}

/* Keep product facts and specifications separate without extra text margins. */
.product-key-facts {
    margin-top: 40px;
}

.product-results-copy h2 {
    margin-top: 0;
}

.product-results-copy > p:last-child {
    margin-bottom: 0;
}

.product-spec-list {
    margin-top: 0;
}

.story-page .ar-steps .card p {
    margin: 0;
}

main .downloads-hero {
    padding-bottom: var(--space-heading);
}

main .downloads-hero .section-heading > p {
    margin-top: 0;
}

.downloads-page {
    padding-bottom: var(--space-section);
}

@media (min-width: 768px) and (max-width: 1050px) {
    :root {
        --space-section: 56px;
        --space-page-start: 32px;
    }

    .page-container {
        padding-inline: 40px;
    }

    .hero-grid {
        gap: 32px;
    }

    .home-hero h1 {
        font-size: clamp(2rem, 4vw, 2.5rem);
    }

    .printer-range-grid {
        max-width: none;
    }

    .printer-range-card {
        min-height: 17rem;
    }

    .story-page .ar-hero .hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .story-page .ar-hero .hero-copy {
        max-width: 40rem;
    }

    .story-page .ar-download-panel {
        gap: 32px;
    }

    .story-page .ar-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .story-page .ar-steps .card {
        padding: 32px;
    }

    .story-page .ar-steps .step-photo {
        max-width: 24rem;
    }
}

@media (max-width: 767px) {
    :root {
        --space-section: 48px;
        --space-page-start: 24px;
        --space-heading: 24px;
    }

    .printer-range-grid {
        gap: 16px;
    }

    .printer-range-card {
        min-height: 18rem;
        padding: 32px 32px 56px;
    }

    .product-key-facts {
        margin-top: 32px;
    }

    .footer-inner {
        padding-block: 32px;
    }
}

/* Grid gaps provide the form rhythm; paragraph margins must not add to it. */
.story-page .contact-layout p {
    margin: 0;
}

.story-page .field-error:empty {
    display: none;
}

/* Use one text rhythm inside composed blocks, without stacking margins and gaps. */
.hero-copy {
    gap: 16px;
}

.hero-copy > .button-row {
    margin-top: 8px;
}

.product-introduction h1 {
    margin-block: 12px 16px;
}

.product-intro-copy {
    margin: 0 0 24px;
}

.about-experience,
.about-narrative,
.about-joy {
    gap: 16px;
}

.about-experience > p,
.about-narrative > p,
.story-card > div > p,
.ar-download-panel > div > p {
    margin: 0;
}

.ink-grid {
    gap: 24px;
}

.ink-grid > .card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.ink-grid > .card > h3,
.ink-grid > .card > p {
    margin: 0;
}

.ink-grid > .card > a {
    margin-top: auto;
}

/* Actions share a consistent footprint across cards, heroes, and forms. */
main .button {
    font-size: 1rem;
    line-height: 24px;
    min-height: 48px;
    padding: 12px 24px;
}

main .button-row {
    gap: 12px;
}

.cta-panel p {
    margin-block: 16px 24px;
}

.story-page .contact-form-wrap {
    gap: 24px;
}

.story-page .contact-form-enhanced {
    gap: 16px;
}

/* Keep the factual details compact and align their contents with the heading. */
.product-key-facts {
    padding-block: 24px;
    gap: 24px;
    margin-bottom: 12px;
}

.product-key-facts dt {
    margin-bottom: 8px;
}

.product-results-copy h2 {
    margin-bottom: 16px;
}

.product-spec-list {
    margin-bottom: 24px;
}

.product-spec-list > div {
    padding: 16px 0;
    gap: 24px;
}

.product-specs {
    padding: 40px;
}

@media (max-width: 767px) {
    .hero-grid,
    .product-illustrated-hero {
        gap: 32px;
    }

    .product-specs {
        padding: 24px;
    }

    .product-spec-list > div {
        gap: 8px;
    }

    .product-key-facts {
        gap: 24px;
    }

    .cta-panel {
        padding: 32px 24px;
    }
}