/* ===========================================================================
   Home. Desktop coordinates are the Sketch artboard coordinates (1440 wide),
   relative to each section. Mobile (< 1024) follows the 390 mobile artboard.
   =========================================================================== */

/* ===========================================================================
   S1 Hero
   =========================================================================== */
.hero { height: 900px; }
.hero .stage { height: 900px; }
.giant-word {
  position: absolute; left: 138px; top: 150px; margin: 0;
  white-space: nowrap;
  font: 500 176px/176px var(--f-display); letter-spacing: -7px;
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
.gtext-line {
  display: inline-block; padding-bottom: .3em;
  color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat;
  background-image: linear-gradient(180deg, rgb(58 119 168 / .902) 0, rgb(22 63 99 / .851) calc(var(--gh, 176px) * .55), rgb(11 34 54 / .502) var(--gh, 176px), rgb(11 34 54 / .502) 100%);
}
.hero .gf-back  { left: 465px; top: 248px; rotate: -16deg; }
.hero .gf-mid   { left: 575px; top: 258px; rotate: -5deg; }
.hero .gf-front { left: 693px; top: 278px; rotate: 7deg; }

.hero-copy { position: absolute; left: 72px; top: 584px; width: 330px; }
.hero-copy h1 { margin-bottom: 10px; }
.hero-copy p { margin-bottom: 32px; }
.hero-copy .btn { width: 205px; }

.hero-stat { position: absolute; left: 1112px; top: 376px; height: 56px; display: flex; align-items: flex-start; }
.hero-stat::before { content: ""; width: 1px; height: 56px; background: rgb(255 255 255 / .502); margin-right: 15px; }
.hero-stat .num { margin-right: 10px; }
.hero-stat .lbl { margin-top: 26px; color: var(--c-mist); }

.hero-new { position: absolute; left: 993.5px; top: 498px; width: 360px; height: 370px; color: inherit; }
.hero-new .connector { position: absolute; left: 2.5px; top: 8px; width: 104px; height: 1px; background: rgb(255 255 255 / .349); }
.hero-new .connector-end { position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.hero-new .label-dot { position: absolute; left: 120px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgb(220 235 247 / .702); }
.hero-new .label { position: absolute; left: 140.5px; top: 0; white-space: nowrap; }
.hero-new .backlight { --x: 106.5px; --y: 62px; --w: 260px; --h: 220px; --c: rgb(143 195 234 / .902); --b: 70px; }
.hero-new .thumb {
  position: absolute; left: 118.5px; top: 42px; width: 230px; height: 250px;
  transition: transform .8s var(--ease-out);
}
.hero-new:hover .thumb { transform: translateY(-4px); }
.hero-new .thumb .clip {
  position: absolute; inset: 0;
  clip-path: path('M0 32 C0 20 6 14 18 14 L106 14 C118 14 118 0 130 0 L212 0 C224 0 230 6 230 18 L230 232 C230 244 224 250 212 250 L18 250 C6 250 0 244 0 232 Z');
  background: var(--c-navy);
}
.hero-new .thumb img { position: absolute; left: -35px; top: -111px; width: 300px; height: 652px; max-width: none; }
.hero-new .thumb .rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-new .name { position: absolute; left: 118.5px; top: 310px; }
.hero-new .desc { position: absolute; left: 118.5px; top: 342px; white-space: nowrap; color: var(--c-mist); }
.hero .art, .hero .construct, .hero .files { position: absolute; inset: 0; pointer-events: none; }
.intro .hero :is(.construct, .construct-m) > span { opacity: 0; }

/* ===========================================================================
   S2 Layers
   =========================================================================== */
.layers { height: 820px; }
.layers .stage { height: 820px; }
.layers .art { position: absolute; inset: 0; pointer-events: none; }
.layers-shade {
  position: absolute; left: var(--bleed); right: var(--bleed); top: 0; height: 380px;
  background: linear-gradient(180deg, rgb(4 6 11 / 0), rgb(4 6 11 / .941) 42%, rgb(4 6 11 / .902) 70%, rgb(4 6 11 / 0));
}
.layers .orbits { position: absolute; left: 0; top: 0; width: 1440px; height: 820px; overflow: visible; fill: none; stroke: rgb(220 235 247 / .22); stroke-width: 1; stroke-dasharray: 6 7; }
.layers-title {
  --fs: 72px; --lh: 72px;
  left: 220px; top: 150px; width: 1000px;
  font-family: var(--f-display); font-weight: 400; letter-spacing: -2.6px;
  background-image: linear-gradient(90deg, #F2F5F8, #DFE5EB 55%, #8A96A2);
  pointer-events: auto;
}
.layers-sub { position: absolute; left: 440px; top: 246px; width: 560px; text-align: center; }
.layers-groups .orbit-label { position: absolute; top: 412px; width: 200px; text-align: center; color: var(--c-white); }
.layer-pills > li { position: absolute; }

/* ===========================================================================
   S3 ro. Spotlight
   =========================================================================== */
.spotlight { height: 900px; overflow: clip; }
.spotlight .stage { height: 900px; }
.calm-word {
  --fs: 400px; --lh: 400px;
  left: 20px; top: 498px;
  font-family: var(--f-display); font-weight: 600; letter-spacing: -14px;
  background-image: linear-gradient(180deg, rgb(19 58 92 / .702) 0, rgb(19 58 92 / .702) 80px, rgb(47 106 153 / .902) 340px, rgb(47 106 153 / .902) 100%);
}
.spot-photo { left: 800px; top: 160px; width: 520px; height: 690px; filter: drop-shadow(0 24px 30px rgb(0 0 0 / .5)); }
.spot-copy { position: absolute; left: 72px; top: 84px; width: 520px; }
.spot-pill { width: 185px; margin-bottom: 28px; }
.spot-title { margin-bottom: 28px; }
.spot-body { width: 470px; }
.spot-visual { display: contents; }
.spot-buy { position: absolute; left: 72px; top: 466px; display: flex; align-items: flex-start; gap: 24px; }
.spot-buy .btn { width: 164px; }
.spot-price { display: flex; flex-direction: column; padding-top: 6px; }
.spot-price .t-h3 { margin-bottom: 2px; }
.spot-connector { position: absolute; left: 1104px; top: 479.5px; width: 80px; height: 1px; background: rgb(220 235 247 / .6); }
.spot-node { position: absolute; left: 1100.5px; top: 476.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-white); box-shadow: 0 0 8px rgb(143 195 234 / .8); }
.breathe-card {
  --edge: linear-gradient(135deg, rgb(255 255 255 / .349), rgb(255 255 255 / .0706) 50%, rgb(255 255 255 / .18));
  position: absolute; left: 1184px; top: 360px; width: 232px; height: 240px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgb(158 191 221 / .18), rgb(158 191 221 / .051));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .141), 0 20px 40px -10px rgb(4 6 11 / .451);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
  backdrop-filter: blur(30px) saturate(1.2);
  text-align: center;
}
.breathe-card .t-label { position: absolute; left: 26px; top: 24px; width: 180px; }
.breathe-card .t-b3 { position: absolute; left: 31px; top: 50px; width: 170px; }
.breathe-card .ring { position: absolute; left: 62px; top: 110px; width: 108px; height: 108px; }
.breathe-card .ring svg { width: 100%; height: 100%; overflow: visible; }
.breathe-card .ring-value { position: absolute; left: 35px; top: 42px; width: 38px; font: 400 20px/24px var(--f-display); color: var(--c-white); text-align: center; }

