/* Sell on Ipseum =============================================================
   Desktop follows the 1440 artboard: U1 Hero 900, U2 The math 780,
   U3 Steps 780 (no clip), U4 Ready 520, footer. Phones restack in one column.
   ========================================================================== */

/* U1 Hero ------------------------------------------------------------------- */
.sell-hero { height: 900px; }
.sell-hero .stage { height: 900px; }
.sell-hero .art { position: absolute; inset: 0; pointer-events: none; }
.giant-80 {
  --fs: 560px; --lh: 560px;
  left: 391px; top: 70px;
  font-family: var(--f-display); font-weight: 500; letter-spacing: -28px;
  background-image: linear-gradient(180deg, rgb(29 79 120 / .851) 84px, rgb(19 58 92 / .502) 358.4px, rgb(19 58 92 / 0) 476px);
}
.sell-fade { position: absolute; left: var(--bleed); right: var(--bleed); top: 760px; height: 140px; background: linear-gradient(180deg, rgb(4 6 11 / 0), rgb(4 6 11 / .702) 75%, var(--c-black)); }

.portrait { left: 860px; top: 168px; width: 460px; height: 575px; filter: drop-shadow(0 36px 64px rgb(0 0 0 / .62)); }
.portrait .shade { position: absolute; inset: 0; clip-path: var(--clip, inset(0 round 22px)); background: linear-gradient(180deg, rgb(4 6 11 / 0) 55%, rgb(4 6 11 / .549)); pointer-events: none; }
.portrait > svg.folder-edge { z-index: 3; }
.portrait-cap { position: absolute; left: 956px; top: 764px; padding-left: 20px; }
.portrait-cap::before { content: ""; position: absolute; left: 0; top: 8px; width: 1px; height: 34px; background: rgb(143 195 234 / .4); }
.portrait-cap .n { display: block; font: 500 15px/20px var(--f-text); letter-spacing: -0.1px; color: var(--c-white); }
.portrait-cap .s { display: block; margin-top: 4px; font: 400 14px/21px var(--f-text); color: var(--c-haze); }
.share-card { left: 724px; top: 548px; z-index: 4; }

.sell-eyebrow { position: absolute; left: 72px; top: 180px; display: flex; align-items: center; color: var(--c-mist); }
.sell-eyebrow .dot { width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--c-blue); }
.sell-title { position: absolute; left: 68px; top: 216px; margin: 0; font: 400 96px/92px var(--f-display); letter-spacing: -3.8px; white-space: nowrap; }
.sell-title > span { display: block; }
.sell-title em { font-style: normal; color: var(--c-blue); }
.sell-lead { position: absolute; left: 72px; top: 628px; width: 470px; font: 400 20px/30px var(--f-text); letter-spacing: -0.2px; color: var(--c-mist); }
.sell-actions { position: absolute; left: 72px; top: 788px; display: flex; gap: 12px; }

/* U2 The math ---------------------------------------------------------------- */
.sell-math { height: 780px; }
.sell-math .stage { height: 780px; }
.math-eyebrow { position: absolute; left: 72px; top: 132px; color: var(--c-mist); }
.math-title { position: absolute; left: 72px; top: 168px; margin: 0; font: 400 64px/72px var(--f-display); letter-spacing: -2px; white-space: nowrap; }
.math-title > span { display: block; }
.math-title em { font-style: normal; color: var(--c-blue); }
.math-text { position: absolute; left: 72px; top: 348px; width: 440px; }
.math-rows { position: absolute; left: 72px; top: 470px; width: 440px; margin: 0; border-bottom: 1px solid rgb(255 255 255 / .0784); }
.math-rows > div { display: flex; justify-content: space-between; align-items: flex-start; height: 56px; border-top: 1px solid rgb(255 255 255 / .0784); }
.math-rows dt { margin-top: 19px; font: 400 11px/14px var(--f-mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--c-haze); }
.math-rows dd { margin: 16px 0 0; font: 500 15px/20px var(--f-text); letter-spacing: -0.1px; color: var(--c-white); }

