/* ============================================================
   CONTENT PAGES (2026-10-21). Guides drawn in the home page's section
   style, generated by tools/build-content-page.py from one Markdown file
   per page (layout: tools/content_pages.py). Built on v8.css: .wrap,
   .sec-eyebrow, .sec-title, .sec-lede, .hero-title, .btn, .grid-band and
   .grow-cta all come from there; this file adds only the blocks a guide
   needs. Every section opens like a home section (eyebrow, title, lede)
   and stands on the same 112px rhythm with a hairline between sections.
   ============================================================ */

.cp-page { --cp-card-shadow: 0 1px 2px rgba(22, 18, 26, 0.04), 0 22px 44px -30px rgba(22, 18, 26, 0.26); --cp-link: #3D5BD9; }

/* ---------- sections ---------- */
.cp-sec { padding: 112px 0; border-top: 1px solid var(--line); scroll-margin-top: 64px; }
@media (max-width: 767px) { .cp-sec { padding: 72px 0; } }
/* a guide's titles are questions, longer than the home page's two-row
   statements, so they sit one step smaller */
.cp-sec .sec-title { font-size: clamp(2.25rem, 4.4vw, 3.75rem); max-width: 17em; }
@media (max-width: 639.98px) { .cp-sec .sec-title { font-size: 1.875rem; } }
.cp-sec .sec-head { margin-bottom: 0; }
.cp-body { margin-top: 56px; display: flex; flex-direction: column; gap: 48px; }
@media (max-width: 767px) { .cp-body { margin-top: 40px; gap: 36px; } }

.cp-page a:not(.btn) { text-underline-offset: 3px; }
.cp-prose a, .cp-lede a, .cp-leadin a, .cp-card a, .cp-check a, .cp-faq a, .cp-sources a, .cp-dl a, .cp-path a { color: var(--cp-link); }
.cp-prose a:hover, .cp-lede a:hover, .cp-leadin a:hover, .cp-faq a:hover, .cp-sources a:hover { color: #2A44B8; }

/* running text keeps the blog's measure, inside the wide section */
.cp-prose { max-width: 46em; margin: 0 auto; width: 100%; font-size: 1.125rem; line-height: 1.7; }
.cp-prose strong { color: var(--ink); }
.cp-prose code, .cp-leadin code, .cp-card code, .cp-check code, .cp-faq code {
    padding: 1px 6px; border-radius: 6px; background: #F6F1EE; border: 1px solid #EAE2DD;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; color: var(--ink);
}

/* a lead-in travels with the block it introduces */
.cp-group { display: flex; flex-direction: column; gap: 20px; }
.cp-leadin { max-width: 46em; margin: 0 auto; width: 100%; font-size: 1.125rem; line-height: 1.7; }
.cp-leadin.is-label { text-align: center; font-weight: 650; color: var(--ink); }

/* ---------- hero ---------- */
.cp-hero { padding: 64px 0 88px; }
.cp-hero .cp-hero-title { width: auto; max-width: 13em; font-size: clamp(2.25rem, 6.2vw, 5.25rem); text-wrap: balance; }
.cp-hero-desc {
    margin-top: 26px; max-width: 46em;
    font-size: 1.375rem; line-height: 1.55; color: var(--body); text-wrap: pretty;
}
@media (max-width: 639.98px) { .cp-hero-desc { font-size: 1.125rem; } }
/* the home hero holds its buttons back for its own animation; a guide does not */
.cp-hero .hero-cta-row { opacity: 1; transform: none; animation: none; }
.cp-byline { margin-top: 18px; font-size: 0.875rem; color: var(--muted); }
.cp-byline a { color: var(--ink); text-decoration: none; font-weight: 650; }
.cp-byline a:hover { text-decoration: underline; }

.cp-toc { margin: 64px auto 0; max-width: 1136px; }
.cp-toc-intro { max-width: 44em; margin: 0 auto 22px; text-align: center; font-size: 1.0625rem; }
.cp-toc ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cp-toc a {
    display: flex; flex-direction: column; gap: 8px; height: 100%;
    padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
    text-decoration: none; color: var(--ink); font-size: 0.9375rem; font-weight: 650; line-height: 1.35;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.cp-toc a span { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; color: var(--pink-deep); }
.cp-toc a:hover { transform: translateY(-1px); border-color: #DCCFD9; box-shadow: var(--shadow-low); }
@media (max-width: 1023px) { .cp-toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639.98px) {
    .cp-toc { margin-top: 44px; }
    .cp-toc-intro { text-align: left; margin-left: 0; }
    .cp-toc ol { grid-template-columns: 1fr; gap: 8px; }
    .cp-toc a { flex-direction: row; align-items: baseline; gap: 12px; padding: 12px 14px; }
}

/* ---------- definition ---------- */
.cp-def {
    max-width: 920px; margin: 0 auto; width: 100%;
    padding: 30px 36px 32px; border-radius: 24px; background: #fff;
    border: 1px solid var(--line); box-shadow: var(--cp-card-shadow);
    position: relative; overflow: hidden;
}
.cp-def::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-magenta); }
.cp-def-k { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-deep); }
.cp-def-t { margin-top: 12px; font-size: 1.375rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
@media (max-width: 639.98px) { .cp-def { padding: 22px 22px 24px; } .cp-def-t { font-size: 1.125rem; } }

/* ---------- cards ---------- */
.cp-cards {
    list-style: none; padding: 0; margin: 0 auto; width: 100%; max-width: 1136px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
@media (min-width: 1100px) { .cp-cards { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .cp-cards { grid-template-columns: 1fr; gap: 12px; } }
.cp-card {
    padding: 24px 24px 26px; border-radius: 20px; background: #fff;
    border: 1px solid var(--line); box-shadow: var(--cp-card-shadow);
}
.cp-card h3 { margin-top: 18px; font-size: 1.125rem; font-weight: 780; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.cp-card h3 a { color: inherit; text-decoration: none; }
.cp-card h3 a::after { content: " \2192"; color: var(--pink-deep); }
.cp-card h3 a:hover { color: var(--pink-deep); }
.cp-card p { margin-top: 8px; font-size: 0.96875rem; line-height: 1.6; }
.cp-ico {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
    background: var(--pink-wash); color: var(--pink-deep); flex: none;
}
.cp-ico svg { width: 22px; height: 22px; }

/* examples: what starts each one, as a chip */
.cp-trig {
    display: inline-flex; align-items: flex-start; gap: 7px; margin-top: 12px !important;
    padding: 6px 11px 6px 9px; border-radius: 10px; background: var(--soft);
    font-size: 0.875rem !important; font-weight: 650; line-height: 1.45 !important; color: var(--ink);
}
.cp-trig svg { width: 14px; height: 14px; margin-top: 3px; flex: none; fill: var(--brand-orange); }

/* ---------- numbered steps ---------- */
.cp-steps {
    list-style: none; padding: 0; margin: 0 auto; width: 100%; max-width: 1136px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.cp-step { position: relative; padding: 24px 24px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--cp-card-shadow); }
.cp-step-n {
    display: inline-grid; place-items: center; min-width: 38px; height: 28px; padding: 0 8px; border-radius: 999px;
    background: var(--ink); color: #fff; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em;
}
.cp-step h3 { margin-top: 16px; font-size: 1.125rem; font-weight: 780; line-height: 1.3; color: var(--ink); }
.cp-step p { margin-top: 8px; font-size: 0.96875rem; line-height: 1.6; }
.cp-step a { color: var(--cp-link); }
@media (max-width: 1023px) { .cp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .cp-steps { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- the loop: four steps, and the way back to the first ---------- */
.cp-loop { position: relative; max-width: 1136px; margin: 0 auto; width: 100%; padding-bottom: 54px; }
.cp-loop ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.cp-loop-i {
    position: relative; padding: 24px 22px 26px; border-radius: 20px; background: #fff;
    border: 1px solid var(--line); box-shadow: var(--cp-card-shadow);
}
.cp-loop-i + .cp-loop-i::before {
    content: ''; position: absolute; left: -29px; top: 40px; width: 22px; height: 2px; background: #CDBFCB;
}
.cp-loop-i + .cp-loop-i::after {
    content: ''; position: absolute; left: -11px; top: 36px;
    border: 5px solid transparent; border-left: 7px solid #CDBFCB; border-right: 0;
}
.cp-loop-n {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--pink-wash); color: var(--pink-deep); font-size: 0.875rem; font-weight: 800;
    box-shadow: inset 0 0 0 1px #F3C9F3;
}
.cp-loop-i h3 { margin-top: 16px; font-size: 1.125rem; font-weight: 780; color: var(--ink); }
.cp-loop-i p { margin-top: 8px; font-size: 0.96875rem; line-height: 1.6; }
.cp-loop-back {
    position: absolute; left: 12.5%; right: 12.5%; bottom: 10px; height: 44px;
    border: 2px dashed #D9C8D6; border-top: 0; border-radius: 0 0 26px 26px;
}
.cp-loop-back::before {
    content: ''; position: absolute; left: -7px; top: -9px;
    border: 6px solid transparent; border-bottom: 8px solid #D9C8D6; border-top: 0;
}
@media (max-width: 1023px) {
    .cp-loop { padding-bottom: 0; padding-left: 34px; }
    .cp-loop ol { grid-template-columns: 1fr; gap: 14px; }
    .cp-loop-i + .cp-loop-i::before, .cp-loop-i + .cp-loop-i::after { display: none; }
    .cp-loop-back {
        left: 0; right: auto; top: 30px; bottom: 30px; width: 22px; height: auto;
        border: 2px dashed #D9C8D6; border-right: 0; border-radius: 22px 0 0 22px;
    }
    .cp-loop-back::before { left: auto; right: -7px; top: -7px; border: 6px solid transparent; border-left: 8px solid #D9C8D6; border-right: 0; }
}

/* ---------- comparison: one panel, the agentic column picked out ---------- */
.cp-compare {
    max-width: 1136px; margin: 0 auto; width: 100%;
    border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--cp-card-shadow); overflow: hidden;
}
.cp-compare table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cp-compare th, .cp-compare td { padding: 18px 22px; text-align: left; vertical-align: top; font-size: 1rem; line-height: 1.5; }
.cp-compare tbody tr > * { border-top: 1px solid var(--line); }
.cp-compare thead th {
    padding-top: 22px; padding-bottom: 16px;
    font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.cp-compare tbody th { width: 20%; font-weight: 750; color: var(--ink); }
.cp-compare thead th:first-child { width: 20%; }
.cp-compare .is-hi { background: var(--pink-wash); color: var(--ink); }
.cp-compare thead .is-hi { color: var(--pink-deep); }
.cp-compare tbody .is-hi { font-weight: 600; }
@media (max-width: 767px) {
    .cp-compare { border-radius: 20px; }
    .cp-compare table, .cp-compare tbody, .cp-compare tr, .cp-compare th, .cp-compare td { display: block; width: auto !important; }
    .cp-compare thead { display: none; }
    .cp-compare tbody tr { padding: 18px 18px 16px; }
    .cp-compare tbody tr + tr { border-top: 1px solid var(--line); }
    .cp-compare tbody tr > * { border-top: 0; padding: 4px 0; font-size: 0.96875rem; }
    .cp-compare tbody th { padding-bottom: 8px; font-size: 1.0625rem; }
    .cp-compare td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ink); }
    .cp-compare td.is-hi { margin-top: 6px; padding: 8px 12px; border-radius: 10px; }
}

/* ---------- the file ---------- */
.cp-file {
    margin: 0; border-radius: 20px; background: #fff; border: 1px solid var(--line);
    box-shadow: var(--cp-card-shadow); overflow: hidden;
}
.cp-file-bar {
    display: flex; align-items: center; gap: 7px; padding: 12px 16px;
    background: #F6F7F9; border-bottom: 1px solid #E8EAEE;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; color: #6B7280;
}
.cp-file-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E2E4E9; }
.cp-file-bar span { margin-left: 8px; font-weight: 700; color: var(--ink); }
.cp-file pre {
    margin: 0; padding: 20px 22px 22px; overflow-x: auto; white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; line-height: 1.7; color: #374151;
}
.cp-file .cp-h { font-weight: 700; color: var(--ink); }
.cp-file .cp-h i { font-style: normal; color: var(--brand-magenta); }
.cp-file b { color: var(--ink); }
.cp-file .cp-fm { color: #8B94A3; }

/* ---------- two blocks side by side ---------- */
.cp-pair {
    max-width: 1136px; margin: 0 auto; width: 100%;
    display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 40px; align-items: start;
}
.cp-pair .cp-leadin { margin: 0; text-align: left; font-size: 1.0625rem; font-weight: 650; color: var(--ink); }
.cp-pair .cp-leadin code { white-space: nowrap; }
@media (max-width: 1023px) { .cp-pair { grid-template-columns: 1fr; } }
.cp-dl { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.cp-dl li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.55; }
.cp-dl strong { color: var(--ink); font-weight: 780; }
@media (max-width: 639.98px) { .cp-dl li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- checks ---------- */
.cp-checks { list-style: none; padding: 0; margin: 0 auto; width: 100%; max-width: 920px; display: grid; gap: 12px; }
.cp-check {
    display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
    padding: 20px 24px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--cp-card-shadow);
}
.cp-check h3 { font-size: 1.0625rem; font-weight: 780; color: var(--ink); line-height: 1.35; margin-top: 2px; }
.cp-check p { margin-top: 4px; font-size: 0.96875rem; line-height: 1.6; }
@media (max-width: 639.98px) { .cp-check { grid-template-columns: 1fr; gap: 12px; padding: 18px 18px 20px; } }

/* ---------- the test: one question, two answers ---------- */
.cp-test { max-width: 1040px; margin: 0 auto; width: 100%; text-align: center; }
.cp-test-k { font-size: 1.0625rem; color: var(--muted); font-weight: 600; }
.cp-test-q {
    margin: 10px auto 0; max-width: 28em;
    font-size: clamp(1.375rem, 2.5vw, 2rem); font-weight: 760; line-height: 1.3; letter-spacing: -0.015em;
    color: var(--ink); text-wrap: balance;
}
.cp-paths {
    list-style: none; padding: 52px 0 0; margin: 0; position: relative;
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left;
}
/* the fork from the question down to each answer */
.cp-paths::before {
    content: ''; position: absolute; top: 18px; left: 25%; right: 25%; height: 34px;
    border: 2px solid #DCCFD9; border-bottom: 0; border-radius: 18px 18px 0 0;
}
.cp-paths::after { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 18px; background: #DCCFD9; }
.cp-path {
    padding: 24px 26px 26px; border-radius: 20px; background: #fff;
    border: 1px solid var(--line); box-shadow: var(--cp-card-shadow);
    font-size: 1.0625rem; line-height: 1.6;
}
.cp-path.is-hi { background: var(--pink-wash); border-color: #F3C9F3; color: var(--ink); }
@media (max-width: 767px) {
    .cp-paths { grid-template-columns: 1fr; padding-top: 28px; gap: 12px; }
    .cp-paths::before { display: none; }
    .cp-paths::after { height: 22px; }
}

/* ---------- FAQ ---------- */
.cp-faq { max-width: 880px; margin: 0 auto; width: 100%; border-top: 1px solid var(--line); }
.cp-faq-i { border-bottom: 1px solid var(--line); }
.cp-faq summary { list-style: none; cursor: pointer; position: relative; padding: 22px 48px 22px 0; }
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary h3 { font-size: 1.1875rem; font-weight: 740; line-height: 1.4; color: var(--ink); }
.cp-faq summary::after {
    content: ''; position: absolute; right: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
    border-radius: 50%; background: var(--soft) center / 12px 12px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%2316121A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    transition: transform var(--t-ui);
}
.cp-faq details[open] summary::after { transform: rotate(45deg); }
.cp-faq summary:hover h3 { color: var(--pink-deep); }
.cp-faq-i p { padding: 0 48px 24px 0; font-size: 1.0625rem; line-height: 1.7; }

/* ---------- sources ---------- */
.cp-sec--sources { padding: 72px 0 80px; }
.cp-sec--sources .sec-title { font-size: 1.75rem; }
.cp-sources { list-style: none; padding: 0; margin: 0 auto; width: 100%; max-width: 880px; display: grid; gap: 10px; font-size: 0.96875rem; line-height: 1.55; }
.cp-sources li { padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.cp-sec--sources .cp-body { margin-top: 32px; }

/* ---------- the two animations, copied from the home page ---------- */
.cp-fig { margin: 8px 0 0; }
.cp-fig figcaption { margin-top: 18px; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.cp-pmx.pmx { padding: 0; border-top: 0; }