/* v3: interactive comparison */
.cmp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.cmp-head p{margin-bottom:0}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;gap:4px;box-shadow:0 14px 30px -20px rgba(41,35,92,.5)}
.seg button{font:inherit;font-weight:700;font-size:.95rem;border:0;background:none;padding:10px 18px;border-radius:999px;cursor:pointer;color:var(--mute);transition:background-color .2s,color .2s}
.seg button:hover{color:var(--indigo)}
.seg button[aria-selected=true]{background:var(--indigo);color:#fff}

.race{position:relative;margin-top:32px;background:var(--night);color:#fff;border-radius:var(--r-l);padding:clamp(24px,4vw,44px);overflow:hidden;isolation:isolate}
.race::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;left:-160px;top:-260px;background:radial-gradient(circle,rgba(232,67,80,.28),transparent 70%)}
.race::after{content:"";position:absolute;z-index:-1;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,transparent);mask-image:linear-gradient(90deg,transparent,#000 40%,transparent)}
.lane+.lane{margin-top:28px}
.lane-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin-bottom:12px}
.lane-top b{font-size:1.08rem}
.lane-top span{color:var(--lilac);font-weight:600}
.lane.fh .lane-top span{color:#fff}
.track{position:relative;height:16px;border-radius:999px;background:rgba(255,255,255,.08)}
.fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.fh .fill{background:linear-gradient(90deg,#FF8A92,var(--coral));box-shadow:0 0 26px rgba(232,67,80,.65)}
.wp .fill{background:#8C86C7}
.range{position:absolute;top:0;bottom:0;border-radius:0 999px 999px 0;background:repeating-linear-gradient(135deg,rgba(185,180,230,.5) 0 6px,rgba(185,180,230,.14) 6px 12px);transition:left 1.1s cubic-bezier(.2,.8,.2,1),width 1.1s cubic-bezier(.2,.8,.2,1)}
.pin{position:absolute;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(232,67,80,.32);transition:left 1.1s cubic-bezier(.2,.8,.2,1),opacity .3s}
.pin svg{width:15px;height:15px}
.race[data-mode=time] .fh .fill{width:6%}
.race[data-mode=time] .fh .pin{left:6%}
.race[data-mode=time] .wp .fill{width:33.33%}
.race[data-mode=time] .wp .range{left:33.33%;width:66.67%}
.race[data-mode=cost] .fh .fill{width:14%}
.race[data-mode=cost] .fh .pin{left:14%}
.race[data-mode=cost] .wp .fill{width:30%}
.race[data-mode=cost] .wp .range{left:30%;width:70%}
.race.wait .fill,.race.wait .range{width:0!important}
.race.wait .pin{left:0!important;opacity:0}
.scale{position:relative;height:20px;margin-top:24px;font-size:.8rem;color:var(--lilac);border-top:1px dashed rgba(255,255,255,.16);padding-top:8px}
.scale span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.scale span:first-child{transform:none}
.scale span:last-child{transform:translateX(-100%)}
.race [data-show]{display:none}
.race[data-mode=time] span[data-show=time],.race[data-mode=cost] span[data-show=cost]{display:inline}
.race[data-mode=time] div[data-show=time],.race[data-mode=cost] div[data-show=cost]{display:block}
.race-note{font-size:.8rem;color:var(--lilac);margin:22px 0 0;max-width:none}

.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:24px}
.vs-card{position:relative;overflow:hidden;border-radius:var(--r-l);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column}
.vs-card.fh{background:var(--indigo);color:#fff;box-shadow:0 40px 80px -40px rgba(41,35,92,.75)}
.vs-card.fh::after{content:"";position:absolute;width:340px;height:340px;right:-140px;top:-160px;background:radial-gradient(circle,rgba(232,67,80,.38),transparent 70%);pointer-events:none}
.vs-card.wp{background:#fff;border:1px solid var(--line);color:#4A466A}
.vs-card h3{font-size:1.45rem;margin-bottom:14px}
.vs-card.wp h3{color:var(--ink)}
.vs-card ul{list-style:none;padding:0;margin:0 0 22px;flex:1}
.vs-card li{position:relative;padding:11px 12px 11px 48px;border-radius:12px;font-weight:700;line-height:1.35;transition:background-color .2s}
.vs-card.wp li{font-weight:600}
.vs-card li small{display:block;font-weight:600;font-size:.78rem;opacity:.68;margin-bottom:2px}
.vs-card li::before{position:absolute;left:11px;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.82rem;font-weight:800;line-height:1}
.vs-card li.yes::before{content:"\2713";background:var(--coral);color:#fff}
.vs-card.wp li.yes::before{background:#E6F6EC;color:#137A47}
.vs-card li.no::before{content:"\2212";background:#EFEDF3;color:#8A86A6}
.vs-card li.meh::before{content:"\2192";background:rgba(255,255,255,.16);color:#fff}
.vs-card.fh li.hl{background:rgba(255,255,255,.09)}
.vs-card.wp li.hl{background:#F4F2F8}
.vs-foot{font-size:.9rem;color:var(--mute);margin:0}
.vs-badge{align-self:center;width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1rem;box-shadow:0 0 0 8px var(--paper)}
@media(max-width:860px){.vs{grid-template-columns:1fr}.vs-badge{justify-self:center;margin:-34px 0;position:relative;z-index:1}}
@media(prefers-reduced-motion:reduce){.race.wait .fill,.race.wait .range{width:auto}}