/* al-1104 - /answerloop as the reviewer recruiting page (4 Nov 2026). Scoped under .al4. */
.al4 [id] {scroll-margin-top: 96px;}

/* Hero: two lines, the stats under the buttons, one photograph and one real screen. */
.al4 .al4-hero {padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem);}
.al4 .al4-hero .d29-crumbs {margin-bottom: clamp(1.25rem, .5rem + 2vw, 2.25rem);}
.al4 .al4-hero-grid {display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start;}
.al4 .al4-hero h1 {font-size: clamp(2.5rem, 1.15rem + 4.55vw, 5.25rem); line-height: 1.03; letter-spacing: -.022em;}
.al4 .al4-hero h1 em {display: block;}
.al4 .al4-hero .d29-lede {margin-top: 1.5rem;}
.al4 .al4-hero .d29-cta-row {margin-top: 1.75rem;}
.al4 .al4-stats {display: grid; grid-template-columns: 1.25fr .8fr 1.1fr; margin: 2.25rem 0 0; border-top: 1px solid var(--rule);}
.al4 .al4-stats > div {display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .35rem; padding: 1.1rem 1.25rem 0 0;}
.al4 .al4-stats > div + div {padding-left: 1.25rem; border-left: 1px solid var(--rule);}
.al4 .al4-stats dd {margin: 0; font: 400 clamp(1.625rem, 1.2rem + 1vw, 2.125rem)/1.1 var(--serif); color: var(--ink); white-space: nowrap;}
.al4 .al4-stats dt {font-size: .8125rem; line-height: 1.35; color: var(--muted);}
.al4 .al4-hero-media {position: relative; padding-bottom: 3.25rem;}
.al4 .al4-hero-media picture img {display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-img);}
.al4 .al4-hero-shot {position: absolute; right: -1rem; bottom: 0; width: 86%; height: auto; border-radius: 14px; background: #fff; border: 1px solid var(--rule); box-shadow: var(--shadow);}

/* Heads */
.al4 .al4-head {max-width: 38rem; margin-bottom: var(--stack-l);}
.al4 .al4-head .eyebrow {margin-bottom: var(--stack-s);}
.al4 .al4-head .h2 + p {margin-top: 1.25rem; color: var(--text);}

/* Project cards: three in a row, tops aligned. */
.al4 .al4-jobs {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap);}
.al4 .al4-job {display: flex; flex-direction: column; padding: 1.75rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);}
.al4 .al4-job .eyebrow {margin-bottom: .85rem;}
.al4 .al4-job .h3 {font-size: clamp(1.625rem, 1.3rem + .7vw, 2rem); line-height: 1.12;}
.al4 .al4-job-task {margin-top: .85rem; font-size: 1rem; line-height: 1.5; color: var(--text);}
.al4 .al4-job-meta {margin-top: .85rem; font-size: .875rem; color: var(--muted);}
.al4 .al4-job-foot {display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.5rem;}
.al4 .al4-job-pay {font: 400 1.5rem/1.1 var(--serif); color: var(--ink); white-space: nowrap;}

/* Why */
.al4 .al4-why {margin: var(--stack-m) 0 0;}
.al4 .al4-why > div {padding-block: 1rem; border-top: 1px solid var(--rule);}
.al4 .al4-why dt {font-weight: 600; color: var(--ink);}
.al4 .al4-why dd {margin: .2rem 0 0; color: var(--text);}

/* Who and how */
.al4 .al4-three {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap);}
.al4 .photo-wide + .al4-three {margin-top: var(--stack-m);}
.al4 .al4-three > div {border-top: 1px solid var(--rule); padding-top: 1.25rem;}
.al4 .al4-three p {margin-top: .6rem; color: var(--text);}

/* Review */
.al4 .al4-panel {margin: 0;}
.al4 .al4-two {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--stack-l);}
.al4 .al4-two > div {border-top: 1px solid var(--rule); padding-top: 1.25rem;}
.al4 .al4-two .h3 {margin-bottom: .75rem;}

/* Join: the card opens on the application; #signin flips it to sign-in. */
.al4 .al4-cardcol {display: flex; justify-content: flex-end;}
.al4 .al4-join .sub {margin-top: 1rem; color: var(--text);}
.al4 .al4-join .d29-alx-card {width: 100%; max-width: 30rem; margin: 0;}
.al4 .al4-join #signup.d29-alx-face {display: block;}
.al4 .al4-join #signin.d29-alx-face {display: none;}
.al4 .al4-join #signin.d29-alx-face:target {display: block;}
.al4 .al4-join #signup.d29-alx-face:has(~ #signin:target) {display: none;}
.al4 .al4-join .d29-alx-card .d29-alx-tab-up {color: var(--ink); border-bottom-color: var(--ink);}
.al4 .al4-join .d29-alx-card .d29-alx-tab-in {color: var(--muted); border-bottom-color: transparent;}
.al4 .al4-join .d29-alx-card:has(#signin:target) .d29-alx-tab-in {color: var(--ink); border-bottom-color: var(--ink);}
.al4 .al4-join .d29-alx-card:has(#signin:target) .d29-alx-tab-up {color: var(--muted); border-bottom-color: transparent;}

@media (max-width: 960px) {
  .al4 .al4-hero-grid {grid-template-columns: 1fr;}
  .al4 .al4-hero h1 em {display: inline;}
  .al4 .al4-hero-media picture img {aspect-ratio: 4 / 3;}
  .al4 .al4-hero-shot {right: .5rem; width: 92%;}
  .al4 .al4-jobs, .al4 .al4-three, .al4 .al4-two {grid-template-columns: 1fr;}
  .al4 .al4-three, .al4 .al4-two {row-gap: 1.75rem;}
  .al4 .al4-cardcol {justify-content: stretch;}
  .al4 .al4-join .d29-alx-card {max-width: none;}
}
@media (max-width: 560px) {
  .al4 .al4-stats {grid-template-columns: 1fr;}
  .al4 .al4-stats > div {flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule);}
  .al4 .al4-stats > div + div {padding-left: 0; border-left: 0;}
  .al4 .al4-stats dd {font-size: 1.5rem;}
}