/* ov-answerloop — /answerloop overlap pass (2026-09-30). Page-scoped, loaded last.
   Composition: "the reviewer's desk". The sign-in card sits on a photograph of two people at work
   that runs off the right edge · the review headline rises as a card over the bottom of the wide
   photograph · the review screenshot's sand panel runs off the left edge · "What happens to your
   answer" lifts as a card over the panel's foot · the apply words sit in a card lapping the photo.
   The la- loop figure and the sign-in form are untouched. Copy unchanged. */

.d29{--ov-shadow:0 0 0 1px rgba(0,0,0,.05),0 30px 60px -24px rgba(30,22,10,.35),0 12px 24px -12px rgba(30,22,10,.18);--ov-sand:#E9DFCC;
  --ov-bleed:max(var(--gutter),calc((100vw - var(--max)) / 2))}
.d29 .ova-hero-p img,.d29 .ova-apply .al-apply-photo{filter:sepia(.14) saturate(.8) contrast(.96) brightness(1.04)}

/* ---------- hero: the sign-in card on a photograph that bleeds off the right edge ---------- */
.d29 .ova-hero{position:relative;isolation:isolate;justify-content:flex-end;padding-top:min(16rem,24vw)}
.d29 .ova-hero-p{position:absolute;z-index:-1;top:0;bottom:28%;left:14%;right:calc(-1 * var(--ov-bleed))}
.d29 .ova-hero-p img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;border-radius:var(--radius-img) 0 0 var(--radius-img)}
.d29 .ova-hero .d29-alx-card{position:relative;width:86%;margin-left:-2.5rem;border:0;box-shadow:var(--ov-shadow)}

/* ---------- the review headline rises as a card over the wide photograph ---------- */
.d29 .ova-ed .photo-wide{object-position:50% 40%}
.d29 .ova-review{border-top:0!important;padding-top:0}
.d29 .ova-headcard{position:relative;z-index:2;width:min(46rem,62%);margin:-9rem 0 var(--stack-l) clamp(1.5rem,1rem + 3vw,4rem);padding:clamp(1.75rem,1rem + 2vw,2.75rem);background:var(--surface);border-radius:var(--radius);box-shadow:var(--ov-shadow)}
.d29 .ova-headcard .h2{max-width:none}

/* ---------- the screenshot panel runs off the left edge; the outcome card lifts over its foot ---------- */
.d29 .ova-panel{margin-left:calc(-1 * var(--ov-bleed))!important;padding-left:calc(var(--ov-bleed) + clamp(1.25rem,.5rem + 4vw,4.5rem));border-radius:0 calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0;background:linear-gradient(90deg,var(--ov-sand) 0%,var(--tint) 35%,var(--tint) 100%);padding-bottom:clamp(5rem,3rem + 5vw,8rem)}
.d29 .ova-panel .d29-shot{box-shadow:var(--ov-shadow)}
.d29 .ova-two{position:relative;z-index:2;margin-top:clamp(-6rem,-2rem - 4vw,-3rem);align-items:start}
.d29 .ova-two>div:first-child{margin-top:clamp(5rem,3rem + 4vw,7.5rem)}
.d29 .ova-two>div:last-child{border-top:0;background:var(--surface);border-radius:var(--radius);padding:clamp(1.5rem,1rem + 1.5vw,2.25rem);box-shadow:var(--ov-shadow)}
.d29 .ova-two .al-chain li:last-child{border-bottom:0}

/* ---------- apply: the words in a card lapping a wide photograph ---------- */
@media (min-width:961px){
  .d29 .ova-apply .split{align-items:center}
  .d29 .ova-apply .split-text{grid-column:1/span 6;grid-row:1;position:relative;z-index:2;background:var(--surface);border-radius:var(--radius);padding:clamp(2rem,1rem + 2.5vw,3.5rem);box-shadow:var(--ov-shadow)}
  .d29 .ova-apply .split-media{grid-column:5/-1;grid-row:1;position:relative;isolation:isolate}
  .d29 .ova-apply .split-media::before{content:"";position:absolute;z-index:-1;top:-1.75rem;right:-1.75rem;width:42%;height:60%;border-radius:var(--radius-img);background:var(--ov-sand)}
  .d29 .ova-apply .al-apply-photo{aspect-ratio:4/3;object-position:50% 58%}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .d29 .ova-hero{padding-block:0}
  .d29 .ova-hero-p{position:relative;display:block;left:auto;right:auto;margin-right:calc(-1 * var(--gutter))}
  .d29 .ova-hero-p img{aspect-ratio:4/3;height:auto}
  .d29 .ova-hero .d29-alx-card{width:auto;margin:-5rem .75rem 0}
  .d29 .ova-headcard{width:auto;margin:-4rem .75rem var(--stack-l)}
  .d29 .ova-two{margin-top:-3rem}
  .d29 .ova-two>div:first-child{margin-top:0;grid-row:2}
  .d29 .ova-two>div:last-child{grid-row:1;margin-inline:.75rem}
}
@media (max-width:700px){
  .d29 .ova-hero .d29-alx-card{margin:-3.5rem .5rem 0}
  .d29 .ova-headcard{margin:-2.5rem .5rem var(--stack-m);padding:1.5rem 1.25rem}
  .d29 .ova-panel{padding-right:.75rem;padding-left:calc(var(--gutter) + .75rem)}
  .d29 .ova-two>div:last-child{margin-inline:.25rem}
}