/*
 * Manor brand layer.
 * Loaded last on every page except the homepage so older templates (use-case.css,
 * blog-share.css and inline page styles) pick up the homepage's look: quiet paper
 * and ink, light uppercase display type, tracked CTAs with a circle arrow, an
 * ink-wash band behind each page header and a dark closing call to action.
 */
:root {
    --brand-paper: #F4F2EE;
    --brand-paper-2: #ECE9E2;
    --brand-card: #FFFDFA;
    --brand-ink: #16241D;
    --brand-ink-60: rgba(22, 36, 29, .6);
    --brand-ink-50: rgba(22, 36, 29, .5);
    --brand-line: rgba(22, 36, 29, .1);
    --brand-mint: #217A56;
    --brand-mint-lt: #6FD3A6;
    --brand-night: #0E1B15;
}

body {
    background: var(--brand-paper);
    color: var(--brand-ink);
}

/* ── Header and navigation ── */
.site-header,
.header {
    background: rgba(244, 242, 238, .86);
    border-bottom: 1px solid var(--brand-line);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.site-header .logo span,
.header .logo span,
.header .logo-text {
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.site-header .nav-links a,
.header .nav-links a {
    color: var(--brand-ink);
    font-family: 'Outfit', sans-serif;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active,
.header .nav-links a:hover,
.header .nav-links a.active {
    color: var(--brand-mint);
}

.site-header .nav-links a.launch-link,
.header .nav-links a.launch-link,
.launch-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-ink) !important;
}

.launch-link::after {
    content: "→";
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--brand-ink);
    color: #fff;
    font-size: .72rem;
    letter-spacing: 0;
}

/* ── Page header: ink-wash band, light uppercase display type ── */
.hero-shell,
.article-hero,
.doc-hero {
    position: relative;
    background:
        url("art/ink-band.webp?v=2") center bottom / 100% clamp(110px, 13vw, 190px) no-repeat,
        linear-gradient(180deg, #F8F7F3 0%, #EEF0EC 100%);
    border-bottom: 0;
    padding-bottom: clamp(96px, 12vw, 176px);
}

h1 {
    font-weight: 300;
    letter-spacing: .02em;
    line-height: 1.08;
    text-transform: uppercase;
}

.hero h1,
.hero-shell h1,
.hero-inner h1 {
    font-size: clamp(2.2rem, 4.6vw, 4.2rem);
    font-weight: 300;
    letter-spacing: .02em;
}

.article-hero h1,
.doc-hero h1 {
    font-size: clamp(2rem, 3.8vw, 3.4rem);
    font-weight: 300;
    letter-spacing: .02em;
}

.hero a:not(.button):not(.button-secondary):not(.launch-link),
.hero-inner a:not(.button):not(.button-secondary),
.doc-hero a:not(.button):not(.button-secondary):not(.doc-back) {
    color: var(--brand-mint);
    text-underline-offset: 3px;
}

h2 {
    font-weight: 300;
    letter-spacing: .02em;
    line-height: 1.15;
    text-transform: uppercase;
}

h3 {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* Long-form reading keeps sentence case so articles stay easy to scan. */
.article-body h2,
.content-box h2,
.doc-body h2,
.legal h2 {
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}

.kicker,
.eyebrow {
    color: var(--brand-ink-60);
    font-family: 'Outfit', sans-serif;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.kicker::before {
    display: none;
}

.dek {
    color: #5F625C;
}

/* ── Buttons: tracked uppercase text with a circle arrow ── */
.button {
    gap: 14px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--brand-ink);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.button::after {
    content: "→";
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-ink);
    color: #fff;
    font-size: .95rem;
    letter-spacing: 0;
    transition: transform .3s;
}

.button:hover {
    background: none;
    color: var(--brand-ink);
    transform: none;
}

.button:hover::after {
    transform: translateX(3px);
}

.button-secondary {
    min-height: 0;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: none;
    color: var(--brand-ink);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: .75;
}

.button-secondary:hover {
    color: var(--brand-ink);
    opacity: 1;
    transform: none;
}

/* ── Cards ── */
.panel,
.template-card,
.platform-card,
.ops-card,
.comparison-card,
.post-card,
.feature-card,
.deep-card,
.business-card {
    background: var(--brand-card);
    border: 1px solid rgba(22, 36, 29, .08);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(14, 27, 21, .04), 0 18px 44px rgba(14, 27, 21, .07);
}

.post-card .tag,
.template-card .status,
.doc-badge {
    color: var(--brand-mint);
}


/* ── Marketplace Blueprint cards (workflow library, creators) ── */
.bp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.bp-head h2 {
    margin: 0;
}

.bp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.bp-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: #FFFDFA;
    border: 1px solid rgba(22, 36, 29, .08);
    box-shadow: 0 1px 2px rgba(14, 27, 21, .04), 0 18px 44px rgba(14, 27, 21, .08);
    color: inherit;
    text-decoration: none;
    transition: transform .3s, box-shadow .3s;
}

.bp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(14, 27, 21, .04), 0 24px 54px rgba(14, 27, 21, .12);
}

