/* =========================================================
   MYFUNADS — ABOUT HERO (V2)
   Cinematic dark hero for pages/about.html only. Builds on
   the tokens in css/pages.css, the shared .pg-hero entrance
   ([data-enter]) and pointer tilt ([data-tilt] →
   .pg-tilt-inner). The globe and embers are drawn by
   js/about-hero.js; everything here is decorative CSS.
========================================================= */


/* =====================================================
   SECTION + BACKGROUND
===================================================== */

.pg-hero.ah-hero {
    isolation: isolate;
    padding: clamp(128px, 12vw, 164px) 0 clamp(64px, 7vw, 108px);
    color: #fff;
    background: #070505;
    border-radius: 0 0 var(--mf-radius-xl) var(--mf-radius-xl);
}

.ah-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(ellipse 46% 52% at 72% 42%, rgba(244, 123, 32, .26), transparent 70%),
        radial-gradient(ellipse 40% 40% at 8% 18%, rgba(255, 107, 79, .08), transparent 70%),
        linear-gradient(180deg, #0b0807 0%, #080605 55%, #0d0806 100%);
}

/* fine star / dust field */
.ah-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        radial-gradient(rgba(255, 255, 255, .5) .6px, transparent 1px),
        radial-gradient(rgba(255, 170, 110, .45) .7px, transparent 1.1px);
    background-size: 140px 120px, 230px 190px;
    background-position: 0 0, 60px 40px;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 60%, transparent 85%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 60%, transparent 85%);
}

/* soft vignette */
.ah-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 85% 75% at 55% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

