/* ============================================================
   Every page loads this file: the reset, the design tokens, the
   base elements and the pieces pages share (the buttons).
   landing.css adds the landing page.

   Every size, space, corner, weight, line height and duration
   below is a token from :root, never a raw number. Raw lengths
   live only in a :root block; the only literals allowed elsewhere
   are 0, 0.5px, 1px and 2px hairlines, %, em, ch, lh and viewport
   units.
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* a dark page, and a light one in light mode (below); the demo is a
       small Mac desktop on the Golden Gate wallpaper to match */
    color-scheme: dark;

    /* ---------- Type ---------- */
    /* the Mac's own UI font (SF Pro) wherever it's available */
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --text-xs: 12px;
    --text-label: 13px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-body-lg: 24px;
    --text-headline: 60px;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.333;
    --leading-normal: 1.5;
    --track-headline: -0.03em;
    --track-tight: -0.025em;
    --track-caps: 0.12em;
    --track-title: -0.01em;

    /* ---------- Space: every margin, padding, gap and offset ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-7: 40px;
    --space-8: 64px;
    /* side padding grows with the viewport: about 20px on a phone, 48 from
       a small laptop up */
    --gutter: clamp(var(--space-4), 5vw, var(--space-7));

    /* ---------- Sizes ---------- */
    --control-sm: 32px;
    --control-lg: 56px;
    /* the price tag at the end of the purchase button */
    --badge-h: 28px;
    --icon-sm: 14px;
    --icon-md: 20px;
    /* the app icon at the top of the hero */
    --icon-hero: 96px;
    /* the icon above each feature */
    --icon-feature: 32px;

    /* ---------- The screenshot demo: sizes as on a Mac ---------- */
    /* the rename pill, as the app draws it */
    --pill-h: 44px;
    --pill-pad-start: 18px;
    --pill-thumb-w: 32px;
    --pill-thumb-h: 22px;
    --pill-gap: var(--space-3);
    --pill-text: var(--text-xs);
    /* Undo: a 24px capsule, as far from the pill's end as from its top and
       bottom, so the two capsules' ends are concentric */
    --chip-h: 24px;
    --chip-pad-x: 10px;
    --pill-pad-end: calc((var(--pill-h) - var(--chip-h)) / 2);
    /* where the pill waits, out of sight above the window */
    --pill-top: var(--space-4);
    --pill-hidden: calc(-1 * (var(--pill-h) + var(--pill-top)));
    /* the pinch: how far its tab and layer reach above the window, the
       tab's width, and the layer's height */
    --goo-bleed: 48px;
    --goo-tab-w: 120px;
    --goo-h: 160px;
    /* macOS's floating screenshot thumbnail, bottom right, measured from
       the real one: 154 × 98 with a 3px white frame, 12px in from the
       corner */
    --float-w: 154px;
    --float-h: 98px;
    --float-rim: 3px;
    /* a file on the desktop: its thumbnail, its label, and the slot it takes */
    --file-w: 104px;
    --file-thumb-w: 64px;
    --file-thumb-h: 44px;
    --file-slot: 112px;
    /* the bubble the demo plays in */
    --bubble-w: 1200px;
    --radius-bubble: 32px;
    /* the menu bar in the bubble, after Sleeve's */
    --menubar-h: 36px;
    --menubar-pad: 20px;
    --menubar-clock-gap: 6px;
    /* a real Mac's menu bar type and logo, a size up from the demo's other
       text */
    --menubar-text: 14px;
    --apple-logo: 16px;
    /* its leaf leaves the apple low in its box: lifted, the apple centres on
       the text beside it, as on a real Mac */
    --apple-logo-lift: 1px;
    /* the dock in the bubble: 64px icons, 28px up from its foot */
    --dock-icon: 64px;
    --dock-inset: 28px;
    --radius-dock: 28px;
    --radius-slot: 16px;
    /* the tray's 1px rim, just inside a 316 × 88 rounded rectangle with
       smoothed 28px corners (four 64px slots, 12px apart, 12px in). Redraw
       it if the tray's size changes */
    --dock-rim: path(evenodd, "M 46.2 0 L 269.8 0 c 17.0043 0 25.5065 0 31.8814 3.5701 a 28 28 0 0 1 11.5457 12.2811 c 2.7729 5.7579 2.7729 13.2215 2.7729 28.1487 L 316 44 c 0 14.9272 0 22.3908 -2.7729 28.1487 a 28 28 0 0 1 -11.5457 12.2811 c -6.3749 3.5701 -14.8771 3.5701 -31.8814 3.5701 L 46.2 88 c -17.0043 0 -25.5065 0 -31.8814 -3.5701 a 28 28 0 0 1 -11.5457 -12.2811 c -2.7729 -5.7579 -2.7729 -13.2215 -2.7729 -28.1487 L 0 44 c 0 -14.9272 0 -22.3908 2.7729 -28.1487 a 28 28 0 0 1 11.5457 -12.2811 c 6.3749 -3.5701 14.8771 -3.5701 31.8814 -3.5701 Z M 45.55 1 L 270.45 1 c 16.397 0 24.5956 0 30.7428 3.4426 a 27 27 0 0 1 10.9353 11.4398 c 2.8719 5.7185 2.8719 13.1848 2.8719 28.1176 L 315 44 c 0 14.9327 0 22.3991 -2.8719 28.1176 a 27 27 0 0 1 -10.9353 11.4398 c -6.1472 3.4426 -14.3457 3.4426 -30.7428 3.4426 L 45.55 87 c -16.397 0 -24.5956 0 -30.7428 -3.4426 a 27 27 0 0 1 -10.9353 -11.4398 c -2.8719 -5.7185 -2.8719 -13.1848 -2.8719 -28.1176 L 1 44 c 0 -14.9327 0 -22.3991 2.8719 -28.1176 a 27 27 0 0 1 10.9353 -11.4398 c 6.1472 -3.4426 14.3457 -3.4426 30.7428 -3.4426 Z");

    /* ---------- Widths ---------- */
    --measure: 768px;
    --container: 1200px;
    /* the features, narrower than the bubble above them */
    --features-w: 960px;

    /* ---------- Corners ---------- */
    --radius-xs: 3px;
    /* a file's thumbnail on the desktop */
    --radius-file: 7px;
    --radius-full: 999px;

    /* ---------- Depth ---------- */
    /* the app icon's shadow on the page: the icon art has none of its own */
    --icon-shadow: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)) drop-shadow(0 16px 28px rgba(0, 0, 0, 0.6));
    /* the bubble lifts off the dark page */
    --bubble-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.5);
    --thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    --float-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
    --label-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    --dock-icon-shadow: drop-shadow(0 1px 2.25px rgba(12, 10, 9, 0.3));
    --menubar-shadow: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
    --menubar-text-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
    --glass-blur: 20px;

    /* ---------- Motion ---------- */
    --duration-fast: 150ms;
    --duration: 300ms;
    --duration-slow: 400ms;
    --ease-spring: cubic-bezier(0.3, 1.3, 0.5, 1);
    /* the pill's motion, as in the app: in on a spring (0.65s response,
       0.8 damping, sampled into a curve), out with a 0.25s ease-in */
    --duration-drop: 800ms;
    --duration-rise: 250ms;
    --ease-pill: linear(0, 0.0437, 0.1467, 0.2768, 0.4127, 0.541, 0.6546, 0.7502, 0.8274, 0.8874, 0.9322, 0.9645, 0.9866, 1.0009, 1.0093, 1.0136, 1.0151, 1.0148, 1.0134, 1.0115, 1.0094, 1.0074, 1.0056, 1.0041, 1);

    /* ---------- Colour ---------- */
    --primary: #ffffff;
    --secondary: #a3a3a3;
    /* the page */
    --background: #111113;
    --desktop-image: url("assets/golden-gate-dark.jpg");
    --btn-bg: #ffffff;
    --btn-fg: #000000;
    --btn-bg-hover: #f3f4f6;
    /* the quiet button: a faint light fill on the dark page */
    --btn-quiet-bg: rgba(255, 255, 255, 0.08);
    --btn-quiet-bg-hover: rgba(255, 255, 255, 0.14);
    --accent: #a78bfa;
    /* the line above the footer */
    --separator: rgba(255, 255, 255, 0.1);
    /* the demo: a Mac's own colours */
    --flash: rgba(255, 255, 255, 0.7);
    --pill-bg: #000000;
    /* the pill's foot: a dark frost over the blurred page */
    --pill-frost: rgba(40, 40, 44, 0.55);
    --pill-ink: #ffffff;
    --menubar-ink: rgba(255, 255, 255, 0.9);
    --pill-chip: rgba(255, 255, 255, 0.13);
    --file-rim: #ffffff;
    /* a hairline just inside the bubble's edge, so its dark wallpaper
       doesn't melt into the dark page */
    --bubble-edge: rgba(255, 255, 255, 0.08);
    --dock-fill: rgba(255, 255, 255, 0.15);
    --dock-sheen: rgba(255, 255, 255, 0.2);
    /* a mask's fully kept stop: only its opacity counts */
    --mask-solid: #000000;
}

