/* ── NUMA waitlist ─────────────────────────────────────────
   Builds on /assets/styles.css (tokens, .btn, .chip, .field, .consent).
   The left panel is "fog to clarity": answers loosen the tangle and draw the
   wave (waitlist.js sets the values; CSS only eases them). */

:root{
  --wl-orange:#F4A02E;       /* the guide's robe: the one place we ask someone to act */
  --wl-orange-700:#DD8C1C;
  --wl-deep:#1F4459;
  --wl-splash:#CFE0F5;
  --wl-sage:#B7CBA3;
}

.wl{
  position:relative; display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  min-height:min(620px, calc(100svh - 9rem));
  background:var(--white); color:var(--ink); text-align:left;
  border:1px solid var(--line); border-radius:28px; overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(31,68,89,.35);
  scroll-margin-top:6rem;
}

/* ── Visual ──────────────────────────────────────────────── */
.wl-visual{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(70% 60% at 70% 30%, rgba(31,68,89,.95), rgba(31,68,89,0) 70%),
    radial-gradient(60% 60% at 10% 100%, rgba(85,117,114,.4), rgba(85,117,114,0) 70%),
    linear-gradient(180deg, #0E2230, #08151D);
}
.wl-visual svg{position:absolute; inset:8% 8%; width:84%; height:84%; overflow:visible}
.wl-noise{transform-box:view-box; transform-origin:457px 490px; transition:translate .8s ease}
.motion .wl-noise{animation:wl-drift 40s linear infinite}
@keyframes wl-drift{to{rotate:360deg}}
.wl-noise path{
  fill:none; stroke:var(--wl-splash); stroke-width:3; opacity:.55;
  transform-box:view-box; transform-origin:457px 490px;
  transition:opacity 1.1s ease, transform 1.4s var(--numa-ease);
}
.wl-noise path:nth-child(3n){stroke:var(--numa-blue); stroke-width:5}
.wl-wave{
  fill:none; stroke:var(--numa-blue); stroke-width:54;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.3s var(--numa-ease), filter 1s ease;
}
.wl-fog{
  position:absolute; inset:-20%; pointer-events:none;
  background:
    radial-gradient(40% 30% at 30% 40%, rgba(160,190,225,.32), transparent 70%),
    radial-gradient(45% 35% at 70% 65%, rgba(140,175,215,.26), transparent 70%),
    radial-gradient(35% 25% at 55% 20%, rgba(207,224,245,.2), transparent 70%);
  filter:blur(28px); opacity:.9;
  transition:opacity 1.2s ease;
}
.motion .wl-fog{animation:wl-fog 14s ease-in-out infinite alternate}
@keyframes wl-fog{to{translate:6% -4%; scale:1.08}}

.wl-splash circle{
  fill:none; stroke:var(--wl-splash); stroke-width:8; opacity:0;
  transform-box:fill-box; transform-origin:center;
}
.wl.is-done .wl-wave{filter:drop-shadow(0 0 22px rgba(207,224,245,.55))}
.motion .wl.is-done .wl-splash circle{animation:wl-splash 2.2s cubic-bezier(.2,.7,.2,1) .5s both}
.motion .wl.is-done .wl-splash circle:nth-child(2){animation-delay:.8s}
.motion .wl.is-done .wl-splash circle:nth-child(3){animation-delay:1.1s}
@keyframes wl-splash{0%{opacity:.9; transform:scale(.3)} 100%{opacity:0; transform:scale(5)}}

/* ── Body ────────────────────────────────────────────────── */
.wl-body{
  position:relative; display:flex; flex-direction:column; gap:1rem;
  padding:clamp(1.4rem, 4vw, 2.75rem);
}
.wl-step{border:none; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:.9rem}
.wl-step[hidden]{display:none}
.motion .wl-step:not([hidden]), .motion .wl-done{animation:wl-in .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes wl-in{from{opacity:0; translate:14px 0}}

.wl-top{display:flex; align-items:center; gap:.9rem}
.wl-top[hidden]{display:none}
.wl-bar{flex:1; height:4px; border-radius:4px; background:var(--blue-50); overflow:hidden}
.wl-bar span{display:block; height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--numa-ease)}
.wl-count{font-size:.78rem; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap}

.wl-eyebrow{font-size:.74rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--blue)}
.wl-title{font-size:clamp(1.8rem, 3.6vw, 2.6rem); font-weight:600; letter-spacing:-.035em; line-height:1.1; outline:none}
.wl-text{color:var(--ink-2); font-size:1rem; max-width:32rem}
.wl-note{font-size:.84rem; color:var(--ink-3)}
.wl-q{font-size:clamp(1.35rem, 2.6vw, 1.75rem); font-weight:600; letter-spacing:-.03em; line-height:1.15; outline:none; margin:0}
.wl-hint{font-size:.9rem; color:var(--ink-2)}
.wl-counter{color:var(--blue); font-weight:500; margin-left:.3rem}

