/* A quiet, left-aligned type system for the light site. */
@font-face {
    font-family: "Pragmatica";
    src: url("/webFonts/Pragmatica/Book.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Pragmatica";
    src: url("/webFonts/Pragmatica/Medium.woff") format("woff");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Pragmatica";
    src: url("/webFonts/Pragmatica/Bold.woff") format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --text-ink: #181818;
    --text-muted: #34344e;
    --text-eyebrow: #42425f;
}

html {
    font-family: "Pragmatica", sans-serif;
    font-synthesis: none;
}

body,
button,
input,
select,
textarea {
    font-family: "Pragmatica", sans-serif;
}

strong,
b {
    font-weight: 700;
}

#product-hero .product-hero-actions .button-book-demo,
#product-hero .product-hero-actions .button-hero-outline,
.hero-section .hero-buttons .button-book-demo,
.ch-hero .ch-hero-actions .button-book-demo,
.ch-hero .ch-hero-actions .button-hero-outline {
    font-size: clamp(14px, 1.1vw, 16px) !important;
    font-weight: 500;
}

/* Home: one large statement, a short supporting line and ample space below. */
#product-hero.product-hero {
    padding: clamp(112px, 12vw, 176px) 0 clamp(72px, 8vw, 112px);
    text-align: left;
}

#product-hero .product-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(1200px, calc(100% - 80px));
    max-width: none;
}

#product-hero .product-hero-label {
    margin: 0 0 26px;
    color: var(--text-eyebrow);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.09em;
}

#product-hero .product-hero-title {
    width: 100%;
    max-width: 1030px;
    margin: 0;
    color: var(--text-ink);
    font-size: clamp(46px, 5.7vw, 82px) !important;
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 1.04;
    text-align: left;
    white-space: normal;
}

#product-hero .product-hero-description {
    max-width: 520px;
    margin: 28px 0 0;
    color: var(--text-muted);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
}

#product-hero .product-hero-actions {
    order: 3;
    justify-content: flex-start;
    margin-top: 34px;
}

#product-hero .hero-carousel-wrapper {
    order: 4;
    width: min(800px, 100%);
    max-width: none;
    margin: clamp(76px, 9vw, 124px) 0 0 !important;
}

/* The same hierarchy carries through the other page openings. */
#cases-hero.product-hero,
#blog-hero.product-hero {
    padding: clamp(112px, 12vw, 168px) 0 clamp(76px, 8vw, 112px);
    text-align: left;
}

#cases-hero .product-hero-inner,
#blog-hero .product-hero-inner {
    width: min(1200px, calc(100% - 80px));
    max-width: none;
    margin: 0 auto;
    text-align: left;
}

#cases-hero .product-hero-label {
    margin: 0 0 26px;
    color: var(--text-eyebrow);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.09em;
}

#cases-hero .cases-hero-title,
#blog-hero .blog-hero-title {
    max-width: 900px;
    margin: 0;
    color: var(--text-ink);
    font-size: clamp(48px, 5.5vw, 76px) !important;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.05;
    text-align: left;
}

#blog-hero .blog-hero-subtitle {
    max-width: 580px;
    margin: 26px 0 0;
    color: var(--text-muted);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
}

.hero-section {
    padding: clamp(112px, 12vw, 168px) 0 clamp(76px, 8vw, 112px);
}

.hero-section .hero-content {
    text-align: left;
}

.hero-section .hero-content h1 {
    max-width: 900px;
    margin: 0 0 26px !important;
    color: var(--text-ink);
    font-size: clamp(48px, 5.5vw, 76px) !important;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.05;
    text-align: left;
}

.hero-section .hero-description {
    max-width: 580px;
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
}

.hero-section .hero-buttons {
    justify-content: flex-start;
    margin-top: 34px;
}

.ch-hero {
    padding-top: clamp(112px, 11vw, 160px);
}

