/* Hero only. One scroll timeline, with a fully readable static fallback. */
.hero {
  --copy-out: 0;
  --availability: 0;
  --platform-progress: 0;
  --footer-opacity: 1;
  --scroll-hint: 1;
  padding: 0;
  overflow: clip;
  isolation: isolate;
}
.hero.hero-motion { height: calc(348svh - 66px); }
.hero-pin { position: relative; min-height: calc(100svh - 66px); }
.hero-motion .hero-pin { position: sticky; top: 66px; height: calc(100svh - 66px); min-height: 620px; }
.hero .hero-pin > .wrap {
  width: 100%; height: 100%; min-height: inherit;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: clamp(26px, 4svh, 48px); padding-bottom: 34px;
}
.hero-glow {
  background: radial-gradient(ellipse 48% 35% at 50% 73%, #b8843415, transparent 85%);
  transition: none; opacity: .8;
  mask-image: linear-gradient(#000 75%, transparent);
}
.hero .txt {
  z-index: 3;
  opacity: calc(1 - var(--copy-out));
  transform: translate3d(0, calc(var(--copy-out) * -64px), 0);
  will-change: transform, opacity;
}
.hero h1.disp { font-size: clamp(32px, 4.55vw, 62px); line-height: 1; letter-spacing: -.018em; }
.hero .hero-cta { margin-top: 24px; }
.hero .dlbtn { border-radius: 12px; padding: 10px 20px 10px 12px; box-shadow: inset 0 1px 0 #ffe7ba40, 0 5px 24px #0002; }
.hero .dlbtn-txt b { font-size: 16px; }
.hero .dlbtn-txt small { font-size: 9px; }
.hero .showcase {
  --mw: 78cqw; --depth: calc(var(--mw) * .67);
  --lid: 8deg; --scr: 1;
  --pitch: -18deg; --yaw: 16deg; --lift: 0cqw; --scale: 1;
  --shift: 0cqw; --mac-x: -3cqw; --tilt-x: 0deg; --tilt-y: 0deg; --sheen: .1;
  --phone-exit: 0; --phone-rise: 22cqw; --shadow-scale: 1;
  --camera-scale: 1; --camera-y: 0px; --device-opacity: 1;
  width: min(820px, calc((100svh - 410px) * 1.22), 95%);
  container-type: inline-size; position: relative;
  margin: 26px auto 8px; align-self: center;
  transform: translate3d(0, var(--camera-y), 0) scale(var(--camera-scale));
  transform-origin: 50% 50%; opacity: var(--device-opacity);
  z-index: 2;
}
/* The default is open; only a working arrival sequence starts with the lid closed. */
html.js-pre .hero .showcase { --lid: -89.6deg; --scr: 0; --phone-exit: 1; }
.hero .stage3d {
  position: relative; height: 76cqw; perspective: 500cqw; perspective-origin: 50% 42%;
  /* Each surface receives the complete model transform. Keeping the surface stack flat
     avoids nested preserve-3d clipping in Chromium and flattening in WebKit. */
  transform-style: flat;
  --body-pose: translate3d(calc(50cqw + var(--shift) + var(--mac-x)), calc(var(--depth) + var(--lift)), 0)
    scale(var(--scale)) rotateX(calc(var(--pitch) + var(--tilt-y)))
    rotateY(calc(var(--yaw) + var(--tilt-x))) translate3d(-50cqw, calc(-1 * var(--depth)), 0);
  --hinge-pose: var(--body-pose) translate3d(8cqw, var(--depth), .62cqw)
    rotateX(var(--lid)) translateY(calc(-1 * var(--depth)));
}
.hero .lid-face, .hero .lid-back, .hero .lid-rim, .hero .deck, .hero .deck-front, .hero .deck-side, .hero .handset {
  position: absolute; top: 0; left: 0; right: auto; bottom: auto; margin: 0;
  transform-origin: 0 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.hero .lid-face, .hero .lid-back { backface-visibility: visible; -webkit-backface-visibility: visible; }
.hero .lid-back { visibility: hidden; }
.hero .lid-face, .hero .lid-back, .hero .deck { width: var(--mw); height: var(--depth); }
.hero .lid-face {
  transform: var(--hinge-pose); z-index: 4;
  padding: .68cqw .65cqw .98cqw;
  border-radius: 1.45cqw 1.45cqw .62cqw .62cqw;
  background: linear-gradient(135deg, #202124, #08090b 30%, #101114 80%, #303236);
  box-shadow: 0 0 0 .08cqw #151619, 0 0 0 .18cqw #afb0b3, 0 0 0 .27cqw #4f5054,
    inset 0 .06cqw .12cqw #fff3;
}
.hero .screen { height: 100%; aspect-ratio: auto; border-radius: .84cqw .84cqw .18cqw .18cqw; }
.hero .notch { width: 10.8%; margin-left: -5.4%; height: 3.9%; border-radius: 0 0 .6cqw .6cqw; }
.hero .notch::after { width: .38cqw; height: .38cqw; margin-left: -.19cqw; box-shadow: 0 0 0 .12cqw #111; }
.hero .glare {
  background: linear-gradient(122deg, #f1e5d013, transparent 39%, transparent 72%, #d5dded04);
  opacity: calc(.65 + var(--sheen));
}
.hero .boot { display: none; }
.hero .lid-back {
  transform: var(--hinge-pose) translate3d(var(--mw), 0, -.36cqw) rotateY(180deg);
  z-index: 5;
  border-radius: 1.4cqw 1.4cqw .6cqw .6cqw;
  background:
    linear-gradient(118deg, #fff2, transparent 33%, #0001 70%, #fff1),
    linear-gradient(165deg, #b2b3b6 0%, #929397 45%, #75777b 100%);
  box-shadow: inset 0 0 0 .09cqw #d5d5d6, inset 0 .28cqw .15cqw -.1cqw #f6f5f4,
    inset 0 -.26cqw .18cqw #48494d, inset .2cqw 0 .24cqw #c8c9cb;
}
/* The small mark follows the lid; four points provide its exact projected corners. */
.hero .lid-emblem {
  position: absolute; left: 50%; top: 50%; width: 12%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(180deg);
}
.lid-emblem > svg { display: block; width: 100%; height: 100%; }
.emblem-corner { position: absolute; width: 0; height: 0; }
/* During the close-up, draw the vector at its actual on-screen dimensions outside
   the composited laptop. Its projection still matches the lid, without bitmap magnification. */
.hero-logo-zoom {
  display: none; position: absolute; left: 0; top: 0; z-index: 2;
  overflow: visible; pointer-events: none; transform-origin: 0 0;
}
.hero .lid-rim {
  width: var(--mw); height: .36cqw; z-index: 6;
  transform: var(--hinge-pose) rotateX(-90deg);
  background: linear-gradient(#dedee0, #74767b); border-radius: .3cqw;
}
.hero .deck {
  transform: var(--body-pose) translate3d(8cqw, var(--depth), 0) rotateX(90deg);
  z-index: 2;
  border-radius: .65cqw .65cqw 1.55cqw 1.55cqw;
  background: url(/assets/hero/mbp-deck.svg) 0 0 / 100% 100% no-repeat,
    linear-gradient(115deg, #bfc0c3, #96989c 45%, #b4b5b9);
  box-shadow: inset 0 0 0 .1cqw #d5d5d8, inset .2cqw 0 .6cqw #fff2;
}
.hero .deck::before {
  content: ""; position: absolute; inset: 0; height: 100%; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(#0009, #0001 12%, transparent 40%),
    linear-gradient(100deg, #fff1, transparent 45%, #0001);
}
.hero .deck::after { display: none; }
.hero .hinge {
  position: absolute; left: 7%; right: 7%; height: .9cqw; top: -.12cqw;
  background: linear-gradient(#030405, #222327 45%, #08090a);
  box-shadow: 0 .2cqw .6cqw #0005;
}
.hero .deck-front {
  width: var(--mw); height: 1.15cqw; z-index: 3;
  transform: var(--body-pose) translate3d(8cqw, var(--depth), var(--depth));
  border-radius: .15cqw .15cqw .65cqw .65cqw;
  background: linear-gradient(to top, #d7d8da 0%, #a7a9ae 16%, #75777c 70%, #5d5e62 100%);
  box-shadow: inset 0 -.08cqw 0 #ececef, 0 -.1cqw 0 #444;
}
.hero .deck-front::after {
  content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: .48cqw;
  border-radius: .8cqw .8cqw .2cqw .2cqw;
  background: linear-gradient(#48494e, #8b8d92);
  box-shadow: inset 0 .06cqw .12cqw #2228, 0 -.03cqw .02cqw #d8d8dd;
}
.hero .deck-side {
  width: var(--depth); height: 1.15cqw; z-index: 1;
  background: linear-gradient(#c6c7cb, #87898e 30%, #5c5e63);
  display: flex; gap: 2cqw; padding-left: 5cqw; align-items: center;
}
.hero .deck-left { transform: var(--body-pose) translate3d(8cqw, var(--depth), 0) rotateY(-90deg); }
.hero .deck-right { transform: var(--body-pose) translate3d(calc(8cqw + var(--mw)), var(--depth), var(--depth)) rotateY(90deg); }
.hero .deck-side i { display: block; width: 1.5cqw; height: .42cqw; border-radius: .2cqw; background: #242529; box-shadow: 0 .05cqw .04cqw #ddd8; }
.hero .deck-left i:first-child { width: 2cqw; }
.hero .deck-right i:first-child { width: 2.8cqw; }
.hero .floor {
  position: absolute; top: calc(66cqw + var(--lift) * .8); left: 1%; right: 1%; height: 12cqw; opacity: .8; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 50%, #0009, transparent 64%);
  transform: scaleX(var(--shadow-scale));
  filter: blur(1cqw);
}
.hero .contact { display: none; }
.hero .contact.ph { display: none; }
.hero .handset {
  width: 17.5cqw; height: 37cqw; padding: .46cqw; z-index: 7;
  transform: translateX(calc(-1 * var(--mac-x))) var(--body-pose) translate3d(calc(77.5cqw + var(--phone-exit) * (55vw + 20cqw)), calc(var(--depth) - var(--phone-rise) + var(--phone-exit) * 5cqw), 15cqw)
    rotateY(calc(-30deg - var(--phone-exit) * 12deg)) rotateX(8deg);
  border-radius: 2.85cqw;
  background: linear-gradient(115deg, #83858a, #34353a 22%, #121315 60%, #686970 95%);
  box-shadow: 0 1.8cqw 3.5cqw -1cqw #0009, 0 0 0 .1cqw #111, inset 0 0 0 .09cqw #b4b4bb;
  will-change: transform;
}
.hero .pscreen { height: 100%; border-radius: 2.4cqw; border: .14cqw solid #0a0b0d; }
.hero-availability { display: none; }
.hero-motion .hero-availability {
  display: block; position: absolute; z-index: 3; left: 24px; right: 24px; top: 50%;
  text-align: center; pointer-events: none;
  opacity: var(--availability);
  transform: translate3d(0, calc(-50% + (1 - var(--availability)) * 32px), 0)
    scale(calc(1.06 - var(--availability) * .06));
}
.hero-availability h2 { font-family: Archivo, Inter, sans-serif; font-weight: 600; line-height: 1; }
.availability-prefix { display: block; font-size: clamp(26px, 3.8vw, 54px); letter-spacing: -.055em; color: var(--bone); }
.platform-rotor {
  display: block; position: relative; height: 1.25em; margin: 12px auto 0;
  font-size: clamp(76px, 13.5vw, 190px); font-weight: 700; letter-spacing: -.065em;
  color: var(--amber); overflow: clip; perspective: 700px;
  mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
}
.platform-word {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: var(--word-opacity, 0);
  transform: translate3d(0, var(--word-y, 110%), 0) rotateX(var(--word-angle, -24deg));
  transform-origin: 50% 50%; backface-visibility: hidden;
}
.platform-word:first-child { --word-opacity: 1; --word-y: 0%; --word-angle: 0deg; }
.availability-rule { width: 100px; height: 1px; margin: 32px auto 0; background: #f2efe722; }
.availability-rule i { display: block; width: 100%; height: 100%; background: var(--amber); transform-origin: 0 50%; transform: scaleX(var(--platform-progress)); }
.hero-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-platforms {
  position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; width: min(900px, 100%); margin: 0 auto; padding: 20px 0 4px;
  border-top: 1px solid #f2efe718;
  opacity: var(--footer-opacity);
  transform: translateY(calc((1 - var(--footer-opacity)) * 12px));
}
.hero-platforms > p { font-size: 14px; letter-spacing: -.015em; color: #b2b0b7; }
.hero-platform-links { display: flex; align-items: center; gap: 26px; }
.hero-platform-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 12px; color: #d0cdd1; transition: color .2s; white-space: nowrap; }
.hero-platform-links a:hover { color: var(--amber); }
.hero-platform-links svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; opacity: .7; }
.hero-scroll-cue { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; opacity: var(--scroll-hint); }
.hero-scroll-cue span { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: #797780; }
.hero-scroll-cue i { display: block; width: 1px; height: 12px; background: #797780; position: relative; }
.hero-scroll-cue i::after { content: ""; width: 4px; height: 4px; border-right: 1px solid #797780; border-bottom: 1px solid #797780; transform: rotate(45deg); position: absolute; left: -1.5px; bottom: 0; }
@media (max-width: 900px) {
  .hero-platforms { flex-direction: column; gap: 8px; padding-top: 15px; }
  .hero-platform-links { gap: 24px; }
  .hero .showcase { width: min(800px, calc((100svh - 435px) * 1.22), 95%); }
}
@media (max-width: 640px) {
  .hero.hero-motion { height: calc(320svh - 66px); }
  .hero-motion .hero-pin { min-height: 610px; }
  .hero .hero-pin > .wrap { padding: 26px 22px 36px; }
  .hero h1.disp { font-size: clamp(29px, 7.6vw, 46px); line-height: 1.02; }
  .hero .hero-cta { margin-top: 22px; }
  .hero .showcase { --mw: 77cqw; --pitch: -20deg; --phone-rise: 30cqw; width: 92%; margin: 16px auto 8px; }
  .hero .stage3d { height: 78cqw; perspective: 500cqw; }
  .hero .handset { width: 20cqw; height: 43cqw; padding: .6cqw; border-radius: 3.4cqw; }
  .hero .pscreen { height: 100%; border-radius: 2.8cqw; }
  .hero-platforms { width: 100%; gap: 10px; padding-top: 17px; }
  .hero-platforms > p { font-size: 13px; }
  .hero-platform-links { gap: 8px 18px; flex-wrap: wrap; justify-content: center; }
  .hero-platform-links a { font-size: 10px; gap: 5px; min-height: 40px; }
  .hero-platform-links svg { width: 15px; height: 15px; }
  .hero-motion .hero-availability { left: 14px; right: 14px; }
  .availability-prefix { font-size: 30px; }
  .platform-rotor { font-size: clamp(58px, 17vw, 108px); margin-top: 16px; }
  .availability-rule { margin-top: 24px; width: 64px; }
}
/* A short landscape viewport uses normal document flow, so nothing is trapped under the nav. */
@media (max-height: 690px) and (min-width: 641px), (max-height: 620px) {
  .hero.hero-motion { height: auto; }
  .hero-motion .hero-pin { position: relative; top: auto; height: auto; min-height: 0; }
  .hero .hero-pin > .wrap { min-height: 0; height: auto; gap: 28px; }
  .hero .showcase { width: min(620px, 90%); }
  .hero .hero-availability, .hero-scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.hero-motion { height: auto; }
  .hero-motion .hero-pin { position: relative; top: auto; height: auto; }
  .hero .hero-pin > .wrap { gap: 28px; }
  .hero .txt, .hero .lid-face, .hero .handset { will-change: auto; }
  .hero .hero-availability, .hero-scroll-cue { display: none; }
}