/* ============================================================
   content.css — Default editorial layout for markdown pages.
   Scoped to .content-page / .content-article so it never
   bleeds into custom-layout sections (enterprise, product…).
   Design: "The Sovereign Precision" — Stitch editorial style.
   ============================================================ */

/* ── Page wrapper ────────────────────────────────────────── */
.content-page {
    max-width: 720px;
    margin-inline: auto;
    padding-block: var(--space-xl) var(--space-2xl);
}

/* When a .page-hero precedes the section, suppress redundant top padding */
.content-page--has-hero {
    padding-top: var(--space-lg);
}

/* ── Optional label above h1 (frontmatter: label) ───────── */
.content-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-md);
}

/* ── Article container (counter scope) ──────────────────── */
.content-article {
    counter-reset: section-counter;
}

/* ── H1 — the editorial headline ────────────────────────── */
.content-article h1 {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    /* margin-bottom: var(--space-lg); */
    margin-bottom: 0;
    font-weight: 700;
}

/* ── H2 — numbered section headings (Stitch "0N Title") ─── */
.content-article h2 {
    /* counter-increment: section-counter; */
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    color: var(--color-ink);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    /* border-top: 1px solid var(--surface-border); */
    margin-bottom: var(--space-sm);
}

/* The counter number — muted, italic serif, offset left */
/* .content-article h2::before {
    content: "0" counter(section-counter);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.25rem;
    color: #bbcbb9;
    flex-shrink: 0;
    line-height: inherit;
} */

/* First h2: no top rule (sits below the h1) */
.content-article h2:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* ── H3 — sub-section label (uppercase sans) ─────────────── */
.content-article h3 {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

/* ── H4 — fine detail ────────────────────────────────────── */
.content-article h4 {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

/* ── Body text ───────────────────────────────────────────── */
.content-article p {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.8;
    color: #3c4a3d;
    margin-bottom: var(--space-md);
}

/* ── Lists ───────────────────────────────────────────────── */
.content-article ul,
.content-article ol {
    padding-left: 0;
    margin-bottom: var(--space-md);
    list-style: none;
}

.content-article ul li,
.content-article ol li {
    margin-left: 3rem;
    list-style: square;
    margin-bottom: 0;
    font-size: 1rem;
    /* line-height: 1.7; */
    color: #3c4a3d;
}

.content-article ol li {
    list-style: decimal;
}

/* .content-article ol {
    counter-reset: list-counter;
}

.content-article ol li {
    counter-increment: list-counter;
} */

/* .content-article ol li::before {
    content: counter(list-counter) ".";
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
    flex-shrink: 0;
    min-width: 1.25rem;
    margin-top: 0.2rem;
} */

/* ── Blockquote — info / callout box ─────────────────────── */
.content-article blockquote {
    background: var(--surface-low);
    border: none;
    border-left: none;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: 0 0 var(--space-lg) 0;
    font-style: normal;
}

.content-article blockquote p {
    font-size: 0.9375rem;
    margin-bottom: 0;
}

/* ── CTA buttons rendered from md: [Label](url "btn btn-primary") ── */
.content-article a.btn {
    text-decoration: none;
    font-weight: inherit;
}
.content-article a.btn:hover {
    text-decoration: none;
}

/* ── Inline links ────────────────────────────────────────── */
.content-article a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s;
}

.content-article a:hover {
    color: var(--color-primary-dk);
    text-decoration: underline;
}

/* ── Code ────────────────────────────────────────────────── */
.content-article code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.875em;
    background: var(--surface-low);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    color: var(--color-primary-dk);
}

.content-article pre {
    background: var(--surface-low);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    overflow-x: auto;
    margin: var(--space-lg) 0;
}

.content-article pre code {
    background: none;
    padding: 0;
    font-size: 0.875rem;
}

/* ── HR — section break ──────────────────────────────────── */
.content-article hr {
    border: none;
    border-top: 1px solid var(--surface-border);
    margin: var(--space-xl) 0;
}

/* ── Tables ──────────────────────────────────────────────── */
.content-article table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: var(--space-lg) 0;
}

.content-article th {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink);
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--surface-border);
    text-align: left;
}

.content-article td {
    padding: 0.75rem;
    color: #3c4a3d;
    border-bottom: 1px solid var(--surface-border);
    vertical-align: top;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .content-article h2 {
        display: block;
    }

    .content-article h2::before {
        display: block;
        margin-bottom: 0.25rem;
    }
}

/* ── Partner badge row ───────────────────────────────────── */
.partner-badges {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

.partner-badges img {
    height: 96px;
    width: auto;
}

/* ── Z-layout feature blocks ─────────────────────────────── */

/* When this page contains Z-layout blocks, widen the page wrapper
   and re-constrain all other prose elements individually */
.content-page:has(.features-z) {
    max-width: 100%;
}

.content-page:has(.features-z) .content-article > *:not(.features-z, .ds-cta-card) {
    max-width: 720px;
    margin-inline: auto;
}



.features-z {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
    
}

div.features-z {
    margin-top: 0;
}

.fz-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    margin-bottom: var(--space-xl);
}

/* DOM order: copy | media → text left, image right (items 1, 3)
   Even items flip so image goes left, text goes right (items 2, 4) */
.fz-item:nth-child(even) .fz-media { order: -1; }

.fz-media img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    display: block;
}

.fz-copy h2,
.fz-copy h3 {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.fz-copy p {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: var(--space-md);
}

.fz-copy ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.fz-copy ul li {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    margin-bottom: 0.55rem;
    font-size: 0.95rem;
    color: #3c4a3d;
    list-style: none;
    margin-left: 0;
}

.fz-copy ul li strong{
    min-width: 140px;
    padding-right: 5px;
}

.fz-copy ul li .bi {
    font-size: 1rem;
    color: var(--color-primary);
    flex-shrink: 0;
    position: relative;
    top: 0.1em;
}

input#customAmount{
    padding: 5px;
    width: 100%;
}

@media (max-width: 900px) {
    .fz-item {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    /* Reset flip on mobile — image always follows copy */
    .fz-item:nth-child(even) .fz-media { order: 0; }
}