/* Design Completion A — entry, sign-in and the existing five-question journey.
   Uses TAWASH semantic tokens; visual-only, no survey or auth workflow changes. */
:where(.gate,.qual,.fun,.onb) { overflow-x:clip; }
.gate .hero { padding-inline:clamp(20px,5vw,64px); }
.gate .hero-body { margin-block:clamp(28px,7vh,84px); }
.gate .hero h1 { font:700 clamp(32px,7vw,54px)/1.22 var(--display); text-wrap:balance; }
.gate .hero p { max-width:36ch; line-height:1.75; }
.gate .door { padding-inline:clamp(16px,4vw,52px); }
.gate .door-in { width:100%; max-width:430px; min-width:0; }
.gate .door h2 { font:700 clamp(21px,5vw,27px)/1.4 var(--display); margin-block:var(--tw-space-5) var(--tw-space-2); }
.gate .tabs { border:1px solid var(--tw-border); border-radius:var(--tw-radius-md); padding:4px; }
.gate .tabs button { border-radius:var(--tw-radius-sm); min-height:var(--tw-touch); }
.gate .fld { margin-block:var(--tw-space-4); }
.gate .fld :is(input,select) { font-size:16px; border-radius:var(--tw-radius-sm); min-height:50px; }
.gate button.main { border-radius:var(--tw-radius-md); }
.gate .terms { align-items:flex-start; gap:var(--tw-space-3); min-height:var(--tw-touch); cursor:pointer; }
.gate .terms input { flex:none; width:22px; min-width:22px; height:22px; }
.gate :is(.err,.gate-saved) { border-radius:var(--tw-radius-sm); overflow-wrap:anywhere; }
.gate .err:not(:empty) { border-inline-start:3px solid var(--tw-danger); padding:var(--tw-space-3); background:color-mix(in srgb,var(--tw-danger) 8%,var(--tw-surface)); }
.qual .q-body { padding-inline:clamp(16px,4vw,30px); width:100%; min-width:0; }
.qual .q-title { font:700 clamp(25px,5.8vw,36px)/1.4 var(--display); text-wrap:pretty; }
.qual .q-opts { gap:var(--tw-space-3); }
.qual .q-opt { min-height:60px; border-radius:var(--tw-radius-md); line-height:1.55; }
.qual .q-opt[aria-checked=true] { border-color:var(--listen); box-shadow:inset 0 0 0 1px var(--listen); }
.qual .q-opt:focus-visible { outline:3px solid var(--listen); outline-offset:3px; }
.qual .q-text { font-size:16px; border-radius:var(--tw-radius-md); }
.qual .q-row { flex-wrap:wrap; }
.qual .q-row .main { min-width:120px; }
.qual .q-count { letter-spacing:0; }
.qual .err:not(:empty) { padding:var(--tw-space-3); border-radius:var(--tw-radius-sm); color:#FFB4A6; }
.fun .fun-body { padding-inline:clamp(16px,4vw,28px); }
.fun .fopt { min-height:60px; border-radius:var(--tw-radius-md); }
.fun .fin { min-height:50px; border-radius:var(--tw-radius-sm); font-size:16px; }
.fun .fopt:focus-visible,.fun .fun-top button:focus-visible { outline:3px solid #B3E9E4; outline-offset:3px; }
.fun .fopts,.onb .opts { gap:var(--tw-space-3); }
.onb .step h1 { text-wrap:pretty; }
.onb .onb-wrap { gap:var(--tw-space-6); }
.onb .opt { min-height:58px; border-radius:var(--tw-radius-md); }
.onb :is(.nm,.inp,textarea) { font-size:16px; }
.onb .onb-nav { padding-bottom:calc(var(--tw-space-3) + env(safe-area-inset-bottom)); }
@media(min-width:900px) {
  .gate .door { min-width:0; }
  .gate .hero-body { margin-block:auto; }
}
@media(max-width:360px) {
  .gate .door { padding-inline:var(--tw-space-4); }
  .gate .hero { padding-inline:var(--tw-space-4); }
  .gate .terms { font-size:13px; }
  .qual .q-row { gap:var(--tw-space-2); }
}