/* Canonical hero product-proof geometry.
   This file is the only owner of the dashboard/phone composition and parallax
   transforms. Hero copy, headline typography, form controls, and header chrome
   are intentionally owned by their responsibility modules. */
body.rm-page-home .hero-grid{align-items:start}

body.rm-page-home .hero .hero-theater{
  position:relative;
  min-height:650px;
  overflow:visible;
  border-radius:0;
  box-shadow:none;
}

body.rm-page-home .hero .theater-stage{
  position:relative;
  min-height:650px;
  overflow:visible;
}

body.rm-page-home .hero .theater-topline,
body.rm-page-home .hero .driveway-scene,
body.rm-page-home .hero .phone-frame,
body.rm-page-home .hero .theater-progress{display:none!important}

body.rm-page-home .hero .hero-dashboard-preview{
  position:absolute;
  z-index:1;
  top:20px;
  right:0;
  bottom:auto;
  left:auto;
  width:min(86%,640px);
  min-height:508px;
  transform:rotate(.35deg);
}

body.rm-page-home .hero .hero-dashboard-brand{
  display:grid;
  justify-items:start;
  gap:5px;
}

body.rm-page-home .hero .hero-dashboard-logo{
  display:block;
  width:176px;
  height:auto;
}

body.rm-page-home .hero .hero-dashboard-brand small{
  max-width:230px;
  overflow:hidden;
  color:#7B746E;
  font:600 9px/1.2 "IBM Plex Mono",monospace;
  letter-spacing:.04em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Keep the real customer page at its native 390x780 layout and use layout zoom
   only on the document. A non-scaled screen layer owns the physical clip so
   all four bezels and corner bevels stay concentric at every breakpoint. */
body.rm-page-home .hero .hero-phone-preview{
  position:absolute;
  z-index:4;
  top:auto;
  right:auto;
  bottom:8px;
  left:57%;
  width:318px;
  height:614px;
  padding:0;
  overflow:hidden;
  border:2px solid #27231F;
  border-radius:40px;
  background:#171513;
  box-shadow:0 32px 65px rgba(23,21,19,.28);
  transform:translateX(-50%) rotate(-2.4deg);
  transform-origin:center;
}

/* The live customer page is fully interactive, so advertise that affordance
   immediately instead of relying on visitors to infer it from the phone shell. */
body.rm-page-home .hero .hero-phone-interaction-cue{
  position:absolute;
  z-index:6;
  top:0;
  left:57%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border:1px solid rgba(245,71,3,.24);
  border-radius:999px;
  background:rgba(255,255,255,.97);
  color:#5F5852;
  box-shadow:0 8px 24px rgba(23,21,19,.11);
  font:600 9px/1 "IBM Plex Mono",monospace;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
  transform:translateX(-50%);
  pointer-events:none;
}

/* The dot pulses while the instruction itself blinks. Keeping both on real DOM
   nodes avoids the pseudo-element paint issue seen in iOS WebKit. */
body.rm-page-home .hero .hero-demo-pulse{
  display:block;
  width:9px;
  height:9px;
  flex:none;
  border-radius:50%;
  background:#F54703;
  box-shadow:0 0 0 4px rgba(245,71,3,.16);
  transform:scale(.72);
  -webkit-transform:scale(.72);
  transform-origin:center;
  -webkit-transform-origin:center;
  animation:rmHeroDemoPulse 1.05s cubic-bezier(.4,0,.2,1) infinite both;
  -webkit-animation:rmHeroDemoPulse 1.05s cubic-bezier(.4,0,.2,1) infinite both;
  will-change:transform,opacity;
}
body.rm-page-home .hero .hero-phone-interaction-cue span{
  color:#171513;
  font-size:11px;
  font-weight:800;
  letter-spacing:.065em;
}
body.rm-page-home .hero .hero-phone-interaction-cue strong{
  color:#D93B02;
  font:inherit;
  letter-spacing:0;
  animation:rmHeroDemoLabelBlink 1.05s steps(1,end) infinite both;
  -webkit-animation:rmHeroDemoLabelBlink 1.05s steps(1,end) infinite both;
  will-change:opacity;
}

@keyframes rmHeroDemoPulse{
  0%,100%{opacity:.58;transform:scale(.72)}
  50%{opacity:1;transform:scale(1.55)}
}
@-webkit-keyframes rmHeroDemoPulse{
  0%,100%{opacity:.58;-webkit-transform:scale(.72)}
  50%{opacity:1;-webkit-transform:scale(1.55)}
}
@keyframes rmHeroDemoLabelBlink{
  0%,44%,100%{opacity:1}
  45%,70%{opacity:.22}
}
@-webkit-keyframes rmHeroDemoLabelBlink{
  0%,44%,100%{opacity:1}
  45%,70%{opacity:.22}
}

/* Repmation's global mobile experience mode intentionally suppresses heavier
   animation below 900px. This tiny cue is the exception: restore only its two
   animation clocks when the OS explicitly reports normal motion. */
@media(prefers-reduced-motion:no-preference){
  html[data-rm-experience='off'] body.rm-page-home .hero .hero-demo-pulse,
  html[data-rm-experience='off'] body.rm-page-home .hero .hero-phone-interaction-cue strong{
    animation-duration:1.05s!important;
    -webkit-animation-duration:1.05s!important;
    animation-iteration-count:infinite!important;
    -webkit-animation-iteration-count:infinite!important;
  }
}

body.rm-page-home .hero .hero-phone-preview::before{
  content:"";
  position:absolute;
  z-index:3;
  top:14px;
  left:50%;
  width:72px;
  height:7px;
  border-radius:999px;
  background:#302C28;
  transform:translateX(-50%);
  pointer-events:none;
}

body.rm-page-home .hero .hero-phone-screen{
  position:absolute;
  z-index:1;
  inset:9px;
  overflow:hidden;
  border-radius:29px;
  clip-path:inset(0 round 29px);
  background:#FFFFFF;
}

body.rm-page-home .hero .hero-phone-screen iframe{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:390px;
  height:780px;
  max-width:none;
  border:0;
  border-radius:0;
  clip-path:none;
  background:#FFFFFF;
  zoom:.758974;
}

/* Keep Google-click feedback inside the product the visitor just used. The
   overlay sits above the phone screen without affecting shell geometry, and
   uses the same warm light surface language as the rest of the product proof. */
body.rm-page-home .hero .hero-phone-preview > .scan-toast{
  top:42px;
  right:14px;
  bottom:auto;
  left:14px;
  width:auto;
  max-width:none;
  padding:11px 12px;
  border:1px solid var(--blaze);
  background:rgba(255,253,251,.98);
  color:#171513;
  box-shadow:0 18px 45px rgba(23,21,19,.16);
  pointer-events:none;
  transform:translate3d(0,10px,0);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1);
}

