/* Qme base (Brand Guidelines 2026): Charcoal, Silver, Paper White; Readex Pro; pill buttons; one Silver Cue. */
:root {
  --charcoal:#202124; --silver:#B8BCC2; --paper:#F5F3EE;
  --white:#FFFFFF; --graphite:#5F6368; --mist:#E7E5DF; --fog:#D9DBDF;
  --alert:#B3261E; --confirm:#1E6B45;
  /* legacy names used across pages */
  --ink:var(--charcoal); --card:var(--white); --line:var(--fog); --mute:var(--graphite);
  --ok:var(--confirm); --bad:var(--alert);
  --font:"Readex Pro",-apple-system,"SF Pro Text","SF Arabic","Segoe UI",Roboto,"Noto Sans Arabic",Arial,sans-serif;
  --pill:999px; --field-r:14px;
}
* { box-sizing:border-box; margin:0 }
html { -webkit-text-size-adjust:100% }
body { font-family:var(--font); background:var(--paper); color:var(--charcoal); line-height:1.5 }
button, input, textarea, select { font:inherit; color:inherit }
button { font-weight:500; border:1.5px solid var(--charcoal); border-radius:var(--pill); cursor:pointer;
  background:var(--charcoal); color:var(--paper); padding:12px 24px; min-height:44px }
button:active { transform:scale(.98) }
button.ghost { background:transparent; color:var(--charcoal) }
button.go { background:var(--charcoal); color:var(--paper) }
button:disabled { opacity:.4; cursor:default }
input, textarea, select { border:1.5px solid var(--fog); background:var(--white); padding:14px 16px; border-radius:var(--field-r); width:100% }
input:focus, textarea:focus { border-color:var(--charcoal); outline:none }
:focus-visible { outline:2px solid var(--charcoal); outline-offset:2px }
.on-dark :focus-visible { outline-color:var(--paper) }
.mute { color:var(--graphite) }
.hidden { display:none!important }
.ltr { direction:ltr; unicode-bidi:isolate }
.label { font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--graphite) }
.logo { max-height:26px; max-width:140px; object-fit:contain; display:block }
.q { width:26px; height:auto; display:block }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important } }

/* auth + account forms */
.auth { min-height:100svh; display:flex; align-items:center; justify-content:center; padding:24px 16px }
.auth form { width:min(400px,100%); display:flex; flex-direction:column; gap:16px }
.auth h1 { font-size:32px; font-weight:600; line-height:1.2 }
.fld { display:flex; flex-direction:column; gap:6px; font-weight:500 }
.err { color:var(--alert); min-height:1.4em; font-size:14px }
.ok-msg { color:var(--confirm); font-weight:500 }
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px }
.plans label { position:relative; border:1.5px solid var(--fog); background:var(--white); border-radius:16px; padding:12px 14px; cursor:pointer; display:flex; flex-direction:column; gap:2px }
.plans label:has(input:checked) { border-color:var(--charcoal); box-shadow:inset 0 0 0 1px var(--charcoal) }
.plans input { position:absolute; opacity:0; width:1px; height:1px; inset:0 }
.plans b { font-size:20px; font-weight:600 } .plans span { font-size:13px; color:var(--graphite) }
a { color:inherit }

/* the Silver Cue (guide 2.1, 2.3): a Silver dot; rings 0.9r apart; NEAR = one static ring, YOUR TURN = two rings.
   Pulse: rings grow from 1× to 3× the dot and fade, 1200 ms each, second ring +300 ms; sets of three, 2 s rest. */
.cue { position:relative; width:14px; height:14px; border-radius:50%; background:var(--silver); display:inline-block; flex:none }
.cue.one::before, .cue.two::before, .cue.two::after { content:""; position:absolute; border-radius:50%; border:1px solid var(--silver) }
.cue.one::before, .cue.two::before { inset:-6.3px }
.cue.two::after { inset:-12.6px; border-style:dashed }
.cue.pulse::before, .cue.pulse::after { inset:0; border-width:1.75px; animation:cue 5.2s cubic-bezier(0,0,.2,1) infinite }
.cue.pulse::after { animation-delay:.3s; border-style:solid }
@keyframes cue {
  0% { transform:scale(1); opacity:1 } 23% { transform:scale(3); opacity:0 }
  23.01% { transform:scale(1); opacity:1 } 46% { transform:scale(3); opacity:0 }
  46.01% { transform:scale(1); opacity:1 } 69% { transform:scale(3); opacity:0 } 100% { transform:scale(3); opacity:0 } }
@media (prefers-reduced-motion: reduce) {
  .cue.pulse::before { animation:none; inset:-6.3px; opacity:1 } .cue.pulse::after { animation:none; inset:-12.6px; opacity:1; border-style:dashed } }

/* legal pages (privacy, terms) */
.legal { width:min(760px, 100% - 32px); margin:0 auto; padding:40px 0 80px; line-height:1.85 }
.legal header { display:flex; align-items:center; justify-content:space-between; margin-bottom:40px }
.legal h1 { font-size:36px; font-weight:600; line-height:1.2; margin-bottom:8px }
.legal h2 { font-size:21px; font-weight:600; margin:36px 0 10px }
.legal p, .legal li { color:#3c4043 } .legal ul { padding-inline-start:22px; display:grid; gap:6px }
.legal footer { margin-top:56px; padding-top:20px; border-top:1px solid var(--fog); font-size:14px; color:var(--graphite); display:flex; gap:20px; flex-wrap:wrap }