/* =====================================================================
   The Player Code: get-the-app promo (v2, the loud one).
   Loaded automatically by assets/js/app-promo.js on every page. Uses the
   colours in style.css. Animations use transform/opacity only so they stay
   smooth on phones, pause off screen (JS), and switch off for anyone who
   has "Reduce motion" turned on.

   1. Quests nav badge       5. Top strip (fallback)
   2. App Store badge        6. Footer band
   3. Shared bits            7. End-of-page card
   4. Top showcase (home)    8. The iPhone   9. Reduced motion
   10. Targeted top banners (one per page) and hiding them for app owners
   11. Android "coming soon" badge beside the App Store badge
   ===================================================================== */

/* ---------- 1. Quests nav badge ---------- */
.nav-app { display: inline-block; margin-left: 3px; padding: 3px 6px 2px; border-radius: 6px; font: 800 9px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #0B0D12; background: linear-gradient(90deg, var(--accent), #8FD3FF); vertical-align: 2px; animation: apx-badgeglow 2.4s ease-in-out infinite; }
.nav a.nav-hot { color: var(--ink); }
@keyframes apx-badgeglow { 0%, 100% { box-shadow: 0 0 0 rgba(130,228,180,0); } 50% { box-shadow: 0 0 12px rgba(130,228,180,.75); } }

/* ---------- 2. App Store badge ---------- */
.asb { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 12px; border-radius: 11px; background: #000; color: #fff; border: 1px solid #A6A6A6; text-decoration: none; flex: none; vertical-align: middle; -webkit-tap-highlight-color: transparent; }
.asb .asb-face { display: inline-flex; align-items: center; gap: inherit; }
.asb-logo { width: 24px; height: 24px; flex: none; }
.asb-text { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.asb-text small { font: 500 10px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; letter-spacing: .01em; }
.asb-text b { font: 600 20px/1.05 -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif; letter-spacing: -.02em; }
.asb-sm { height: 40px; padding: 0 13px 0 10px; border-radius: 9px; gap: 6px; }
.asb-sm .asb-logo { width: 20px; height: 20px; }
.asb-sm .asb-text small { font-size: 8.5px; }
.asb-sm .asb-text b { font-size: 16.5px; }
.asb-lg { height: 60px; padding: 0 20px 0 15px; border-radius: 13px; gap: 10px; }
.asb-lg .asb-logo { width: 30px; height: 30px; }
.asb-lg .asb-text small { font-size: 12px; }
.asb-lg .asb-text b { font-size: 25px; }


/* Locked: dimmed, hatched, padlocked, with a "Coming soon" sticker */
.asb.is-soon { cursor: not-allowed; user-select: none; -webkit-user-select: none; margin: 14px 10px 0 8px; }
.asb.is-soon .asb-face { opacity: .5; filter: grayscale(1); }
.asb-chain { position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 5px, transparent 5px 11px); pointer-events: none; }
.asb-lock { position: absolute; left: -9px; bottom: -9px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--warn); color: #1a1205; border: 2px solid var(--bg); box-shadow: 0 4px 12px rgba(0,0,0,.5); animation: apx-lockwiggle 5s ease-in-out infinite; }
.asb-lock svg { width: 13px; height: 13px; }
.asb-lock::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--warn); opacity: 0; animation: apx-lockpulse 5s ease-out infinite; }
/* "Get the app" moves focus here (app-promo.js) only so screen readers follow; no box drawn */
#get-the-app-badge:focus { outline: none; }
/* Sits on the top edge, above "Download on", so it never covers the badge text */
.asb-sticker { position: absolute; bottom: calc(100% - 4px); right: -12px; transform: rotate(4deg); background: var(--accent); color: #0B0D12; border-radius: 999px; padding: 5px 9px 4px; font: 800 9.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.45); border: 2px solid var(--bg); }
.asb-sm .asb-sticker { font-size: 8.5px; padding: 4px 7px 3px; right: -10px; }
.asb-sm .asb-lock { width: 22px; height: 22px; left: -8px; bottom: -8px; }
.asb-sm .asb-lock svg { width: 11px; height: 11px; }
.asb-lg .asb-sticker { font-size: 11px; padding: 6px 11px 5px; right: -14px; }
.asb-lg .asb-lock { width: 32px; height: 32px; left: -11px; bottom: -11px; }
.asb-lg .asb-lock svg { width: 16px; height: 16px; }
.asb.is-soon:hover .asb-lock, .asb.is-soon:active .asb-lock { animation: apx-lockshake .5s ease-in-out; }
@keyframes apx-lockwiggle { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-16deg); } 92% { transform: rotate(14deg); } 95% { transform: rotate(-8deg); } }
@keyframes apx-lockshake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px) rotate(-10deg); } 40% { transform: translateX(4px) rotate(10deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes apx-lockpulse { 0%, 84% { opacity: 0; transform: scale(1); } 88% { opacity: .9; } 100% { opacity: 0; transform: scale(1.9); } }

/* ---------- 3. Shared bits ---------- */
/* A frame whose border is a slowly turning rainbow (a rotating layer behind
   a 1.5px gap, so the browser only moves it, never repaints it). */
.apx-frame { position: relative; border-radius: 26px; padding: 1.5px; overflow: hidden; isolation: isolate; background: rgba(255,255,255,.08);
  /* Safari can stop clipping the spinning border after a jump down the page, leaving a
     loose square of colour under the panel; paint containment and a mask keep it inside. */
  contain: paint; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.apx-frame::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: max(150%, 1200px); aspect-ratio: 1; background: conic-gradient(from 0deg, var(--accent), #8FD3FF, var(--purple), var(--slop), var(--warn), var(--accent)); transform: translate(-50%, -50%) rotate(0deg); animation: apx-spin 8s linear infinite; }
.apx-frame.thin { border-radius: 18px; }
@keyframes apx-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.apx-glow { position: absolute; z-index: 0; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; animation: apx-drift 14s ease-in-out infinite alternate; }
.apx-glow.g1 { left: -160px; top: -200px; background: radial-gradient(circle, rgba(124,92,255,.38), transparent 65%); }
.apx-glow.g2 { right: -140px; bottom: -220px; background: radial-gradient(circle, rgba(130,228,180,.22), transparent 65%); animation-delay: -7s; }
@keyframes apx-drift { to { transform: translate(70px, 50px) scale(1.12); } }
.apx-gridbg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); }

.apx-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 6px; border-radius: 999px; background: rgba(130,228,180,.10); border: 1px solid rgba(130,228,180,.3); color: var(--accent); font: 800 11px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.apx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 0 rgba(130,228,180,.7); animation: apx-ping 1.8s ease-out infinite; }
@keyframes apx-ping { 0% { box-shadow: 0 0 0 0 rgba(130,228,180,.7); } 100% { box-shadow: 0 0 0 9px rgba(130,228,180,0); } }

.apx-grad { background: linear-gradient(90deg, var(--accent), #8FD3FF, #B9A6FF, var(--slop), var(--accent)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: apx-sheen 9s linear infinite; }
@keyframes apx-sheen { to { background-position: 300% 0; } }

.apx-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--ink); padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); text-decoration: none; transition: background .15s, border-color .15s, transform .15s; white-space: nowrap; }
.apx-more svg { width: 16px; height: 16px; transition: transform .2s; }
.apx-more:hover { background: rgba(130,228,180,.12); border-color: rgba(130,228,180,.45); color: var(--ink); }
.apx-more:hover svg { transform: translateX(3px); }
.apx-more.sm { font-size: 13.5px; padding: 8px 13px; }

