/* /apply on the test site: the same application as meetpave.com/apply, in the test site's screening-room look
   (night, Instrument Sans, light hairlines). Tokens, buttons, focus and grain come from tokens.css. */
html,body{background:var(--night)}
.apply-page{min-height:100svh;display:flex;flex-direction:column}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.link{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(237,236,231,.3)}
.link:hover{text-decoration-color:var(--light)}

/* ---- nav: the wordmark, the step and a hairline that fills */
.ap-nav{position:sticky;top:0;z-index:20;height:var(--nav-h);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;
  background:rgba(11,12,14,.82);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
.stepcount{font-size:14px;font-weight:450;color:var(--light-2);font-variant-numeric:tabular-nums}
.progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.progress i{display:block;height:100%;width:0;background:var(--light);transition:width .6s var(--e-out)}

/* ---- one calm column; every step fits a laptop screen */
.apply{flex:1;padding:clamp(24px,4.5vh,48px) 0 clamp(32px,6vh,64px);font-size:16px;line-height:1.5}
.apply-col{width:100%;max-width:calc(600px + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.step-title{font-size:clamp(34px,1.4rem + 1.4vw,46px);line-height:.98;letter-spacing:-.045em;font-weight:600;font-stretch:84%;margin:0;text-wrap:balance;outline:none}
.step-note{margin:14px 0 0;color:var(--light-2);font-size:16px;line-height:1.5;max-width:54ch}
.step-note .after{display:block;margin-top:8px;color:var(--light);font-weight:500}
.qs{display:grid;gap:22px;margin-top:28px}
.q{border:0;padding:0;margin:0;min-width:0}
.q>label.qlabel{display:block;font-size:16px;font-weight:550;letter-spacing:-.01em;line-height:1.35;color:var(--light)}
.q .opt-tag{margin-left:6px;font-size:14px;font-weight:400;color:var(--light-2)}
.q .help{margin:2px 0 0;font-size:14px;color:var(--light-2)}
.q .control{margin-top:8px}
.q .err{margin-top:8px;font-size:13px;line-height:1.4;font-weight:450;color:var(--error)}
.q .err:empty,.status:empty{display:none}
.q .hint{margin-top:8px;font-size:13px;line-height:1.45;color:var(--light-2)}

/* ---- fields: one height, one hairline, a soft ring while in use (same as the waitlist dialog) */
.input{display:block;width:100%;height:46px;padding:0 14px;border-radius:12px;border:1px solid rgba(237,236,231,.16);
  background:rgba(237,236,231,.04);color:var(--light);font-size:16px;letter-spacing:-.005em;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
textarea.input{height:auto;min-height:72px;padding:11px 14px;line-height:1.45;resize:vertical;font:inherit}
.input::placeholder{color:rgba(237,236,231,.4)}
.input:hover{border-color:rgba(237,236,231,.28)}
.input:focus{outline:none;border-color:rgba(237,236,231,.6);box-shadow:0 0 0 3px rgba(237,236,231,.08)}
.q.bad .input,.q.bad .dd-btn{border-color:var(--error)}
.other-input{margin-top:8px}

/* ---- dropdowns (one or several answers): the field's box, the list opens over the page */
.dd{position:relative}
.dd-btn{display:flex;align-items:center;width:100%;height:46px;padding:0 40px 0 14px;border:1px solid rgba(237,236,231,.16);border-radius:12px;
  background:rgba(237,236,231,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5a4a0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center/16px;
  color:var(--light);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.dd-btn:hover{border-color:rgba(237,236,231,.28)}
.dd-btn:focus-visible,.dd.open .dd-btn{outline:none;border-color:rgba(237,236,231,.6);box-shadow:0 0 0 3px rgba(237,236,231,.08)}
.dd-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-val.ph{color:rgba(237,236,231,.4)}
.dd-menu{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);max-height:min(320px,60vh);overflow:auto;padding:6px;border-radius:12px;
  background:var(--night-2);box-shadow:0 0 0 1px var(--line),0 24px 48px -16px rgba(0,0,0,.7);overscroll-behavior:contain}
.dd.up .dd-menu{top:auto;bottom:calc(100% + 6px)}
.dd-opt{display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 10px;border-radius:8px;font-size:15px;line-height:1.3;cursor:pointer;outline:none;color:var(--light)}
.dd-opt:hover,.dd-opt:focus{background:rgba(237,236,231,.07)}
.dd-opt .tick{flex:none;display:grid;place-items:center;width:16px;height:16px;color:var(--light)}
.dd-opt .tick svg{width:14px;height:14px;opacity:0}
.dd-opt[aria-selected="true"] .tick svg{opacity:1}
.dd.multi .dd-opt .tick{border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(237,236,231,.32);color:#111}
.dd.multi .dd-opt .tick svg{width:11px;height:11px}
.dd.multi .dd-opt[aria-selected="true"] .tick{background:var(--light);box-shadow:none}

/* ---- platforms: two columns of checkboxes; a checked one opens its username field */
.plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.plat{display:flex;align-items:center;gap:8px;height:42px;padding:0 6px 0 0;border-radius:12px;background:rgba(237,236,231,.03);
  box-shadow:inset 0 0 0 1px rgba(237,236,231,.14);transition:background .15s,box-shadow .15s}
.plat:hover{box-shadow:inset 0 0 0 1px rgba(237,236,231,.28)}
.plat.on{background:rgba(237,236,231,.07)}
.plat label{flex:1;display:flex;align-items:center;gap:10px;height:100%;padding-left:13px;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.plat.on label{flex:none}
.plat input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none}
.plat .mark{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(237,236,231,.32);color:#111;transition:background .15s}
.plat .mark svg{width:11px;height:11px;opacity:0}
.plat.on .mark{background:var(--light);box-shadow:none}
.plat.on .mark svg{opacity:1}
.plat label:has(input:focus-visible) .mark{outline:2px solid rgba(237,236,231,.55);outline-offset:2px}
.plat .handle{flex:1;width:0;min-width:0;height:30px;padding:0 10px;border:0;border-radius:8px;background:rgba(237,236,231,.05);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--light);font:inherit;font-size:15px}
.plat .handle::placeholder{color:rgba(237,236,231,.4)}
.plat .handle:focus{outline:none;box-shadow:inset 0 0 0 1px rgba(237,236,231,.5)}
.plat .handle.bad{box-shadow:inset 0 0 0 1px var(--error)}

/* ---- the step's buttons */
.apply-actions{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.apply-actions .spacer{flex:1}
.apply-actions .btn{height:46px;padding:0 22px;font-size:15px}
.back{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:10px 6px;font-size:15px;font-weight:500;color:var(--light-2);cursor:pointer;transition:color .2s}
.back:hover{color:var(--light)}
.status{margin-top:10px;text-align:right;font-size:14px;color:var(--error)}
.step-host{animation:step-in .5s var(--e-out)}
@keyframes step-in{from{opacity:0;transform:translateX(var(--from-x,18px))}}

/* ---- sent */
.end{text-align:left}
.done-mark{width:44px;height:44px;margin-bottom:22px;border-radius:50%;display:grid;place-items:center;background:var(--light);color:#111}
.done-mark svg{width:20px;height:20px}
.done-mark path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .6s .1s var(--e-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.end .step-title{margin-top:4px}
.end .ctas{margin-top:28px}

@media (max-width:640px){
  .plats{grid-template-columns:1fr}
  .apply-actions{position:sticky;bottom:0;z-index:5;margin:32px calc(-1 * var(--gutter)) 0;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background:rgba(11,12,14,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .apply-actions .btn{flex:1;height:52px}
  .apply-actions .spacer{display:none}
}
@media (prefers-reduced-motion:reduce){
  .step-host{animation:none}
  .done-mark path{animation:none;stroke-dashoffset:0}
  .progress i{transition:none}
}