body.rm-page-home .hero .hero-phone-preview > .scan-toast span{margin-top:1px;color:#6B655F}

body.rm-page-home .hero .hero-phone-preview > .scan-toast.show{
  transform:translate3d(0,0,0);
}

@media(max-width:1180px){
  body.rm-page-home .hero .hero-theater{
    width:min(900px,100%);
    margin-inline:auto;
  }
  body.rm-page-home .hero .hero-dashboard-preview{width:min(82%,720px)}
  body.rm-page-home .hero .hero-phone-preview{
    left:59%;
    width:300px;
    height:578px;
  }
  body.rm-page-home .hero .hero-phone-interaction-cue{top:30px;left:59%}
  body.rm-page-home .hero .hero-phone-screen iframe{zoom:.71282}
}

/* Once the right-aligned dashboard reaches its 720px cap, this is its measured
   visual center inside the constrained theater. */
@media(min-width:988px) and (max-width:1180px){
  body.rm-page-home .hero .hero-phone-preview,
  body.rm-page-home .hero .hero-phone-interaction-cue{left:59.1%}
}

/* Compact laptop windows can fall below the old desktop breakpoint because of
   browser zoom, sidebars, or split-screen use. Keep the proof centered and keep
   the 390px live page matched exactly to the smaller shell. */
@media(max-width:850px){
  body.rm-page-home .hero .hero-theater,
  body.rm-page-home .hero .theater-stage{min-height:640px}
  body.rm-page-home .hero .hero-dashboard-preview{
    top:18px;
    width:92%;
    padding:17px;
    transform:none;
  }
  body.rm-page-home .hero .hero-phone-preview{
    bottom:0;
    left:54%;
    width:228px;
    height:434px;
    transform:translateX(-50%) rotate(-1deg);
  }
  body.rm-page-home .hero .hero-phone-interaction-cue{top:170px;left:54%}
  body.rm-page-home .hero .hero-phone-screen iframe{zoom:.528205}
  body.rm-page-home .hero .hero-phone-preview > .scan-toast{
    top:32px;
    right:10px;
    left:10px;
    gap:8px;
    padding:9px 10px;
  }
  body.rm-page-home .hero .hero-phone-preview > .scan-toast svg{width:22px;height:22px}
  body.rm-page-home .hero .hero-phone-preview > .scan-toast strong{font-size:11px}
  body.rm-page-home .hero .hero-phone-preview > .scan-toast span{font-size:8px}
}

/* Mobile makes the live phone the dominant proof while retaining enough of the
   full-height dashboard to establish the owner context behind it. WebKit does
   not reliably honor CSS zoom for iframe paint geometry, so the native 390x780
   customer document is scaled with transform at a fixed origin. The shell
   heights account for the 2px border and 4px screen inset so the clipped screen
   remains exactly 1:2 and the transformed document fills it. */
@media(max-width:560px){
  body.rm-page-home .hero .hero-theater{
    width:100%;
    min-height:670px;
    margin:0;
    overflow:visible;
  }
  body.rm-page-home .hero .theater-stage{
    display:block;
    min-height:670px;
    padding-bottom:0;
    overflow:visible;
  }
  body.rm-page-home .hero .hero-dashboard-preview{
    position:absolute;
    z-index:1;
    top:8px;
    right:auto;
    bottom:auto;
    left:50%;
    display:flex;
    flex-direction:column;
    width:calc(100% - 24px);
    min-height:646px;
    padding:14px;
    transform:translateX(-50%);
  }
  body.rm-page-home .hero .hero-dashboard-range{border-color:transparent}
  body.rm-page-home .hero .hero-dashboard-logo{width:142px}
  body.rm-page-home .hero .hero-activity-table{
    display:grid;
    grid-template-rows:repeat(6,minmax(0,1fr));
    width:100%;
    min-height:280px;
    flex:1 1 auto;
  }
  body.rm-page-home .hero .hero-phone-preview{
    position:absolute;
    z-index:4;
    top:30px;
    right:auto;
    bottom:auto;
    left:60%;
    width:306px;
    height:600px;
    margin:0;
    border-radius:40px;
    transform:translateX(-50%);
  }
  body.rm-page-home .hero .hero-phone-interaction-cue{
    top:0;
    left:60%;
    padding:8px 11px;
    font-size:8px;
  }
  body.rm-page-home .hero .hero-phone-interaction-cue span{font-size:10px}
  body.rm-page-home .hero .hero-phone-preview::before{
    top:14px;
    width:72px;
    height:7px;
  }
  body.rm-page-home .hero .hero-phone-screen{
    inset:4px;
    border-radius:33px;
    clip-path:inset(0 round 33px);
  }
  body.rm-page-home .hero .hero-phone-screen iframe{
    zoom:1;
    transform:scale(.7538461538);
    transform-origin:top left;
  }
}

@media(max-width:389px){
  body.rm-page-home .hero .hero-theater,
  body.rm-page-home .hero .theater-stage{min-height:620px}
  body.rm-page-home .hero .hero-dashboard-preview{
    width:calc(100% - 18px);
    min-height:598px;
  }
  body.rm-page-home .hero .hero-phone-preview{
    top:30px;
    left:61%;
    width:286px;
    height:560px;
    border-radius:38px;
  }
  body.rm-page-home .hero .hero-phone-interaction-cue{left:61%}
  body.rm-page-home .hero .hero-phone-preview::before{
    top:13px;
    width:68px;
  }
  body.rm-page-home .hero .hero-phone-screen{
    border-radius:31px;
    clip-path:inset(0 round 31px);
  }
  body.rm-page-home .hero .hero-phone-screen iframe{
    zoom:1;
    transform:scale(.7025641026);
  }
}

@media(max-width:350px){
  body.rm-page-home .hero .hero-theater,
  body.rm-page-home .hero .theater-stage{min-height:580px}
  body.rm-page-home .hero .hero-dashboard-preview{
    width:calc(100% - 14px);
    min-height:558px;
  }
  body.rm-page-home .hero .hero-phone-preview{
    top:26px;
    left:61%;
    width:262px;
    height:512px;
    border-radius:35px;
  }
  body.rm-page-home .hero .hero-phone-interaction-cue{
    top:0;
    left:61%;
    gap:5px;
    padding:7px 9px;
    font-size:7px;
  }
  body.rm-page-home .hero .hero-phone-interaction-cue span{font-size:9px}
  body.rm-page-home .hero .hero-phone-preview::before{
    top:12px;
    width:62px;
    height:6px;
  }
  body.rm-page-home .hero .hero-phone-screen{
    border-radius:29px;
    clip-path:inset(0 round 29px);
  }
  body.rm-page-home .hero .hero-phone-screen iframe{
    zoom:1;
    transform:scale(.6410256410);
  }
}

/* Restrained product-proof parallax only. Copy, form, and CTA never move. */
@media(min-width:921px){
  body.rm-page-home .hero{
    --hero-dashboard-parallax-y:0px;
    --hero-phone-parallax-y:0px;
  }
  body.rm-page-home .hero .hero-dashboard-preview{
    transform:translate3d(0,var(--hero-dashboard-parallax-y),0) rotate(.35deg);
    will-change:transform;
  }
  body.rm-page-home .hero .hero-phone-preview{
    transform:translate3d(-50%,var(--hero-phone-parallax-y),0) rotate(-2.4deg);
    will-change:transform;
  }
  body.rm-page-home .hero .hero-phone-interaction-cue{
    transform:translate3d(-50%,var(--hero-phone-parallax-y),0);
    will-change:transform;
  }
}

@media(prefers-reduced-motion:reduce){
  body.rm-page-home .hero .hero-dashboard-preview,
  body.rm-page-home .hero .hero-phone-preview,
  body.rm-page-home .hero .hero-phone-interaction-cue{will-change:auto}
  body.rm-page-home .hero .hero-demo-pulse{
    animation:none;
    -webkit-animation:none;
    opacity:1;
    transform:scale(1);
    -webkit-transform:scale(1);
    box-shadow:0 0 0 4px rgba(245,71,3,.12);
  }
  body.rm-page-home .hero .hero-phone-interaction-cue strong{
    animation:none;
    -webkit-animation:none;
    opacity:1;
    will-change:auto;
  }
}