/* V18: shared material, different business structures. No hero-tree overrides. */
.vp { --vp-teal:#276760; --vp-amber:#df783b; }
.vp-hero { padding:64px 0 78px; background:radial-gradient(ellipse at 85% 55%,#f5d7b751,transparent 65%); border-bottom:1px solid #dde4dc; }
.vp-hero h1 { font-size:clamp(36px,4.4vw,64px); line-height:1.3; text-wrap:balance; max-width:1050px; }
.vp-hero .pg-lede { max-width:760px; }
.vp-sec { padding:80px 0; border-bottom:1px solid #e0e7df; }
.vp-sec h2 { font-size:clamp(27px,2.8vw,40px); line-height:1.45; text-wrap:balance; }
.vp-sec p { line-height:1.9; }
.vp-feature { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:42px; align-items:center; }
.vp-feature-copy > p { color:var(--muted); margin:20px 0; max-width:560px; }
.vp-feature-copy .eyebrow { color:var(--vp-amber); }
.vp-tint { background:linear-gradient(125deg,#e8f1ea55,#fff5e355); }
.vp-links { display:flex; flex-wrap:wrap; gap:16px 26px; margin-top:28px; }
.vp-nav { display:flex; gap:8px 20px; flex-wrap:wrap; padding:22px 0; border-bottom:1px solid #dce6de; }
.vp-nav a { font-size:14px; color:var(--vp-teal); padding:8px 0; }
.vp-product { scroll-margin-top:100px; }
.vp-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:36px; }
.vp-facts h3 { font-size:20px; line-height:1.5; }
.vp-facts p { margin-top:12px; color:var(--muted); font-size:15px; }
.vp-facts article { padding:26px 0; border-top:2px solid #b0c5bb; }
.vp-facts a { color:var(--vp-teal); }
.vm { margin:0; position:relative; min-width:0; background:radial-gradient(ellipse at 55% 50%,#f5ca9940,transparent 64%),radial-gradient(ellipse at 20% 30%,#9fc8ba35,transparent 65%); border:1px solid #ffffffbd; border-radius:30px; box-shadow:0 24px 80px -65px #315e4d; overflow:hidden; }
.vm figcaption { padding:22px 24px 0; font-size:14px; color:#3c6861; font-weight:600; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.vm figcaption span { font-size:11px; color:#75877e; font-weight:400; }
.vm-stage { position:relative; aspect-ratio:800/460; margin:14px 10px 0; }
.vm-stage svg { width:100%; height:100%; display:block; overflow:visible; }
.vm-node { position:absolute; left:var(--nx); top:var(--ny); transform:translate(-50%,-50%); display:flex; gap:8px; align-items:center; justify-content:center; width:max-content; max-width:30%; padding:14px 16px; background:linear-gradient(140deg,#ffffffea,#ebf3edb5 65%,#fff1dcdd); backdrop-filter:blur(9px); border:1px solid #fff; border-radius:11px; box-shadow:inset 0 1px 0 #fff,0 12px 26px -18px #477263; color:#285e57; cursor:pointer; transition:transform .3s,box-shadow .3s,background .3s; font:inherit; }
.vm-node b { font-size:clamp(11px,1.03vw,15px); font-weight:600; line-height:1.4; }
.vm-node-no { font-size:10px; color:#668879; }
.vm-node-arrow { color:#c78042; font-size:13px; }
.vm-node:hover { transform:translate(-50%,-56%); box-shadow:0 18px 35px -18px #659783; }
.vm-node[aria-pressed=true] { background:linear-gradient(145deg,#fff7e8,#f7d2a3db); border-color:#eab77b; color:#71452c; box-shadow:inset 0 1px #fff9e2,0 12px 28px -18px #cf8d48; }
.vm-node:focus-visible,.vp a:focus-visible { outline:3px solid #247d70; outline-offset:4px; }
.vm-explain { margin:8px 22px 22px; padding:20px 22px; background:#ffffffa8; border:1px solid #ffffff; border-radius:16px; min-height:118px; }
.vm-detail-title { font-size:16px; color:#285e57; font-weight:650; margin-bottom:8px; }
.vm-detail p:last-child { font-size:14px; color:#64756e; line-height:1.85; }
.vm-detail[hidden] { display:none; }
.vm-stream { opacity:.24; }
.vm-stream.is-current { stroke:#e58b43; opacity:.9; stroke-width:4; stroke-dasharray:16 10; animation:vp-flow 3s linear infinite; animation-play-state:paused; }
.vm.is-visible .vm-stream.is-current { animation-play-state:running; }
.vm--layers .vm-node { min-width:45%; }
.vm--library .vm-node { border-radius:4px 12px 12px 4px; border-left:4px solid #bed1c4; }
.vm--workflow .vm-node { border-bottom:4px solid #b4d1c2; }
.vp-photo { margin:0; }
.vp-photo img { width:100%; height:auto; display:block; border-radius:20px; }
.vp-clients { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; list-style:none; padding:30px 0; margin:0; border-block:1px solid #d9e2d8; }
.vp-clients li { font-size:clamp(20px,2.2vw,32px); color:#3d7064; font-weight:600; letter-spacing:.08em; }
.vp-gallery { display:grid; grid-template-columns:1.3fr 1fr; gap:28px; margin-top:38px; align-items:start; }
.vp-article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin-top:32px; }
.vp-article-card { padding:30px; background:#ffffff8c; border:1px solid #fff; border-radius:20px; }
.vp-article-card h3 { font-size:22px; line-height:1.5; }
.vp-cover { height:155px; position:relative; display:flex; justify-content:center; align-items:center; gap:22px; margin-bottom:28px; background:radial-gradient(ellipse,#cde0d533,transparent 65%); }
.vp-cover i { display:block; width:54px; height:75px; background:linear-gradient(135deg,#fff,#b8d3c37a 60%,#ebbd8b9c); clip-path:polygon(50% 0,100% 35%,75% 100%,20% 90%,0 30%); }
.vp-cover i:nth-child(2) { width:85px; height:115px; background:linear-gradient(135deg,#fff4d5,#f5b278 50%,#d888509c); }
.vp-article-layout { display:grid; grid-template-columns:240px minmax(0,760px); gap:60px; align-items:start; }
.vp-article-nav { position:sticky; top:110px; padding:24px 20px; background:#ffffffa1; border:1px solid #fff; border-radius:16px; }
.vp-article-nav a { display:block; font-size:13px; padding:9px 0; color:#426c61; }
.vp-reading { font-size:16px; line-height:2; }
.vp-reading h2 { margin:48px 0 20px; scroll-margin-top:110px; }
.vp-reading h3 { font-size:20px; margin:28px 0 14px; }
.vp-reading p { margin:18px 0; color:#3f5850; }
.vp-reading ul { padding-left:22px; margin:20px 0; }
.vp-reading a { color:#a26135; text-decoration:underline; }
.vp-reading .pg-faq { margin-top:40px; }
.vp-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:40px; list-style:none; padding:0; }
.vp-steps li { padding:24px 0; border-top:2px solid #b7cfc0; }
.vp-steps b { display:block; font-size:19px; margin:10px 0; }
.vp-steps span { color:#bc7b42; font-size:12px; }
.vp-end { padding:60px 0; }
.vp-end p { font-size:clamp(24px,3vw,38px); }
.vp-version-detail summary { cursor:pointer; padding:22px 0; color:#276760; font-weight:600; }
.vp-editions table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px; line-height:1.8; }
.vp-editions caption { text-align:left; padding:16px 0; color:#64756e; }
.vp-editions th,.vp-editions td { text-align:left; vertical-align:top; border-bottom:1px solid #dce5dd; padding:18px 12px; overflow-wrap:anywhere; }
.vp-editions th { color:#276760; background:#ecf2ec88; }
.vp-editions td { color:#526c61; }
@keyframes vp-flow { to { stroke-dashoffset:-104; } }
@media(max-width:1000px) { .vp-feature { grid-template-columns:1fr; gap:30px; } .vm-stage { max-width:800px; width:100%; margin-inline:auto; } .vm-node b { font-size:15px; } .vp-article-layout { grid-template-columns:1fr; gap:24px; } .vp-article-nav { position:static; } }
@media(max-width:600px) { .vp-hero { padding:42px 0 48px; } .vp-sec { padding:54px 0; } .vp-facts,.vp-gallery,.vp-article-grid,.vp-steps { grid-template-columns:1fr; } .vm figcaption { padding:18px 14px 0; } .vm-stage { margin-top:18px; } .vm-node { padding:8px 7px; max-width:32%; gap:3px; } .vm-node b { font-size:10.5px; } .vm-node-no,.vm-node-arrow { display:none; } .vm-explain { margin:10px; padding:15px; min-height:132px; } .vm { border-radius:20px; } .vp-clients { justify-content:flex-start; gap:20px 30px; } }
@media(prefers-reduced-motion:reduce) { .vm-stream.is-current { animation:none; stroke-dasharray:none; } .vm-node { transition:none; } }
@media(max-width:600px) { .vm-node { min-height:44px; } .vp-editions thead { display:none; } .vp-editions table,.vp-editions tbody,.vp-editions tr,.vp-editions th,.vp-editions td { display:block; width:100%; } .vp-editions tr { margin:22px 0; } .vp-editions td[data-label]::before { content:attr(data-label) " · "; color:#276760; font-weight:600; } }