/* Base: self-hosted Space Grotesk (OFL, variable 300-700), a metric-matched
   fallback so the font swap causes no layout shift, a minimal reset, surfaces,
   buttons and store badges. No blanket font-weight rules on p/span/div. */

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The fallback while the web font loads: local Arial, sized so text breaks into
   the same lines and nothing moves when Space Grotesk arrives. Sizes were swept
   against the hero's real column widths and font sizes at 15 viewports, 360 to
   2560 wide (.loonee-verify/out/v3/fallback-sweep.mjs): the headline's lines
   match from 98.75% to 101.75% with a real Arial Bold (synthetic bold widens
   differently per engine), and body text averages 108% of Arial. The ascent
   and descent overrides scale with size-adjust, so each face carries its own:
   Space Grotesk's 0.984em / 0.292em divided by its size-adjust. */
@font-face {
    font-family: "Space Grotesk Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 300 500;
    size-adjust: 108%;
    ascent-override: 91.11%;
    descent-override: 27.04%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Space Grotesk Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold");
    font-weight: 600 700;
    size-adjust: 100.25%;
    ascent-override: 98.16%;
    descent-override: 29.13%;
    line-gap-override: 0%;
}

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

* {
    margin: 0;
}

html {
    background: var(--dark);
    color: var(--on-dark);
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100dvh;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

a {
    color: inherit;
}

h1,
h2,
h3 {
    font-weight: 600;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

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

.skip-link {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    background: var(--orange);
    color: var(--orange-ink);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus-visible {
    top: 12px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Surfaces: every section declares one; the nav and Safari's toolbar follow it. */
[data-surface="dark"] {
    background: var(--dark);
    color: var(--on-dark);
    color-scheme: dark;
}

[data-surface="paper"] {
    background: var(--paper);
    color: var(--on-paper);
    color-scheme: light;
}

/* Buttons. Highlight on pointer-down (Apple): scale on :active, no hover dance. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--r-pill);
    font: 600 1rem/1 var(--font);
    letter-spacing: var(--track-label);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dur-1) var(--ease-out-cubic), box-shadow var(--dur-2) var(--ease-out-cubic),
        background-color var(--dur-2) var(--ease-out-cubic);
}

.btn:active {
    transform: scale(0.97);
    transition-duration: 110ms;
}

.btn--orange {
    background: var(--orange);
    color: var(--orange-ink);
}

@media (hover: hover) and (pointer: fine) {
    .btn--orange:hover {
        box-shadow: 0 10px 28px rgba(244, 123, 37, 0.32);
    }
}

/* Official store badges: unmodified artwork, App Store first, Google Play the
   same height or larger, clear space of a quarter of the badge height. */
.badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.badges a {
    display: block;
    border-radius: 8px;
}

.badges img {
    height: 44px;
    width: auto;
}

/* Page-to-page navigation: the nav stays put while the page cross-fades
   (Chrome 126+, Safari 18.2+; others simply navigate). */
@view-transition {
    navigation: auto;
}

.nav {
    view-transition-name: site-nav;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}