/* App promo (Home 109 / 112), approved design docs/mockups/app-promo/. Phone first: cream copy panel, then
   the poster-art panel with the decorative phone. From 601 px the two sit side by side. The promo fills its
   card edge to edge (negative margins read the parent container's --padding-* variables). Tokens only; the
   store badges are official artwork and are only sized, never restyled. The cream panel always uses black ink
   (--sloff-bg is the page black), even inside a year Look whose dark cards set ink to white. */
.sloff-app-promo{--sloff-ink:var(--sloff-bg);--sloff-text:var(--sloff-bg);--e-global-color-sloff-ink:var(--sloff-bg);--sloff-app-paper:color-mix(in srgb,var(--sloff-fest-cream) 45%,white);--sloff-app-badge-h:40px;display:flex;flex-direction:column;margin:calc(-1 * var(--padding-top, 0px)) calc(-1 * var(--padding-right, 0px)) calc(-1 * var(--padding-bottom, 0px)) calc(-1 * var(--padding-left, 0px));background:var(--sloff-app-paper);color:var(--sloff-ink);font-family:var(--sloff-font)}
.sloff-app-promo__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sloff-space-4);min-width:0;padding:30px 24px 32px;background:var(--sloff-app-paper)}
.sloff-app-promo .sloff-app-promo__icon{flex:0 0 auto;box-sizing:border-box;width:48px;height:48px;overflow:hidden;border-radius:22%}
.sloff-app-promo .sloff-app-promo__icon img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0}
.sloff-app-promo__copy{display:flex;flex-direction:column;min-width:0}
.sloff-app-promo .sloff-app-promo__eyebrow{margin:0 0 18px;color:var(--sloff-ink);font-size:var(--sloff-fs-11);font-weight:var(--sloff-fw-extrabold);line-height:1.4;letter-spacing:.13em;text-transform:uppercase}
.sloff-app-promo .sloff-app-promo__heading{max-width:10em;margin:0;color:var(--sloff-ink);font-family:var(--sloff-font);font-size:37px;font-weight:var(--sloff-fw-extrabold);line-height:1.04;letter-spacing:-.045em;text-transform:none;text-wrap:balance}
.sloff-app-promo .sloff-app-promo__text{max-width:45ch;margin:20px 0 0;color:var(--sloff-ink);font-size:var(--sloff-fs-15);font-weight:var(--sloff-fw-medium);line-height:1.6}
/* Badges: the same visible height (never under Apple's 40 px minimum). Google's PNG carries a transparent
   clear-space border (41 of 250 px on each side); the negative margin overlaps it with the gap instead of
   cropping it. The gap keeps Apple's quarter-height clear space. */
