@font-face {font-family: "InterV"; src: url("/shop/shared/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900;}
@font-face {font-family: "Fraunces"; src: url("/shop/shared/fonts/fraunces-latin-full-italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900;}
.mp-design-compare {--bg: #01050f; --bg2: #040b1c; --line: rgba(160,205,255,.14); --line2: rgba(160,205,255,.26); --text: #eef4ff; --muted: #a3b4d1; --muted2: #7387a8; --cyan: #56CAF5; --ice: #bfeaff; --blue: #051EE0; --mint: #56CAF5; --serif: "Fraunces",Georgia,serif;}
.mp-design-compare * {box-sizing: border-box;}
.mp-design-compare,.mp-design-compare {margin: 0; background: var(--bg); color: var(--text); font-family: "InterV",Inter,system-ui,sans-serif; -webkit-font-smoothing: antialiased;}
.mp-design-compare a {color: inherit; text-decoration: none;}
.mp-design-compare .wrap {width: min(1200px,100% - 40px); margin: 0 auto;}
.mp-design-compare em {font-family: var(--serif); font-style: italic; font-weight: 350; color: var(--ice);}
.mp-design-compare .note {position: fixed; right: 12px; bottom: 12px; z-index: 30; background: #ffd84d; color: #1b1400; font-weight: 800; font-size: 12px; padding: 6px 10px; border-radius: 8px;}
.mp-design-compare .top {position: sticky; top: 0; z-index: 20; background: rgba(1,5,15,.8); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);}
.mp-design-compare .top .wrap {display: flex; align-items: center; justify-content: space-between; height: 64px;}
.mp-design-compare .pill {display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); font-size: 14px; font-weight: 700;}
.mp-design-compare .pill.sm {font-size: 13px;}
.mp-design-compare .logo {width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg,#051EE0,#56CAF5); display: grid; place-items: center; font-weight: 900;}
.mp-design-compare .icons {display: flex; gap: 8px;}
.mp-design-compare .ico {width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line2); display: grid; place-items: center;}
.mp-design-compare .kick {display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan);}
.mp-design-compare .kick span {width: 28px; height: 1px; background: linear-gradient(90deg,var(--cyan),transparent);}
.mp-design-compare .k2 {font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); font-weight: 700;}
.mp-design-compare .hero {position: relative; overflow: hidden; padding: 56px 0 72px; border-bottom: 1px solid var(--line);}
.mp-design-compare .aur {position: absolute; inset: -20% -10% auto -10%; height: 150%; pointer-events: none; background: radial-gradient(40% 40% at 76% 35%,rgba(5,30,224,.55),transparent 70%),radial-gradient(26% 26% at 62% 15%,rgba(86,202,245,.25),transparent 70%),radial-gradient(30% 30% at 5% 90%,rgba(5,30,224,.2),transparent 70%);}
.mp-design-compare .aur:after {content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(160,205,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(160,205,255,.045) 1px,transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(55% 55% at 65% 35%,#000,transparent 75%); mask-image: radial-gradient(55% 55% at 65% 35%,#000,transparent 75%);}
.mp-design-compare .hero .wrap {position: relative;}
.mp-design-compare .hgrid {display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center;}
.mp-design-compare h1 {font-size: clamp(42px,5.8vw,78px); line-height: .98; letter-spacing: -.045em; font-weight: 800; margin: 18px 0 18px;}
.mp-design-compare h1 em {display: block; font-weight: 300; letter-spacing: -.02em; margin-top: 6px;}
.mp-design-compare .lead {font-size: 18px; line-height: 1.65; color: var(--muted); max-width: 560px; margin: 0 0 28px;}
.mp-design-compare .ctas {display: flex; flex-wrap: wrap; align-items: center; gap: 18px;}
.mp-design-compare .cta {display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 16px; font-weight: 800; font-size: 16px; color: #031024; background: linear-gradient(135deg,#d9f4ff,#56CAF5 55%,#2fa6dc); box-shadow: 0 14px 40px rgba(86,202,245,.32),inset 0 1px 0 rgba(255,255,255,.6);}
.mp-design-compare .cta2 {font-weight: 650; color: var(--ice); text-decoration: underline; text-decoration-color: rgba(191,234,255,.35); text-underline-offset: 5px;}
.mp-design-compare .cta2.b {display: inline-block; margin-top: 14px;}
.mp-design-compare .trust {list-style: none; padding: 0; margin: 36px 0 0; display: flex; border-top: 1px solid var(--line2); max-width: 560px;}
.mp-design-compare .trust li {flex: 1; padding: 14px 0 0; display: flex; flex-direction: column; gap: 2px;}
.mp-design-compare .trust li+li {padding-left: 18px; border-left: 1px solid var(--line);}
.mp-design-compare .trust b {font-family: var(--serif); font-style: italic; font-weight: 350; font-size: 26px; color: #fff;}
.mp-design-compare .trust span {font-size: 12px; color: var(--muted2);}
.mp-design-compare .hvis {position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.mp-design-compare .hcard {grid-column: 1/-1;}
.mp-design-compare .hcard {position: relative; aspect-ratio: 1/1; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 50px 120px rgba(5,30,224,.35),0 0 0 1px rgba(255,255,255,.5);}
.mp-design-compare .hcard img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;}
.mp-design-compare .float {position: relative; padding: 14px 16px; border-radius: 18px; background: rgba(6,16,40,.82); backdrop-filter: blur(14px); border: 1px solid var(--line2); box-shadow: 0 20px 50px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 2px; min-width: 170px;}
.mp-design-compare .float b {font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px;}
.mp-design-compare .float small {color: var(--muted); font-size: 12px;}
.mp-design-compare .sec {padding: 84px 0 0;}
.mp-design-compare .sh {display: flex; align-items: flex-end; gap: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--line); padding-bottom: 18px;}
.mp-design-compare .sh .n {font-family: var(--serif); font-style: italic; color: var(--cyan); font-size: 18px; align-self: flex-start; padding-top: 12px;}
.mp-design-compare .sh>div {flex: 1;}
.mp-design-compare .sh h2 {margin: 0; font-size: clamp(28px,3.6vw,44px); letter-spacing: -.03em; font-weight: 750;}
.mp-design-compare .sh p {margin: 6px 0 0; color: var(--muted); font-size: 15.5px;}
.mp-design-compare .more {font-size: 14px; font-weight: 700; color: var(--ice); white-space: nowrap;}
.mp-design-compare .steps3 {display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden;}
.mp-design-compare .steps3 a {background: var(--bg2); padding: 30px 28px; display: flex; flex-direction: column; gap: 8px; transition: background .2s;}
.mp-design-compare .steps3 a:hover {background: #071534;}
.mp-design-compare .sn {font-family: var(--serif); font-weight: 300; font-size: 52px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(191,234,255,.6);}
.mp-design-compare .steps3 b {font-size: 22px; letter-spacing: -.02em;}
.mp-design-compare .steps3 p {margin: 0; color: var(--muted); line-height: 1.6;}
.mp-design-compare .lnk {margin-top: auto; padding-top: 10px; color: var(--ice); font-weight: 650; font-size: 14px;}
.mp-design-compare .offers {display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;}
.mp-design-compare .of {grid-column: span 1; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; transition: transform .2s,box-shadow .2s;}
.mp-design-compare .of:hover {transform: translateY(-4px); box-shadow: 0 30px 70px rgba(5,30,224,.25);}
.mp-design-compare .of.big {grid-column: span 2;}
.mp-design-compare .ofim {position: relative; aspect-ratio: 16/10; background: #0a1430;}
.mp-design-compare .of:not(.big) .ofim {aspect-ratio: 1/1;}
.mp-design-compare .ofim img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;}
.mp-design-compare .ofim.w {background: #fff;}
.mp-design-compare .ofim.d {background: #071635;}
.mp-design-compare .oft {padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px;}
.mp-design-compare .oft b {font-size: 21px; letter-spacing: -.02em;}
.mp-design-compare .oft p {margin: 0; color: var(--muted);}
.mp-design-compare .pr {margin-top: 6px; color: var(--ice); font-weight: 700; font-size: 14.5px;}
.mp-design-compare .progs {display: grid; grid-template-columns: repeat(4,1fr); gap: 14px;}
.mp-design-compare .progs a {position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--bg2); transition: border-color .2s;}
.mp-design-compare .progs a:hover {border-color: var(--line2);}
.mp-design-compare .progs a.on {border-color: var(--cyan); background: linear-gradient(160deg,rgba(26,52,110,.6),rgba(6,16,40,.85)); box-shadow: 0 30px 80px rgba(5,30,224,.25);}
.mp-design-compare .mt {font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted2); font-weight: 700;}
.mp-design-compare .progs b {font-size: 18px;}
.mp-design-compare .mp {font-family: var(--serif); font-style: italic; font-size: 30px; color: #fff;}
.mp-design-compare .progs small {color: var(--muted);}
.mp-design-compare .tagb {align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #031024; background: linear-gradient(90deg,#bfeaff,#56CAF5); padding: 4px 9px; border-radius: 999px; margin-bottom: 6px;}
.mp-design-compare .compass {display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding: 30px; border-radius: 28px; border: 1px solid var(--line); background: linear-gradient(160deg,rgba(14,34,74,.5),rgba(4,11,28,.7));}
.mp-design-compare .cimg {border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5);}
.mp-design-compare .cimg img {display: block; width: 100%;}
.mp-design-compare .compass h2 {font-size: clamp(28px,3.4vw,42px); margin: 10px 0; letter-spacing: -.03em;}
.mp-design-compare .compass p {color: var(--muted); line-height: 1.6; margin: 0;}
.mp-design-compare .fine {font-size: 12px; color: var(--muted2); margin-top: 14px !important;}
.mp-design-compare .about {display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center;}
.mp-design-compare .ph {position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4/5; background: #06122e; box-shadow: 0 40px 100px rgba(5,30,224,.3);}
.mp-design-compare .ph img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;}
.mp-design-compare .phn {position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: rgba(1,5,15,.75); backdrop-filter: blur(8px); font-weight: 700; font-size: 14px; border: 1px solid var(--line2);}
.mp-design-compare .quote {font-family: var(--serif); font-style: italic; font-weight: 350; font-size: clamp(24px,2.6vw,34px); line-height: 1.25; margin: 0 0 20px; color: #fff;}
.mp-design-compare .nm {display: block; font-size: 18px;}
.mp-design-compare .role {display: block; color: var(--cyan); font-size: 13.5px; font-weight: 600; margin: 2px 0 14px;}
.mp-design-compare .at>p {color: var(--muted); line-height: 1.65; margin: 0 0 20px;}
.mp-design-compare .team2 {display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg2);}
.mp-design-compare .av {flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg,#0b2a8f,#56CAF5);}
.mp-design-compare .team2 b {display: block;}
.mp-design-compare .team2 span {color: var(--muted); font-size: 13.5px;}
.mp-design-compare .revs {display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;}
.mp-design-compare .revs figure {margin: 0; padding: 26px; border-radius: 22px; border: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; gap: 12px;}
.mp-design-compare .st {color: #ffd27a; letter-spacing: .2em;}
.mp-design-compare .revs blockquote {margin: 0; font-family: var(--serif); font-style: italic; font-weight: 350; font-size: 19px; line-height: 1.45; color: #fff;}
.mp-design-compare .revs figcaption {color: var(--muted2); font-size: 13px; margin-top: auto;}
.mp-design-compare .stat {margin-top: 22px; display: flex; align-items: baseline; gap: 18px; padding: 22px 26px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(90deg,rgba(5,30,224,.25),transparent);}
.mp-design-compare .stat b {font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 54px; line-height: 1;}
.mp-design-compare .stat span {color: var(--muted);}
.mp-design-compare .care {display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center; padding: 36px; border-radius: 28px; background: radial-gradient(60% 120% at 100% 0%,rgba(127,227,196,.18),transparent 60%),linear-gradient(160deg,#0b2a2a,#061626); border: 1px solid rgba(127,227,196,.3);}
.mp-design-compare .k3 {font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); font-weight: 700;}
.mp-design-compare .care h2 {font-size: clamp(26px,3.2vw,40px); margin: 10px 0; letter-spacing: -.03em;}
.mp-design-compare .care em {color: #c9f5e6;}
.mp-design-compare .care p {margin: 0; color: var(--muted); line-height: 1.6; max-width: 620px;}
.mp-design-compare .cr {display: flex; flex-direction: column; gap: 4px; min-width: 240px;}
.mp-design-compare .cr b {font-family: var(--serif); font-style: italic; font-weight: 350; font-size: 34px;}
.mp-design-compare .cr small {color: var(--muted2);}
.mp-design-compare .ctam {display: inline-flex; justify-content: center; margin-top: 12px; min-height: 52px; align-items: center; padding: 0 20px; border-radius: 14px; font-weight: 800; color: #031024; background: linear-gradient(135deg,#d6fff1,#56CAF5);}
.mp-design-compare .guide {display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; padding: 28px; border-radius: 28px; border: 1px solid var(--line); background: var(--bg2);}
.mp-design-compare .guide img {width: 200px; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.5);}
.mp-design-compare .guide h2 {font-size: clamp(24px,3vw,36px); margin: 8px 0; letter-spacing: -.03em;}
.mp-design-compare .guide p {color: var(--muted); margin: 0 0 18px;}
.mp-design-compare .faq details {border-bottom: 1px solid var(--line); padding: 20px 0;}
.mp-design-compare .faq summary {list-style: none; cursor: pointer; font-size: 17.5px; font-weight: 650; display: flex; justify-content: space-between; gap: 16px;}
.mp-design-compare .faq summary::-webkit-details-marker {display: none;}
.mp-design-compare .faq summary:after {content: "+"; font-family: var(--serif); font-size: 24px; line-height: .8; color: var(--cyan);}
.mp-design-compare .faq details[open] summary:after {content: "–";}
.mp-design-compare .faq p {color: var(--muted); margin: 10px 0 0; line-height: 1.6; max-width: 800px;}
.mp-design-compare .final {display: grid; grid-template-columns: 1.3fr auto; gap: 28px; align-items: center; padding: 48px; border-radius: 30px; border: 1px solid var(--line2); background: radial-gradient(60% 120% at 100% 0%,rgba(5,30,224,.6),transparent 60%),linear-gradient(160deg,#0a1a44,#040b1c);}
.mp-design-compare .final h2 {font-size: clamp(32px,4vw,52px); letter-spacing: -.03em; margin: 12px 0 10px;}
.mp-design-compare .final p {margin: 0; color: var(--muted); max-width: 520px; line-height: 1.6;}
.mp-design-compare .fa {display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 260px;}
.mp-design-compare footer {margin-top: 90px; padding: 28px 0; border-top: 1px solid var(--line); color: var(--muted2); font-size: 13px;}
@media (max-width:899px) {.mp-design-compare .wrap {width: min(1200px,100% - 32px);}
.mp-design-compare .hero {padding: 30px 0 48px;}
.mp-design-compare .hgrid {grid-template-columns: 1fr; gap: 28px;}
.mp-design-compare .lead {font-size: 16.5px;}
.mp-design-compare .hvis {gap: 10px;}
.mp-design-compare .float {min-width: 0; padding: 10px 12px;}
.mp-design-compare .float b {font-size: 19px;}
.mp-design-compare .trust b {font-size: 20px;}
.mp-design-compare .trust li+li {padding-left: 12px;}
.mp-design-compare .sec {padding-top: 60px;}
.mp-design-compare .more {display: none;}
.mp-design-compare .steps3 {grid-template-columns: 1fr;}
.mp-design-compare .offers {grid-template-columns: 1fr 1fr; gap: 10px;}
.mp-design-compare .of.big {grid-column: span 2;}
.mp-design-compare .oft {padding: 14px;}
.mp-design-compare .oft b {font-size: 17px;}
.mp-design-compare .progs {grid-template-columns: 1fr 1fr; gap: 10px;}
.mp-design-compare .progs a {padding: 16px;}
.mp-design-compare .mp {font-size: 24px;}
.mp-design-compare .compass,.mp-design-compare .about,.mp-design-compare .care,.mp-design-compare .final,.mp-design-compare .guide {grid-template-columns: 1fr; gap: 22px; padding: 22px;}
.mp-design-compare .about {padding: 0;}
.mp-design-compare .ph {max-width: 340px;}
.mp-design-compare .guide img {width: 150px;}
.mp-design-compare .revs {grid-template-columns: 1fr;}
.mp-design-compare .stat {flex-direction: column; gap: 6px;}
.mp-design-compare .stat b {font-size: 44px;}
.mp-design-compare .fa {align-items: stretch;}}
.mp-design-compare .rail {display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px;}
.mp-design-compare .rail::-webkit-scrollbar {display: none;}
.mp-design-compare .rc {flex: 0 0 calc((100% - 48px)/4); scroll-snap-align: start; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; transition: transform .2s,border-color .2s;}
.mp-design-compare .rc:hover {transform: translateY(-3px); border-color: var(--line2);}
.mp-design-compare .rim {position: relative; aspect-ratio: 1/1; background: #fff;}
.mp-design-compare .rim img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4%;}
.mp-design-compare .rt {padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1;}
.mp-design-compare .rt b {font-size: 16px; letter-spacing: -.01em;}
.mp-design-compare .rt small {color: var(--muted); font-size: 13px;}
.mp-design-compare .rp {margin-top: auto; padding-top: 6px; font-family: var(--serif); font-style: italic; font-size: 22px; color: #fff;}
.mp-design-compare .rtag {align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #031024; background: linear-gradient(90deg,#bfeaff,#56CAF5); padding: 3px 8px; border-radius: 999px; margin-bottom: 4px;}
.mp-design-compare .rail.prod .rc {flex-basis: calc((100% - 64px)/5);}
.mp-design-compare .swipe {display: none; color: var(--muted2); font-size: 12.5px; margin: 8px 0 0; text-align: right;}
.mp-design-compare .ebrow {display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 22px;}
.mp-design-compare .ec {display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg2);}
.mp-design-compare .eim {grid-row: 1/3; position: relative; aspect-ratio: 1055/1491; border-radius: 10px; overflow: hidden; background: #071635;}
.mp-design-compare .eim img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;}
.mp-design-compare .ec b {align-self: end; font-size: 15.5px;}
.mp-design-compare .ec .rp {align-self: start; padding-top: 2px;}
@media (max-width:899px) {.mp-design-compare .rc,.mp-design-compare .rail.prod .rc {flex: 0 0 72%;}
.mp-design-compare .rail {margin-right: -16px; padding-right: 16px; gap: 12px;}
.mp-design-compare .swipe {display: block;}
.mp-design-compare .ebrow {grid-template-columns: 1fr; gap: 10px;}
.mp-design-compare .ec {grid-template-columns: 80px 1fr;}}
.mp-design-compare .railw {position: relative;}
.mp-design-compare .rnav {position: absolute; top: calc(50% - 46px); z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(4,12,32,.82); backdrop-filter: blur(10px); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: opacity .2s;}
.mp-design-compare .rnav.prev {left: -22px;}
.mp-design-compare .rnav.next {right: -22px;}
.mp-design-compare .railw.at-start .prev,.mp-design-compare .railw.at-end .next {opacity: 0; pointer-events: none;}
.mp-design-compare .rtag.ghost {visibility: hidden;}
.mp-design-compare .note {position: static; display: block; text-align: center; border-radius: 0; padding: 5px 10px;}
@media (max-width:899px) {.mp-design-compare .rnav {display: none;}
.mp-design-compare .rc {flex: 0 0 68%;}
.mp-design-compare .rail.prod .rc {flex: 0 0 44%;}
.mp-design-compare .rail.prod .rt b {font-size: 14px;}
.mp-design-compare .rail.prod .rp {font-size: 19px;}
.mp-design-compare .ebrow {display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -16px; padding-right: 16px;}
.mp-design-compare .ebrow::-webkit-scrollbar {display: none;}
.mp-design-compare .ec {flex: 0 0 80%; scroll-snap-align: start;}}
.mp-design-compare .trust .stars {font-family: "InterV",system-ui,sans-serif; font-style: normal; font-size: 19px; letter-spacing: .06em; color: #ffd27a;}
.mp-design-compare .proof {border-bottom: 1px solid var(--line); background: linear-gradient(180deg,rgba(86,202,245,.05),rgba(86,202,245,0));}
.mp-design-compare .proof ul {list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(4,1fr);}
.mp-design-compare .proof li {display: flex; align-items: center; gap: 14px; padding: 4px 22px;}
.mp-design-compare .proof li+li {border-left: 1px solid var(--line);}
.mp-design-compare .proof li:first-child {padding-left: 0;}
.mp-design-compare .proof svg {flex: 0 0 40px; width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: #56CAF5; background: rgba(86,202,245,.08); border: 1px solid rgba(86,202,245,.22);}
.mp-design-compare .proof b {display: block; font-size: 14.5px; color: #fff; letter-spacing: -.005em; white-space: nowrap;}
.mp-design-compare .proof span {display: block; font-size: 12.5px; color: var(--muted);}
@media (max-width:899px) {.mp-design-compare .proof ul {grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 22px 0;}
.mp-design-compare .proof li,.mp-design-compare .proof li:first-child {padding: 0; border: 0; align-items: flex-start; gap: 10px;}
.mp-design-compare .proof svg {flex-basis: 34px; width: 34px; height: 34px; padding: 7px; border-radius: 10px;}
.mp-design-compare .proof b {font-size: 13px; white-space: normal;}
.mp-design-compare .proof span {font-size: 11.5px;}
.mp-design-compare .trust .stars {font-size: 15px;}}
.mp-design-compare .care {background: radial-gradient(60% 120% at 100% 0%,rgba(5,30,224,.45),transparent 60%),linear-gradient(160deg,#0a1a44,#040b1c); border: 1px solid var(--line2);}
.mp-design-compare .care .k3 {color: var(--cyan);}
.mp-design-compare .care em {color: var(--ice);}
.mp-design-compare .cr .ab {font-size: 13px; color: var(--muted);}
.mp-design-compare .cr .cta {margin-top: 12px;}
.mp-design-compare .cr b .ab {font-family: "InterV",sans-serif; font-style: normal; font-size: 15px; color: var(--muted); font-weight: 600;}
.mp-design-compare .crumb {font-size: 13px; color: var(--muted2); margin-bottom: 18px;}
.mp-design-compare .crumb a {color: var(--muted);}
.mp-design-compare .crumb i {font-style: normal; margin: 0 6px; opacity: .6;}
.mp-design-compare .crumb b {color: var(--ice); font-weight: 600;}
.mp-design-compare .hero h1 {font-size: clamp(38px,4.8vw,66px);}
.mp-design-compare .finder {padding: 28px; border-radius: 28px; border: 1px solid var(--line2); background: radial-gradient(80% 60% at 100% 0%,rgba(86,202,245,.16),transparent 60%),linear-gradient(165deg,rgba(14,34,74,.85),rgba(4,11,28,.92)); box-shadow: 0 50px 120px rgba(5,30,224,.3); display: flex; flex-direction: column; gap: 10px;}
.mp-design-compare .finder h2 {margin: 4px 0 8px; font-size: 26px; letter-spacing: -.02em;}
.mp-design-compare .finder>a {display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 18px; border-radius: 16px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); transition: border-color .2s,background .2s;}
.mp-design-compare .finder>a:hover {border-color: var(--cyan); background: rgba(86,202,245,.06);}
.mp-design-compare .finder>a span {color: #e8f1ff; font-size: 15px;}
.mp-design-compare .finder>a b {font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; color: var(--ice); white-space: nowrap;}
.mp-design-compare .finder>a.on {border-color: rgba(86,202,245,.6); background: rgba(86,202,245,.08);}
.mp-design-compare .finder .fine {text-align: center; margin: 6px 0 0 !important;}
.mp-design-compare .finder .fine a {color: var(--ice); text-decoration: underline;}
.mp-design-compare .chk {list-style: none; padding: 0; margin: 0; display: grid; gap: 10px;}
.mp-design-compare .chk li {display: flex; gap: 10px; align-items: flex-start; color: #e8f1ff; line-height: 1.45; font-size: 14.5px;}
.mp-design-compare .chk li:before {content: ""; flex: 0 0 19px; height: 19px; margin-top: 1px; border-radius: 50%; background: rgba(86,202,245,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%2356CAF5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/19px no-repeat; border: 1px solid rgba(86,202,245,.35);}
.mp-design-compare .xl {list-style: none; padding: 0; margin: 0; display: grid; gap: 10px;}
.mp-design-compare .xl li {display: flex; gap: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.45;}
.mp-design-compare .xl li:before {content: "×"; flex: 0 0 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2); color: var(--muted2); font-size: 13px;}
.mp-design-compare .rail {display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px;}
.mp-design-compare .rail::-webkit-scrollbar {display: none;}
.mp-design-compare .pgs .pg {flex: 1 0 calc((100% - 48px)/4); min-width: 250px; scroll-snap-align: start;}
.mp-design-compare .pg {position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: 24px; border: 1px solid var(--line); background: var(--bg2); transition: border-color .2s,transform .2s;}
.mp-design-compare .pg:hover {border-color: var(--line2); transform: translateY(-3px);}
.mp-design-compare .pg.on {border-color: var(--cyan); background: linear-gradient(165deg,rgba(26,52,110,.65),rgba(6,16,40,.9)); box-shadow: 0 34px 90px rgba(5,30,224,.3);}
.mp-design-compare .pg h3 {margin: 0; font-size: 21px; letter-spacing: -.02em;}
.mp-design-compare .stretch:after {content: ""; position: absolute; inset: 0; border-radius: 24px;}
.mp-design-compare .pg .cl {margin: 0; color: var(--muted); font-size: 14.5px; min-height: 2.9em;}
.mp-design-compare .tagb.ghost {visibility: hidden;}
.mp-design-compare .anchor {position: absolute; top: -90px;}
.mp-design-compare .kn {display: flex; align-items: baseline; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.mp-design-compare .kn b {font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 46px; line-height: 1; color: #fff;}
.mp-design-compare .kn span {color: var(--muted); font-size: 14px;}
.mp-design-compare .pg .chk {flex: 1;}
.mp-design-compare .pz {display: flex; flex-direction: column; gap: 2px; margin-top: 4px;}
.mp-design-compare .pz b {font-family: var(--serif); font-style: italic; font-weight: 350; font-size: 30px; color: #fff;}
.mp-design-compare .pz small {color: var(--muted); font-size: 13px;}
.mp-design-compare .pa {position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 6px;}
.mp-design-compare .pa .cta2 {text-align: center; font-size: 14px;}
.mp-design-compare .cta.sm {min-height: 46px; padding: 0 18px; border-radius: 13px; font-size: 15px;}
.mp-design-compare .swipe {display: none; color: var(--muted2); font-size: 12.5px; margin: 8px 0 0; text-align: right;}
.mp-design-compare .note2 {margin: 16px 0 0; color: var(--muted); font-size: 14px;}
.mp-design-compare .tbw {overflow-x: auto; border: 1px solid var(--line); border-radius: 24px; background: var(--bg2); scrollbar-width: thin;}
.mp-design-compare .cmp {width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 14.5px;}
.mp-design-compare .cmp th,.mp-design-compare .cmp td {padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle;}
.mp-design-compare .cmp thead th {position: sticky; top: 0; background: #071230; z-index: 2; font-size: 15px; padding: 18px 16px;}
.mp-design-compare .cmp thead th a {display: flex; flex-direction: column; gap: 3px; color: #fff; font-weight: 750;}
.mp-design-compare .cmp thead th span {font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); font-weight: 700;}
.mp-design-compare .cmp tbody th {text-align: left; font-weight: 600; color: #dfe9fb; width: 26%;}
.mp-design-compare .cmp .c0,.mp-design-compare .cmp tbody th {position: sticky; left: 0; z-index: 1; background: #050d22; text-align: left;}
.mp-design-compare .cmp thead .c0 {z-index: 3; color: var(--muted2); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;}
.mp-design-compare .cmp td {color: var(--muted);}
.mp-design-compare .cmp td.on,.mp-design-compare .cmp th.on {background: rgba(86,202,245,.07);}
.mp-design-compare .cmp thead th.on {background: #0b2150; box-shadow: inset 0 3px 0 var(--cyan);}
.mp-design-compare .cmp .y {display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(86,202,245,.14); color: var(--cyan); font-weight: 800; font-size: 13px;}
.mp-design-compare .cmp .no {color: var(--muted2);}
.mp-design-compare .cmp tr:nth-last-child(4) td,.mp-design-compare .cmp tr:nth-last-child(3) td,.mp-design-compare .cmp tr:nth-last-child(2) td {color: #fff; font-weight: 650;}
.mp-design-compare .cmp tr.act td,.mp-design-compare .cmp tr.act th {border-bottom: 0; padding: 18px 12px;}
.mp-design-compare .needs {display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;}
.mp-design-compare .nd {display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 22px; border: 1px solid var(--line); background: var(--bg2); transition: border-color .2s;}
.mp-design-compare .nd:hover {border-color: var(--cyan);}
.mp-design-compare .nd .q {font-family: var(--serif); font-style: italic; font-weight: 350; font-size: 21px; line-height: 1.3; color: #fff;}
.mp-design-compare .nd b {color: var(--cyan); font-size: 15px;}
.mp-design-compare .nd small {color: var(--muted); font-size: 14px; line-height: 1.5;}
.mp-design-compare .steps4 {display: grid; grid-template-columns: repeat(4,1fr); gap: 14px;}
.mp-design-compare .steps4 div {padding: 26px 22px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(170deg,rgba(14,34,74,.45),rgba(4,11,28,.9));}
.mp-design-compare .steps4 .sn {font-size: 44px;}
.mp-design-compare .steps4 b {display: block; font-size: 18px; margin: 12px 0 6px;}
.mp-design-compare .steps4 p {margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55;}
.mp-design-compare .duo {display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.mp-design-compare .box {padding: 28px; border-radius: 26px; border: 1px solid var(--line); background: var(--bg2);}
.mp-design-compare .box h3 {margin: 8px 0 6px; font-size: 24px; letter-spacing: -.02em;}
.mp-design-compare .box p {margin: 0; color: var(--muted); line-height: 1.55;}
.mp-design-compare .zl {list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px;}
.mp-design-compare .zl li {display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 14.5px;}
.mp-design-compare .zl li span {color: #fff; font-weight: 700; white-space: nowrap;}
.mp-design-compare .box.bt {display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; transition: border-color .2s;}
.mp-design-compare .box.bt:hover {border-color: var(--line2);}
.mp-design-compare .btim {position: relative; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; background: #fff;}
.mp-design-compare .btim img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5%;}
.mp-design-compare .pzs {display: block; margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 24px; color: #fff;}
.mp-design-compare .pzs small {font-family: "InterV",sans-serif; font-style: normal; font-size: 14px; color: var(--ice); margin-left: 10px; font-weight: 650;}
.mp-design-compare .lim {display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.mp-design-compare .lim>div {padding: 26px; border-radius: 22px; border: 1px solid var(--line);}
.mp-design-compare .lim h3 {margin: 0 0 14px; font-size: 18px;}
.mp-design-compare .menu {position: fixed; inset: 0; z-index: 40; background: rgba(1,5,15,.97); backdrop-filter: blur(16px); overflow: auto;}
.mp-design-compare .mwrap {width: min(1200px,100% - 40px); margin: 0 auto; padding: 16px 0 40px;}
.mp-design-compare .mhead {display: flex; justify-content: space-between; align-items: center; height: 56px; margin-bottom: 24px;}
.mp-design-compare .mgrid {display: grid; grid-template-columns: repeat(5,1fr); gap: 28px;}
.mp-design-compare .mgrid p {margin: 0 0 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); font-weight: 700;}
.mp-design-compare .mgrid a {display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600;}
.mp-design-compare .mgrid a small {color: var(--muted2); font-weight: 500; font-size: 12.5px; white-space: nowrap;}
.mp-design-compare .mgrid a.hi {color: var(--ice);}
.mp-design-compare .ft {margin-top: 100px; border-top: 1px solid var(--line); background: linear-gradient(180deg,rgba(5,30,224,.06),transparent); padding: 56px 0 26px; color: var(--muted);}
.mp-design-compare .fb .logo {margin-bottom: 12px;}
.mp-design-compare .fb b {display: block; color: #fff; font-size: 17px;}
.mp-design-compare .fb p {margin: 6px 0 18px; font-size: 14px; line-height: 1.55; max-width: 300px;}
.mp-design-compare .ft nav {display: flex; flex-direction: column; gap: 9px;}
.mp-design-compare .ft nav p {margin: 0 0 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); font-weight: 700;}
.mp-design-compare .ft nav a {font-size: 14px; color: #cdd9ee;}
.mp-design-compare .ft nav a:hover {color: #fff;}
@media (max-width:899px) {.mp-design-compare .finder {padding: 20px;}
.mp-design-compare .finder>a {padding: 13px 14px;}
.mp-design-compare .rail {margin-right: -16px; padding-right: 16px; gap: 12px;}
.mp-design-compare .pgs .pg {flex: 0 0 84%; min-width: 0;}
.mp-design-compare .swipe {display: block;}
.mp-design-compare .cmp {min-width: 720px; font-size: 13.5px;}
.mp-design-compare .cmp th,.mp-design-compare .cmp td {padding: 12px 10px;}
.mp-design-compare .cmp tbody th {width: 150px; min-width: 150px;}
.mp-design-compare .needs {grid-template-columns: 1fr;}
.mp-design-compare .steps4 {grid-template-columns: 1fr 1fr; gap: 10px;}
.mp-design-compare .steps4 div {padding: 18px 16px;}
.mp-design-compare .steps4 .sn {font-size: 34px;}
.mp-design-compare .steps4 b {font-size: 16px;}
.mp-design-compare .duo,.mp-design-compare .lim {grid-template-columns: 1fr;}
.mp-design-compare .box.bt {grid-template-columns: 110px 1fr; gap: 16px; padding: 20px;}
.mp-design-compare .mgrid {grid-template-columns: 1fr; gap: 22px;}
.mp-design-compare .fb {grid-column: 1/-1;}}
.mp-design-compare .ft .cta.sm {white-space: nowrap;}
.mp-design-compare .mgrid a {flex-direction: column; justify-content: flex-start; gap: 2px;}
.mp-design-compare .mgrid a small {white-space: normal;}
.mp-design-compare .tabs {display: none;}
.mp-design-compare .tabhint {display: none;}
@media (max-width:899px) {.mp-design-compare .tabs {display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 12px; padding: 5px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg2);}
.mp-design-compare .tabs button {appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; padding: 10px 4px; border-radius: 12px; cursor: pointer;}
.mp-design-compare .tabs button.on {background: linear-gradient(135deg,#d9f4ff,#56CAF5); color: #031024;}
.mp-design-compare .tbw {overflow: visible;}
.mp-design-compare .cmp {min-width: 0; table-layout: fixed;}
.mp-design-compare .cmp th,.mp-design-compare .cmp td {display: none;}
.mp-design-compare .cmp th:first-child,.mp-design-compare .cmp td:first-child {display: table-cell;}
.mp-design-compare .cmp[data-c="2"] :is(th,.mp-design-compare td):nth-child(2),.mp-design-compare .cmp[data-c="3"] :is(th,.mp-design-compare td):nth-child(3),.mp-design-compare .cmp[data-c="4"] :is(th,.mp-design-compare td):nth-child(4),.mp-design-compare .cmp[data-c="5"] :is(th,.mp-design-compare td):nth-child(5) {display: table-cell;}
.mp-design-compare .cmp tbody th {width: 52%; min-width: 0; position: static;}
.mp-design-compare .cmp .c0 {position: static;}
.mp-design-compare .cmp td {text-align: right;}
.mp-design-compare .cmp thead th {text-align: right;}
.mp-design-compare .cmp thead th a {align-items: flex-end;}
.mp-design-compare .cmp tr.act th {display: none;}
.mp-design-compare .cmp tr.act td {text-align: center;}
.mp-design-compare .cmp tr.act td a {width: 100%;}
.mp-design-compare .tabhint {display: block; color: var(--muted2); font-size: 12.5px; margin: 10px 0 0;}}
.mp-design-compare .vis {position: relative; padding: 28px 28px 22px; border-radius: 30px; border: 1px solid var(--line2); background: radial-gradient(70% 50% at 100% 0%,rgba(86,202,245,.18),transparent 60%),radial-gradient(60% 50% at 0% 100%,rgba(5,30,224,.35),transparent 65%),linear-gradient(165deg,rgba(14,34,74,.88),rgba(3,9,24,.95)); box-shadow: 0 60px 140px rgba(5,30,224,.32),inset 0 1px 0 rgba(255,255,255,.08);}
.mp-design-compare .vh h2 {margin: 6px 0 18px; font-size: clamp(24px,2.3vw,30px); letter-spacing: -.025em; line-height: 1.15;}
.mp-design-compare .vl {display: flex; flex-direction: column; gap: 8px;}
.mp-design-compare .vr {display: grid; grid-template-columns: 1.05fr 1.15fr .9fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.025); transition: border-color .2s,background .2s;}
.mp-design-compare .vr:hover {border-color: var(--line2); background: rgba(86,202,245,.05);}
.mp-design-compare .vr.on {border-color: rgba(86,202,245,.65); background: linear-gradient(90deg,rgba(86,202,245,.12),rgba(86,202,245,.03)); box-shadow: 0 18px 50px rgba(5,30,224,.35);}
.mp-design-compare .vn b {display: block; font-size: 15px; letter-spacing: -.01em;}
.mp-design-compare .vn span {display: block; font-size: 11.5px; color: var(--muted2); margin-top: 2px;}
.mp-design-compare .vn em {font-family: inherit; font-style: normal; color: var(--cyan); font-weight: 700;}
.mp-design-compare .vb {display: flex; flex-direction: column; gap: 6px;}
.mp-design-compare .vb i {display: block; height: 8px; border-radius: 99px; background: rgba(160,205,255,.1); position: relative; overflow: hidden;}
.mp-design-compare .vb i:after {content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 8px; border-radius: 99px; background: linear-gradient(90deg,#2a5bff,#56CAF5 70%,#bfeaff); box-shadow: 0 0 14px rgba(86,202,245,.6);}
.mp-design-compare .vb small {font-size: 12px; color: var(--muted);}
.mp-design-compare .vp {text-align: right;}
.mp-design-compare .vp b {display: block; font-family: var(--serif); font-style: italic; font-weight: 380; font-size: 20px; color: #fff; white-space: nowrap;}
.mp-design-compare .vp small {display: block; font-size: 11px; color: var(--muted2); white-space: nowrap;}
.mp-design-compare .vr.on .vp small {color: var(--cyan);}
.mp-design-compare .vf {display: flex; justify-content: center; gap: 8px; margin-top: 16px; font-size: 13.5px; font-weight: 650; color: var(--ice);}
.mp-design-compare .cmp tr:nth-last-child(5) td {color: #fff; font-weight: 650;}
.mp-design-compare .mgrid {grid-template-columns: repeat(3,minmax(0,320px)); gap: 48px;}
@media (max-width:899px) {.mp-design-compare .vis {padding: 20px 16px 16px;}
.mp-design-compare .vr {grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px 14px;}
.mp-design-compare .vb {grid-column: 1/-1; grid-row: 2;}
.mp-design-compare .vp b {font-size: 18px;}
.mp-design-compare .mgrid {grid-template-columns: 1fr; gap: 22px;}}