.mi-hero{--cream:#FAF8F2;--ink:#161513;--amber:#EF9F27;--amber-deep:#C9821A;position:relative;width:100%;overflow:hidden;padding-top:var(--header-h,72px);font-family:'Schibsted Grotesk',system-ui,sans-serif;color:var(--ink);background:radial-gradient(60% 55% at 88% 12%,oklch(0.96 0.04 75) 0%,transparent 70%),radial-gradient(50% 50% at 8% 95%,oklch(0.955 0.02 262) 0%,transparent 70%),radial-gradient(40% 40% at 60% 100%,oklch(0.965 0.025 150 / .7) 0%,transparent 70%),var(--cream)}
.mi-hero a{color:var(--amber-deep);text-decoration:none}.mi-hero a:hover{color:var(--ink)}
.mi-hero__wrap{position:relative;width:min(100% - 2*var(--gutter,40px),var(--container-max,1200px));margin-inline:auto}
.mi-hero__inner{position:absolute;left:0;top:0;width:1280px;height:760px;transform-origin:0 0}
/* the first frame (hero.js): the stage waits, hidden, until chapter 1's pictures are decoded, then fades in */
.mi-hero__inner.mi-wait>.mi-layer{opacity:0!important}
/* …and a first visit's rehearsal, while it waits: the film's first-appearance moments drawn once, the layers grouped at .2% (invisible) */
.mi-rh__g{position:absolute;inset:0;opacity:.002;pointer-events:none}
.mi-hero__inner.mi-in>.mi-layer{transition:opacity .45s cubic-bezier(.2,.8,.2,1)}
.mi-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--cream)}
.mi-aurora__gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.mi-aurora::after{content:'';position:absolute;inset:0;opacity:var(--pulse-after,1);background:radial-gradient(60% 55% at 88% 12%,oklch(0.96 0.04 75) 0%,transparent 70%),radial-gradient(42% 44% at 72% 104%,oklch(0.965 0.03 150 / .75) 0%,transparent 70%);-webkit-mask-image:linear-gradient(74deg,transparent 46%,#000 68%);mask-image:linear-gradient(74deg,transparent 46%,#000 68%)}
.mi-hero--aurora .mi-copy__title{color:#fff}
.mi-hero--aurora .mi-copy__eyebrow{color:#7CF2DF}
.mi-hero--aurora .mi-copy__sub{color:rgba(255,255,255,.76)}
.mi-hero--aurora a.mi-copy__cta{background:#fff;color:#0A1014}
.mi-hero--aurora a.mi-copy__cta:hover{background:#eae5da;color:#0A1014}
.mi-copy{position:absolute;left:0;top:0;bottom:0;width:520px;display:flex;flex-direction:column;justify-content:center;gap:22px;z-index:7}
.mi-copy__eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep)}
.mi-copy__title{font-size:72px;line-height:1.04;font-weight:700;letter-spacing:-.03em;margin:0;text-wrap:pretty}
.mi-copy__title strong{font-weight:800}
.mi-copy__sub{font-size:20px;line-height:1.5;font-weight:400;color:#5c5750;margin:0;max-width:450px;text-wrap:pretty}
.mi-hero--aurora .mi-copy__sub{color:#fff}
.mi-hero a.mi-copy__cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;height:54px;padding:0 26px;border-radius:12px;background:var(--ink);color:var(--cream);font-size:16px;font-weight:600}
.mi-hero a.mi-copy__cta:hover{color:var(--cream);background:#2a2824}
.mi-hero.mi-hero--aurora a.mi-copy__cta{background:#fff;color:#0A1014;box-shadow:0 14px 34px -14px rgba(0,0,0,.65)}
.mi-hero.mi-hero--aurora a.mi-copy__cta:hover{background:#eae5da;color:#0A1014}
.mi-floor{position:absolute;width:420px;height:70px;border-radius:50%;background:radial-gradient(closest-side,rgba(22,21,19,.22),rgba(22,21,19,0));filter:blur(14px);z-index:1;pointer-events:none}
.mi-layer{position:absolute;inset:0;pointer-events:none}
.mi-layer--back{z-index:1}.mi-layer--confetti{z-index:2;perspective:900px}.mi-layer--phone{z-index:3}.mi-layer--front{z-index:5}.mi-layer--fx{z-index:auto}
.mi-confetti-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.mi-confetti-cv{position:absolute;left:0;top:0;display:block;pointer-events:none}
.mi-card{position:absolute;background:#fff;border-radius:18px;box-shadow:0 30px 70px -18px rgba(22,21,19,.18),0 2px 6px rgba(22,21,19,.05);will-change:transform,opacity;transform-origin:50% 50%}
.mi-card img{display:block;width:100%;height:auto;border-radius:inherit}
.mi-card__dim{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.mi-card--action{display:flex;align-items:center;gap:16px;box-sizing:border-box;padding:12px 24px 12px 14px;border-radius:999px;background:rgba(255,255,255,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.85);font:600 21px/1.1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.01em;color:#161513;white-space:nowrap;box-shadow:0 26px 54px -18px rgba(22,21,19,.22),0 1px 3px rgba(22,21,19,.06)}
.mi-card__icon{width:58px;height:58px;flex:none;border-radius:50%;background:linear-gradient(180deg,#d5eee2,#f3faf6)}.mi-card__icon svg{width:100%;height:100%;display:block;overflow:visible}
.mi-card__label{flex:1;min-width:0}
.mi-card__chev{width:9px;height:9px;flex:none;border-right:2px solid #7a736a;border-bottom:2px solid #7a736a;transform:rotate(-45deg);margin-right:2px}
.mi-card__ring{position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:50%;border:2px solid rgba(22,21,19,.55);opacity:0;pointer-events:none;transform:translate(-50%,-50%)}
.mi-card__pad{position:absolute;background:rgba(22,21,19,1);opacity:0;pointer-events:none;mix-blend-mode:multiply}
.mi-saved{position:absolute;inset:0;z-index:6;display:grid;place-items:center;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(44,44,52,.64),rgba(18,18,24,.66))}
.mi-saved__g{display:flex;flex-direction:column;align-items:center;gap:26px;color:#fff;transform-origin:50% 50%}
.mi-saved__icon{position:relative;width:150px;height:150px}
.mi-saved__flower{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:50% 50%;will-change:transform;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.mi-saved__disc{position:absolute;inset:10%;border-radius:50%;background:rgba(18,18,24,1);opacity:0}
.mi-saved__icon svg{position:absolute;inset:18%;width:64%;height:64%;display:block;opacity:0;transform-origin:50% 50%;filter:drop-shadow(0 0 10px rgba(185,240,106,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.mi-saved__label{font-size:34px;font-weight:600;letter-spacing:.01em}
.mi-saved__draw{stroke-dasharray:34}
.mi-press{position:absolute;z-index:1;opacity:0;background-repeat:no-repeat;transform-origin:50% 50%;will-change:transform;pointer-events:none}
.mi-press__cover{position:absolute;z-index:1;opacity:0;pointer-events:none}
.mi-press__ring{position:absolute;z-index:1;width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(22,21,19,.12),0 0 24px rgba(255,255,255,.5);opacity:0;pointer-events:none}
.mi-appicon{position:absolute;z-index:2;will-change:transform,opacity;transform-origin:30% 30%}
.mi-appicon__tile{position:absolute;inset:0;border-radius:23%;background:#fff;overflow:hidden;box-shadow:0 22px 46px -14px rgba(22,21,19,.34),0 2px 6px rgba(22,21,19,.08)}
.mi-appicon__spin{position:absolute;inset:6%;width:88%;height:88%;display:block;transform-origin:50% 50%;will-change:transform}
.mi-appicon__shade{position:absolute;inset:0;background:rgba(18,18,24,.92);opacity:0}
.mi-appicon__check{position:absolute;left:50%;top:50%;width:52%;height:52%;opacity:0;transform-origin:50% 50%}
.mi-appicon__check svg{width:100%;height:100%;display:block}
.mi-card--back{transform-origin:100% 50%;box-shadow:0 30px 60px -20px rgba(22,21,19,.16)}
.mi-card--glass{background:rgba(255,255,255,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7)}
.mi-card--glass img{opacity:.92}
.mi-phone{position:absolute;will-change:auto}
.mi-phone__glow{position:absolute;inset:1.2% 2.4%;z-index:0;border-radius:44px;pointer-events:none;opacity:0;box-shadow:0 0 18px 4px rgba(255,255,255,.95),0 0 60px 18px rgba(255,255,255,.7),0 0 120px 40px rgba(255,255,255,.35)}
.mi-phone__bezel{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;display:block}
.mi-screen{position:absolute;overflow:hidden;background:#000;z-index:1;box-shadow:0 0 0 3px #07090c}
/* black behind the display: iOS sheets recede onto black, and the bezel PNG's soft inner lip blends onto black (like a real display border) instead of letting the page show through as a bright line in the dark scenes */
.mi-screen img{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform,opacity}
.mi-dim{position:absolute;inset:0;background:linear-gradient(180deg,oklch(0.26 0.06 290/.6),oklch(0.24 0.06 170/.6));opacity:0}
.mi-edge{position:absolute;inset:0;z-index:7;border-radius:inherit;pointer-events:none;opacity:0}
.mi-edge--a{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28),inset 24px 0 46px -14px oklch(0.80 0.15 165),inset -24px 0 46px -14px oklch(0.66 0.17 300),inset 0 -28px 52px -20px oklch(0.80 0.15 165),inset 0 28px 52px -24px oklch(0.66 0.17 300)}
.mi-edge--b{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28),inset 24px 0 46px -14px oklch(0.66 0.17 300),inset -24px 0 46px -14px oklch(0.80 0.15 165),inset 0 -28px 52px -20px oklch(0.66 0.17 300),inset 0 28px 52px -24px oklch(0.80 0.15 165)}
.mi-glint{position:absolute;z-index:3;pointer-events:none;opacity:0;transform-origin:50% 50%}.mi-glint svg{width:100%;height:100%;display:block;overflow:visible}
.mi-tap{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(239,159,39,.35);box-shadow:0 0 0 2px rgba(239,159,39,.5);opacity:0;transform:scale(.4)}
.mi-modal{position:absolute;left:50%;top:50%;width:222px;box-sizing:border-box;padding:26px 20px 22px;gap:10px;border-radius:22px;background:#fff;box-shadow:0 30px 60px -20px rgba(22,21,19,.35);text-align:center;opacity:0;z-index:3;display:flex;flex-direction:column;align-items:center}
.mi-ring{--cr:151;--cg:196;--cb:89;--rr:0deg;width:64px;height:64px;margin-bottom:4px;border-radius:50%;position:relative;flex:none;display:grid;place-items:center;color:#4F7A21;background:rgb(var(--cr) var(--cg) var(--cb)/.04)}
.mi-ring::before{content:"";position:absolute;inset:0;border-radius:50%;padding:2px;pointer-events:none;transform:rotate(var(--rr));background:conic-gradient(from 0deg,rgb(var(--cr) var(--cg) var(--cb)/.85),rgb(var(--cr) var(--cg) var(--cb)/.10) 50%,rgb(var(--cr) var(--cg) var(--cb)/.85));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.mi-ring svg{width:27px;height:27px;display:block}
.mi-ring__check{fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22}
.mi-modal__accent{font-size:12.5px;font-weight:600;color:#DA7C27;letter-spacing:-.01em;margin-top:8px}
.mi-modal__notes{margin-top:10px;display:flex;flex-direction:column;gap:7px;max-width:190px}
.mi-modal__btn{margin-top:18px;display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid rgba(20,16,12,.14);border-radius:100px;padding:8px 14px 8px 11px;font-size:10.5px;font-weight:500;color:#33302c}
.mi-modal__title{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0}
.mi-modal__body{font-size:13px;line-height:1.45;color:#5c5750;margin:0}
.mi-popout{position:absolute;border-radius:14px;background-repeat:no-repeat;opacity:0;z-index:4;will-change:transform,opacity;box-shadow:0 0 0 rgba(22,21,19,0)}
.mi-star{position:absolute;will-change:transform,opacity,filter;pointer-events:none;transform-origin:50% 50%}
.mi-star__spin{width:100%;height:100%;animation:miFloat var(--dur,6s) ease-in-out infinite alternate,miSpin var(--spin,18s) linear infinite}
.mi-star__spin svg{display:block;width:100%;height:100%;overflow:visible}
.mi-star__img,.c3-alt>img{display:block;width:100%;height:100%;object-fit:contain}
@keyframes miFloat{from{translate:0 -4px}to{translate:2px 4px}}
@keyframes miSpin{from{rotate:0deg}to{rotate:360deg}}
/* reduced motion: the film is one still (hero.js STILL), its stars held where they start */
@media (prefers-reduced-motion:reduce){.mi-star__spin{animation-play-state:paused!important}}
.mi-confetti{position:absolute;left:0;top:0;will-change:transform,opacity;pointer-events:none;border-radius:1px;transform-origin:50% 50%}

.mi-status{position:absolute;left:0;top:0;width:402px;height:54px;transform-origin:0 0;z-index:6;pointer-events:none;box-sizing:border-box;display:flex;align-items:center;color:#0B0D12;font-family:'Schibsted Grotesk',system-ui,sans-serif}
.mi-status[data-tint="light"]{color:#fff}
.mi-status__time{width:138px;text-align:center;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1;padding-top:3px}
.mi-status__right{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:7px;padding-right:27px}
.mi-status svg{display:block}
.mi-hw{position:absolute;left:0;top:0;width:402px;height:54px;transform-origin:0 0;z-index:9;pointer-events:none}
.mi-status__island{position:absolute;left:50%;top:11px;width:125px;height:37px;margin-left:-62.5px;border-radius:19px;background:#07090c}
/* phones (≤ 760 px): hero.js fitPhone crops the stage around the phone and places the copy above it, in stage px (so
   these sizes are × the crop, ≈ .8). What the film puts behind the phone (the card stacks, the Promote card) stays off;
   the stars, the pulse, the celebration and the panorama stay (it opens evenly out of both sides: index.html) */
@media (max-width:760px){
.mi-hero__wrap{width:100%}
.mi-copy{top:var(--cy,0px);left:var(--cx,0px);bottom:auto;width:var(--cw,520px);justify-content:flex-start;gap:24px}
.mi-copy__title{font-size:62px;line-height:1;letter-spacing:-.04em}
.mi-copy__sub{font-size:21px;max-width:none}
.mi-hero a.mi-copy__cta{height:60px;padding:0 30px;border-radius:15px;font-size:20px}
.mi-aurora::after{display:none}
.mi-layer--back .mi-card,.mi-layer--back>.mi-card__ring,.c3-pr{visibility:hidden!important}
.c3-band__off{display:none!important}
}