/* Paper-like comparison panels echo the illustrated service scenes. */
#compare{--cmp-paper:#e8eee5;--cmp-ink:#263e33;--cmp-accent:#315f4c}
#compare .cmp-top{gap:28px 56px}
#compare .cmp-demo{padding:18px;border:1px solid #ffffff16;border-radius:24px;background:radial-gradient(ellipse at 50% 70%,#26372e55,transparent 75%)}
#compare .cmp-seg{margin-bottom:22px}
#compare #cmpSvg{aspect-ratio:520/250;background:#f5f2e7;border-radius:14px;box-shadow:7px 8px 0 #263e33;overflow:hidden}
#compare #cmpSvg .fr{fill:#f5f2e7;stroke:#d3dbcc}
#compare #cmpSvg .hl{stroke:#adbcae}
#compare #cmpSvg text{fill:#263e33}
#compare #cmpSvg text.dm,#compare #cmpSvg .ad{fill:#5c6e63}
#compare #cmpSvg .m.bx{fill:#315f4c;stroke:none}
#compare #cmpSvg .sg text:last-child{fill:#fffdf1}
#compare #cmpSvg .art-arch{fill:#b6cbb9;transition:fill .5s}
#compare #cmpSvg[data-s="1"] .art-arch{fill:#c5d9e7}
#compare #cmpSvg[data-s="2"] .art-arch{fill:#d6cce4}
#compare .cmp-demo figcaption{margin:20px 2px 0;min-height:0;color:#b8c7bb}
#compare .cmp[data-sel="1"]{--cmp-paper:#dce8f0;--cmp-ink:#273f50;--cmp-accent:#48748e}
#compare .cmp[data-sel="2"]{--cmp-paper:#e5dfed;--cmp-ink:#463c54;--cmp-accent:#78648c}
#compare .cmp-grid{gap:8px 10px;border:0}
#compare .cmp-grid>[data-r]{border:0!important;border-radius:12px;padding:17px 18px;font-size:14px;line-height:1.45}
#compare .cmp-grid>.l[data-r]{gap:12px;color:#d3d8d1;background:#151917}
#compare .cmp-grid>.l i{font-size:24px;color:#a9c4b4;flex:none}
#compare .cmp-grid>.c[data-r]{background:#171b19;color:#89958e}
#compare .cmp[data-sel="1"] .cmp-grid>.c1[data-r],#compare .cmp[data-sel="2"] .cmp-grid>.c2[data-r],#compare .cmp[data-sel="3"] .cmp-grid>.c3[data-r]{background:var(--cmp-paper);color:var(--cmp-ink);box-shadow:inset 0 1px #fff8}
#compare .cmp-grid>.c3[data-r] span{font-weight:500}
#compare .cmp-grid>.cmp-col.on::before{background:#b5d5c1}
@media(max-width:800px){
 #compare .cmp-demo{padding:12px 12px 18px;border-radius:20px}
 #compare .cmp-seg{margin-bottom:18px}
 #compare .cmp-top{margin-bottom:24px}
 #compare .cmp[data-sel] .cmp-grid{gap:0;border:0}
 #compare .cmp[data-sel] .cmp-grid>.l[data-r]{position:relative;border-radius:14px 14px 0 0;padding:12px 16px 4px;background:var(--cmp-paper);color:var(--cmp-accent);font-size:12px;line-height:1.25;gap:9px}
 #compare .cmp[data-sel] .cmp-grid>.l i{font-size:20px;color:var(--cmp-accent)}
 #compare .cmp[data-sel] .cmp-grid>.c[data-r]{border-radius:0 0 14px 14px;margin-bottom:10px;padding:0 16px 13px 45px;box-shadow:none;font-size:14px;line-height:1.4}
 #compare .cmp[data-sel] .cmp-grid>.ft{padding-top:12px}
 #compare.cmp-scroll .cmp-demo{padding:10px 10px 16px}
 #compare.cmp-scroll .cmp-grid>.l[data-r]{padding-top:9px}
 #compare.cmp-scroll .cmp-grid>.c[data-r]{padding-bottom:10px;margin-bottom:7px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){#compare #cmpSvg .art-arch{transition:none}}

/* Two meaningful routes; Flowleadly is the more expressive selected route. */
#compare .cmp-seg{grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);align-items:stretch}
#compare .cmp-seg button{min-height:52px;line-height:1.2}
#compare .cmp-seg button[data-s="1"]{font-size:13px;padding-inline:12px}
#compare .cmp-seg button[data-s="3"]{font-size:17px;font-weight:750;isolation:isolate;overflow:hidden}
#compare .cmp-seg button[data-s="3"].on{color:#15191a;box-shadow:0 5px 18px #0003}
#compare .cmp-seg button[data-s="3"].on::before{content:'';position:absolute;z-index:-2;width:160%;aspect-ratio:1;left:50%;top:50%;translate:-50% -50%;background:conic-gradient(from 0deg,#bdc7c5 0 55%,#91b5df 65%,#fff 75%,#e2b783 86%,#bdc7c5 97%);animation:cmp-route-outline 6s linear infinite;pointer-events:none}
#compare .cmp-seg button[data-s="3"].on::after{content:'';position:absolute;z-index:-1;inset:2px;border-radius:inherit;background:#edf0e9;pointer-events:none}
@keyframes cmp-route-outline{to{transform:rotate(360deg)}}
#compare .cmp-grid{grid-template-columns:minmax(140px,.8fr) minmax(0,1.1fr) minmax(0,1.4fr)}
#compare .cmp-grid>.ft{grid-column:3}
#compare .cmp-grid>.ft0{grid-column:1/3}
#compare .cmp-grid>.c1[data-r]{line-height:1.55}
#compare .cmp-grid>.c3[data-r]{font-size:16px;line-height:1.5}
#compare .cmp-grid>.c3[data-r] strong{display:block;font-weight:800;letter-spacing:-.02em}
#compare .cmp-grid>.cmp-col.c3 .logo{font-size:25px}
#compare .cmp[data-sel="3"] .cmp-grid>.c3[data-r="4"]{background:#cee1d0;color:#203d2d}
#compare .cmp[data-sel="3"] .cmp-grid>.c3[data-r="4"] strong{font-size:20px}
@media(max-width:800px){
 #compare .cmp[data-sel] .cmp-grid{grid-template-columns:1fr}
 #compare .cmp-grid>.ft{grid-column:1/-1}
 #compare .cmp-seg button[data-s="1"]{font-size:12px;max-width:100%;white-space:normal}
 #compare .cmp-seg button[data-s="3"]{font-size:17px}
 #compare .cmp[data-sel] .cmp-grid>.c3[data-r]{font-size:15px;padding-top:3px}
 #compare .cmp[data-sel="3"] .cmp-grid>.l[data-r="4"]{background:#cee1d0}
 #compare .cmp[data-sel="3"] .cmp-grid>.c3[data-r="4"] strong{font-size:18px}
}
@media(prefers-reduced-motion:reduce){#compare .cmp-seg button[data-s="3"].on::before{animation:none}}