/* Live HTML typography; only the dragon/product artwork is raster. */
.hero.approved-hero{position:relative;display:block;min-height:0;height:auto;max-height:none;aspect-ratio:1672/867;background:#09090c;overflow:hidden;padding:0;isolation:isolate;container-type:inline-size}
.approved-art{position:absolute;inset:0;overflow:hidden}
.approved-art>img,.approved-art>.melo-living-art{display:block;position:absolute;width:100%;height:108.535%;top:-8.535%;left:0;max-width:none;pointer-events:none}
.approved-art>img{clip-path:inset(8% 0 10% 42%)}
.approved-hero>[hidden],.approved-art>[hidden],.approved-hero .actions>[hidden],.melo-motion-toggle[hidden]{display:none!important}
.approved-hero .hero-copy{position:absolute;left:3.9%;top:11.6%;inset-inline-end:auto;padding:0;margin:0;max-width:none;width:43%;z-index:3;pointer-events:auto;direction:ltr;text-align:left}
.approved-hero .hero-copy>p,.approved-hero .hero-copy>h1{position:static;clip-path:none;white-space:normal;width:auto;height:auto;overflow:visible;margin:0}
.approved-hero .hero-copy .eyebrow{font:700 1.28cqw/1.4 Arial,Helvetica,sans-serif;letter-spacing:.24cqw;color:#ff264d;margin-bottom:2.2cqw}
.approved-hero .hero-copy h1,.approved-hero .hero-copy h1 em{font-family:Arial,Helvetica,sans-serif;font-size:5.65cqw;line-height:1.01;letter-spacing:-.25cqw;font-weight:900;font-style:italic;color:#fafafa;text-shadow:none}
.approved-hero .hero-copy h1 em{color:#ff1746;display:inline-block;margin-top:.25cqw}
.approved-hero .hero-copy .hero-promise{font-size:1.65cqw;line-height:1.45;font-weight:700;color:#fff;margin:2cqw 0 .85cqw;white-space:nowrap}
.approved-hero .hero-copy .intro{font-size:1.28cqw;line-height:1.65;color:#d2d1d8;max-width:none;margin:0}
.approved-hero .actions{display:flex;align-items:center;gap:1.1cqw;flex-wrap:wrap;margin-top:2.5cqw}
.approved-hero .actions>*{position:static;display:inline-flex;justify-content:center;align-items:center;pointer-events:auto;min-width:0;width:auto;height:auto;padding:1.13cqw 1.6cqw;margin:0;border:1px solid #ffffff70;background:#08090c88;color:#fff;font:700 1.02cqw/1.4 Arial,Helvetica,sans-serif;clip-path:none;border-radius:.65cqw;box-shadow:none;transition:background .2s,border-color .2s}
.approved-hero .actions>.gold{background:#f42047;border-color:#f42047;color:#fff}
.approved-hero .actions>.intro-replay{flex-basis:100%;justify-content:flex-start;padding:.65cqw 0;border:0;background:transparent;color:#bcbcc4;font-weight:400;font-size:1.05cqw}
.approved-hero .actions>*:hover{background:#24212a;border-color:#fff;color:#fff}.approved-hero .actions>.gold:hover{background:#d60e35}
.approved-hero .actions>*:focus-visible{outline:2px solid white;outline-offset:5px}
.approved-caption{position:absolute;bottom:4.4%;left:3%;right:5.3%;display:flex;justify-content:space-between;gap:20px;z-index:3;color:#e6e5eb;font:italic 500 1.05cqw/1.4 Arial,sans-serif;letter-spacing:.16cqw;pointer-events:none}
.melo-motion-toggle{position:absolute;right:16px;bottom:16px;z-index:5;width:34px;height:34px;border:1px solid #ffffff55;border-radius:50%;color:#fff;background:#09090c99;cursor:pointer}.melo-motion-toggle:focus-visible{outline:2px solid white;outline-offset:3px}
@media(max-width:700px){
.hero.approved-hero{aspect-ratio:auto;display:flex;flex-direction:column;min-height:0;height:auto}
.approved-art{position:relative;width:100%;aspect-ratio:972/780;order:0}
.approved-art>img,.approved-art>.melo-living-art{width:172.016%;height:auto;left:-72.016%;top:-9.49%}
.approved-hero .hero-copy{position:relative;inset:auto;order:1;pointer-events:auto;padding:24px 7% 44px;width:100%;background:#09090c}
.approved-hero .hero-copy .eyebrow{font-size:11px;letter-spacing:1.8px;margin-bottom:20px}
.approved-hero .hero-copy h1,.approved-hero .hero-copy h1 em{font-size:clamp(38px,10.5vw,70px);letter-spacing:-2px;line-height:1.03}
.approved-hero .hero-copy .hero-promise{font-size:18px;white-space:normal;margin:24px 0 12px}
.approved-hero .hero-copy .intro{font-size:14px;line-height:1.65}
.approved-hero .actions{gap:12px;margin-top:24px}.approved-hero .actions>*{font-size:11px;padding:14px 16px;border-radius:8px;min-height:44px}
.approved-hero .actions>.intro-replay{font-size:12px;padding:8px 0;margin-top:2px}
.approved-caption{display:none}.melo-motion-toggle{top:14px;bottom:auto}
}
@media(prefers-reduced-motion:reduce){.approved-hero .actions>*{transition:none}}

/* MELO speaks with crisp, selectable HTML text. */
.melo-greeting{position:absolute;left:54%;top:24%;z-index:2;margin:0;padding:1.15cqw 1.5cqw;min-width:15.5%;border:1px solid #ffffffb0;border-radius:1.2cqw 1.2cqw .35cqw 1.2cqw;background:#fff8f5;color:#24212a;box-shadow:0 8px 28px #0005,0 0 24px #ff264d12;font:600 1.6cqw/1.35 Arial,Helvetica,sans-serif;text-align:left;letter-spacing:-.025em;direction:ltr}
.melo-greeting strong{font-weight:800;color:#e91d43}
.melo-greeting:after{content:'';position:absolute;right:-.48cqw;bottom:1.1cqw;width:1cqw;height:1cqw;background:#fff8f5;transform:rotate(45deg);border-top:1px solid #ffffffb0;border-right:1px solid #ffffffb0}
@media(max-width:700px){.melo-greeting{left:5%;top:20%;padding:10px 14px;min-width:0;max-width:37%;border-radius:14px 14px 4px 14px;font-size:clamp(13px,3.8vw,22px)}.melo-greeting:after{right:-5px;bottom:14px;width:10px;height:10px}}

/* 160ms between words; whole sentence stays visible from .6s to 2.6s. */
.melo-word{display:inline-block;opacity:0;transform-origin:50% 80%;animation-duration:2.8s;animation-timing-function:cubic-bezier(.2,.8,.3,1);animation-iteration-count:infinite}
.melo-word:nth-of-type(1){animation-name:melo-word-one}
.melo-word:nth-of-type(2){animation-name:melo-word-two}
.melo-word:nth-of-type(3){animation-name:melo-word-three}
.melo-greeting strong.melo-word{animation-name:melo-word-four}
@keyframes melo-word-one{0%{opacity:0;transform:translateY(.25em) scale(.9)}4.286%,92.857%{opacity:1;transform:translateY(0) scale(1)}97.143%,100%{opacity:0;transform:translateY(0) scale(1)}}
@keyframes melo-word-two{0%,5.714%{opacity:0;transform:translateY(.25em) scale(.9)}10%,92.857%{opacity:1;transform:translateY(0) scale(1)}97.143%,100%{opacity:0;transform:translateY(0) scale(1)}}
@keyframes melo-word-three{0%,11.429%{opacity:0;transform:translateY(.25em) scale(.9)}15.714%,92.857%{opacity:1;transform:translateY(0) scale(1)}97.143%,100%{opacity:0;transform:translateY(0) scale(1)}}
@keyframes melo-word-four{0%,17.143%{opacity:0;transform:translateY(.25em) scale(.9)}21.429%,92.857%{opacity:1;transform:translateY(0) scale(1)}97.143%,100%{opacity:0;transform:translateY(0) scale(1)}}
.melo-paused .melo-word{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.melo-word{animation:none;opacity:1;transform:none}}