/* REVL ARTIFACT SHELL: Toronto coming soon, the sign-up form.
   Lifted from the locked studio page (studio-page/round-2/page/style.css): the claim section, the
   fields, and the tick box it carried before 6 Oct (Canada needs the tick, Macca 8 Oct). Tokens only. */

:root{ --form:880px; }

.claim{padding:calc(var(--sec) * .4) var(--g) 0;scroll-margin-top:24px}
.form{max-width:var(--form);margin:120px auto 0;scroll-margin-top:40px}
.form-title{font-size:var(--t-h2);line-height:.98;color:var(--white);text-align:center;margin:0;outline:none}

.stage{margin-top:44px}
.stage.enter{animation:stepIn .35s ease both}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.field{display:flex;flex-direction:column;gap:9px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-family:var(--fmono);font-weight:400;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dim)}
.box .pre{padding-left:18px;color:var(--dim);font-size:18px}
.box .pre + input{padding-left:10px}
.err{font-size:15px;color:var(--white)}
.field.has-err .box{border-color:var(--white)}
.field.has-err label{color:var(--white)}

/* the tick: an empty box the person ticks themselves */
.consent{display:flex;align-items:flex-start;gap:14px;margin-top:32px;cursor:pointer;position:relative}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.tick{flex:none;width:22px;height:22px;border-radius:4px;border:1px solid var(--line);display:grid;place-items:center;margin-top:1px;transition:background-color .15s ease,border-color .15s ease}
.tick svg{width:13px;height:13px;opacity:0;color:var(--midblack)}
.consent input:checked + .tick{background:var(--white);border-color:var(--white)}
.consent input:checked + .tick svg{opacity:1}
.consent input:focus-visible + .tick{outline:2px solid var(--white);outline-offset:3px}
.consent.has-err .tick{border-color:var(--white)}
.consent-words{display:grid;gap:6px}
.consent-label{font-size:17px;line-height:1.4;color:var(--white)}
.consent-text{font-size:14px;line-height:1.45;color:var(--dim);max-width:640px}
.consent-err{margin:10px 0 0 36px}

.actions{margin-top:36px;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.actions .btn{height:58px;font-size:16px}

.done-card{text-align:center}
.done-line{margin:20px auto 0;max-width:560px;font-size:var(--t-lede);line-height:1.5;color:var(--grey)}

/* the header: the wordmark and one button, no menu (the .ca site's menu is not this page's) */
@media (max-width:1024px){ .site-hdr .join{margin-right:0} }

@media (min-width:900px) and (max-height:820px){ .form{margin-top:96px} }
@media (max-width:720px){
  .form{margin-top:72px}
  .form-title{text-align:left}
  .fields{gap:18px 12px}
  .field:not(.half){grid-column:1/-1}
  .done-card{text-align:left}
  .done-line{margin-left:0}
}

/* the bot field: off screen, never seen */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send-err{text-align:center;margin:0}
.actions .btn:disabled{opacity:.6;cursor:default}

/* Macca, 8 Oct: "when I scroll on a mobile view over Perform, it zooms in so much". On a phone the
   card photos are unscaled (style.css), but the touch hover rule put Perform's laptop crop (1.42)
   back on. Phones: no scale, touched or not. The redesign home carries the same rule (flagged). */
@media (max-width:720px){ .pc .card-photo img,.pc:hover .card-photo img{transform:none} }