/* quantaira/watch/watch-free — the free /watch at quantaira.life (see block.html). The reps' reel (watch-reel) as it is, plus
 * the top bar (Joe's line, the language), Sign up under the webinar, and the popup. No dock, no closing screen. */
@import url("../../../_shared/reel/v1/reel.css");
@import "../page.css";
@import "../watch-reel/block.css";

.qf{ --dock-room:calc(56px + env(safe-area-inset-bottom,0px)); }

/* the top bar, pinned over every screen: the language, centred (Joe's line, .qf-own, waits for launch: see block.html) */
.qf .qf-bar{ position:fixed; z-index:20; left:0; right:0; top:0; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 22px 20px; background:linear-gradient(to bottom, rgba(0,0,0,.92) 62%, rgba(0,0,0,0)); }
.qf .qf-own{ margin:0; max-width:none; min-width:0; text-align:left; font:500 14px/1.35 var(--qta-sans); color:var(--qta-muted); }
.qf .qf-own a{ color:var(--qta-text); font-weight:600; text-underline-offset:4px; text-decoration-color:var(--qta-teal); }
@media (max-width:700px){ .qf .qf-own{ font-size:13px; } .qf .qf-own a{ display:block; } }

/* the language picker: a pill, the select laid over it */
.qf .qf-lang{ position:relative; flex:none; display:inline-flex; align-items:center; gap:7px; padding:0 10px 0 12px; height:36px; border-radius:999px;
  border:1px solid rgba(238,242,255,.18); background:rgba(238,242,255,.06); color:var(--qta-text); cursor:pointer; }
.qf .qf-lang:hover{ border-color:var(--qta-teal); }
.qf .qf-lang svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.qf .qf-lang .qf-caret{ width:16px; height:16px; color:var(--qta-muted); pointer-events:none; }
.qf .qf-lang span{ font:500 14px/1 var(--qta-sans); white-space:nowrap; }
.qf .qf-lang-code{ display:none; letter-spacing:.04em; }
/* a phone with Joe's line back: show .qf-lang-code instead of the name, so the line keeps the room */
/* the real select covers the pill, invisible, so a tap opens the phone's own list */
.qf .qf-lang select{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:16px; }
.qf .qf-lang select option{ color:#000; }
.qf .qf-lang:focus-within{ border-color:var(--qta-teal); box-shadow:0 0 0 3px rgba(23,224,207,.25); }

/* Sign up under the webinar: a full button */
.qf .qf-act{ margin:0; width:100%; max-width:420px; }
.qf .qf-act .qp-btn{ width:100%; }


/* a computer: the screen starts below the pinned line */
@media (min-width:701px){ .qf .rl-p .rl-in{ padding-top:80px; } }

/* the popup */
.qf-pop{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.66);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.qf-pop[hidden]{ display:none; }
.qf-card{ width:100%; max-width:380px; display:grid; gap:12px; justify-items:center; text-align:center; padding:32px 24px 24px;
  border-radius:24px; background:#0b0f1a; border:1px solid rgba(238,242,255,.12); box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:qf-in .22s ease-out; }
.qf-icon{ font-size:34px; line-height:1; }
.qf-card h3{ margin:0; font:600 24px/1.15 var(--qta-display); letter-spacing:-.02em; color:var(--qta-text); text-wrap:balance; }
.qf .qf-card p{ max-width:none; margin:0 0 8px; font:400 16px/1.5 var(--qta-sans); color:var(--qta-muted); text-wrap:pretty; }
.qf-card .qp-btn{ width:100%; border:0; cursor:pointer; }
@keyframes qf-in{ from{ opacity:0; transform:translateY(12px) scale(.98); } }
@media (prefers-reduced-motion:reduce){ .qf-card{ animation:none; } }

/* a phone: the screens start below the pinned line */
@media (max-width:700px){ .qf .rl-in{ padding-top:72px; } }
@media (max-width:700px) and (max-height:700px){ .qf .rl-in{ padding-top:60px; } }
:lang(ja) .qf-card h3,:lang(zh) .qf-card h3,:lang(ar) .qf-card h3{ letter-spacing:0; line-height:1.3; }