/* ===========================================================================
   S4 Numbers
   =========================================================================== */
.numbers { height: 1180px; }
.numbers .stage { height: 1180px; }
.num-panel {
  --edge: linear-gradient(135deg, rgb(220 235 247 / .302), rgb(220 235 247 / .051) 50%, rgb(220 235 247 / .149));
  position: absolute;
  overflow: hidden;
  isolation: isolate;
}
.num-panel--133 { left: -60px; top: 200.6px; width: 1500px; height: 755.2px; border-radius: 44px; rotate: -5deg; background: #071523; box-shadow: 0 40px 90px -10px rgb(0 0 0 / .651); }
.num-panel--108 { left: 640px; top: 700px; width: 980px; height: 430px; border-radius: 40px; rotate: -5deg; background: #06101B; box-shadow: 0 40px 90px -10px rgb(0 0 0 / .702); }
.num-panel .numeral { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.num-panel .num-caption { position: absolute; left: 120px; top: 580.3px; width: 520px; color: var(--c-white); }
.num-panel .num-note { position: absolute; white-space: nowrap; }
.num-panel .btn--pill { position: absolute; }

/* ===========================================================================
   S5 Shelf
   =========================================================================== */
.shelf { height: 960px; overflow: clip; }
.shelf .stage { height: 960px; }
.shelf-title { position: absolute; left: 72px; top: 96px; display: flex; gap: 14px; white-space: nowrap; }
.shelf-filters { position: absolute; left: 72px; top: 196px; display: flex; gap: 10px; }
.shelf-browse { position: absolute; left: 1194px; top: 192px; width: 174px; }
.shelf-grid { position: absolute; left: 72px; top: 272px; width: 1296px; height: 640px; }
.shelf-grid .sys-card { position: absolute; }
.shelf-grid > .is-filtered-out { opacity: .18; filter: saturate(.3); pointer-events: none; }
.shelf-grid > * { transition: opacity .5s var(--ease-out), filter .5s var(--ease-out), transform .7s var(--ease-out); }
.shelf-empty { position: absolute; left: 72px; top: 930px; }

.feature-card { position: absolute; left: 0; top: 0; width: 636px; height: 640px; }
.feature-cover {
  position: absolute; left: 14px; top: 36px; width: 608px; height: 360px;
  border-radius: 20px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #04060B, #0B2236);
}
.feature-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .102); pointer-events: none; }
.phone {
  position: absolute; width: 168px; height: 350px; border-radius: 36px;
  background: #0A0E14;
  box-shadow: 0 24px 40px -6px rgb(0 0 0 / .702);
  transition: transform 1s var(--ease-out);
}
.phone::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(135deg, rgb(220 235 247 / .702), rgb(255 255 255 / .102) 50%, rgb(143 195 234 / .502));
  -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);
}
.phone .screen { position: absolute; left: 6px; top: 6px; width: 156px; height: 338px; border-radius: 30px; overflow: hidden; }
.phone .screen img { width: 100%; height: 100%; object-fit: cover; }
.phone .screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(127deg, rgb(255 255 255 / .122), rgb(255 255 255 / 0) 36%); }
.feature-cover .phone--player { left: 162px; top: 42px; rotate: 8deg; }
.feature-cover .phone--week { left: 286px; top: 22px; rotate: -6deg; }
.feature-card:hover .phone--player { transform: translate(-6px, -4px) rotate(-1deg); }
.feature-card:hover .phone--week { transform: translate(6px, -8px) rotate(1deg); }
.feature-name { position: absolute; left: 34px; top: 418px; font: 400 44px/48px var(--f-display); letter-spacing: -1.2px; }
.feature-badge { position: absolute; left: 92px; top: 432px; }
.feature-studio { position: absolute; left: 34px; top: 474px; }
.feature-desc { position: absolute; left: 34px; top: 500px; width: 380px; }
.feature-price { position: absolute; right: 34px; top: 418px; font: 100 44px/48px var(--f-display); letter-spacing: -1.2px; }
.feature-license { position: absolute; right: 34px; top: 474px; text-align: right; }
.feature-facts { position: absolute; left: 34px; top: 584px; display: flex; gap: 8px; }
.feature-go { position: absolute; left: 463px; top: 580px; width: 139px; }

