/* Vinklair Apps. Plain CSS, no build step. Dark first, light when the
   system asks for it. Each page sets its accent with a class on <body>.

   The blocks between <!-- marketing:... --> markers are written by the apps'
   release tools (What's new, the screenshot gallery, the Apple Watch row):
   keep the classes they use (.section-head, .new-grid, .new-card,
   .shot-area, .gallery, .shot, .watch-row). */

:root {
    --bg: #0b0c0f;
    --bg-raised: #15171c;
    --bg-raised-2: #1c1f26;
    --bg-sunken: #08090b;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --text: #f4f5f7;
    --text-soft: #a9afba;
    --text-faint: #6c727e;
    --accent: #49ab81;
    --accent-2: #19b0d8;
    --accent-soft: rgba(73, 171, 129, 0.16);
    --ring: rgba(255, 255, 255, 0.05);
    --shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    --shadow-soft: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    --radius: 24px;
    --max: 1180px;
    --green: #49ab81;
    --cyan: #19b0d8;
    --red: #e5393a;
    --gold: #f2b63c;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f7f7f5;
        --bg-raised: #ffffff;
        --bg-raised-2: #f1f1ee;
        --bg-sunken: #efeeea;
        --line: rgba(0, 0, 0, 0.08);
        --line-strong: rgba(0, 0, 0, 0.14);
        --text: #14161a;
        --text-soft: #4b505a;
        --text-faint: #7e838d;
        --ring: rgba(0, 0, 0, 0.05);
        --shadow: 0 30px 60px -24px rgba(20, 20, 30, 0.35);
        --shadow-soft: 0 18px 40px -20px rgba(20, 20, 30, 0.3);
    }
}

body.app-home { --accent: #19b0d8; --accent-2: #49ab81; --accent-soft: rgba(25, 176, 216, 0.15); }
body.app-free { --accent: #49ab81; --accent-2: #8fd6b4; --accent-soft: rgba(73, 171, 129, 0.16); }
body.app-pro { --accent: #e5393a; --accent-2: #ff8a7a; --accent-soft: rgba(229, 57, 58, 0.15); }
body.app-number-sense { --accent: #19b0d8; --accent-2: #f5a04a; --accent-soft: rgba(25, 176, 216, 0.15); }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 17px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3 { font-family: var(--font-round); line-height: 1.08; letter-spacing: -0.025em; margin: 0; }
h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0; }

.wrap { width: min(var(--max), 100% - 40px); margin-inline: auto; }

.skip {
    position: absolute; left: -999px; top: 8px; padding: 8px 14px; border-radius: 10px;
    background: var(--accent); color: #fff; z-index: 100;
}
.skip:focus { left: 12px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Text painted with the page's two colours. */
.ink {
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Navigation ---------- */

.nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(170%) blur(20px);
    -webkit-backdrop-filter: saturate(170%) blur(20px);
    background: color-mix(in srgb, var(--bg) 74%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, background 0.3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 66px; }
.brand {
    display: flex; align-items: center; gap: 11px; color: var(--text);
    font: 800 1.18rem/1 var(--font-round); letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5); transition: transform 0.4s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.brand span { font-weight: 500; color: var(--text-soft); margin-left: -5px; }
.nav-links { display: flex; gap: 2px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; align-items: center; }
.nav-links a {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; color: var(--text-soft);
    font-size: 0.94rem; font-weight: 550;
}
.nav-links a img { width: 22px; height: 22px; border-radius: 6px; }
.nav-links a:hover { color: var(--text); background: var(--line); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--text); background: var(--line); }
.nav-toggle { display: none; }

@media (max-width: 900px) {
    .nav-toggle {
        display: grid; place-items: center; margin-left: auto; width: 42px; height: 42px;
        border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--text); cursor: pointer;
        font-size: 1.1rem;
    }
    .nav-links {
        display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch;
        padding: 10px 16px 18px; background: var(--bg); border-bottom: 1px solid var(--line);
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 12px 14px; font-size: 1.05rem; border-radius: 14px; }
}

/* ---------- Buttons and badges ---------- */

.button {
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px;
    background: var(--accent); color: #fff; font-weight: 650; border: 0; cursor: pointer;
    box-shadow: 0 10px 24px -10px var(--accent);
    transition: transform 0.25s var(--ease), filter 0.25s;
}
.button:hover { text-decoration: none; filter: brightness(1.08); transform: translateY(-1px); }
.button.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.button.ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }

.badge-store { display: inline-block; transition: transform 0.25s var(--ease); }
.badge-store:hover { transform: translateY(-2px); }
.badge-store img { height: 54px; width: auto; }

.pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent); font-weight: 650; font-size: 0.9rem;
}
.pill:hover { text-decoration: none; filter: brightness(1.1); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: ping 2.4s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }

