.buy-hero { position: relative; height: 100svh; min-height: 700px; max-height: 1300px; background: #d7dce0; }
.buy-hero > .scene { position: absolute; inset: 0; background: #d7dce0; }
.buy-hero .frame > img { opacity: .001; transition: opacity calc(1s * var(--bk, 1)) cubic-bezier(.37, 0, .63, 1); }
.buy-hero .frame > img.is-on { opacity: 1; z-index: 2; }
.buy-hero .frame > img.is-out { opacity: 1; z-index: 1; transition: none; }
.buy-hero .hint { z-index: 3; }
.page-buy .buy-hero .hero__words { top: calc(var(--head) + clamp(20px, 3.4vh, 48px)); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 3vw, 64px);
  align-items: start; }
.page-buy .buy-hero .kicker { grid-column: 1 / -1; color: var(--ink-2); }
.page-buy .buy-hero .kicker::before { background: currentColor; }
.page-buy .buy-hero .buy-lead { grid-column: 1; grid-row: 2; font-size: clamp(50px, 5.4vw, 104px); color: var(--ink); max-width: none; }
.page-buy .buy-hero .hero__side { grid-column: 2; grid-row: 2; align-self: start; padding-top: calc(.08 * clamp(50px, 5.4vw, 104px) - .29 * clamp(17px, 1.2vw, 22px)); }
.page-buy .buy-hero .hero__words .under { max-width: 30em; color: var(--ink-2); margin: 0; font-size: clamp(17px, 1.2vw, 22px); }
.page-buy .buy-hero .hero__words .btn { margin-top: clamp(18px, 2.2vh, 24px); }
.page-buy .buy-ill { left: var(--gut); bottom: 22px; }

.hint { position: absolute; inset: 0; z-index: 2; pointer-events: none; --ha: 33.43%; --hb: 65.73%; --hy: 65.22%; }
.hint__line { position: absolute; left: var(--ha); right: calc(100% - var(--hb)); top: var(--hy); height: 9px; margin-top: -4px; }
.hint__line i { position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: rgba(6, 9, 13, .52); transform-origin: 0 50%; transform: scaleX(0);
  transition: transform calc(.26s * var(--bk, 1)) cubic-bezier(.65, 0, .35, 1); }
.hint__line::before, .hint__line::after { content: ''; position: absolute; top: 0; width: 1px; height: 9px; background: rgba(6, 9, 13, .62); opacity: .001; transition: opacity calc(.2s * var(--bk, 1)) ease; }
.hint__line::before { left: 0; } .hint__line::after { right: 0; }
.hint__save { position: absolute; top: var(--hy); left: calc((var(--ha) + var(--hb)) / 2); transform: translate(-50%, -50%) scale(.9); padding: 5px 8px 4px; background: var(--hi); color: #fff;
  font-family: var(--mono); font-size: 12px; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; white-space: nowrap; opacity: .001;
  transition: opacity calc(.2s * var(--bk, 1)) ease, transform calc(.2s * var(--bk, 1)) ease; }
.hint.is-on .hint__line i { transform: none; transition: transform calc(.62s * var(--bk, 1)) cubic-bezier(.65, 0, .35, 1); }
.hint.is-on .hint__line::before { opacity: 1; transition: opacity calc(.25s * var(--bk, 1)) ease; }
.hint.is-on .hint__line::after { opacity: 1; transition: opacity calc(.25s * var(--bk, 1)) ease calc(.5s * var(--bk, 1)); }
.hint.is-on .hint__save { opacity: 1; transform: translate(-50%, -50%); transition: opacity calc(.3s * var(--bk, 1)) ease calc(.68s * var(--bk, 1)), transform calc(.45s * var(--bk, 1)) var(--ease) calc(.68s * var(--bk, 1)); }

.products { position: absolute; z-index: 6; right: var(--gut); bottom: 18px; display: flex; gap: 2px; background: rgba(247, 249, 251, .8); border: 1px solid rgba(12, 16, 21, .14); padding: 3px; }
.products button { border: 0; background: none; padding: 8px 12px 7px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.products button[aria-pressed="true"] { background: var(--ink); color: #fff; }
@media (hover: hover) { .products button[aria-pressed="false"]:hover { background: rgba(6, 9, 13, .07); color: var(--ink); } }

.cmp2 { position: relative; padding: clamp(56px, 5vw, 96px) var(--gut) clamp(64px, 6vw, 110px); background: var(--ground); }
.cmp2__pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--steel); border-bottom: 1px solid var(--rule); }
.cmp2__pair::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: var(--rule); transform-origin: 50% 0; }
.cmp2__a { text-align: right; padding: clamp(22px, 1.8vw, 34px) clamp(28px, 3vw, 60px) clamp(22px, 1.8vw, 34px) 0; }
.cmp2__b { padding: clamp(22px, 1.8vw, 34px) 0 clamp(22px, 1.8vw, 34px) clamp(28px, 3vw, 60px); }
.page-buy .cmp2 .exr-k { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cmp2 dl { margin: 14px 0 0; }
.cmp2 dl > div { padding: 12px 0 13px; border-top: 1px solid var(--rule-2); }
.cmp2 dt { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cmp2 dd { margin: 4px 0 0; font-size: clamp(26px, 2.1vw, 40px); letter-spacing: -.025em; font-weight: 300; font-stretch: var(--wide); color: var(--ink); line-height: 1.1;
  font-variant-numeric: tabular-nums; transition: opacity calc(.22s * var(--bk, 1)) ease; }
.cmp2 .cmp2__price dd { font-size: clamp(44px, 4.2vw, 82px); letter-spacing: -.04em; }
.page-buy .cmp2 dd.hi { color: var(--hi); }
.page-buy .cmp2 .is-x dd { color: var(--ex); }
.cmp2 .cmp2__weigh { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; font-stretch: 100%; line-height: 1.4; }
.cmp2 .cmp2__weigh[hidden] { display: none; }
.cmp2.is-swap dd[data-v] { opacity: .001; }
.cmp2__ill { display: flex; justify-content: center; margin-top: 18px; }
.page-buy .cmp2__ill { display: flex; }
.page-buy .cmp2__ill .nw { white-space: nowrap; }
html.js .cmp2__pair::after { transform: scaleY(0); transition: transform .7s cubic-bezier(.65, 0, .35, 1) .1s; }
html.js .cmp2 :is(.cmp2__a, .cmp2__b) { opacity: .001; transition: opacity .6s ease .3s, transform .8s var(--ease) .3s; }
html.js .cmp2 .cmp2__a { transform: translateX(-10px); }
html.js .cmp2 .cmp2__b { transform: translateX(10px); }
html.js .cmp2.is-on .cmp2__pair::after { transform: none; }
html.js .cmp2.is-on :is(.cmp2__a, .cmp2__b) { opacity: 1; transform: none; }

.inv-v { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 90px); align-items: center; padding: clamp(96px, 9vw, 176px) var(--gut);
  border-top: 1px solid var(--rule); background: var(--ground); }
.page-buy .inv-v .body { margin-top: 24px; }
.page-buy .doc { position: relative; margin: 0; background: #fbfcfd; border: 1px solid #cfd7e0; box-shadow: 0 1px 0 rgba(6, 9, 13, .04), 0 22px 44px -30px rgba(14, 26, 44, .45);
  font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.doc__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 14px; background: #e8ecf1; border-bottom: 1px solid #d7dde5; font-size: 13.5px;
  color: var(--ink); font-weight: 500; position: relative; z-index: 3; }
.doc__bar span:last-child { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.doc__ill { position: absolute; left: 0; top: calc(100% + 12px); }
.rank { position: relative; }
.rank li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 13em) minmax(0, 1fr) 7.5em 3.6em; gap: 14px; align-items: center; padding: 12px 14px;
  border-bottom: 1px solid #e6eaef; background: #fbfcfd; transition: transform .8s cubic-bezier(.65, 0, .35, 1), background-color .45s ease, box-shadow .45s ease; }
.rank li:last-child { border-bottom: 0; }
.page-buy .rank .num { font-size: 11px; transition: opacity .35s ease; }
.rank b { font-weight: 400; color: var(--ink); }
.rank i { display: block; height: 8px; width: var(--w); background: #b3bfcd; transform-origin: 0 50%; transition: transform .55s var(--ease), background-color .45s ease; }
.rank .r { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.rank em { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); transition: opacity .35s ease .15s; }
.rank .is-first { background: #f1f4f7; }
.rank .is-first i { background: var(--ink); }
.rank.is-pre li { transform: translateY(var(--dy, 0px)); }
.rank.is-bars i { transform: scaleX(0); }
.rank:not(.is-ranked) .num, .rank:not(.is-ranked) em { opacity: .001; }
.rank:not(.is-ranked) .is-first { background: #fbfcfd; }
.rank:not(.is-ranked) .is-first i { background: #b3bfcd; }
.rank.is-moving .is-first { z-index: 2; box-shadow: 0 10px 24px -14px rgba(14, 26, 44, .45); }
.rank.is-moving li:not(.is-first) { z-index: 1; }

.looks-v { padding: clamp(96px, 9vw, 176px) var(--gut); border-top: 1px solid var(--rule); background: var(--ground); }
.looks-v__list { margin-top: clamp(48px, 4.4vw, 84px); border-top: 1px solid var(--steel); }
.looks-v__list li { display: grid; grid-template-columns: 80px minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 40px); padding: clamp(22px, 2vw, 34px) 0; border-bottom: 1px solid var(--rule);
  align-items: baseline; }
.page-buy .looks-v__list .L3 { font-size: clamp(22px, 1.7vw, 32px); font-weight: 300; letter-spacing: -.022em; }
html.js .looks-v__list li > * { opacity: .001; transform: translateY(12px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
html.js .looks-v__list li > .body { transition-delay: .07s; }
html.js .looks-v__list li.is-on > * { opacity: 1; transform: none; }

.get-v { padding: clamp(96px, 9vw, 176px) var(--gut) clamp(110px, 9vw, 180px); border-top: 1px solid var(--rule); background: var(--ground); }
.get-v__words { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 90px); align-items: end; margin-bottom: clamp(40px, 3.6vw, 70px); }
.page-buy .get-v__words .body { max-width: 40em; }
.doc--report table { width: 100%; border-collapse: collapse; }
.doc--report th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); padding: 11px 16px;
  border-bottom: 1px solid #d7dde5; vertical-align: bottom; }
.doc--report td { padding: 14px 16px; border-bottom: 1px solid #e6eaef; vertical-align: baseline; font-size: 15px; color: var(--ink-2); }
.doc--report td:first-child { color: var(--ink); }
.doc--report .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-buy .doc--report td.hi { color: var(--improved-s); font-weight: 500; }
.page-buy .doc--report td.ex-mark { color: var(--ex); }
.doc--report td small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ex); }
.doc--report tr.x td:first-child { box-shadow: inset 3px 0 0 var(--ex); }
.doc--report tfoot td { border-bottom: 0; padding-top: 18px; padding-bottom: 22px; color: var(--ink); font-size: 15px; }
.page-buy .doc--report tfoot td.hi { font-size: 26px; letter-spacing: -.02em; font-weight: 400; color: var(--hi); }
.doc--report .doc__foot { padding: 0 16px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.page-buy .get-v__ill { margin-top: 14px; }
.doc--report .tf-p { display: none; }
.page-buy .dbl--fig::before { bottom: -5px; right: .06em; } .page-buy .dbl--fig::after { bottom: -11px; right: .06em; }
.doc--report .dbl::before, .doc--report .dbl::after { transform-origin: 0 50%; transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
.doc--report .dbl::after { transition-delay: .16s; }
html.js .doc--report:not(.is-ruled) .dbl::before, html.js .doc--report:not(.is-ruled) .dbl::after { transform: scaleX(0); }

.doc--report .rp-fold, .doc--report .tf-t { display: none; }
@media (min-width: 761px) and (max-width: 1080px) {
  .doc--report thead th:is(:nth-child(5), :nth-child(7)), .doc--report tbody td:is(:nth-child(5), :nth-child(7)) { display: none; }
  .doc--report .tf-d { display: none; } .doc--report .tf-t { display: table-row; }
  .doc--report thead th:first-child { width: 31%; }
  .doc--report th, .doc--report td { padding-left: 12px; padding-right: 12px; }
  .doc--report :is(th, td):first-child { padding-left: 18px; } .doc--report :is(th, td):last-child { padding-right: 18px; }
  .doc--report tbody td { padding-top: 16px; padding-bottom: 17px; }
  .doc--report .rp-fold { display: block; margin-top: 9px; }
  .doc--report .rp-cash { display: block; font-size: 14px; line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .doc--report .rp-k { display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); }
  .doc--report .rp-fold .src { display: table; margin-top: 8px; }
}

.fee-v { min-height: calc(var(--mk-top, 24.3vw) + min(24vw, 46vh) * .9 + 24px); }
.page-buy .fee-v .kicker { margin-bottom: clamp(22px, 2vw, 34px); }
.page-buy .fee-v .L1--in { color: var(--ink); }
.fee-v__2 { color: var(--improved); }
.page-buy .fee-v .spread__side { padding-top: clamp(60px, 5.4vw, 100px); }
.page-buy .fee-v__u { color: var(--ink); }
.page-buy .fee-v__s { margin-top: clamp(16px, 1.4vw, 24px); }
.page-buy .fee-v .link { margin-top: clamp(24px, 2vw, 36px); }
.fee-mk { left: 0; top: 0; bottom: 0; width: 66.667vw; --mkw: min(24vw, 46vh);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 200px), transparent calc(100% - 10px)); mask-image: linear-gradient(180deg, #000 calc(100% - 200px), transparent calc(100% - 10px)); }
.fee-mk svg { left: calc(66.667vw - var(--mkw) - 1.4vw); top: var(--mk-top, 24.3vw); }

.page-buy .end-dark__mark { position: absolute; z-index: 0; right: -3.5vw; bottom: -8vw; width: min(50vw, 980px); max-width: none; height: auto; color: #eef1f3; opacity: .105; pointer-events: none; }
html.js .page-buy .end-dark__mark { -webkit-mask: linear-gradient(to top, #000 45%, transparent 55%) 0 0 / 100% 300% no-repeat; mask: linear-gradient(to top, #000 45%, transparent 55%) 0 0 / 100% 300% no-repeat;
  transition: -webkit-mask-position 1.8s cubic-bezier(.35, 0, .25, 1) 1.1s, mask-position 1.8s cubic-bezier(.35, 0, .25, 1) 1.1s; }
html.js .page-buy .buy-end.is-lit .end-dark__mark { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.buy-end { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; }
.page-buy .buy-end__u { margin-top: clamp(22px, 2.6vh, 34px); }
.buy-end__btn { margin-top: clamp(28px, 3.6vh, 44px); }

@media (prefers-reduced-motion: reduce) {
  html.js .cmp2 :is(.cmp2__a, .cmp2__b) { opacity: 1; transform: none; }
  html.js .cmp2__pair::after { transform: none; }
  html.js .page-buy .end-dark__mark { -webkit-mask: none; mask: none; }
  html.js .looks-v__list li > * { opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
  .fee-mk { display: none; }
  .fee-v { min-height: 0; }
}
@media (max-width: 760px) {
  .buy-hero { height: auto; min-height: 0; max-height: none; padding-bottom: 0; display: flex; flex-direction: column; }
  .page-buy .buy-hero .hero__words { position: relative; left: 0; right: 0; top: 0; display: block; padding: calc(var(--head) + 26px) var(--gut) 28px; order: 1; }
  .page-buy .buy-hero .buy-lead { font-size: clamp(44px, 12vw, 58px); }
  .page-buy .buy-hero .hero__side { padding-top: 0; }
  .page-buy .buy-hero .hero__words .under { margin-top: 18px; font-size: 17px; }
  .page-buy .buy-hero .hero__words .btn { margin-top: 22px; }
  .buy-hero > .scene { position: relative; height: 67vw; order: 2; }
  .page-buy .buy-ill { bottom: auto; top: 12px; }
  .products { position: relative; right: auto; bottom: auto; order: 3; margin: 10px var(--gut) 0; justify-content: space-between; }
  .products button { padding: 8px 6px 7px; font-size: 12px; letter-spacing: .04em; }
  .hint__save { font-size: 12px; padding: 4px 6px 3px; }
  .cmp2 { padding: 40px var(--gut) 56px; }
  .cmp2__a { padding-right: 16px; } .cmp2__b { padding-left: 16px; }
  .cmp2 dd { font-size: 22px; }
  .cmp2 .cmp2__price dd { font-size: 34px; }
  .cmp2 .cmp2__weigh { font-size: 12px; }
  .inv-v, .get-v__words { grid-template-columns: minmax(0, 1fr); }
  .inv-v { padding: 64px var(--gut) 90px; }
  .rank li { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; }
  .rank i, .rank em { display: none; }
  .looks-v { padding: 64px var(--gut); }
  .looks-v__list li { grid-template-columns: 40px minmax(0, 1fr); }
  .looks-v__list .body { grid-column: 2; }
  .get-v { padding: 64px var(--gut) 90px; }
  .doc--report { overflow: hidden; }
  .page-buy .doc { box-shadow: 0 1px 0 rgba(6, 9, 13, .04), 0 12px 22px -16px rgba(14, 26, 44, .38); }
  .doc--report thead th:is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(7)), .doc--report tbody td:is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(7)) { display: none; }
  .doc--report .tf-d { display: none; } .doc--report .tf-p { display: table-row; }
  .doc--report th, .doc--report td { padding: 10px 8px; font-size: 14px; }
  .doc--report th { font-size: 10px; letter-spacing: .05em; }
  .doc--report tfoot td[colspan] { font-size: 12px; }
  .page-buy .doc--report tfoot td.hi { font-size: 20px; color: var(--improved-s); }
  .page-buy .fee-v { padding-bottom: 96vw; }
  .fee-mk { display: block; width: auto; right: 0; top: auto; height: 100vw; --mkw: 92vw; }
  .fee-mk svg { left: 4vw; top: auto; bottom: 0; }
  .page-buy .end-dark__mark { right: -26vw; bottom: -14vw; width: 104vw; }
  .buy-end { min-height: 0; }
}

@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  .buy-hero { height: auto; min-height: 0; max-height: none; padding-bottom: 0; display: flex; flex-direction: column; }
  .page-buy .buy-hero .hero__words { position: relative; left: 0; right: 0; top: 0; padding: calc(var(--head) + 36px) var(--gut) 36px; order: 1; }
  .buy-hero > .scene { position: relative; height: 67vw; order: 2; }
  .page-buy .buy-ill { bottom: auto; top: 12px; }
  .products { position: relative; right: auto; bottom: auto; order: 3; margin: 12px var(--gut) 0; justify-content: space-between; }
}