/* quantaira/watch: the look all three pages share (Jeff, 2026-10-01: "flat black with a very
   subtle gradient ... a little more refined"). Black, one faint blue light at the top, Geist
   throughout, hairlines instead of heavy edges. The video's thin lit edge is the only colour that
   moves. Phone first; one column at every width. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap");

@property --qta-turn{syntax:"<angle>";inherits:false;initial-value:0deg}

html{background:var(--qta-black)}
body{min-height:100vh;margin:0;color:var(--qta-text);font:16px/1.6 var(--qta-sans);-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 520px at 50% -140px,rgba(61,116,255,.13),rgba(139,92,255,.05) 55%,transparent 80%) no-repeat,var(--qta-black)}

.qp{max-width:680px;margin:0 auto;padding:28px 20px 64px;display:grid;gap:24px}

/* The pill above the headline: what this page is ("3 minute overview") or where they are ("Step 2 of 3"). */
.qp-pill{justify-self:center;display:inline-flex;align-items:center;gap:10px;padding:9px 20px 9px 16px;border-radius:999px;
  border:1px solid rgba(238,242,255,.12);background:rgba(238,242,255,.03);color:var(--qta-muted);
  font:500 17px/1.2 var(--qta-sans);letter-spacing:.005em;margin-bottom:-2px}
.qp-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--qta-teal);box-shadow:0 0 8px rgba(25,227,210,.7)}

.qp h1{margin:0;text-align:center;font:600 clamp(34px,11vw,68px)/1.04 var(--qta-display);letter-spacing:-.04em;text-wrap:balance}
/* The words that matter in a headline, in the brand's teal-blue-violet. Always its own line, so the
   headline reads in two: "Watch this / short overview". */
.qp-grad{display:table;margin:0 auto;padding-bottom:.08em;background:linear-gradient(90deg,var(--qta-teal),var(--qta-blue) 55%,var(--qta-violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.qp-sub{margin:-8px auto 0;text-align:center;color:var(--qta-muted);max-width:36em;text-wrap:pretty}

/* The screen: a 1px edge of slowly turning blue / teal / violet light, and its glow, faint, below. */
.qv{position:relative;aspect-ratio:16/9;width:100%;border-radius:16px;padding:1px;margin-top:8px;
  background:conic-gradient(from var(--qta-turn),rgba(61,116,255,.9),rgba(25,227,210,.75),rgba(139,92,255,.9),rgba(61,116,255,.9));
  animation:qta-turn 14s linear infinite}
.qv::after{content:"";position:absolute;inset:30% 10% -6%;z-index:-1;border-radius:50%;filter:blur(48px);opacity:.28;
  background:conic-gradient(from var(--qta-turn),var(--qta-blue),var(--qta-teal),var(--qta-violet),var(--qta-blue));
  animation:qta-turn 14s linear infinite}
.qv > *{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);border:0;border-radius:15px;background:#05070c;overflow:hidden}
.qv-soon{display:grid;place-items:center;color:var(--qta-muted);font:500 14px/1.4 var(--qta-sans);padding:16px;text-align:center}
@keyframes qta-turn{to{--qta-turn:360deg}}
@media (prefers-reduced-motion:reduce){.qv,.qv::after{animation:none}}

.qp-acts{display:grid;gap:10px;margin-top:8px}
.qp-acts.col{gap:16px}
.qp-btn{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:54px;padding:12px 24px;border-radius:999px;
  text-decoration:none;font:600 16px/1.2 var(--qta-sans);letter-spacing:-.005em;
  transition:background-color .15s,border-color .15s,box-shadow .15s}
.qp-btn{background:var(--qta-teal);color:#00110f;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px -14px rgba(25,227,210,.8)}
.qp-btn:hover{background:#3febdc}
.qp-btn.alt{background:rgba(238,242,255,.02);color:var(--qta-text);border:1px solid rgba(238,242,255,.14);box-shadow:none}
.qp-btn.alt:hover{border-color:rgba(238,242,255,.3);background:rgba(238,242,255,.05)}
/* Black pill, white words, a 1.5px teal-blue-violet edge: the second choice, still in the brand. */
.qp-btn.grad{color:var(--qta-text);border:1.5px solid transparent;box-shadow:0 8px 24px -16px rgba(139,92,255,.8);
  background:linear-gradient(var(--qta-black),var(--qta-black)) padding-box,
    linear-gradient(90deg,var(--qta-teal),var(--qta-blue) 55%,var(--qta-violet)) border-box}
.qp-btn.grad:hover{background:linear-gradient(#070a14,#070a14) padding-box,
    linear-gradient(90deg,var(--qta-teal),var(--qta-blue) 55%,var(--qta-violet)) border-box}
.qp-btn:focus-visible,.qp-msg a:focus-visible{outline:2px solid var(--qta-teal);outline-offset:3px}

/* "Questions? Ask me about this": pinned to the bottom of the screen, over a fade to black so it
   never sits on top of a button; the page leaves room for it. Opens the rep's Messenger. */
.qp:has(.qp-ask){padding-bottom:120px}
.qp-ask{position:fixed;left:0;right:0;bottom:0;z-index:5;margin:0;text-align:center;
  padding:28px 16px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--qta-black) 55%,rgba(0,0,0,0))}
.qp-ask a{color:var(--qta-text);opacity:.5;transition:opacity .15s;font:500 16px/1.4 var(--qta-sans);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:rgba(238,242,255,.5)}
.qp-ask a:hover{opacity:1;text-decoration-color:var(--qta-teal)}
.qp-ask a:focus-visible{outline:2px solid var(--qta-teal);outline-offset:3px;border-radius:4px}
.qp-msg{margin:4px 0 0;text-align:center;font-size:14px;color:var(--qta-muted)}
.qp-msg a{color:var(--qta-text);text-underline-offset:3px;text-decoration-color:rgba(238,242,255,.35)}

@media (min-width:720px){
  .qp{padding-top:48px;gap:28px}
  .qp-acts{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  /* "under": these buttons stay one above the other at every width */
  .qp-acts.col{grid-template-columns:minmax(0,1fr)}
}

/* Other languages (0126). Tight negative tracking is for Latin letters: it breaks joined Arabic
   letters apart and crowds Japanese and Chinese, so those set at their natural spacing. */
:lang(ar) .qp h1,:lang(he) .qp h1,:lang(ja) .qp h1,:lang(zh) .qp h1,:lang(ko) .qp h1{letter-spacing:0;line-height:1.2}
:lang(ar) .qp-btn,:lang(ja) .qp-btn,:lang(zh) .qp-btn,:lang(ko) .qp-btn{letter-spacing:0}