.bs-hero{position:relative;background:var(--c-ink)}
.bs-hero .halves{min-height:100svh}
.bs-hero .half{text-decoration:none;gap:calc(12px * var(--s))}
.bs-hero .half .kicker{margin-bottom:calc(8px * var(--s))}
.bs-hero .half .t-read{margin-bottom:calc(12px * var(--s))}
.half__go{display:inline-flex;align-items:center;gap:calc(10px * var(--s));color:#fff;opacity:.75;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.half__go svg{width:calc(10px * var(--s));height:calc(10px * var(--s));stroke:currentColor;fill:none;stroke-width:1.5}
.half:hover .half__go{opacity:1;transform:translateY(4px)}
.bs-hero .half .media img{transition:transform 1.6s var(--ease)}
.bs-hero .half:hover .media img{transform:scale(1.04)}
.bs-hero__over{position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;padding-top:calc(110px * var(--s))}
.bs-hero__over .field{display:flex;flex-direction:column;gap:calc(18px * var(--s));color:#fff}
.bs-hero__over .crumb a{pointer-events:auto}
.bs-hero__over .kicker{color:#fff}
.bs-hero__over .t-h3{color:#fff;max-width:calc(690px * var(--s));text-shadow:0 1px 24px rgba(7,11,32,.5)}
.bs-hero .half::before{content:"";position:absolute;inset:0 0 auto 0;height:calc(320px * var(--s));background:linear-gradient(180deg,rgba(7,11,32,.55),rgba(7,11,32,0));z-index:1;pointer-events:none}

.way{border-top:1px solid var(--t-head)}
.way__q{display:grid;grid-template-columns:calc(453px * var(--s)) 1fr;gap:var(--gut);padding-block:calc(36px * var(--s));border-bottom:1px solid var(--t-line);align-items:start}
.way__no{font-size:var(--fs-ui);letter-spacing:var(--tr-ui);color:var(--c-accent);padding-top:calc(8px * var(--s))}
.way__result{display:grid;grid-template-columns:calc(90px * var(--s)) 1fr;gap:var(--gut);padding-block:calc(40px * var(--s)) 0;align-items:start}
.way__verdict{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);font-weight:400;color:var(--t-head);min-height:var(--lh-h3);max-width:calc(920px * var(--s));transition:opacity .5s var(--ease)}
.way__verdict em{font-style:normal;color:var(--c-accent)}
.way__verdict.is-swap{opacity:0}

.compare>div{position:relative;transition:background .8s var(--ease)}
.compare>div::before{content:"Leans this way";position:absolute;left:0;right:0;top:-1px;height:0;overflow:hidden;border-top:0 solid var(--c-accent);font-size:var(--fs-xs);letter-spacing:var(--tr-xs);text-transform:uppercase;font-weight:500;color:var(--c-accent);text-align:right;padding:0 calc(40px * var(--s));transition:height .6s var(--ease),border-top-width .6s var(--ease),padding .6s var(--ease)}
.compare>div.is-reco{background:var(--c-paper)}
.compare>div.is-reco::before{height:calc(40px * var(--s));line-height:calc(40px * var(--s));border-top-width:2px}
.compare>div.is-reco .media{margin-top:calc(40px * var(--s))}
.compare .media{transition:margin-top .6s var(--ease)}

.bs-panel{background:var(--c-shade);border:1px solid rgba(255,255,255,.08);padding-inline:calc(40px * var(--s))}
.bs-panel .media{aspect-ratio:1.5;max-height:44svh;min-height:calc(260px * var(--s));height:auto;align-self:end;margin-top:calc(100px * var(--s))}
.bs-panel .media img{transition:transform 2s var(--ease)}
.bs-panel:hover .media img{transform:scale(1.03)}
.bs-panel__body{display:flex;flex-direction:column;gap:calc(16px * var(--s));position:relative;z-index:1;max-width:calc(690px * var(--s))}
.bs-panel .kicker{color:#fff}
.bs-panel .wm{right:calc(24px * var(--s));top:calc(40px * var(--s));font-size:calc(200px * var(--s));letter-spacing:calc(-8px * var(--s));-webkit-text-stroke:1px rgba(255,255,255,.35)}
.bs-panel--intro{width:min(calc(690px * var(--s)),62vw);background:transparent;border:0;padding-inline:0 calc(60px * var(--s))}
.bs-panel--intro .bs-panel__body{gap:calc(24px * var(--s))}
.bs-panel__arrow{display:block;width:calc(96px * var(--s));margin-top:calc(20px * var(--s));color:var(--c-accent)}
.bs-panel__arrow svg{width:100%;stroke:currentColor;fill:none;stroke-width:1.2}
.hscroll__bar{z-index:2}

.bs-ruler__ticks{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gut);font-size:var(--fs-xs);letter-spacing:var(--tr-xs);text-transform:uppercase;font-weight:500;color:var(--t-text);padding-bottom:calc(10px * var(--s))}
.bs-ruler{grid-auto-flow:row;grid-template-columns:repeat(6,1fr)}
.bs-ruler .ruler__i{grid-column:span 2;padding-right:calc(20px * var(--s))}
.bs-ruler .t-read{max-width:calc(420px * var(--s))}
.bs-ruler .media{max-width:calc(420px * var(--s))}

@media (max-width:980px){
  .bs-hero{display:flex;flex-direction:column}
  .bs-hero .halves{min-height:0}
  .bs-hero__over{position:relative;order:-1;padding:calc(110px * var(--s)) 0 calc(40px * var(--s))}
  .bs-hero__over .field{color:#fff}
  .bs-hero .half::before{display:none}
  .way__q{grid-template-columns:1fr}
  .way__q .chipset{grid-column:2}
  .way__result{grid-template-columns:calc(60px * var(--s)) 1fr}
  .bs-ruler__ticks{display:none}
  .bs-ruler{grid-template-columns:1fr}
  .bs-ruler .ruler__i{grid-column:auto;padding-right:0;padding-bottom:calc(40px * var(--s))}
  .bs-panel{padding-inline:calc(24px * var(--s))}
  .bs-panel .media{margin-top:calc(60px * var(--s));max-height:none}
  .bs-panel--intro{width:min(calc(690px * var(--s)),86vw);padding-inline:0}
  .bs-panel .wm{font-size:calc(120px * var(--s));top:calc(12px * var(--s))}
}
@media (prefers-reduced-motion:reduce){
  .compare>div::before,.compare .media,.compare>div{transition:none}
}

.bs-ruler .ruler__i{display:flex;flex-direction:column}
.bs-ruler .ruler__i > .t-read{margin-bottom:calc(40px * var(--s))}
.bs-ruler .ruler__i > .media{margin-top:auto}