@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/marketing/fonts/dm-sans-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/marketing/fonts/instrument-serif-latin.woff2") format("woff2");
}

.marketing-page {
    --ink: #25262b;
    --muted: #62636a;
    --green: #58438b;
    --green-hover: #423168;
    --line: #dedee2;
    --mint: #f0eef5;
    --peach: #f3f3ed;
    --lavender: #f0eef5;
    font-family: "DM Sans", Arial, sans-serif;
    letter-spacing: 0;
}

.marketing-page h1,
.marketing-page h2,
.marketing-page h3 {
    font-weight: 500;
}

.marketing-page .serif {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
}

.marketing-page .eyebrow {
    font-size: 11px;
    font-weight: 500;
}

.marketing-page a:focus-visible,
.marketing-page button:focus-visible,
.marketing-page summary:focus-visible,
.marketing-page input:focus-visible,
.marketing-page textarea:focus-visible {
    outline-color: #7868a5;
}

.marketing-page .site-header {
    height: 82px;
}

.marketing-page .site-nav {
    font-weight: 500;
}

.marketing-page .nav-dropdown {
    box-shadow: 0 12px 25px #25262b12;
}

.marketing-page .button {
    border-radius: 3px;
    font-weight: 500;
}

.marketing-page .text-link {
    font-weight: 500;
}

.marketing-page .breadcrumbs {
    font-size: 12px;
}

.marketing-page .breadcrumbs li + li::before {
    color: #929298;
}

.marketing-page .page-intro {
    background: #f5f5f7;
    border-bottom: 1px solid var(--line);
}

.marketing-page .page-intro h1 {
    font-size: 54px;
    line-height: 1.12;
}

.marketing-page .section-heading > p,
.marketing-page .feature-item p,
.marketing-page .steps p,
.marketing-page .detail-sections p,
.marketing-page .detail-aside p,
.marketing-page .guide-card p,
.marketing-page .plan-checks dd,
.marketing-page .contact-layout aside p,
.marketing-page .muted {
    font-size: 16px;
    line-height: 1.75;
}

.marketing-page .feature-item h3,
.marketing-page .detail-sections h2,
.marketing-page .article-body h2 {
    line-height: 1.25;
}

.marketing-page .workflow-band,
.marketing-page .agency-photography,
.marketing-page .detail-figure {
    background: #f5f5f7;
}

.marketing-page .step-number {
    font-family: "Instrument Serif", Georgia, serif;
    border-top-color: var(--line);
}

.marketing-page .field-list > div {
    font-size: 15px;
}

.marketing-page .field-list > div span:last-child {
    font-size: 14px;
}

.marketing-page .field-list .field-list-heading {
    font-size: 12px;
    background: #f5f5f7;
}

.marketing-page .detail-figure figcaption,
.marketing-page .workflow-example figcaption,
.marketing-page .workflow-app figcaption,
.marketing-page .photo-credit,
.marketing-page .guide-card-top,
.marketing-page .guide-read {
    font-size: 12px;
}

.marketing-page .guide-card-top {
    font-weight: 500;
}

.marketing-page .screenshots figure:first-child {
    background: #f5f5f7;
}

.marketing-page .screenshots figure:nth-child(2) {
    background: #f0eef5;
}

.marketing-page .screenshots figure:nth-child(3) {
    background: #f3f3ed;
}

.marketing-page .screenshots figcaption {
    font-weight: 500;
    line-height: 1.5;
}

.marketing-page .store-link {
    border-color: #c5c4cc;
}

.marketing-page .store-link:hover {
    border-color: var(--green);
    background: #faf9fc;
}

.marketing-page .store-link > span {
    min-width: 0;
}

.marketing-page .store-link small {
    font-size: 12px;
}

.marketing-page .plan-checks dt {
    font-size: 15px;
    font-weight: 500;
}

.marketing-page .article-toc h2 {
    font-size: 13px;
}

.marketing-page .article-toc li {
    font-size: 14px;
    line-height: 1.6;
}

.marketing-page .article-body,
.marketing-page .detail-sections,
.marketing-page .contact-form {
    min-width: 0;
}

.marketing-page .article-next {
    background: #f5f5f7;
    border-left: 2px solid var(--green);
}

.marketing-page .contact-form label {
    font-size: 14px;
    font-weight: 500;
}

.marketing-page .contact-form input,
.marketing-page .contact-form textarea {
    border-color: #bfbfc8;
    border-radius: 3px;
    font-size: 16px;
}

.marketing-page .contact-form [aria-invalid="true"] {
    border-color: #ad352c;
}

.marketing-page .form-note {
    font-size: 14px;
    line-height: 1.7;
}

.marketing-page .faq-list summary {
    font-weight: 500;
}

.marketing-page .faq-list details p {
    font-size: 15px;
    line-height: 1.75;
}

.marketing-page .closing-band {
    background: #f0eef5;
    color: var(--ink);
    padding-block: 65px;
}

.marketing-page .closing-inner h2 {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 47px;
    font-weight: 400;
    max-width: 700px;
}

.marketing-page .closing-inner p {
    color: var(--muted);
    font-size: 16px;
}

.marketing-page .closing-inner .eyebrow {
    color: var(--green);
    font-size: 11px;
}

.marketing-page .closing-inner .button {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.marketing-page .closing-inner .button:hover {
    background: var(--green-hover);
    border-color: var(--green-hover);
}

.marketing-page .closing-inner .button img {
    filter: invert(1);
}

.marketing-page .footer-brand p {
    font-size: 16px;
    line-height: 1.7;
}

.marketing-page .footer-grid h2 {
    font-size: 13px;
    font-weight: 600;
}

.marketing-page .footer-grid > div > a:not(.brand) {
    font-size: 13px;
}

.marketing-page .footer-bottom {
    font-size: 12px;
}

@media (max-width: 850px) {
    .marketing-page .site-header {
        height: 74px;
    }

    .marketing-page .nav-dropdown {
        box-shadow: none;
    }

    .marketing-page .page-intro h1 {
        font-size: 44px;
    }

    .marketing-page .closing-inner h2 {
        font-size: 41px;
    }

    .marketing-page .screenshots figcaption {
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .marketing-page .site-header {
        height: 68px;
    }

    .marketing-page .breadcrumbs {
        font-size: 11px;
    }

    .marketing-page .page-intro h1 {
        font-size: 36px;
        line-height: 1.14;
    }

    .marketing-page .field-list > div {
        flex-direction: column;
        gap: 4px;
    }

    .marketing-page .field-list > div span {
        font-size: 15px;
    }

    .marketing-page .field-list > div span:last-child {
        text-align: left;
        max-width: none;
    }

    .marketing-page .field-list .field-list-heading {
        flex-direction: row;
    }

    .marketing-page .field-list .field-list-heading span {
        font-size: 12px;
    }

    .marketing-page .plan-checks > div {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-block: 20px;
    }

    .marketing-page .screenshots figcaption {
        font-size: 14px;
    }

    .marketing-page .closing-band {
        padding-block: 45px;
    }

    .marketing-page .closing-inner h2 {
        font-size: 41px;
    }

    .marketing-page .footer-grid .footer-brand > a:not(.brand) {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 370px) {
    .marketing-page .page-intro h1 {
        font-size: 33px;
    }
}