/* boonvid — cinematic scroll-driven hero (v2: real macOS / Safari / boonvid screenshots inside the physical MacBook). */

/* ---------- section / stage ---------- */
.chero { position: relative; height: 800vh; }
.chero-stage { position: sticky; top: 72px; height: calc(100vh - 72px); overflow: hidden; background: var(--white); isolation: isolate; }

/* ---------- environment (day + night, same room) ---------- */
.chero-env { position: absolute; left: 0; top: 0; will-change: transform; --night: 0; --warm: 0; --cool: 0; }
.chero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.chero-img.is-night { opacity: var(--night); transition: opacity 1.1s var(--ease); }
.chero-tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; transition: opacity 1.1s var(--ease); }
.chero-tint-warm { background: linear-gradient(200deg, #ffb35c 0%, #ff9a3c 45%, transparent 100%); opacity: var(--warm); }
.chero-tint-cool { background: linear-gradient(160deg, #9fc9ff 0%, #cfe6ff 50%, transparent 100%); opacity: var(--cool); }

/* ---------- weather (exterior only; time of day always has priority) ----------
   Only the main window (right) gets weather: a small box over the glass (photo coords x 79–100 %, y 0–58 %) masked
   by assets/hero/wx-mask.png (derived from the photo: lamp shade cut out, left/bottom edges feathered). Cheap: one
   small composited layer, no full-frame masks. */
.chero-wx { position: absolute; inset: 0; pointer-events: none; --haze: 0; --diffuse: 0; --rain: 0; }
.wx-win { position: absolute; overflow: hidden; }
.wx-main { left: 79%; top: 0; width: 21%; height: 58%; -webkit-mask-image: url(../assets/hero/wx-mask.png); mask-image: url(../assets/hero/wx-mask.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.wx-diffuse { position: absolute; inset: 0; background: #cfd6df; opacity: var(--diffuse); transition: opacity 1.1s var(--ease); }
.wx-haze { position: absolute; inset: 0; background: linear-gradient(180deg, #d9e0e8 0%, #e3e8ee 55%, #eaedf1 100%); opacity: var(--haze); transition: opacity 1.1s var(--ease); }
.wx-drops { position: absolute; inset: 0; opacity: calc(var(--rain) * .5); transition: opacity 1.1s var(--ease);
  background-image: radial-gradient(circle at 40% 35%, rgba(255,255,255,.7) 0 .8px, rgba(50,60,72,.28) 1.4px, transparent 2.1px), radial-gradient(circle at 60% 62%, rgba(255,255,255,.55) 0 .7px, rgba(50,60,72,.22) 1.2px, transparent 1.8px), radial-gradient(circle at 25% 70%, rgba(255,255,255,.5) 0 .6px, rgba(50,60,72,.18) 1px, transparent 1.6px);
  background-size: 37px 43px, 53px 61px, 71px 83px; background-position: 0 0, 17px 9px, 31px 27px; }
.wx-streaks { position: absolute; inset: 0; opacity: calc(var(--rain) * .32); transition: opacity 1.1s var(--ease);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='160'><g stroke='white' stroke-width='1' stroke-linecap='round' opacity='.8'><line x1='14' y1='12' x2='14' y2='52'/><line x1='47' y1='70' x2='47' y2='96'/><line x1='79' y1='118' x2='79' y2='150'/><line x1='31' y1='128' x2='31' y2='142'/><line x1='62' y1='20' x2='62' y2='32'/></g></svg>");
  background-size: 96px 160px; }
.chero-stage[data-wx="rain"] .wx-streaks { animation: wxstreak 3.6s linear infinite; }
@keyframes wxstreak { from { background-position: 0 0; } to { background-position: 0 160px; } }
.chero-stage[data-wx="cloudy"] .chero-wx { --haze: .42; --diffuse: .08; }
.chero-stage[data-wx="rain"]   .chero-wx { --haze: .50; --diffuse: .11; --rain: 1; }
.chero-stage[data-wx="breeze"] .chero-wx { --haze: .09; }
.chero-stage[data-wx="breeze"] .wx-haze { background-size: 300% 100%; animation: wxdrift 90s linear infinite alternate; }
@keyframes wxdrift { from { background-position: 0% 0; } to { background-position: 100% 0; } }
/* night: darker haze, weaker drops, the same restraint */
.chero-stage.is-night .wx-haze { background: linear-gradient(180deg, #1f2733 0%, #1b222d 60%, #171d27 100%); }
.chero-stage.is-night .wx-diffuse { background: #3a4452; }
.chero-stage.is-night[data-wx="cloudy"] .chero-wx { --haze: .38; --diffuse: .07; }
.chero-stage.is-night[data-wx="rain"]   .chero-wx { --haze: .44; --diffuse: .09; --rain: .55; }
@media (prefers-reduced-motion: reduce) { .wx-streaks, .wx-haze { animation: none !important; } }

/* ---------- the MacBook display ---------- */
.chero-screen-clip { position: absolute; overflow: hidden; border-radius: 2px; background: #000; transform: translateZ(0); }
.chero-frame { position: absolute; overflow: hidden; background: #000; transform-origin: 0 0; will-change: transform; }
.scr { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.scr img { position: absolute; inset: 0; width: 100%; height: 100%; }
#scr-desk { opacity: 1; }
#scr-safari { clip-path: inset(8.9% 11.25% 11.3% 11.45% round 1.2%); transform-origin: 10.6% 96.5%; will-change: transform, opacity; }
#scr-safari-bar { clip-path: inset(0 0 96.4% 0); }
.chero-stage.is-night .chero-frame { filter: brightness(.92); }

/* interaction layer — 1555 × 1012 screenshot pixels, scaled with the frame */
.fui { position: absolute; left: 0; top: 0; width: 1555px; height: 1012px; font-family: var(--sans); color: #1d1d1f; pointer-events: none; }
.fui > * { position: absolute; opacity: 0; }
.fui .on { opacity: 1; }
/* Safari address field while typing */
.ui-url { left: 538px; top: 108px; width: 483px; height: 36px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: flex-start; padding-left: 32px; font-size: 15px; color: #1d1d1f; }
.ui-caret { width: 1.5px; height: 16px; background: #1d1d1f; margin-left: 1px; animation: ui-caret 1s steps(2) infinite; }
@keyframes ui-caret { 50% { opacity: 0; } }
/* pasted script */
.ui-script { left: 296px; top: 530px; width: 940px; height: 180px; background: #fff; font-size: 16px; line-height: 26px; color: #1d1d1f; padding: 2px 6px; overflow: hidden; }
.ui-script span { display: block; opacity: 0; transform: translateY(3px); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.ui-script span.on { opacity: 1; transform: none; }
.ui-wc { left: 1200px; top: 700px; width: 80px; height: 24px; background: #fff; text-align: right; font-size: 13px; color: #6e6e73; line-height: 24px; }
/* enabled buttons rendered with the site's real button style */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; font-size: 15px; gap: 8px; border-radius: 999px; background: #1d1d1f; color: #fff; border: 1px solid #1d1d1f; font-weight: 600; text-shadow: none; }
.ui-btn::after { content: "→"; font-weight: 500; }
.ui-btn.hover { background: #000; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.ui-btn.press { transform: scale(.97); }
#ui-continue { left: 1160px; top: 756px; width: 130px; }
#ui-next1 { left: 1162px; top: 793px; width: 125px; height: 56px; font-size: 17px; }
/* desktop file + upload state */
.ui-file { left: 40px; top: 300px; width: 96px; display: grid; justify-items: center; gap: 6px; font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); text-align: center; line-height: 1.25; will-change: transform; }
.ui-file i { width: 58px; height: 70px; border-radius: 7px; background: linear-gradient(180deg, #fff, #e9e9ee); box-shadow: 0 2px 8px rgba(0,0,0,.3); position: relative; }
.ui-file i::before { content: ""; position: absolute; left: 15px; right: 15px; top: 24px; height: 20px; background: repeating-linear-gradient(90deg, #1f7ae0 0 3px, transparent 3px 6px); border-radius: 2px; }
.ui-file i::after { content: "MP3"; position: absolute; left: 0; right: 0; bottom: 7px; font-size: 10px; font-weight: 700; color: #6e6e73; text-align: center; }
.ui-file.drag { transform: scale(.94); opacity: .92; }
.ui-dropfill { left: 312px; top: 579px; width: 973px; height: 173px; border-radius: 20px; background: #eef5ff; border: 1.5px solid #1f7ae0; display: grid; place-items: center; align-content: center; gap: 6px; font-size: 15px; color: #6e6e73; }
.ui-dropfill b { color: #1d1d1f; font-size: 17px; font-weight: 600; }
.ui-fileico { width: 44px; height: 44px; border-radius: 50%; background: #1f7ae0; position: relative; margin-bottom: 6px; }
.ui-fileico::after { content: ""; position: absolute; left: 15px; top: 12px; width: 10px; height: 16px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); }
.ui-dropfill.over { background: #e3efff; }
/* look page: real screenshot scrolled, continuation rendered with the product's real components */
.ui-lookscroll { left: 180px; top: 228px; width: 1198px; height: 660px; overflow: hidden; clip-path: inset(0 round 0 0 12px 12px); }
.ui-lookpage { position: absolute; left: -180px; top: -228px; width: 1555px; will-change: transform; }
.ui-lookpage > img { display: block; width: 1555px; height: 1012px; }
.ui-pagefill { position: absolute; left: 0; top: 878px; width: 1555px; height: 900px; background: #fff; }
.ui-cardcont { position: absolute; left: 270px; top: 878px; width: 1060px; background: #fff; border-left: 1px solid #e8e8ed; border-right: 1px solid #e8e8ed; border-bottom: 1px solid #e8e8ed; border-radius: 0 0 26px 26px; padding: 10px 40px 40px; display: grid; gap: 22px; }
.ui-cardcont fieldset { border: 1px solid #e8e8ed; border-radius: 18px; padding: 18px 22px 20px; display: grid; gap: 14px; }
.ui-cardcont legend { padding: 0 8px; font-weight: 600; font-size: 16px; }
.ui-cardcont .seg { display: inline-flex; gap: 4px; padding: 4px; background: #f5f5f7; border-radius: 999px; }
.ui-cardcont .seg label { position: relative; } .ui-cardcont .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-cardcont .seg span { display: inline-block; padding: 10px 20px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #6e6e73; transition: all .25s var(--ease); }
.ui-cardcont .seg label.on span { background: #1d1d1f; color: #fff; box-shadow: none; }
.ui-cardcont .fine { font-size: 14px; color: #a1a1a6; }
.ui-cardcont .file-inline { color: #1f7ae0; font-size: 15px; }
.ui-cardcont .panel-nav { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid #e8e8ed; }
.ui-cardcont .btn { padding: 14px 26px; font-size: 17px; }
.ui-cardcont .btn.btn-ghost { background: #fff; color: #1d1d1f; border-color: #e8e8ed; }
.ui-cardcont .btn.hover { background: #000; box-shadow: 0 8px 22px rgba(0,0,0,.18); } .ui-cardcont .btn.press { transform: scale(.97); }
/* click feedback ring on raster controls */
.ui-ring { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(31,122,224,.9); transform: translate(-50%,-50%) scale(.4); pointer-events: none; }
.ui-ring.on { animation: ui-ring .6s var(--ease) forwards; }
@keyframes ui-ring { from { opacity: .9; transform: translate(-50%,-50%) scale(.4); } to { opacity: 0; transform: translate(-50%,-50%) scale(2.2); } }
/* generation — restrained progress in place of the Build button */
.ui-build { left: 1000px; top: 818px; width: 293px; height: 54px; border-radius: 999px; background: #f5f5f7; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 600; color: #1d1d1f; overflow: hidden; }
.ui-build::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct, 0%); background: #e6f2ff; transition: width .1s linear; }
.ui-build > * { position: relative; }
.ui-build b { font-weight: 600; color: #1f7ae0; font-variant-numeric: tabular-nums; }
.ui-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #cfe6ff; border-top-color: #1f7ae0; animation: spin .8s linear infinite; }
.ui-build.done { background: #eaf7ef; color: #0b5d1e; } .ui-build.done .ui-spin { display: none; } .ui-build.done::before { width: 0; }
/* macOS-style notification, inside the display */
.ui-notif { right: 16px; top: 46px; width: 360px; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 18px; background: rgba(245,245,247,.82); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 16px 44px rgba(0,0,0,.28), inset 0 0 0 .5px rgba(255,255,255,.7); color: #1d1d1f; transform: translateX(40px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ui-notif.on { transform: none; }
.ui-notif img { width: 44px; height: 44px; border-radius: 11px; background: #fff; padding: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.12); object-fit: contain; }
.ui-notif b { display: block; font-size: 12px; font-weight: 600; color: #6e6e73; } .ui-notif strong { display: block; font-size: 15px; font-weight: 600; } .ui-notif span { display: block; font-size: 13px; color: #4a4a4f; } .ui-notif em { display: inline-block; margin-top: 7px; font-style: normal; font-size: 13px; font-weight: 600; color: #0f4f9a; }
.ui-notif time { font-size: 12px; color: #8e8e93; }
.ui-notif.hover { background: rgba(250,250,252,.92); } .ui-notif.press { transform: scale(.985); }
/* download confirmation */
.ui-dl { left: 868px; top: 700px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #6e6e73; transition: opacity .35s; }
.ui-dl i { width: 18px; height: 18px; border-radius: 50%; background: #0b5d1e; position: relative; } .ui-dl i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
/* cursor */
.ui-cursor { left: 0; top: 0; width: 30px; height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)); transform-origin: 2px 2px; will-change: transform; opacity: 1; }

/* ---------- story copy (outside the MacBook, in negative space) ---------- */
.chero-msg { position: absolute; z-index: 3; opacity: 0; will-change: transform, opacity; color: var(--ink); }
.chero-msg::before { content: ""; position: absolute; inset: -70px -110px -80px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at 50% 46%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.66) 38%, rgba(255,255,255,.28) 58%, rgba(255,255,255,0) 74%); backdrop-filter: blur(14px) saturate(105%); -webkit-backdrop-filter: blur(14px) saturate(105%); -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 34%, rgba(0,0,0,.55) 54%, transparent 74%); mask-image: radial-gradient(ellipse at 50% 48%, #000 34%, rgba(0,0,0,.55) 54%, transparent 74%); }
/* left-side storytelling copy (day): wider feather, stronger blur and a little more light right behind the letters */
.m1::before { inset: -120px -170px -130px; background: radial-gradient(ellipse at 50% 46%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 28%, rgba(255,255,255,.56) 48%, rgba(255,255,255,.24) 64%, rgba(255,255,255,0) 80%); backdrop-filter: blur(22px) saturate(105%); -webkit-backdrop-filter: blur(22px) saturate(105%); -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 30%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.22) 66%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 48%, #000 30%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.22) 66%, transparent 80%); }
.chero-stage.is-night .m1::before { inset: -70px -110px -80px; backdrop-filter: blur(14px) saturate(105%); -webkit-backdrop-filter: blur(14px) saturate(105%); -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 34%, rgba(0,0,0,.55) 54%, transparent 74%); mask-image: radial-gradient(ellipse at 50% 48%, #000 34%, rgba(0,0,0,.55) 54%, transparent 74%); }
.chero-h1 { font-size: clamp(32px, 3.3vw, 48px); letter-spacing: -.04em; line-height: 1.04; padding-bottom: .04em; }
.chero-h2 { font-size: clamp(28px, 3vw, 44px); letter-spacing: -.035em; line-height: 1.06; }
.chero-msg .chero-lead { font-size: clamp(15px, 1.15vw, 18px); color: var(--ink); opacity: .85; max-width: 34ch; margin-top: 12px; }
.chero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.chero-cta .btn { padding: 12px 20px; font-size: 15px; }
.chero-hint { font-size: 13px; color: var(--ink); opacity: .6; margin-top: 12px; }
.m1 { left: 5vw; top: 12%; width: min(390px, 26.5vw); }
.m2 { right: 5vw; top: 8%; width: min(380px, 26vw); text-align: right; }
.m2 .chero-lead { margin-left: auto; }
.m3 { left: 50%; top: 4%; transform: translateX(-50%); width: min(900px, 80vw); text-align: center; }
.m3 .chero-h2 { font-size: clamp(26px, 2.8vw, 40px); }
.m3 .chero-lead { margin-inline: auto; max-width: 64ch; margin-top: 8px; }
.chero-cap { position: absolute; z-index: 3; left: 5vw; top: 31%; width: min(260px, 17vw); transform: translateY(-50%); opacity: 0; color: var(--ink); will-change: transform, opacity; }
.chero-cap[data-cap="4"], .chero-cap[data-cap="5"] { top: 34%; }
.chero-cap::before { content: ""; position: absolute; inset: -90px -130px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.92) 0%, rgba(255,255,255,.7) 34%, rgba(255,255,255,.34) 56%, rgba(255,255,255,0) 78%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); -webkit-mask-image: radial-gradient(ellipse, #000 30%, rgba(0,0,0,.5) 54%, transparent 78%); mask-image: radial-gradient(ellipse, #000 30%, rgba(0,0,0,.5) 54%, transparent 78%); }
.chero-stage.is-night .chero-cap::before { inset: -50px -80px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); -webkit-mask-image: radial-gradient(ellipse, #000 36%, transparent 72%); mask-image: radial-gradient(ellipse, #000 36%, transparent 72%); }
.chero-cap h2 { font-size: clamp(22px, 2vw, 30px); letter-spacing: -.03em; line-height: 1.1; }
.chero-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--white) 70%, transparent) 40%, transparent 72%); }
.chero-scrollhint { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); opacity: .6; }
.chero-scrollhint i { width: 1px; height: 34px; background: linear-gradient(var(--ink), transparent); animation: chero-hint 2.2s var(--ease) infinite; }
@keyframes chero-hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* night: light copy with a soft dark support */
.chero-stage.is-night .chero-msg, .chero-stage.is-night .chero-cap { color: #f5f5f7; }
.chero-stage.is-night .chero-msg::before, .chero-stage.is-night .chero-cap::before { background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.36) 40%, rgba(0,0,0,.14) 58%, rgba(0,0,0,0) 74%); }
.chero-stage.is-night .chero-msg .chero-lead, .chero-stage.is-night .chero-hint, .chero-stage.is-night .chero-scrollhint { color: #f5f5f7; }
.chero-stage.is-night .chero-scrollhint i { background: linear-gradient(#f5f5f7, transparent); }
.chero-stage.is-night .chero-cta .btn { background: #f5f5f7; color: #0b0b0d; border-color: #f5f5f7; }
.chero-stage.is-night .chero-cta .btn.btn-ghost { background: rgba(0,0,0,.25); color: #f5f5f7; border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px); }
/* veil into the next section */
.chero-veil { position: absolute; inset: 0; z-index: 30; background: var(--white); opacity: 0; pointer-events: none; }

/* ---------- reduced motion: calm static hero ---------- */
.chero.is-static { height: auto; }
.chero.is-static .chero-stage { position: relative; height: auto; overflow: visible; display: grid; }
.chero.is-static .chero-env { position: relative; width: 100% !important; height: auto !important; left: auto !important; top: auto !important; aspect-ratio: 1672 / 941; transform: none !important; }
.chero.is-static .chero-img { position: absolute; }
.chero.is-static .chero-screen-clip { left: 33.25%; top: 25.8%; width: 33.75%; height: 41.4%; }
.chero.is-static .chero-frame { left: 0 !important; top: 1.2% !important; width: 100% !important; height: 97.6% !important; }
.chero.is-static .fui, .chero.is-static .scr:not(#scr-desk) { display: none; }
.chero.is-static .chero-msg { position: static; opacity: 1 !important; transform: none !important; width: auto; max-width: 62ch; text-align: left; margin: 36px var(--gutter) 0; }
.chero.is-static .chero-msg::before { content: none; }
.chero.is-static .m1 { margin-top: 48px; } .chero.is-static .m1 .chero-cta { justify-content: flex-start; } .chero.is-static .m1 .chero-lead { margin-inline: 0; }
.chero.is-static .m3 { margin-bottom: 64px; }
.chero.is-static .chero-cap, .chero.is-static .chero-scrollhint, .chero.is-static .chero-veil, .chero.is-static .chero-scrim { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .chero-scrim { opacity: .9; }
  .m1 { left: 50%; top: 4%; width: min(640px, 92vw); transform: translateX(-50%); text-align: center; } .m1 .chero-h1 { font-size: clamp(30px, 4.6vw, 44px); }
  .m1 .chero-lead { margin-inline: auto; font-size: 15px; max-width: 46ch; margin-top: 10px; } .m1 .chero-cta { justify-content: center; margin-top: 14px; }
  .m1 .chero-cta .btn { padding: 11px 18px; font-size: 14px; } .chero-hint { display: none; }
  .m2, .m3 { left: 50%; right: auto; top: 5%; width: min(720px, 92vw); transform: translateX(-50%); text-align: center; }
  .m2 .chero-lead, .m3 .chero-lead { margin-inline: auto; }
  .chero-msg::before { content: none; }
  .chero-cap { display: none; }
}
@media (max-width: 760px) {
  .chero { height: 620vh; }
  .chero-stage { top: 64px; height: calc(100vh - 64px); height: calc(100dvh - 64px); }   /* phones: the visible height follows Safari's chrome (dvh), vh only as fallback */
  .m1 .chero-h1 { font-size: clamp(30px, 9vw, 42px); }
  .chero-h2 { font-size: clamp(26px, 7.5vw, 36px); }
}