/* CS42 apps hub and coming soon (Version 2). Shared parts live in site.css. */

/* Second halves of headlines step back to grey (the old pages set them in italics) */
.hub h1 em, .hub h2 em { font-style: normal; color: var(--fg-3); }
.nw { white-space: nowrap; }
.hub-in { animation: hub-rise 1s var(--ease-out) var(--d, 0s) both; }
@keyframes hub-rise { from { opacity: 0; transform: translateY(22px); } }

/* ── Hero: the statement, then the icons at different depths ──────── */
.hub-hero { padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 64px); text-align: center; overflow: clip; }
.hub-hero .t-lead { max-width: 680px; margin: 22px auto 0; }
.hub-icons {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(12px, 1.7vw, 24px);
    width: min(100% - 2 * var(--gutter), 1120px); margin: clamp(40px, 5vw, 64px) auto 0;
}
/* data-scrub="exit" on the hero: each icon floats up at its own speed (--s) as the hero leaves */
.hub-icons li { transform: translate3d(0, calc(var(--p, 0) * var(--s, 60) * -1px), 0); }
.hub-icons img {
    width: clamp(56px, 7.4vw, 100px); height: auto; border-radius: 22.4%;
    box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px rgba(0,0,0,0.55);
    animation: hub-pop .9s var(--ease-out) calc(var(--i, 0) * 55ms + .25s) both;
}
@keyframes hub-pop { from { opacity: 0; transform: translateY(26px) scale(0.86); } }
@media (max-width: 734px) { .hub-icons { max-width: 340px; } }
.hub-stats { --cols: 3; max-width: 820px; margin: clamp(40px, 5vw, 56px) auto 0; text-align: center; }
.hub-stats .stat-label { margin-inline: auto; }
@media (max-width: 734px) { .hub-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .hub-stats .stat-num { font-size: 40px; } .hub-stats .stat-label { font-size: 13px; } }

