/* Hero device: CSS 3D laptop with a red bloom behind it. Geometry: rig = lid (W x 0.64W) with the base (W x 0.66W) folded flat from the hinge toward the viewer. */
.hero-device{--mw:clamp(380px,33vw,540px);--lid:-90deg;--ry:-28deg;--rx:-24deg;--sc:1;--lift:0px;--glow:0;--power:0;position:absolute;z-index:1;top:max(120px,calc(42svh - var(--mw) * .5));right:max(24px,calc((100vw - 1296px) / 2 + 20px));width:var(--mw);height:calc(var(--mw) * .64);transform:translate3d(0,var(--lift),0);pointer-events:none}

/* ---------- Glow ---------- */
.hd-glow{position:absolute;inset:-60% -55% -75%;opacity:var(--glow);transition:opacity .2s linear}
.hd-glow>span{position:absolute;border-radius:50%;will-change:transform,opacity}
.hd-glow-core{inset:18% 14% 22%;background:radial-gradient(closest-side,rgba(255,74,82,.95),rgba(211,47,56,.7) 30%,rgba(211,47,56,.28) 58%,transparent 76%);filter:blur(36px);animation:hd-pulse 4.6s ease-in-out infinite}
.hd-glow-ring{inset:6% 4% 14%;background:conic-gradient(from 0deg,transparent 0 8%,rgba(255,82,90,.9) 16%,transparent 28% 44%,rgba(211,47,56,.85) 56%,transparent 68% 80%,rgba(255,120,110,.7) 90%,transparent 100%);-webkit-mask:radial-gradient(closest-side,transparent 52%,#000 64%,#000 72%,transparent 86%);mask:radial-gradient(closest-side,transparent 52%,#000 64%,#000 72%,transparent 86%);filter:blur(22px);animation:hd-spin 16s linear infinite}
.hd-glow-beam{inset:-10% 34% 30%;border-radius:40%;background:linear-gradient(180deg,transparent,rgba(255,92,98,.38) 45%,rgba(211,47,56,.6) 62%,transparent);filter:blur(30px);animation:hd-beam 6s ease-in-out infinite}
.hd-glow-floor{left:6%;right:6%;bottom:16%;height:22%;background:radial-gradient(closest-side,rgba(255,70,78,.85),rgba(211,47,56,.35) 55%,transparent);filter:blur(26px)}
@keyframes hd-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.09);opacity:1}}
@keyframes hd-spin{to{transform:rotate(1turn)}}
@keyframes hd-beam{0%,100%{transform:scaleY(.9);opacity:.7}50%{transform:scaleY(1.08);opacity:1}}

/* ---------- 3D rig ---------- */
.hd-stage{position:absolute;inset:0;perspective:2200px;perspective-origin:50% 30%}
.hd-rig{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc))}
.hd-rig *{transform-style:preserve-3d}