.ah-trails {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ah-trail-glow {
    fill: none;
    stroke: #f47b20;
    stroke-width: 9;
    stroke-linecap: round;
    opacity: .08;
}

.ah-trail-core {
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.ah-trail-pulse {
    fill: none;
    stroke: #ffd2a6;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 110 1900;
    stroke-dashoffset: 0;
    opacity: 0;
}

/* glowing ground along the bottom edge */
.ah-ground {
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 0;
    width: 104%;
    height: clamp(120px, 22%, 210px);
}

.ah-ground-glints {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(90px, 16%, 160px);
    opacity: .75;
    background:
        radial-gradient(rgba(255, 160, 80, .85) .8px, transparent 1.5px) 0 0 / 23px 17px,
        radial-gradient(rgba(255, 110, 40, .6) .8px, transparent 1.4px) 9px 6px / 41px 29px;
    mask-image: linear-gradient(0deg, #000 10%, transparent 90%);
    -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 90%);
}

/* rising embers (spans created by js/about-hero.js) */
.ah-embers {
    position: absolute;
    inset: 0;
}

.ah-embers i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: #ffb37a;
    box-shadow: 0 0 6px rgba(244, 123, 32, .9);
    opacity: 0;
}


/* =====================================================
   LAYOUT
===================================================== */

.ah-grid {
    --ah-gap: clamp(20px, 3vw, 48px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    align-items: center;
    gap: var(--ah-gap);
}

.ah-copy {
    position: relative;
    z-index: 3;
    min-width: 0;
}

.ah-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.ah-title {
    margin: 26px 0 0;
    font-size: clamp(52px, 7.1vw, 112px);
    line-height: .9;
    letter-spacing: -.055em;
    font-weight: 800;
}

.ah-title > span {
    display: block;
}

.ah-title .pg-accent {
    background: linear-gradient(100deg, #ffffff 0%, #ffb27a 18%, #f47b20 55%, #ff6b2c 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.ah-lead {
    max-width: 30ch;
    margin: 26px 0 0;
    font-size: clamp(17px, 1.55vw, 22px);
    line-height: 1.42;
    color: rgba(255, 255, 255, .76);
}


/* ---- buttons ---- */

.ah-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.ah-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-height: 56px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.005em;
    text-decoration: none;
    color: #fff;
    transition:
        transform .35s var(--mf-ease),
        box-shadow .35s ease,
        border-color .3s ease,
        background .3s ease;
}

.ah-btn b {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: transform .35s var(--mf-ease);
}

.ah-btn svg {
    width: 18px;
    height: 18px;
}

.ah-btn--primary {
    padding: 6px 6px 6px 26px;
    background: linear-gradient(135deg, #ff9a52 0%, #f47b20 52%, #e2601a 100%);
    box-shadow: 0 16px 40px rgba(244, 123, 32, .38), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.ah-btn--primary b {
    background: #120c0a;
}

.ah-btn--ghost {
    padding: 6px 26px 6px 6px;
    border: 1px solid rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .04);
}

.ah-btn--ghost b {
    border: 1px solid rgba(255, 255, 255, .55);
}

.ah-btn:hover {
    transform: translateY(-2px);
}

.ah-btn--primary:hover {
    box-shadow: 0 20px 50px rgba(244, 123, 32, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.ah-btn--primary:hover b {
    transform: translateX(3px);
}

.ah-btn--ghost:hover {
    border-color: var(--mf-orange);
    background: rgba(244, 123, 32, .1);
}

.ah-btn:focus-visible {
    outline: 2px solid var(--mf-orange);
    outline-offset: 4px;
}


/* ---- metric cards ---- */

/* 2 × 2 by default; 4 in a row only where every card fits
   (see the 1340px rule below); 1 column on the smallest phones */
.ah-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 1340px) {

    /* The row may use the empty column gutter beside it (never
       the globe stage). The three number cards keep at least
       138px ("Performance" is the longest unbreakable word);
       the text card takes the width of its content. */
    .ah-metrics {
        width: calc(100% + var(--ah-gap));
        grid-template-columns: repeat(3, minmax(138px, 1fr)) minmax(0, max-content);
        gap: 8px;
    }
}

.ah-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 15px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.ah-metric svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--mf-orange);
    filter: drop-shadow(0 0 6px rgba(244, 123, 32, .45));
}

.ah-metric span {
    min-width: 0;
}

.ah-metric strong,
.ah-metric small {
    display: block;
}

.ah-metric strong {
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.1;
    letter-spacing: -.03em;
}

.ah-metric small {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255, 255, 255, .6);
}

/* the card whose value is a word ("Tracked"): more room around
   the icon and between heading and supporting line */
.ah-metric--word {
    gap: 14px;
    padding: 15px 16px;
}

.ah-metric--word strong {
    white-space: nowrap;
}

.ah-metric--word small {
    margin-top: 5px;
}


/* =====================================================
   VISUAL: GLOBE, ORBITS, CARDS
   All sizes are % of the stage, so the scene scales as
   one piece.
===================================================== */

.ah-visual {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.ah-stage {
    position: relative;
    width: min(100%, 660px);
    aspect-ratio: 1 / .94;
    margin-left: auto;
}

.ah-stage > .pg-tilt-inner {
    position: absolute;
    inset: 0;
}

.ah-globe {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    aspect-ratio: 1;
    translate: -50% -50%;
}

.ah-orbits {
    position: absolute;
    left: -9%;
    top: -4%;
    width: 118%;
    height: 108%;
    overflow: visible;
}

.ah-orbits ellipse {
    fill: none;
}

/* ---- glass cards ---- */

.ah-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px 11px 11px;
    border-radius: 16px;
    border: 1px solid rgba(244, 123, 32, .6);
    background: linear-gradient(150deg, rgba(48, 26, 16, .88), rgba(14, 9, 8, .86));
    box-shadow:
        0 0 0 1px rgba(244, 123, 32, .12),
        0 0 30px rgba(244, 123, 32, .3),
        0 22px 44px rgba(0, 0, 0, .5);
    transform: translateZ(70px);
    white-space: nowrap;
}

.ah-card-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a2a24, #120c0a);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 0 0 3px rgba(244, 123, 32, .18);
    color: #fff;
}