/* ── Section heads ────────────────────────────────────────────────── */
.hub-out { padding-top: clamp(40px, 5vw, 72px); }
/* headline on one side, the paragraph on the other */
.hub-head { display: grid; gap: 18px clamp(32px, 6vw, 96px); align-items: end; }
@media (min-width: 1000px) { .hub-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hub-head .t-lead { max-width: 34em; }
/* a quieter head, stacked */
.hub-head--stack { display: block; max-width: 760px; }
.hub-head--stack .t-lead { margin-top: 16px; }
.hub-head-more { margin-top: 18px; }

/* ── App tiles: words on top, the phone climbing out of the foot ──── */
.hub-grid { list-style: none; display: grid; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 735px) {
    .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hub-app--wide, .hub-app--full { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    /* two wide tiles open the list, six fill three columns, one full-width tile closes it */
    .hub-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .hub-app { grid-column: span 2; }
    .hub-grid--2 .hub-app { grid-column: span 3; }
    /* the two wide tiles stay full width until there is room for both side by side */
    .hub-app--wide { grid-column: 1 / -1; }
    .hub-app--full { grid-column: 1 / -1; }
}
.hub-app {
    --tp: clamp(26px, 2.6vw, 36px);
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; min-width: 0;
    padding: var(--tp) var(--tp) 0;
    border-radius: var(--radius-lg); background: var(--bg-2); color: var(--fg);
    transition: transform .5s var(--ease-out);
}
/* keep the hover scale alongside the reveal (which moves with translate and scale) */
.js .hub-app[data-reveal] {
    transition: opacity .9s var(--ease) var(--d, 0s), translate 1.1s var(--ease-out) var(--d, 0s),
                scale 1.1s var(--ease-out) var(--d, 0s), transform .5s var(--ease-out);
}
.hub-app:hover { transform: scale(1.01); }
.hub-app-copy { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.hub-app-top { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hub-app-top .app-icon { flex: none; width: 60px; height: 60px; }
.hub-app h3 { min-width: 0; font-size: clamp(22px, 2vw, 26px); line-height: 1.15; letter-spacing: -0.018em; }
.hub-link { color: var(--fg); }
.hub-link:hover { text-decoration: none; }
/* the name is the tile's one link, stretched over the whole tile */
.hub-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hub-link:focus-visible { outline: none; }
.hub-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: var(--radius-lg); }
.hub-ar { display: block; margin-top: 2px; font-family: var(--font-ar); font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--fg-3); text-align: left; }
.hub-cat { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 20px; font-size: 13px; color: var(--fg-3); }
.hub-desc { margin-top: 8px; font-size: 17px; line-height: 1.45; color: var(--fg-2); }
.hub-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 14px; font-size: 14px; color: var(--fg-3); }
.hub-tags li { white-space: nowrap; }
/* Details and App Store sit on the same line in every tile of a row */
.hub-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 22px; }
.hub-foot .more { font-size: 15px; }
/* App Store: a small ghost pill above the tile's own link, with a 44px tap area */
.hub-store {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 32px; padding: 5px 14px;
    border: 1px solid var(--line-2); border-radius: 980px;
    font-size: 14px; font-weight: 500; color: var(--fg);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.hub-store::before { content: ""; position: absolute; inset: -6px -4px; }
.hub-store::after { content: "↗"; font-size: 12px; color: var(--fg-2); transition: transform .2s var(--ease); }
.hub-store:hover { border-color: var(--fg-3); background: color-mix(in srgb, var(--fg) 6%, transparent); text-decoration: none; }
.hub-store:hover::after { transform: translate(1px, -1px); }
.hub-not { font-size: 14px; color: var(--fg-3); }
/* the picture runs off the tile's bottom edge; data-scrub="enter" lifts it out as it arrives */
.hub-shot {
    position: relative; flex: none; display: flex; justify-content: center; overflow: hidden;
    height: clamp(220px, 19vw, 260px); margin: 26px calc(-1 * var(--tp)) 0;
}
.hub-shot .phone {
    --phone-w: 208px; aspect-ratio: auto; height: 450px; padding: 7px; border-radius: 38px;
    transform-origin: 50% 0;
    transform: translate3d(0, calc((1 - var(--p, 1)) * 100px), 0) scale(calc(0.94 + 0.06 * var(--p, 1)));
    transition: translate .7s var(--ease-out);
}
.hub-shot .phone img { border-radius: 31px; object-position: top; }
.hub-app:hover .hub-shot .phone { translate: 0 -10px; }

@media (min-width: 1200px) { .hub-app--wide { grid-column: span 3; } }
/* Wide and full tiles: the words centred on the left; on the right a phone that starts 48px below
   the tile's top, keeps clear of the right edge and runs about 100px off the bottom */
@media (min-width: 735px) {
    .hub-app--wide, .hub-app--full {
        --pw: 216px;
        display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--pw) + 12px); column-gap: 28px;
        min-height: 440px; padding-right: 20px; padding-bottom: 0;
    }
    .hub-app--wide .hub-app-copy, .hub-app--full .hub-app-copy { justify-content: center; padding-bottom: var(--tp); }
    .hub-app--wide .hub-foot, .hub-app--full .hub-foot { margin-top: 0; padding-top: 28px; }
    .hub-app--wide .hub-shot, .hub-app--full .hub-shot {
        height: auto; margin: 0; padding-top: calc(48px - var(--tp)); align-self: stretch; justify-content: flex-start;
    }
    .hub-app--wide .hub-shot .phone, .hub-app--full .hub-shot .phone {
        --phone-w: var(--pw); width: var(--pw); aspect-ratio: 9 / 19.5; height: auto; flex: none; align-self: flex-start;
        padding: 8px; border-radius: 40px;
    }
    .hub-app--wide .hub-shot .phone img, .hub-app--full .hub-shot .phone img { border-radius: 33px; }
    .hub-app--wide h3 { font-size: clamp(26px, 2.6vw, 34px); }
}
@media (min-width: 1100px) {
    .hub-app--full { --pw: 236px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 470px; }
    .hub-app--full .hub-app-copy { max-width: 520px; }
    .hub-app--full .hub-shot { justify-content: center; }
    .hub-app--full h3 { font-size: clamp(30px, 3vw, 40px); }
    .hub-app--full .hub-desc { font-size: 19px; }
    .hub-app--full .hub-app-top .app-icon { width: 72px; height: 72px; }
}
@media (max-width: 734px) {
    .hub-app { --tp: 22px; }
    .hub-shot { height: 150px; margin-top: 22px; }
    .hub-app--wide .hub-shot, .hub-app--full .hub-shot { height: 120px; }
}

