/* Section 4 -- the demo section itself: the heading, the phone frame and its screen.

   Loaded with the page (the section's place and its entrance are laid out before the app exists); the app
   inside the screen -- demo.css, event.css, calendar.css and the scripts -- loads as the section approaches
   (section.js). Until it is there the screen is the phone's own dark glass. */
/* ------------------------------------------------------------- section */
.rdemo{
  all:initial;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;
  min-height:100vh;min-height:100svh;
  padding:clamp(48px,8vh,80px) clamp(14px,3vw,44px) clamp(24px,4vh,44px);
  box-sizing:border-box;
  font-family:Poppins,system-ui,sans-serif;
  color:#2a1215;
  -webkit-font-smoothing:antialiased;
  /* `all` resets it: without it Chrome / Opera on Android inflate ("font boosting") the app's texts
     page by page, by how much text each block holds -- the top bar and the pills changed size */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
.rdemo *,.rdemo *::before,.rdemo *::after{box-sizing:border-box}
.rdemo-head{flex:none;text-align:center;width:100%}
.rdemo-pill{
  display:inline-block;
  font-family:Poppins,system-ui,sans-serif;
  font-size:12px;font-weight:500;line-height:1;
  letter-spacing:2px;text-transform:uppercase;
  color:#B08A2E;
  border:1px solid #E6D3A8;border-radius:999px;
  padding:8px 16px 7px 18px;
}
.rdemo-title{
  display:block;
  font-family:Poppins,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(28px,calc(16px + 2.8vw),56px);
  line-height:1.15;letter-spacing:-.01em;
  color:#2a1215;
  margin:clamp(12px,1.8vh,18px) 0 0;
}
.rdemo-title .rdemo-w{white-space:nowrap}
/* phones: one line, never "yourself" alone below (it is 12.23 em wide: a little smaller below 380 px) */
@media (max-width:699px){ .rdemo-title{font-size:min(clamp(28px,calc(16px + 2.8vw),56px),calc((100vw - 28px) / 12.6));text-wrap:balance} }
.rdemo-title .rdemo-ink{color:#2a1215}
.rdemo-title .rdemo-gold{color:#B08A2E}
.rdemo-title .rdemo-red{color:#8B0000}
.rdemo-title .rdemo-ch{opacity:0;filter:blur(2.5px);transition:opacity .3s ease,filter .3s ease}
.rdemo-title .rdemo-ch.on{opacity:1;filter:none}
.rdemo-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------- phone frame */
/* The ring phones' frame (thin dark bezel, rim, side keys, punch-hole), with
   the screen at the app's real aspect ratio, 384:832. --rdw = outer width. */
.rdemo-stage{flex:none;margin-top:clamp(18px,3.5vh,40px);display:flex;justify-content:center}
.rdemo-phone{
  position:relative;
  width:var(--rdw,360px);
  will-change:transform,opacity;
}
.rdemo-body{
  position:relative;
  width:100%;
  background:#101013;
  border-radius:calc(var(--rdw,360px) * .118);
  padding:calc(var(--rdw,360px) * .028);
  box-shadow:
    0 0 0 calc(var(--rdw,360px) * .0035) #3a3a41,
    0 calc(var(--rdw,360px) * .055) calc(var(--rdw,360px) * .13) rgba(24,16,18,.20),
    0 calc(var(--rdw,360px) * .012) calc(var(--rdw,360px) * .03) rgba(24,16,18,.12);
}
.rdemo-body::before,.rdemo-body::after{
  content:"";position:absolute;left:100%;
  width:calc(var(--rdw,360px) * .0115);
  background:linear-gradient(180deg,#2a2a30,#17171b);
  border-radius:0 2px 2px 0;
}
.rdemo-body::before{top:19%;height:5.6%}
.rdemo-body::after{top:27.5%;height:10%}
.rdemo-screen{
  position:relative;
  width:100%;
  aspect-ratio:384 / 832;
  border-radius:calc(var(--rdw,360px) * .092);
  overflow:hidden;
  background:#000;
  outline:none;
  isolation:isolate;
}
.rdemo-screen:focus-visible{box-shadow:0 0 0 3px rgba(168,134,46,.55)}
.rdemo.is-review .rdemo-screen{border-radius:0}
.rdemo.is-review .rdemo-body{padding:10px}
.rdemo.is-review .rdemo-stage{justify-content:flex-start;width:100%}

@media (prefers-reduced-motion:reduce){
  .rdemo-title .rdemo-ch{transition:none}
}