/* ---------- Light mode: the same page, its colours turned over ----------
   the demo stays a Mac desktop: the light wallpaper is mid-toned, so its
   white menu bar and labels and black pill read as they do in dark mode */
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --primary: #111113;
        --secondary: #737373;
        --background: #ffffff;
        --desktop-image: url("assets/golden-gate-light.jpg");
        --btn-bg: #111113;
        --btn-fg: #ffffff;
        --btn-bg-hover: #2c2c30;
        --btn-quiet-bg: rgba(0, 0, 0, 0.05);
        --btn-quiet-bg-hover: rgba(0, 0, 0, 0.09);
        --separator: rgba(0, 0, 0, 0.1);
        --bubble-edge: rgba(0, 0, 0, 0.08);
        /* softer shadows: on white, the dark mode ones read as smudges */
        --icon-shadow: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14)) drop-shadow(0 16px 28px rgba(0, 0, 0, 0.22));
        --bubble-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.3);
    }
}

/* ---------- Smaller screens: the same tokens, scaled down ---------- */
/* a tablet or small laptop window */
@media (max-width: 900px) {
    :root {
        --text-headline: 48px;
        --text-body-lg: 20px;
    }
}

/* a phone: tighter type and spacing, and a smaller floating thumbnail so it
   fits the narrower bubble */