/* Coming soon tiles wear colours taken from their own icons */
.hub-app--sider {
    color-scheme: dark; background: #2A2466; color: #F5F5F7;
    --fg: #F5F5F7; --fg-2: rgba(245,245,247,0.84); --fg-3: rgba(245,245,247,0.66);
    --accent: #FFFFFF; --accent-2: #E6E3FF; --accent-ink: #2A2466;
    --line: rgba(255,255,255,0.18); --line-2: rgba(255,255,255,0.32);
}
.hub-app--passportphotos {
    color-scheme: light; background: #F2694B; color: #16161A;
    --fg: #16161A; --fg-2: rgba(22,22,26,0.9); --fg-3: rgba(22,22,26,0.84);
    --accent: #16161A; --accent-2: #000000; --accent-ink: #FFFFFF;
    --line: rgba(22,22,26,0.18); --line-2: rgba(22,22,26,0.32);
}
.hub-app--sider .st::before, .hub-app--passportphotos .st::before { background: currentColor; }
.hub-app--sider, .hub-app--sider * { --focus: #FFFFFF; }
.hub-app--passportphotos, .hub-app--passportphotos * { --focus: #16161A; }

.hub-soon { padding-bottom: clamp(64px, 7vw, 104px); }
/* Call to action with a hairline above it */
.hub-cta {
    display: grid; gap: 24px 64px; align-items: center;
    margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .hub-cta { grid-template-columns: minmax(0, 1fr) auto; } }
.hub-cta .t-intro { max-width: 46em; }

/* How we build them: the headline holds the left column, the three ideas stack on the right */
.hub-principles { padding-top: clamp(72px, 8vw, 120px); }
.hub-principles-grid { display: grid; gap: 40px clamp(40px, 7vw, 120px); }
@media (min-width: 1000px) {
    .hub-principles-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
}
.hub-principles-head .t-lead { margin-top: 22px; max-width: 30em; }
.hub-principles-list { list-style: none; }
.hub-principles-list li { padding: 34px 0 38px; border-top: 1px solid var(--line); }
.hub-principles-list li:first-child { border-top: 0; padding-top: 6px; }
.hub-principles-list p { margin-top: 10px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: var(--fg-2); }

/* ── Coming soon page ─────────────────────────────────────────────── */
.hub-hero--soon { padding-bottom: 40px; }
.hub--soon-page .hub-soon { padding-bottom: clamp(64px, 8vw, 96px); }
.hub-pair { list-style: none; display: grid; gap: 12px; align-items: start; width: min(100% - 24px, 1680px); margin: 0 auto; }
@media (min-width: 900px) {
    .hub-pair { grid-template-columns: 1fr 1fr; }
    /* the pair is staggered, not mirrored */
    .hub-pair > :nth-child(2) { margin-top: clamp(56px, 6vw, 88px); }
}
.hub-big {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1fr);
    padding: clamp(36px, 4vw, 56px) clamp(26px, 3.6vw, 56px) 0;
    border-radius: var(--radius-lg); text-align: left;
}
.hub-big-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 30em; }
.hub-big .app-icon { width: 72px; height: 72px; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -16px rgba(0,0,0,0.5); }
/* the tile copy arrives with the page on wide screens and as it scrolls in on phones */
@media (min-width: 900px) { .js .hub-big-copy[data-reveal] { opacity: 1; translate: none; } }
@media (max-width: 899px) { .hub-big-copy.hub-in { animation: none; } }
.hub-big .t-1 { margin-top: 20px; }
.hub-big .t-1 a { color: var(--fg); }
.hub-big .t-1 a:hover { text-decoration: none; }
.hub-big .hub-cat { margin-top: 12px; font-size: 14px; }
.hub-big .hub-desc { margin-top: 14px; font-size: clamp(17px, 1.5vw, 19px); }
.hub-big .btns { margin-top: 26px; }
.hub-big-shot { display: flex; justify-content: flex-end; margin-top: 40px; padding-inline-end: 6%; height: clamp(330px, 44vw, 420px); overflow: hidden; }
.hub-big-shot:hover { text-decoration: none; }
.hub-big-shot .phone {
    --phone-w: clamp(230px, 22vw, 280px); aspect-ratio: 9 / 19.5; height: auto; flex: none; align-self: flex-start;
    padding: 8px 8px 0; border-radius: 44px 44px 0 0;
    transform-origin: 50% 0;
    transform: translate3d(0, calc((1 - var(--p, 1)) * 120px), 0) scale(calc(0.92 + 0.08 * var(--p, 1)));
}
.hub-big-shot .phone img { border-radius: 36px 36px 0 0; object-position: top; }
@media (min-width: 1200px) {
    /* copy on the left, a larger phone on the right running off the bottom edge */
    .hub-big { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 24px; min-height: 640px; }
    .hub-big-copy { padding-bottom: 48px; }
    .hub-big-shot { height: auto; margin: 0; padding: 64px 0 0; justify-content: center; align-self: stretch; }
}
.hub-out-band { margin-top: clamp(64px, 8vw, 96px); }
.hub-out-copy { display: grid; gap: 20px; }
.hub-out-band .t-intro { max-width: 44em; }
.hub-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.hub-strip img { width: clamp(40px, 4vw, 56px); height: auto; border-radius: 22.4%; box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 734px) {
    .hub-strip { flex-wrap: nowrap; gap: 6px; }
    .hub-strip img { width: 32px; }
}
.js .hub-out-band:not(.is-in) .hub-strip li { opacity: 0; transform: translateY(14px); }
.hub-strip li { transition: opacity .6s var(--ease), transform .8s var(--ease-out); }
.hub-strip li:nth-child(2) { transition-delay: .04s; } .hub-strip li:nth-child(3) { transition-delay: .08s; }
.hub-strip li:nth-child(4) { transition-delay: .12s; } .hub-strip li:nth-child(5) { transition-delay: .16s; }
.hub-strip li:nth-child(6) { transition-delay: .2s; }  .hub-strip li:nth-child(7) { transition-delay: .24s; }
.hub-strip li:nth-child(8) { transition-delay: .28s; } .hub-strip li:nth-child(9) { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    .hub-in, .hub-icons img { animation: none; }
    .hub-icons li, .hub-shot .phone, .hub-big-shot .phone { transform: none; }
    .js .hub-out-band .hub-strip li { opacity: 1; transform: none; }
    .hub-app:hover { transform: none; }
}