/* Product and customer pages. Loaded only by the non-blog pages in this upgrade. */
.sp-page { --sp-paper: #f4f7fb; --sp-ink: #0f172a; --sp-muted: #475569; --sp-blue: #1659b7; --sp-line: #d8dee6; --sp-heading: 'Space Grotesk', 'IBM Plex Sans', sans-serif; margin: 0; background: var(--sp-paper); color: var(--sp-ink); font: 400 16px/1.65 'IBM Plex Sans', sans-serif; }
.sp-page *, .sp-page *::before, .sp-page *::after { box-sizing: border-box; }
.sp-page :is(h1,h2,h3,h4,p,figure) { margin: 0; }
.sp-page :is(h1,h2,h3,h4) { font-family: var(--sp-heading); font-weight: 500; line-height: 1.2; letter-spacing: -.04em; text-wrap: balance; }
.sp-page h1 { font-size: clamp(36px,4.3vw,58px); }
.sp-page h2 { font-size: 30px; }
.sp-page h3 { font-size: 21px; }
.sp-page a { color: inherit; text-decoration: none; }
.sp-page img { display: block; max-width: 100%; height: auto; }
.sp-page :is(button,input,select) { font: inherit; }
.sp-page button { cursor: pointer; }
.sp-page [hidden] { display: none !important; }
.sp-page :focus-visible { outline: 3px solid var(--sp-blue); outline-offset: 4px; }
.sp-page :is(section,article,[id]) { scroll-margin-top: 112px; }
.sp-page ::selection { background: #c9d7ef; color: #0f172a; }
.sp-page .skip-link { position: fixed; top: -90px; left: 20px; z-index: 100; padding: 12px 18px; background: var(--sp-ink); color: #fff; border-radius: 6px; }
.sp-page .skip-link:focus { top: 12px; }
.sp-container { width: min(1240px,calc(100% - 96px)); margin-inline: auto; }
.sp-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-block: 28px 24px; font-size: 12px; color: #64748b; }
.sp-breadcrumb a:hover { color: var(--sp-blue); text-decoration: underline; }
.sp-breadcrumb > span[aria-hidden] { color: #a5afbd; }
.sp-kicker { display: flex; align-items: center; gap: 9px; color: #173b75; font: 500 11px/1.5 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .07em; }
.sp-kicker::before { content: ''; width: 6px; height: 6px; background: currentColor; flex: 0 0 auto; }
.sp-kicker:has(svg)::before { display: none; }
.sp-kicker .sp-icon { width: 19px; height: 19px; }
.sp-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sp-lead { color: var(--sp-muted); font-size: 16px; line-height: 1.75; max-width: 62ch; }
.sp-caption { color: #64748b; font-size: 12px; }
.sp-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 48px; padding: 12px 20px; border: 1px solid var(--sp-ink); border-radius: 6px; background: var(--sp-ink); color: #fff !important; font-weight: 500; font-size: 14px; line-height: 1.3; transition: background .15s,border-color .15s; }
.sp-button:hover { background: #26364d; border-color: #26364d; }
.sp-button-quiet { background: #fff; color: var(--sp-ink) !important; border-color: #cbd5e1; }
.sp-button-quiet:hover { background: #edf2f9; border-color: #9aaec8; }
.sp-button:disabled { cursor: wait; opacity: .7; }
.sp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.sp-text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--sp-blue) !important; font-size: 13px; font-weight: 500; text-decoration: underline !important; text-underline-offset: 5px; }
.sp-text-link .sp-icon { width: 16px; height: 16px; }
.sp-page-heading { padding: 16px 0 42px; }
.sp-page-heading h1 { margin: 18px 0; max-width: 20ch; }
.sp-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 28px; }
.sp-section-heading .sp-kicker { margin-bottom: 14px; }
.sp-checks { list-style: none; padding: 0; margin: 24px 0 0; }
.sp-checks li { display: flex; align-items: start; gap: 11px; font-size: 14px; color: var(--sp-muted); }
.sp-checks li + li { margin-top: 15px; }
.sp-checks .sp-icon { width: 17px; height: 17px; color: var(--sp-blue); margin-top: 3px; }
.sp-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.sp-facts span { border: 1px solid var(--sp-line); border-radius: 4px; padding: 6px 10px; font: 400 11px/1.4 'IBM Plex Mono', monospace; color: #526176; }
/* Pricing: the purchase action comes before the detailed feature list. */
.sp-pricing-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.75fr); gap: 80px; align-items: center; padding: 18px 0 55px; }
.sp-pricing-copy h1 { max-width: 21ch; margin: 19px 0; font-size: clamp(40px,4.3vw,57px); }
.sp-price-card { padding: 30px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; box-shadow: 0 16px 45px rgba(15,23,42,.045); }
.sp-price-amount { display: flex; align-items: baseline; gap: 16px; margin-top: 15px; }
.sp-price-amount strong { font: 500 74px/1 var(--sp-heading); letter-spacing: -.06em; }
.sp-price-amount span { font-size: 13px; color: #64748b; }
.sp-price-card > p:not(.sp-kicker) { margin-top: 14px; color: var(--sp-muted); font-size: 13px; }
.sp-price-card form { margin-top: 23px; }
.sp-price-card .sp-button { width: 100%; }
.sp-price-card .sp-price-legal { font-size: 11px !important; line-height: 1.7; }
.sp-price-legal a, .sp-inline-links a { color: var(--sp-blue); text-decoration: underline; text-underline-offset: 3px; }
.sp-price-facts { display: grid; gap: 8px; margin: 18px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--sp-line); color: #526176; font-size: 12px; }
.sp-price-facts li { display: flex; align-items: center; gap: 9px; }
.sp-price-facts .sp-icon { width: 15px; height: 15px; color: var(--sp-blue); }
.sp-inclusions { padding: 45px 0 48px; border-top: 1px solid var(--sp-line); }
.sp-inclusion-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.sp-inclusion { padding: 25px; background: #fff; border: 1px solid var(--sp-line); border-radius: 8px; }
.sp-inclusion > .sp-icon { color: var(--sp-blue); margin-bottom: 16px; }
.sp-inclusion h3 { font-size: 21px; }
.sp-inclusion p { color: var(--sp-muted); font-size: 13px; margin: 12px 0 17px; }
.sp-inclusion-compare { background: var(--sp-ink); color: #fff; }
.sp-inclusion-compare p { color: #b7c5d8; }
.sp-inclusion-compare > .sp-icon, .sp-inclusion-compare .sp-text-link { color: #b8d3fc !important; }
.sp-faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; padding: 42px 0 60px; }
.sp-faq-heading h2 { margin: 15px 0; }
.sp-faq-heading p:not(.sp-kicker) { color: var(--sp-muted); font-size: 14px; margin-bottom: 20px; }
.sp-faq-items { border-top: 1px solid var(--sp-line); }
.sp-faq-items details { border-bottom: 1px solid var(--sp-line); }
.sp-faq-items summary { cursor: pointer; list-style: none; position: relative; padding: 20px 30px 20px 0; font-size: 15px; font-weight: 500; }
.sp-faq-items summary::-webkit-details-marker { display: none; }
.sp-faq-items summary::after { content: '+'; position: absolute; right: 0; top: 15px; color: var(--sp-blue); font-size: 23px; }
.sp-faq-items details[open] summary::after { content: '−'; }
.sp-faq-items p { font-size: 14px; color: var(--sp-muted); padding-bottom: 23px; }
.sp-faq-items a { color: var(--sp-blue); text-decoration: underline; text-underline-offset: 3px; }
.sp-bottom-band { display: flex; justify-content: space-between; align-items: center; gap: 35px; border: 1px solid var(--sp-line); border-radius: 8px; padding: 30px; background: #eef3f8; margin-bottom: 60px; }
.sp-bottom-band h2 { font-size: 26px; }
.sp-bottom-band p { margin-top: 8px; color: var(--sp-muted); font-size: 13px; }
.sp-bottom-band .sp-button { flex: 0 0 auto; }
.sp-notice { padding: 16px 20px; background: #edf3fc; border-left: 3px solid var(--sp-blue); font-size: 14px; margin-bottom: 24px; }
/* License lookup and support. */
.sp-manage-intro { max-width: 700px; padding: 6px 0 29px; }
.sp-manage-intro h1 { margin: 15px 0; font-size: clamp(36px,4vw,49px); }
.sp-manage-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.75fr); gap: 40px; align-items: start; margin-bottom: 60px; }
.sp-account-card { padding: 30px; background: #fff; border: 1px solid #cbd5e1; border-radius: 9px; }
.sp-account-card h2 { font-size: 24px; margin-bottom: 10px; }
.sp-account-card > p { color: var(--sp-muted); font-size: 14px; }
.sp-email-form { margin-top: 25px; }
.sp-email-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.sp-email-row { display: flex; gap: 10px; }
.sp-email-row input { min-width: 0; width: 100%; flex: 1; min-height: 49px; border: 1px solid #b8c3d3; border-radius: 5px; padding: 11px 13px; color: var(--sp-ink); background: #fff; }
.sp-email-row .sp-button { flex: 0 0 auto; }
.sp-email-form .sp-caption { margin-top: 10px; }
.sp-account-note { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--sp-line); font-size: 12px !important; }
.sp-manage-help { padding: 26px 28px; background: #eef3f8; border: 1px solid var(--sp-line); border-radius: 9px; }
.sp-help-item + .sp-help-item { margin-top: 23px; padding-top: 22px; border-top: 1px solid #ced7e4; }
.sp-help-item h2 { font-size: 20px; margin-bottom: 10px; }
.sp-help-item p { font-size: 13px; color: var(--sp-muted); margin-bottom: 12px; }
.sp-message { margin-top: 20px !important; padding: 12px 14px; background: #eef3f8; border: 1px solid #cad9ed; border-radius: 5px; font-size: 13px; color: #173b75 !important; }
.sp-message[data-tone="error"] { background: #fff3f0; border-color: #ebc9c0; color: #8b392a !important; }
.sp-message[data-tone="success"] { background: #edf3fc; }
.sp-license-results { margin-top: 22px; display: grid; gap: 20px; }
.sp-license-results .license-status-card { border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; padding: 26px; }
.license-status-card-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.sp-page .resource-label { font: 500 11px/1.5 'IBM Plex Mono',monospace; color: #526176; text-transform: uppercase; }
.sp-page .status-pill { padding: 5px 10px; border-radius: 4px; border: 1px solid #bdcfe7; background: #edf3fc; color: #173b75; text-transform: capitalize; font-size: 12px; }
.sp-page .status-pill[data-tone="error"] { background: #fff3f0; color: #8b392a; border-color: #ebc9c0; }
.sp-page .license-status-card h3 { font-size: 24px; margin-bottom: 14px; }
.sp-page .license-status-card > p { color: var(--sp-muted); font-size: 13px; }
.sp-page .license-status-list { margin: 0; }
.sp-page .license-status-list > div { display: grid; grid-template-columns: 135px minmax(0,1fr); gap: 20px; padding: 10px 0; border-bottom: 1px solid #e4e9f0; font-size: 13px; }
.sp-page .license-status-list dt { color: #64748b; }
.sp-page .license-status-list dd { margin: 0; overflow-wrap: anywhere; }
.sp-page .license-status-note { margin-top: 15px; }
.sp-page .license-status-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sp-page .license-status-actions .sp-button { font-size: 12px; min-height: 40px; padding: 10px 12px; }
/* Workflow pages. */
.sp-feature-hero { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; gap: 50px; padding: 22px 0 57px; }
.sp-feature-copy h1 { font-size: clamp(34px,3.3vw,45px); line-height: 1.16; margin: 18px 0; }
.sp-feature-copy .sp-lead { font-size: 15px; }
.sp-feature-copy .sp-actions { margin-top: 25px; }
.sp-feature-copy .sp-caption { margin-top: 16px; }
.sp-feature-copy .sp-button { font-size: 13px; padding-inline: 15px; }
.sp-capture-frame { position: relative; padding: 16px; background: #e4ebf6; border: 1px solid #cdd8e7; border-radius: 10px; }
.sp-capture-frame img { width: 100%; border: 1px solid #334155; border-radius: 5px; box-shadow: 0 10px 24px rgba(15,23,42,.15); }
.sp-enlarge { position: absolute; right: 25px; bottom: 25px; display: flex; align-items: center; gap: 6px; background: #f4f7fb; color: var(--sp-ink); border: 1px solid #bdc8d6; border-radius: 4px; padding: 7px 10px; font-size: 11px !important; }
.sp-enlarge .sp-icon { width: 14px; height: 14px; }
.sp-capture figcaption { font: 400 10px/1.5 'IBM Plex Mono',monospace; color: #64748b; margin-top: 11px; }
.sp-feature-compare { padding: 38px; background: var(--sp-ink); color: #fff; border-radius: 12px; margin-top: 5px; margin-bottom: 20px; }
.sp-feature-compare .sp-kicker { color: #b9d3f6; }
.sp-feature-compare .sp-lead { color: #bac7d9; }
.sp-feature-compare .sp-caption, .sp-feature-compare figcaption { color: #a5b9d5; }
.sp-feature-compare .sp-button:not(.sp-button-quiet) { background: #d5e5fb; color: #15253e !important; border-color: #d5e5fb; }
.sp-feature-compare .sp-button-quiet { background: transparent; color: #dbe8fa !important; border-color: #586b85; }
.sp-feature-compare .sp-capture-frame { padding: 12px; background: #1c2a40; border-color: #40516b; }
.sp-workflow-body { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 45px 0 50px; border-top: 1px solid var(--sp-line); }
.sp-workflow-body h2 { margin-top: 15px; }
.sp-workflow-steps ol { padding: 0; margin: 25px 0; list-style: none; }
.sp-workflow-steps li { display: flex; align-items: start; gap: 17px; padding-block: 16px; border-bottom: 1px solid var(--sp-line); }
.sp-workflow-steps li:first-child { padding-top: 0; }
.sp-step-number { font: 500 11px/1.5 'IBM Plex Mono',monospace; color: var(--sp-blue); padding-top: 4px; }
.sp-workflow-steps p { color: var(--sp-muted); font-size: 14px; }
.sp-scope { padding: 25px 28px; border-left: 3px solid var(--sp-blue); background: #eaf0f9; margin-bottom: 35px; }
.sp-scope h2 { font-size: 22px; margin-bottom: 12px; }
.sp-scope p { color: var(--sp-muted); font-size: 14px; max-width: 96ch; }
.sp-next { display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; padding: 33px 0; border-block: 1px solid var(--sp-line); }
.sp-next h2 { font-size: 26px; margin-top: 13px; }
.sp-next-links { display: grid; }
.sp-next-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; font-size: 14px; border-bottom: 1px solid var(--sp-line); }
.sp-next-links a:last-child { border-bottom: 0; }
.sp-next-links a:hover { color: var(--sp-blue); }
.sp-related-guides { padding: 45px 0; }
.sp-related-guides h2 { font-size: 26px; }
.sp-guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.sp-guide-grid .seo-card { display: block; padding: 23px; background: #fff; border: 1px solid var(--sp-line); border-radius: 7px; }
.sp-guide-grid .seo-card > span { display: block; font: 500 10px/1.5 'IBM Plex Mono',monospace; text-transform: uppercase; color: #64748b; }
.sp-guide-grid .seo-card strong { display: block; font: 500 19px/1.35 var(--sp-heading); margin-top: 12px; }
.sp-guide-grid .seo-card p { font-size: 13px; color: var(--sp-muted); margin-top: 10px; }
.sp-guide-grid .seo-card:hover { border-color: #9eb4d2; }
.sp-other-tools { padding: 0 0 55px; }
.sp-other-tools h2 { font-size: 23px; margin-bottom: 20px; }
.sp-other-tools > div { display: flex; flex-wrap: wrap; gap: 9px; }
.sp-other-tools a { padding: 8px 12px; background: #eef3f8; border: 1px solid #ccd6e5; border-radius: 5px; font-size: 12px; }
.sp-other-tools a:hover { border-color: var(--sp-blue); color: var(--sp-blue); }
.sp-workflow-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; margin-bottom: 40px; }
.sp-workflow-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--sp-line); border-radius: 9px; background: #fff; }
.sp-card-top { display: flex; align-items: center; gap: 12px; color: var(--sp-blue); }
.sp-card-top span { font: 400 10px/1.5 'IBM Plex Mono',monospace; color: #64748b; }
.sp-card-top > .sp-icon:last-child { margin-left: auto; width: 17px; }
.sp-workflow-card h2 { font-size: 27px; margin-top: 25px; }
.sp-workflow-card p { color: var(--sp-muted); font-size: 14px; margin: 15px 0 25px; }
.sp-card-link { font-size: 12px; color: var(--sp-blue); margin-top: auto; }
.sp-workflow-card:hover { border-color: #9eb4d2; }
.sp-workflow-featured { grid-column: span 2; background: var(--sp-ink); color: #fff !important; }
.sp-workflow-featured :is(p,.sp-card-top span) { color: #b7c5d8; }
.sp-workflow-featured :is(.sp-card-top,.sp-card-link) { color: #bed6fa; }
.sp-workflow-featured h2 { font-size: 33px; }
.sp-workflow-featured p { max-width: 65ch; }
/* Honest illustrative examples, with the site's original blue palette. */
.sp-page .workflow-example { background: #fff; border: 1px solid #cbd5e1; border-radius: 9px; padding: 25px; }
.sp-page .example-label { font: 500 11px/1.5 'IBM Plex Mono',monospace; color: #526176; margin-bottom: 20px; }
.sp-page .translation-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-page .translation-pair > div { padding: 18px 13px; border-radius: 5px; background: #f2f5fa; }
.sp-page .translation-pair > div:last-child { background: #eaf1fd; }
.sp-page .translation-pair span, .sp-page .example-preserved > span { display: block; font-size: 11px; color: #64748b; margin-bottom: 7px; }
.sp-page .translation-pair p { color: #173b75; font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
.sp-page .example-preserved { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--sp-line); }
.sp-page .example-preserved code { color: #173b75; font: 400 12px/1.6 'IBM Plex Mono',monospace; overflow-wrap: anywhere; }
.sp-page .example-preserved p { color: var(--sp-muted); font-size: 12px; margin-top: 9px; }
.sp-page .example-caption { font-size: 10px; color: #64748b; margin-top: 17px; }
.sp-page .log-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 15px; }
.sp-page .log-inputs span { font-size: 11px; padding: 5px 9px; border-radius: 4px; color: #173b75; background: #eaf1fd; }
.sp-page .signal-example { width: 100%; height: auto; }
/* Payment outcomes. */
.sp-result { max-width: 980px; margin: 0 auto; padding-bottom: 55px; }
.sp-result-heading { padding: 32px; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; }
.sp-result-mark { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #bdcfe7; background: #edf3fc; color: var(--sp-blue); border-radius: 50%; margin-bottom: 20px; }
.sp-result-heading h1 { font-size: clamp(31px,3.5vw,43px); max-width: 23ch; margin: 14px 0; }
.sp-result-heading .sp-lead { font-size: 15px; max-width: 76ch; }
.sp-result-heading .sp-actions { margin-top: 23px; }
.sp-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.sp-result-panel { padding: 26px; background: #fff; border: 1px solid var(--sp-line); border-radius: 8px; }
.sp-result-panel h2 { font-size: 24px; margin-bottom: 22px; }
.sp-setup-steps { padding: 0; margin: 0; list-style: none; counter-reset: setup; }
.sp-setup-steps li { display: grid; grid-template-columns: 23px 1fr; gap: 5px 12px; counter-increment: setup; }
.sp-setup-steps li + li { margin-top: 23px; }
.sp-setup-steps li::before { content: '0' counter(setup); grid-row: span 2; font: 500 11px/1.6 'IBM Plex Mono',monospace; color: var(--sp-blue); margin-top: 3px; }
.sp-setup-steps strong { font-size: 14px; }
.sp-setup-steps p { color: var(--sp-muted); font-size: 13px; }
.sp-setup-steps a { color: var(--sp-blue); text-decoration: underline; }
.sp-package + .sp-package { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--sp-line); }
.sp-package h3 { font: 500 16px/1.4 'IBM Plex Sans',sans-serif; letter-spacing: 0; }
.sp-package > p { font-size: 12px; color: #64748b; margin: 4px 0 12px; }
.sp-package-control { display: flex; gap: 8px; }
.sp-package-control select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #b8c3d3; border-radius: 5px; color: var(--sp-ink); background: #fff; font-size: 12px; }
.sp-package .sp-button { min-height: 42px; padding: 10px 14px; font-size: 12px; flex: 0 0 auto; }
.sp-result-panel > .sp-caption { margin-top: 20px; }
.sp-result-footer { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-top: 24px; }
.sp-result-help { margin-top: 22px; padding: 22px 26px; background: #eaf0f9; border-radius: 6px; }
.sp-result-help h2 { font-size: 20px; margin-bottom: 10px; }
.sp-result-help p { color: var(--sp-muted); font-size: 13px; }
.sp-result-help a { color: var(--sp-blue); text-decoration: underline; }
/* Policies: preserve the actual terms while making long pages readable. */
.sp-policy-heading { max-width: 800px; padding: 8px 0 35px; }
.sp-policy-heading h1 { font-size: clamp(35px,4vw,50px); margin: 17px 0; }
.sp-policy-heading .sp-caption { margin-top: 13px; }
.sp-policy-layout { display: grid; grid-template-columns: 235px minmax(0,760px); gap: 60px; align-items: start; padding-bottom: 55px; }
.sp-policy-nav { position: sticky; top: 115px; max-height: calc(100dvh - 140px); overflow-y: auto; scrollbar-width: thin; border-top: 1px solid var(--sp-line); padding-top: 18px; font-size: 12px; }
.sp-policy-nav summary { font-weight: 500; font-size: 13px; }
.sp-policy-nav ol { list-style: none; padding: 0; margin: 15px 0 22px; display: grid; gap: 10px; }
.sp-policy-nav a { color: #526176; }
.sp-policy-nav a:hover { color: var(--sp-blue); text-decoration: underline; }
.sp-policy-switch { display: grid; gap: 10px; padding-top: 17px; border-top: 1px solid var(--sp-line); }
.sp-policy-prose { padding: 0 30px; background: #fff; border: 1px solid var(--sp-line); border-radius: 9px; }
.sp-policy-prose article { padding: 25px 0; }
.sp-policy-prose article + article { border-top: 1px solid #e0e6ef; }
.sp-policy-prose h2 { font-size: 23px; margin-bottom: 14px; }
.sp-policy-prose p { color: var(--sp-muted); font-size: 15px; line-height: 1.85; }
.sp-policy-prose p + p { margin-top: 14px; }
.sp-policy-prose a { color: var(--sp-blue); text-decoration: underline; text-underline-offset: 3px; }
/* Sitemap. */
.sp-directory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 35px; padding: 7px 0 45px; }
.sp-directory h2 { font-size: 23px; padding-bottom: 17px; border-bottom: 1px solid var(--sp-line); }
.sp-directory ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 11px; }
.sp-directory a { font-size: 14px; color: var(--sp-muted); }
.sp-directory a:hover { color: var(--sp-blue); text-decoration: underline; }
.sp-directory-wide { grid-column: 1 / -1; }
.sp-directory-wide ul { grid-template-columns: 1fr 1fr; column-gap: 40px; }
/* The footer follows the home page's proportions and original brand colour. */
.sp-footer { border-top: 1px solid var(--sp-line); padding: 46px 0 22px; }
.sp-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 50px; }
.sp-brand { display: flex; align-items: center; gap: 11px; font: 600 21px/1 var(--sp-heading); letter-spacing: -.8px; }
.sp-brand img { width: 35px; height: 35px; border-radius: 8px; }
.sp-footer-brand p { color: var(--sp-muted); font-size: 12px; margin-top: 15px; }
.sp-footer-column h2 { color: #788394; font: 500 11px/1.4 'IBM Plex Mono',monospace; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 15px; }
.sp-footer-column ul { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.sp-footer-column li + li { margin-top: 7px; }
.sp-footer a:hover { color: var(--sp-blue); text-decoration: underline; text-underline-offset: 3px; }
.sp-footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 35px; padding-top: 19px; border-top: 1px solid var(--sp-line); color: #788394; font: 400 10px/1.6 'IBM Plex Mono',monospace; }
.sp-footer-bottom > div { display: flex; flex-wrap: wrap; gap: 20px; }
.sp-capture-dialog { width: min(1500px,96vw); max-width: 96vw; max-height: 92vh; border: 1px solid #40516b; border-radius: 9px; padding: 20px; background: #0f172a; color: #e2e8f0; }
.sp-capture-dialog::backdrop { background: rgba(5,12,25,.8); }
.sp-capture-dialog form { display: flex; justify-content: end; margin: 0 0 15px; }
.sp-capture-dialog img { max-height: 73vh; object-fit: contain; width: 100%; }
.sp-capture-dialog p { font-size: 12px; margin-top: 14px; }
.sp-page:has(.sp-capture-dialog[open]) { overflow: hidden; }
@media (max-width:1120px) {
 .sp-container { width: calc(100% - 64px); }
 .sp-pricing-hero { gap: 40px; }
 .sp-feature-hero { gap: 30px; }
 .sp-feature-compare { padding: 28px; }
 .sp-feature-copy h1 { font-size: 35px; }
 .sp-policy-layout { gap: 35px; grid-template-columns: 210px minmax(0,1fr); }
 .sp-footer-grid { gap: 30px; }
}
@media (max-width:900px) {
 .sp-feature-hero { grid-template-columns: 1fr; gap: 30px; }
 .sp-feature-copy { max-width: 680px; }
 .sp-feature-copy h1 { font-size: 42px; }
 .sp-feature-visual { max-width: 760px; width: 100%; }
 .sp-workflow-body { gap: 35px; }
 .sp-manage-layout { gap: 22px; grid-template-columns: 1fr; }
 .sp-manage-help { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
 .sp-help-item + .sp-help-item { margin: 0; padding: 0; border: 0; }
 .sp-inclusion-grid { grid-template-columns: 1fr 1fr; }
 .sp-workflow-cards { grid-template-columns: 1fr 1fr; }
 .sp-workflow-featured { grid-column: 1 / -1; }
 .sp-policy-layout { grid-template-columns: 1fr; gap: 25px; }
 .sp-policy-nav { position: static; max-height: none; overflow: visible; border: 1px solid var(--sp-line); padding: 15px 20px; border-radius: 6px; background: #edf2f9; }
 .sp-policy-nav summary { cursor: pointer; }
 .sp-policy-nav ol { grid-template-columns: 1fr 1fr; gap: 9px 25px; }
 .sp-policy-switch { display: flex; flex-wrap: wrap; gap: 20px; }
 .sp-directory { grid-template-columns: 1fr 1fr; }
}
@media (max-width:760px) {
 .sp-pricing-hero { grid-template-columns: 1fr; gap: 26px; padding-top: 8px; padding-bottom: 38px; }
 .sp-pricing-copy h1 { font-size: 46px; }
 .sp-price-card { padding: 25px; }
 .sp-faq { grid-template-columns: 1fr; gap: 25px; padding-top: 20px; }
 .sp-result-grid { grid-template-columns: 1fr; }
 .sp-bottom-band { align-items: start; flex-direction: column; gap: 23px; }
 .sp-footer-grid { grid-template-columns: 1.3fr 1fr; gap: 30px; }
}
@media (max-width:640px) {
 .sp-container { width: calc(100% - 40px); }
 .sp-page h2 { font-size: 26px; }
 .sp-breadcrumb { padding-block: 21px; font-size: 11px; }
 .sp-page-heading { padding-top: 4px; padding-bottom: 30px; }
 .sp-page-heading h1 { font-size: 39px; }
 .sp-lead { font-size: 15px; }
 .sp-pricing-copy h1 { font-size: 42px; }
 .sp-pricing-copy .sp-lead { font-size: 14px; }
 .sp-facts { margin-top: 18px; gap: 7px; }
 .sp-facts span { font-size: 10px; padding: 5px 7px; }
 .sp-price-amount strong { font-size: 64px; }
 .sp-price-card .sp-price-legal { font-size: 10px !important; }
 .sp-inclusions { padding-top: 33px; padding-bottom: 28px; }
 .sp-inclusion-grid { gap: 10px; }
 .sp-inclusion { padding: 20px 17px; }
 .sp-inclusion h3 { font-size: 20px; }
 .sp-inclusion p { font-size: 12px; }
 .sp-inclusion .sp-text-link { font-size: 11px; }
 .sp-section-heading { align-items: start; flex-direction: column; gap: 13px; }
 .sp-faq { padding-bottom: 35px; }
 .sp-faq-items summary { font-size: 14px; }
 .sp-bottom-band { padding: 24px; margin-bottom: 40px; }
 .sp-bottom-band h2 { font-size: 25px; }
.sp-manage-intro h1 { font-size: 35px; max-width: 20ch; }
 .sp-manage-intro { padding-bottom: 23px; }
 .sp-manage-intro .sp-lead { font-size: 14px; }
 .sp-manage-layout { margin-bottom: 40px; }
 .sp-account-card { padding: 22px; }
 .sp-account-card h2 { font-size: 22px; }
 .sp-email-form { margin-top: 20px; }
 .sp-email-row { flex-direction: column; gap: 12px; }
 .sp-account-note { margin-top: 18px; }
 .sp-manage-help { grid-template-columns: 1fr; padding: 22px; gap: 23px; }
 .sp-help-item + .sp-help-item { padding-top: 22px; border-top: 1px solid #ced7e4; }
 .sp-page .license-status-list > div { grid-template-columns: 100px minmax(0,1fr); gap: 15px; }
 .sp-page .license-status-card { padding: 20px; }
 .sp-feature-hero { padding-top: 10px; padding-bottom: 35px; gap: 25px; }
 .sp-feature-copy h1 { font-size: 35px; }
 .sp-feature-copy .sp-lead { font-size: 14px; }
 .sp-feature-copy .sp-actions { gap: 9px; }
 .sp-feature-copy .sp-button { padding: 11px 12px; font-size: 12px; }
 .sp-feature-compare { padding: 25px 20px; }
 .sp-feature-compare .sp-feature-copy h1 { font-size: 32px; }
 .sp-capture-frame { padding: 10px; }
 .sp-enlarge { right: 17px; bottom: 17px; padding: 6px 8px; }
 .sp-workflow-body { grid-template-columns: 1fr; gap: 35px; padding-block: 30px; }
 .sp-workflow-body h2 { font-size: 27px; }
 .sp-next { grid-template-columns: 1fr; gap: 20px; }
 .sp-guide-grid { grid-template-columns: 1fr; }
 .sp-guide-grid .seo-card { padding: 20px; }
 .sp-scope { padding: 22px; }
 .sp-scope h2 { font-size: 22px; }
 .sp-workflow-cards { grid-template-columns: 1fr; gap: 13px; }
 .sp-workflow-card { padding: 25px; }
 .sp-workflow-card h2 { font-size: 27px; }
 .sp-workflow-featured h2 { font-size: 31px; }
 .sp-page .workflow-example { padding: 20px; }
 .sp-page .translation-pair p { font-size: 16px; }
 .sp-result-heading { padding: 25px; }
 .sp-result-heading h1 { font-size: 31px; }
 .sp-result-heading .sp-lead { font-size: 14px; }
 .sp-result-panel { padding: 24px; }
 .sp-result-footer { align-items: start; flex-direction: column; }
 .sp-policy-heading { padding-top: 4px; padding-bottom: 25px; }
 .sp-policy-heading h1 { font-size: 35px; }
 .sp-policy-heading .sp-lead { font-size: 14px; }
 .sp-policy-prose { padding-inline: 22px; }
 .sp-policy-prose p { font-size: 14px; }
 .sp-policy-prose h2 { font-size: 23px; }
 .sp-policy-nav ol { grid-template-columns: 1fr; }
 .sp-directory { grid-template-columns: 1fr; gap: 30px; }
 .sp-directory-wide ul { grid-template-columns: 1fr; }
 .sp-footer { padding-top: 33px; }
 .sp-footer-grid { grid-template-columns: 1fr 1fr; gap: 27px 20px; }
 .sp-footer-brand { grid-column: 1 / -1; }
 .sp-footer-bottom { flex-direction: column; gap: 12px; margin-top: 27px; }
}
@media (max-width:360px) {
 .sp-container { width: calc(100% - 32px); }
 .sp-inclusion-grid { grid-template-columns: 1fr; }
 .sp-pricing-copy h1 { font-size: 38px; }
 .sp-feature-hero .sp-actions { align-items: stretch; flex-direction: column; }
 .sp-page .translation-pair { grid-template-columns: 1fr; }
 .sp-package-control { flex-direction: column; }
}
@media (prefers-reduced-motion:reduce) { .sp-page * { scroll-behavior: auto !important; transition: none !important; } }