@media (max-width: 560px) {
    :root {
        --text-headline: 38px;
        --text-body-lg: 18px;
        --text-xl: 18px;
        --icon-hero: 80px;
        --icon-feature: 28px;
        --float-w: 104px;
        --float-h: 66px;
        --float-rim: 2px;
        /* the menu bar's two items sit close to the bubble's edges, a size
           smaller, and the pill between them is drawn smaller too, so even
           the longest name clears them */
        --menubar-pad: 14px;
        --menubar-text: 12px;
        --apple-logo: 15px;
        --pill-h: 36px;
        --pill-pad-start: 12px;
        --pill-gap: var(--space-2);
        --pill-text: 11px;
        --pill-thumb-w: 26px;
        --pill-thumb-h: 18px;
        --chip-h: 20px;
        --chip-pad-x: 8px;
    }
}

/* ---------- Base ---------- */
html {
    overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
    /* backwards, not both: an animation that holds its end keeps the page a
       layer of its own */
    body {
        animation: fade-in var(--duration-slow) ease backwards;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

body {
    background: var(--background);
    color: var(--primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* an icon with a light-mode source: the <picture> is the box its parent
   lays out, so the empty <source> beside the <img> never takes a gap of its
   own, and the <img> sits on no text baseline */
picture {
    display: flex;
}

a {
    color: inherit;
    text-decoration: none;
}

*:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Buttons ---------- */
/* a pill with an icon before its label */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    height: var(--control-lg);
    padding: 0 var(--space-5);
    border-radius: var(--radius-full);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    white-space: nowrap;
    transition: background var(--duration-fast), color var(--duration-fast);
}

.btn svg {
    flex: none;
    width: var(--icon-md);
    height: var(--icon-md);
}

.btn-primary {
    background: var(--btn-bg);
    color: var(--btn-fg);
}

.btn-primary:hover {
    background: var(--btn-bg-hover);
}

/* the price, a dark pill at the button's end: the button's own colours
   swapped. Less padding after it, so it sits as far from the end as from
   the top and bottom */
.btn:has(.btn-price) {
    padding-inline-end: var(--space-4);
}

.btn-price {
    display: inline-flex;
    align-items: center;
    height: var(--badge-h);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--btn-fg);
    color: var(--btn-bg);
    font-size: var(--text-base);
}