.compare-page{background:#edf0ef}.compare-page .nav{background:rgba(4,14,24,.94);height:68px}.compare-hero{min-height:680px;padding:145px 8vw 85px;background:radial-gradient(circle at 77% 38%,rgba(62,202,241,.2),transparent 27%),#07121f;color:#fff;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;overflow:hidden}.compare-hero h1{font-size:clamp(58px,7.5vw,112px);line-height:.86;letter-spacing:-.065em;margin:32px 0}.compare-hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--cyan)}.compare-hero>div>p:last-child{max-width:680px;color:#9caeba;line-height:1.7;font-size:18px}.compare-kinetic{width:min(420px,38vw);aspect-ratio:1;justify-self:center;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;border:1px solid rgba(100,221,255,.2);border-radius:50%;animation:kineticSpin 18s linear infinite}.compare-kinetic:before,.compare-kinetic:after{content:"";position:absolute;inset:15%;border:1px solid rgba(255,255,255,.1);border-radius:50%}.compare-kinetic:after{inset:31%}.compare-kinetic span{font-size:80px;font-weight:900;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);text-align:center}.compare-kinetic i{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:58px;height:58px;background:var(--cyan);color:var(--ink);display:grid;place-items:center;border-radius:50%;font-size:10px;font-style:normal;font-weight:bold;z-index:2}@keyframes kineticSpin{50%{transform:rotate(3deg) scale(1.025)}}
.compare-picker{padding:90px 7vw 105px}.compare-picker form{display:grid;grid-template-columns:1fr 70px 1fr;background:#fff;border:1px solid var(--line);box-shadow:0 28px 75px rgba(6,24,38,.09)}.compare-picker fieldset{border:0;padding:34px;display:grid;grid-template-columns:80px 1fr;gap:13px 20px}.compare-picker legend{font-size:9px;letter-spacing:.2em;color:#2aaed5;padding:0 0 20px}.compare-picker label{font-size:10px;font-weight:bold;letter-spacing:.1em;align-self:center}.compare-picker select{border:0;border-bottom:1px solid var(--line);padding:12px 30px 12px 0;background:#fff;font-size:16px;color:var(--ink);outline:none}.compare-picker select:focus{border-color:#27b9e3}.picker-vs{display:grid;place-items:center;background:#07121f;color:#fff;font-size:10px;letter-spacing:.12em}.compare-picker button{grid-column:1/-1;border:0;background:var(--cyan);padding:22px 30px;display:flex;justify-content:space-between;font-weight:bold;cursor:pointer}.compare-picker button:hover{background:#8aeaff}.compare-picker button b{font-size:20px}
.comparison-output{padding:0 7vw 130px}.comparison-stage{background:#fff;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(7,25,38,.09)}.comparison-stage:before{content:"";position:absolute;top:0;bottom:0;width:1px;left:50%;background:var(--line);z-index:3}.comparison-cars{display:grid;grid-template-columns:1fr 1fr}.comparison-car{position:relative;min-width:0}.comparison-image{height:360px;overflow:hidden;background:#cad7da;position:relative}.comparison-image:after{content:"";position:absolute;inset:auto 0 0;height:48%;background:linear-gradient(transparent,rgba(5,15,25,.62))}.comparison-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}.comparison-car:hover img{transform:scale(1.035)}.comparison-title{position:absolute;left:32px;top:260px;z-index:2;color:#fff}.comparison-title small{font-size:8px;letter-spacing:.2em;color:var(--cyan)}.comparison-title h2{font-size:42px;letter-spacing:-.045em;margin:8px 0}.comparison-meta{padding:28px 32px;display:flex;justify-content:space-between;gap:18px;align-items:center}.comparison-meta p{margin:0;color:#75858e;font-size:11px}.compare-score{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cyan) calc(var(--score)*1%),#e2e9eb 0);position:relative}.compare-score:after{content:"";position:absolute;inset:7px;background:#fff;border-radius:50%}.compare-score strong{position:relative;z-index:1;font-size:20px}.center-vs{position:absolute;left:50%;top:320px;transform:translate(-50%,-50%);z-index:4;width:54px;height:54px;border-radius:50%;background:#07121f;color:#fff;display:grid;place-items:center;font-size:9px;letter-spacing:.12em;box-shadow:0 0 0 8px #fff}.comparison-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.comparison-tabs button{border:0;border-right:1px solid var(--line);background:#f7f8f7;padding:17px;cursor:pointer;font-size:10px;letter-spacing:.12em}.comparison-tabs button.active{background:var(--cyan);color:var(--ink)}.category-result{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:30px 7vw;background:#07121f;color:#fff;gap:28px}.category-result>div{display:flex;align-items:center;gap:15px}.category-result>div:last-child{justify-content:flex-end;text-align:right}.category-result i{height:6px;background:rgba(255,255,255,.15);flex:1;position:relative}.category-result i:after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--value)*1%);background:var(--cyan);animation:compareBar 1s ease}.category-result>div:last-child i:after{inset:0 0 0 auto}.category-result strong{font-size:23px}.category-result>span{font-size:10px;color:#8fa2ae;letter-spacing:.13em}@keyframes compareBar{from{width:0}}
.comparison-table{padding:25px 5vw 55px}.compare-row{display:grid;grid-template-columns:1fr 200px 1fr;border-bottom:1px solid var(--line);align-items:center;min-height:75px}.compare-row span{font-size:13px}.compare-row span:last-child{text-align:right}.compare-row small{text-align:center;color:#73848e;font-size:9px;letter-spacing:.13em}.compare-row.highlight span{font-weight:bold;color:#087fa2}.comparison-actions{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}.comparison-actions a{background:#fff;padding:22px 30px;display:flex;justify-content:space-between;font-weight:bold;font-size:12px}.comparison-actions a:hover{background:var(--cyan)}.compare-warning{background:#fff;padding:50px;text-align:center;font-size:18px}.compare-method{padding:85px 8vw;background:var(--cyan);display:grid;grid-template-columns:.8fr 1.2fr auto;gap:6vw;align-items:center}.compare-method small{font-size:8px;letter-spacing:.2em}.compare-method h2{font-size:clamp(32px,4vw,58px);line-height:.95;letter-spacing:-.05em;margin:15px 0 0}.compare-method p{line-height:1.7}.compare-method a{font-size:11px;font-weight:bold;border-bottom:1px solid var(--ink);padding-bottom:6px}
@media(max-width:900px){.compare-hero{grid-template-columns:1fr}.compare-kinetic{display:none}.compare-picker form{grid-template-columns:1fr}.picker-vs{height:55px}.compare-picker button{grid-column:auto}.comparison-image{height:300px}.comparison-title{top:205px}.compare-row{grid-template-columns:1fr 130px 1fr}.compare-method{grid-template-columns:1fr 1fr}.compare-method a{grid-column:1/-1;width:max-content}}
@media(max-width:620px){.compare-hero{padding:125px 6vw 70px;min-height:620px}.compare-picker{padding:65px 6vw 80px}.compare-picker fieldset{grid-template-columns:1fr;padding:26px}.comparison-output{padding:0 4vw 90px}.comparison-cars{grid-template-columns:1fr}.comparison-stage:before,.center-vs{display:none}.comparison-image{height:280px}.comparison-title{top:188px}.comparison-tabs{grid-template-columns:1fr 1fr}.category-result{grid-template-columns:1fr;padding:28px}.category-result>span{text-align:center}.compare-row{grid-template-columns:1fr 80px 1fr;min-height:88px}.compare-row span{font-size:11px}.comparison-actions{grid-template-columns:1fr}.compare-method{grid-template-columns:1fr;padding:65px 6vw}}
.compare-picker .select-shell{position:relative;border:1px solid #d6e0e3;border-radius:15px;background:linear-gradient(145deg,#fff,#f1f7f8);box-shadow:0 8px 24px rgba(6,31,45,.05),inset 0 1px 0 #fff;transition:border-color .25s,box-shadow .25s,transform .25s}.compare-picker .select-shell:hover{border-color:#86d8ed;transform:translateY(-1px)}.compare-picker .select-shell:focus-within{border-color:#1cb9e2;box-shadow:0 0 0 4px rgba(32,190,229,.13),0 12px 28px rgba(6,31,45,.08)}.compare-picker .select-shell select{appearance:none;-webkit-appearance:none;border:0;padding:14px 48px 14px 15px;background:transparent;font-size:15px;font-weight:650;color:var(--ink);outline:none;width:100%;cursor:pointer}.compare-picker .select-shell i{position:absolute;right:17px;top:50%;width:9px;height:9px;border-right:2px solid #159fc5;border-bottom:2px solid #159fc5;transform:translateY(-70%) rotate(45deg);pointer-events:none;transition:transform .25s}.compare-picker .select-shell:focus-within i{transform:translateY(-30%) rotate(225deg)}

/* FF_CALM_DESIGN_2026_START */
.compare-hero{min-height:510px;padding:122px 8vw 64px;background:radial-gradient(circle at 78% 40%,rgba(62,202,241,.08),transparent 30%),#07121f;grid-template-columns:1.3fr .7fr}
.compare-hero h1{font-size:clamp(48px,5.8vw,82px);line-height:.94;letter-spacing:-.055em;margin:24px 0}.compare-hero>div>p:last-child{font-size:17px;color:#a7b5be}
.compare-kinetic{width:min(270px,26vw);border-color:rgba(100,221,255,.13);animation:none;opacity:.78}.compare-kinetic:after{display:none}.compare-kinetic span{font-size:54px;-webkit-text-stroke-color:rgba(255,255,255,.22)}.compare-kinetic i{width:48px;height:48px;background:#a7eaf8}
.compare-picker form,.comparison-stage{box-shadow:0 18px 52px rgba(6,24,38,.065)}
.compare-picker .select-shell{border-radius:9px;background:#fff;box-shadow:none}.compare-picker .select-shell:focus-within{box-shadow:0 0 0 3px rgba(32,190,229,.09)}
.comparison-tabs button.active{background:#e5f6fa;box-shadow:inset 0 -2px var(--cyan)}
.compare-method{padding:64px 8vw;background:#e9f5f7;border-top:1px solid rgba(27,151,184,.18);border-bottom:1px solid rgba(27,151,184,.18)}
.compare-method h2{font-size:clamp(30px,3.4vw,48px);line-height:1}
@media(max-width:900px){.compare-hero{min-height:500px;padding-bottom:58px}}
@media(max-width:620px){.compare-hero{padding:115px 6vw 58px;min-height:500px}.compare-hero h1{font-size:49px}}
/* FF_CALM_DESIGN_2026_END */