.bp-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #EDE7DB;
}

.bp-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The OPC cover is the only cool-toned cover; warm it to sit with the others. */
.bp-cover img.warm {
    filter: sepia(.32) saturate(.85) brightness(1.02);
}

.bp-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    font-size: .66rem;
    font-weight: 600;
}

.bp-body {
    display: grid;
    gap: 6px;
    padding: 14px 16px 16px;
}

.bp-body strong {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
}

.bp-body span {
    color: rgba(22, 36, 29, .62);
    font-size: .84rem;
    line-height: 1.5;
}

.bp-body em {
    margin-top: 4px;
    color: #217A56;
    font-size: .74rem;
    font-style: normal;
    font-weight: 500;
}

@media (max-width: 960px) {
    .bp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .bp-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Closing call to action: the homepage's dark panel ── */
.cta,
.article-cta {
    flex-wrap: wrap;
    margin-top: 32px;
    padding: clamp(32px, 5vw, 56px);
    border: 0;
    border-radius: 24px;
    background:
        radial-gradient(50% 70% at 75% 20%, rgba(33, 122, 86, .38), transparent 70%),
        var(--brand-night);
    color: #fff;
}

.cta h2,
.cta h3,
.article-cta h2,
.article-cta h3 {
    color: #fff;
}

.cta p,
.article-cta p {
    color: rgba(255, 255, 255, .72);
}

.cta a:not(.button):not(.button-secondary),
.article-cta a:not(.button):not(.button-secondary) {
    color: #fff;
}

.cta .button,
.article-cta .button {
    color: #fff;
}

.cta .button::after,
.article-cta .button::after {
    background: #fff;
    color: var(--brand-ink);
}

.cta .button-secondary,
.article-cta .button-secondary {
    color: #fff;
}

/* ── Prose links, tables, footer ── */
.article-body a,
.main p a,
.main li a,
.content-box a {
    color: var(--brand-mint);
    text-underline-offset: 3px;
}

th {
    color: var(--brand-ink-60);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.doc-footer,
.article-footer,
.footer {
    background: var(--brand-paper-2);
    border-top: 1px solid var(--brand-line);
}

.doc-footer a:hover,
.article-footer a:hover,
.footer a:hover {
    color: var(--brand-mint);
}

@media (max-width: 760px) {
    .hero-shell,
    .article-hero,
    .doc-hero {
        background-size: 220% 110px, auto;
        padding-bottom: 104px;
    }

    .launch-link::after {
        display: none;
    }

    .site-header .logo span,
    .header .logo span,
    .header .logo-text {
        white-space: nowrap;
    }

    .site-header .nav-links a,
    .header .nav-links a {
        letter-spacing: .1em;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .header .nav-links a:not(.launch-link) {
        display: none;
    }
}

/* ── Phones: nothing may push the page wider than the screen ── */
.hero > *,
.cta > *,
.article-cta > *,
.two-col > *,
.split > *,
.grid > *,
.query-list > *,
.approval-note > * {
    min-width: 0;
}

pre,
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 560px) {
    .two-col,
    .query-list,
    .faq-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .button,
    .button-secondary {
        letter-spacing: .14em;
        white-space: normal;
    }

    main a,
    main li,
    .article-body a {
        overflow-wrap: anywhere;
    }
}

/* Blog post figures: product screenshots and workflow canvases. */
.post-figure {
    margin: 36px 0;
}

.post-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--brand-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px -28px rgba(22, 36, 29, .35);
}

.post-figure figcaption {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--brand-ink-60);
}

.post-figure figcaption strong {
    color: var(--brand-ink);
    font-weight: 600;
}

.post-figure-zoom {
    display: block;
    cursor: zoom-in;
}