.sloff-app-promo__badges{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:24px 0 0;padding:0;list-style:none}
.sloff-app-promo__badges li{display:flex}
.sloff-app-promo .sloff-app-promo__badge{display:inline-flex;align-items:center;min-height:var(--sloff-tap-min);border-radius:var(--sloff-radius-control);text-decoration:none;transition:transform .18s ease}
.sloff-app-promo .sloff-app-promo__badge img{display:block;width:auto;max-width:none;height:var(--sloff-app-badge-h);border-radius:0}
.sloff-app-promo .sloff-app-promo__badge--play img{height:calc(var(--sloff-app-badge-h) * 250 / 168);margin:calc(var(--sloff-app-badge-h) * -41 / 168)}
.sloff-app-promo .sloff-app-promo__badge:hover{transform:translateY(-2px)}
.sloff-app-promo .sloff-app-promo__badge:focus-visible{outline:var(--sloff-focus-w) solid var(--sloff-ink);outline-offset:var(--sloff-focus-offset)}
.sloff-app-promo__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Poster art: the supplied Poster Base and bits, layered as in the approved preview. */
.sloff-app-promo__art{position:relative;isolation:isolate;height:275px;overflow:hidden;background:var(--sloff-fest-cream)}
/* Pieces arrive as <picture> (bundled brand art) or a bare <img> (the year's Look library, T56); position both. */
.sloff-app-promo__art>:is(picture,img){position:absolute;display:block;pointer-events:none}
.sloff-app-promo__art>picture img,.sloff-app-promo__art>img{display:block;height:auto;max-width:none;border-radius:0}
.sloff-app-promo__art>picture img{width:100%}
.sloff-app-promo__art>.sloff-app-promo__base{inset:0}
.sloff-app-promo__art>img.sloff-app-promo__base{width:100%}
.sloff-app-promo__art>.sloff-app-promo__base img,.sloff-app-promo__art>img.sloff-app-promo__base{height:100%;object-fit:cover;object-position:70% 40%}
.sloff-app-promo__cloud{width:90%;top:-34%;left:-24%;mix-blend-mode:multiply}
.sloff-app-promo__sun{width:90%;bottom:-55%;left:-37%;mix-blend-mode:screen}
.sloff-app-promo__arch{width:80%;top:-15%;right:-40%;mix-blend-mode:multiply}
.sloff-app-promo__wave{width:85%;right:-26%;bottom:-60%}
.sloff-app-promo__art>.sloff-app-promo__bird{z-index:2;width:17%;bottom:20%;left:12%}
.sloff-app-promo__phone{position:absolute;z-index:1;top:28px;left:52%;box-sizing:border-box;width:175px;height:344px;padding:10px;border:2px solid var(--sloff-ink);border-radius:36px;background:var(--sloff-ink);box-shadow:12px 18px 0 color-mix(in srgb,var(--sloff-ink) 13%,transparent);transform:translateX(-50%) rotate(8deg)}
.sloff-app-promo__screen{position:relative;height:100%;overflow:hidden;border-radius:25px;background:var(--sloff-app-paper)}
.sloff-app-promo__notch{position:absolute;z-index:1;top:0;left:50%;width:70px;height:16px;border-radius:0 0 12px 12px;background:var(--sloff-ink);transform:translateX(-50%)}
.sloff-app-promo__screen>.sloff-app-promo__strip{display:block;height:55px;overflow:hidden}
.sloff-app-promo__strip img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0}
.sloff-app-promo__ticket{margin:12px 10px 0;padding:14px 6px 18px;border:1px solid color-mix(in srgb,var(--sloff-ink) 20%,transparent);border-radius:10px;background:var(--sloff-app-paper);color:var(--sloff-ink);text-align:center}
.sloff-app-promo__ticket-logo{display:block;width:91px;margin:auto}
.sloff-app-promo__ticket-logo img{display:block;width:100%;height:auto;max-width:none;border-radius:0}
.sloff-app-promo__ticket-caption{display:block;margin:12px 0 8px;font-size:var(--sloff-fs-12);white-space:nowrap;font-weight:var(--sloff-fw-extrabold);line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
.sloff-app-promo__qr{display:block;width:99px;height:99px;margin:auto}
.sloff-app-promo__qr path{fill:var(--sloff-ink)}
.sloff-app-promo__ticket-title{display:block;margin-top:10px;font-size:10px;font-weight:var(--sloff-fw-bold);line-height:1.2}

/* The artist's finished art fills the panel; nothing is drawn over it. */
.sloff-app-promo__art--image{background:var(--sloff-ink)}
.sloff-app-promo__art--image picture{display:block;width:100%;height:100%}
.sloff-app-promo__art--image .sloff-app-promo__art-img{position:static;display:block;width:100%;height:100%;max-width:none;aspect-ratio:4 / 3;object-fit:cover;object-position:50% 50%;border-radius:0}
@media (min-width:601px){
.sloff-app-promo{--sloff-app-badge-h:42px}
.sloff-app-promo.sloff-app-promo--phone{display:grid;grid-template-columns:58% 42%;min-height:380px}
.sloff-app-promo__body{justify-content:center;padding:40px 32px}
.sloff-app-promo .sloff-app-promo__eyebrow{font-size:var(--sloff-fs-13);margin-bottom:23px}
.sloff-app-promo .sloff-app-promo__heading{font-size:45px}
.sloff-app-promo .sloff-app-promo__text{margin-top:24px;font-size:var(--sloff-fs-16);line-height:1.65}
.sloff-app-promo__badges{margin-top:28px}
.sloff-app-promo__art{height:auto}
.sloff-app-promo__cloud{width:110%;top:-20%;left:-35%}
.sloff-app-promo__sun{width:97%;bottom:-38%;left:-38%}
.sloff-app-promo__arch{width:100%;top:9%;right:-48%}
.sloff-app-promo__wave{width:95%;bottom:-30%}
.sloff-app-promo__art>.sloff-app-promo__bird{width:18%;bottom:24%;left:8%}
.sloff-app-promo__phone{top:65px;left:50%;width:190px;height:380px;transform:translateX(-47%) rotate(8deg)}
.sloff-app-promo__screen>.sloff-app-promo__strip{height:70px}
.sloff-app-promo__ticket{margin:12px 10px 0;padding:12px 7px}
.sloff-app-promo__ticket-logo{width:95px}
.sloff-app-promo__ticket-caption{font-size:var(--sloff-fs-13)}
.sloff-app-promo__qr{width:108px;height:108px}
}
@media (min-width:1001px){
.sloff-app-promo{--sloff-app-badge-h:48px}
.sloff-app-promo.sloff-app-promo--phone{grid-template-columns:57% 43%;min-height:420px}
.sloff-app-promo__body{padding:56px 54px 52px}
.sloff-app-promo .sloff-app-promo__heading{font-size:clamp(36px,4.2vw,64px)}
.sloff-app-promo .sloff-app-promo__text{font-size:17px}
.sloff-app-promo__badges{gap:16px}
.sloff-app-promo__phone{top:58px;width:218px;height:428px}
.sloff-app-promo__screen>.sloff-app-promo__strip{height:83px}
.sloff-app-promo__ticket{margin:14px 14px 0;padding:16px 10px 20px}
.sloff-app-promo__ticket-logo{width:116px}
.sloff-app-promo__ticket-caption{margin:16px 0 10px}
.sloff-app-promo__qr{width:124px;height:124px}
}
@media (prefers-reduced-motion:reduce){.sloff-app-promo .sloff-app-promo__badge{transition:none}.sloff-app-promo .sloff-app-promo__badge:hover{transform:none}}