.hero-note { color: var(--text-faint); font-size: 0.95rem; }

/* ---------- Living background ---------- */

/* Three soft lights drifting behind a hero, in the page's colours. */
.aurora { position: absolute; inset: -20% -10% auto -10%; height: 140%; pointer-events: none; overflow: hidden; z-index: 0;
    -webkit-mask-image: linear-gradient(#000 45%, transparent 78%); mask-image: linear-gradient(#000 45%, transparent 78%); }
.aurora i {
    position: absolute; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; border-radius: 50%;
    filter: blur(70px); opacity: 0.32; mix-blend-mode: screen;
    animation: drift 22s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { background: var(--accent); left: 52%; top: 4%; }
.aurora i:nth-child(2) { background: var(--accent-2); left: 6%; top: 26%; animation-duration: 27s; animation-delay: -6s; opacity: 0.22; }
.aurora i:nth-child(3) { background: var(--red); left: 70%; top: 44%; width: 20vw; height: 20vw; animation-duration: 19s; animation-delay: -11s; opacity: 0.16; }
@media (prefers-color-scheme: light) { .aurora i { mix-blend-mode: multiply; opacity: 0.18; } .aurora i:nth-child(3) { opacity: 0.08; } }
@keyframes drift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-6vw, 4vw) scale(1.15); }
    100% { transform: translate(4vw, -3vw) scale(0.92); }
}
.grain::after {
    /* A faint dot grid over the lights, so they read as a surface. */
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(var(--ring) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}

/* ---------- Hero (app pages and home) ---------- */

.hero { position: relative; overflow: hidden; padding: 84px 0 64px; isolation: isolate; }
.hero > .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero-icon { width: 92px; height: 92px; border-radius: 23%; box-shadow: var(--shadow); }
.lede { font-size: clamp(1.12rem, 1.6vw, 1.32rem); color: var(--text-soft); max-width: 38ch; }
.hero-device { justify-self: center; width: min(380px, 100%); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.45)); animation: float 7s ease-in-out infinite; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* The darts pages: a slowly turning board behind the device. */
.board {
    position: absolute; z-index: 0; width: 1100px; height: 1100px; right: -280px; top: -230px; pointer-events: none;
    background:
        radial-gradient(circle, var(--accent-soft) 0 15%, transparent 46%),
        repeating-radial-gradient(circle, transparent 0 58px, var(--ring) 59px 61px, transparent 62px 118px),
        repeating-conic-gradient(from 9deg, var(--ring) 0 9deg, transparent 9deg 18deg);
    -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 66%);
    mask-image: radial-gradient(circle, #000 28%, transparent 66%);
    animation: spin 160s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* The arc under a title, borrowed from the darts icons' double ring. */
.arc { display: block; width: min(260px, 60%); height: 26px; margin-top: 12px; color: var(--accent); }
.arc path { stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw 1.4s 0.3s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
    .hero { padding: 48px 0 40px; }
    .hero > .wrap { grid-template-columns: 1fr; gap: 40px; }
    .board { right: -560px; top: 160px; }
    .hero-device { width: min(320px, 86%); }
}

/* ---------- Sections ---------- */

section { padding: 96px 0; position: relative; }
.section-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head p { color: var(--text-soft); font-size: 1.14rem; }
.eyebrow { color: var(--accent); font-weight: 750; font-size: 0.84rem; letter-spacing: 0.13em; text-transform: uppercase; }
.band { background: var(--bg-sunken); border-block: 1px solid var(--line); }
@media (max-width: 700px) { section { padding: 68px 0; } .section-head { margin-bottom: 32px; } }

/* Reveal as it scrolls in (site.js adds .in; without script it is just there). */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--delay, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Devices ---------- */

/* An iPhone drawn in CSS around a screen recording or screenshot. */
.phone {
    --w: 280px;
    position: relative; width: var(--w); aspect-ratio: 554 / 1200; flex: none;
    padding: calc(var(--w) * 0.035); border-radius: calc(var(--w) * 0.165);
    background: linear-gradient(145deg, #3a3d45, #15161a 40%, #2a2c32);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 40px 70px -25px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.phone .screen {
    position: relative; width: 100%; height: 100%; overflow: hidden; background: #000;
    border-radius: calc(var(--w) * 0.135);
}
.phone .screen > video, .phone .screen > img, .phone .screen picture img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s var(--ease);
}
.phone::after {
    /* The Dynamic Island. */
    content: ""; position: absolute; left: 50%; top: calc(var(--w) * 0.058); transform: translateX(-50%);
    width: 31%; height: calc(var(--w) * 0.085); border-radius: 999px; background: #000;
}
.phone.small { --w: 220px; }

/* Click to play when motion is reduced, or the browser declined autoplay. */
.play {
    position: absolute; inset: 0; display: none; place-items: center; border: 0; padding: 0; cursor: pointer;
    background: rgba(0, 0, 0, 0.25); color: #fff;
}
.play svg { width: 58px; height: 58px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); }
.needs-play .play { display: grid; }

