/* Space bands only. Light sections stay white. Planets never leave their section. */

.hero,
.section-signature,
.section-dark,
.final-cta,
.proof-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero {
  min-height: 0 !important;
  height: auto !important;
  background:
    radial-gradient(900px 420px at 82% 8%, rgba(56, 120, 230, 0.22), transparent 58%),
    linear-gradient(165deg, #050d1c 0%, #0a1c38 52%, #071428 100%) !important;
}

.hero::before,
.hero-glow { display: none !important; }

.mr-sky {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.hero > .shell,
.section-signature > .shell,
.section-dark > .shell,
.final-cta > .shell,
.proof-strip > .shell {
  position: relative;
  z-index: 1;
}

.mr-planet {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #eef5ff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  animation: mr-float 8.5s ease-in-out infinite;
}

 .mr-planet i {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: block;
  border: 2px solid rgba(255,255,255,.3);
  box-shadow:
    0 0 0 5px rgba(255,255,255,.05),
    0 8px 20px rgba(0,0,0,.35),
    0 0 22px currentColor;
}

.mr-planet.p1 { top: 14%; left: 52%; color: #7ee0c8; }
.mr-planet.p1 i { background: radial-gradient(circle at 28% 28%, #f2fffb, #2dd4a0 46%, #0b3b2a 78%); }
.mr-planet.p2 { top: 10%; right: 3%; color: #93c5fd; animation-delay: -1.3s; }
 .mr-planet.p2 i { width: 76px; height: 76px; background: radial-gradient(circle at 28% 28%, #eef5ff, #3b82f6 48%, #0a2446 78%); }
.mr-planet.p3 { bottom: 20%; left: 51%; color: #fbbf24; animation-delay: -2.4s; }
 .mr-planet.p3 i { width: 70px; height: 70px; background: radial-gradient(circle at 28% 28%, #fff7d6, #f59e0b 48%, #78350f 78%); }
.mr-planet.p4 { bottom: 14%; right: 3%; color: #c4b5fd; animation-delay: -3.1s; }
.mr-planet.p4 i { width: 80px; height: 80px; background: radial-gradient(circle at 28% 28%, #f3eeff, #8b5cf6 48%, #2e1065 78%); }
.mr-planet.p5 { top: 48%; left: 2%; color: #7dd3fc; animation-delay: -4s; }
.mr-planet.p5 i { background: radial-gradient(circle at 28% 28%, #e0f7ff, #0ea5e9 48%, #083344 78%); }
.mr-planet.p6 { top: 40%; right: 3%; color: #fda4af; animation-delay: -5s; }
.mr-planet.p6 i { background: radial-gradient(circle at 28% 28%, #ffe4e8, #f43f5e 48%, #4c0519 78%); }

.mr-chip {
  position: absolute;
  padding: 6px 10px;
  border: 1px solid rgba(180, 210, 255, 0.28);
  border-radius: 999px;
  color: #e8f1ff;
  background: rgba(8, 18, 40, 0.72);
  font-size: 11px;
  font-weight: 800;
  animation: mr-float 9.5s ease-in-out infinite;
}

.mr-chip.c1 { top: 8%; left: 28%; }
.mr-chip.c2 { bottom: 8%; left: 30%; animation-delay: -3s; }

@keyframes mr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero .hero-layout {
  min-height: 0 !important;
  align-items: start !important;
  padding-block: 36px 48px !important;
}

@media (max-width: 1180px) {
  .hero-layout { padding: 16px 0 28px !important; }
  .mr-planet.p5, .mr-planet.p6 { display: none; }
}

@media (max-width: 860px) {
  .announcement { display: none !important; }
  .hero, .hero-layout {
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 0 24px !important;
  }
  .hero-copy h1 {
    font-size: clamp(1.85rem, 8.4vw, 2.4rem) !important;
    line-height: 1.08 !important;
  }
  .mr-planet { font-size: 0; gap: 0; }
  .mr-planet i { width: 16px !important; height: 16px !important; }
  .mr-chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mr-planet, .mr-chip { animation: none !important; }
}


.mr-sky canvas.mr-fall{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
  opacity:.92;
}
.hero .mr-planet,
.hero .mr-chip{opacity:.72;z-index:1}
.hero .mr-sky{background:
  radial-gradient(900px 380px at 50% -10%, rgba(37,99,235,.28), transparent 60%),
  linear-gradient(180deg, rgba(5,13,28,.2), transparent 30%, rgba(5,13,28,.55));
}





#mr-fall-root{
  position:fixed;
  top:0;left:0;
  z-index:5;
  pointer-events:none;
  display:block;
}
.site-header,
header.site-header[data-header]{
  background:rgba(7,20,40,.18) !important;
  backdrop-filter:blur(8px) saturate(1.15);
  -webkit-backdrop-filter:blur(8px) saturate(1.15);
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  z-index:20 !important;
  position:sticky;
}
.site-header.is-stuck,
.site-header.scrolled{
  background:rgba(7,20,40,.28) !important;
}
.hero .mr-sky canvas.mr-fall{display:block !important}

.mr-planet{z-index:8 !important;position:absolute}
.mr-planet i{
  z-index:9 !important;
  box-shadow:0 0 0 6px rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.4),0 0 26px currentColor !important;
}
#mr-fall-root{z-index:5 !important;height:100vh !important}

/* neutralize overlay */

#mr-fall-root{display:none !important}
.mr-sky,.hero .mr-sky{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}
.mr-sky canvas.mr-fall{display:block !important;z-index:0 !important}
.hero > .shell,
.section-dark > .shell,
.section-signature > .shell,
.final-cta > .shell{position:relative;z-index:2}
.mr-planet{z-index:1 !important}
.site-header,
header.site-header[data-header]{
  background:rgba(7,20,40,.82) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:relative;
  z-index:40 !important;
  overflow:hidden;
}
.site-header .mr-sky-head{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
}
.site-header .shell,
.site-header .header-actions,
.site-header a,
.site-header .logo{position:relative;z-index:1}

.mr-planet{font-size:13px !important;gap:12px !important;z-index:2 !important}
.mr-planet i{width:64px !important;height:64px !important}
.mr-planet.p2 i{width:76px !important;height:76px !important}
.mr-planet.p4 i{width:80px !important;height:80px !important}
.hero{overflow:visible !important}
.hero .mr-sky{
  top:-92px !important;
  height:calc(100% + 92px) !important;
}
.site-header,
header.site-header[data-header]{
  background:rgba(7,20,40,.58) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:visible !important;
}
.site-header .mr-sky-head{display:none !important}
#mr-fall-root{display:none !important}

.hero .mr-sky canvas.mr-fall,
.section-dark .mr-sky canvas.mr-fall,
.mr-sky canvas.mr-fall{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none !important;
}


.mr-planet i,
.hero .mr-planet i{
  width:38px !important;
  height:38px !important;
}
.mr-planet.p2 i{width:44px !important;height:44px !important}
.mr-planet.p4 i{width:48px !important;height:48px !important}
.mr-planet{
  font-size:11px !important;
  gap:8px !important;
  pointer-events:none;
}
.hero .mr-planet.p1{top:16% !important;left:54% !important;bottom:auto !important}
.hero .mr-planet.p2{top:8% !important;right:2% !important}
.hero .mr-planet.p3{bottom:18% !important;left:53% !important}
.hero .mr-planet.p4{bottom:12% !important;right:2% !important}
.hero .mr-chip{display:none !important}
@media (max-width:980px){
  .hero .mr-planet{display:none !important}
}

.proof-strip{position:relative;isolation:isolate;overflow:hidden}
.proof-strip .mr-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.proof-strip > .shell{position:relative;z-index:1}
.hero{overflow:visible !important}
.hero .mr-sky{
  top:-80px !important;
  height:calc(100% + 80px) !important;
}

.hero{overflow:visible !important;position:relative;z-index:2}
.hero .mr-sky{
  top:-80px !important;
  bottom:auto !important;
  height:calc(100% + 80px + 240px) !important;
}
.proof-strip{
  position:relative;
  z-index:1;
  background:transparent !important;
  overflow:visible !important;
}
.proof-strip .proof-grid article{
  background:rgba(7,16,32,.55);
  backdrop-filter:blur(6px);
}

.hero{overflow:hidden !important;z-index:auto}
.hero .mr-sky{
  top:0 !important;
  height:100% !important;
  bottom:0 !important;
}
.proof-strip{
  background:#071428 !important;
  overflow:hidden !important;
  z-index:auto !important;
}
.proof-strip .proof-grid article{
  background:transparent !important;
  backdrop-filter:none !important;
}
.hero .mr-planet.p1{top:28% !important;left:56% !important;bottom:auto !important}
.hero .mr-planet.p2{top:18% !important;right:3% !important}
.hero .mr-planet.p3{bottom:28% !important;left:58% !important}
.hero .mr-planet.p4{bottom:22% !important;right:3% !important}

.announcement{display:none !important}
.site-header,
header.site-header[data-header]{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  min-height:76px !important;
  background:#071428 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  overflow:visible !important;
  color:#fff !important;
}
.site-header .main-nav a{color:#c7d5e8 !important}
.site-header .main-nav a:hover{color:#fff !important}
.site-header .brand{color:#fff !important}
.site-header .brand span{color:#78b1ff !important}

/* MacBook chrome around live product shots */
.mbp{
  position:relative;
  width:100%;
  filter:drop-shadow(0 28px 48px rgba(15,23,42,.22));
}
.mbp-lid{
  background:linear-gradient(180deg,#2a2d33,#1a1c20);
  border-radius:16px 16px 10px 10px;
  padding:10px 10px 8px;
  border:1px solid #0b0c0e;
}
.mbp-cam{
  display:block;
  width:7px;height:7px;
  margin:0 auto 8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#4b5563,#111827 70%);
  box-shadow:0 0 0 3px #111;
}
.mbp-screen{
  border-radius:8px;
  overflow:hidden;
  background:#0b1220;
}
.mbp-screen .product-frame,
.mbp-screen .feature,
.mbp-screen [data-screen-slot]{
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  margin:0 !important;
}
.mbp-chin{
  height:12px;
  margin:0 auto;
  width:118%;
  margin-left:-9%;
  background:linear-gradient(180deg,#d7dbe2,#b4bac4 55%,#9aa1ab);
  border-radius:0 0 10px 10px;
  clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);
  box-shadow:0 8px 16px rgba(15,23,42,.12);
}
.hero-product .mbp{max-width:100%}

.mbp{
  width:min(100%,520px);
  margin:0 auto 28px;
  transform:perspective(1200px) rotateX(7deg);
  transform-origin:50% 100%;
  filter:drop-shadow(0 18px 28px rgba(15,23,42,.18));
}
.hero-product .mbp{width:min(100%,640px);margin-left:auto}
.feature .mbp{width:min(100%,420px)}
.mbp-lid{
  border-radius:12px 12px 7px 7px;
  padding:7px 7px 6px;
}
.mbp-cam{width:5px;height:5px;margin:0 auto 6px}
.mbp-chin{
  width:112%;
  margin-left:-6%;
  height:9px;
  border-radius:0 0 7px 7px;
}
.mbp-stand{
  position:relative;
  height:22px;
  margin-top:-2px;
}
.mbp-stand::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:42%;
  height:8px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#c5cad2,#8b919b);
  clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);
  border-radius:0 0 4px 4px;
}
.mbp-stand i{
  position:absolute;
  left:50%;
  bottom:0;
  width:18px;height:18px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 18%,#d1d5db 40%,#6b7280 72%,#111 100%);
  box-shadow:0 0 0 2px #9ca3af, 0 0 10px rgba(59,130,246,.45);
}
.mbp-stand i::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:2px;height:10px;
  background:#9ca3af;
  transform:translateX(-50%);
}
.feature-copy{padding-top:4px}

.mbp{
  width:100% !important;
  max-width:100% !important;
  margin:0 0 12px !important;
  transform:none !important;
  filter:drop-shadow(0 16px 28px rgba(15,23,42,.16)) !important;
}
.hero-product .mbp{width:100% !important;max-width:100% !important}
.feature .mbp{width:100% !important}
.mbp-lid{
  background:linear-gradient(180deg,#2c2f35,#16181c) !important;
  border-radius:14px 14px 8px 8px !important;
  padding:8px 8px 6px !important;
}
.mbp-cam{width:6px !important;height:6px !important;margin:0 auto 6px !important}
.mbp-screen img,
.mbp-screen .feature-media-button img{
  width:100% !important;
  height:auto !important;
  max-height:280px !important;
  object-fit:cover !important;
  object-position:top left !important;
  display:block !important;
}
.hero-product .mbp-screen img{max-height:360px !important}
.mbp-chin{
  width:108% !important;
  margin-left:-4% !important;
  height:10px !important;
  background:linear-gradient(180deg,#d5d9e0,#b0b6c0) !important;
  clip-path:polygon(2% 0,98% 0,100% 100%,0 100%) !important;
}
.mbp-stand{display:none !important}

.feature,.feature-primary,.editorial-grid article{overflow:visible !important}
.mbp{
  width:86% !important;
  max-width:560px !important;
  margin:8px auto 18px !important;
  transform:none !important;
  filter:drop-shadow(0 22px 32px rgba(15,23,42,.2)) !important;
}
.hero-product .mbp{width:78% !important;max-width:620px !important;margin-left:auto !important;margin-right:0 !important}
.mbp-lid{
  background:#1d1d1f !important;
  border-radius:12px 12px 0 0 !important;
  padding:10px 10px 8px !important;
  border:1px solid #111 !important;
}
.mbp-cam{
  width:6px !important;height:6px !important;
  margin:0 auto 7px !important;
  background:#2b2b2e !important;
  box-shadow:inset 0 0 0 1.5px #0a0a0a, 0 0 0 2px #111 !important;
}
.mbp-screen{border-radius:4px !important;background:#000 !important}
.mbp-screen img,
.mbp-screen .feature-media-button,
.mbp-screen .feature-media-button img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block !important;
}
.mbp-chin{display:none !important}
.mbp-stand{display:none !important}
.mbp-base{
  display:block !important;
  height:52px;
  margin:0 -4%;
  background:
    linear-gradient(180deg,#c9cdd4 0 6px,#dfe3e8 7px,#c5cad1 100%);
  border-radius:0 0 14px 14px;
  position:relative;
  box-shadow:inset 0 1px 0 #fff;
}
.mbp-base::before{
  content:"";
  position:absolute;
  left:50%; top:10px;
  width:28%; height:18px;
  transform:translateX(-50%);
  border:1px solid rgba(80,86,96,.28);
  border-radius:4px;
  background:linear-gradient(180deg,#d4d8de,#bcc2ca);
}
.mbp-base::after{
  content:"";
  position:absolute;
  left:50%; bottom:6px;
  width:18%; height:8px;
  transform:translateX(-50%);
  border-radius:4px;
  background:#b4bac2;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}

.iph{
  width:min(230px,70%);
  margin:10px auto 16px;
  filter:drop-shadow(0 18px 26px rgba(15,23,42,.22));
}
.iph-body{
  background:#111;
  border-radius:32px;
  padding:12px 8px 10px;
  border:2px solid #2a2a2e;
  position:relative;
  box-shadow:inset 0 0 0 1px #000;
}
.iph-body::before,
.iph-body::after{
  content:"";
  position:absolute;
  right:-3px;
  width:3px;
  background:#3f3f46;
  border-radius:2px;
}
.iph-body::before{top:78px;height:28px}
.iph-body::after{top:116px;height:48px}
.iph-island{
  display:block;
  width:72px;height:18px;
  margin:0 auto 8px;
  background:#000;
  border-radius:12px;
}
.iph-screen{
  border-radius:18px;
  overflow:hidden;
  background:#000;
  aspect-ratio:9/17;
}
.iph-screen .feature-media-button,
.iph-screen img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:top center !important;
  display:block !important;
  max-height:none !important;
}
.iph-bar{
  display:block;
  width:86px;height:4px;
  margin:8px auto 0;
  background:#3f3f46;
  border-radius:99px;
}

.iph-screen{aspect-ratio:9/19.5}
.iph-screen img{
  object-fit:cover !important;
  object-position:top center !important;
}

/* clean cards — no fake mac/iphone chrome */
.mbp,.iph,.device-duo,.mbp-lid,.mbp-base,.mbp-cam,.mbp-chin,.mbp-stand,.iph-body,.iph-island,.iph-bar{
  all:unset !important;
  display:contents !important;
}
.mbp-screen,.iph-screen{all:unset !important;display:block !important}
.product-frame-hero{transform:none !important}
.feature,.product-frame{
  overflow:hidden !important;
}
.feature-media-button,
.mbp-screen .feature-media-button,
.iph-screen .feature-media-button{
  display:block !important;
  width:100% !important;
  background:#0b1220 !important;
}
.feature-media-button img,
.mbp-screen img,
.iph-screen img,
.hero-product .mbp-screen img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:top left !important;
  display:block !important;
  transform:none !important;
}
.hero-product .feature-media-button img{
  object-fit:cover !important;
  object-position:top left !important;
}
.hero-product .mbp{width:100% !important;max-width:100% !important;margin:0 !important}

/* billion-dollar product stage */
.hero{overflow:visible}
.hero-layout{overflow:visible}
.hero-product{
  position:relative;
  overflow:visible !important;
  padding-bottom:8px;
}
.hero-product .product-frame,
.hero-product .product-frame-hero{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  transform:none !important;
}
.hero-product .lp-media{
  position:relative;
  display:block !important;
  padding:18px 18px 56px !important;
  background:transparent !important;
}
.hero-product .lp-media::before{
  content:"";
  position:absolute;
  inset:8% 6% 18% 6%;
  background:radial-gradient(ellipse at 50% 40%, rgba(56,189,248,.28), transparent 68%);
  filter:blur(28px);
  z-index:0;
  pointer-events:none;
}
.hero-product .feature-media-button{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  border-radius:18px;
  overflow:hidden;
  background:#071018 !important;
  box-shadow:
    0 0 0 1px rgba(186,214,255,.16),
    0 30px 70px rgba(2,12,36,.55),
    0 0 80px rgba(37,99,235,.18);
}
.hero-product .feature-media-button img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
}
.hero-product .lp-phone{
  position:absolute !important;
  right:2%;
  bottom:8px;
  width:30% !important;
  min-width:120px;
  max-width:210px !important;
  margin:0 !important;
  z-index:3;
  border-radius:22px;
  overflow:hidden;
  background:#05070c !important;
  border:2px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 24px 50px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.06);
  transform:rotate(5deg);
}
.hero-caption{
  position:relative !important;
  left:auto !important;
  bottom:auto !important;
  margin:10px 8px 0 !important;
  max-width:none !important;
  background:rgba(6,16,34,.72) !important;
  border:1px solid rgba(255,255,255,.1) !important;
}

/* feature cards — product well */
.feature{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.section-light .feature{
  background:#fff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 1px 0 rgba(15,23,42,.04), 0 16px 36px rgba(15,23,42,.06) !important;
}
.section-light .feature:hover{
  transform:translateY(-5px);
  box-shadow:0 28px 56px rgba(15,23,42,.12) !important;
}
.section-dark .feature,
.section-signature .feature{
  background:rgba(8,20,40,.78) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter:blur(16px);
}
.section-dark .feature:hover,
.section-signature .feature:hover{
  border-color:rgba(125,186,255,.38) !important;
  box-shadow:0 24px 50px rgba(0,0,0,.32) !important;
}
.feature .lp-media{
  position:relative;
  display:block !important;
  padding:16px 16px 22px !important;
  background:linear-gradient(180deg,#071018,#0b1628) !important;
}
.feature .feature-media-button{
  display:block;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  background:#071018 !important;
  box-shadow:0 16px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06);
}
.feature .feature-media-button img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}
.feature .lp-phone{
  position:absolute !important;
  right:14px;
  bottom:10px;
  width:24% !important;
  min-width:72px;
  max-width:128px !important;
  margin:0 !important;
  border-radius:16px;
  overflow:hidden;
  background:#05070c !important;
  border:2px solid rgba(255,255,255,.16) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.4);
  z-index:3;
}
.feature-copy{
  padding:22px 22px 24px !important;
  margin:0 !important;
}
.feature-copy h3{
  margin:4px 0 0 !important;
  font-size:1.22rem !important;
  letter-spacing:-.03em;
}
@media (max-width:860px){
  .hero-product .lp-media{padding:8px 8px 12px !important}
  .hero-product .feature-media-button{display:none !important}
  .hero-product .lp-phone{
    position:relative !important;
    width:min(280px,78%) !important;
    max-width:none !important;
    right:auto;bottom:auto;
    margin:0 auto !important;
    transform:none;
    display:block;
  }
  .feature .lp-phone{
    width:min(120px,30%) !important;
  }
}



.mr-voices{padding-top:72px;padding-bottom:80px;background:
  radial-gradient(900px 420px at 10% -10%, rgba(37,99,235,.08), transparent 55%),
  radial-gradient(700px 380px at 100% 0%, rgba(14,165,233,.06), transparent 50%),
  #f8fafc}
.mr-voices .shell{max-width:1120px}
.mr-voices .mr-clients{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 36px}
.mr-client{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border:1px solid rgba(15,23,42,.08);
  border-radius:999px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.04);min-width:0}
.mr-client img,.mr-client .ph{width:34px;height:34px;border-radius:50%;object-fit:cover;background:linear-gradient(180deg,#1d4ed8,#0f172a);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex:0 0 34px;letter-spacing:.02em}
.mr-client b{display:block;font-size:12.5px;letter-spacing:-.02em;color:#0f172a;line-height:1.2}
.mr-client span{display:block;font-size:11px;color:#64748b}
.mr-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mr-quote{position:relative;padding:22px 22px 18px;border:1px solid rgba(15,23,42,.08);border-radius:22px;
  background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.06);display:flex;flex-direction:column;min-height:220px}
.mr-quote:first-child{grid-column:span 2;background:linear-gradient(180deg,#0f172a,#163056);color:#e2e8f0;border-color:transparent}
.mr-quote:first-child p{color:#f8fafc;font-size:22px;line-height:1.35;letter-spacing:-.03em}
.mr-quote:first-child cite{color:#93c5fd}
.mr-quote:first-child .mr-tag{background:#1e3a5f;color:#bfdbfe}
.mr-quote .st{color:#f59e0b;letter-spacing:3px;font-size:13px;margin:0 0 10px}
.mr-quote p{margin:0 0 16px;font-size:16px;line-height:1.5;color:#0f172a;font-weight:600;letter-spacing:-.02em;flex:1}
.mr-quote cite{font-style:normal;font-size:12.5px;font-weight:700;color:#475569;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mr-quote .mr-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.mr-quote.empty{color:#64748b;min-height:0}
@media (max-width:860px){
  .mr-quotes{grid-template-columns:1fr}
  .mr-quote:first-child{grid-column:auto}
  .mr-quote:first-child p{font-size:18px}
}


/* mobile drawer — must beat relative z from header kids */
@media (max-width: 1180px) {
  header.site-header { overflow: visible !important; }
  header.site-header nav.main-nav,
  .site-header nav,
  #main-nav {
    position: fixed !important;
    z-index: 240 !important;
  }
  .site-header .menu-toggle { z-index: 260 !important; }
  html.nav-open, body.nav-open { overflow: hidden !important; }
}


/* Hero cursor theatre */
.hero .mr-theatre{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;display:block;
}
.mr-theatre-ring{
  position:absolute;left:0;top:0;width:18px;height:18px;
  margin:0;padding:0;
  border:1.5px solid rgba(253,230,138,.9);
  border-radius:50%;
  background:rgba(251,191,36,.12);
  box-shadow:0 0 14px rgba(147,197,253,.55), 0 0 0 6px rgba(251,191,36,.1);
  pointer-events:none;z-index:3;opacity:0;
  transition:opacity .18s ease;
  will-change:transform;
}
@media (pointer:coarse){
  .mr-theatre-ring{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero .mr-theatre,.mr-theatre-ring{display:none !important}
}


/* OS653-landing-safe-top: extra clock gap ONLY in installed PWA, never on desktop web */
.site-header,
header.site-header[data-header]{
  /* restore natural header — do not force 52px on Chrome/Safari tabs */
  box-sizing: border-box;
}
@media (display-mode: standalone), (display-mode: fullscreen){
  .site-header,
  header.site-header[data-header]{
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
}
html.mr-pwa .site-header,
html.mr-pwa header.site-header[data-header]{
  padding-top: env(safe-area-inset-top, 0px) !important;
}


/* hero desk fullscreen */
@media (min-width: 981px){
  .hero.section-dark{
    min-height: calc(100svh - 64px);
  }
  .hero .shell.hero-layout{
    width: min(1680px, calc(100vw - 32px)) !important;
    max-width: 1680px !important;
    grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr) !important;
    align-items: center !important;
    gap: 28px !important;
    min-height: calc(100svh - 88px);
    padding-block: 20px 28px !important;
  }
  .hero-copy h1{
    font-size: clamp(2.15rem, 3.5vw, 3.35rem) !important;
    line-height: 1.04 !important;
    max-width: none !important;
  }
  .hero-copy{min-width:0}
  .hero-product{
    width:100% !important;
    max-width:none !important;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .hero-product .lp-media{
    padding: 0 0 8px !important;
    width:100% !important;
  }
  .hero-product .product-frame-hero,
  .hero-product .feature-media-button{
    width:100% !important;
    height: auto !important;
    max-height: min(68vh, 640px) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.32) !important;
  }
  .hero-product .feature-media-button img,
  .hero-product .product-frame-hero img,
  .hero-product .mbp-screen img{
    width: 100% !important;
    height: auto !important;
    max-height: min(68vh, 640px) !important;
    object-fit: cover !important;
    object-position: top left !important;
    background: transparent !important;
    display: block !important;
  }
  .hero-product .lp-phone{
    width: 20% !important;
    max-width: 150px !important;
    min-width: 110px !important;
    right: 12px !important;
    bottom: 18px !important;
  }
}
@media (max-width: 980px){
  .hero-product .feature-media-button,
  .hero-product .product-frame-hero{
    height: auto !important;
    max-height: none !important;
  }
  .hero-product .feature-media-button img{
    max-height: none !important;
    height: auto !important;
  }
}


/* hero v4: full overview, no crop, no white strip */
.hero-product .lp-media{padding:8px 8px 28px !important;background:transparent !important}
.hero-product .feature-media-button{
  background:#0b1220 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 30px 70px rgba(2,12,36,.5), 0 0 0 1px rgba(186,214,255,.16) !important;
}
.hero-product .feature-media-button img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:top left !important;
  background:#f8fafc !important;
  display:block !important;
}
.hero-product .lp-phone{
  display:block !important;
  right:-6% !important;
  bottom:10px !important;
  width:22% !important;
  max-width:170px !important;
  min-width:110px !important;
  transform:rotate(6deg);
  z-index:4 !important;
}
.hero-product{overflow:visible !important}

/* hero v5 product shot includes the phone */
.hero-product .lp-phone{display:none!important}
.hero-product .feature-media-button{
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:visible!important;
}
.hero-product .feature-media-button img{
  width:100%!important;height:auto!important;
  object-fit:contain!important;
  background:transparent!important;
  border-radius:0!important;
}


/* hero v6: real desk + phone composite, keep extra phone off */
.hero-product .lp-phone{display:none!important}
.hero-product .feature-media-button{
  background:transparent!important;
  box-shadow:none!important;
  border-radius:18px!important;
  overflow:visible!important;
}
.hero-product .feature-media-button img{
  width:100%!important;height:auto!important;
  object-fit:contain!important;
  background:transparent!important;
  border-radius:18px!important;
  filter:none!important;
}
.hero-product .lp-media{padding:0!important}


/* hero v7: force the desk image to show, light card, phone on */
.hero-product .product-frame-hero,
.hero-product .feature-media-button{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  min-height:280px !important;
  height:auto !important;
  background:#fff !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow: 0 24px 60px rgba(2,12,36,.45), 0 0 0 1px rgba(186,214,255,.2) !important;
}
.hero-product .feature-media-button img,
.hero-product .hero-fallback-img,
.hero-product .product-frame-hero img{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:top left !important;
  background:#fff !important;
}
.hero-product .lp-phone{
  display:block !important;
  width:28% !important;
  max-width:200px !important;
  min-width:112px !important;
  right:-4% !important;
  bottom:8px !important;
  z-index:5 !important;
  background:#fff !important;
  border:2px solid rgba(255,255,255,.7) !important;
}
.hero-product .lp-media{padding:8px 8px 20px !important}
@media (max-width: 980px){
  .hero-product .feature-media-button,
  .hero-product .product-frame-hero{display:block !important; min-height:200px !important}
  .hero-product .feature-media-button img{display:block !important}
}


/* hero v9: big visible phone overlay, not clipped */
.hero-product{
  position:relative !important;
  overflow:visible !important;
}
.hero-product .product-frame-hero,
.hero-product .feature-media-button{
  position:relative !important;
  overflow:visible !important;
}
.hero-product .lp-phone{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:absolute !important;
  right:-6% !important;
  bottom:-6% !important;
  width:38% !important;
  max-width:280px !important;
  min-width:168px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:8 !important;
  transform:rotate(-4deg) !important;
  background:#fff !important;
  border-radius:28px !important;
  overflow:hidden !important;
  border:3px solid rgba(255,255,255,.95) !important;
  box-shadow:
    0 22px 50px rgba(0,0,0,.45),
    0 0 0 1px rgba(15,23,42,.18),
    0 0 40px rgba(37,99,235,.18) !important;
}
.hero-product .lp-phone img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:top center !important;
  background:#fff !important;
}
@media (min-width:981px){
  .hero-product .lp-phone{
    width:36% !important;
    max-width:300px !important;
    min-width:200px !important;
    right:-8% !important;
    bottom:-4% !important;
  }
}
@media (max-width:860px){
  .hero-product .lp-phone{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    width:min(340px,82%) !important;
    max-width:340px !important;
    min-width:0 !important;
    margin:14px auto 0 !important;
    transform:none !important;
  }
}


/* hero v10: phone stands big on the Mac, lifted off Maya */
.hero-product{position:relative !important; overflow:visible !important}
.hero-product .hero-devices{
  position:relative !important;
  display:block !important;
  overflow:visible !important;
}
.hero-product .product-frame-hero,
.hero-product .feature-media-button{
  position:relative !important;
  overflow:hidden !important;
}
.hero-product .lp-phone{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:absolute !important;
  left:auto !important;
  right:12% !important;
  top:8% !important;
  bottom:auto !important;
  width:min(300px, 42%) !important;
  max-width:300px !important;
  min-width:210px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:20 !important;
  transform:rotate(-6deg) !important;
  background:#fff !important;
  border-radius:32px !important;
  overflow:hidden !important;
  border:4px solid #fff !important;
  box-shadow:
    0 28px 60px rgba(0,0,0,.5),
    0 0 0 1px rgba(15,23,42,.2),
    0 0 48px rgba(37,99,235,.22) !important;
}
.hero-product .lp-phone img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:top center !important;
  background:#fff !important;
}
@media (min-width:981px){
  .hero-product .lp-phone{
    width:280px !important;
    max-width:280px !important;
    min-width:240px !important;
    right:8% !important;
    top:6% !important;
  }
}
@media (max-width:860px){
  .hero-product .lp-phone{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:min(320px, 86%) !important;
    max-width:320px !important;
    min-width:0 !important;
    margin:18px auto 0 !important;
    transform:none !important;
  }
}


/* hero v11: one device — the phone. Mac stays in DOM for CMS, hidden */
.hero-product .hero-devices{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  overflow:visible !important;
  min-height:0 !important;
}
.hero-product .product-frame-hero,
.hero-product .feature-media-button{
  display:none !important;
}
.hero-product .lp-phone{
  position:relative !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:min(340px, 78%) !important;
  max-width:340px !important;
  min-width:0 !important;
  margin:0 auto !important;
  transform:none !important;
  z-index:4 !important;
  background:#fff !important;
  border-radius:32px !important;
  overflow:hidden !important;
  border:4px solid #fff !important;
  box-shadow:
    0 28px 64px rgba(0,0,0,.48),
    0 0 0 1px rgba(15,23,42,.18) !important;
}
.hero-product .lp-phone img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:top center !important;
}
@media (min-width:981px){
  .hero-product .lp-phone{
    width:320px !important;
    max-width:320px !important;
  }
}
@media (max-width:860px){
  .hero-product .lp-phone{
    width:min(300px, 86%) !important;
    max-width:300px !important;
  }
}


/* hero v12: Mac is the desk. Small phone overlay. Not two giants. */
.hero-product{position:relative !important; overflow:visible !important}
.hero-product .hero-devices{
  position:relative !important;
  display:block !important;
  overflow:visible !important;
}
.hero-product .product-frame-hero,
.hero-product .feature-media-button{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  width:100% !important;
  max-height:min(52vh, 520px) !important;
  overflow:hidden !important;
  background:#fff !important;
  border-radius:16px !important;
}
.hero-product .product-frame-hero img,
.hero-product .feature-media-button img,
.hero-product .hero-fallback-img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:min(52vh, 520px) !important;
  object-fit:cover !important;
  object-position:top left !important;
}
.hero-product .lp-phone{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:absolute !important;
  left:auto !important;
  right:18px !important;
  top:auto !important;
  bottom:56px !important;
  width:148px !important;
  max-width:148px !important;
  min-width:148px !important;
  margin:0 !important;
  transform:rotate(-4deg) !important;
  z-index:6 !important;
  background:#fff !important;
  border-radius:22px !important;
  overflow:hidden !important;
  border:3px solid #fff !important;
  box-shadow:0 16px 36px rgba(0,0,0,.42), 0 0 0 1px rgba(15,23,42,.16) !important;
}
.hero-product .lp-phone img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:top center !important;
}
@media (min-width:981px){
  .hero-product .lp-phone{
    width:156px !important;
    max-width:156px !important;
    min-width:156px !important;
    right:22px !important;
    bottom:64px !important;
  }
}
@media (max-width:860px){
  .hero-product .product-frame-hero,
  .hero-product .feature-media-button,
  .hero-product .product-frame-hero img{
    max-height:none !important;
  }
  .hero-product .lp-phone{
    width:120px !important;
    max-width:120px !important;
    min-width:120px !important;
    right:12px !important;
    bottom:48px !important;
  }
}


/* hero v13: sharp original PNGs, contain not cover-crop */
.hero-product .product-frame-hero,
.hero-product .feature-media-button{
  display:block !important;
  max-height:none !important;
  overflow:hidden !important;
  background:#f8fafc !important;
}
.hero-product .product-frame-hero img,
.hero-product .feature-media-button img,
.hero-product .hero-fallback-img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:top left !important;
  image-rendering:auto !important;
  background:#f8fafc !important;
}
.hero-product .lp-phone{
  display:block !important;
  width:148px !important;
  max-width:148px !important;
  min-width:148px !important;
}
.hero-product .lp-phone img{
  image-rendering:auto !important;
  object-fit:contain !important;
}


/* hero v14: one Mac frame + one iPhone frame, one screenshot each */
.hero-product{position:relative !important; overflow:visible !important}
.hero-product .hero-devices{
  position:relative !important;
  display:block !important;
  overflow:visible !important;
  padding: 4px 8px 18px 0 !important;
}
.hero-mac{position:relative; width:100%; max-width:none}
.hero-mac-lid{
  background:#1a1b1e;
  border-radius:16px 16px 10px 10px;
  padding:11px 11px 14px;
  box-shadow: 0 28px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.hero-mac-cam{
  width:7px; height:7px; border-radius:50%;
  margin:0 auto 8px;
  background:radial-gradient(circle at 35% 35%, #3b3b40, #0b0b0d 70%);
  box-shadow:0 0 0 3px #2a2a2e;
}
.hero-mac-screen,
.hero-mac-screen.product-frame-hero,
.hero-mac-screen .feature-media-button{
  display:block !important;
  visibility:visible !important;
  background:#0b1220 !important;
  border-radius:6px !important;
  overflow:hidden !important;
  min-height:0 !important;
  max-height:none !important;
  box-shadow:none !important;
  border:0 !important;
}
.hero-mac-screen img,
.hero-mac-screen .feature-media-button img,
.hero-mac-screen .hero-fallback-img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:top left !important;
  background:#f8fafc !important;
  border-radius:0 !important;
}
.hero-mac-screen .feature-media-button img + img,
.hero-mac-screen img + img{
  display:none !important;
}
.hero-mac-base{
  height:12px;
  margin:0 7%;
  background:linear-gradient(#d4d4d8, #a1a1aa);
  border-radius:0 0 10px 10px;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
.hero-mac-base::after{
  content:"";
  display:block;
  width:64px; height:4px;
  margin:4px auto 0;
  background:#71717a;
  border-radius:2px;
}
.hero-product .hero-iphone.lp-phone,
.hero-product .hero-iphone{
  display:block !important;
  position:absolute !important;
  right:10px !important;
  bottom:22px !important;
  top:auto !important;
  left:auto !important;
  width:132px !important;
  max-width:132px !important;
  min-width:132px !important;
  margin:0 !important;
  padding:12px 8px 14px !important;
  transform:rotate(-5deg) !important;
  z-index:8 !important;
  background:#111214 !important;
  border-radius:28px !important;
  overflow:hidden !important;
  border:2px solid #3f3f46 !important;
  box-shadow: 0 22px 44px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.06) !important;
}
.hero-iphone-island{
  display:block;
  width:46%;
  height:11px;
  margin:0 auto 8px;
  background:#000;
  border-radius:10px;
}
.hero-product .hero-iphone img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border-radius:16px !important;
  object-fit:contain !important;
  background:#fff !important;
}
@media (min-width:981px){
  .hero-product .hero-iphone.lp-phone,
  .hero-product .hero-iphone{
    width:148px !important;
    max-width:148px !important;
    min-width:148px !important;
    right:14px !important;
    bottom:28px !important;
  }
}
@media (max-width:860px){
  .hero-product .hero-iphone.lp-phone,
  .hero-product .hero-iphone{
    width:118px !important;
    max-width:118px !important;
    min-width:118px !important;
    right:6px !important;
    bottom:18px !important;
  }
}


/* hero v15: hairline frames, no fat bezel */
.hero-mac-lid{
  background:#111214 !important;
  border-radius:10px !important;
  padding:3px 3px 3px !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.1) !important;
}
.hero-mac-cam{
  width:4px !important; height:4px !important;
  margin:0 auto 3px !important;
  box-shadow:none !important;
}
.hero-mac-screen,
.hero-mac-screen.product-frame-hero,
.hero-mac-screen .feature-media-button{
  background:transparent !important;
  border-radius:6px !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  min-height:0 !important;
}
.hero-mac-base{display:none !important}
.hero-product .hero-iphone.lp-phone,
.hero-product .hero-iphone{
  width:128px !important;
  max-width:128px !important;
  min-width:128px !important;
  padding:3px !important;
  border-radius:22px !important;
  border:1px solid #3f3f46 !important;
  background:#0a0a0a !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.4) !important;
}
.hero-iphone-island{display:none !important}
.hero-product .hero-iphone img{
  border-radius:19px !important;
}
@media (min-width:981px){
  .hero-product .hero-iphone.lp-phone,
  .hero-product .hero-iphone{
    width:140px !important;
    max-width:140px !important;
    min-width:140px !important;
    padding:3px !important;
  }
}


/* hero v16: new iPhone SS, thin frame, no fake island */
.hero-product .hero-iphone.lp-phone,
.hero-product .hero-iphone{
  width:168px !important;
  max-width:168px !important;
  min-width:168px !important;
  padding:3px !important;
  border-radius:26px !important;
  border:1px solid #27272a !important;
  background:#09090b !important;
  overflow:hidden !important;
}
.hero-iphone-island{display:none !important}
.hero-product .hero-iphone img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border-radius:23px !important;
  object-fit:contain !important;
  object-position:top center !important;
  background:#fff !important;
}
@media (min-width:981px){
  .hero-product .hero-iphone.lp-phone,
  .hero-product .hero-iphone{
    width:176px !important;
    max-width:176px !important;
    min-width:176px !important;
  }
}
@media (max-width:860px){
  .hero-product .hero-iphone.lp-phone,
  .hero-product .hero-iphone{
    width:132px !important;
    max-width:132px !important;
    min-width:132px !important;
  }
}


/* hero v17: lock layout. Mac cannot blow to 2880px. Phone stays. */
.hero.section-dark{
  min-height:0 !important;
  overflow:hidden !important;
}
.hero .shell.hero-layout{
  min-height:0 !important;
  width:min(1200px, calc(100vw - 32px)) !important;
  max-width:1200px !important;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr) !important;
  align-items:center !important;
  gap:28px !important;
  padding-block:28px 36px !important;
}
.hero-product,
.hero-product .hero-devices,
.hero-mac,
.hero-mac-lid,
.hero-mac-screen,
.hero-mac-screen.product-frame-hero{
  max-width:100% !important;
  width:100% !important;
  min-height:0 !important;
}
.hero-product .hero-devices{
  position:relative !important;
  overflow:visible !important;
}
.hero-mac-screen img,
.hero-mac-screen .feature-media-button,
.hero-mac-screen .feature-media-button img,
.hero-product .hero-fallback-img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:min(42vh, 380px) !important;
  object-fit:contain !important;
  object-position:top left !important;
}
.hero-mac-screen .feature-media-button img + img,
.hero-mac-screen img + img{ display:none !important; }
.hero-mac-base{display:none !important}

.hero-product .hero-iphone.lp-phone,
.hero-product .hero-iphone,
.hero-product .lp-phone{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:absolute !important;
  right:8px !important;
  bottom:8px !important;
  top:auto !important;
  left:auto !important;
  width:148px !important;
  max-width:148px !important;
  min-width:148px !important;
  margin:0 !important;
  padding:3px !important;
  transform:rotate(-4deg) !important;
  z-index:8 !important;
}
.hero-iphone-island{display:none !important}
.hero-product .hero-iphone img,
.hero-product .lp-phone img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  border-radius:22px !important;
  object-fit:contain !important;
}
@media (max-width:860px){
  .hero .shell.hero-layout{
    grid-template-columns:1fr !important;
  }
  .hero-mac-screen img,
  .hero-mac-screen .feature-media-button img{
    max-height:min(38vh, 280px) !important;
  }
  .hero-product .hero-iphone.lp-phone,
  .hero-product .hero-iphone{
    width:120px !important;
    max-width:120px !important;
    min-width:120px !important;
  }
}