.ch-hero .ch-kicker--brand {
    padding: 0;
    background: transparent;
    color: var(--text-eyebrow);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ch-hero-grid > .ch-reveal > h1 {
    max-width: 660px;
    margin: 26px 0 24px !important;
    color: var(--text-ink);
    font-size: clamp(46px, 4.9vw, 72px) !important;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.05;
}

.ch-hero-grid > .ch-reveal > .ch-lead {
    max-width: 540px;
    color: var(--text-muted);
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 400;
    line-height: 1.55;
}

.careers-hero {
    padding: clamp(112px, 12vw, 168px) 0 clamp(76px, 8vw, 112px);
}

.careers-hero .careers-eyebrow {
    max-width: 720px;
    margin-bottom: 26px;
    color: var(--text-eyebrow);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.09em;
}

.careers-hero .careers-title,
.job-top .job-title {
    max-width: 900px;
    margin: 0 0 26px !important;
    color: var(--text-ink);
    font-size: clamp(48px, 5.5vw, 76px) !important;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.05;
    text-align: left;
}

.careers-hero .careers-lead,
.job-top .job-summary {
    max-width: 600px;
    color: var(--text-muted);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.55;
}

.job-top {
    padding: clamp(112px, 12vw, 168px) 0 clamp(76px, 8vw, 112px);
}

.blog-post-header.lumina-gradient-hero {
    width: min(1120px, 100%);
    text-align: left;
}

.blog-post-header .breadcrumb,
.blog-post-header .blog-post-meta,
.blog-post-header .blog-post-tags {
    justify-content: flex-start;
}

.blog-post-header h1 {
    max-width: 900px;
    margin: 0 0 30px;
    color: var(--text-ink);
    font-size: clamp(46px, 5.2vw, 72px) !important;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.06;
    text-align: left;
}

body > .section-padding {
    padding: clamp(112px, 12vw, 168px) 0 clamp(76px, 8vw, 112px);
}

body > .section-padding h1 {
    max-width: 900px;
    margin: 0 0 26px !important;
    color: var(--text-ink);
    font-size: clamp(46px, 5.2vw, 72px) !important;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.06;
}

body > .section-padding h1 + p {
    max-width: 600px;
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.55;
}

/* Section headings follow the same measured scale as the hero. */
.product-section .product-section-title,
.product-section .product-mission-title,
.product-section .product-solution-text h3 {
    color: var(--text-ink);
    font-size: clamp(36px, 4.2vw, 58px);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.08;
    text-align: left;
}

.product-section .product-section-title {
    max-width: 780px;
    margin-bottom: clamp(44px, 6vw, 80px);
}

@media (max-width: 700px) {
    #product-hero.product-hero,
    #cases-hero.product-hero,
    #blog-hero.product-hero,
    .hero-section,
    .careers-hero,
    .job-top,
    body > .section-padding {
        padding-top: 82px !important;
        padding-bottom: 72px !important;
    }

    #product-hero .product-hero-inner,
    #cases-hero .product-hero-inner,
    #blog-hero .product-hero-inner {
        width: calc(100% - 40px);
    }

    #product-hero .product-hero-title,
    #cases-hero .cases-hero-title,
    #blog-hero .blog-hero-title,
    .hero-section .hero-content h1,
    .careers-hero .careers-title,
    .job-top .job-title,
    .blog-post-header h1,
    body > .section-padding h1 {
        font-size: clamp(42px, 10vw, 56px) !important;
        letter-spacing: -0.045em;
    }

    #product-hero .product-hero-actions {
        flex-wrap: wrap;
        gap: 12px;
    }

    #product-hero .hero-carousel-wrapper {
        margin-top: 64px !important;
    }

    .ch-hero {
        padding-top: 82px;
    }

    .ch-hero-grid > .ch-reveal > h1 {
        font-size: clamp(42px, 10vw, 56px) !important;
    }

    .blog-post-header.lumina-gradient-hero {
        padding-top: 82px;
    }

    .case-story .blog-post-header h1 {
        font-size: clamp(32px, 8.5vw, 42px) !important;
    }
}