/* Shared type scale for the public website. */
:root {
    --site-title-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    --site-section-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.5rem);
    --site-card-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --site-body-size: 1rem;
    --site-label-size: 0.875rem;
}

.main :is(.blog-hero .blog-hero-content h1, .catalog-hero h1,
    .solutions-hero-copy h1, .solution-page-copy h1, .atelier-hero-copy h1,
    .downloads-hero-copy h1, .about-hero h1, .product-detail-hero h1,
    .page-title .heading h1) {
    font-size: var(--site-title-size);
    line-height: 1.16;
    letter-spacing: -0.035em;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.main h2 {
    font-size: var(--site-section-size);
    line-height: 1.25;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.main :is(.section-heading-row, .section-title, .portal-solutions-heading,
    .solutions-section-heading, .solution-value-heading, .solution-platform-intro,
    .solutions-cta-panel, .atelier-section-heading, .atelier-commerce-copy,
    .atelier-cta, .home-cta, .downloads-heading) h2 {
    font-size: var(--site-section-size);
    line-height: 1.25;
}

.main :is(.product-card, .product-card-heading, .product-showcase, .product-detail-hero) h2,
.main :is(.why-card, .integration-copy, .solution-tile, .reference-showcase-copy,
    .portal-solution-card, .solution-overview-card, .solution-feature-card,
    .atelier-project-copy, .atelier-service-grid, .download-card,
    .content-panel, .product-highlights, .product-cta, .form-container,
    .contact-info-header) h3 {
    font-size: var(--site-card-size);
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.main p,
.main :is(.portal-solution-card, .solution-overview-card, .solution-page-copy,
    .atelier-project-copy, .atelier-service-grid, .download-card,
    .contact .contact-info-header, .contact .form-container) p {
    font-size: var(--site-body-size);
    line-height: 1.7;
}

.main :is(.hero-supporting-text, .catalog-hero > .container p,
    .about-hero .lead, .product-detail-hero p, .solutions-hero-copy > p,
    .atelier-hero-copy > p, .downloads-hero-copy > p) {
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    line-height: 1.7;
}

.main :is(.command-module strong, .command-module small,
    .command-center-kicker, .command-center-status, .command-center-footer span,
    .portal-solution-suite, .portal-solution-meta span, .portal-solution-card > a,
    .solution-overview-label, .solution-overview-card > a,
    .solutions-section-kicker, .solutions-eyebrow, .solutions-hero-proof span,
    .solution-console-heading span, .solution-console-core small,
    .solution-console-footer span, .solution-related-card small,
    .solution-breadcrumb, .solution-page-eyebrow, .solution-platform-item small,
    .section-kicker, .eyebrow, .product-showcase-count,
    .product-showcase-modules > span, .product-showcase-notice,
    .module-detail-badge, .product-development-notice span,
    .atelier-project-copy > div > span, .atelier-project-copy > a,
    .atelier-proof-row span, .atelier-section-kicker, .atelier-eyebrow, .atelier-brand-mark small,
    .atelier-text-link, .atelier-api-note, .atelier-commerce-list span,
    .atelier-commerce-list strong, .atelier-flow-step small,
    .download-card-meta span, .download-card-meta time, .download-card-file,
    .download-card-action, .downloads-heading > span, .downloads-eyebrow) {
    font-size: var(--site-label-size);
    line-height: 1.5;
}

.main :is(.atelier-browser-bar small, .atelier-browser-overline,
    .atelier-sync-toolbar small, .atelier-marketplace small,
    .atelier-store-hero small, .atelier-store-logo, .atelier-sync-badge) {
    font-size: 0.75rem;
    line-height: 1.45;
}

.main .command-module {
    min-width: 0;
    min-height: 128px;
}

.main .command-center-header {
    flex-wrap: wrap;
    gap: 12px;
}

.main :is(.portal-solution-card, .solution-overview-card, .product-module-section) {
    scroll-margin-top: 100px;
}

/* Put the contact form before supporting information in both DOM and layout. */
.main .contact-page-title .heading {
    padding: 32px 0 24px;
}

.main .contact-page-title .heading h1 {
    margin-bottom: 12px;
}

.main .contact.section {
    padding-top: 32px;
}

.main .contact .contact-wrapper {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.main .contact .contact-wrapper > * {
    min-width: 0;
}

.main .contact .contact-info-panel {
    height: auto;
    padding: 28px;
}

.main .contact .form-container {
    padding: 28px;
}

.main .contact .map-container {
    margin-top: 28px;
    height: 260px;
}

.main .contact .card-content a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 992px) {
    .main .contact .contact-wrapper {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    :root {
        --site-title-size: clamp(2rem, 1.5rem + 2.5vw, 2.25rem);
        --site-section-size: clamp(1.625rem, 1.25rem + 1.5vw, 1.875rem);
    }

    .main :is(.solutions-page-hero, .solution-page-hero, .atelier-hero,
        .catalog-hero, .downloads-hero) {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .main .contact .form-container,
    .main .contact .contact-info-panel {
        padding: 22px 18px;
    }

    .main .contact-page-title .heading {
        padding: 24px 0;
    }

    .main .contact .map-container {
        height: 220px;
    }

    .main .command-center-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}