/* ---------- The sea (Numbers by Ear) ---------- */

.sea-hero { position: relative; padding: 18px 0 0; }
.sea-frame {
    position: relative; margin-inline: auto; width: min(1600px, 100% - 32px);
    aspect-ratio: 3840 / 1646; border-radius: 34px; overflow: hidden;
    background: #6a5a9c center / cover;
    box-shadow: 0 50px 90px -40px rgba(25, 120, 160, 0.55), 0 0 0 1px var(--line);
    transform-origin: 50% 0;
}
.sea-frame video, .sea-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sea-frame .scrim { position: absolute; inset: auto 0 0 0; height: 18%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.18)); }
@media (max-width: 700px) {
    .sea-frame { aspect-ratio: 1700 / 1646; border-radius: 26px; width: calc(100% - 24px); }
}
.sea-copy { display: grid; justify-items: center; text-align: center; gap: 22px; padding: 56px 0 24px; }
.sea-copy h1 { max-width: 15ch; }
.sea-copy .lede { max-width: 46ch; margin-inline: auto; }
.sea-copy .hero-actions { justify-content: center; }
.app-chip {
    display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 999px;
    background: var(--bg-raised); border: 1px solid var(--line); font-weight: 650;
}
.app-chip img { width: 38px; height: 38px; border-radius: 10px; }
.app-chip small { color: var(--text-faint); font-weight: 500; margin-left: 2px; }

/* ---------- Words for numbers ---------- */

