/* Scoped to the three official-source pages. The established storefront is unchanged. */
body.vp-source-page { background:#fff; color:#18231d; }
.vp-source-page main > article { display:grid; grid-template-columns:220px minmax(0,1fr); column-gap:56px; max-width:1168px; margin:0 auto; padding:0 24px 64px; }
.vp-source-page .guide-hero { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:40px; width:100%; max-width:none; min-height:0; margin:0; padding:40px 0 36px; background:transparent; }
.vp-source-page .guide-hero:before,.vp-source-page .guide-hero:after { display:none; }
.vp-source-page .guide-hero > div { min-width:0; }
.vp-source-page .guide-hero .breadcrumb { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 26px; font-size:11px; color:#69746c; line-height:1.5; }
.vp-source-page .guide-hero .breadcrumb > span:last-child { display:none; }
.vp-source-page .guide-hero .breadcrumb > span:nth-last-child(2) { display:none; }
.vp-source-page .guide-hero .eyebrow { margin:0 0 16px; color:#4b6657; font-size:11px; line-height:1.5; letter-spacing:.14em; font-weight:750; }
.vp-source-page .guide-hero h1 { max-width:100%; margin:0 0 20px; font-size:clamp(32px,3.9vw,48px); line-height:1.07; letter-spacing:-.045em; font-weight:750; overflow-wrap:normal; hyphens:none; }
.vp-source-page .guide-hero .guide-lead { max-width:570px; margin:0; color:#68736c; font-size:16px; line-height:1.65; }
.vp-source-page .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:25px; }
.vp-source-page .hero-actions .button { min-height:48px; padding:13px 23px; border-radius:999px; gap:24px; box-shadow:none; }
.vp-source-page .vp-text-link { display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:700; color:#315942; text-decoration:none; }
.vp-source-page .vp-source-visual { position:relative; display:block; width:100%; height:348px; margin:0; overflow:hidden; border:1px solid #e8eae5; border-radius:24px; background:radial-gradient(ellipse at 65% 40%,#eef0ff 0%,#f7f8fb 48%,#fafbf9 90%); }
.vp-source-page .vp-source-orbit { position:absolute; inset:36px 16px; border:1px solid rgba(73,102,83,.08); border-radius:50%; transform:rotate(-28deg); }
.vp-source-page .vp-source-vial { position:absolute; display:block; width:auto; height:285px; max-width:none; object-fit:contain; filter:drop-shadow(8px 16px 14px rgba(33,45,38,.12)); }
.vp-source-page .vp-source-vial-back { left:20%; top:65px; height:233px; transform:rotate(-16deg); }
.vp-source-page .vp-source-vial-front { right:21%; top:30px; transform:rotate(12deg); }
.vp-source-page .landing-main.guide-section,.vp-source-page .landing-main.guide-faq { grid-column:2; width:100%; max-width:none; margin:0; padding:30px 0; background:transparent; border:0; border-bottom:1px solid #e8ebe7; box-shadow:none; scroll-margin-top:100px; }
.vp-source-page .guide-section h2,.vp-source-page .guide-faq h2 { max-width:none; margin:0 0 18px; font-size:26px; line-height:1.2; letter-spacing:-.025em; font-weight:720; }
.vp-source-page .guide-section p { max-width:none; margin:0 0 16px; font-size:16px; line-height:1.75; color:#5e6b62; }
.vp-source-page .guide-section p:last-child { margin-bottom:0; }
.vp-source-page .landing-main.vp-source-links { grid-column:1/-1; margin:0 0 18px; padding:12px 0 36px; border-bottom:1px solid #e8ebe7; }
.vp-source-page .vp-source-links h2 { font-size:20px; margin-bottom:18px; }
.vp-source-page .vp-source-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.vp-source-page .vp-source-card { display:grid; grid-template-columns:40px minmax(0,1fr) 16px; align-items:center; gap:15px; min-height:98px; padding:20px; border:1px solid #e3e8e1; border-radius:16px; background:#fff; text-decoration:none; color:#18271e; transition:background .18s,border-color .18s; }
.vp-source-page .vp-source-card:hover { border-color:#9eb7a4; background:#fafcf9; }
.vp-source-page .vp-source-card-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#f2f6f0; color:#42694d; }
.vp-source-page .vp-source-card-icon svg { width:20px; height:20px; stroke-width:1.6; }
.vp-source-page .vp-source-card strong { display:block; font-size:16px; line-height:1.3; letter-spacing:-.015em; }
.vp-source-page .vp-source-card small { display:block; margin-top:5px; color:#637066; font-size:12px; line-height:1.5; }
.vp-source-page .vp-source-card-arrow { align-self:start; font-size:18px; color:#637b67; }
.vp-source-page .vp-source-card-data { min-height:80px; padding-block:15px; background:#fafbf9; }
.vp-source-page .vp-source-card-data strong { font-size:13px; }
.vp-source-page .page-toc { grid-column:1; grid-row:3/span 4; align-self:start; position:sticky; top:100px; width:100%; max-width:none; margin:30px 0 0; padding:0 0 0 18px; border:0; border-left:2px solid #e1e9df; border-radius:0; background:transparent; }
.vp-source-page .page-toc-title { display:block; margin-bottom:17px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#79847a; }
.vp-source-page .page-toc ol { display:grid; gap:16px; padding:0; margin:0; list-style:none; }
.vp-source-page .page-toc a { font-size:13px; line-height:1.45; color:#4c6252; text-decoration:none; }
.vp-source-page .faq-list { margin-top:0; }
.vp-source-page .faq-item { border:0; border-top:1px solid #e6ebe4; border-radius:0; background:transparent; box-shadow:none; }
.vp-source-page .faq-item summary { padding:20px 0; font-size:15px; line-height:1.5; }
.vp-source-page .faq-item-body { padding:0 0 20px; font-size:15px; line-height:1.7; }
.vp-source-page .guide-cta { display:flex; justify-content:space-between; align-items:center; gap:32px; width:calc(100% - 48px); max-width:1120px; margin:0 auto 48px; padding:32px; border:1px solid #e0e7dc; border-radius:20px; background:#f5f8f2; }
.vp-source-page .guide-cta h2 { font-size:25px; line-height:1.2; letter-spacing:-.025em; margin:0 0 12px; }
.vp-source-page .guide-cta p { font-size:14px; line-height:1.6; max-width:500px; margin:0; color:#63715f; }
.vp-source-page .guide-cta .hero-actions { flex-shrink:0; margin:0; gap:8px; }
.vp-source-page .guide-cta .button { font-size:12px; padding-inline:18px; gap:8px; }
.vp-source-page .guide-related { display:block; width:calc(100% - 48px); max-width:1120px; padding:0 0 56px; margin:0 auto; }
.vp-source-page .guide-related h2 { font-size:23px; margin-bottom:20px; }
.vp-source-page .guide-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.vp-source-page .guide-related-card { padding:22px; border-radius:16px; box-shadow:none; background:#fff; border:1px solid #e4e8e1; }
.vp-source-page .guide-related-card strong { font-size:16px; line-height:1.4; }
.vp-source-page .guide-related-card span { font-size:13px; line-height:1.6; }
.vp-source-page a:focus-visible { outline:3px solid #739a72; outline-offset:4px; }
@media(max-width:820px) {
 .vp-source-page main > article { grid-template-columns:minmax(0,1fr); gap:0; padding:0 20px 32px; }
 .vp-source-page .guide-hero { grid-template-columns:1fr; gap:24px; padding:24px 0; }
 .vp-source-page .guide-hero .breadcrumb { margin-bottom:20px; }
 .vp-source-page .guide-hero h1 { font-size:36px; max-width:none; line-height:1.1; }
 .vp-source-page .guide-hero .guide-lead { font-size:15px; line-height:1.65; }
 .vp-source-page .hero-actions { gap:17px; margin-top:20px; }
 .vp-source-page .hero-actions .button { width:auto; }
 .vp-source-page .vp-source-visual { height:220px; border-radius:18px; }
 .vp-source-page .vp-source-vial-back { height:165px; left:29%; top:40px; }
 .vp-source-page .vp-source-vial-front { height:210px; right:27%; top:10px; }
 .vp-source-page .landing-main.vp-source-links { padding:12px 0 26px; margin-bottom:0; }
 .vp-source-page .page-toc { position:static; grid-column:1; grid-row:auto; margin:26px 0 0; padding:0 0 0 16px; }
 .vp-source-page .page-toc ol { gap:10px; }
 .vp-source-page .landing-main.guide-section,.vp-source-page .landing-main.guide-faq { grid-column:1; padding:28px 0; }
 .vp-source-page .guide-section h2,.vp-source-page .guide-faq h2 { font-size:24px; }
 .vp-source-page .guide-section p { font-size:15px; line-height:1.7; }
 .vp-source-page .guide-cta { flex-direction:column; align-items:stretch; width:calc(100% - 40px); margin-bottom:32px; padding:24px; gap:20px; }
 .vp-source-page .guide-cta .hero-actions { flex-wrap:wrap; }
 .vp-source-page .guide-cta .button { width:100%; justify-content:center; }
 .vp-source-page .guide-related { width:calc(100% - 40px); padding-bottom:32px; }
 .vp-source-page .guide-related-grid { grid-template-columns:1fr; }
}
@media(max-width:540px) {
 .vp-source-page .guide-hero h1 { font-size:34px; }
 .vp-source-page .vp-source-grid { grid-template-columns:1fr; gap:10px; }
 .vp-source-page .vp-source-card { padding:16px; min-height:88px; }
 .vp-source-page .vp-source-card strong { font-size:15px; }
 .vp-source-page .vp-source-card-data strong { font-size:13px; }
 .vp-source-page .vp-source-vial-back { left:23%; }
 .vp-source-page .vp-source-vial-front { right:20%; }
 .vp-source-page .hero-actions { gap:16px; }
 .vp-source-page .hero-actions .button { padding-inline:20px; gap:16px; }
}
@media(prefers-reduced-motion:reduce) { .vp-source-page .vp-source-card { transition:none; } }
/* Override the older generic mobile hero's more specific heading/padding rules. */
@media(max-width:820px) {
 .vp-source-page.landing-page:not(.product-page) .guide-hero { padding:24px 0; min-height:0; overflow:visible; }
 .vp-source-page.landing-page:not(.product-page) .guide-hero h1 { max-width:100%; font-size:34px; line-height:1.1; }
 .vp-source-page.landing-page:not(.product-page) .guide-hero .hero-actions .button { width:auto; }
}