/* "Try ReadyRef" demo frame (try-demo.js). The devices are drawn here; their screens are the real app. */
.td{display:grid;gap:16px;max-width:1000px;margin:0 auto}
/* Poster: the same two devices as stills, under a Try it button. Nothing loads from /demo/ until the tap. */
.td-poster{position:relative}
.td-poster .td-stage{opacity:.7;filter:saturate(.9)}
.td-still img{display:block;width:100%;height:auto}
.td-cover{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;background:radial-gradient(closest-side,rgba(255,255,255,.92),rgba(255,255,255,.55) 60%,transparent)}
.td-play{font-size:18px;padding:16px 26px;box-shadow:0 10px 24px rgba(47,95,224,.35)}
.td-cover span{font-size:13.5px;font-weight:700;color:var(--v3-body,#475569)}
.td-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.td-seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--v3-line,#e3e7ee);gap:4px}
.td-seg button{border:0;border-radius:999px;padding:8px 16px;background:transparent;font:inherit;font-size:14px;font-weight:800;color:var(--v3-body,#475569);cursor:pointer}
.td-seg button.is-on{background:#fff;color:var(--v3-ink,#0b1020);box-shadow:0 1px 3px rgba(11,16,32,.18)}
.td-reset{border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--v3-blue,#2f5fe0);cursor:pointer;padding:8px}
.td-stage{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:center}
.td-col{margin:0;display:grid;gap:10px;justify-items:center}
.td-col figcaption{font-size:14px;color:var(--v3-body,#475569);text-align:center;max-width:360px}
.td-col figcaption b{display:block;color:var(--v3-ink,#0b1020);font-size:15px}
.td-device{width:100%}
.td-bezel{background:#0b1020;box-shadow:0 18px 40px rgba(11,16,32,.28),inset 0 0 0 2px #2a3352}
.td-phone .td-bezel{padding:10px;border-radius:42px}
.td-phone .td-fit{border-radius:32px}
.td-land .td-bezel{padding:10px 14px;border-radius:30px}
.td-land .td-fit{border-radius:18px}
.td-fit{position:relative;width:100%;overflow:hidden;background:#000}
.td-fit iframe{position:absolute;left:0;top:0;border:0;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);transform:scale(var(--s,1));transform-origin:0 0}
@media (max-width:760px){
  .td-stage{grid-template-columns:1fr;gap:16px}
  /* The mirror sits above the phone, so it stays in view while the visitor swipes. */
  .td-col-board{order:-1;position:sticky;top:64px;z-index:2;background:var(--v3-bg,#fff);padding:6px 0}
  .td-col-phone .td-device{width:min(100%,300px)}
  .td-land .td-bezel{padding:6px 8px;border-radius:18px}
  .td-land .td-fit{border-radius:10px}
  .td-col-board figcaption{display:none}
  .td-poster .td-col-board{position:static}
  .td-poster .td-col-phone .td-device{width:min(100%,210px)}
  .td-steps{gap:6px}
  .v3 .td-steps li{font-size:12.5px;padding:5px 10px 5px 5px;gap:6px}
  .td-steps i{width:19px;height:19px;font-size:11px}
}

/* "Try this" checklist and the closing call to action */
.td-steps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0;padding:0;list-style:none}
.v3 .td-steps li{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px 7px 8px;border:2px solid var(--v3-line,#e3e7ee);border-radius:999px;background:#fff;font-size:14px;font-weight:700;color:var(--v3-ink,#0b1020);transition:border-color .25s,background .25s}
.td-steps i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--v3-line,#e3e7ee);font-style:normal;font-size:12px;font-weight:800;color:var(--v3-body,#475569)}
.v3 .td-steps li.is-done{border-color:var(--v3-green,#22c55e);background:#f0fdf4}
.td-steps li.is-done i{background:var(--v3-green,#22c55e);color:#fff;animation:td-pop .35s ease-out}
.td-done{display:grid;gap:10px;justify-items:center;text-align:center;padding:18px;border-radius:var(--v3-r,16px);border:2px solid var(--v3-green,#22c55e);background:#f0fdf4;animation:td-in .35s ease-out}
.td-done[hidden]{display:none}
.td-done b{font-size:19px;color:var(--v3-ink,#0b1020)}
.td-done span{font-size:15px;color:var(--v3-body,#475569);max-width:480px}
.td-done .cta-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
@keyframes td-pop{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:none}}
@keyframes td-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.td-steps li.is-done i,.td-done{animation:none}}

/* "One call. Every screen.": the spectator phone that follows the demo ([data-td-follow]). */
.ev{display:grid;grid-template-columns:310px minmax(0,1fr);gap:40px;align-items:center;max-width:900px;margin:0 auto}
.ev-fan{margin:0;display:grid;gap:10px;justify-items:center}
.ev-fan [data-td-follow]{position:relative;width:100%}
.ev-fan .td-still img{display:block;width:100%;height:auto}
.ev-fan [data-td-follow]:not(.is-live) .td-device{opacity:.75;filter:saturate(.9)}
.ev-fan figcaption{font-size:14px;color:var(--v3-body,#475569);text-align:center}
.ev-fan figcaption b{display:block;color:var(--v3-ink,#0b1020);font-size:15px}
.ev-cover{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:0 24px;background:radial-gradient(closest-side,rgba(255,255,255,.94),rgba(255,255,255,.6) 65%,transparent)}
.ev-cover .btn{box-shadow:0 10px 24px rgba(47,95,224,.35)}
.ev-cover span{font-size:13px;font-weight:700;color:var(--v3-body,#475569);max-width:200px}
.ev-copy{display:grid;gap:12px}
.ev-tip{margin:4px 0 0}
@media (max-width:760px){.ev{grid-template-columns:1fr;gap:24px}.ev-fan{max-width:290px;margin:0 auto}}

/* "The fence becomes the front row": the fan film in the demo phones' bezel. The film is 390x622,
   shorter than the phone screen, so it sits at the top on the app's dark canvas, as the live
   demo screens do. Overrides the white .v3-frame card and the film's own rounded box. */
.v3 .v3-frame.fan-phone{background:none;border:0;padding:0;overflow:visible;width:min(100%,290px);margin-inline:auto}
.fan-phone .fan-screen{aspect-ratio:390/780;background:#0a0a0f}
.v3 .fan-phone .v3-film-media.phone{max-width:none;width:100%;border-radius:0;background:#0a0a0f;border:0;box-shadow:none}
@media (max-width:640px){.v3 .v3-frame.fan-phone{width:min(100%,250px)}}
.v3 .fan-phone .v3-film-media .rr-film-poster img,.v3 .fan-phone .v3-film-media .rr-film-video{background:#0a0a0f;border-radius:0}