/* TAKE 4 — the city at night */
#take4{--len:900svh}

#take4 .t4{position:relative;z-index:1}
#take4 .t4 h2,#take4 .t4 h3,#take4 .t4 p{margin:0}
#take4 .t4-claims,#take4 .t4-steps{list-style:none;margin:0;padding:0}
#take4 .t4-h{font-size:var(--type-h2);font-weight:740;font-stretch:78%;line-height:1;letter-spacing:-.005em;color:#fff}
#take4 .t4 h3{font-size:var(--type-name);font-weight:720;font-stretch:80%;line-height:1.1;color:#fff;margin-block-end:.45em}
#take4 .t4 p{font-size:var(--type-body);line-height:1.62;color:#dde0f4;text-wrap:pretty}
#take4 .t4 .t4-line1{font-size:var(--type-lead);line-height:1.55;font-weight:500;color:#f3f4fa;text-wrap:balance}
#take4 .t4 .t4-line2{font-size:clamp(2.1rem,1.3rem + 3.4vw,3.9rem);font-weight:740;font-stretch:78%;line-height:1.08;color:#fff;text-wrap:balance}
#take4 .t4 .t4-intro{margin-block-start:.9em;max-width:24rem}
#take4 .t4-num{display:block;font-size:var(--type-meta);font-weight:700;letter-spacing:.14em;color:var(--color-cyan);margin-block-end:.55em;font-variant-numeric:tabular-nums}
#take4 .t4-num::after{content:" / 5";color:rgb(243 244 250 / .55);font-weight:500}

/* a soft local scrim behind every block of copy, so it reads over the lights */
#take4 .t4-line,#take4 .t4-whyH,#take4 .t4-claim,#take4 .t4-procHead,#take4 .t4-step{position:relative;isolation:isolate;text-shadow:0 1px 14px rgb(4 6 28 / .7)}
#take4 .t4-line::before,#take4 .t4-claim::before,#take4 .t4-procHead::before,#take4 .t4-step::before,#take4 .t4-whyH::before{
  content:"";position:absolute;z-index:-1;inset:-34% -22%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(5 8 32 / .74),rgb(5 8 32 / .5) 55%,rgb(5 8 32 / 0))}

/* ---------------------------------------------------------------- live: one idea per frame */
html.jr-live #take4 .t4{position:absolute;inset:0;pointer-events:none}
html.jr-live #take4 [data-t4-line1],html.jr-live #take4 [data-t4-line2],html.jr-live #take4 [data-t4-whyh],
html.jr-live #take4 [data-t4-claim],html.jr-live #take4 [data-t4-proch],html.jr-live #take4 [data-t4-step]{
  position:absolute;opacity:0;visibility:hidden;will-change:transform,opacity;inset-inline:28px;max-width:34rem}
html.jr-live #take4 .t4-line{top:0;bottom:0;margin-block:auto;height:fit-content;text-align:center;margin-inline:auto}
html.jr-live #take4 .t4-line2{top:auto;bottom:15svh;height:auto}
html.jr-live #take4 [data-t4-whyh]{top:calc(var(--hud-h) + 7svh)}
html.jr-live #take4 [data-t4-claim]{top:29svh}
html.jr-live #take4 [data-t4-proch]{bottom:13svh}
html.jr-live #take4 [data-t4-step]{bottom:max(9svh,calc(var(--jr-band) + 14px))}
/* the last step rests with the row to talk under it (the row fades in with the rest) */
#take4{--t4-cta:70px}
html.jr-live #take4 [data-t4-step]:last-child{bottom:calc(max(9svh,calc(var(--jr-band) + 14px)) + var(--t4-cta))}
html.jr-live #take4 .t4-cta{inset-inline:28px;max-width:34rem;bottom:max(9svh,calc(var(--jr-band) + 14px));justify-content:flex-start}
html:not(.jr-live) #take4 .t4-cta{justify-content:flex-start;margin-block-start:7svh}
@media (min-width:900px){
  html.jr-live #take4 [data-t4-whyh],html.jr-live #take4 [data-t4-claim],html.jr-live #take4 [data-t4-proch],html.jr-live #take4 [data-t4-step],
  html.jr-live #take4 .t4-cta{inset-inline:9vw auto;max-width:30rem}
  #take4{--t4-cta:78px}
  html.jr-live #take4 .t4-line{max-width:40rem}
  html.jr-live #take4 [data-t4-whyh],html.jr-live #take4 [data-t4-proch]{max-width:46rem}
  html.jr-live #take4 [data-t4-claim]{top:31svh}
}

/* ---------------------------------------------------------------- static: the night city as a poster */
html:not(.jr-live) #take4 .stage,html.jr-live #take4 .stage[data-fallback]{
  background:linear-gradient(180deg,#1c1850 0,rgb(28 24 80 / 0) 30svh),url(poster-phone.jpg) top center/100% auto repeat-y,#0c1144}
@media (min-width:700px){
  html:not(.jr-live) #take4 .stage,html.jr-live #take4 .stage[data-fallback]{
    background:linear-gradient(180deg,#1c1850 0,rgb(28 24 80 / 0) 30svh),url(poster-wide.jpg) top center/100% auto repeat-y,#0c1144}
}
html:not(.jr-live) #take4 .t4{display:grid;gap:18svh;padding:22svh var(--gutter) 20svh;max-width:46rem;margin-inline:auto}
html:not(.jr-live) #take4 .t4-story{display:grid;gap:5svh;text-align:center}
html:not(.jr-live) #take4 .t4-claims{display:grid;gap:4.5svh;margin-block-start:6svh}
html:not(.jr-live) #take4 .t4-steps{display:grid;gap:4.5svh;margin-block-start:7svh}
html:not(.jr-live) #take4 .t4-line::before,html:not(.jr-live) #take4 .t4-claim::before,html:not(.jr-live) #take4 .t4-procHead::before,
html:not(.jr-live) #take4 .t4-step::before,html:not(.jr-live) #take4 .t4-whyH::before{inset:-12% -8%}

/* a soft vignette over the scene, under the copy */
html.jr-live #take4 .stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,rgb(3 5 22 / 0) 55%,rgb(3 5 22 / .42) 100%)}