.marquee { display: grid; gap: 14px; overflow: hidden; padding-block: 6px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.marquee-row { display: flex; width: max-content; gap: 14px; animation: slide var(--speed, 60s) linear infinite; }
.marquee-row.reverse { animation-direction: reverse; }
.marquee:hover .marquee-row { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(calc(-50% - 7px)); } }
.word {
    display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 20px; border-radius: 18px; white-space: nowrap;
    background: var(--bg-raised); border: 1px solid var(--line); font: 650 1.12rem/1.2 var(--font-round);
}
.word small { font: 600 0.72rem/1 var(--font); color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.word.big { font-size: 1.3rem; background: linear-gradient(135deg, var(--accent-soft), transparent 80%), var(--bg-raised); }
.number-big {
    justify-self: start; font: 800 clamp(2rem, 3.4vw, 2.6rem)/1.05 var(--font-round); letter-spacing: -0.02em; white-space: nowrap;
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px;
}
.features.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .features.three { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }

/* ---------- Scroll story: one phone, steps beside it ---------- */

.story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.story-steps { display: grid; }
.story-step { min-height: 78vh; display: grid; align-content: center; gap: 16px; padding-block: 40px; opacity: 0.35; transition: opacity 0.5s var(--ease); }
.story-step.active { opacity: 1; }
.story-step h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; }
.story-step p { color: var(--text-soft); font-size: 1.1rem; max-width: 42ch; }
.story-step .step-no {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
    background: var(--accent-soft); color: var(--accent); font: 800 1rem/1 var(--font-round);
}
.story-step .step-phone { display: none; }
.story-stage { position: sticky; top: calc(50vh - 290px); height: 580px; display: grid; place-items: center; }
.story-stage .phone { --w: 268px; }
.story-stage .glow {
    position: absolute; width: 440px; height: 440px; border-radius: 50%; filter: blur(60px); opacity: 0.35;
    background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
    animation: spin 24s linear infinite;
}
/* Hidden once faded: a transparent video layer over the playing one painted black. */
.story-stage .screen > video { opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s 0.5s; }
.story-stage .screen > video.on { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease); }
.check-list { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--text-soft); }
.check-list li { display: flex; gap: 10px; align-items: baseline; }
.check-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }

@media (max-width: 900px) {
    .story { grid-template-columns: 1fr; gap: 0; }
    .story-stage { display: none; }
    .story-step { min-height: 0; opacity: 1; padding-block: 28px; justify-items: start; }
    .story-step .step-phone { display: block; justify-self: center; margin-top: 14px; --w: 250px; }
}

/* ---------- Games ---------- */