.ah-card-icon svg {
    width: 21px;
    height: 21px;
}

.ah-card strong,
.ah-card small {
    display: block;
}

.ah-card strong {
    font-size: 15px;
    letter-spacing: -.01em;
}

.ah-card small {
    margin-top: 2px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .7);
}

.ah-card--adv {
    left: 22%;
    top: 4%;
}

.ah-card--pub {
    right: -3%;
    top: 37%;
}

.ah-card--aud {
    left: 41%;
    top: 74%;
}

/* ---- floating creatives + avatars ---- */

.ah-thumb,
.ah-avatar {
    position: absolute;
    z-index: 2;
    display: block;
    overflow: hidden;
    border: 1.5px solid rgba(244, 123, 32, .7);
    box-shadow: 0 0 18px rgba(244, 123, 32, .35), 0 14px 30px rgba(0, 0, 0, .5);
}

.ah-thumb {
    width: 11%;
    aspect-ratio: 4 / 5;
    border-radius: 9px;
}

.ah-avatar {
    width: 5.6%;
    aspect-ratio: 5 / 6;
    border-radius: 7px;
    display: grid;
    place-items: end center;
    background: linear-gradient(160deg, #3b2a24, #15100e);
    color: #e9c7ad;
}

.ah-avatar svg {
    width: 86%;
    height: 86%;
}

/* travel / sunset creative */
.ah-thumb--sun {
    right: 9%;
    top: 3%;
    width: 13%;
    aspect-ratio: 5 / 4;
    background:
        radial-gradient(circle at 62% 46%, #fff3d6 0 9%, rgba(255, 243, 214, 0) 10%),
        linear-gradient(180deg, #ff9a52 0%, #f47b20 46%, #6e2604 100%);
    transform: translateZ(30px) rotateY(-24deg) rotate(-7deg);
}

.ah-thumb--sun::after {
    content: "";
    position: absolute;
    inset: 52% 0 0;
    background: #1b0c06;
    clip-path: polygon(0 60%, 18% 20%, 34% 55%, 52% 5%, 70% 50%, 84% 25%, 100% 55%, 100% 100%, 0 100%);
}

/* product ad creative: glossy product, headline lines, action */
.ah-thumb--product {
    left: 5%;
    top: 40%;
    width: 12%;
    background:
        linear-gradient(#fff, #fff) 16% 72% / 62% 6% no-repeat,
        linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) 16% 82% / 42% 5% no-repeat,
        radial-gradient(circle at 50% 30%, #3b2a24, #0f0a09 78%);
    transform: translateZ(40px) rotateY(22deg) rotate(-8deg);
}

.ah-thumb--product::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 14%;
    width: 46%;
    aspect-ratio: 1;
    translate: -50% 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9) 0 8%, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 40% 36%, #ffc08a, var(--mf-orange) 55%, #8a3208);
    box-shadow: 0 6px 14px rgba(244, 123, 32, .45);
}

.ah-thumb--product::after {
    content: "";
    position: absolute;
    right: 12%;
    bottom: 8%;
    width: 28%;
    height: 9%;
    border-radius: 99px;
    background: var(--mf-orange);
}

/* person / poster creative */
.ah-thumb--poster {
    right: 4%;
    top: 62%;
    width: 12%;
    display: grid;
    place-items: end center;
    background: linear-gradient(160deg, #ff8a3d, #b84a10 60%, #3a1407);
    color: #ffe2c8;
    transform: translateZ(40px) rotateY(-20deg) rotate(8deg);
}

.ah-thumb--poster svg {
    width: 90%;
    height: 82%;
}

/* video creative */
.ah-thumb--video {
    left: 28%;
    top: 61%;
    width: 8%;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #2c211d, #0f0a09);
    color: var(--mf-orange);
    transform: translateZ(20px) rotateY(16deg);
}

.ah-thumb--video svg {
    width: 46%;
    height: 46%;
}

/* distant, out-of-focus creatives for depth */
.ah-thumb--far {
    width: 5.5%;
    opacity: .55;
    filter: blur(1.2px);
    border-color: rgba(244, 123, 32, .35);
    background: linear-gradient(160deg, #6b4a3c, #1b120f);
    transform: translateZ(-30px);
}

.ah-thumb--far.f1 { left: 61%; top: 0; }
.ah-thumb--far.f2 { left: 18%; top: 19%; }

.ah-avatar.a1 { left: 16%; top: 27%; transform: translateZ(30px) rotateY(18deg); }
.ah-avatar.a2 { left: 16%; top: 51%; transform: translateZ(40px) rotateY(18deg); }
.ah-avatar.a3 { right: 21%; top: 2%; transform: translateZ(20px) rotateY(-18deg); }
.ah-avatar.a4 { right: 0; top: 13%; width: 6.6%; transform: translateZ(40px) rotateY(-26deg); }
.ah-avatar.a5 { right: 15%; top: 50%; transform: translateZ(30px) rotateY(-18deg); }

/* ---- side rail (decorative) ---- */

.ah-rail {
    position: absolute;
    z-index: 3;
    right: clamp(18px, 2.4vw, 40px);
    top: clamp(180px, 20vw, 240px);
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.ah-rail li + li {
    margin-top: 20px;
}

.ah-rail::after {
    content: "";
    display: block;
    width: 1px;
    height: 82px;
    margin: 30px 0 0 14px;
    background: linear-gradient(180deg, transparent, rgba(244, 123, 32, .85));
}

.ah-rail::before {
    content: "";
    position: absolute;
    left: 10px;
    bottom: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mf-orange);
    box-shadow: 0 0 12px rgba(244, 123, 32, .95);
}

/* only where the page margin can hold it beside the globe */
@media (min-width: 1500px) {
    .ah-rail {
        display: block;
    }
}


/* =====================================================
   MOTION (all decorative; off under reduced motion;
   paused while the hero is off-screen via [data-loop])
===================================================== */

@media (prefers-reduced-motion: no-preference) {

    .ah-visual {
        animation: ahVisualIn 1.6s var(--mf-ease) .3s backwards;
    }

    .ah-card {
        animation: ahFloat 6.5s ease-in-out infinite alternate;
    }

    .ah-card--pub {
        animation-duration: 7.5s;
        animation-delay: -2.5s;
    }

    .ah-card--aud {
        animation-duration: 6s;
        animation-delay: -4s;
    }

    .ah-thumb,
    .ah-avatar {
        animation: ahFloat 8s ease-in-out infinite alternate;
    }

    .ah-thumb:nth-child(even),
    .ah-avatar:nth-child(even) {
        animation-duration: 9.5s;
        animation-delay: -3s;
    }

    .ah-trail-pulse {
        opacity: 1;
        animation: ahPulse 7s linear infinite;
    }

    .ah-trail-pulse.p2 {
        animation-duration: 9s;
        animation-delay: -3s;
    }

    .ah-trail-pulse.p3 {
        animation-duration: 6s;
        animation-delay: -1.5s;
    }

    .ah-embers i {
        animation: ahEmber var(--d) linear var(--delay) infinite;
    }

    .ah-hero.is-paused .ah-bg *,
    .ah-hero.is-paused .ah-card,
    .ah-hero.is-paused .ah-thumb,
    .ah-hero.is-paused .ah-avatar {
        animation-play-state: paused;
    }
}

@keyframes ahVisualIn {
    from {
        opacity: 0;
        scale: .92;
    }
}

@keyframes ahFloat {
    to {
        translate: 0 -10px;
    }
}

@keyframes ahPulse {
    to {
        stroke-dashoffset: -2010;
    }
}

@keyframes ahEmber {
    0% {
        opacity: 0;
        translate: 0 0;
    }

    15% {
        opacity: .9;
    }

    100% {
        opacity: 0;
        translate: var(--drift) -320px;
    }
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 960px) {

    .ah-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .ah-lead {
        max-width: 34ch;
    }

    .ah-stage {
        width: min(100%, 580px);
        margin-inline: auto;
    }
}

@media (max-width: 640px) {

    .pg-hero.ah-hero {
        padding-top: 118px;
        border-radius: 0 0 var(--mf-radius-lg) var(--mf-radius-lg);
    }

    .ah-eyebrow {
        font-size: 10px;
        letter-spacing: .3em;
    }

    .ah-title {
        margin-top: 18px;
        font-size: clamp(46px, 14.5vw, 66px);
    }

    .ah-actions {
        gap: 10px;
    }

    .ah-btn {
        min-height: 52px;
        font-size: 14px;
    }

    .ah-btn b {
        width: 40px;
        height: 40px;
    }

    .ah-metrics {
        margin-top: 34px;
        gap: 8px;
    }

    .ah-metric {
        gap: 10px;
        padding: 12px 11px;
    }

    .ah-metric svg {
        width: 24px;
        height: 24px;
    }

    .ah-metric--word {
        gap: 11px;
        padding: 12px;
    }

    .ah-stage {
        aspect-ratio: 1 / 1.02;
    }

    .ah-card {
        gap: 8px;
        padding: 7px 12px 7px 7px;
        border-radius: 12px;
    }

    .ah-card-icon {
        width: 30px;
        height: 30px;
    }

    .ah-card-icon svg {
        width: 15px;
        height: 15px;
    }

    .ah-card strong {
        font-size: 12px;
    }

    .ah-card small {
        font-size: 9.5px;
    }

    .ah-card--adv {
        left: 2%;
        top: 3%;
    }

    .ah-card--pub {
        right: 0;
        top: 44%;
    }

    .ah-card--aud {
        left: 6%;
        top: 82%;
    }

    .ah-thumb--far,
    .ah-thumb--video,
    .ah-avatar.a2,
    .ah-avatar.a5 {
        display: none;
    }
}

/* smallest phones: one card per row, so no label wraps */
@media (max-width: 389px) {

    .ah-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =====================================================
   "SEE HOW IT WORKS" VIDEO MODAL
   Native <dialog> opened by js/about-hero.js. The dialog
   fills the viewport; its padding is the backdrop click
   area, so the panel is ~90% of the width and height.
===================================================== */

.ah-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 5vh 5vw;
    border: 0;
    overflow: hidden;
    background: transparent;
    color: #fff;
    font-family: Inter, Arial, sans-serif;
}

.ah-modal::backdrop {
    background: rgba(6, 4, 4, .74);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ah-modal-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    background:
        radial-gradient(circle at 100% 0%, rgba(244, 123, 32, .22), transparent 40%),
        linear-gradient(160deg, #1a1414, #0b0909);
    box-shadow:
        0 0 0 1px rgba(244, 123, 32, .12),
        0 40px 120px rgba(0, 0, 0, .6);
}

.ah-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 16px 16px 26px;
}

.ah-modal-title {
    margin: 0;
    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 700;
    letter-spacing: -.02em;
}

.ah-modal-close {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease;
}

.ah-modal-close svg {
    width: 20px;
    height: 20px;
}

.ah-modal-close:hover {
    border-color: var(--mf-orange);
    background: var(--mf-orange);
}

.ah-modal-close:focus-visible {
    outline: 2px solid var(--mf-orange);
    outline-offset: 3px;
}

.ah-modal-player {
    position: relative;
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
    margin: 0 16px 16px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .06);
    background:
        radial-gradient(ellipse at 50% 45%, rgba(244, 123, 32, .14), transparent 60%),
        #050404;
}

.ah-modal-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.ah-modal-video[hidden],
.ah-modal-placeholder[hidden] {
    display: none;
}

.ah-modal-placeholder {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 420px;
    padding: 24px;
    text-align: center;
}

.ah-modal-placeholder-icon {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
    border-radius: 50%;
    border: 1px solid rgba(244, 123, 32, .6);
    background: rgba(244, 123, 32, .12);
    box-shadow: 0 0 0 10px rgba(244, 123, 32, .06), 0 0 40px rgba(244, 123, 32, .3);
    color: var(--mf-orange);
}

.ah-modal-placeholder-icon svg {
    width: 30px;
    height: 30px;
    margin-left: 4px;
}

.ah-modal-placeholder strong {
    font-size: clamp(22px, 2.6vw, 32px);
    letter-spacing: -.03em;
}

.ah-modal-placeholder span:last-child,
.ah-modal-note {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .62);
}

.ah-modal-error .ah-modal-placeholder-icon svg {
    margin-left: 0;
}

.ah-modal-kicker {
    margin: 0 0 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mf-orange);
}

.ah-modal-retry {
    min-height: 44px;
    margin-top: 6px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff9a52 0%, #f47b20 52%, #e2601a 100%);
    color: #fff;
    font: 700 14px/1 Inter, Arial, sans-serif;
    cursor: pointer;
}

.ah-modal-retry:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Portrait screens: the panel hugs the 16:9 film instead of
   filling the height with black bars */
@media (orientation: portrait) {

    .ah-modal[open] {
        display: grid;
        align-content: center;
    }

    .ah-modal-panel {
        height: auto;
    }

    .ah-modal-player {
        flex: none;
        aspect-ratio: 16 / 9;
    }

    /* room for the error / "coming soon" message on small phones */
    .ah-modal-player:has(> .ah-modal-placeholder:not([hidden])) {
        min-height: 230px;
    }
}

@media (max-width: 640px) {

    .ah-modal-placeholder {
        gap: 8px;
        padding: 16px;
    }

    .ah-modal-placeholder-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 2px;
    }

    .ah-modal-placeholder-icon svg {
        width: 22px;
        height: 22px;
    }

    .ah-modal-placeholder strong {
        font-size: 19px;
    }

    .ah-modal-placeholder span:last-child,
    .ah-modal-note {
        font-size: 13px;
    }
}

