/* The /join fit check. Mirrors the Meta ad it sits behind (gold "Full time",
   white "video editor.", Lloyd with the camera on the right, the three fact
   tiles) so the click feels like the same thing, then one question a screen. */

.join .g-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.join .remote{font-family:var(--g-mono);font-size:12px}

.screen{display:none}
.screen.show{display:block;animation:rise .28s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen.show{animation:none}}

/* Photo on the right, fading into the page on its left and bottom edges,
   headline over it on the left: the ad's layout at phone width. */
.hero{position:relative;min-height:360px;margin:0 0 8px}
.hero-img{position:absolute;right:calc(var(--g-gutter) * -1);top:-8px;width:62%;max-width:330px;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 58% 44%,#000 42%,transparent 98%);mask-image:radial-gradient(ellipse 50% 50% at 58% 44%,#000 42%,transparent 98%);pointer-events:none}
.hero-copy{position:relative;padding-top:24px;max-width:23rem}
.hero .hiring{margin:0 0 18px;color:var(--g-gold)}
.hero .hiring::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--g-gold);margin-right:8px;vertical-align:1px}
.hero .g-h1{margin:0 0 14px;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.hero .g-lede{margin:0;max-width:13em;text-shadow:0 1px 14px rgba(0,0,0,.8)}
.hero .g-lede strong{color:var(--g-t1);font-weight:500}

.facts3{display:grid;grid-template-columns:repeat(3,1fr);padding:0;margin:0 0 22px;overflow:hidden}
.facts3 > div{padding:14px 12px;min-width:0}
.facts3 > div + div{border-left:1px solid var(--g-line2)}
.facts3 .g-kicker{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.facts3 b{display:block;font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--g-t1);margin:4px 0 1px;white-space:nowrap}
.facts3 > div:first-child b{color:var(--g-gold)}
.facts3 small{display:block;color:var(--g-t3);font-size:12.5px;line-height:1.35}

.land-line{color:var(--g-t2);font-size:15.5px;margin:0 0 18px}
.land-small{font-family:var(--g-mono);font-size:12px;color:var(--g-t3);text-align:center;margin:14px 0 0}

/* Questions */
.bar{height:3px;border-radius:3px;background:var(--g-line2);overflow:hidden;margin:0 0 18px}
.bar span{display:block;height:100%;width:0;background:var(--g-t1);transition:width .25s ease}
.ask-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.back{appearance:none;border:1px solid var(--g-line2);background:transparent;color:var(--g-t2);border-radius:10px;
  width:38px;height:38px;font-size:18px;cursor:pointer;flex:none}
.back:hover{color:var(--g-t1);border-color:rgba(242,242,242,.3)}
.back[disabled]{visibility:hidden}
.qtext{margin:0 0 8px;font-size:clamp(22px,6vw,28px);line-height:1.2}
.ask .hint{min-height:0}
.ask .choices{margin:16px 0 0}
.ask .choice{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding:15px 16px;font-size:16px;align-items:center}
.ask .choice input{margin:0}
.ask .send{margin-top:18px}

#pass .g-h1,#out .g-h1{margin:14px 0 16px}
#pass .g-lede,#out .g-lede{margin:0 0 18px}

@media (max-width:420px){
  .hero{min-height:282px}
  .hero-img{top:-14px}
  .hero-img{width:66%}
  .facts3 > div{padding:12px 9px}
  .facts3 b{font-size:17px}
  .facts3 small{font-size:11.5px}
}

[hidden]{display:none!important}

.screen > .g-kicker{display:block}
#details .g-h1,#pass .g-h1{margin:14px 0 12px}
#details .g-lede{margin:0 0 22px}
#detailsForm .field input:not([type=checkbox]){width:100%;font-size:16px}

/* Not a fit: an Instagram profile drawn on a phone, every tile a real post. */
.phone{width:min(100%,330px);margin:6px auto 20px;padding:10px;border-radius:40px;background:#0b0b0c;
  border:1px solid rgba(242,242,242,.14);box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 0 0 2px #1b1b1d}
.ig{border-radius:31px;overflow:hidden;background:#000;color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:13px;padding-bottom:2px}
.ig a{color:inherit;text-decoration:none}
.ig-bar{height:44px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;border-bottom:1px solid #1d1d1f}
.ig-head{display:flex;align-items:center;gap:22px;padding:14px 16px 8px}
.ig-av{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #000,0 0 0 4px var(--g-gold)}
.ig-stat{display:flex;flex-direction:column;align-items:center;font-size:12.5px;color:#d0d0d0}
.ig-stat b{font-size:16px;color:#fff;font-weight:700}
.ig-name{padding:0 16px;font-weight:600;font-size:13px}
.ig-bio{padding:2px 16px 10px;color:#e4e4e4;font-size:12.5px;line-height:1.4}
.ig-follow{display:block;margin:0 16px 12px;padding:7px 0;border-radius:8px;background:#0095f6;color:#fff!important;text-align:center;font-weight:600}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig-grid a{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#111}
.ig-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .15s}
.ig-grid a:hover img{opacity:.8}
.ig-grid .reel{position:absolute;top:6px;right:6px;width:16px;height:16px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

.mailto-alt{margin:14px 0 0;text-align:center;font-size:14px;color:var(--g-t3)}
.mailto-alt b{color:var(--g-t2);font-weight:600}