.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.game {
    position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: 28px;
    transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s;
}
.game:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.game .stage {
    position: relative; display: grid; place-items: end center; height: 360px; padding-top: 28px; overflow: hidden;
    background: radial-gradient(90% 70% at 50% 100%, var(--tint, var(--accent-soft)), transparent 75%);
}
.game .phone { --w: 200px; margin-bottom: -150px; transition: transform 0.6s var(--ease); }
.game:hover .phone { transform: translateY(-30px); }
.game .text { display: grid; gap: 8px; align-content: start; padding: 20px 22px 24px; border-top: 1px solid var(--line); }
.game p { color: var(--text-soft); font-size: 0.96rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; background: var(--line); color: var(--text-soft);
}
.tag.pro { background: linear-gradient(120deg, #f6c453, #e9963a); color: #2a1a00; }
.tag.free { background: rgba(73, 171, 129, 0.18); color: #49ab81; }
.tag.say { background: rgba(245, 160, 74, 0.18); color: #e88f2f; }
.tag.listen { background: rgba(25, 176, 216, 0.16); color: #19b0d8; }
.games-more { margin-top: 26px; color: var(--text-soft); text-align: center; }
@media (max-width: 560px) {
    /* Two to a row on a phone, as the App Store shows apps. */
    .games { grid-template-columns: 1fr 1fr; gap: 12px; }
    .game { border-radius: 22px; }
    .game .stage { height: 250px; padding-top: 18px; }
    .game .phone { --w: 136px; margin-bottom: -96px; }
    .game:hover .phone { transform: translateY(-16px); }
    .game .text { padding: 14px 14px 18px; gap: 6px; }
    .game h3 { font-size: 1.02rem; }
    .game p { font-size: 0.86rem; line-height: 1.45; }
    .tag { font-size: 0.7rem; padding: 2px 8px; }
}

/* ---------- Pricing ---------- */

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: stretch; }
.tier {
    position: relative; display: grid; gap: 16px; align-content: start; padding: 32px;
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: 28px;
}
.tier .price { font: 800 2.4rem/1 var(--font-round); letter-spacing: -0.03em; }
.tier .price small { font: 600 0.95rem/1 var(--font); color: var(--text-faint); letter-spacing: 0; margin-left: 6px; }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tier li { display: flex; gap: 12px; align-items: baseline; color: var(--text-soft); }
.tier li::before { content: "\2713"; flex: none; color: var(--accent); font-weight: 800; }
.tier.pro { border-color: transparent; background:
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    linear-gradient(135deg, #f6c453, #e9963a 40%, var(--accent)) border-box;
    border: 1.5px solid transparent; box-shadow: 0 30px 60px -30px rgba(233, 150, 58, 0.45); }
.tier.pro li::before { color: #e9963a; }
.tier .note { font-size: 0.93rem; color: var(--text-faint); }

/* ---------- Promises (privacy and the like) ---------- */

.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.promise { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 22px; background: var(--bg-raised); border: 1px solid var(--line); }
.promise p { color: var(--text-soft); font-size: 0.97rem; }

/* ---------- What's new ---------- */

.new-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.new-card {
    display: grid; grid-template-rows: auto 1fr; overflow: hidden;
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform 0.4s var(--ease), border-color 0.3s;
}
.new-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.new-card .shot-area {
    display: grid; place-items: end center; height: 330px; padding: 28px 24px 0; overflow: hidden;
    background: radial-gradient(120% 80% at 50% 100%, var(--accent-soft), transparent 70%);
}
.new-card .shot-area img { width: 220px; transition: transform 0.6s var(--ease); }
.new-card:hover .shot-area img { transform: translateY(-10px); }
.new-card .shot-area.wide img { width: 100%; max-width: 360px; align-self: center; margin-bottom: 28px; }
.new-card .text { display: grid; gap: 8px; align-content: start; padding: 22px 24px 26px; }
.new-card p { color: var(--text-soft); font-size: 0.98rem; }

/* ---------- Gallery ---------- */

/* A snapping row that starts on the content edge and runs off the right of
   the window, so the next screenshot peeks in. site.js adds the progress bar,
   the arrow buttons and the edge fades. */
.gallery {
    --bleed: calc((100vw - min(var(--max), 100vw - 40px)) / 2);
    --shot: clamp(210px, 60vw, 264px);
    --fade: min(var(--bleed), 72px);
    display: flex; gap: clamp(18px, 2.4vw, 30px);
    margin-inline: calc(var(--bleed) * -1); padding: 8px var(--bleed) 30px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--bleed);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent);
}
.gallery::-webkit-scrollbar { display: none; }
.gallery.fade-start { --fade-start: var(--fade); }
.gallery.fade-end { --fade-end: var(--fade); }
.gallery:focus-visible { outline-offset: -3px; }
.shot { flex: 0 0 var(--shot); margin: 0; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; gap: 16px; }
.shot.wide { flex-basis: calc(var(--shot) * 2); }
.shot picture { display: grid; place-items: center; height: calc(var(--shot) * 799 / 376); }
.shot img { filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.35)); transition: transform 0.5s var(--ease); }
.shot:hover img { transform: translateY(-6px); }
.shot figcaption { display: grid; gap: 2px; align-content: start; padding-inline: 4px; }
.shot figcaption strong { font-family: var(--font-round); font-size: 1.02rem; }
.shot figcaption span { color: var(--text-soft); font-size: 0.93rem; line-height: 1.45; }

.gallery-nav { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.gallery-nav[hidden] { display: none; }
.gallery-progress { position: relative; flex: 1; height: 4px; margin-right: 12px; border-radius: 4px; background: var(--line); overflow: hidden; }
.gallery-progress span { position: absolute; inset-block: 0; border-radius: inherit; background: var(--accent); transition: left 0.15s linear; }
.gallery-nav button {
    display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
    border: 1px solid var(--line); background: var(--bg-raised); color: var(--text); cursor: pointer;
    transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}
.gallery-nav button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gallery-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.gallery-nav button:disabled { opacity: 0.35; cursor: default; }

/* ---------- Features ---------- */

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.feature {
    position: relative; display: grid; gap: 10px; align-content: start; padding: 26px; overflow: hidden;
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform 0.4s var(--ease), border-color 0.3s;
}
.feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.feature::before {
    /* A light that follows the pointer (site.js sets --mx and --my). */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 70%);
}
.feature:hover::before { opacity: 1; }
.feature > * { position: relative; }
.feature .icon {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
    background: var(--accent-soft); color: var(--accent);
}
.feature .icon svg { width: 24px; height: 24px; }
.feature p { color: var(--text-soft); font-size: 0.97rem; }

/* ---------- Apple Watch strip ---------- */

.watch-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.watch-row img { width: 168px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.4)); transition: transform 0.5s var(--ease); }
.watch-row picture:nth-child(odd) img { animation: float 6s ease-in-out infinite; }
.watch-row picture:nth-child(even) img { animation: float 6s -3s ease-in-out infinite; }

