/* Step 2 on /start: two tall choices. Hidden until that step. */
#zs-pick{display:none}
html.zs-on-pick #zs-pick{display:flex}
html.zs-on-pick #zs-form{display:none}
.zs-pick{flex-direction:column;gap:.75rem;width:100%}
.zs-pick__h{
  margin:0;
  text-align:center;
  font-size:clamp(1.85rem,4.2vw,2.8rem);
  line-height:1.06;
  font-weight:600;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.zs-pick__h:focus{outline:none}
.zs-pick__grid{
  display:grid;
  grid-template-columns:48% 48%;
  justify-content:space-between;
  align-items:start;
  width:100%;
}
.zs-pick__card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  min-width:0;
  padding:1rem 1.05rem 1rem;
  border-radius:1.15rem;
  border:1px solid rgba(142,162,255,.22);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(53,56,245,.16), transparent 55%),
    color-mix(in oklab, var(--card,#12162c) 92%, transparent);
  box-shadow:0 1.2rem 2.6rem -1.4rem rgba(0,0,0,.55);
  box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.zs-pick__card--re{
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(139,92,246,.16), transparent 52%),
    color-mix(in oklab, var(--card,#12162c) 92%, transparent);
}
.zs-pick__card:hover,
.zs-pick__card:focus-within{
  border-color:rgba(142,162,255,.7);
  box-shadow:0 0 0 1px rgba(53,56,245,.35), 0 1.4rem 3rem -1.1rem rgba(53,56,245,.55);
}
.zs-pick__card--re:hover,
.zs-pick__card--re:focus-within{
  border-color:rgba(196,181,253,.75);
  box-shadow:0 0 0 1px rgba(167,139,250,.4), 0 1.4rem 3rem -1.1rem rgba(139,92,246,.5);
}
.zs-ico-wrap{
  width:6.4rem;
  height:6.4rem;
  margin:.15rem auto .1rem;
  display:grid;
  place-items:center;
  border-radius:1.35rem;
  color:#dbe1ff;
  background:radial-gradient(circle at 32% 22%, rgba(142,162,255,.45), rgba(53,56,245,.16) 58%, transparent 72%);
  box-shadow:inset 0 0 0 1px rgba(142,162,255,.4);
}
.zs-pick__card--re .zs-ico-wrap{
  color:#efeaff;
  background:radial-gradient(circle at 32% 22%, rgba(216,180,254,.42), rgba(109,40,217,.16) 58%, transparent 72%);
  box-shadow:inset 0 0 0 1px rgba(196,181,253,.45);
}
.zs-ico{width:3.6rem;height:3.6rem;display:block}
.zs-pick__title{
  margin:0;
  font-size:clamp(1.45rem,2.2vw,1.9rem);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.zs-pick__lead{
  margin:0;
  font-size:1.02rem;
  line-height:1.45;
  color:var(--foreground,#eef0fb);
}
.zs-pick__examples,.zs-pick__any{
  margin:0;
  font-size:1.02rem;
  line-height:1.4;
  font-weight:600;
}
.zs-pick__foot{display:flex;flex-direction:column;gap:.35rem}
.zs-pick__go{
  width:100%;
  min-height:3.15rem;
  border:0;
  border-radius:999px;
  background:#3538F5;
  color:#fff;
  font:700 1.05rem/1 inherit;
  cursor:pointer;
  box-shadow:0 .75rem 1.6rem -.7rem rgba(53,56,245,.85);
}
.zs-pick__card--re .zs-pick__go{background:#5b3df5}
.zs-pick__go:hover{filter:brightness(1.08)}
.zs-pick__go:focus-visible,.zs-pick__what:focus-visible,.zs-pick__close:focus-visible{
  outline:2px solid #c5ceff;
  outline-offset:3px;
}
.zs-pick__what,.zs-pick__close{
  align-self:flex-start;
  min-height:2.4rem;
  padding:0;
  border:0;
  background:none;
  color:#c7d0ff;
  font:600 .95rem/1.3 inherit;
  text-decoration:underline;
  text-underline-offset:.18em;
  cursor:pointer;
}
.zs-pick__more{
  position:absolute;
  left:.85rem;
  right:.85rem;
  bottom:5.2rem;
  z-index:3;
  max-height:min(52vh,22rem);
  overflow:auto;
  padding:1rem 1rem .85rem;
  border-radius:1rem;
  background:#10152c;
  border:1px solid rgba(142,162,255,.4);
  box-shadow:0 1.2rem 2.6rem -1rem rgba(0,0,0,.75);
}
.zs-pick__more[hidden]{display:none}
.zs-pick__more p{margin:0 0 .7rem;font-size:.98rem;line-height:1.5}
.zs-pick__more p:last-of-type{margin-bottom:.4rem}
@media (max-width:899px){
  .zs-pick__grid{grid-template-columns:1fr;gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .zs-pick__card,.zs-pick__go{transition:none}
}