/* ===========================================================================
   S6 Creators Dial
   =========================================================================== */
.dial-sec { height: 940px; overflow: clip; }
.dial-sec .stage { height: 940px; }
.dial-sec .dial { position: absolute; left: 0; top: 0; width: 1440px; height: 940px; overflow: visible; }
.dial-label { font-family: var(--f-text); }
.dial-copy { position: absolute; left: 620px; top: 480px; width: 480px; }
.t-dial { font: 400 88px/92px var(--f-display); letter-spacing: -3px; color: var(--c-white); margin-bottom: 34px; }
.dial-copy .t-b1 { width: 470px; margin-bottom: 32px; }
.dial-copy .btn { width: 205px; }

/* ===========================================================================
   S7 Standard
   =========================================================================== */
.standard { height: 1040px; }
.standard .stage { height: 1040px; }
.standard .stars { position: absolute; left: 0; top: 0; width: 1440px; height: 1040px; overflow: visible; fill: #DCEBF7; }
.standard .stars .g { filter: drop-shadow(0 0 3px rgb(143 195 234 / .8)); }
.standard .stars .sp { color: #EEF5FF; opacity: .7; }
.standard .crosshair .hline, .standard .crosshair .vline { --c: rgb(220 235 247 / .251); }
.standard .crosshair .node { --s: 6px; --c: var(--c-white); --sh: 0 0 8px rgb(143 195 234 / .8); }
.std-title { position: absolute; left: 400px; top: 216px; width: 641px; text-align: center; white-space: nowrap; }
.std-title .br-m { display: none; }
.std-pill { position: absolute; }
.std-pill--a { left: 1000px; top: 168px; width: 226px; }
.std-pill--b { left: 150px; top: 364px; width: 233px; }
.std-label { position: absolute; left: 597.5px; top: 512px; width: 245px; text-align: center; font: 400 15px/19px var(--f-text); letter-spacing: 3.6px; text-transform: uppercase; color: rgb(220 235 247 / .8); white-space: nowrap; }
.std-forty { position: absolute; inset: 0; pointer-events: none; }
.std-forty .forty { position: absolute; left: 0; top: 0; width: 1440px; height: 1040px; overflow: visible; }
.std-rule { position: absolute; left: 696px; top: 916px; width: 48px; height: 2px; background: var(--c-blue); }
.std-caption { position: absolute; left: 440px; top: 940px; width: 560px; text-align: center; }

/* ===========================================================================
   S8 Pricing
   =========================================================================== */
.pricing { height: 980px; overflow: clip; }
.pricing .stage { height: 980px; }
.price-title { position: absolute; left: 72px; top: 140px; display: flex; gap: 14px; white-space: nowrap; }
.price-note { position: absolute; left: 72px; top: 232px; width: 560px; font: 400 18px/28px var(--f-text); color: var(--c-silver); }
.price-toggle { position: absolute; left: 1132px; top: 150px; }
.plan {
  --edge: linear-gradient(135deg, rgb(255 255 255 / .302), rgb(255 255 255 / .0588) 50%, rgb(255 255 255 / .149));
  position: absolute; top: 320px; height: 640px; border-radius: 32px; overflow: hidden;
}
.plan--single { left: 72px; width: 526px; background: linear-gradient(135deg, rgb(158 191 221 / .11), rgb(158 191 221 / .0314)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .122); -webkit-backdrop-filter: blur(30px) saturate(1.1); backdrop-filter: blur(30px) saturate(1.1); }
.plan--pass { left: 622px; width: 746px; background: linear-gradient(180deg, rgb(11 34 54 / .949), rgb(19 58 92 / .949) 55%, #1D4F78); box-shadow: inset 0 1px 0 rgb(255 255 255 / .122); }
.plan .icon-orb { position: absolute; left: 32px; top: 32px; }
.plan h3 { position: absolute; left: 32px; top: 108px; }
.plan-desc { position: absolute; left: 32px; top: 144px; width: 420px; }
.plan--pass .plan-desc { width: 380px; }
.plan-kicker { position: absolute; left: 32px; top: 222px; }
.plan-price { position: absolute; left: 30px; top: 240px; display: flex; align-items: flex-end; gap: 14px; white-space: nowrap; }
.plan-price .amount { font: 400 72px/72px var(--f-display); letter-spacing: -2.6px; color: var(--c-white); }
.plan-price .per { padding-bottom: 9px; }
.plan-rule { position: absolute; left: 32px; top: 344px; height: 1px; right: 32px; background: rgb(255 255 255 / .102); }
.plan--pass .plan-rule { background: rgb(255 255 255 / .149); }
.plan-list { position: absolute; left: 32px; top: 372px; }
.plan-list li { display: flex; align-items: center; gap: 12px; height: 25px; margin-bottom: 13px; white-space: nowrap; }
.plan-list .i { color: var(--c-arc); }
.plan--pass .plan-list .i { color: var(--c-ice); }
.plan-cta { position: absolute; left: 32px; top: 552px; }
.plan--single .plan-cta { width: 173px; }
.plan--pass .plan-cta { width: 146px; }
.price-pass-obj { position: absolute; left: 1010px; top: 223px; width: 340px; height: 214px; rotate: -10deg; z-index: 2; }

/* Pass card (glass object) */


/* Mobile-only sections are hidden on desktop by .only-mobile */
.pass-m { display: none; }
.std-forty .forty-m { display: none; }

/* ===========================================================================
   MOBILE (< 1024). Authored on the 390 artboard; art is centred, text runs in
   a fluid column with 24 px gutters.
   =========================================================================== */
@media (max-width: 1023.98px) {
  .p-home .section .stage { width: 100%; max-width: 600px; }
  .p-home .art { position: absolute; inset: 0; pointer-events: none; }
  /* art coordinates are 390-based and centred: left = 50% - 195px + x */
  .p-home .art .gfile, .p-home .construct-m > span { left: calc(50% - 195px + var(--x, 0px)); }

  /* MH1 Hero ---------------------------------------------------------------- */
  .hero, .hero.spill { height: 844px; overflow: clip; }
  .hero .stage { height: 844px; }
  .hero::after { content: ""; position: absolute; left: 0; right: 0; top: 760px; height: 84px; background: linear-gradient(180deg, rgb(4 6 11 / 0), var(--c-black)); pointer-events: none; }
  .construct-m { position: absolute; inset: 0; }
  .construct-m .hline, .construct-m .vline { --c: rgb(143 195 234 / .2); }
  .construct-m .node { --c: rgb(220 235 247 / .8); }
  .giant-word {
    left: 0; right: 0; top: 104px; text-align: center;
    font-size: 100px; line-height: 96px; letter-spacing: -5px;
  }
  .giant-word .gtext-line { --gh: 96px; display: block; padding-bottom: 0; height: 96px; overflow: visible; }
  .giant-word .gtext-line + .gtext-line { margin-top: -4px; }
  .gfile--m { width: 156.6px; height: 200.88px; }
  .gfile--m .gf-blur { clip-path: path('M0 22.68 C0 14.04 4.32 9.72 12.96 9.72 L72.36 9.72 C81 9.72 81 0 89.64 0 L143.64 0 C152.28 0 156.6 4.32 156.6 12.96 L156.6 187.92 C156.6 196.56 152.28 200.88 143.64 200.88 L12.96 200.88 C4.32 200.88 0 196.56 0 187.92 Z'); }
  .hero .gfile--m.gf-back { --x: 52px; top: 186px; rotate: -16deg; }
  .hero .gfile--m.gf-mid { --x: 111.4px; top: 191.4px; rotate: -5deg; }
  .hero .gfile--m.gf-front { --x: 175.12px; top: 202.2px; rotate: 7deg; }
  .hero-copy { left: 24px; right: 24px; top: 486px; width: auto; }
  .hero-copy h1 { font: 400 32px/36px var(--f-display); letter-spacing: -0.8px; margin-bottom: 16px; }
  .hero-copy p { --fs: 16px; font-size: 16px; line-height: 24px; max-width: 330px; margin-bottom: 26px; }
  .hero-stat { left: 24px; top: 734px; height: 44px; }
  .hero-stat::before { height: 44px; background: rgb(220 235 247 / .4); margin-right: 13px; }
  .hero-stat .num { font: 100 44px/44px var(--f-display); letter-spacing: -1.5px; margin-right: 10px; }
  .hero-stat .lbl { margin-top: 22px; color: var(--c-silver); }
  .hero .grain { display: none; }
  .hero .gfile .gf-blur::after { opacity: .045; }

  /* MH2 ro. -------------------------------------------------------------- */
  .spotlight { height: auto; padding-bottom: 32px; }
  .spotlight .stage { height: auto; display: flex; flex-direction: column; }
  .spotlight .fade-b, .calm-word { display: none; }
  .spot-copy { position: relative; left: auto; top: auto; width: auto; padding: 64px 24px 0; }
  .spot-pill { margin-bottom: 28px; }
  .spot-title { font: 400 44px/46px var(--f-display); letter-spacing: -1.4px; margin-bottom: 22px; }
  .spot-body { width: auto; max-width: 330px; font-size: 16px; line-height: 24px; letter-spacing: -0.1px; color: var(--c-mist); }
  .spot-visual { display: block; position: relative; width: 342px; height: 454px; margin: 42px auto 0; max-width: calc(100% - 48px); }
  .spot-photo { left: 0; top: 0; width: 100%; height: 453.81px; filter: drop-shadow(0 34px 60px rgb(0 0 0 / .55)); }
  .spot-connector, .spot-node { display: none; }
  .breathe-card {
    left: auto; right: 0; top: 352px;
    background: linear-gradient(180deg, rgb(10 20 32 / .722), rgb(10 20 32 / .851)), linear-gradient(180deg, rgb(255 255 255 / .0784), rgb(255 255 255 / 0));
  }
  .breathe-card .t-b3 { color: #B4BFCA; }
  .spot-buy { position: relative; left: auto; top: auto; margin: 158px 24px 0; gap: 22px; }

  /* MH3 Shelf ------------------------------------------------------------ */
  .shelf { height: auto; }
  .shelf .stage { height: auto; padding: 64px 0 64px; }
  .shelf .art .fade-b { display: none; }
  .shelf-eyebrow, .pass-eyebrow { font-size: 12px; line-height: 16px; letter-spacing: 1.2px; }
  .shelf-eyebrow { position: relative; margin: 0 24px 12px; }
  .shelf-title { position: relative; left: auto; top: auto; display: block; margin: 0 24px; font: 400 44px/46px var(--f-display); letter-spacing: -1.4px; white-space: normal; }
  .shelf-title > span { display: block; }
  .shelf-m { position: relative; margin-top: 30px; }
  .shelf-chips-m { display: flex; gap: 8px; overflow-x: auto; padding: 0 24px; scrollbar-width: none; }
  .shelf-chips-m::-webkit-scrollbar { display: none; }
  .shelf-scroller {
    display: flex; gap: 16px; margin: 26px 0 -56px; padding: 0 24px 64px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .shelf-scroller::-webkit-scrollbar { display: none; }
  .shelf-scroller .sys-card { flex: none; scroll-snap-align: start; }
  .shelf-scroller .sys-card[hidden] { display: none; }
  .shelf-foot-m { position: relative; display: flex; align-items: flex-start; justify-content: space-between; margin: 0 24px; }
  .shelf-foot-m .dots { margin-top: 16px; }
  .dots { display: flex; gap: 8px; }
  .dots span { width: 6px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .2); transition: width .5s var(--ease-out), background .5s var(--ease-out); }
  .dots span.is-on { width: 22px; background: var(--c-ice); }
  .shelf-empty { position: relative; left: auto; top: auto; margin: 16px 24px 0; }

  /* MH4 Standard ------------------------------------------------------------ */
  .standard { height: 820px; }
  .standard .stage { height: 820px; }
  .standard .stars { left: calc(50% - 195px - 429.48px); top: -20.72px; }
  .standard .crosshair { display: none; }
  .std-title { left: 24px; right: 24px; top: 92px; width: auto; text-align: left; font: 400 44px/46px var(--f-display); letter-spacing: -1.4px; white-space: normal; }
  .std-title .br-m { display: inline; }
  .std-title .br-d { display: none; }
  .std-title .std-and { color: var(--c-white); }
  .std-pill--a { left: 24px; top: 262px; }
  .std-pill--b { left: 24px; top: 330px; }
  .std-label { left: calc(50% - 195px + 72.5px); top: 440px; }
  .std-forty .forty { display: none; }
  .std-forty .forty-m { display: block; position: absolute; left: calc(50% - 195px); top: 0; width: 390px; height: 820px; overflow: visible; }
  .standard::after { content: ""; position: absolute; left: 0; right: 0; top: 700px; height: 120px; background: linear-gradient(180deg, rgb(4 6 11 / 0), var(--c-black)); pointer-events: none; }
  .std-rule { left: calc(50% - 12px); top: 724px; width: 24px; }
  .std-caption { left: calc(50% - 155px); top: 742px; width: 310px; z-index: 1; font-size: 16px; line-height: 24px; letter-spacing: -0.1px; }

  /* MH5 Pass ----------------------------------------------------------------- */
  .pass-m { display: block; }
  .pass-m .stage { height: 760px; }
  .pass-m .pass-orbits { position: absolute; left: calc(50% - 195px); top: 0; width: 390px; height: 300px; overflow: visible; fill: none; stroke: rgb(143 195 234 / .302); stroke-dasharray: 3 6; }
  .pass-obj-m { position: absolute; left: calc(50% - 195px + 25px); top: 83px; width: 340px; height: 214px; rotate: -10deg; }
  .pass-eyebrow { position: absolute; left: 24px; top: 352px; }
  .pass-title { position: absolute; left: 24px; top: 380px; font: 400 44px/46px var(--f-display); letter-spacing: -1.4px; }
  .pass-price { position: absolute; left: 22px; top: 500px; display: flex; align-items: flex-end; gap: 12px; }
  .pass-price .amount { font: 100 64px/64px var(--f-display); letter-spacing: -2.5px; }
  .pass-price .per { padding-bottom: 9px; }
  .pass-list { position: absolute; left: 24px; top: 588px; }
  .pass-list li { display: flex; align-items: center; gap: 10px; height: 21px; margin-bottom: 13px; }
  .pass-list .i { width: 18px; height: 18px; color: var(--c-arc); }
  .pass-cta { position: absolute; left: 24px; top: 692px; width: 146px; }
}