/* Base: folded flat toward the viewer from the hinge. */
.hd-base{position:absolute;left:0;top:100%;width:100%;height:calc(var(--mw) * .66);transform-origin:50% 0;transform:rotateX(90deg)}
.hd-deck{position:absolute;inset:0;border-radius:2px 2px 14px 14px;background:linear-gradient(180deg,#2c2c31,#1c1c20 40%,#151518);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -18px 30px rgba(0,0,0,.45)}
.hd-keys{position:absolute;left:8%;right:8%;top:9%;height:44%;border-radius:6px;background:
  repeating-linear-gradient(90deg,transparent 0 calc(6.66% - 2px),#0b0b0d calc(6.66% - 2px) 6.66%),
  repeating-linear-gradient(180deg,transparent 0 calc(16.66% - 2px),#0b0b0d calc(16.66% - 2px) 16.66%),
  linear-gradient(180deg,#26262b,#202024);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.hd-trackpad{position:absolute;left:31%;right:31%;top:59%;bottom:9%;border-radius:8px;background:linear-gradient(180deg,#25252a,#1d1d21);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hd-spill{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(70% 55% at 50% 0,rgba(255,90,96,.42),transparent 70%);opacity:var(--power);mix-blend-mode:screen}
.hd-front{position:absolute;left:0;right:0;top:100%;height:calc(var(--mw) * .022);border-radius:0 0 10px 10px;background:linear-gradient(180deg,#3a3a40,#121214);transform-origin:50% 0;transform:rotateX(-90deg)}
.hd-shadow{position:absolute;left:-6%;right:-6%;top:100%;height:calc(var(--mw) * .72);transform-origin:50% 0;transform:rotateX(90deg) translateZ(-3px);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(16px)}

/* Lid: hinged at the bottom edge, 3px above the deck so it never z-fights when shut. */
.hd-lid{position:absolute;inset:0;transform-origin:50% 100%;transform:translateY(-3px) rotateX(var(--lid))}
.hd-screen,.hd-lid-back{position:absolute;inset:0;border-radius:14px 14px 4px 4px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hd-screen{padding:2.6% 2.6% 4.2%;background:#050506;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 calc(80px * var(--power)) rgba(211,47,56,calc(.55 * var(--power)))}
.hd-lid-back{transform:rotateY(180deg) translateZ(1px);display:grid;place-items:center;background:linear-gradient(145deg,#3b3b41,#202024 55%,#17171a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hd-lid-back span{font:600 calc(var(--mw) * .09)/1 Inter,system-ui,sans-serif;letter-spacing:-.05em;color:rgba(244,244,242,.16)}
.hd-lid-back span::first-letter{color:inherit}
.hd-notch{position:absolute;top:2.6%;left:50%;width:13%;height:3.4%;border-radius:0 0 8px 8px;background:#050506;transform:translateX(-50%)}

/* Display: browser chrome over a column of landing captures that scrolls with the pin. */
.hd-display{position:relative;width:100%;height:100%;overflow:hidden;border-radius:6px;background:#0d0d10;opacity:calc(.08 + var(--power) * .92);filter:brightness(calc(.35 + var(--power) * .65))}
.hd-browser{position:relative;z-index:2;display:flex;align-items:center;gap:5px;height:7.5%;padding:0 3%;background:#141417;border-bottom:1px solid rgba(255,255,255,.06)}
.hd-browser i{width:7px;height:7px;border-radius:50%;background:#3a3a40}
.hd-browser i:first-child{background:#d32f38}
.hd-browser b{margin-left:auto;margin-right:auto;padding:2px 14px;border-radius:5px;background:#1d1d21;color:#a5a5ab;font:500 9px/1.4 Inter,system-ui,sans-serif;letter-spacing:.04em}
.hd-page{display:flex;flex-direction:column;will-change:transform}
.hd-page img{display:block;width:100%;height:auto}
.hd-glare{position:absolute;inset:0;z-index:3;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 32%,transparent 70%,rgba(255,255,255,.05));pointer-events:none}

/* ---------- Pin: the hero holds while the device opens ---------- */
html.hd-ready body.editorial-site .hero{height:calc(max(800px,100svh) + 80svh)!important}
html.hd-ready body.editorial-site .hero .hero-scene{position:sticky!important;top:0!important}

/* ---------- Layout per width ---------- */
@media(max-width:1100px){.hero-device{--mw:clamp(300px,36vw,400px)}}
.editorial-site .hero-content{position:relative;z-index:2}
@media(max-width:760px){
  .hero-device{--mw:min(64vw,270px);top:92px;right:50%;transform:translate3d(50%,var(--lift),0)}
  html.hd-ready body.editorial-site .hero-content{padding-top:calc(92px + min(64vw,270px) * 1.02 + 24px)!important;padding-bottom:96px!important;min-height:100svh}
  .hd-glow{inset:-70% -45% -80%}
  html.hd-ready body.editorial-site .hero{height:calc(max(800px,100svh) + 55svh)!important}
}
@media(max-width:760px) and (max-height:760px){.hero-device{display:none}html.hd-ready body.editorial-site .hero{height:auto!important}}

@media(prefers-reduced-motion:reduce){
  .hd-glow>span{animation:none!important}
  html.hd-ready body.editorial-site .hero{height:auto!important}
  html.hd-ready body.editorial-site .hero .hero-scene{position:relative!important}
}

/* ---------- WebGL laptop (macbook-3d.js): the CSS rig steps aside, its glow stays behind the canvas ---------- */
.hero-device.hd-webgl{z-index:0}
.hero-device.hd-webgl .hd-stage{display:none}
.mb3d-canvas.is-hero{position:absolute;top:0;left:0;z-index:1;pointer-events:none}