.apx-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 7px; border-radius: 999px; background: rgba(20,24,33,.94); border: 1px solid rgba(255,255,255,.14); color: var(--ink); font: 700 13px/1 var(--display); white-space: nowrap; box-shadow: 0 12px 30px rgba(0,0,0,.5); animation: apx-bob 4.6s ease-in-out infinite; pointer-events: none; }
.apx-chip svg { width: 15px; height: 15px; color: var(--accent); }
.apx-chip.c1 { left: 0; top: 18%; }
.apx-chip.c2 { right: 0; top: 38%; background: var(--accent); color: #0B0D12; border-color: transparent; animation-delay: -1.6s; }
.apx-chip.c3 { left: 3%; top: 60%; animation-delay: -3.1s; }
.apx-chip.c3 svg { color: var(--warn); }
@keyframes apx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Scroll reveals (the class apx-js is added by the script, so without
   JavaScript nothing is ever hidden) */
.apx-js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .75s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 70ms); }
.apx-js .rv.is-in { opacity: 1; transform: none; }

.apx-top { position: relative; z-index: 1; animation: apx-drop .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes apx-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes apx-rise { from { opacity: 0; transform: translateY(60px) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* ---------- 4. Top showcase (homepage) ---------- */
.apx-hero { padding: 18px 0 0; }
.apx-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 20px; padding: 0 40px; border-radius: 24.5px; overflow: hidden; background: radial-gradient(900px 420px at 0% 0%, rgba(124,92,255,.22), transparent 60%), linear-gradient(160deg, #161a26, #10131b 60%, #0f1a19); }
.apx-hero-copy { position: relative; z-index: 1; padding: 40px 0 38px; align-self: center; }
.apx-hero h2 { font: 700 clamp(30px, 4.3vw, 50px)/1.04 var(--display); letter-spacing: -.02em; margin: 16px 0 14px; }
.apx-hero p { color: #C3CAD6; font-size: 17px; line-height: 1.55; margin: 0 0 18px; max-width: 46ch; }
.apx-ticks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.apx-ticks li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.apx-ticks svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgba(130,228,180,.16); color: var(--accent); flex: none; }
.apx-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.apx-hero-phone { position: relative; z-index: 1; height: 470px; align-self: end; display: flex; justify-content: center; padding-top: 30px; }
.apx-hero-phone .ph { animation: apx-rise 1s cubic-bezier(.2,.8,.2,1) .15s both; }

/* ---------- 5. Top strip (other pages) ---------- */
.apx-strip { padding: 12px 0 0; }
.apx-strip-in { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 10px; border-radius: 16.5px; background: linear-gradient(100deg, #231c47 0%, #151a25 38%, #141821 70%, #12221f 100%); }
.apx-strip-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.apx-strip-main:hover { color: var(--ink); }
.apx-strip-icon { position: relative; width: 44px; height: 44px; flex: none; }
.apx-strip-icon img { width: 44px; height: 44px; border-radius: 11px; display: block; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.apx-strip-icon::after { content: ""; position: absolute; inset: -3px; border-radius: 14px; border: 2px solid var(--accent); opacity: 0; animation: apx-iconping 3s ease-out infinite; }
.apx-strip-icon em { position: absolute; left: 50%; top: -4px; font: 800 10px/1 var(--display); font-style: normal; color: var(--accent); white-space: nowrap; opacity: 0; transform: translate(-50%, 0); animation: apx-xpfloat 3s ease-out infinite; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
@keyframes apx-iconping { 0% { opacity: .9; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes apx-xpfloat { 0%, 30% { opacity: 0; transform: translate(-50%, 6px); } 40% { opacity: 1; transform: translate(-50%, -6px); } 75%, 100% { opacity: 0; transform: translate(-50%, -20px); } }
.apx-strip-copy { min-width: 0; flex: 1; }
.apx-strip-k { display: block; font: 800 10.5px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apx-strip-k i { font-style: normal; color: var(--muted); letter-spacing: .1em; margin-left: 4px; }
.apx-ticker { position: relative; display: block; height: 22px; margin-top: 4px; overflow: hidden; }
.apx-ticker span { position: absolute; left: 0; right: 0; top: 0; font-weight: 700; font-size: 15px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(100%); animation: apx-tick 18s linear infinite; animation-delay: calc(var(--i) * 3s); }
/* six lines, three seconds each */
@keyframes apx-tick { 0% { opacity: 0; transform: translateY(100%); } 2.5%, 14% { opacity: 1; transform: translateY(0); } 16.66%, 100% { opacity: 0; transform: translateY(-100%); } }
.apx-mini { display: flex; align-items: center; gap: 8px; width: 150px; flex: none; }
.apx-mini-lv { font: 800 11px/1 var(--display); color: #B9A6FF; letter-spacing: .06em; white-space: nowrap; }
.apx-mini-lv b { color: var(--ink); }
.apx-mini-bar { flex: 1; height: 7px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }
.apx-mini-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #8FD3FF); transform-origin: left; animation: apx-fill 6s cubic-bezier(.4,0,.2,1) infinite; box-shadow: 0 0 10px rgba(130,228,180,.6); }
@keyframes apx-fill { 0% { transform: scaleX(.18); } 70%, 82% { transform: scaleX(1); } 83%, 100% { transform: scaleX(.18); } }
.apx-strip-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.apx-strip-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14px; color: var(--accent); white-space: nowrap; }
.apx-strip-link svg { width: 15px; height: 15px; transition: transform .2s; }
.apx-strip-link:hover svg { transform: translateX(3px); }

/* ---------- 6. Footer band ---------- */
.apb { padding: 56px 0 8px; }
.apb-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; padding: 0 40px; border-radius: 24.5px; overflow: hidden; background: radial-gradient(800px 380px at 100% 0%, rgba(130,228,180,.12), transparent 60%), linear-gradient(160deg, #181430, #12151d 55%, #10131a); }
.apb-copy { position: relative; z-index: 1; padding: 40px 0; }
.apb h2 { font: 700 clamp(26px, 3.4vw, 38px)/1.08 var(--display); letter-spacing: -.015em; margin: 14px 0 12px; }
.apb-copy > p { color: #C3CAD6; margin: 0 0 22px; max-width: 54ch; }
.apb-reasons { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.apb-reasons li { display: flex; gap: 11px; align-items: flex-start; }
.apb-reasons b { display: block; font: 700 15px/1.3 var(--display); margin-bottom: 2px; }
.apb-reasons li > span:last-child > span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.apb-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.apb-ico svg { width: 18px; height: 18px; }
.apb-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.apb-phone { position: relative; z-index: 1; align-self: end; height: 480px; display: flex; justify-content: center; padding-top: 34px; }

/* ---------- 7. End-of-page card ---------- */
.apc { margin-top: 36px; }
.apc .apx-frame { border-radius: 22px; }
.apc-in { position: relative; display: flex; gap: 20px; padding: 0 22px 0 18px; border-radius: 20.5px; overflow: hidden; background: linear-gradient(135deg, #1e1840, #141821 55%, #12201d); }
.apc-phone { position: relative; z-index: 1; flex: none; width: 128px; height: 210px; align-self: end; padding-top: 18px; }
.apc-icon { display: none; position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 13px; flex: none; margin-top: 20px; }
.apc-copy { position: relative; z-index: 1; min-width: 0; padding: 22px 0; }
.apc h3 { font-size: 21px; line-height: 1.2; margin: 8px 0 6px; }
.apc p { color: #C3CAD6; font-size: 14.5px; margin: 0 0 16px; }
.apc-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.apc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.apc-tags span { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); animation: apx-tagglow 6s ease-in-out infinite; }
.apc-tags span:nth-child(2) { animation-delay: 1.5s; }
.apc-tags span:nth-child(3) { animation-delay: 3s; }
.apc-tags span:nth-child(4) { animation-delay: 4.5s; }
@keyframes apx-tagglow { 0%, 20%, 100% { background: rgba(255,255,255,.06); color: var(--muted); } 8%, 14% { background: rgba(130,228,180,.18); color: var(--accent); } }

/* ---------- 8. The iPhone (everything in em, so one number sizes it) ---------- */
.ph { --pw: 250px; position: relative; flex: none; width: var(--pw); height: calc(var(--pw) * 2.144); font-size: calc(var(--pw) / 20); color: #F2F4F8; font-family: var(--text); line-height: 1.25; text-align: left; letter-spacing: 0; }
.ph-hero { --pw: 260px; }
.ph-band { --pw: 240px; }
.ph-mini { --pw: 128px; }
.ph-big { --pw: 290px; }
.ph *, .ph *::before, .ph *::after { box-sizing: border-box; }
.ph svg { display: block; }
.ph-body { position: absolute; inset: 0; border-radius: 3.3em; background: linear-gradient(145deg, #4a505e, #16191f 35%, #0c0e12 65%, #3a3f4b); padding: .5em; box-shadow: 0 0 0 .08em #5d6372 inset, 0 2.2em 4em -1em rgba(0,0,0,.8), 0 0 5em -1.5em rgba(124,92,255,.55); }
.ph-body::before { content: ""; position: absolute; inset: .5em; border-radius: 2.85em; background: radial-gradient(130% 55% at 0% 0%, rgba(124,92,255,.22), transparent 60%), radial-gradient(120% 50% at 100% 100%, rgba(130,228,180,.08), transparent 60%), #0B0D12; }
.ph-island { position: absolute; z-index: 7; top: 1.15em; left: 50%; width: 5.4em; height: 1.55em; margin-left: -2.7em; border-radius: 1em; background: #000; }
.ph-status { position: absolute; z-index: 6; top: 1.32em; left: 2.4em; right: 2.2em; display: flex; justify-content: space-between; align-items: center; font-size: .78em; }
.ph-sig { display: flex; align-items: flex-end; gap: .14em; height: .8em; }
.ph-sig i { width: .26em; border-radius: .08em; background: #fff; }
.ph-sig i:nth-child(1) { height: 35%; } .ph-sig i:nth-child(2) { height: 55%; } .ph-sig i:nth-child(3) { height: 78%; } .ph-sig i:nth-child(4) { height: 100%; }
.ph-sig::after { content: ""; width: 1.7em; height: .85em; margin-left: .35em; border-radius: .25em; border: .1em solid rgba(255,255,255,.55); background: linear-gradient(90deg, #fff 72%, transparent 72%) content-box; padding: .08em; }
.ph-scr { position: absolute; inset: 3.3em .5em .5em; padding: 0 .85em 4.6em; display: flex; flex-direction: column; gap: .55em; overflow: hidden; border-radius: 0 0 2.85em 2.85em; transition: filter .3s; }
.ph-top { display: flex; align-items: center; gap: .4em; }
.ph-top h4 { margin: 0; flex: 1; font: 700 1.5em/1.1 var(--display); color: #fff; letter-spacing: -.01em; }
.ph-round { width: 1.95em; height: 1.95em; border-radius: 50%; background: #1B2030; display: grid; place-items: center; color: #C9CFDA; flex: none; }
.ph-round svg { width: .95em; height: .95em; }
.ph-card { background: #141821; border: 1px solid rgba(255,255,255,.07); border-radius: 1em; padding: .7em .75em; transition: border-color .4s, box-shadow .4s; }
.ph-row { display: flex; justify-content: space-between; align-items: center; gap: .4em; font-size: .75em; white-space: nowrap; }
.ph-row b { font-weight: 700; }
.ph-bar { display: block; height: .55em; border-radius: 1em; background: rgba(255,255,255,.08); overflow: hidden; margin: .4em 0; }
.ph-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #8FD3FF); box-shadow: 0 0 .7em rgba(130,228,180,.65); transition: width .75s cubic-bezier(.2,.8,.2,1); }
.ph-bar i.no-anim { transition: none; }
.ph-bar.thin { height: .42em; margin: .5em 0 0; }
.ph-bar.thin i { background: linear-gradient(90deg, var(--purple), #B9A6FF); box-shadow: none; transition: width 1.2s ease; }

.ph-lvl { display: flex; align-items: center; gap: .7em; background: linear-gradient(135deg, rgba(124,92,255,.34), #141821 72%); border-color: rgba(124,92,255,.3); }
.ph-badge { width: 3em; height: 3em; border-radius: .85em; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(140deg, #9a82ff, var(--purple) 50%, #5536d6); box-shadow: 0 .3em 1em rgba(124,92,255,.55); }
.ph-badge small { font: 800 .5em/1 var(--display); letter-spacing: .15em; opacity: .85; }
.ph-badge b { font: 700 1.3em/1 var(--display); }
.ph-lvl-info { flex: 1; min-width: 0; }
.ph-sub { font-size: .66em; color: #9AA3B2; }
.ph-streak { display: inline-flex; align-items: center; gap: .25em; }
.ph-streak svg { width: 1.1em; height: 1.1em; color: var(--warn); }
.ph-streak b { color: #F2F4F8; }

.ph-steps { display: flex; align-items: center; gap: .75em; }
.ph.is-goal .ph-steps { border-color: rgba(130,228,180,.5); box-shadow: 0 0 1.4em rgba(130,228,180,.22); }
.ph-ringwrap { position: relative; width: 3.4em; height: 3.4em; flex: none; }
.ph-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ph-ring circle { fill: none; stroke-width: 4.6; }
.ph-ring .trk { stroke: rgba(255,255,255,.08); }
.ph-ring .val { stroke: var(--accent); stroke-dasharray: 100; stroke-linecap: round; }
.ph-ring-ico { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); }
.ph-ring-ico svg { width: 1.3em; height: 1.3em; }
.ph-steps-copy { min-width: 0; }
.ph-steps-copy small { display: block; font: 700 .62em/1.2 var(--text); color: #9AA3B2; text-transform: uppercase; letter-spacing: .08em; }
.ph-steps-copy b { display: block; font: 700 1.55em/1.15 var(--display); font-variant-numeric: tabular-nums; }
.ph-steps-copy span { display: block; font-size: .62em; color: #9AA3B2; }

.ph-h { display: flex; justify-content: space-between; align-items: baseline; gap: .4em; margin-top: .15em; font: 700 .72em/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #C9CFDA; white-space: nowrap; }
.ph-h span { font: 500 .9em/1 var(--text); letter-spacing: 0; text-transform: none; color: #8a93a3; }
.ph-list, .ph-rel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4em; }
.ph-list li { position: relative; display: flex; align-items: center; gap: .55em; padding: .5em .55em; border-radius: .85em; background: #141821; border: 1px solid rgba(255,255,255,.06); transition: background .4s, border-color .4s; }
.ph-ico { width: 2em; height: 2em; border-radius: .6em; flex: none; display: grid; place-items: center; color: var(--accent); background: rgba(130,228,180,.14); }
.ph-ico svg { width: 1.1em; height: 1.1em; }
.ph-ico.k-trivia { color: #B9A6FF; background: rgba(124,92,255,.2); }
.ph-ico.k-distance { color: #8FD3FF; background: rgba(143,211,255,.15); }
.ph-ico.k-stretch { color: var(--warn); background: rgba(255,179,71,.15); }
.ph-ico.k-follow { color: var(--slop); background: rgba(255,107,154,.15); }
.ph-t { flex: 1; min-width: 0; }
.ph-t b { display: block; font-size: .78em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-t small { display: block; font-size: .62em; color: #9AA3B2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-xp { font: 700 .65em/1 var(--display); color: var(--accent); padding: .35em .5em; border-radius: 1em; background: rgba(130,228,180,.12); transition: opacity .3s; }
.ph-chk { width: 1.55em; height: 1.55em; border-radius: 50%; flex: none; display: grid; place-items: center; border: .12em solid rgba(255,255,255,.22); color: #0B0D12; transition: background .3s, border-color .3s, box-shadow .3s; }
.ph-chk svg { width: .95em; height: .95em; opacity: 0; transform: scale(.3); transition: opacity .25s, transform .35s cubic-bezier(.3,1.7,.5,1); }
.ph-list li.done { background: rgba(130,228,180,.08); border-color: rgba(130,228,180,.35); }
.ph-list li.done .ph-chk { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 .8em rgba(130,228,180,.7); }
.ph-list li.done .ph-chk svg { opacity: 1; transform: none; }
.ph-list li.done .ph-xp { opacity: .35; }
.ph-plus { position: absolute; right: 2.4em; top: .1em; font: 800 .78em/1 var(--display); color: var(--accent); opacity: 0; pointer-events: none; text-shadow: 0 0 .6em rgba(130,228,180,.6); }
.ph-list li.done .ph-plus { animation: ph-plus 1.1s ease-out; }
@keyframes ph-plus { 0% { opacity: 0; transform: translateY(.4em) scale(.8); } 25% { opacity: 1; transform: translateY(-.5em) scale(1.12); } 100% { opacity: 0; transform: translateY(-2.4em); } }
.ph-week em { font: 700 1em/1 var(--display); font-style: normal; color: #B9A6FF; }

.ph-tabs { position: absolute; z-index: 4; left: .5em; right: .5em; bottom: .5em; height: 4.3em; padding: .65em 1em 0; display: flex; justify-content: space-around; border-radius: 0 0 2.85em 2.85em; background: rgba(13,15,21,.96); border-top: 1px solid rgba(255,255,255,.07); }
.ph-tabs span { display: flex; flex-direction: column; align-items: center; gap: .22em; color: #6f7788; }
.ph-tabs svg { width: 1.3em; height: 1.3em; }
.ph-tabs b { font-size: .52em; font-weight: 600; white-space: nowrap; }
.ph-tabs .on { color: var(--accent); }
.ph-tabs::after { content: ""; position: absolute; left: 50%; bottom: .5em; width: 6em; height: .28em; margin-left: -3em; border-radius: 1em; background: rgba(255,255,255,.85); }

/* Level-up pop */
.ph-levelup { position: absolute; z-index: 8; left: 50%; top: 44%; width: 13.4em; margin-left: -6.7em; padding: 1.2em .8em 1em; text-align: center; border-radius: 1.4em; background: linear-gradient(160deg, #2c2068, #151927 75%); border: 1px solid rgba(155,130,255,.75); box-shadow: 0 1.2em 3em rgba(0,0,0,.65), 0 0 3.2em rgba(124,92,255,.65); opacity: 0; transform: translateY(-50%) scale(.4); pointer-events: none; transition: opacity .25s ease, transform .5s cubic-bezier(.3,1.65,.5,1); }
.ph.is-levelup .ph-levelup { opacity: 1; transform: translateY(-50%) scale(1); }
.ph.is-levelup .ph-scr { filter: brightness(.45) saturate(.7); }
.ph-levelup small { display: block; font: 800 .78em/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--warn); }
.ph-levelup b { display: block; margin: .2em 0 .15em; font: 700 2.1em/1.05 var(--display); background: linear-gradient(90deg, var(--accent), #8FD3FF, #B9A6FF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ph-levelup em { font-style: normal; font-size: .7em; color: #9AA3B2; }
.ph-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.ph-burst i { --r: calc(var(--i) * 25.7deg); position: absolute; left: -.25em; top: -.25em; width: .5em; height: .5em; border-radius: .12em; background: var(--accent); opacity: 0; }
.ph-burst i:nth-child(3n+1) { background: var(--warn); }
.ph-burst i:nth-child(3n+2) { background: var(--slop); border-radius: 50%; }
.ph-burst i:nth-child(4n) { background: #B9A6FF; }
.ph.is-levelup .ph-burst i { animation: ph-burst 1s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes ph-burst { 0% { opacity: 1; transform: rotate(var(--r)) translateY(0) scale(1.2); } 100% { opacity: 0; transform: rotate(var(--r)) translateY(-8.5em) scale(.4); } }

/* Notification that drops in from the top of the screen */
.ph-toast { position: absolute; z-index: 8; top: 3.6em; left: 1.15em; right: 1.15em; display: flex; align-items: center; gap: .6em; padding: .75em .8em; border-radius: 1.15em; background: rgba(30,35,52,.98); border: 1px solid rgba(130,228,180,.45); box-shadow: 0 1em 2.4em rgba(0,0,0,.6); font-size: .72em; line-height: 1.3; opacity: 0; transform: translateY(-170%); transition: transform .55s cubic-bezier(.3,1.4,.5,1), opacity .3s; }
.ph-toast svg { width: 2em; height: 2em; padding: .4em; border-radius: 50%; flex: none; background: var(--accent); color: #0B0D12; }
.ph-toast b { color: var(--accent); white-space: nowrap; }
.ph.is-toast .ph-toast { opacity: 1; transform: none; }
.ph-toast-out { border-color: rgba(255,179,71,.5); }
.ph-toast-out svg { background: var(--warn); color: #1a1205; padding: .45em; }
.ph-toast-out b { color: var(--warn); }

/* Coming Soon screen */
.ph-seg { display: flex; padding: .2em; border-radius: .8em; background: #1B2030; font-size: .7em; font-weight: 700; }
.ph-seg span { flex: 1; text-align: center; padding: .45em; border-radius: .6em; color: #9AA3B2; }
.ph-seg .on { background: #2b3249; color: #fff; }
.ph-chips { display: flex; gap: .35em; overflow: hidden; font-size: .62em; font-weight: 700; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.ph-chips span { padding: .45em .8em; border-radius: 1em; background: #1B2030; color: #C9CFDA; flex: none; }
.ph-chips .on { background: var(--accent); color: #0B0D12; }
.ph-cd { position: relative; padding: 0; overflow: hidden; border-color: rgba(130,228,180,.3); }
.ph-cd-art { display: block; height: 6.6em; background: linear-gradient(135deg, #2a1f63, #0f3a35) center / cover no-repeat; }
.ph-cd-art::after { content: ""; display: block; height: 100%; background: linear-gradient(180deg, transparent 30%, #141821 98%); }
.ph-cd-copy { position: relative; display: block; padding: 0 .75em .75em; margin-top: -1.9em; }
.ph-cd-copy small { display: block; font-size: .6em; color: #C9CFDA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-cd-copy > b { display: block; margin: .15em 0 .5em; font: 700 1.15em/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-cd-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35em; }
.ph-cd-boxes span { text-align: center; padding: .4em 0 .32em; border-radius: .6em; background: #0B0D12; border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.ph-cd-boxes b { display: block; font: 700 1.2em/1 var(--display); font-variant-numeric: tabular-nums; color: var(--accent); }
.ph-cd-boxes b.flip { animation: ph-flip .45s ease-out; }
@keyframes ph-flip { from { opacity: .15; transform: translateY(-.45em); } to { opacity: 1; transform: none; } }
.ph-cd-boxes i { font-style: normal; font-size: .5em; color: #9AA3B2; text-transform: uppercase; letter-spacing: .08em; }
.ph.is-out .ph-cd-boxes { opacity: .3; }
.ph-follow { display: inline-flex; align-items: center; gap: .35em; margin-top: .55em; padding: .38em .7em; border-radius: 1em; font-size: .6em; font-weight: 700; color: var(--accent); background: rgba(130,228,180,.12); }
.ph-follow svg { width: 1.15em; height: 1.15em; transform-origin: 50% 10%; animation: ph-bell 3.5s ease-in-out infinite; }
@keyframes ph-bell { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(18deg); } 88% { transform: rotate(-16deg); } 92% { transform: rotate(10deg); } 96% { transform: rotate(-6deg); } }
.ph-rel li { display: flex; align-items: center; gap: .6em; padding: .45em .55em; border-radius: .85em; background: #141821; border: 1px solid rgba(255,255,255,.06); }
.ph-date { width: 2.5em; flex: none; text-align: center; padding: .28em 0 .25em; border-radius: .55em; background: #1B2030; }
.ph-date b { display: block; font: 700 1em/1 var(--display); }
.ph-date i { display: block; font-style: normal; font-size: .52em; font-weight: 700; text-transform: uppercase; color: var(--accent); margin-top: .15em; }
.ph-bellsm { color: var(--accent); }
.ph-bellsm svg { width: 1.05em; height: 1.05em; }
.ph-rel .ph-empty { display: block; font-size: .66em; color: #9AA3B2; text-align: center; }

/* News screen: the latest story, our verdict and more stories */
.ph-story .ph-cd-art { height: 7.4em; }
.ph-story .ph-cd-copy > b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 0; font-size: 1.02em; line-height: 1.2; }
.ph-story .ph-cd-copy small { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ph-review .ph-row b { overflow: hidden; text-overflow: ellipsis; }
.ph-vd { display: flex; align-items: center; gap: .6em; min-height: 1.7em; margin-top: .5em; }
.ph-vd .vlabel { font-size: .72em; }
.ph-vd .pick-seal { --s: 2.6em; }
.ph-thumb { width: 2.9em; height: 2.2em; flex: none; border-radius: .55em; background: #1B2030 center / cover no-repeat; }

/* ---------- Phones and narrow screens ---------- */
@media (max-width: 900px) {
  .apx-hero-in, .apb-card { grid-template-columns: 1fr; padding: 0 22px; gap: 0; }
  .apx-hero-copy, .apb-copy { padding: 28px 0 12px; }
  .apx-hero-phone { height: 300px; padding-top: 14px; }
  .apb-phone { height: 300px; padding-top: 18px; }
  .ph-hero { --pw: 220px; }
  .ph-band { --pw: 210px; }
  .apx-chip { font-size: 12px; padding: 7px 10px 6px; }
  .apx-chip.c1 { left: 2%; top: 14%; }
  .apx-chip.c2 { right: 2%; top: 30%; }
  .apx-chip.c3 { left: 4%; top: 54%; }
  .apx-mini { display: none; }
}
@media (max-width: 620px) {
  .apx-hero { padding-top: 12px; }
  .apx-frame { border-radius: 22px; }
  .apx-hero-in, .apb-card { border-radius: 20.5px; padding: 0 18px; }
  .apx-hero h2 { font-size: 30px; }
  .apx-hero p { font-size: 15.5px; margin-bottom: 18px; }
  .apx-ticks { display: none; }
  .apx-cta, .apb-cta { gap: 14px 16px; }
  .apx-hero-phone { height: 270px; }
  .apb-reasons { grid-template-columns: 1fr; gap: 12px; }
  .apb { padding-top: 40px; }
  .apb-phone { height: 270px; }
  /* Strip: two tidy rows */
  .apx-strip { padding-top: 10px; }
  .apx-strip-in { flex-wrap: wrap; gap: 10px 12px; padding: 10px 12px 12px; }
  .apx-strip-main { flex-basis: 100%; }
  .apx-strip-icon, .apx-strip-icon img { width: 40px; height: 40px; }
  .apx-strip-k i { display: none; }
  .apx-ticker span { font-size: 14px; }
  .apx-strip-cta { flex-basis: 100%; justify-content: space-between; padding-left: 52px; }
  /* Card: icon instead of the phone */
  .apc-in { padding: 0 18px; gap: 14px; }
  .apc-phone { display: none; }
  .apc-icon { display: block; }
  .apc-copy { padding: 20px 0; }
  .apc h3 { font-size: 19px; }
}
@media (max-width: 380px) {
  .apx-strip-cta { padding-left: 0; }
  .apx-hero h2 { font-size: 27px; }
  .apx-more { padding: 10px 13px; font-size: 14px; }
}

/* ---------- 9. Reduced motion: everything still, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav-app, .asb-lock, .asb-lock::after, .apx-frame::before, .apx-glow, .apx-dot, .apx-grad, .apx-chip,
  .apx-top, .apx-hero-phone .ph, .apx-strip-icon::after, .apx-strip-icon em, .apx-mini-bar i, .apc-tags span,
  .ph *, .ph-burst i { animation: none !important; transition: none !important; }
  .apx-js .rv { opacity: 1; transform: none; transition: none; }
  .apx-ticker span { animation: none; opacity: 0; }
  .apx-ticker span:first-child { opacity: 1; transform: none; }
  .apx-mini-bar i { transform: scaleX(.6); }
}

/* ---------- 10. Targeted top banners (one per page, v3) ----------
   The banner at the top of every page except the homepage, written for
   that page (assets/js/app-promo.js, BANNERS). Same frame, colours and
   App Store badge as the rest of the promo. */
.apt { padding: 14px 0 0; }
.apt-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 26px; align-items: center; padding: 22px 26px; border-radius: 16.5px; overflow: hidden; background: radial-gradient(700px 300px at 0% 0%, rgba(124,92,255,.22), transparent 60%), linear-gradient(100deg, #1d1838 0%, #151a25 40%, #141821 70%, #12221f 100%); }
.apt .apx-glow.g1 { width: 360px; height: 360px; left: -140px; top: -220px; }
.apt-copy { position: relative; z-index: 1; min-width: 0; }
.apt-k { display: flex; align-items: center; gap: 10px; font: 800 11px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.apt-k i { font-style: normal; color: var(--muted); letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apt-k i::before { content: "\00b7"; margin-right: 8px; }
.apt-k .apx-strip-icon, .apt-k .apx-strip-icon img { width: 30px; height: 30px; }
.apt-k .apx-strip-icon img { border-radius: 8px; }
.apt-k .apx-strip-icon::after { border-radius: 11px; }
.apt h2 { font: 700 clamp(22px, 2.6vw, 30px)/1.1 var(--display); letter-spacing: -.015em; margin: 12px 0 8px; }
.apt-copy > p { color: #C3CAD6; font-size: 15px; line-height: 1.55; margin: 0 0 14px; max-width: 70ch; }
.apt-feats { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.apt-feats li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 6px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: 13px; font-weight: 600; white-space: nowrap; }
.apt-feats svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.apt-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.apt-owner { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.apt-owner a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.apx-hero .apt-owner { margin-top: 16px; }

/* The little "in the app" picture on the right */
.apt-viz { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: rgba(11,13,18,.72); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: apt-bob 5s ease-in-out infinite; }
@keyframes apt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.apt-viz-k { display: flex; align-items: center; gap: 6px; font: 800 10.5px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.apt-viz-k svg { width: 14px; height: 14px; color: var(--accent); }
.apt-viz-k b { color: var(--ink); font-size: 13px; letter-spacing: .04em; }
.apt-viz-k em { margin-left: auto; font-style: normal; color: var(--accent); letter-spacing: .04em; font-size: 12px; animation: apx-badgeglow 2.4s ease-in-out infinite; padding: 3px 6px; border-radius: 6px; }
.apt-viz-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent); }
.apt-viz-foot svg { width: 13px; height: 13px; flex: none; }

.apt-cd-title { font: 700 16px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apt-cd-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.apt-cd-clock > span { display: flex; flex-direction: column; align-items: center; padding: 7px 0 5px; border-radius: 10px; background: var(--panel2); }
.apt-cd-clock b { font: 700 19px/1 var(--display); font-variant-numeric: tabular-nums; }
.apt-cd-clock i { font-style: normal; font: 700 10px/1 var(--display); color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.apt-out { grid-column: 1 / -1; text-align: center; padding: 10px 0; border-radius: 10px; background: var(--accent); color: #0B0D12; font: 800 16px/1 var(--display); letter-spacing: .12em; }

.apt-alert-top { display: flex; align-items: center; gap: 7px; font: 700 10.5px/1 var(--display); letter-spacing: .08em; color: var(--muted); }
.apt-alert-top img { width: 20px; height: 20px; border-radius: 5px; }
.apt-alert-top i { margin-left: auto; font-style: normal; letter-spacing: 0; }
.apt-alert b { font-size: 14.5px; line-height: 1.3; }
.apt-alert > span:not(.apt-alert-top):not(.apt-viz-foot) { font-size: 13px; color: #C3CAD6; line-height: 1.35; }

.apt-vd { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.apt-vd > span { display: flex; opacity: .45; animation: apt-vpulse 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1.5s); }
.apt-vd .vlabel { font-size: 12px; }
.apt-vd .vlabel small { display: none; }
.apt-verdict.is-slop .apt-vd > span { animation: none; }
.apt-verdict.is-slop .apt-vd > span.on { opacity: 1; }
.apt-verdict.is-slop .apt-viz-k svg, .apt-verdict.is-slop .apt-viz-foot { color: var(--slop); }
@keyframes apt-vpulse { 0%, 100% { opacity: .45; transform: none; } 8%, 20% { opacity: 1; transform: scale(1.05); } 28% { opacity: .45; transform: none; } }

.apt-level .apx-mini-bar { height: 9px; }
.apt-steps { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #C3CAD6; }
.apt-steps svg { width: 14px; height: 14px; color: var(--accent); }
.apt-steps b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Slop Watch gets the pink treatment */
.apt-slop .apt-k { color: var(--slop); }
.apt-slop .apt-feats svg { color: var(--slop); }

/* App owners: nothing at all (app-promo.js also removes the elements) */
.pc-has-app .apx-top, .pc-has-app .apb, .pc-has-app .apc { display: none !important; }

@media (max-width: 900px) {
  .apt-in { grid-template-columns: 1fr; gap: 16px; padding: 20px 20px; }
  .apt-viz { max-width: 340px; animation: none; }
  .apt-k i { display: none; }
}
@media (max-width: 620px) {
  .apt { padding-top: 10px; }
  .apt-in { padding: 16px 16px 18px; }
  .apt h2 { font-size: 22px; margin-top: 10px; }
  .apt-copy > p { font-size: 14px; }
  .apt-feats { gap: 6px; }
  .apt-feats li { font-size: 12.5px; padding: 6px 10px 5px; }
  .apt-copy > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; }
  .apt-feats { margin-bottom: 14px; }
  .apt-feats li:nth-child(n+3) { display: none; }
  .apt-cta { gap: 10px; flex-wrap: nowrap; }
  .apt-cta .asb { flex: none; }
  .apt-cta .apx-more { font-size: 12.5px; white-space: nowrap; min-width: 0; }
  .apt-owner { margin-top: 10px; font-size: 12px; }
  /* Phones: only the countdown stays, squeezed onto one row */
  .apt-viz.apt-alert, .apt-viz.apt-level, .apt-viz.apt-verdict { display: none; }
  .apt-cd { max-width: none; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
  .apt-cd .apt-viz-k, .apt-cd .apt-viz-foot { display: none; }
  .apt-cd-title { flex: 1; min-width: 0; font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .apt-cd-clock { flex: none; gap: 4px; grid-template-columns: repeat(4, 38px); }
  .apt-cd-clock > span { padding: 6px 0 4px; border-radius: 8px; }
  .apt-cd-clock b { font-size: 15px; }
  .apt-cd-clock i { font-size: 9px; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .apt-viz, .apt-vd > span, .apt-viz-k em { animation: none !important; }
  .apt-vd > span { opacity: 1; }
}

/* ---------- 2b. Apple's official App Store badge (.appb) ----------
   Apple's artwork, unaltered (assets/img/stores/). Apple's rules: at least
   40px tall on screen, and clear space of a quarter of the badge height
   all round (nothing else inside it). --h is the badge height. The badge
   itself is never faded, recoloured, animated or covered; the "Coming
   soon" note sits below the clear space. */
.appb { --h: 48px; display: inline-flex; flex-direction: column; align-items: center; flex: none; margin: calc(var(--h) / 4); line-height: 0; vertical-align: middle; }
.appb-sm { --h: 40px; }
.appb-lg { --h: 60px; }
.appb-img { display: block; height: var(--h); width: auto; max-width: none; }
.appb.is-soon { cursor: not-allowed; user-select: none; -webkit-user-select: none; }
.appb-note { margin-top: calc(var(--h) / 4); font: 800 9.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.appb.is-live { border-radius: 8px; }
.appb.is-live:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 11. Android "coming soon" badge beside the App Store badge ----------
   appStoreBadge() in app-promo.js now returns both badges inside
   .store-badges, Apple's first. The Android one is our own design (black,
   the same height, with a padlock and sticker), never a link. Google's
   "Get it on Google Play" badge is only allowed, unaltered, for apps that
   are on Google Play, so it isn't used until the Android app is live. */
.store-badges { --h: 48px; display: inline-flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 4px; flex: 0 1 auto; min-width: 0; max-width: 100%; vertical-align: middle; }
.store-badges-sm { --h: 40px; }
.store-badges-lg { --h: 60px; }
.store-badges .asb { flex: none; }
/* Line the Android badge up with Apple's (which sits inside its clear space)
   and keep its padlock out of that space. */
.store-badges .appb { margin-left: 0; }
.store-badges .asb-android { margin-top: calc(var(--h) / 4); margin-left: 8px; }

.asb-android.is-soon .asb-face { opacity: 1; filter: none; }
.asb-android .asb-text { opacity: .55; }
.asb-android .asb-text b { letter-spacing: -.01em; }
.asb-droid { width: 27px; height: 27px; opacity: .9; }
.asb-sm .asb-droid { width: 23px; height: 23px; }
.asb-lg .asb-droid { width: 33px; height: 33px; }
/* The "Coming soon" sticker on the Android badge leans the other way, so
   the pair doesn't look copy-pasted. */
.asb-android .asb-sticker { transform: rotate(-6deg); }

/* Room for two badges in the banners on phones: the link drops below. */
@media (max-width: 620px) {
  .apt-cta { flex-wrap: wrap; row-gap: 12px; }
  .apx-strip-cta { flex-wrap: wrap; row-gap: 10px; justify-content: flex-start; }
}
/* Narrow phones: both badges use the small size so they stay side by side. */
@media (max-width: 520px) {
  .store-badges, .store-badges .appb { --h: 40px; }
  .store-badges .asb-md, .store-badges .asb-lg { height: 40px; padding: 0 13px 0 10px; border-radius: 9px; gap: 6px; }
  .store-badges .asb-md .asb-logo, .store-badges .asb-lg .asb-logo { width: 20px; height: 20px; }
  .store-badges .asb-md .asb-droid, .store-badges .asb-lg .asb-droid { width: 23px; height: 23px; }
  .store-badges .asb-md .asb-text small, .store-badges .asb-lg .asb-text small { font-size: 8.5px; }
  .store-badges .asb-md .asb-text b, .store-badges .asb-lg .asb-text b { font-size: 16.5px; }
  .store-badges .asb-md .asb-sticker, .store-badges .asb-lg .asb-sticker { font-size: 8.5px; padding: 4px 7px 3px; top: -10px; right: -10px; }
  .store-badges .asb-md .asb-lock, .store-badges .asb-lg .asb-lock { width: 22px; height: 22px; left: -8px; bottom: -8px; }
  .store-badges .asb-md .asb-lock svg, .store-badges .asb-lg .asb-lock svg { width: 11px; height: 11px; }
  /* Story card: let the badge row use the space under the app icon too. */
  .apc-cta { margin-left: -66px; }
  /* The (spare) app-invite block stacks in a column on phones. */
  .ai-final .store-badges { flex-wrap: nowrap; justify-content: center; }
}