/* ===========================================================================
   Landing page — פדיון נפש ראש השנה
   Hand-built rebuild of https://ravbenayahu.co.il/פדיון-נפש-ראש-השנה/
   (the original is Elementor: 71 stylesheets, 96 scripts, 2.75MB).

   Every number below was measured off the live page at a 1440px viewport,
   after scrolling it through so its lazy backgrounds had actually applied:

     hero art      1382x830 (29,-67)   cover
     the Rav        793x789 (29,-26)   contain 50% 100%
     ribbon         535x97  (866,175)  contain
     brush band    1420x120 (10,698)   cover
     coins          553x1097(180,1574) 446.4px 0% 100%
     video poster   792x446 (324,2700) cover
     dark band 1   1382x452 (29,3217)  cover   ← Group-67.webp
     dark band 2   1382x779 (29,4068)  cover   ← Group-67.webp
     inner brushes  835x125 (302, 3259 / 4151 / 4435)
     parchment     1520x240 (-40,5034) · 1493x473 (-26,5270) · 1520x240 (-40,5738)

   Horizontal offsets are written as calc(50% - 720px + X) so the composition
   stays centred on wider screens exactly as it does on the original.
   Standalone: no site header, no site footer.
   =========================================================================== */
@font-face{font-family:'almoni';src:url('/v2/assets/fonts/almoni-medium-aaa-1.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'almoni';src:url('/v2/assets/fonts/almoni-bold-aaa-1.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'almoni';src:url('/v2/assets/fonts/almoni-black-aaa-1.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'levi';src:url('/v2/assets/fonts/levi-bold-aaa.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'levi';src:url('/v2/assets/fonts/levi-ultrabold-aaa.woff2') format('woff2');font-weight:900;font-display:swap}

:root{--paper:#f8fcff;--purple:#2c0453;--pink:#ff165c;
  --gold:#f5d5a6;--yellow:#ffd600;--maroon:#881811}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

html{overflow-x:clip}

body{background:var(--paper);color:var(--purple);direction:rtl;
  font-family:'almoni',sans-serif;overflow-x:clip}

img{max-width:100%;display:block}

a{text-decoration:none}


.lp-cta{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:0;padding:25px;border-radius:5px;
  background:linear-gradient(120deg,var(--maroon) 0%,#3c0f11 100%);
  color:var(--gold);font-family:'almoni',sans-serif;font-size:1.5vw;font-weight:700;
  line-height:1.2vw;text-align:center;transition:filter .18s,transform .18s}

.lp-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}


/* ── the page's own fixed crest bar (not the site header) ────────────────── */
.topbar{position:fixed;top:0;left:calc(50% - 20vw);width:40vw;height:8.0556vw;z-index:101;
  border-radius:0 0 40px 40px;transition:background .3s}

.topbar.on{background:var(--purple)}

.topbar .badge{position:absolute;top:-25px;left:calc(50% - 10.55vh + 4.5px);width:21.1vh;height:19.5vh;
  background:var(--yellow);border-radius:0 0 200px 200px}

.topbar .crest{position:absolute;top:-5px;left:calc(50% - 8.05vh + 4.5px);width:16.1vh;height:14vh;max-width:none}

.topbar a{position:absolute;top:3.6111vw;font-family:'almoni',sans-serif;font-weight:400;
  font-size:1.2vw;line-height:0.96vw;color:var(--gold);text-align:center;
  background:linear-gradient(120deg,var(--maroon) 0%,#3c0f11 100%);white-space:nowrap}

.topbar a:first-of-type{left:29.0278vw;width:9.5833vw}

.topbar a:last-of-type{left:3.0556vw;width:8.5417vw}


/* ── motion, as on the original: the arrows swing in and then turn and slide
   as they travel through the viewport ─────────────────────────────────────── */
@keyframes lp-swing{
  20%{transform:rotate3d(0,0,1,15deg)}  40%{transform:rotate3d(0,0,1,-10deg)}
  60%{transform:rotate3d(0,0,1,5deg)}   80%{transform:rotate3d(0,0,1,-5deg)}
  100%{transform:rotate3d(0,0,1,0)}}
@keyframes lp-rollin{
  0%{opacity:0;transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}
  100%{opacity:1;transform:none}}
.lp-swing{animation:lp-swing 1.25s both;transform-origin:top center}
.lp-rollin{animation:lp-rollin 1.25s both}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lp-swing,.lp-rollin{animation:none}}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--paper);height:max(calc(100vh - 166px), calc(131.25vh - 478.5px))}

.hero .art,.hero .rav{position:absolute;pointer-events:none}

.hero .art{top:calc(15.25vh - 222px);left:calc(50% - 47.9861vw);width:95.9722vw;height:83vh;border-radius:150px 0;
  padding:2.8798vw 2.8798vw 0 0;
  background:url('/uploads/2023/08/Group-68-1.webp') 0% 0%/cover no-repeat fixed}

.hero .rav{top:calc(15.7vh - 185px);left:calc(50% - 47.9861vw);width:55.0694vw;height:calc(83vh - 41px);
  padding:11.174vw 1.862vw 0 0;
  background:url('/uploads/2023/08/%D7%A2%D7%95%D7%A8%D7%9A-%D7%A4%D7%93%D7%99%D7%95%D7%9F-%D7%A0%D7%A4%D7%A9--e1691349397459.webp') 50% 100%/contain no-repeat}

.hero .play{position:absolute;top:calc(22vh + 14.0297vw - 287px);left:calc(50% - 7.7778vw);width:10vw;height:8.8889vw}

.hero .ribbon{position:absolute;top:max(calc(47.7vh - 7.073vw - 216.4px), calc(64vh - 7.073vw - 363.1px));left:calc(50% + 10.1389vw);width:37.1528vw;height:6.7361vw;
  padding:2.7778vw 2.5694vw 1.5278vw 1.1111vw;
  background:url('/uploads/2023/08/Isolation_Mode.svg') 50% 50%/contain no-repeat}

.hero .ribbon h2{position:absolute;top:2.7778vw;left:1.1111vw;width:33.4722vw;margin:0;
  font-family:'levi',sans-serif;font-weight:700;font-size:2.4vw;
  color:var(--purple);line-height:1;text-align:center}

.hero .col{position:absolute;top:calc(64vh - 4.7437vw - 290px);left:calc(50% + 7.0833vw);width:38.0556vw;text-align:center}

.hero h1{font-family:'levi',sans-serif;font-weight:900;font-size:5.9vw;color:#fff;line-height:1.1}

.hero h2{font-family:'levi',sans-serif;font-weight:900;font-size:4.6vw;color:#fff;
  line-height:.9;margin-top:0.6944vw}

.hero .lp-cta{position:absolute;top:calc(64vh + 5.8696vw - 269.5px);left:auto;width:auto;right:auto;inset-inline-start:4.8611vw}

.hero .brush{position:absolute;top:calc(114vh - 442px);left:calc(50% - 49.3056vw);width:98.6111vw;height:120px;
  padding:4.8611vw 2.5694vw 2.5694vw 1.1111vw;
  background:url('/uploads/2023/08/Isolation_Mode-1.svg') 50% 50%/cover no-repeat}

.hero .brush h2{position:absolute;top:4.8611vw;left:1.1111vw;width:94.9306vw;
  font-family:'levi',sans-serif;font-weight:700;font-size:2.7vw;
  color:var(--purple);text-align:center;line-height:0.8889vw;margin:0}


/* ── the two numbered prose sections ─────────────────────────────────────── */
.sec{position:relative}

.sec .num{position:absolute;font-family:'levi',sans-serif;font-weight:700;font-size:20vw;
  line-height:.8;color:rgba(255,22,92,.15);pointer-events:none;z-index:0}

.sec .in{position:relative;z-index:1}

.sec h2{font-family:'levi',sans-serif;font-weight:700;font-size:5.2vw;color:var(--purple);
  line-height:.9}

.sec p{font-family:'almoni',sans-serif;font-weight:400;font-size:1.5vw;line-height:2.25vw;
  color:var(--purple);margin-top:1.1111vw}

.sec .arrow{position:absolute;pointer-events:none}

.sec1{height:calc(38.125vw + 85px);margin-top:20px}

.sec1 .num{top:2.2222vw;left:calc(50% + 27.7778vw)}

.sec1 h2{position:absolute;top:3.4722vw;left:calc(50% + 1.3889vw);width:36.6667vw;z-index:1}

.sec1 .in{position:absolute;top:14.5833vw;left:calc(50% - 38.4028vw);width:47.9861vw}

.sec1 .in p:first-of-type{margin-top:0}

.sec1 .arrow{top:21.0417vw;left:calc(50% + 12.2917vw);width:13.8889vw;height:14.2361vw}

.sec1 .lp-cta{position:absolute;top:37.3611vw;left:auto;width:auto;right:auto;inset-inline-start:40.4167vw}

.sec2{height:calc(72.5vw + 154px)}

.sec2 .num{top:5.6944vw;left:calc(50% - 10.9028vw)}

.sec2 .in{padding:0;width:auto}

.sec2 h2{position:absolute;top:5.6944vw;left:calc(50% - 35.625vw);width:30vw}

.sec2 .coins{position:absolute;top:5vw;left:calc(50% - 37.5vw);width:38.4028vw;height:76.1806vw;
  padding:0.6944vw;
  background:url('/uploads/2023/08/falling_nickel_pile-1.webp') 0% 100%/31vw auto no-repeat;
  pointer-events:none}

.sec2 .text{position:absolute;top:17.9861vw;left:calc(50% - 10.5556vw);width:48.0556vw}

.sec2 .text p:first-of-type{margin-top:0}

.sec2 .arrow{top:52.0139vw;left:calc(50% - 20.9028vw);width:17.7778vw;height:17.6389vw}

.sec2 .lp-cta{position:absolute;top:62.0139vw;left:auto;width:auto;right:auto;inset-inline-start:12.5vw}


/* ── the video poster ────────────────────────────────────────────────────── */
.poster{height:calc(36.25vw - 4px);position:relative}

.poster .shot{position:absolute;top:0;left:calc(50% - 27.5vw);width:55vw;height:30.9722vw;
  border-radius:30px;overflow:hidden;box-shadow:0 18px 28px rgba(3,0,49,.22);
  background:url('/uploads/2023/08/Rectangle-21.webp') 50% 50%/cover no-repeat}

.poster .play{position:absolute;top:11.7361vw;left:calc(50% - 3.4722vw);width:6.9444vw;height:6.9444vw;
  padding:0;border:0;background:none;cursor:pointer;line-height:0}

.poster .play .pl{width:6.9444vw;height:6.9444vw;display:block;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));transition:transform .18s}

.poster .play:hover .pl{transform:scale(1.06)}

.poster .vid{width:100%;height:100%;border:0;display:block}


/* ── the two dark bands ──────────────────────────────────────────────────── */
.dark{position:relative}

.dark .panel{position:absolute;top:0;bottom:0;left:calc(50% - 47.9861vw);width:95.9722vw;
  border-radius:150px 0;padding:2.8798vw;
  background:url('/uploads/2023/08/Group-67.webp') 0% 0%/cover no-repeat fixed}

.band{position:absolute;left:calc(50% - 29.0278vw);width:57.9861vw;height:8.6806vw;
  padding:2.7083vw 2.5694vw 0.7639vw 1.1111vw;
  background:url('/uploads/2023/08/Isolation_Mode.svg') 50% 50%/contain no-repeat}

.band h2{position:absolute;top:2.6389vw;left:1.1111vw;width:54.3056vw;text-align:center;
  font-family:'levi',sans-serif;font-weight:700;font-size:5.2vw;color:var(--pink);
  line-height:1;margin:0}

.band.gold h2{color:var(--yellow)}


.wonder{height:calc(21.25vw + 146px)}

.wonder .band{top:2.9167vw}

.wonder p{position:absolute;top:12.9861vw;left:calc(50% - 31.1111vw);width:62.2917vw;text-align:center;
  font-family:'almoni',sans-serif;font-size:2.2vw;line-height:2.2vw;color:var(--paper)}

/* The attribution is an inline run inside the same paragraph on the original,
   not a line of its own — at 13px it drops to its own line by wrapping. */
.wonder .cite{font-size:0.9028vw}

.wonder .lp-cta{position:absolute;top:23.8194vw;left:auto;width:auto;right:auto;inset-inline-start:32.6389vw}


.between{height:calc(25.625vw + 30px);position:relative}

.between .story{position:absolute;top:15.625vw;left:calc(50% - 37.3611vw);width:74.7222vw;
  font-family:'almoni',sans-serif;font-size:1.5vw;line-height:2.25vw;color:var(--purple)}

.between .marks{position:absolute;top:5vw;left:calc(50% + 25.4167vw);width:11.9444vw;height:8.8889vw}


.offer{height:calc(41.25vw + 185px);text-align:center}

.offer .l1{position:absolute;top:2.9167vw;left:calc(50% - 31.1111vw);width:62.2917vw;
  font-family:'almoni',sans-serif;font-weight:700;font-size:2.5vw;line-height:2.5vw;
  color:var(--paper)}

.offer .b1{top:5.7639vw}

.offer .l2{position:absolute;top:14.7917vw;left:calc(50% - 31.1111vw);width:62.2917vw;font-family:'almoni',sans-serif;
  font-size:1.5vw;line-height:1.5vw;color:var(--paper)}

.offer .goldname{position:absolute;top:16.5972vw;left:calc(50% - 45.1389vw);width:90.2083vw;
  font-family:'levi',sans-serif;font-weight:700;font-size:5.2083vw;color:var(--yellow);
  line-height:1;margin:0}

.offer .l3{position:absolute;top:22.1528vw;left:calc(50% - 31.1111vw);width:62.2917vw;
  font-family:'almoni',sans-serif;font-size:1.5vw;line-height:1.5vw;color:var(--paper)}

.offer .b3{top:25.4861vw}

.offer .gold{color:var(--yellow)}

.offer .l4{position:absolute;top:34.5139vw;left:calc(50% - 31.1111vw);width:62.2917vw;
  font-family:'almoni',sans-serif;font-size:2.5vw;line-height:2.5vw;color:var(--paper)}

.offer .lp-cta{position:absolute;top:39.8611vw;left:auto;width:auto;right:auto;inset-inline-start:33.4722vw}

.offer .photo{position:absolute;top:calc(41.25vw + 100px);left:calc(50% - 240px);width:480px;height:462px;
  z-index:2;
  background:url('/uploads/2023/08/%D7%A9%D7%A8%D7%95%D7%95%D7%9C%D7%99%D7%9D-%D7%A9%D7%9C%D7%9E%D7%99%D7%9D-1-1024x985.webp') 50% 0%/contain no-repeat}


/* ── the parchment / form area ───────────────────────────────────────────── */
.scroll{position:relative;height:1090px;margin-top:186px;
  background:
    linear-gradient(#f8fcff 71%, #fff 91%) 0 189px/100% 798px no-repeat,
    linear-gradient(#fff5e7,#fff5e7) 0 987px/100% 103px no-repeat,
    var(--paper)}

.scroll .kelaf{position:absolute;pointer-events:none;z-index:3}

.scroll .ktop{top:0;left:calc(50% - 760px);width:1520px;height:240px;
  background:url('/uploads/2023/08/%D7%A7%D7%9C%D7%A3-%D7%A2%D7%9C%D7%99%D7%95%D7%9F.webp') 50% 50%/100% no-repeat}

.scroll .kmid{top:236px;left:calc(50% - 746px);width:1493px;height:473px;padding:20px 0 0;
  background:url('/uploads/2023/08/%D7%A7%D7%9C%D7%A3-%D7%90%D7%9E%D7%A6%D7%A2.webp') 50% 0%/contain repeat}

.scroll .kbot{top:704px;left:calc(50% - 760px);width:1520px;height:240px;
  background:url('/uploads/2023/08/%D7%A7%D7%9C%D7%A3-%D7%AA%D7%97%D7%AA%D7%95%D7%9F.webp') 50% 50%/100% no-repeat}

.scroll .in{position:relative;z-index:4;text-align:center;padding-top:calc(409px - 13.125vw);
  width:1030px;max-width:94vw;margin:0 auto}

.scroll h2{font-family:'almoni',sans-serif;font-weight:700;font-size:2.5vw;color:var(--purple);
  line-height:46.4px}

.scroll .sub{font-family:'almoni',sans-serif;font-size:1.5vw;line-height:1.5vw;
  color:var(--purple);margin-top:5px}

.scroll .ways{display:flex;flex-direction:column;align-items:center;gap:15px;margin-top:5px}

.scroll .ways .lp-cta{min-height:0;gap:10px;padding:25.36px 25px}

.lp-cta .ic{width:1.5vw;height:1.5vw;flex:none}

/* rule — ornament — rule, as the original's divider widget draws it */
.scroll .rule{display:flex;align-items:center;width:1015px;max-width:100%;margin:25px auto 0}

.scroll .rule i{flex:1;border-top:1px solid var(--purple)}

.scroll .rule .orn{flex:none;width:127px;height:42px;margin:0 22px}

.scroll .ways .wide{width:1030px;max-width:94vw}

.scroll .ways .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.scroll .ways .row .lp-cta{width:507px;max-width:94vw}

.scroll .lead{font-family:'almoni',sans-serif;font-weight:700;font-size:1.5vw;line-height:1.5vw;color:var(--purple);margin-top:14px}

.scroll form{margin-top:5px}

.scroll .fields{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;width:1044px;
  max-width:94vw;margin-inline:-7px}

.scroll input{width:100%;min-height:64px;padding:0 18px;border:1px solid rgba(44,4,83,.2);
  border-radius:5px;background:rgba(248,252,255,.44);color:var(--purple);
  font-family:'almoni',sans-serif;font-size:24px;outline:none}

.scroll input::placeholder{color:rgba(44,4,83,.5)}

.scroll input:focus{border-color:var(--pink)}

.scroll .send{margin-top:15px;width:1045px;max-width:94vw;margin-inline:-7.5px;min-height:0;font-weight:900;
  color:#fff;border:0;cursor:pointer;padding:17.86px 25px}

/* the call-back form went live 2026-08-19 — it needs a reply line and a trap */
.scroll .lp-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.scroll form.sending .send{opacity:.7;cursor:default}
.scroll .lp-formmsg{margin:10px 0 0;min-height:1.2em;text-align:center;
  font-family:'almoni',sans-serif;font-size:22px;line-height:1.3;color:var(--purple)}
.scroll .lp-formmsg.ok{color:#1c7a3f;font-weight:700}
.scroll .lp-formmsg.bad{color:#b32020}


/* ── below 1025px the composition becomes a stack, as on the original ────── */
@media(max-width:1024px){
  .topbar,.topbar.on{position:static;left:auto;width:100%;height:auto;padding:10px 0 0;border-radius:0;
    display:flex;align-items:center;justify-content:center;gap:16px;background:#2c0453}
  .topbar .badge{display:none}
  .topbar .crest{position:static;width:74px;height:auto;order:2}
  .topbar a{position:static;width:auto;font-size:14px;line-height:1.2}
  .topbar a:first-of-type{order:1}
  .topbar a:last-of-type{order:3}
  .hero,.sec1,.sec2,.poster,.wonder,.between,.offer,.scroll{height:auto}
  .sec1,.scroll{margin-top:0}
  .hero{padding:60px 18px 0;overflow:hidden}
  .hero .art{top:0;left:0;width:100%;height:100%;padding:0;
    background-attachment:scroll;background-position:center top}
  .hero .rav{position:relative;top:0;left:0;width:100%;max-width:430px;height:300px;
    margin:22px auto 0;background-position:50% 100%}
  .hero .play,.hero .ribbon,.hero .col,.hero .lp-cta,.hero .brush{position:relative;
    z-index:1;left:auto;top:auto}
  .hero .play{width:110px;height:auto;margin:0 auto 8px}
  .hero .ribbon{width:100%;max-width:535px;margin:0 auto;padding:14px 16px;background-size:100% 100%}
  .hero .ribbon h2{position:static;width:auto;font-size:21px;padding:0 26px;line-height:1.2}
  .hero .col{width:auto;margin-top:14px}
  .hero h1{font-size:52px}
  .hero h2{font-size:38px}
  .hero .lp-cta{width:100%;max-width:548px;margin:20px auto 0}
  .hero .brush{width:auto;height:auto;min-height:90px;margin:26px -18px 0;padding:16px 22px;
    background-size:100% 100%}
  .hero .brush h2{position:static;width:auto;font-size:22px;line-height:1.25}

  .sec{padding:44px 18px}
  .sec .in{width:auto;padding:0}
  .sec .num{position:static;display:block;font-size:120px;line-height:1;margin-bottom:-34px}
  .sec2 h2{position:static;width:auto;left:auto;top:auto}
  .sec1 h2,.sec1 .in,.sec2 .text{position:static;width:auto;left:auto;top:auto}
  .sec h2{font-size:40px}
  .sec .arrow{position:static;width:130px;height:auto;margin:18px 0}
  .sec .lp-cta{position:static;width:100%;max-width:569px;margin:18px auto 0;display:flex}
  .sec2 .coins{position:relative;top:0;left:0;width:100%;max-width:420px;height:420px;
    margin:20px auto;background-size:contain;background-position:50% 50%}
  .sec2 .text{width:auto;margin:0}

  .poster{padding:0 18px 30px}
  .poster .shot{position:static;width:100%;height:auto;aspect-ratio:792/446}

  .dark{padding:40px 18px}
  .dark .panel{left:0;width:100%;border-radius:0;padding:0;background-attachment:scroll}
  .band{position:static;width:auto;height:auto;min-height:86px;padding:12px 16px;
    background-size:100% 100%;margin:0 auto}
  .band h2{position:static;width:auto;font-size:34px;line-height:1.1}
  .wonder p,.wonder .cite,.between .story,
  .offer .l1,.offer .l2,.offer .l3,.offer .l4{position:static;left:auto;top:auto;width:auto;
    margin:16px auto 0}
  .wonder p{font-size:22px}
  .offer .goldname{position:static;left:auto;top:auto;width:auto;font-size:34px;margin:10px auto 0}
  .offer .l1{font-size:26px}
  .offer .l4{font-size:22px}
  .between .marks{position:static;width:120px;height:auto;margin:0 auto 10px}
  .offer .photo{position:static;width:100%;max-width:400px;height:380px;margin:24px auto 0}
  .dark .lp-cta{position:static;width:100%;max-width:500px;margin:22px auto 0;display:flex}

  .scroll{padding:0 18px 40px;background:#fff5e7}
  .poster .play{top:auto;bottom:24%}
  .scroll .kelaf{display:none}
  .scroll .in{padding-top:36px;width:auto;margin:0}
  .scroll h2{font-size:26px;line-height:1.3}
  .scroll .fields,.scroll .send{margin-inline:0;width:100%}
  .scroll .fields{grid-template-columns:1fr}
  .scroll .lead{margin-top:14px}
  .scroll .rule{margin-top:18px}
  .lp-cta{line-height:1.2}
  .scroll .lp-cta{font-size:17px}
}

/* ── type below 1025px ────────────────────────────────────────────────────────
   Every size on the desktop composition is in vw, which turns into 6px body copy
   on a phone. The original switches to its own scales at Elementor's breakpoints,
   so those exact sizes are restored here: tablet (768-1024) still scales with the
   viewport, mobile (<=767) is fixed.
   NOTE: the stacked arrangement below 1025px is my own — the original keeps its
   composition and re-proportions it. Only the type is matched here. */
@media(max-width:1024px){
  .sec p,.between .story{font-size:2.5vw;line-height:3.75vw}
  .sec h2{font-size:6vw;line-height:5.4vw}
  .band h2{font-size:8vw;line-height:1.1}
  .wonder p{font-size:2.5vw;line-height:3.4vw}
  .wonder .cite{font-size:1.6vw}
  .offer .l1,.offer .l4{font-size:5vw;line-height:5.2vw}
  .offer .l2,.offer .l3{font-size:2.5vw;line-height:2.5vw}
  .offer .goldname{font-size:7vw;line-height:1}
  .hero .ribbon h2{font-size:4.8vw;line-height:1.1}
  .hero .brush h2{font-size:4.4vw;line-height:1.25}
  .hero h1{font-size:15vw;line-height:1.05}
  .hero h2{font-size:11vw;line-height:1.05}
  .lp-cta{font-size:3vw;line-height:1.2;padding:16px 20px}
  .lp-cta .ic{width:3vw;height:3vw}
  .scroll h2{font-size:5vw;line-height:1.25}
  .scroll .sub,.scroll .lead{font-size:2.5vw;line-height:1.4}
  .topbar a{font-size:1.9vw;line-height:1.2}
  .scroll input{font-size:18px}
}
@media(max-width:767px){
  .sec p,.between .story{font-size:16px;line-height:24px}
  .sec h2{font-size:40px;line-height:36px}
  .band h2{font-size:40px;line-height:1.1}
  .wonder p{font-size:16px;line-height:22px}
  .wonder .cite{font-size:11px}
  .offer .l1{font-size:25px;line-height:26px}
  .offer .l4{font-size:16px;line-height:19.2px}
  .offer .l2,.offer .l3{font-size:16px;line-height:19px}
  .offer .goldname{font-size:30px;line-height:30px}
  .hero .ribbon h2{font-size:21.84px;line-height:1.2}
  .hero .brush h2{font-size:25px;line-height:24px}
  .hero h1{font-size:51.48px;line-height:1.05}
  .hero h2{font-size:38px;line-height:1.05}
  .lp-cta{font-size:20px;line-height:1.2;padding:14px 18px}
  .lp-cta .ic{width:20px;height:20px}
  .scroll h2{font-size:25px;line-height:27.2px}
  .scroll .sub,.scroll .lead{font-size:16px;line-height:1.4}
  .topbar a{font-size:13px;line-height:1.2}
  .scroll input{font-size:16px}
}

/* ── below 1025px: undo the desktop anchoring the stacked layout can't use ─── */
@media(max-width:1024px){
  /* nowrap keeps labels on one line on the desktop composition; on a stack it
     just pushes them off the screen */
  .lp-cta{white-space:normal}
  .hero .lp-cta,.sec .lp-cta,.dark .lp-cta,.scroll .lp-cta{
    inset-inline-start:auto;right:auto;left:auto;width:100%;max-width:560px}
  .hero .ribbon{padding:0;display:grid;place-items:center}
  .hero .ribbon h2{position:static;width:92%;font-size:3.4vw}
  .hero .brush{padding:16px 22px;display:grid;place-items:center}
  .hero .brush h2{position:static;width:100%;font-size:3vw}
  .topbar{gap:10px;padding:8px 6px 0}
  .topbar a{flex:0 1 auto;min-width:0}
}
@media(max-width:767px){
  .hero .ribbon h2{font-size:15px}
  .hero .brush h2{font-size:15px;line-height:1.35}
  .hero h1{font-size:44px}
  .hero h2{font-size:32px}
  .lp-cta{font-size:16px;padding:12px 14px}
  .topbar a{font-size:11px}
  .topbar .crest{width:56px}
}

@media(max-width:1024px){
  /* the brush strokes are sized in vw for the desktop composition, which leaves
     them a couple of dozen pixels tall on a phone with the caption spilling out */
  .hero .ribbon{height:auto;min-height:7.4vw;padding:1.4vw 2vw}
  .hero .brush{height:auto;min-height:9vw;padding:1.8vw 2.6vw}
  .band{height:auto;min-height:9vw;padding:1.4vw 2vw}
  .topbar{gap:8px;flex-wrap:nowrap}
  .topbar a{text-align:center;overflow-wrap:anywhere}
}
@media(max-width:767px){
  .hero .ribbon{min-height:52px;padding:8px 14px}
  .hero .brush{min-height:76px;padding:12px 18px}
  .band{min-height:70px;padding:10px 14px}
  .topbar{gap:6px}
  .topbar a{font-size:10px}
}
@media(max-width:1024px){
  .topbar a{white-space:normal;line-height:1.15}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE (<=767px) — the original does NOT stack here: it keeps the same
   composition with fixed px insets and fixed type. Every number below was
   measured off the original at 390px and 430px wide, so the parts that scale
   are written as vw and the parts that don't stay in px.
   This replaces the hand-made stack that used to live above.
   ═════════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  .hero{height:776px;min-height:0;padding:0;overflow:visible}
  .hero .art{position:absolute;top:17px;left:20px;right:20px;width:auto;
    height:calc(80vw + 405px);padding:0;border-radius:150px 0;
    background-position:50% 100%;background-size:cover;background-attachment:scroll}
  .hero .rav{position:absolute;top:464px;left:40px;right:40px;width:auto;height:270px;
    max-width:none;margin:0;padding:0;background-size:125%;background-position:0% 100%}
  .hero .play{position:absolute;top:479px;left:calc(95vw - 127.5px);width:92px;height:81px;margin:0}
  .hero .ribbon{position:absolute;top:114px;left:calc(5vw + 10px);right:calc(5vw + 10px);
    width:auto;max-width:none;height:59px;margin:0;padding:0;display:grid;place-items:center;
    background-size:contain}
  .hero .ribbon h2{position:static;width:auto;font-size:21.84px;line-height:17.472px;padding:0}
  .hero .col{position:absolute;top:250px;left:calc(5vw + 29px);right:calc(5vw + 29px);
    width:auto;margin:0}
  .hero h1{font-size:51.48px;line-height:.9}
  .hero h2{font-size:70.2px;line-height:63.18px;margin-top:0}
  .hero .lp-cta{position:absolute;top:386px;left:calc(5vw + 29px);right:calc(5vw + 29px);
    inset-inline-start:auto;width:auto;max-width:none;margin:0;height:68px;
    font-size:20px;line-height:16px;padding:0 14px}
  .hero .brush{position:absolute;top:669px;left:10px;right:10px;width:auto;height:179px;
    margin:0;padding:0;display:grid;place-items:center;background-size:cover}
  .hero .brush h2{position:static;width:88%;font-size:25px;line-height:24px}

  .sec{padding:0}
  .sec .num{display:none}
  .sec1{height:642px;margin-top:85px}
  .sec1 h2{position:absolute;top:54px;left:calc(27.5vw - 46px);right:auto;width:calc(72.5vw - 21px);
    font-size:40px;line-height:36px}
  .sec1 .in{position:absolute;top:227px;left:20px;right:20px;width:auto;padding:0}
  .sec1 .arrow{position:absolute;top:130px;left:calc(25vw + 9px);width:101px;height:118px;margin:0}
  .sec1 .lp-cta{position:absolute;top:555px;left:20px;right:20px;inset-inline-start:auto;
    width:auto;max-width:none;margin:0;height:68px;font-size:20px;line-height:16px;padding:0 14px}

  .sec2{height:1147px}
  .sec2 h2{position:absolute;top:52px;left:30px;right:auto;width:calc(100vw - 79px);
    font-size:40px;line-height:36px}
  .sec2 .coins{position:absolute;top:20px;left:20px;right:20px;width:auto;height:280px;
    max-width:none;margin:0;padding:0;background-size:163.8px auto;background-position:0% 100%}
  .sec2 .text{position:absolute;top:300px;left:20px;right:20px;width:auto;margin:0}
  .sec2 .arrow{position:absolute;top:947px;left:-170px;width:129px;height:128px;margin:0}
  .sec2 .lp-cta{position:absolute;top:984px;left:20px;right:20px;inset-inline-start:auto;
    width:auto;max-width:none;margin:0;height:68px;font-size:20px;line-height:16px;padding:0 14px}

  .poster{height:217px;padding:0}
  .poster .shot{position:absolute;top:0;left:20px;right:20px;width:auto;height:197px}
  .poster .play{top:58px;left:calc(50% - 40px);width:80px;height:80px}
  .poster .play .pl{width:80px;height:80px}

  .dark{padding:0}
  .dark .panel{left:20px;right:19px;width:auto;padding:0;border-radius:150px 0;
    background-attachment:scroll}
  .band{position:absolute;left:40px;right:39px;width:auto;height:58px;min-height:0;
    margin:0;padding:0;display:grid;place-items:center;background-size:contain}
  .band h2{position:static;width:auto;font-size:40px;line-height:30.4px}

  .wonder{height:309px}
  .wonder .band{top:40px}
  .wonder p{position:absolute;top:113px;left:40px;right:40px;width:auto;margin:0;
    font-size:16px;line-height:12.8px}
  .wonder .cite{font-size:11px}
  .wonder .lp-cta{position:absolute;top:207px;left:50px;right:50px;inset-inline-start:auto;
    width:auto;max-width:none;margin:0;height:63px;font-size:17px;line-height:13.6px;padding:0 12px}

  .between{height:348px}
  .between .marks{position:absolute;top:20px;left:calc(60vw + 7px);width:130px;height:97px;margin:0}
  .between .story{position:absolute;top:136px;left:20px;right:19px;width:auto;margin:0;
    font-size:16px;line-height:24px}

  .offer{height:599px}
  .offer .l1{position:absolute;top:20px;left:40px;right:40px;width:auto;font-size:25px;line-height:22.4px}
  .offer .b1{top:70px}
  .offer .l2{position:absolute;top:133px;left:40px;right:40px;width:auto;font-size:16px;line-height:12.8px}
  .offer .goldname{position:absolute;top:164px;left:40px;right:40px;width:auto;margin:0;
    font-size:30px;line-height:30px}
  .offer .l3{position:absolute;top:229px;left:40px;right:40px;width:auto;font-size:16px;line-height:12.8px}
  .offer .b3{top:285px}
  .offer .l4{position:absolute;top:348px;left:40px;right:40px;width:auto;font-size:16px;line-height:19.2px}
  .offer .lp-cta{position:absolute;top:420px;left:20px;right:20px;inset-inline-start:auto;
    width:auto;max-width:none;margin:0;height:68px;font-size:20px;line-height:16px;padding:0 14px}
  .offer .photo{position:absolute;top:513px;left:calc(50% - 105px);width:211px;height:203px;margin:0}

  .scroll{height:744px;margin-top:117px;padding:0;background:none}
  .scroll .kelaf{display:block}
  .scroll .ktop{top:-52px;left:12px;right:12px;width:auto;height:50px;background-size:100% 100%}
  .scroll .kmid{top:-4px;left:15px;right:16px;width:auto;height:686px;padding:0;
    background-size:100% 100%;background-repeat:no-repeat}
  .scroll .kbot{top:682px;left:12px;right:12px;width:auto;height:50px;background-size:100% 100%}
  .scroll .in{position:absolute;top:0;left:calc(18vw + 2px);right:calc(18vw + 2px);
    width:auto;max-width:none;margin:0;padding:0}
  .scroll h2{font-size:25px;line-height:27.2px}
  .scroll .sub{font-size:16px;line-height:12.8px;margin-top:5px}
  .scroll .ways{margin-top:4px;gap:15px}
  .scroll .ways .lp-cta{width:100%;max-width:none;height:76px;font-size:25px;line-height:20px;padding:0 10px}
  .scroll .ways .row{flex-direction:column;gap:15px;width:100%}
  .scroll .ways .row .lp-cta{width:100%;height:56px;font-size:16px;line-height:12.8px}
  .scroll .rule{width:100%;margin:18px auto 0}
  .scroll .rule .orn{width:64px;height:21px;margin:0 12px}
  .scroll .lead{font-size:16px;line-height:12.8px;margin-top:16px}
  .scroll form{margin-top:8px}
  .scroll .fields{grid-template-columns:1fr;gap:10px;width:100%;margin:0}
  .scroll input{min-height:46px;font-size:16px}
  .scroll .send{width:100%;margin-top:12px;height:40px;font-size:25px;line-height:20px;padding:0 10px}
}
@media(max-width:767px){
  /* the original's crest bar stays fixed on a phone too; letting it sit in the
     flow pushed the whole page down by its height */
  .topbar{position:fixed;top:0;left:20px;right:20px;width:auto;height:67px;
    padding:0;background:none;border-radius:0 0 40px 40px;display:block}
  .topbar.on{background:var(--purple)}
  .topbar .badge{display:block;position:absolute;top:-9px;left:calc(50% - 57px);
    width:114px;height:106px;border-radius:0 0 200px 200px}
  .topbar .crest{position:absolute;top:-2px;left:calc(50% - 43px);width:87px;height:76px}
  .topbar a{position:absolute;top:26px;width:34%;font-size:10px;line-height:1.15;
    white-space:normal;text-align:center}
  .topbar a:first-of-type{left:auto;right:2%}
  .topbar a:last-of-type{left:2%;right:auto}
  .band h2{width:100%}
  .hero .ribbon h2{width:100%}
}
@media(max-width:767px){
  /* on a phone the second title line is the larger of the two and wraps */
  .hero .col{top:183px;left:calc(50% - 145.5px);right:auto;width:291px;margin:0}
  .hero h1{font-size:51.48px;line-height:56.628px}
  .hero h2{font-size:70.2px;line-height:63.18px;margin-top:10px}
  .hero .ribbon h2{width:100%;font-size:21.84px}
  .sec2 h2{width:calc(100vw - 109px)}
}
@media(max-width:767px){
  /* the measured -170px already included the scroll transform; our script adds
     its own, so the base sits where the arrow reads before it slides */
  .sec2 .arrow{left:calc(50vw - 165px)}
}
@media(max-width:767px){
  /* on a phone the artwork is square at the top with one rounded bottom corner */
  .hero .art{border-radius:0 0 40px}
  .dark .panel{border-radius:0 0 40px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET (768-1024px) — like the phone, the original keeps its composition
   here; unlike the phone, everything scales with the viewport. Geometry and
   type below were generated from measurements at 768px and 1000px wide.
   ═════════════════════════════════════════════════════════════════════════ */
@media(min-width:768px) and (max-width:1024px){
  .topbar{position:fixed;top:0;left:calc(50% - 24vw);right:auto;width:48vw;height:9.5vw;
    padding:0;background:none;border-radius:0 0 40px 40px;display:block}
  .topbar.on{background:var(--purple)}
  .topbar .badge{display:block;position:absolute;top:-2vw;left:calc(50% - 8.8vw);
    width:17.6vw;height:16.3vw;border-radius:0 0 200px 200px}
  .topbar .crest{position:absolute;top:-.4vw;left:calc(50% - 6.7vw);width:13.4vw;height:11.7vw}
  .topbar a{position:absolute;top:4.2vw;width:15vw;font-size:1.6vw;line-height:1.2;
    white-space:normal;text-align:center}
  .topbar a:first-of-type{left:auto;right:1vw}
  .topbar a:last-of-type{left:1vw;right:auto}

  .hero{height:calc(99.14vw + 464px);min-height:0;padding:0}
  .hero .art{position:absolute;top:calc(5.17vw - 46px);left:calc(5.17vw - 2px);width:90.09vw;
    height:calc(88.79vw + 511px);padding:0;border-radius:0 0 40px;
    background-attachment:scroll;background-position:50% 100%;background-size:cover}
  .hero .ribbon{position:absolute;top:calc(28.88vw - 44px);left:9.91vw;width:79.31vw;
    height:calc(4.74vw + 63px);padding:0;margin:0;max-width:none;display:grid;place-items:center;
    background-size:contain}
  .hero .ribbon h2{position:static;width:100%;font-size:4.8vw;line-height:4.8vw;padding:0}
  .hero .col{position:absolute;top:calc(36.93vw + 36px);left:9.91vw;right:auto;width:79.31vw;margin:0}
  .hero h1{font-size:15vw;line-height:.9}
  .hero h2{font-size:20vw;line-height:18vw;margin-top:0}
  .hero .lp-cta{position:absolute;top:calc(86.21vw + 48px);left:calc(16.81vw - 20px);right:auto;
    inset-inline-start:auto;width:calc(66.38vw + 41px);max-width:none;margin:0;
    font-size:3vw;line-height:2.4vw;padding:2.5vw 2vw}
  .hero .rav{position:absolute;top:calc(90.95vw + 100px);left:7.76vw;width:84.48vw;height:369px;
    max-width:none;margin:0;padding:0;background-size:cover;background-position:50% 100%}
  .hero .play{position:absolute;top:calc(95.26vw + 98px);left:calc(87.93vw - 185px);
    width:144px;height:128px;margin:0}
  .hero .brush{position:absolute;top:calc(99.14vw + 330px);left:10px;right:10px;width:auto;
    height:177px;margin:0;padding:0;display:grid;place-items:center;background-size:cover}
  .hero .brush h2{position:static;width:92%;font-size:4.4vw;line-height:35.2px}

  .sec{padding:0}
  .sec .num{display:none}
  .sec p{font-size:2.5vw;line-height:3.75vw;margin-top:2vw}
  .sec h2{font-size:6vw;line-height:5.4vw}
  .sec .lp-cta{font-size:2vw;line-height:1.6vw;padding:2vw 1.6vw}

  .sec1{height:calc(62.07vw + 65px);margin-top:53px}
  .sec1 h2{position:absolute;top:calc(21.55vw - 90px);left:calc(58.62vw + 10px);right:auto;
    width:calc(36.21vw - 63px)}
  .sec1 .in{position:absolute;top:calc(5.17vw - 2px);left:5.6vw;right:auto;width:53.02vw;padding:0}
  .sec1 .arrow{display:none}
  .sec1 .lp-cta{position:absolute;top:calc(53.88vw + 14px);left:5.6vw;right:auto;
    inset-inline-start:auto;width:53.02vw;max-width:none;margin:0}

  .sec2{height:calc(138.79vw + 27px)}
  .sec2 h2{position:absolute;top:calc(4.74vw + 29px);left:calc(5.17vw + 8px);right:auto;
    width:calc(28.45vw + 15px)}
  .sec2 .coins{position:absolute;top:calc(4.74vw + 3px);left:calc(5.17vw - 2px);width:40.52vw;
    height:calc(128.88vw + 26px);max-width:none;margin:0;padding:0;
    background-size:40.52vw auto;background-position:0% 100%}
  .sec2 .text{position:absolute;top:8.62vw;left:calc(45.69vw - 2px);right:auto;width:49.57vw;margin:0}
  .sec2 .arrow{position:absolute;top:calc(103.88vw + 26px);left:calc(49.14vw - 199px);
    width:calc(18.53vw - 2px);height:18.1vw;margin:0}
  .sec2 .lp-cta{position:absolute;top:calc(128vw + 20px);left:calc(45.69vw - 2px);right:auto;
    inset-inline-start:auto;width:49.57vw;max-width:none;margin:0}

  .poster{height:calc(60.34vw + 3px);padding:0}
  .poster .shot{position:absolute;top:calc(5.17vw - 2px);left:calc(5.17vw - 2px);width:90.09vw;
    height:calc(50.43vw + 2px);border-radius:30px}
  .poster .play{top:calc(25vw - 40px);left:calc(50% - 50px);width:100px;height:100px}

  .dark{padding:0}
  .dark .panel{left:calc(5.17vw - 2px);right:auto;width:90.09vw;padding:0;
    border-radius:0 0 40px;background-attachment:scroll}
  .band{position:absolute;left:9.91vw;right:auto;width:calc(80.17vw - 2px);height:107px;
    min-height:0;margin:0;padding:0;display:grid;place-items:center;background-size:contain}
  .band h2{position:static;width:100%;font-size:8vw;line-height:30.4px}
  .dark .lp-cta{font-size:2vw;line-height:1.6vw;padding:2vw 1.6vw}

  .wonder{height:calc(24.57vw + 199px)}
  .wonder .band{top:7.76vw}
  .wonder p{position:absolute;top:calc(7.76vw + 127px);left:7.76vw;right:auto;width:84.48vw;
    margin:0;font-size:2.5vw;line-height:2.5vw}
  .wonder .cite{font-size:1.4vw}
  .wonder .lp-cta{position:absolute;top:calc(15.95vw + 144px);left:calc(29.31vw - 35px);right:auto;
    inset-inline-start:auto;width:calc(41.38vw + 70px);max-width:none;margin:0}

  .between{height:calc(28.88vw + 206px)}
  .between .marks{position:absolute;top:calc(5.17vw - 2px);left:calc(94.83vw - 267px);
    width:269px;height:200px;margin:0}
  .between .story{position:absolute;top:calc(5.17vw + 205px);left:calc(5.17vw - 2px);right:auto;
    width:90.09vw;margin:0;font-size:2.5vw;line-height:3.75vw}

  .offer{height:calc(52.59vw + 457px)}
  .offer .l1{position:absolute;top:calc(7.33vw - 13px);left:7.76vw;right:auto;width:84.48vw;
    font-size:5vw;line-height:5vw}
  .offer .b1{top:calc(12.5vw + 7px)}
  .offer .l2{position:absolute;top:calc(12.5vw + 119px);left:20.69vw;right:auto;
    width:calc(58.62vw - 2px);font-size:2.5vw;line-height:2.5vw}
  .offer .goldname{position:absolute;top:calc(17.24vw + 127px);left:7.76vw;right:auto;
    width:84.48vw;margin:0;font-size:7vw;line-height:7vw}
  .offer .l3{position:absolute;top:calc(24.14vw + 133px);left:calc(18.1vw - 2px);right:auto;
    width:64.22vw;font-size:2.5vw;line-height:2.5vw}
  .offer .b3{top:calc(31.9vw + 135px)}
  .offer .l4{position:absolute;top:calc(31.9vw + 231px);left:calc(16.81vw + 2px);right:auto;
    width:65.95vw;font-size:5vw;line-height:40px}
  .offer .lp-cta{position:absolute;top:calc(44vw + 300px);left:calc(29.31vw - 35px);right:auto;
    inset-inline-start:auto;width:calc(41.38vw + 70px);max-width:none;margin:0}
  .offer .photo{position:absolute;top:calc(46vw + 360px);left:calc(50% - 13.7vw);
    width:27.5vw;height:26.4vw;margin:0}

  .scroll{height:calc(1.72vw + 624px);margin-top:calc(27.2vw + 104px);padding:0;background:none}
  .scroll .kelaf{display:block}
  .scroll .ktop{top:-6.5vw;left:1.5vw;right:1.5vw;width:auto;height:6.5vw;background-size:100% 100%}
  .scroll .kmid{top:-.5vw;left:2vw;right:2vw;width:auto;height:calc(1.72vw + 610px);padding:0;
    background-size:100% 100%;background-repeat:no-repeat}
  .scroll .kbot{top:calc(1.22vw + 604px);left:1.5vw;right:1.5vw;width:auto;height:6.5vw;
    background-size:100% 100%}
  .scroll .in{position:absolute;top:calc(98px - 13.79vw);left:18.1vw;right:18.1vw;width:auto;max-width:none;
    margin:0;padding:0}
  .scroll h2{font-size:5vw;line-height:33.6px}
  .scroll .sub{font-size:2.5vw;line-height:2.5vw;margin-top:6px}
  .scroll .ways{margin-top:6px;gap:2vw}
  .scroll .ways .lp-cta{width:100%;max-width:none;font-size:3vw;line-height:2.4vw;padding:2.6vw 1.4vw}
  .scroll .ways .row{flex-direction:row;gap:2vw;width:100%}
  .scroll .ways .row .lp-cta{width:calc(50% - 1vw);font-size:2vw;line-height:1.6vw}
  .scroll .rule{width:100%;margin:2vw auto 0}
  .scroll .rule .orn{width:12vw;height:4vw;margin:0 2vw}
  .scroll .lead{font-size:1.5vw;line-height:1.5vw;margin-top:2vw}
  .scroll form{margin-top:1vw}
  .scroll .fields{grid-template-columns:repeat(3,1fr);gap:1.5vw;width:100%;margin:0}
  .scroll input{min-height:7vw;font-size:2vw}
  .scroll .send{width:100%;margin-top:1.5vw;font-size:2vw;line-height:1.6vw;padding:1.8vw 1.4vw}
}
/* ── last residuals, measured against the original ────────────────────────── */
@media(max-width:1024px){
  /* the caption sits below the brush's centre on the original */
  .hero .brush h2{position:relative;top:16px}
  /* fixed spacing here keeps the form's flow stable across the band */
  .scroll .rule{margin:20px auto 0}
  .scroll .lead{margin-top:34px}
}
@media(max-width:767px){
  .between{height:329px}
  .scroll .rule{margin:14px auto 0}
  .scroll .lead{margin-top:18px}
}
/* ── phone section heights, least-squares fitted at 360/390/414/430 ──────────
   The original's phone sections shrink as the screen widens (the copy reflows
   into fewer lines); the hero is the exception — it tracks viewport HEIGHT.
   ─────────────────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  .hero{height:calc(93vh - 9px)}
  .sec1{height:calc(937px - 76.44vw)}
  .sec2{height:calc(1489px - 87.41vw)}
  .poster{height:55.58vw}
  .wonder{height:calc(342px - 9.63vw)}
  .between{height:calc(363px - 6.14vw)}
  .offer{height:calc(1045px - 112.76vw)}
  .scroll{margin-top:calc(51.38vw - 84px);height:calc(840px - 25.51vw)}
}
@media(min-width:768px) and (max-width:1024px){
  /* the caption is inset inside the brush stroke, not the full width of it */
  .hero .ribbon h2{width:91.3%}
}
@media(max-width:767px){
  .hero .ribbon h2{width:89.6%}
}
@media(min-width:768px) and (max-width:1024px){
  .band h2{width:96.1%}
}
@media(max-width:767px){
  .band h2{width:94.5%}
}
/* Above ~1600px the wonder paragraph reflows into fewer lines, so that section
   stops growing at the rate it does below — measured 487px at 1600 and 509 at
   1920, against 554 from the single linear fit. */
@media(min-width:1601px){
  .wonder{height:calc(6.9vw + 377px)}
}