.wl-teasers{list-style:none; padding:0; margin:.2rem 0 .4rem; display:flex; flex-wrap:wrap; gap:.45rem}
.wl-teasers li{
  font-size:.84rem; color:var(--ink-2); padding:.42rem .85rem .42rem 1.7rem; position:relative;
  border:1px solid var(--line); border-radius:100px; background:var(--white);
}
.wl-teasers li::before{
  content:""; position:absolute; left:.75rem; top:50%; width:.45rem; height:.45rem; margin-top:-.225rem;
  border-radius:50%; background:var(--wl-sage);
}

/* Orange: start and finish only. */
.wl .wl-go, .wl .wl-submit{background:var(--wl-orange); border-color:var(--wl-orange); color:var(--ink); font-weight:600}
.wl .wl-go:hover, .wl .wl-submit:hover{background:var(--wl-orange-700); border-color:var(--wl-orange-700)}
.wl-go{align-self:flex-start; margin-top:.4rem}
.wl-go span{transition:translate .25s ease}
.wl-go:hover span{translate:3px 0}

/* ── Options ─────────────────────────────────────────────── */
.wl-opts{display:flex; flex-wrap:wrap; gap:.5rem}
.wl-opts-cards{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.wl-opts-tiles{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}

.wl-card, .wl-tile{position:relative; cursor:pointer; display:block}
.wl-card input, .wl-tile input{position:absolute; opacity:0; width:0; height:0}
.wl-card-in{
  position:relative; display:grid; gap:.15rem; height:100%; align-content:start;
  padding:.9rem 1rem 1rem; border:1px solid var(--line); border-radius:16px; background:var(--white);
  transition:border-color .2s ease, background .2s ease, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.wl-card-n{font-size:.7rem; font-weight:600; color:var(--blue); letter-spacing:.04em}
.wl-card-t{font-weight:600; font-size:1rem; letter-spacing:-.02em}
.wl-card-l{font-size:.82rem; color:var(--ink-3); line-height:1.4}
.wl-card-tick{
  position:absolute; top:.8rem; right:.8rem; width:1.25rem; height:1.25rem; border-radius:50%;
  border:1.5px solid var(--line); transition:background .2s ease, border-color .2s ease, transform .3s cubic-bezier(.3,1.6,.5,1);
}
.wl-card-tick::after{
  content:""; position:absolute; left:.36rem; top:.18rem; width:.3rem; height:.58rem;
  border:solid #fff; border-width:0 2px 2px 0; rotate:45deg; opacity:0; transition:opacity .2s ease;
}
.wl-card:hover .wl-card-in{border-color:var(--blue-400); transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(31,68,89,.35)}
.wl-card input:checked + .wl-card-in{border-color:var(--blue); background:var(--blue-50)}
.wl-card input:checked + .wl-card-in .wl-card-tick{background:var(--blue); border-color:var(--blue); transform:scale(1.1)}
.wl-card input:checked + .wl-card-in .wl-card-tick::after{opacity:1}
.wl-card input:focus-visible + .wl-card-in{outline:2px solid var(--blue); outline-offset:2px}

.wl-tile span{
  display:flex; align-items:center; gap:.6rem; height:100%;
  padding:.85rem 1rem; border:1px solid var(--line); border-radius:14px; font-size:.9rem;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.wl-ico{width:1.4rem; height:1.4rem; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; color:var(--blue)}
.wl-tile:hover span{border-color:var(--blue-400)}
.wl-tile input:checked + span{background:var(--blue); border-color:var(--blue); color:#fff}
.wl-tile input:checked + span .wl-ico{color:#fff}
.wl-tile input:focus-visible + span{outline:2px solid var(--blue); outline-offset:2px}

.wl-step.is-bad .chip span, .wl-step.is-bad .wl-card-in, .wl-step.is-bad .wl-tile span{border-color:#D8503C}

.wl-fields{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}

/* ── Nav ─────────────────────────────────────────────────── */
.wl-nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:auto; padding-top:.6rem}
.wl-nav[hidden]{display:none}
.wl-nav-r{display:flex; align-items:center; gap:.4rem}
.wl-back, .wl-skip, .wl-reset{
  font:500 .9rem/1 var(--font); color:var(--ink-2); background:none; border:none;
  padding:.7rem .6rem; border-radius:100px; cursor:pointer;
}
.wl-back:hover, .wl-skip:hover, .wl-reset:hover{color:var(--blue)}
.wl-skip[hidden]{display:none}
.wl-msg:empty{display:none}

.motion .wl-shake{animation:wl-shake .4s ease}
@keyframes wl-shake{25%{translate:-6px 0} 50%{translate:5px 0} 75%{translate:-3px 0}}

/* ── Done ────────────────────────────────────────────────── */
.wl-done{display:flex; flex-direction:column; gap:.9rem}
.wl-picks{list-style:none; padding:0; margin:0; display:grid; gap:.6rem}
.wl-picks li{
  display:grid; gap:.1rem; padding:1rem 1.1rem; border-radius:16px;
  background:var(--blue-50); border:1px solid rgba(79,124,201,.2);
}
.motion .wl-picks li{animation:wl-in .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(.35s + var(--i, 0) * .15s)}
.wl-picks strong{font-size:1.15rem; letter-spacing:-.02em}
.wl-picks span{font-size:.9rem; color:var(--ink-2)}
.wl-picks em{font-size:.9rem; color:var(--blue-700); font-style:normal; font-weight:500; margin-top:.3rem}
.wl-share{margin-top:.4rem; padding-top:1.1rem; border-top:1px solid var(--line); display:grid; gap:.35rem}
.wl-share-t{font-weight:600; font-size:1.05rem; letter-spacing:-.02em}
.wl-share-row{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem}
.wl-reset{align-self:flex-start; padding-left:0; font-size:.84rem; color:var(--ink-3)}

.wl-fail{padding:2rem; text-align:center; color:var(--ink-2)}

/* ── QR panel (/waitlist) ────────────────────────────────── */
.wl-qr{
  display:flex; align-items:center; gap:1.4rem; margin-top:1rem; text-align:left;
  padding:1.2rem 1.4rem; border-radius:22px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); color:#fff;
}
.wl-qr img{width:132px; height:132px; border-radius:12px; background:#fff; padding:6px; flex:none}
.wl-qr h2, .wl-qr h3{font-size:1.15rem; margin-bottom:.3rem}
.wl-qr p{font-size:.9rem; color:rgba(255,255,255,.72)}
.wl-qr .lnk{margin-top:.6rem; color:var(--wl-splash)}

/* ── Home section ────────────────────────────────────────── */
.sec-waitlist{text-align:left}

/* ── /waitlist page ──────────────────────────────────────── */
.wl-page{padding:8px; min-height:100svh}
.wl-page-in{
  min-height:calc(100svh - 16px); border-radius:20px;
  padding:clamp(5.5rem, 10vh, 7rem) 0 clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(70% 80% at 74% 30%, rgba(31,68,89,.95) 0%, rgba(31,68,89,0) 70%),
    radial-gradient(60% 60% at 10% 100%, rgba(85,117,114,.35) 0%, rgba(85,117,114,0) 70%),
    linear-gradient(180deg, #0E2230 0%, #08151D 100%);
}
.wl-page-in > *{width:var(--shell); margin-inline:auto}
.wl-page .wl{border-color:rgba(255,255,255,.1)}
.wl-page .wl-visual{background:linear-gradient(180deg, rgba(14,34,48,.4), rgba(8,21,29,.9))}

/* ── Small screens ───────────────────────────────────────── */
@media (max-width:820px){
  .wl{grid-template-columns:1fr; min-height:0}
  .wl-visual{height:180px}
  .wl-visual svg{inset:10% 25%; width:50%; height:80%}
}
@media (max-width:520px){
  .wl{border-radius:22px}
  .wl-visual{height:140px}
  .wl-opts-cards{gap:.45rem}
  .wl-card-in{padding:.75rem .8rem .85rem}
  .wl-card-t{font-size:.95rem}
  .wl-card-l{font-size:.76rem}
  .wl-card-tick{top:.65rem; right:.65rem; width:1.1rem; height:1.1rem}
  .wl-card-tick::after{left:.31rem; top:.14rem}
  .wl-fields{grid-template-columns:1fr}
  .wl-go{align-self:stretch; justify-content:center}
  .wl-qr{flex-direction:column; align-items:flex-start}
}