/* ---------- Home: the apps ---------- */

.apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.app-card {
    position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 30px;
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: 30px; overflow: hidden;
    color: var(--text); isolation: isolate;
    transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s;
}
.app-card::after {
    content: ""; position: absolute; inset: auto -40% -60% -40%; height: 70%; z-index: -1;
    background: radial-gradient(closest-side, var(--card-accent-soft), transparent); pointer-events: none;
    transition: transform 0.6s var(--ease);
}
.app-card:hover { text-decoration: none; transform: translateY(-6px); border-color: color-mix(in srgb, var(--card-accent) 50%, transparent); box-shadow: var(--shadow-soft); }
.app-card:hover::after { transform: translateY(-12%); }
.app-card img.icon { width: 76px; height: 76px; border-radius: 22%; box-shadow: var(--shadow-soft); }
.app-card p { color: var(--text-soft); }
.app-card .more { color: var(--card-accent); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.app-card .more i { font-style: normal; transition: transform 0.3s var(--ease); }
.app-card:hover .more i { transform: translateX(4px); }
.app-card.free { --card-accent: #49ab81; --card-accent-soft: rgba(73, 171, 129, 0.24); }
.app-card.pro { --card-accent: #e5393a; --card-accent-soft: rgba(229, 57, 58, 0.22); }
.app-card.number-sense { --card-accent: #19b0d8; --card-accent-soft: rgba(25, 176, 216, 0.22); }

/* Numbers by Ear across the top: the sea on the left, words on the right. */
.app-card.featured { grid-column: 1 / -1; grid-template-columns: 1.25fr 1fr; grid-template-rows: none; gap: 0; padding: 0; }
.app-card.featured .media { position: relative; min-height: 380px; overflow: hidden; background: #6a5a9c; }
.app-card.featured .media video, .app-card.featured .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.app-card.featured:hover .media video { transform: scale(1.04); }
.app-card.featured .body { display: grid; gap: 16px; align-content: center; padding: 40px; }
.app-card.featured h3 { font-size: 2rem; font-weight: 800; }
.new-flag {
    justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
    background: linear-gradient(120deg, #19b0d8, #49ab81); color: #fff; font-weight: 750; font-size: 0.8rem; letter-spacing: 0.04em;
}
.app-card .shot-peek { position: absolute; right: -40px; bottom: -120px; width: 190px; transform: rotate(8deg); opacity: 0.95; z-index: -1; transition: transform 0.6s var(--ease); filter: drop-shadow(0 20px 30px rgba(0,0,0,0.4)); }
.app-card:hover .shot-peek { transform: rotate(4deg) translateY(-14px); }
.app-card.with-peek { padding-right: 170px; min-height: 340px; }
@media (max-width: 900px) {
    .apps { grid-template-columns: 1fr; }
    .app-card.featured { grid-template-columns: 1fr; }
    .app-card.featured .media { min-height: 0; aspect-ratio: 1700 / 1100; }
    .app-card.featured .body { padding: 28px; }
    .app-card.with-peek { padding-right: 30px; padding-bottom: 150px; }
    .app-card .shot-peek { width: 150px; right: 24px; bottom: -150px; }
}

/* Home hero: the mark, big, drawing itself. */
.home-hero { padding: 96px 0 72px; }
.home-hero > .wrap { grid-template-columns: 1.1fr 0.9fr; }
.home-hero h1 { max-width: 13ch; }
.mark-stage { position: relative; justify-self: center; width: min(440px, 90%); aspect-ratio: 1; display: grid; place-items: center; }
.mark-stage .orbit {
    position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--line-strong);
    animation: spin 60s linear infinite;
}
.mark-stage .orbit:nth-child(2) { inset: 13%; animation-duration: 40s; animation-direction: reverse; border-style: solid; border-color: var(--line); }
.mark-stage .orbit i {
    position: absolute; top: -26px; left: calc(50% - 26px); width: 52px; height: 52px; border-radius: 14px;
    background: center / cover; box-shadow: var(--shadow-soft);
    animation: spin 60s linear infinite reverse; /* keeps the icon upright */
}
.mark-stage .orbit:nth-child(2) i { animation-duration: 40s; animation-direction: normal; }
.mark-stage .orbit i.b { top: auto; bottom: -26px; }
.mark-stage .orbit i.c { top: calc(50% - 26px); left: -26px; }
.big-mark { position: relative; width: 46%; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5)); }
.big-mark .arm { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 1.1s var(--ease) forwards; }
.big-mark .arm.right { animation-delay: 0.35s; }
.big-mark .bull { transform-origin: 32px 20.5px; transform: scale(0); animation: pop 0.6s 1.1s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
@keyframes pop { to { transform: scale(1); } }

.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }

/* ---------- Compare ---------- */

.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.98rem; }
.compare-wrap {
    overflow-x: auto; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.compare th, .compare td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.compare tr:last-child td { border-bottom: 0; }
.compare tbody tr { transition: background 0.2s; }
.compare tbody tr:hover { background: var(--line); }
.compare thead th { font-family: var(--font-round); font-size: 1.05rem; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 22%; }
.compare .yes { color: #49ab81; font-weight: 700; }
.compare .no { color: var(--text-faint); }

/* ---------- Support ---------- */

.faq { display: grid; gap: 12px; max-width: 840px; }
.faq details {
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: 18px; padding: 4px 22px;
    transition: border-color 0.3s;
}
.faq details[open] { border-color: var(--line-strong); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 1.3rem; line-height: 1; transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; color: var(--text-soft); }

.contact {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
    padding: 32px 34px; margin-top: 30px; border-radius: 28px;
    background: linear-gradient(120deg, var(--accent-soft), transparent 70%), var(--bg-raised);
    border: 1px solid var(--line);
}

/* A last word before the footer, with the store badge. */
.cta { text-align: center; display: grid; justify-items: center; gap: 22px; }
.cta img.icon { width: 96px; height: 96px; border-radius: 23%; box-shadow: var(--shadow); animation: float 6s ease-in-out infinite; }

/* ---------- Legal pages ---------- */

.legal { padding: 64px 0 88px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
.legal .updated { color: var(--text-faint); margin: 12px 0 34px; }
.legal h2 { font-size: 1.35rem; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--text-soft); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; display: grid; gap: 8px; }
.legal strong { color: var(--text); }
.legal .summary {
    padding: 22px 26px; border-radius: 20px; background: var(--bg-raised); border: 1px solid var(--line);
}
.legal .summary ul { margin: 10px 0 0; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.95rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text-soft); }
.legal th { color: var(--text); font-weight: 650; }

/* ---------- Footer ---------- */

footer { padding: 52px 0 60px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 0.92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 36px; justify-content: space-between; align-items: center; }
footer .brand { font-size: 1rem; }
footer .brand-mark { width: 26px; height: 26px; border-radius: 7px; }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--text-soft); }

/* ---------- Less motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; }
    .shot img, .gallery-progress span, .game, .app-card, .feature, .new-card { transition: none; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .arc path, .big-mark .arm { stroke-dashoffset: 0; }
    .big-mark .bull { transform: none; }
    .marquee-row { flex-wrap: wrap; width: auto; }
    .marquee-row [aria-hidden="true"] { display: none; }
}