/* Hero device pair (see hero-roll.js): the desktop editor with the phone app overlapping its lower-right corner, rolling together. */
.heroA .copy .roll-line{margin:20px 0 0;max-width:none;font:var(--t-h2);color:var(--print)}
.heroA .copy .hero-p{margin:16px 0 0;max-width:480px}
.heroA .copy .signup{margin-top:32px}
.hero-pair{flex-direction:column;align-items:stretch;justify-content:center}
.hero-pair .devices{position:relative;width:calc(100% + var(--side));margin-right:calc(-1 * var(--side))}
.hero-pair .devices .frame{width:100%;margin-right:0;position:relative;z-index:1}
.pphone{position:absolute;left:-12px;bottom:-84px;width:24%;border-radius:22px;overflow:hidden;background:var(--dk-ground);box-shadow:0 0 0 5px var(--hw-bezel),0 0 0 6px var(--dk-line),0 28px 60px rgba(0,0,0,.35);z-index:2}
.pphone .live{height:auto;aspect-ratio:390/844}
.pphone .live iframe{pointer-events:auto}
.pdrag{display:none}
@media (min-width:1101px) and (hover:hover) and (pointer:fine){.pdrag{display:block;position:absolute;left:0;top:0;right:0;bottom:0;z-index:3;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.pphone.dragging .pdrag{cursor:grabbing}.pphone.dragging{box-shadow:0 0 0 5px var(--hw-bezel),0 0 0 6px var(--dk-line),0 40px 90px rgba(0,0,0,.5)}.pphone{transition:box-shadow var(--m1) var(--mease)}.pphone.floating{position:fixed;right:auto;bottom:auto;z-index:20}}
.rollline{max-width:calc(70% - 48px);margin:16px 0 0 auto;text-align:right;font:var(--t-meta);color:var(--print-3);font-variant-numeric:tabular-nums}
.rollline b{color:var(--print);font-weight:500}
.hero-pair{padding:48px 0}
@media (max-width:900px){
  .hero-pair{padding-bottom:84px}
}
@media (min-width:601px) and (max-width:1100px){
  .heroA .g12{min-height:0}.heroA .copy{grid-column:1/-1;padding:48px 0 24px}.heroA .copy .hero-t{font-size:44px;line-height:48px}
  .hero-pair{grid-column:1/-1;padding:0 0 84px}.hero-pair .devices{width:100%;margin-right:0}.pphone{width:22%;left:16px}
}
@media (max-width:600px){
  .heroA .g12{display:flex;flex-direction:column;align-items:stretch}
  .heroA .copy{display:contents}
  .heroA .copy-a{order:1}.hero-pair{order:2;padding:0;margin-bottom:8px}.heroA .copy-b{order:3;padding-bottom:40px}
  .heroA .copy .roll-line{font-size:20px;line-height:26px;margin-top:12px}
  .heroA .copy .hero-p{display:none}
  .heroA .copy .signup{margin-top:0}
  .hero-pair .devices{display:block}
  .hero-pair .devices{width:auto;margin:0;display:flex;justify-content:center}
  .hero-pair .devices .frame{display:none}
  .pphone{position:relative;right:auto;bottom:auto;width:min(100%,358px);border-radius:28px;box-shadow:0 0 0 6px var(--hw-bezel),0 0 0 7px var(--dk-line)}
  .pphone .live{aspect-ratio:390/770}
  .rollline{text-align:center;margin:16px auto 0;max-width:none}
  .heroA .copy-a{padding:16px 0 12px}.heroA .copy .hero-t{font-size:34px;line-height:38px}.heroA .copy .roll-line{margin-top:8px}
  .pphone{width:min(75%,270px);margin:0 auto}
}
.heroA .signup .launch{margin:0 0 16px;font:var(--t-h2);color:var(--print)}

/* Loading: the device frames are plain CSS and show at once; the cross-field and LCD LOADING sit inside them, then the content wipes in. */
.live[data-boot]::before,.live[data-boot]::after{content:"";position:absolute;z-index:6;pointer-events:none}
.live[data-boot="1"]::before{left:0;top:0;right:0;height:6.4%;background:#151615;box-shadow:inset 0 -1px 0 #2a2b28}
.live[data-boot="1"]::after{left:54%;top:1.5%;width:13.5%;height:3.4%;background:var(--dk-accent)}
.live[data-boot="ph"]::before{left:34.6%;top:1.6%;width:30.8%;height:4%;border-radius:20px;background:#000}
.live.ready::before,.live.ready::after{display:none}
.bootpanel.ph .lcd-ov{font-size:12px}
@media (max-width:600px){.bootpanel.ph .lcd-ov{font-size:15px}}
/* The editor's LOADING text is centred in the part of the screen the phone does not cover, and scales so it never clips. */
.bootpanel:not(.ph) .lcd-ov{padding-left:26%;box-sizing:border-box;font-size:clamp(11px,1.4vw,20px)}
@media (max-width:1100px){.bootpanel:not(.ph) .lcd-ov{font-size:clamp(11px,1.9vw,20px)}}

/* Phones and tablets: the phone mock is a normal static element that scrolls with the page. Nothing fixed, sticky or offset. */
@media (max-width:1100px),(hover:none),(pointer:coarse){.pphone,.pphone.floating,.pphone.dragging{position:relative;transform:none;animation:none;transition:none;top:auto;left:auto;right:auto;bottom:auto}.pdrag{display:none!important}}
@media (min-width:601px) and (max-width:1100px){.hero-pair{padding-bottom:0}.pphone{width:min(60%,320px);margin:28px auto 0}}