/* scroll lock while open; js/about-hero.js measures the
   scrollbar so the page behind doesn't shift sideways */
html.ah-modal-open {
    overflow: hidden;
}

html.ah-modal-open body {
    padding-right: var(--ah-scrollbar, 0px);
}

@media (prefers-reduced-motion: no-preference) {

    .ah-modal[open] .ah-modal-panel {
        animation: ahModalIn .45s cubic-bezier(.16, 1, .3, 1) both;
    }

    .ah-modal[open]::backdrop {
        animation: ahModalFade .35s ease both;
    }

    .ah-modal.is-closing .ah-modal-panel {
        animation: ahModalOut .26s ease-in both;
    }

    .ah-modal.is-closing::backdrop {
        animation: ahModalFadeOut .26s ease-in both;
    }
}

@keyframes ahModalIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.96);
    }
}

@keyframes ahModalOut {
    to {
        opacity: 0;
        transform: translateY(10px) scale(.97);
    }
}

@keyframes ahModalFade {
    from {
        opacity: 0;
    }
}

@keyframes ahModalFadeOut {
    to {
        opacity: 0;
    }
}

@media (max-width: 640px) {

    .ah-modal {
        padding: 5vh 4vw;
    }

    .ah-modal-panel {
        border-radius: 22px;
    }

    .ah-modal-head {
        padding: 12px 12px 12px 18px;
    }

    .ah-modal-player {
        margin: 0 10px 10px;
        border-radius: 16px;
    }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .ah-btn,
    .ah-btn b {
        transition: none;
    }

    .ah-embers {
        display: none;
    }
}