/* CS42 app pages (Version 2): one template for every iOS app page.
   <body class="ap" data-app="<slug>">. Sections, in order (see the comment in each page):
     ln (local nav) · hero · news (optional) · about: statement, story (optional), features, more
     · screenshots · the app's own blocks (optional) · info · privacy and terms · support · the other apps
   Shared parts live in site.css; this file only adds what app pages need. */

/* ── 1. Each app's own colour ─────────────────────────────────────── */
/* --accent drives buttons, links and checks; --app-ink is the dark of the app's own artwork,
   used behind the screenshots and on the hero stage. Light values for Snowy Owl keep text contrast. */
.ap { --app-ink: #0B1320; }

.ap[data-app="punchtrack"],
.ap[data-app="punchtrack"] .band-ink { --accent: #B4EF5C; --accent-2: #CBF68D; --accent-ink: #0E1A02; --accent-soft: rgba(180,239,92,0.14); }
.ap[data-app="punchtrack"] { --app-ink: #090A11; }
:root[data-palette="snowy-owl"] .ap[data-app="punchtrack"] { --accent: #3A7300; --accent-2: #2B5600; --accent-ink: #FFFFFF; --accent-soft: rgba(58,115,0,0.1); }

.ap[data-app="sukoon"],
.ap[data-app="sukoon"] .band-ink { --accent: #8FD6E1; --accent-2: #B2E4EB; --accent-ink: #062A30; --accent-soft: rgba(143,214,225,0.14); }
.ap[data-app="sukoon"] { --app-ink: #0C1A24; }
:root[data-palette="snowy-owl"] .ap[data-app="sukoon"] { --accent: #1A6A78; --accent-2: #12525D; --accent-ink: #FFFFFF; --accent-soft: rgba(26,106,120,0.1); }

.ap[data-app="quranwords"],
.ap[data-app="quranwords"] .band-ink { --accent: #8FD9B4; --accent-2: #B3E7CD; --accent-ink: #062417; --accent-soft: rgba(143,217,180,0.14); }
.ap[data-app="quranwords"] { --app-ink: #0E1A16; }
:root[data-palette="snowy-owl"] .ap[data-app="quranwords"] { --accent: #1B6847; --accent-2: #124E35; --accent-ink: #FFFFFF; --accent-soft: rgba(27,104,71,0.1); }

/* ── 2. Hero ──────────────────────────────────────────────────────── */
/* Wide screens: icon, name and line, then the intro and the button, beside the stage.
   Phones: the stage comes straight after the name, before the long intro. */
.ap-hero { padding: clamp(28px, 4.6vw, 72px) 0 clamp(56px, 7vw, 104px); overflow: clip; }
.ap-hero-grid { display: grid; gap: 32px; grid-template-areas: "top" "stage" "rest"; }
.ap-hero-top { grid-area: top; }
.ap-hero-grid > .ap-stage { grid-area: stage; }
.ap-hero-rest { grid-area: rest; }
@media (min-width: 900px) {
    .ap-hero-grid {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "top stage" "rest stage";
        gap: 0 clamp(44px, 6vw, 80px); align-content: center;
    }
    .ap-hero-top { align-self: end; }
    .ap-hero-rest { align-self: start; }
}
.ap-hero-icon {
    display: block; width: clamp(84px, 8.2vw, 116px); height: auto; border-radius: 22.4%;
    box-shadow: 0 0 0 1px var(--line), 0 22px 44px -24px rgba(0,0,0,0.55);
}
.ap-hero .eyebrow { margin: 30px 0 6px; }
.ap-hero .t-hero { overflow-wrap: anywhere; }
.ap-hero-line { margin-top: 10px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.16; letter-spacing: -0.02em; font-weight: 600; color: var(--fg-2); text-wrap: balance; }
.ap-hero-lead { margin-top: 22px; max-width: 36em; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.45; }
@media (max-width: 899px) { .ap-hero-lead { margin-top: 0; } }
.ap-hero .btns { margin-top: 32px; }
.ap-store svg { width: 20px; height: 20px; margin: -3px 0 0 -4px; }
.ap-hero-note { margin-top: 18px; font-size: 14px; color: var(--fg-3); }
.ap-in { animation: ap-rise 1s var(--ease-out) var(--d, 0s) both; }
@keyframes ap-rise { from { opacity: 0; transform: translateY(22px); } }

/* The stage: the app's phone climbing out of a dark tile as the page scrolls (data-scrub="view") */
.ap-stage {
    position: relative; overflow: hidden; isolation: isolate;
    aspect-ratio: 5 / 6; border-radius: var(--radius-lg);
    background: var(--app-ink);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
/* on Midnight's black page the app's own dark would vanish: use the theme's tile */
:root[data-palette="midnight"] .ap-stage { background: var(--bg-2); }
.ap-stage-rise {
    position: absolute; left: 50%; top: 14%; width: 56%; z-index: 2;
    transform: translate3d(-50%, calc((0.5 - var(--p, 0.5)) * 30%), 0);
}
.ap-stage-phone { --phone-w: 100%; margin: 0; animation: ap-phone 1.4s var(--ease-out) .25s both; }
@keyframes ap-phone { from { opacity: 0; transform: translateY(14%); } }
/* One change per app, so eleven heroes do not look the same:
   a second phone behind, moving more slowly (PunchTrack, Quran Words) */
.ap-stage--two .ap-stage-rise { left: 60%; width: 50%; top: 13%; }
.ap-stage-back {
    position: absolute; left: 7%; top: 24%; width: 40%; z-index: 1;
    transform: translate3d(0, calc((0.5 - var(--p, 0.5)) * 12%), 0) rotate(-5deg);
}
[dir="rtl"] .ap-stage--two .ap-stage-rise { left: 40%; }
[dir="rtl"] .ap-stage-back { left: auto; right: 7%; transform: translate3d(0, calc((0.5 - var(--p, 0.5)) * 12%), 0) rotate(5deg); }
.ap-stage-back .phone { --phone-w: 100%; margin: 0; opacity: 0.92; animation: ap-phone 1.4s var(--ease-out) .45s both; }
/* or the app's own art behind it (Sukoon: the leaf on water from its icon) */
.ap[data-app="sukoon"] .ap-stage { background: #0C1A24 url(/apps/sukoon/images/stage.webp) 50% 40% / cover no-repeat; }
.ap[data-app="sukoon"] .ap-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(6,18,26,0.28); }
@media (max-width: 899px) {
    .ap-stage { aspect-ratio: 1 / 1.02; }
    .ap-stage-rise { width: 52%; top: 12%; }
    .ap-stage--two .ap-stage-rise { width: 48%; }
}

/* A screen taken from an App Store panel, cropped to the device and shown in our own phone.
   Each set draws its phone a little differently, so each app sets its own crop on .ap[data-app]:
   --crop-h  the panel's height as a share of our screen (the screen's top edge lands at the top)
   --crop-x  a nudge that centres the drawn screen, so the app's own side margins stay equal
   --crop-a  the frame's shape (a touch shorter than 9/19.5, the drawn screens are cut by the panel) */
.ap { --crop-h: 143.5%; --crop-x: 0.21%; --crop-a: 9 / 18.6; }
.ap[data-app="punchtrack"] { --crop-h: 146.2%; --crop-x: 0%; }
.ap[data-app="quranwords"] { --crop-h: 147%; --crop-x: 0.07%; }
.ap[data-app="lamma"] { --crop-h: 147.3%; }
.phone.ap-crop { aspect-ratio: var(--crop-a); }
.ap-crop .ap-screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: clamp(26px, 3.2vw, 39px); background: #000; }
.ap-crop .ap-screen img {
    position: absolute; left: 50%; bottom: 0;
    width: auto; height: var(--crop-h); max-width: none; border-radius: 0; object-fit: fill;
    transform: translateX(calc(-50% + var(--crop-x)));
}

/* ── 3. News: what is new in this version, or "out now" ───────────── */
.ap-news-sec { padding-top: 0; }
.ap-news {
    display: grid; gap: 28px clamp(32px, 6vw, 96px);
    padding: clamp(30px, 5vw, 64px);
    border-radius: var(--radius-lg); background: var(--bg-2);
}
@media (min-width: 900px) { .ap-news { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ap-news-head .t-1 { margin-top: 4px; max-width: 13ch; }
.ap-news-body > p { color: var(--fg-2); }
.ap-tags { margin-top: 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px 24px; }
.ap-tags li { color: var(--fg); }
.ap-news-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
    margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
}
.ap-news-foot p { font-size: 14px; color: var(--fg-3); }

/* ── 4. About: a centred statement that lights up word by word ────── */
.ap-about-head { text-align: center; }
/* the strip's dark band brings its own padding, so About ends closer to it */
.ap-about:has(+ .ap-shots-sec) { padding-bottom: clamp(56px, 7vw, 104px); }
.ap-about-head .eyebrow { margin-bottom: 10px; }
.ap-brief { margin-top: clamp(32px, 4vw, 56px); }
.ap-brief p { font-size: clamp(24px, 2.9vw, 38px); line-height: 1.24; letter-spacing: -0.022em; font-weight: 600; }
/* statements over about sixty words step down a size */
.ap-brief--long p { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.3; letter-spacing: -0.018em; }
.ap-lead-in { color: var(--fg); }

/* Story: one phone stays put while the paragraphs pass (site.css .story does the work) */
.ap-story, .sk-steps { --shot-w: min(380px, calc((100vh - 200px) * 0.5)); --story-h: calc(var(--shot-w) * 2.1667); }
.ap-story { margin-top: clamp(88px, 11vw, 160px); }
@media (min-width: 900px) { .ap-story .story-grid, .sk-steps .story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ap-story-frame .phone, .sk-story-frame .phone { --phone-w: var(--shot-w); margin: 0 auto; }
.ap-step-text { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; letter-spacing: -0.014em; font-weight: 500; color: var(--fg-2); }

/* Features on hairlines, then the longer list behind Read more */
.ap-features { margin-top: clamp(96px, 11vw, 168px); }
.ap-features-title { margin-bottom: clamp(26px, 3vw, 44px); }
.ap-features-lead { max-width: 760px; margin: -10px 0 clamp(28px, 3vw, 44px); }
/* a last item alone on its row takes the whole row (3 across from 1000px, 2 across below) */
@media (min-width: 1000px) { .ap-specs > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; } }
@media (min-width: 735px) and (max-width: 999px) { .ap-specs > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.ap-specs > li:last-child p { max-width: 40em; }
.ap .specs h4 { font-size: 19px; line-height: 1.26; font-weight: 600; letter-spacing: -0.01em; }
.ap .specs p { margin: 6px 0 0; color: var(--fg-2); }

/* Disclosures: Read more and the FAQ (details), the full policy and terms (a button and a region) */
.ap-more > summary { list-style: none; cursor: pointer; }
.ap-more > summary::-webkit-details-marker { display: none; }
.ap-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 10px 20px 10px 22px;
    border: 1px solid var(--line-2); border-radius: 980px; background: transparent;
    font-size: 15px; font-weight: 500; color: var(--fg); cursor: pointer;
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.ap-toggle:hover { border-color: var(--fg-3); background: color-mix(in srgb, var(--fg) 4%, transparent); }
.ap-toggle::after {
    content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
    transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease-out);
}
.ap-more[open] > .ap-toggle::after, .ap-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.ap-toggle-b { display: none; }
.ap-more[open] > .ap-toggle .ap-toggle-a, .ap-toggle[aria-expanded="true"] .ap-toggle-a { display: none; }
.ap-more[open] > .ap-toggle .ap-toggle-b, .ap-toggle[aria-expanded="true"] .ap-toggle-b { display: inline; }
.ap-more[open] > :not(summary), .ap-doc.is-open { animation: ap-open .5s var(--ease-out) both; }
@keyframes ap-open { from { opacity: 0; transform: translateY(-6px); } }
html:not(.js) [data-doc-toggle] { display: none; }
.ap-more--list { margin-top: 40px; }
.ap-more-in { margin-top: 36px; }
.ap-list { list-style: none; display: grid; gap: 0 clamp(28px, 4vw, 56px); margin-top: 18px; }
@media (min-width: 900px) { .ap-list { grid-template-columns: 1fr 1fr; } }
.ap-list li { padding: 16px 0 18px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.ap-list strong { color: var(--fg); }

/* ── 5. Screenshots: a sideways strip on the app's own dark ───────── */
.ap .ap-shots-sec.band-ink { --bg: var(--app-ink); }
.ap-shots-sec { overflow-x: clip; padding-bottom: clamp(64px, 8vw, 112px); }
.ap-shots-sec .head { margin-bottom: clamp(36px, 4vw, 60px); }
/* a set with no hint line keeps its paddles beside the heading */
.ap-shots-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(36px, 4vw, 60px); }
.ap-shots-head .head { margin-bottom: 0; }
.ap-shots-head .ap-paddles { margin-bottom: 6px; }
.ap-shots { --shot-w: clamp(220px, min(20vw, (100vh - 250px) * 0.46), 296px); --edge: max(var(--gutter), calc((100vw - var(--w-wide)) / 2)); --dir: 1; }
[dir="rtl"] .ap-shots { --dir: -1; }
.ap-shots-track {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
    padding: 6px var(--edge) 10px; scroll-padding-inline: var(--edge);
    /* slides in from the side it continues to, as the section arrives (data-scrub="enter") */
    transform: translate3d(calc((1 - var(--p, 1)) * 14% * var(--dir)), 0, 0);
}
.ap-shots-track::-webkit-scrollbar { display: none; }
.ap-shots-track:focus-visible { outline-offset: -2px; }
.ap-shot { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
/* a seamless App Store set: panels touch, only the two ends are rounded */
.ap-shots--seamless .ap-shot { width: var(--shot-w); }
.ap-shots--seamless .ap-shot img { width: 100%; }
.ap-shots--seamless .ap-shot:first-child img { border-start-start-radius: 24px; border-end-start-radius: 24px; }
.ap-shots--seamless .ap-shot:last-child img { border-start-end-radius: 24px; border-end-end-radius: 24px; }
/* separate screens: each in its own phone, with a caption */
.ap-shots--phones .ap-shots-track { gap: clamp(22px, 2.6vw, 36px); }
.ap-shots--phones .ap-shot { width: clamp(214px, 18.5vw, 262px); }
.ap-shots--phones .phone { --phone-w: 100%; }
.ap-shots--phones figcaption { margin-top: 18px; font-size: 15px; color: var(--fg-2); text-align: center; }
.ap-shots-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    width: min(100% - 2 * var(--gutter), var(--w-wide)); margin: 22px auto 0;
}
.ap-shots-hint { font-size: 14px; color: var(--fg-3); }
.ap-paddles { display: flex; gap: 14px; flex: none; margin-inline-start: auto; }
[dir="rtl"] .paddle svg { transform: scaleX(-1); }

/* ── 6. Information: the spec sheet ───────────────────────────────── */
.ap-info { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1000px) {
    .ap-info { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
    .ap-info-head { position: sticky; top: calc(var(--ln-h) + 40px); align-self: start; }
}
.ap-info-head .t-lead { margin-top: 12px; }
.ap-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 3vw, 40px); margin: 0; }
@media (min-width: 735px) { .ap-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-facts > div { min-width: 0; padding: 18px 0 22px; border-top: 1px solid var(--line); }
.ap-facts dt { font-size: 13px; line-height: 1.3; color: var(--fg-3); }
.ap-facts dd { margin: 5px 0 0; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); overflow-wrap: break-word; }

/* ── 7. Privacy and terms: heading on one side, the short version on the other ── */
.ap-legal { display: grid; gap: 22px clamp(32px, 6vw, 96px); padding-block: clamp(44px, 5vw, 72px); border-top: 1px solid var(--line); }
.ap-legal:first-child { padding-top: 0; border-top: 0; }
.ap-legal:last-child { padding-bottom: 0; }
@media (min-width: 1000px) { .ap-legal { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
/* each "label: date" on its own line; the middle dots go */
.ap-legal-date { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--fg-3); }
.ap-legal-date > span { display: block; }
.ap-legal-date > .ap-sep { display: none; }
.ap-legal-brief { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--fg-2); }
.ap-legal-brief strong { color: var(--fg); }
/* a short privacy promise reads as a statement */
.ap-legal-brief--big { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.24; letter-spacing: -0.02em; font-weight: 600; color: var(--fg-3); }
/* the jump targets land with room under the local nav, not tucked 12px below it */
.ap-legal[id], .ap-support[id] { scroll-margin-top: calc(var(--ln-h, 0px) + 44px); }
/* the pill opens the text here; the page link beside it is the quieter way */
.ap-legal-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; }
.ap-legal-page.more { display: inline-flex; align-items: center; min-height: 24px; font-size: 15px; color: var(--fg-3); }
.ap-legal-page.more:hover { color: var(--fg); text-decoration: none; }
.ap-doc { margin-top: 30px; max-width: 760px; font-size: 16px; }
.ap-doc code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }
.ap-doc table { margin: 1.2em 0; }
.ap-meta { font-size: 13px !important; color: var(--fg-3) !important; }

/* ── 8. Support ───────────────────────────────────────────────────── */
.ap-support { padding-top: 0; }
.ap-support-grid { display: grid; gap: 22px clamp(32px, 6vw, 96px); padding-top: clamp(44px, 5vw, 72px); border-top: 1px solid var(--line); }
@media (min-width: 1000px) { .ap-support-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.ap-support-head .t-lead { margin-top: 12px; }
.ap-support-body > p:first-child { font-size: clamp(17px, 1.5vw, 19px); color: var(--fg-2); max-width: 44em; }
.ap-contact { list-style: none; display: grid; gap: 6px; margin-top: 16px; font-size: clamp(17px, 1.5vw, 19px); }
.ap-more--faq { margin-top: 32px; }
.ap-faq { margin-top: 28px; }
/* each question is a heading inside its summary (heading navigation), set like the summary text */
.ap-q { margin: 0; font: inherit; letter-spacing: inherit; }
.ap-faq .faq-a ul, .ap-faq .faq-a ol { padding-inline-start: 1.2em; }
.ap-faq .faq-a li + li { margin-top: 0.5em; }
.ap-faq .faq-a strong { color: var(--fg); }
.ap-reply { margin-top: 30px; font-size: 14px; color: var(--fg-3); }

/* ── 9. The other apps: a quiet row before the footer ─────────────── */
.ap-others { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.ap-others-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 18px; }
.ap-others-list li { width: 92px; }
.ap-others-list a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 13px; line-height: 1.25; color: var(--fg-2); }
.ap-others-list a:hover { color: var(--fg); text-decoration: none; }
.ap-others-list img { width: 56px; height: 56px; transition: transform .3s var(--ease-out); }
.ap-others-list a:hover img { transform: translateY(-3px); }
.ap-others-all { margin-top: 30px; text-align: center; }

/* ── 10. PunchTrack: the seven app themes ─────────────────────────── */
.pt-themes {
    list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(10px, 1.3vw, 18px); margin-top: clamp(40px, 5vw, 64px);
}
.pt-theme {
    --i: 0;
    display: flex; flex-direction: column; min-width: 0;
    aspect-ratio: 9 / 16; padding: 14px 12px 16px;
    border-radius: clamp(18px, 1.8vw, 26px);
    background: var(--t-bg); color: var(--t-fg);
    box-shadow: 0 0 0 1px var(--line);
    /* the row rises in a wave as it scrolls in (data-scrub="enter") */
    transform: translate3d(0, calc((1 - var(--p, 1)) * (36px + var(--i) * 22px)), 0);
}
.pt-theme:nth-child(2) { --i: 1; } .pt-theme:nth-child(3) { --i: 2; } .pt-theme:nth-child(4) { --i: 3; }
.pt-theme:nth-child(5) { --i: 4; } .pt-theme:nth-child(6) { --i: 5; } .pt-theme:nth-child(7) { --i: 6; }
/* each card reads as the Train tab in that theme: a title, the Start workout bar, the week's ring */
.pt-card { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 12px 10px; border-radius: 12px; background: var(--t-card); }
.pt-card i, .pt-card b, .pt-card s, .pt-card u { display: block; text-decoration: none; }
.pt-t { width: 60%; height: 7px; border-radius: 4px; background: var(--t-fg); }
.pt-go { display: flex !important; align-items: center; justify-content: flex-end; height: 26px; padding: 0 5px; border-radius: 8px; background: var(--t-pill); }
.pt-go u { width: 16px; height: 16px; border-radius: 50%; background: var(--t-card); }
.pt-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.pt-ring {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: conic-gradient(var(--t-pill) 0 72%, color-mix(in srgb, var(--t-muted) 28%, transparent) 72% 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
.pt-row i { flex: 1; height: 6px; border-radius: 3px; background: var(--t-muted); opacity: 0.55; }
.pt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.pt-stats i { height: 30px; border-radius: 7px; background: color-mix(in srgb, var(--t-muted) 22%, transparent); }
.pt-m { width: 44%; height: 6px; margin-top: auto; border-radius: 3px; background: var(--t-muted); opacity: 0.4; }
.pt-name { margin-top: 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pt-sub { min-height: calc(2 * 1.3em); margin-top: 2px; font-size: 12px; line-height: 1.3; opacity: 0.72; }
.pt-theme--kinetic  { --t-bg: #050505; --t-fg: #FFFFFF; --t-card: #1C1D21; --t-muted: #ADB1B8; --t-pill: #A8F04B; }
.pt-theme--midnight { --t-bg: #0D1422; --t-fg: #F5F7FA; --t-card: #172033; --t-muted: #A9B4C7; --t-pill: #FF8A3D; }
.pt-theme--forest   { --t-bg: #0A120E; --t-fg: #F3F7F2; --t-card: #142019; --t-muted: #A6B5AB; --t-pill: #F2C14E; }
.pt-theme--mono     { --t-bg: #000000; --t-fg: #FFFFFF; --t-card: #161616; --t-muted: #A1A1A6; --t-pill: #F5F5F7; }
.pt-theme--daylight { --t-bg: #F6F6F4; --t-fg: #1A1B1E; --t-card: #FFFFFF; --t-muted: #5F6065; --t-pill: #B03A00; }
.pt-theme--coastal  { --t-bg: #F2F6F7; --t-fg: #14232B; --t-card: #FFFFFF; --t-muted: #55666E; --t-pill: #0B6E7A; }
.pt-theme--sand     { --t-bg: #F5F1E9; --t-fg: #1B241E; --t-card: #FFFFFF; --t-muted: #575F59; --t-pill: #1F6B45; }
@media (max-width: 899px) {
    .pt-themes {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter);
    }
    .pt-themes::-webkit-scrollbar { display: none; }
    .pt-theme { flex: 0 0 150px; scroll-snap-align: start; }
}

/* ── 11. Sukoon: the word, and the story ──────────────────────────── */
.ap-ar-display, .ap-ar-display * { font-family: "Amiri", var(--font-ar); font-weight: 400; letter-spacing: 0; }
.sk-hero-ar { margin-top: 12px; font-size: clamp(44px, 5vw, 68px); line-height: 1.3; color: var(--accent); text-align: left; }
.sk-meaning { display: grid; gap: 28px clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(88px, 11vw, 150px); }
@media (min-width: 900px) { .sk-meaning { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.sk-meaning .sk-word {
    position: relative; width: fit-content; margin: 0 auto;
    font-size: clamp(120px, 17vw, 240px); line-height: 1.75; color: var(--fg);
}
/* the same word twice in one grid cell; the top copy is clipped to the sukun mark over the last letter */
.sk-meaning .sk-word { display: grid; }
.sk-word > span { grid-area: 1 / 1; }
.sk-mark { color: var(--accent); clip-path: inset(2% 80% 78% 6%); visibility: hidden; }
.ap-amiri .sk-mark { visibility: visible; }
.sk-meaning p { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; color: var(--fg-2); }
.sk-meaning em, .sk-meaning [lang="ar"] { color: var(--fg); }
.sk-lists { display: grid; gap: 8px clamp(28px, 4vw, 56px); }
@media (min-width: 900px) { .sk-lists { grid-template-columns: 1fr 1fr; } }
.sk-lists > div { padding-top: 18px; border-top: 1px solid var(--line); }
.sk-lists p { margin-top: 10px; color: var(--fg-2); }
.sk-story .head .t-1 { margin-top: 6px; }
.sk-quote { margin: clamp(48px, 6vw, 80px) 0 0; max-width: 1000px; }
.sk-quote blockquote { margin: 0; }
.sk-quote .pull { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.1; text-wrap: balance; }
.sk-quote figcaption { margin-top: 22px; font-size: 17px; color: var(--fg-3); }
.sk-steps { margin-top: clamp(56px, 7vw, 104px); }
/* the big word already leaves air below it */
.sk-meaning + .ap-features { margin-top: clamp(48px, 6vw, 88px); }
.sk-step { max-width: 30em; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; color: var(--fg-2); }
.sk-peace { margin-top: 22px; font-size: clamp(19px, 1.8vw, 23px); color: var(--fg); font-weight: 600; }

/* ── 12. Quran Words: Arabic, right to left ───────────────────────── */
/* Arabic letters join: never track them */
main :lang(ar) { letter-spacing: 0 !important; }
.ap bdi { white-space: nowrap; }
.ap:lang(ar) { line-height: 1.7; }
.ap:lang(ar) .t-hero { line-height: 1.22; }
.ap:lang(ar) .t-display, .ap:lang(ar) .t-1, .ap:lang(ar) .t-2 { line-height: 1.3; }
.ap:lang(ar) .ap-brief p { line-height: 1.55; font-weight: 500; }
.ap:lang(ar) .eyebrow, .ap:lang(ar) .ap-hero-line { line-height: 1.5; }
/* Arabic headings need a little more room beside the spec sheet, policies and support */
@media (min-width: 1000px) {
    .ap:lang(ar) .ap-info, .ap:lang(ar) .ap-legal, .ap:lang(ar) .ap-support-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.ap:lang(ar) .ap-info-head .t-1, .ap:lang(ar) .ap-legal-head .t-1, .ap:lang(ar) .ap-support-head .t-1 { font-size: clamp(30px, 4vw, 48px); }
[dir="rtl"] .st::before, [dir="rtl"] .st--new::before, [dir="rtl"] .st--live::before { margin: 0 1px 0 6px; }
[dir="rtl"] .ap-toggle { padding: 10px 22px 10px 20px; }
.ap-en { display: block; margin-top: 10px; font-family: var(--font); font-size: clamp(19px, 2vw, 26px); line-height: 1.2; font-weight: 500; letter-spacing: -0.012em; color: var(--fg-3); }
[dir="rtl"] .ap-en { text-align: right; }
/* three words from the app: the first large, the other two stacked beside it */
.qw-words { list-style: none; display: grid; gap: 14px; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 735px) {
    .qw-words { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .qw-word:first-child { grid-row: 1 / span 2; justify-content: center; }
    .qw-word:first-child b { font-size: clamp(76px, 8vw, 112px); }
    .qw-word:first-child span { font-size: 23px; }
}
.qw-word {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: clamp(28px, 3.4vw, 44px) 24px clamp(24px, 3vw, 34px);
    border-radius: var(--radius-lg); background: var(--bg-2);
}
.qw-word b { font-family: "Amiri", var(--font-ar); font-weight: 700; font-size: clamp(44px, 4.4vw, 60px); line-height: 1.5; color: var(--gold); }
.qw-word span { margin-top: 8px; font-size: 19px; font-weight: 600; color: var(--fg); }
.qw-word small { margin-top: 10px; font-size: 14px; color: var(--fg-3); }
.qw-paras { display: grid; gap: 22px clamp(28px, 4vw, 56px); margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 900px) { .qw-paras { grid-template-columns: 1fr 1fr; } }
.qw-paras p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.75; color: var(--fg-2); }
.qw-juz { list-style: none; margin-top: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.qw-juz li {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 28px; align-items: center;
    padding: 20px 0 22px; border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .qw-juz li { grid-template-columns: minmax(0, 2.2fr) minmax(0, 3fr) minmax(0, 5fr); } }
.qw-juz-num { font-size: clamp(21px, 2vw, 26px); font-weight: 600; color: var(--fg); }
.qw-juz-range { font-size: 17px; color: var(--fg); }
.qw-juz-meta { font-size: 14px; color: var(--fg-3); }
.qw-juz-bar { display: grid; gap: 10px; }
.qw-juz-bar i {
    display: block; height: 8px; width: calc(var(--n) * 100%); border-radius: 4px; background: var(--accent);
    transform-origin: right center; transition: transform 1.1s var(--ease-out) calc(var(--k, 0) * 60ms + .1s);
}
.js .qw-juz:not(.is-in) .qw-juz-bar i { transform: scaleX(0); }
.qw-juz-note { margin-top: 22px; color: var(--fg-3); }

/* ── 13. Phones ───────────────────────────────────────────────────── */
@media (max-width: 734px) {
    .ap-hero .eyebrow { margin-top: 24px; }
    .ap-news-foot { flex-direction: column; align-items: flex-start; }
    .ap-shots-foot { align-items: flex-start; }
    .ap-legal-head .t-1, .ap-support-head .t-1, .ap-info-head .t-1 { font-size: 34px; }
    .ap-others-list {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); gap: 18px 13px;
    }
    .ap-others-list::-webkit-scrollbar { display: none; }
    /* four whole icons and about 20px of the fifth icon (not its 72px cell) at 390, so the row reads as scrollable */
    .ap-others-list li { flex: none; width: 72px; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-in, .ap-stage-phone, .ap-stage-back .phone { animation: none; }
    .ap-stage-rise { transform: translate3d(-50%, -6%, 0); }
    .ap-stage-back { transform: rotate(-5deg); }
    [dir="rtl"] .ap-stage-back { transform: rotate(5deg); }
    .ap-shots-track, .pt-theme { transform: none; }
    .js .qw-juz .qw-juz-bar i { transform: none; }
    .ap-more[open] > :not(summary), .ap-doc.is-open { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   The other eight apps: their colours, their stages, and the blocks only they use
   (added for the rollout; above this line only the template notes of rollout round 2 changed:
   balanced hero line, lone last spec, jump margins, legal link height, the others row gap;
   round 3: About's bottom padding before the strip)
   ══════════════════════════════════════════════════════════════════ */

/* ── 14. Colours: the accent from each icon, the dark of each App Store set ── */
.ap[data-app="geoquiz"], .ap[data-app="geoquiz"] .band-ink { --accent: #7ED6B0; --accent-2: #A9E6CB; --accent-ink: #06261C; --accent-soft: rgba(126,214,176,0.14); }
.ap[data-app="geoquiz"] { --app-ink: #0D1F1A; }
:root[data-palette="snowy-owl"] .ap[data-app="geoquiz"] { --accent: #1E6B55; --accent-2: #155040; --accent-ink: #FFFFFF; --accent-soft: rgba(30,107,85,0.1); }

.ap[data-app="photosweep"], .ap[data-app="photosweep"] .band-ink { --accent: #5FD0D6; --accent-2: #87DDE1; --accent-ink: #052A2D; --accent-soft: rgba(95,208,214,0.14); }
.ap[data-app="photosweep"] { --app-ink: #0A0B21; }
:root[data-palette="snowy-owl"] .ap[data-app="photosweep"] { --accent: #11707A; --accent-2: #0B5560; --accent-ink: #FFFFFF; --accent-soft: rgba(17,112,122,0.1); }

.ap[data-app="pixelthat"], .ap[data-app="pixelthat"] .band-ink { --accent: #8DB8F2; --accent-2: #B0CEF6; --accent-ink: #0A1E3A; --accent-soft: rgba(141,184,242,0.14); }
.ap[data-app="pixelthat"] { --app-ink: #0F1E33; }
:root[data-palette="snowy-owl"] .ap[data-app="pixelthat"] { --accent: #2B5FA8; --accent-2: #1F4A85; --accent-ink: #FFFFFF; --accent-soft: rgba(43,95,168,0.1); }

.ap[data-app="42pdfeditor"], .ap[data-app="42pdfeditor"] .band-ink { --accent: #F08A80; --accent-2: #F5ABA3; --accent-ink: #3A0906; --accent-soft: rgba(240,138,128,0.14); }
.ap[data-app="42pdfeditor"] { --app-ink: #1A1012; }
:root[data-palette="snowy-owl"] .ap[data-app="42pdfeditor"] { --accent: #B22B23; --accent-2: #8E201A; --accent-ink: #FFFFFF; --accent-soft: rgba(178,43,35,0.1); }

.ap[data-app="lamma"], .ap[data-app="lamma"] .band-ink { --accent: #E8A07A; --accent-2: #F0BC9F; --accent-ink: #3A1806; --accent-soft: rgba(232,160,122,0.14); }
.ap[data-app="lamma"] { --app-ink: #1E140E; }
:root[data-palette="snowy-owl"] .ap[data-app="lamma"] { --accent: #A4451F; --accent-2: #82361A; --accent-ink: #FFFFFF; --accent-soft: rgba(164,69,31,0.1); }

.ap[data-app="42editor"], .ap[data-app="42editor"] .band-ink { --accent: #7FC7C9; --accent-2: #A3D8D9; --accent-ink: #062A2B; --accent-soft: rgba(127,199,201,0.14); }
.ap[data-app="42editor"] { --app-ink: #0C192B; }
:root[data-palette="snowy-owl"] .ap[data-app="42editor"] { --accent: #2C6E70; --accent-2: #205456; --accent-ink: #FFFFFF; --accent-soft: rgba(44,110,112,0.1); }

.ap[data-app="sider"], .ap[data-app="sider"] .band-ink { --accent: #B3A6F0; --accent-2: #CDC4F6; --accent-ink: #1B1544; --accent-soft: rgba(179,166,240,0.14); }
.ap[data-app="sider"] { --app-ink: #1E1743; }
:root[data-palette="snowy-owl"] .ap[data-app="sider"] { --accent: #4A3FA0; --accent-2: #3A3180; --accent-ink: #FFFFFF; --accent-soft: rgba(74,63,160,0.1); }

.ap[data-app="passportphotos"], .ap[data-app="passportphotos"] .band-ink { --accent: #F7919A; --accent-2: #FAB2B8; --accent-ink: #3D0A10; --accent-soft: rgba(247,145,154,0.14); }
.ap[data-app="passportphotos"] { --app-ink: #1D1A33; }
:root[data-palette="snowy-owl"] .ap[data-app="passportphotos"] { --accent: #B23A47; --accent-2: #8E2E39; --accent-ink: #FFFFFF; --accent-soft: rgba(178,58,71,0.1); }

/* ── 15. Stages: each hero tile in a colour from the app's own App Store art ──
   every tile has to stand apart from all three page colours (#0E2841, #FFFFFF, #000000) */
.ap[data-app="geoquiz"] .ap-stage        { background: #D3EDE0; }
.ap[data-app="photosweep"] .ap-stage     { background: #4A2F66; }
.ap[data-app="pixelthat"] .ap-stage      { background: #5DA7F4; }
.ap[data-app="42pdfeditor"] .ap-stage    { background: #E4483F; }
.ap[data-app="lamma"] .ap-stage          { background: #F3DFC3; }
.ap[data-app="42editor"] .ap-stage       { background: #1F5257; }
.ap[data-app="sider"] .ap-stage          { background: #4A3769; }
.ap[data-app="passportphotos"] .ap-stage { background: #FEDFB2; }
/* the second phone on the right instead of the left */
.ap-stage--flip .ap-stage-rise { left: 40%; }
.ap-stage--flip .ap-stage-back { left: auto; right: 7%; transform: translate3d(0, calc((0.5 - var(--p, 0.5)) * 12%), 0) rotate(5deg); }

/* ── 16. About: the detail under the statement; Key Features after the strip ── */
.ap-paras { display: grid; gap: 22px clamp(28px, 4vw, 56px); margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 900px) { .ap-paras:not(.ap-paras--one) { grid-template-columns: 1fr 1fr; } }
.ap-paras p { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--fg-2); }
/* one paragraph, or one note, sits on the statement's own edge at text width */
.ap-paras--one p, .ap-notes--one { max-width: var(--w-text); }
.ap-notes--one { grid-template-columns: minmax(0, 1fr) !important; }
.ap-notes-wrap { margin-top: clamp(56px, 7vw, 96px); }
.ap-notes h3 { font-size: 19px; line-height: 1.26; }
.ap-notes p { margin: 8px 0 0; color: var(--fg-2); }
.ap-notes p + p { margin-top: 10px; }
.ap-more-in .ap-notes { margin-top: 4px; }
/* Read more on its own follows the statement closely, on the same edge */
.ap-features--more { margin-top: 32px; }
/* Key Features as its own section after the strip */
.ap-feats-sec .ap-features { margin-top: 0; }

/* ── 17. The app's own blocks ─────────────────────────────────────── */
.ap-extra .head { margin-bottom: clamp(32px, 4vw, 52px); }
.ap-extra .specs h3 { font-size: 19px; }
.ap-extra-note { max-width: 760px; margin-top: 28px; font-size: 15px; color: var(--fg-3); }
.ap-extra-sub { margin: 40px 0 6px; }
/* neighbours on the same background share one section's padding, not two */
.ap-feats-sec + .ap-extra, .ap-extra + .ap-extra { padding-top: 0; }
/* the last block before the App Information band does not double the band's own padding */
.ap-extra:has(+ .band-alt) { padding-bottom: clamp(40px, 5vw, 72px); }

/* numbered steps on hairlines; each numeral lights as its own row rises into the lower third of the screen */
.ap-numbered { list-style: none; counter-reset: ap-num; display: grid; gap: 0 clamp(28px, 4vw, 56px); }
@media (min-width: 900px) {
    .ap-numbered { grid-template-columns: 1fr 1fr; }
    .ap-numbered > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ap-numbered li { counter-increment: ap-num; position: relative; padding: 22px 0 26px 64px; border-top: 1px solid var(--line); color: var(--fg-2); }
.ap-numbered li::before {
    content: counter(ap-num); position: absolute; left: 0; top: 18px;
    font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums;
    opacity: clamp(0.22, (var(--p, 1) - 0.3) * 3.5, 1);
}
.ap-numbered strong, .ap-numbered h3 { display: block; margin: 0 0 4px; font-size: 19px; line-height: 1.26; font-weight: 600; color: var(--fg); }
.ap-numbered p { margin: 0; }
.ap-numbered li > p { max-width: 40em; }
/* a plain list in an app's own section lights row by row the same way (PixelThat's "More in the app") */
.ap-list--lit > li { opacity: clamp(0.35, (var(--p, 1) - 0.15) * 3, 1); }

/* hairline rows: a name on the left, the text on the right (GeoQuiz's ways to play, Lamma's decks) */
.ap-rows { list-style: none; border-bottom: 1px solid var(--line); }
.ap-row { display: grid; gap: 8px 32px; padding: 22px 0 24px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .ap-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; } }
.ap-row h3 { font-size: 21px; line-height: 1.24; letter-spacing: -0.014em; }
.ap-row > p { margin: 0; max-width: 44em; color: var(--fg-2); }
/* a deck: its colour as a small dot, the Arabic name beside the English, the count under them */
.ap-deck h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ap-deck h3::before {
    content: ""; flex: none; align-self: center; width: 10px; height: 10px; margin-right: -2px;
    border-radius: 50%; background: var(--deck, var(--accent));
}
.ap-deck h3 .ar { font-family: var(--font-ar); font-size: 18px; font-weight: 600; color: var(--fg-3); }
.ap-deck .deck-meta { margin-top: 4px; padding-left: 20px; font-size: 14px; color: var(--accent); }

/* two conversion tiles (42 PDF Editor): plain tiles that close in from either side as they arrive */
.ap-convs { list-style: none; display: grid; gap: 16px; }
@media (min-width: 900px) { .ap-convs { grid-template-columns: 1fr 1fr; } }
.ap-conv { padding: clamp(28px, 3.4vw, 44px); border-radius: var(--radius-lg); background: var(--bg-2); }
@media (min-width: 900px) {
    .ap-conv--a { transform: translate3d(calc((1 - var(--p, 1)) * -48px), 0, 0); opacity: calc(0.35 + var(--p, 1) * 0.65); }
    .ap-conv--b { transform: translate3d(calc((1 - var(--p, 1)) * 48px), 0, 0); opacity: calc(0.35 + var(--p, 1) * 0.65); }
}
.ap-conv h3 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.018em; }
.ap-conv p { margin-top: 8px; color: var(--fg-2); }
.ap-conv .conv-meta { color: var(--fg-3); font-size: 15px; }
.ap-conv .facts { margin-top: 12px; gap: 8px; }

/* language groups (42 Editor) */
.ap-langs { list-style: none; border-bottom: 1px solid var(--line); }
.ap-lang { display: grid; gap: 10px 32px; padding: 22px 0 24px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .ap-lang { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; } }
.ap-lang h3 { font-size: 21px; letter-spacing: -0.014em; }
.ap-lang-meta { margin-top: 2px; font-size: 14px; color: var(--accent); }
.ap-lang-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ap-lang-list li { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; color: var(--fg); }

/* formats drawn to scale (Passport Photos): eight across on a wide screen, four, then two on phones;
   each tile takes two rows of the grid, so every print sits on one bottom line and every caption starts on one top line */
.format-grid { --mm: 2.2px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 40px 22px; }
@media (max-width: 1239px) { .format-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.format-tile { margin: 0; min-width: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 14px; justify-items: center; }
@supports not (grid-template-rows: subgrid) { .format-tile { grid-template-rows: 1fr auto; } }
.format-tile .format-print { align-self: end; }
.format-tile figcaption { align-self: start; }
/* as the grid scrolls in, each tile's print and caption rise in a short wave across the row
   (translate, so the tilt, the hover lift and the alignment at rest are untouched; the tile itself stays put) */
.format-tile { --i: 0; }
.format-tile > * { translate: 0 calc((1 - var(--p, 1)) * (20px + var(--i) * 12px)); }
.format-tile:nth-child(2) { --i: 1; } .format-tile:nth-child(3) { --i: 2; } .format-tile:nth-child(4) { --i: 3; }
.format-tile:nth-child(5) { --i: 4; } .format-tile:nth-child(6) { --i: 5; } .format-tile:nth-child(7) { --i: 6; } .format-tile:nth-child(8) { --i: 7; }
@media (max-width: 1239px) {
    .format-tile:nth-child(4n+1) { --i: 0; } .format-tile:nth-child(4n+2) { --i: 1; }
    .format-tile:nth-child(4n+3) { --i: 2; } .format-tile:nth-child(4n) { --i: 3; }
}
@media (max-width: 734px) { .format-tile:nth-child(odd) { --i: 0; } .format-tile:nth-child(even) { --i: 1; } }
.format-print {
    width: calc(var(--w) * var(--mm)); height: calc(var(--h) * var(--mm));
    border-radius: 3px; overflow: hidden; color: #231B2B;
    box-shadow: 0 0 0 1px var(--line), 0 18px 34px -18px rgba(0,0,0,0.55);
    transform: rotate(var(--tilt, 0deg)); transition: transform .5s var(--ease-out);
}
.format-tile:hover .format-print { transform: rotate(0deg) translateY(-4px); }
.format-print svg { display: block; width: 100%; height: 100%; }
.format-tile figcaption { text-align: center; line-height: 1.4; }
.fmt-size { display: block; font-size: 15px; font-weight: 600; color: var(--fg); }
.fmt-head { display: block; font-size: 13px; color: var(--accent); }
.fmt-where { display: block; font-size: 13px; color: var(--fg-3); }
@media (max-width: 734px) { .format-grid { --mm: 1.7px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; } }

/* ── 18. Hero extras: a second link, Sider's four facts ───────────── */
.ap-hero .btns .more { font-size: 17px; }
.ap-hero-facts { margin-top: 22px; grid-template-columns: repeat(2, max-content); gap: 8px 28px; }
.ap-hero-facts li { color: var(--fg-2); font-size: 15px; }

/* ── 19. Waitlists (Sider, Passport Photos) ───────────────────────── */
.ap-wl-form { display: grid; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 520px; }
.ap-wl-form label { font-size: 14px; color: var(--fg-3); }
.ap-wl-form input[type="email"], .ap-wl-dlg-form input {
    width: 100%; min-height: 48px; padding: 12px 16px;
    border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); color: var(--fg); font-size: 17px;
}
.ap-wl-form input[type="email"]:focus, .ap-wl-dlg-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ap-wl-form .btn { justify-self: start; }
.wl-hp, .ap-hp { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.wl-status { min-height: 1.3em; font-size: 14px; color: var(--fg-3); }
.wl-status.is-ok { color: var(--accent); }
.wl-status.is-error, .ap-wl-error { color: var(--rose); }
.ap-wl-dlg-form { display: grid; gap: 14px; margin-top: 22px; }
.ap-wl-dlg-form .field + .field { margin-top: 0; }
.ap-wl-error { min-height: 1.2em; font-size: 14px; }
.ap-wl-dlg-form .btn { justify-self: start; }
.ap-wl-success { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: var(--accent-soft); color: var(--fg); }
.ap-news-foot .btn.is-joined { opacity: 0.7; }

/* ── 20. Sider: tap a panel to see it large ───────────────────────── */
.ap-shot-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ap-shot-btn:focus-visible { outline-offset: -3px; }
.ap-lb { width: min(100% - 32px, 560px); background: var(--bg-2); }
.ap-lb-in { position: relative; display: grid; justify-items: center; gap: 14px; padding: 52px 24px 24px; }
.ap-lb img { width: auto; max-width: 100%; max-height: calc(100vh - 220px); border-radius: 18px; }
.ap-lb-caption { font-size: 15px; color: var(--fg-2); text-align: center; }
.ap-lb-count { color: var(--fg-3); }
.ap-lb-nav { display: flex; gap: 14px; }

/* ── 21. Support: a FAQ that is open from the start, and a page link ── */
.ap-faq-head { margin-top: 36px; }
.ap-faq--open { margin-top: 18px; }
.ap-support-p { margin-top: 14px; color: var(--fg-2); }
.ap-support-link { margin-top: 24px; }
.ap-legal-list { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
    .ap-stage--flip .ap-stage-back { transform: rotate(5deg); }
    .format-print { transition: none; }
    .format-tile > * { translate: none; }
}

/* ── 22. Rollout touches ──────────────────────────────────────────── */
/* long names run to three lines at hero size: GeoQuiz, Passport Photos */
.ap[data-app="geoquiz"] .ap-hero .t-hero,
.ap[data-app="passportphotos"] .ap-hero .t-hero { font-size: clamp(44px, 5.6vw, 76px); }
/* Lamma's Arabic name sits on its own line under the heading */
.ap-hero-ar {
    margin-top: 6px; text-align: left;
    font-family: var(--font-ar); font-size: clamp(34px, 4.2vw, 58px); font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--accent);
}
/* a long "what is new" heading gets more room, balanced */
.ap-news-head .t-1.ap-news-long { max-width: 18ch; font-size: clamp(30px, 2.8vw, 40px); text-wrap: balance; }
/* words that never break: platform names, format ranges */
.ap .nw { white-space: nowrap; }