/* Used only by the six product and editorial subpages. */
.seo-page { background:#f7f9fc }
.seo-page .hero { padding:2.5rem 0 4rem }
.seo-page h1 { font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.08;letter-spacing:-.035em }
.seo-page h2 { font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:-.02em }
.seo-page h3 { font-size:1.05rem;line-height:1.4 }
.seo-page .main-nav { position:static;display:flex;flex-direction:row;flex-wrap:wrap;width:auto;background:transparent;border:0;box-shadow:none;padding:0;align-items:center }
.breadcrumbs { padding-top:1.4rem;color:var(--muted);font-size:.85rem }
.breadcrumbs span { margin-left:.35rem }
.topic-hero { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:3rem;align-items:start }
.topic-hero .lead { max-width:60ch;font-size:1.12rem }
.hero-panel { background:white;border:1px solid var(--line);border-radius:18px;padding:1.5rem;box-shadow:0 15px 40px #12385c0a }
.panel-label { display:block;color:var(--muted);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem }
.hero-panel h2 { font-size:1.5rem }
.reading-layout { display:grid;grid-template-columns:210px minmax(0,1fr);gap:3.5rem;align-items:start }
.page-toc { position:sticky;top:100px;padding:.5rem 0 1rem }
.page-toc p { text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;font-weight:700;color:var(--muted) }
.page-toc a { display:block;border-left:2px solid var(--line);padding:.55rem .9rem;text-decoration:none;font-size:.9rem;line-height:1.4 }
.page-toc a:hover { background:#e9f0f7;border-color:var(--brand) }
.page-content { min-width:0 }
.content-section { padding:0 0 3rem;margin-bottom:2.5rem;border-bottom:1px solid var(--line);scroll-margin-top:100px }
.content-section > p { max-width:75ch }
.topic-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.5rem 0 }
.topic-card { padding:1.2rem;border:1px solid var(--line);border-radius:12px;background:white }
.topic-card p { margin-bottom:0;font-size:.94rem }
.workflow { list-style:none;padding:0;counter-reset:step;margin:1.2rem 0 }
.workflow li { counter-increment:step;position:relative;padding:0 0 1.35rem 3rem }
.workflow li:last-child { padding-bottom:0 }
.workflow li::before { content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;color:var(--brand);background:#eaf2fa;border-radius:8px;padding:.25rem .45rem;font-size:.82rem;font-weight:700 }
.workflow h3 { margin:0 0 .3rem }
.workflow p { margin:0 }
.code-example { border:1px solid #284866;border-radius:12px;overflow:hidden;margin:1.25rem 0;background:#10253f;color:#e4effa }
.code-heading { display:flex;gap:1rem;justify-content:space-between;align-items:center;padding:.7rem 1rem;background:#193653;font-size:.8rem }
.copy-code { border:1px solid #7194b5;background:transparent;color:white;border-radius:5px;padding:.25rem .7rem;cursor:pointer;font:inherit }
.seo-page .code-example pre { background:transparent;color:inherit;margin:0;padding:1.2rem;border:0;border-radius:0;overflow:auto;max-height:36rem;font-size:.84rem;line-height:1.65 }
.seo-page .code-example code { background:transparent;color:inherit;padding:0 }
.seo-page code { overflow-wrap:anywhere }
.callout { background:#eaf2fa;border-left:3px solid var(--brand);border-radius:0 10px 10px 0;padding:1.2rem 1.4rem;margin:1.5rem 0 }
.callout p { margin:.4rem 0 0 }
.field-list > div { padding:1rem 0;border-bottom:1px solid var(--line) }
.field-list dt { font-weight:700;margin-bottom:.35rem }
.field-list dd { margin:0 }
.questions details { padding:1rem 0;border-bottom:1px solid var(--line) }
.questions summary { cursor:pointer;font-weight:600 }
.questions p { margin-bottom:0 }
.table-scroll { overflow-x:auto }
.table-scroll table { width:100%;border-collapse:collapse;font-size:.94rem }
.table-scroll caption { text-align:left;color:var(--muted);margin-bottom:.8rem }
.table-scroll th,.table-scroll td { padding:1rem;text-align:left;border:1px solid var(--line);vertical-align:top;min-width:140px }
.table-scroll thead { background:#eaf2fa }
.caption { font-size:.82rem;color:var(--muted) }
.invoice-preview { display:block;text-align:center;background:#edf1f6;border:1px solid var(--line);border-radius:8px;padding:.7rem }
.invoice-preview img { display:block;width:auto;max-width:100%;height:auto;max-height:300px;margin:auto;box-shadow:0 4px 15px #10253f1a }
.event-tag { display:inline-block;background:#e2f3ef;color:#175a4a;padding:.4rem .7rem;font-family:monospace;border-radius:6px }
.muted-tag { background:#f7eee5;color:#744515 }
.data-flow { display:grid;gap:.6rem;text-align:center }
.data-flow span,.data-flow strong { border:1px solid var(--line);padding:.65rem;border-radius:7px }
.data-flow strong { background:#eaf2fa;color:var(--brand) }
.article-flow { border:1px solid var(--line);border-radius:12px;padding:.4rem 1.4rem;background:white }
.next-step { background:#eaf2fa;border:1px solid #cbddee;border-radius:16px;padding:2rem;margin-bottom:4rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;align-items:center }
.next-step h2 { margin-bottom:.7rem }
.next-step p:last-child { margin-bottom:0 }
.skip-link { position:fixed;top:-100px;left:1rem;z-index:100;background:white;padding:.7rem 1rem }
.skip-link:focus { top:1rem }
.seo-page :focus-visible { outline:3px solid #137bbc;outline-offset:4px }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
@media(max-width:960px) { .reading-layout { grid-template-columns:170px minmax(0,1fr);gap:2rem } .topic-grid { grid-template-columns:1fr } .topic-hero { gap:1.5rem } }
@media(max-width:760px) { .seo-page .nav-row { flex-wrap:wrap;padding:1rem 0;gap:.75rem } .seo-page .main-nav { gap:.8rem;font-size:.85rem } .seo-page .main-nav .nav-login { width:auto } .topic-hero,.reading-layout { grid-template-columns:1fr } .seo-page .hero { padding:2rem 0 } .page-toc { position:static;border-bottom:1px solid var(--line) } .page-toc a { display:inline-block;padding:.5rem .7rem;margin-bottom:.4rem } .content-section { scroll-margin-top:150px;padding-bottom:2rem;margin-bottom:2rem } .next-step { padding:1.4rem } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } .seo-page .button { transition:none } }