/* Premium UI polish — typography rhythm, spacing, responsive refinements */

/* --- Typography scale --- */
body {
    font-size: 1.0625rem;
    line-height: 1.65;
}

h1 { letter-spacing: -0.03em; line-height: 1.12; }
h2 { letter-spacing: -0.02em; line-height: 1.2; }
h3 { line-height: 1.3; }

p, li {
    max-width: 65ch;
}

.mega-menu li,
.nav-dropdown li,
.nav-mobile li,
.site-footer li,
.doc-sidebar li {
    max-width: none;
}

.section-heading__description,
.page-hero__description,
.home-hero__description,
.company-hero__desc {
    font-size: clamp(1.0625rem, 1.5vw, 1.125rem);
    line-height: 1.7;
}

/* --- Layout rhythm --- */
.container {
    width: min(100% - clamp(1.25rem, 5vw, 2rem), var(--container-max));
}

.section {
    padding-block: clamp(3.5rem, 8vw, 5.5rem);
}

.section--lg {
    padding-block: clamp(4.5rem, 10vw, 6.5rem);
}

.section + .section--surface,
.section--surface + .section,
.section + .section--dark,
.home-showcase + .home-showcase {
    border-top: 1px solid var(--color-border);
}

/* --- Buttons & touch targets --- */
.btn {
    min-height: 2.75rem;
    font-size: var(--text-base);
    font-weight: 600;
}

.btn--sm {
    min-height: 2.375rem;
    font-size: 0.9375rem;
}

.btn--lg {
    min-height: 3rem;
    font-size: 1.0625rem;
    padding-inline: 1.625rem;
}

@media (max-width: 767px) {
    .btn, .btn--lg {
        min-height: 3rem;
    }
}

/* --- Navigation --- */
.nav-desktop__trigger,
.nav-desktop__link {
    font-size: 0.875rem;
}

.mega-menu__link-desc {
    font-size: 0.8125rem;
    line-height: 1.45;
}

.mega-menu__link-label {
    font-size: 0.875rem;
}

.nav-mobile__panel {
    width: min(100%, 22.5rem);
}

/* --- Footer --- */
.site-footer__nav a {
    font-size: 0.9375rem;
}

.site-footer__copy,
.site-footer__legal a {
    font-size: 0.8125rem;
}

/* --- Forms --- */
.form-field__label {
    font-size: 0.9375rem;
    font-weight: 600;
}

.form-field__input {
    padding: 0.8125rem 1rem;
    font-size: 1rem;
    min-height: 3rem;
}

.form-field__textarea {
    min-height: 9rem;
    line-height: 1.6;
}

.form-field__help,
.form-field__error {
    font-size: 0.875rem;
}

/* --- FAQ --- */
.faq__question {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    padding-block: var(--space-4);
}

.faq__answer {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-muted);
}

/* --- Screenshots & media --- */
.screenshot-frame__caption {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-subtle);
}

.screenshot-frame--cropped .screenshot-frame__image {
    object-position: top center;
}

.screenshot-frame--detail .screenshot-frame__viewport {
    aspect-ratio: var(--screenshot-aspect, auto);
}

.screenshot-frame--detail .screenshot-frame__image {
    object-fit: contain;
    object-position: top center;
}

/* --- CTA bands --- */
.cta-band {
    padding-block: clamp(3.5rem, 7vw, 5rem);
}

.cta-band__title {
    font-size: clamp(1.625rem, 3vw, 2rem);
}

.cta-band__description {
    font-size: 1.0625rem;
    line-height: 1.65;
}

/* --- Prose & legal --- */
.prose,
.legal-prose {
    font-size: 1.0625rem;
    line-height: 1.75;
}

.prose p,
.legal-prose p {
    max-width: 65ch;
}

/* --- Home page --- */
.home-role-card__description,
.home-trust-card__text {
    font-size: 0.9375rem;
    line-height: 1.65;
}

.home-role-card__list {
    font-size: 0.9375rem;
}

.home-final-cta__description {
    font-size: clamp(1.0625rem, 1.5vw, 1.125rem);
    line-height: 1.7;
    max-width: 38rem;
    margin-inline: auto;
}

/* --- Product pages --- */
.pf-workflow-item__desc,
.pf-connected-card__desc,
.pf-role__text {
    font-size: 0.9375rem;
    line-height: 1.65;
}

.pf-connected-card__title {
    font-size: 1rem;
}

/* --- Docs --- */
.doc-article {
    font-size: 1.0625rem;
    line-height: 1.75;
}

.doc-article p,
.doc-article li {
    font-size: 1.0625rem;
    line-height: 1.75;
}

.doc-sidebar__link {
    font-size: 0.9375rem;
}

.doc-sidebar__section {
    font-size: 0.8125rem;
}

.docs-card__description {
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* --- Pricing --- */
.pricing-tier__desc {
    font-size: 0.9375rem;
}

/* --- Contact / demo --- */
.contact-route-card__desc,
.contact-form-card__subtitle,
.demo-form-card__subtitle {
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* --- Error pages --- */
.error-page-wrap .company-hero__desc {
    max-width: 42ch;
}

/* --- Responsive content widths --- */
@media (max-width: 767px) {
    .split-layout,
    .home-hero__inner,
    .company-hero__grid,
    .pricing-showcase__grid,
    .demo-layout,
    .contact-layout {
        gap: var(--space-8);
    }

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

    .home-trust__grid,
    .home-roles__grid {
        gap: var(--space-4);
    }

    .mega-menu {
        /* Keep card layout; only tighten padding on smaller laptops */
        inset-inline: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .home-hero__inner {
        gap: var(--space-10);
    }
}

/* --- Wide screens: prevent over-stretched lines in centered sections --- */
@media (min-width: 1440px) {
    .section-heading--center .section-heading__description {
        max-width: 42rem;
        margin-inline: auto;
    }
}

/* --- Minimum readable sizes (eyebrows stay small but legible) --- */
.section-heading__eyebrow,
.pf-hero__eyebrow,
.sol-hero__persona,
.docs-card__category,
.pricing-tier__badge {
    font-size: 0.875rem;
}

/* --- Docs hub & sidebar --- */
.docs-hub-hero__desc,
.docs-hub-start__desc,
.docs-hub-popular-card__desc,
.docs-hub-area__list span {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.doc-sidebar__section {
    font-size: 0.875rem;
    letter-spacing: 0.04em;
}

.doc-figure figcaption {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* --- Product & solutions metadata --- */
.pf-stat__label,
.sol-outcome__label,
.sol-lifecycle-step__label {
    font-size: 0.875rem;
}

/* --- Pricing --- */
.pricing-tier__price-note {
    font-size: 0.875rem;
}

/* --- Focus visibility --- */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}