/* The calculator */
.calc {
  --edge: linear-gradient(138.4deg, rgb(255 255 255 / .322), rgb(255 255 255 / .0588) 50%, rgb(255 255 255 / .149));
  position: absolute; left: 688px; top: 96px; width: 680px; height: 604px; margin: 0;
  border-radius: 28px;
  background: linear-gradient(138.4deg, rgb(158 191 221 / .141), rgb(158 191 221 / .0314));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .122), 0 30px 60px -12px rgb(0 0 0 / .549);
  -webkit-backdrop-filter: blur(30px) saturate(1.15);
  backdrop-filter: blur(30px) saturate(1.15);
}
.calc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.calc-title { position: absolute; left: 32px; top: 30px; margin: 0; font: 500 15px/20px var(--f-text); letter-spacing: -0.1px; color: var(--c-white); }
.calc-vat { position: absolute; right: 32px; top: 33px; color: var(--c-haze); }
.calc-rule { position: absolute; left: 32px; right: 32px; height: 1px; background: rgb(255 255 255 / .0784); }
.calc-rule.r1 { top: 72px; }
.calc-rule.r2 { top: 300px; }
.calc-price { position: absolute; left: 32px; right: 32px; top: 100px; margin: 0; padding: 0; border: 0; min-width: 0; }
.calc-price legend { float: left; width: 100%; padding: 0; color: var(--c-haze); }
.calc-price .pills { clear: both; position: relative; top: 10px; display: flex; align-items: center; gap: 10px; }
.pill { position: relative; display: block; cursor: pointer; }
.pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pill span {
  display: grid; place-items: center;
  width: 72px; height: 40px; border-radius: 20px;
  background: rgb(255 255 255 / .0392);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .141);
  font: 400 15px/19px var(--f-text); color: var(--c-silver);
  transition: background .45s var(--ease-out), color .3s var(--ease-out), box-shadow .45s var(--ease-out);
}
.pill--w span { width: 75px; }
.pill:hover span { color: var(--c-white); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.pill input:checked + span { background: var(--c-white); color: var(--c-black); box-shadow: 0 0 18px rgb(143 195 234 / .4); }
.pill input:focus-visible + span { outline: 2px solid var(--c-arc); outline-offset: 3px; }
.own { position: relative; display: flex; align-items: center; margin-left: 8px; height: 40px; }
.own .cur { display: none; font: 400 15px/21px var(--f-text); color: var(--c-white); }
.own input {
  width: 150px; height: 40px; padding: 0;
  font: 400 14px/21px var(--f-text); color: var(--c-white);
  caret-color: var(--c-arc);
}
.own input::placeholder { color: var(--c-haze); opacity: 1; transition: color .3s var(--ease-out); }
.own:hover input::placeholder { color: var(--c-silver); }
.own.is-set { padding: 0 16px; border-radius: 20px; background: var(--c-white); box-shadow: 0 0 18px rgb(143 195 234 / .4); }
.own.is-set .cur { display: block; color: var(--c-black); }
.own.is-set input { width: 52px; color: var(--c-black); caret-color: var(--c-black); }
.own:focus-within:not(.is-set) { padding: 0 14px; margin-left: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.calc-sales { position: absolute; left: 32px; right: 32px; top: 196px; display: flex; justify-content: space-between; align-items: flex-start; }
.calc-sales label { margin-top: 4px; color: var(--c-haze); }
.calc-sales output { font: 500 15px/20px var(--f-text); letter-spacing: -0.1px; color: var(--c-white); font-variant-numeric: tabular-nums; }

/* range slider */
.slider {
  position: absolute; left: 32px; top: 225px; width: 616px; height: 28px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #1D4F78, #5A9BFF) 0 0 / var(--p, 40%) 100% no-repeat, rgb(255 255 255 / .0902);
}
.slider::-moz-range-track { height: 6px; border-radius: 3px; background: rgb(255 255 255 / .0902); }
.slider::-moz-range-progress { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #1D4F78, #5A9BFF); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #C9DCEF);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 0 16px rgb(90 155 255 / .549), 0 4px 10px rgb(0 0 0 / .502);
  transition: transform .4s var(--ease-out);
}
.slider::-moz-range-thumb {
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #C9DCEF);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 0 16px rgb(90 155 255 / .549), 0 4px 10px rgb(0 0 0 / .502);
}
.slider:active::-webkit-slider-thumb { transform: scale(1.08); }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 1px #fff, 0 0 0 4px rgb(143 195 234 / .45), 0 4px 10px rgb(0 0 0 / .502); }
.calc-scale { position: absolute; left: 32px; right: 32px; top: 258px; height: 14px; color: #5A6470; }
.calc-scale span { position: absolute; top: 0; }
.calc-scale span:nth-child(1) { left: 0; }
.calc-scale span:nth-child(2) { left: 300px; }
.calc-scale span:nth-child(3) { right: 0; }
.keep-label { position: absolute; left: 32px; top: 328px; color: var(--c-haze); }
.keep { position: absolute; left: 28px; top: 346px; display: flex; align-items: flex-start; gap: 14px; white-space: nowrap; }
.keep-num {
  display: block;
  font: 400 104px/108px var(--f-display); letter-spacing: -4px;
  color: transparent;
  background: linear-gradient(180deg, #FFFFFF 10.8px, #DCEBF7 66.3px, #6E9EC3 102.6px);
  -webkit-background-clip: text; background-clip: text;
  padding-bottom: 6px;
}
.keep-per { margin-top: 66px; font: 400 20px/30px var(--f-text); letter-spacing: -0.2px; color: var(--c-mist); }
.split { position: absolute; left: 32px; top: 480px; width: 616px; height: 10px; display: flex; gap: 6px; }
.split .you { flex: 0 0 490px; border-radius: 5px; background: linear-gradient(90deg, #1D4F78, #5A9BFF); }
.split .cut { flex: 1; border-radius: 5px; background: rgb(255 255 255 / .141); }
.split-you, .split-cut { position: absolute; top: 502px; font: 500 13px/16px var(--f-text); white-space: pre; }
.split-you { left: 32px; color: var(--c-ice); }
.split-cut { right: 32px; color: var(--c-mist); }
.calc-foot { position: absolute; left: 32px; right: 32px; top: 548px; font: 400 14px/21px var(--f-text); color: var(--c-haze); }

/* U3 Steps ------------------------------------------------------------------- */
.sell-steps { height: 780px; }
.sell-steps .stage { height: 780px; }
.steps-eyebrow { position: absolute; left: 72px; top: 96px; color: var(--c-mist); }
.steps-title { position: absolute; left: 72px; top: 132px; margin: 0; font: 400 64px/72px var(--f-display); letter-spacing: -2px; white-space: nowrap; }
.steps-title > span { display: block; }
.steps-rail { position: absolute; left: 72px; top: 340px; width: 1296px; height: 1px; background: linear-gradient(90deg, rgb(143 195 234 / .4), rgb(143 195 234 / .2) 60%, rgb(143 195 234 / .051)); }
.steps { position: absolute; left: 72px; top: 380px; display: flex; gap: 24px; }
.step { width: 306px; height: 340px; }
.step-node { position: absolute; left: 60px; top: -46px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-black); box-shadow: inset 0 0 0 1.5px var(--c-arc), 0 0 10px rgb(90 155 255 / .502); }
.step-node::after { content: ""; position: absolute; left: 5.5px; top: 12px; width: 1px; height: 34px; background: linear-gradient(180deg, rgb(143 195 234 / .502), rgb(143 195 234 / .102)); }
.numeral { position: absolute; left: 22px; top: 44px; width: 140px; height: 120px; overflow: visible; }
.numeral text { font-family: var(--f-display); font-weight: 100; font-size: 120px; letter-spacing: -4px; fill: #000; stroke: url(#numStroke); stroke-width: 1; filter: url(#numGlow); }
.step-icon { position: absolute; left: 254px; top: 46px; width: 24px; height: 24px; color: var(--c-arc); }
.step-name { position: absolute; left: 28px; top: 206px; margin: 0; font: 500 22px/28px var(--f-display); letter-spacing: -0.3px; }
.step-text { position: absolute; left: 28px; top: 246px; width: 250px; font: 400 14px/21px var(--f-text); color: var(--c-mist); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* U4 Ready ------------------------------------------------------------------- */
.sell-ready { height: 520px; }
.sell-ready .stage { height: 520px; }
.sell-ready .art { position: absolute; inset: 0; pointer-events: none; }
.horizon {
  position: absolute; left: -380px; top: 440px; width: 2200px; height: 900px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0B1D31, #04060B 81px);
  box-shadow: 0 -6px 30px rgb(90 155 255 / .702);
}
.horizon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(90deg, rgb(90 155 255 / 0), #B7D3EA 50%, rgb(90 155 255 / 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.ready-title { position: absolute; left: 0; right: 0; top: 120px; margin: 0; text-align: center; font: 400 96px/92px var(--f-display); letter-spacing: -3.8px; white-space: nowrap; }
.ready-title > span + span { margin-left: 3.8px; }
.ready-text { position: absolute; left: 0; right: 0; top: 236px; text-align: center; font: 400 20px/30px var(--f-text); letter-spacing: -0.2px; color: var(--c-mist); }
.ready-go { position: absolute; left: 610.5px; top: 304px; }

/* =========================================================================
   Phones (< 1024)
   ========================================================================= */
@media (max-width: 1023.98px) {
  .sell-hero { height: auto; }
  .sell-hero .stage { width: 100%; max-width: 600px; height: auto; padding: 540px 24px 64px; }
  .giant-80 { --fs: 210px; --lh: 210px; left: 0; right: 0; top: 150px; text-align: center; letter-spacing: -10px; background-image: linear-gradient(180deg, rgb(29 79 120 / .851) 31px, rgb(19 58 92 / .502) 135px, rgb(19 58 92 / 0) 180px); }
  .sell-fade { top: 360px; height: 300px; background: linear-gradient(180deg, rgb(4 6 11 / 0), rgb(4 6 11 / .85) 45%, var(--c-black) 75%); }
  .portrait { left: calc(50% - 128px); top: 104px; width: 256px; height: 320px; }
  .portrait-cap { left: calc(50% - 195px + 214px); top: 444px; padding-left: 16px; }
  .portrait-cap::before { top: 6px; height: 30px; }
  .portrait-cap .n { font-size: 14px; line-height: 18px; }
  .portrait-cap .s { font-size: 13px; line-height: 18px; }
  .share-card { left: calc(50% - 195px + 20px); top: 318px; transform-origin: 0 0; scale: .78; }

  .sell-eyebrow { position: relative; left: auto; top: auto; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; }
  .sell-title { position: relative; left: auto; top: auto; margin: 16px 0 0 -2px; font-size: 56px; line-height: 54px; letter-spacing: -2.2px; }
  .sell-lead { position: relative; left: auto; top: auto; width: auto; max-width: 342px; margin-top: 24px; font-size: 16px; line-height: 24px; letter-spacing: -0.1px; }
  .sell-actions { position: relative; left: auto; top: auto; margin-top: 28px; flex-direction: column; }
  .sell-actions .btn { width: 100%; }
  .sell-actions .btn--go { justify-content: space-between; }

  .sell-math { height: auto; }
  .sell-math .stage { width: 100%; max-width: 600px; height: auto; padding: 32px 24px 72px; }
  .math-eyebrow { position: relative; left: auto; top: auto; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; }
  .math-title { position: relative; left: auto; top: auto; margin-top: 12px; font-size: 44px; line-height: 46px; letter-spacing: -1.4px; }
  .math-text { position: relative; left: auto; top: auto; width: auto; margin-top: 20px; }
  .math-rows { position: relative; left: auto; top: auto; width: auto; margin-top: 32px; }
  .math-rows > div { height: 52px; }
  .math-rows dt { margin-top: 18px; }
  .math-rows dd { margin-top: 15px; }
  .calc { position: relative; left: auto; top: auto; width: auto; height: 640px; margin-top: 40px; border-radius: 24px; }
  .calc-title { left: 20px; top: 24px; }
  .calc-vat { right: 20px; top: 27px; }
  .calc-rule { left: 20px; right: 20px; }
  .calc-rule.r1 { top: 62px; }
  .calc-price { left: 20px; right: 20px; top: 86px; }
  .calc-price .pills { flex-wrap: wrap; gap: 8px; }
  .pill span { width: 66px; }
  .pill--w span { width: 70px; }
  .own { margin: 4px 0 0; flex-basis: 100%; }
  .own:focus-within:not(.is-set) { margin-left: 0; }
  .own.is-set { flex-basis: auto; }
  .calc-sales { left: 20px; right: 20px; top: 244px; }
  .slider { left: 20px; width: calc(100% - 40px); top: 272px; }
  .calc-scale { left: 20px; right: 20px; top: 306px; }
  .calc-scale span:nth-child(2) { left: 50%; transform: translateX(-50%); }
  .calc-rule.r2 { top: 344px; }
  .keep-label { left: 20px; top: 368px; }
  .keep { left: 16px; top: 386px; gap: 10px; }
  .keep-num { font-size: 64px; line-height: 70px; letter-spacing: -2.4px; background: linear-gradient(180deg, #FFFFFF 7px, #DCEBF7 43px, #6E9EC3 66.5px); -webkit-background-clip: text; background-clip: text; }
  .keep-per { margin-top: 32px; font-size: 16px; line-height: 24px; }
  .split { left: 20px; width: calc(100% - 40px); top: 486px; }
  .split .you { flex: 0 0 calc(80% - 1px); }
  .split-you, .split-cut { top: 508px; }
  .split-you { left: 20px; }
  .split-cut { right: 20px; }
  .calc-foot { left: 20px; right: 20px; top: 552px; }

  .sell-steps, .sell-steps.spill { height: auto; overflow: clip; }
  .sell-steps .stage { width: 100%; max-width: 600px; height: auto; padding: 24px 24px 72px; }
  .steps-eyebrow { position: relative; left: auto; top: auto; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; }
  .steps-title { position: relative; left: auto; top: auto; margin-top: 12px; font-size: 44px; line-height: 46px; letter-spacing: -1.4px; white-space: normal; }
  .steps-rail { display: none; }
  .steps { position: relative; left: auto; top: auto; margin-top: 36px; flex-direction: column; gap: 16px; }
  .step { width: 100%; height: 236px; }
  .step-node { display: none; }
  .numeral { left: 18px; top: 34px; width: 105px; height: 90px; }
  .step-icon { left: auto; right: 24px; top: 40px; }
  .step-name { left: 24px; top: 134px; }
  .step-text { left: 24px; right: 24px; top: 172px; width: auto; }

  .sell-ready { height: 560px; }
  .sell-ready .stage { width: 100%; max-width: 600px; height: 560px; }
  .horizon { left: calc(50% - 525px); top: 480px; width: 1050px; height: 640px; }
  .ready-title { left: 24px; right: 24px; top: 72px; font-size: 52px; line-height: 52px; letter-spacing: -2px; white-space: normal; }
  .ready-title > span { display: block; }
  .ready-text { left: 24px; right: 24px; top: 196px; font-size: 16px; line-height: 24px; letter-spacing: -0.1px; }
  .ready-go { left: calc(50% - 109.5px); top: 288px; }
}