/* HF-AI app promotion (homepage section #app and the /app page). Uses the Type scale v3 tokens. */
.appx{position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:var(--sec-y) 28px}
.appx-panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding:48px;border-radius:28px;border:1px solid #e6e8ec;background:radial-gradient(700px 320px at 100% 0%,rgba(216,0,12,.07),transparent 65%),linear-gradient(180deg,#fff 0%,#f7f8fa 100%);box-shadow:0 30px 70px -50px rgba(16,24,40,.35);overflow:hidden}
.appx-copy .eyebrow{margin-bottom:0}
.appx-copy h2{margin:12px 0 8px;color:#0b1018;font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:-.02em}
.appx-copy>p{margin:0 0 18px;color:#5c6470;font-size:var(--fs-lead);line-height:var(--lh-body);max-width:560px}
.appx-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.appx-list li{position:relative;padding-left:28px;color:#303946;font-size:var(--fs-card);line-height:var(--lh-card)}
.appx-list li:before{content:"";position:absolute;left:2px;top:.35em;width:14px;height:14px;border-radius:50%;background:#0b1018 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.appx-list b{color:#0b1018}

/* store-style buttons ("Coming soon" until the apps are live in the stores) */
.store-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.store-badge{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:8px 18px 8px 14px;border-radius:14px;background:#0b1018;color:#fff;text-decoration:none;border:1px solid #0b1018;transition:transform .15s,box-shadow .15s}
a.store-badge:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(11,16,24,.55)}
a.store-badge:focus-visible{outline:3px solid #d8000c;outline-offset:3px}
.store-badge svg{flex:none;width:26px;height:26px}
.store-badge span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store-badge small{font-size:11.5px;font-weight:500;letter-spacing:.01em;color:#d7dae0}
.store-badge strong{font-size:19px;font-weight:700;letter-spacing:-.01em}
.store-note{margin:12px 0 0;color:#5c6470;font-size:var(--fs-small);line-height:var(--lh-small)}
.store-note a{color:#b9000a;font-weight:700;text-decoration:none}

/* phone frames */
.appx-phones{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:18px;min-height:460px}
.phone{position:relative;flex:none;width:210px;padding:9px;border-radius:40px;background:#0b1018;box-shadow:0 30px 60px -28px rgba(16,24,40,.55),inset 0 0 0 1px #2a2f38}
.phone img{display:block;width:100%;height:auto;border-radius:31px;background:#f2f2f7}
.phone:after{content:"";position:absolute;top:17px;left:50%;width:62px;height:18px;margin-left:-31px;border-radius:12px;background:#0b1018}
.phone.p2{margin-top:56px}
.appx-icon{position:absolute;left:4px;bottom:18px;width:78px;height:78px;border-radius:18px;box-shadow:0 16px 34px -14px rgba(216,0,12,.6)}

@media(max-width:1000px){.appx-panel{grid-template-columns:1fr;gap:28px;padding:32px 24px}.appx-phones{min-height:0}}
@media(max-width:900px){.appx{padding:var(--sec-y) 20px}}
@media(max-width:520px){.phone{width:150px;padding:7px;border-radius:30px}.phone img{border-radius:24px}.phone:after{top:12px;width:44px;height:13px;margin-left:-22px}.phone.p2{margin-top:36px}.appx-icon{width:58px;height:58px;border-radius:14px}.store-badge{flex:1 1 100%;justify-content:center}}

/* /app page extras */
.appx-page .sx-hero h1 em{font-style:normal;color:#d8000c}
.appx-shots{display:flex;gap:18px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x mandatory}
.appx-shots figure{flex:none;margin:0;scroll-snap-align:start;text-align:center}
.appx-shots .phone{width:200px}
.appx-shots figcaption{margin-top:10px;color:#5c6470;font-size:var(--fs-small)}
@media(prefers-reduced-motion:reduce){a.store-badge{transition:none}a.store-badge:hover{transform:none}}
/* fixes 2026-09-28: small note size under the buttons; centre the screenshot row when it fits */
.appx-copy>p.store-note,.sx-hero p.store-note{margin:12px 0 0;font-size:var(--fs-small);line-height:var(--lh-small)}
.appx-shots{justify-content:safe center}