/* Personal Bests — shared styles for all pages */

/* Lexend, self-hosted (no request to Google). One variable file per subset covers weights
   400–800. Licence: fonts/Lexend-OFL.txt (SIL Open Font License 1.1). */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/lexend-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/lexend-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;
}

:root {
    --navy-1: #1a1a2e;
    --navy-2: #16213e;
    --navy-3: #0f3460;
    --gold: #ffd700;
    --gold-hover: #ffe866;
    --coral: #ff6b6b;
    --orange: #ee5a24;
    --brand-gradient: linear-gradient(135deg, #ffd700 0%, #ff6b6b 50%, #ee5a24 100%);
    --text: #ffffff;
    --text-2: rgba(255, 255, 255, 0.82);
    --text-3: rgba(255, 255, 255, 0.7);
    --text-4: rgba(255, 255, 255, 0.5);
    --glass: rgba(255, 255, 255, 0.06);
    --glass-strong: rgba(255, 255, 255, 0.1);
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.15);
    --shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: linear-gradient(165deg, var(--navy-1) 0%, var(--navy-2) 40%, var(--navy-3) 100%);
    background-color: var(--navy-2);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); }
a:hover { color: var(--gold-hover); }
img { display: block; max-width: 100%; }
p, li { text-wrap: pretty; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 900px; margin: 0 auto; padding: 0 24px; }

.gradient-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Keeps a short headline phrase (the gradient payoff) on one line. */
.nowrap { white-space: nowrap; }

/* ---------- Nav ---------- */
.site-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 16px; padding-top: 22px; padding-bottom: 22px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 18px; }
.brand:hover { color: var(--text); }
.brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 15px; }
.site-nav a { color: var(--text-3); text-decoration: none; padding: 12px 14px; border-radius: 50px; border: 1px solid transparent; }
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); background: var(--glass-strong); border-color: var(--line-strong); }
.nav-pages { display: contents; }
.site-nav .nav-cta { margin-left: 8px; color: var(--navy-1); background: #ffffff; font-weight: 600; padding: 12px 20px; }
.site-nav .nav-cta:hover { color: var(--navy-1); opacity: 0.9; }

/* ---------- Buttons, pills, badges ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 17px; text-decoration: none;
    padding: 16px 26px; border-radius: 50px;
    transition: transform 0.2s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-outline { color: var(--text); font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.2); }
.btn-outline:hover { color: var(--text); background: var(--glass-strong); }
.btn-glass { color: var(--text); font-size: 18px; padding: 18px 32px; background: var(--glass-strong); border: 1px solid rgba(255, 255, 255, 0.25); }
.btn-glass:hover { color: var(--text); background: rgba(255, 255, 255, 0.15); }
.btn-dark { color: #ffffff; background: var(--navy-1); }
.btn-dark:hover { color: #ffffff; }

.app-store-badge { display: inline-block; transition: transform 0.2s ease, opacity 0.2s ease; }
.app-store-badge:hover { transform: translateY(-2px); opacity: 0.9; }
.app-store-badge img { height: 54px; width: auto; }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; }
.pill { color: var(--text); text-decoration: none; padding: 10px 16px; border-radius: 50px; background: var(--glass-strong); border: 1px solid var(--line-strong); }
a.pill { padding: 12px 16px; }
a.pill:hover { color: var(--text); background: rgba(255, 255, 255, 0.15); }

.eyebrow-pill {
    display: inline-block; font-size: 14px; font-weight: 500; color: var(--gold);
    padding: 8px 16px; border-radius: 50px;
    background: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.3);
}
a.eyebrow-pill { text-decoration: none; transition: background 0.2s ease; }
a.eyebrow-pill:hover { color: var(--gold); background: rgba(255, 215, 0, 0.14); }
.badge-new {
    flex: none; font-size: 12px; font-weight: 600; color: var(--navy-1); background: var(--gold);
    padding: 4px 10px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.08em;
}
.badge-new.small { font-size: 11px; padding: 3px 8px; }

/* ---------- Screenshot placeholders (replace with <img>) ---------- */
.shot {
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 24px; color: rgba(255, 255, 255, 0.6); font-size: 14px;
    background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow); overflow: hidden;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* A framed iPhone that "peeks" into a card: scaled up and clipped by the card's edges, so the
   screen stays readable. Per card, --w sets the phone's width (bigger = more zoomed in) and
   --shift moves it up by a share of its OWN height, so the same part of the screen stays in
   view at every card size (-54% centres the workout map). */
.spot .shot.peek {
    position: relative; padding: 0;
    background:
        radial-gradient(circle at 50% 85%, rgba(255, 107, 107, 0.28) 0%, rgba(238, 90, 36, 0.10) 40%, rgba(15, 52, 96, 0) 70%),
        var(--glass);
}
.spot .shot.peek img {
    position: absolute; left: 50%; top: 36px;
    width: min(var(--w, 380px), var(--w-max, 72%)); height: auto; object-fit: initial;
    transform: translate(-50%, var(--shift, 0%));
    /* No drop-shadow here: on the <img>, WebKit clips it to a hard-edged box (see .framed). */
}

/* A whole framed device in place of a CSS bezel. The image carries its own frame AND its shadow
   (rendered by Framous): a CSS drop-shadow on these large downscaled images gets clipped by
   WebKit to a hard-edged box, on the <img> and on its wrapper alike. The shadow needs margin
   around the device, so the image is wider than the wrapper; --shadow-w and the negative
   --shadow-m (percentages of the wrapper's width, from the Framous padding) put the device
   exactly where the wrapper is, and overflow stays visible so the shadow shows. */
.phone.framed, .device-frame.iphone.framed, .device-frame.ipad.framed, .device-frame.mac.framed {
    height: auto; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; overflow: visible;
}
.phone.framed, .device-frame.iphone.framed { --shadow-w: 162.59%; --shadow-m: -25.85% -31.29% -42.18%; }
.device-frame.ipad.framed { --shadow-w: 142.67%; --shadow-m: -17.33% -21.33% -28.67%; }
.device-frame.mac.framed { --shadow-w: 136.15%; --shadow-m: -14.67% -18.08% -24.30%; }

/* Mac, iPad and iPhone in one image (shadows baked in), shown whole inside the card. */
.spot .shot.devices { padding: 28px; }
.spot .shot.devices img { object-fit: contain; }
.framed img {
    width: var(--shadow-w, 100%); max-width: none; height: auto; object-fit: initial;
    margin: var(--shadow-m, 0);
}

/* ---------- Home hero ---------- */
/* overflow-x: the framed phone's baked-in shadow overhangs it, which on narrow windows would
   otherwise widen the page into a horizontal scroll. */
.hero { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-top: 48px; padding-bottom: 88px; overflow-x: clip; }
.hero-copy { flex: 1 1 520px; min-width: 0; }
.hero h1 { font-size: clamp(48px, 6.4vw, 88px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 24px; }
.hero .lead { max-width: 560px; font-size: 20px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 32px; }
.hero-visual { flex: 1 1 340px; display: flex; justify-content: center; position: relative; }
.hero-glow {
    position: absolute; width: 360px; height: 360px; max-width: 100%;
    top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 107, 0.35) 0%, rgba(238, 90, 36, 0.12) 45%, rgba(15, 52, 96, 0) 70%);
}
.phone { position: relative; width: 300px; height: 620px; border-radius: 48px; border: 10px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); }

/* ---------- Features page header ---------- */
.page-header { text-align: center; padding-top: 48px; padding-bottom: 32px; }
.page-header h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; margin: 20px 0 16px; }
.page-header .lead { max-width: 620px; margin: 0 auto; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.page-header .pill-row { justify-content: center; margin-top: 28px; }

/* ---------- Feature spotlights ---------- */
.spot { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; padding-top: 72px; padding-bottom: 72px; scroll-margin-top: 16px; }
.spot.reverse { flex-direction: row-reverse; }
.spot-copy { flex: 1 1 440px; min-width: 0; }
.spot-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.spot-no { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.kicker { font-size: 14px; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.spot h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--gold); margin: 16px 0; text-wrap: balance; }
.spot-copy > p { font-size: 18px; line-height: 1.6; color: var(--text-2); margin-bottom: 28px; }
.spot .shot { flex: 1 1 440px; min-width: 0; height: 480px; border-radius: 28px; }

.checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.checklist li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line);
    font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.9);
}
.checklist svg { flex: none; margin-top: 2px; }

.see-all { text-align: center; padding-top: 48px; }
.see-all p { font-size: 20px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin-bottom: 24px; }

/* ---------- Device switcher ---------- */
/* overflow-x: as on .hero, the phone's baked-in shadow would otherwise widen narrow pages. */
.devices { margin-top: 48px; scroll-margin-top: 16px; overflow-x: clip; }
.devices-panel {
    border-radius: 32px; background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 56px 40px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center;
}
.devices-copy { flex: 1 1 360px; min-width: 0; }
.devices h2 { font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 12px; }
.devices-copy > p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin-bottom: 28px; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 50px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.12); }
.segmented button {
    min-height: 44px; padding: 10px 22px; border-radius: 50px; border: 0; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 500; background: transparent; color: rgba(255, 255, 255, 0.8);
}
.segmented button[aria-pressed="true"] { font-weight: 600; background: #ffffff; color: var(--navy-1); }
.segmented button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.device-detail h3 { font-size: 22px; font-weight: 600; color: var(--gold); margin: 28px 0 8px; }
.device-detail p { font-size: 17px; line-height: 1.6; color: var(--text-2); }
.devices-visual { flex: 1 1 480px; min-width: 0; min-height: 380px; display: flex; align-items: center; justify-content: center; }
.device-frame { flex: none; max-width: 100%; border: 8px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); }
.device-frame.iphone { width: 220px; height: 450px; border-radius: 36px; }
.device-frame.ipad { width: 440px; height: 320px; border-radius: 28px; }
.device-frame.mac { width: 520px; height: 330px; border-radius: 14px; }

/* ---------- Themes matrix ---------- */
/* The devices box's sibling, mirrored: phone on the left. Two independent pickers (theme,
   appearance) pick one of six stacked screenshots, which crossfade in place. */
.themes { --theme-glow: rgba(255, 107, 107, 0.32); }
.themes[data-theme="system"] { --theme-glow: rgba(10, 132, 255, 0.32); }
.themes[data-theme="blueyellow"] { --theme-glow: rgba(248, 215, 72, 0.26); }
.themes .devices-panel { flex-direction: row-reverse; }
.theme-pickers { display: flex; flex-direction: column; gap: 20px; }
.picker-label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.themes .segmented button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; }
.themes .segmented svg { flex: none; }
/* The theme's light and dark colour as two overlapping dots, like the app's own picker. */
.swatch { flex: none; position: relative; width: 20px; height: 12px; }
.swatch::before, .swatch::after {
    content: ''; position: absolute; top: 0; width: 12px; height: 12px; border-radius: 50%;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
.swatch::before { left: 0; background: var(--sw-light); }
.swatch::after { left: 8px; background: var(--sw-dark); }
.segmented button[aria-pressed="true"] .swatch::before,
.segmented button[aria-pressed="true"] .swatch::after { box-shadow: 0 0 0 1.5px #ffffff; }
.themes .devices-visual { position: relative; }
.themes .devices-visual::before {
    content: ''; position: absolute; width: 360px; height: 360px; max-width: 100%;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    /* closest-side: fully faded at the box's edge even when max-width squeezes it on phones. */
    background: radial-gradient(circle closest-side, var(--theme-glow) 0%, rgba(15, 52, 96, 0) 100%);
}
.theme-stack { display: grid; position: relative; }
.theme-stack img { grid-area: 1 / 1; opacity: 0; transition: opacity 0.3s ease; }
.theme-stack img.is-active { opacity: 1; }
[hidden] { display: none !important; }

/* ---------- All features grid ---------- */
.section-title { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.all { padding-top: 112px; scroll-margin-top: 16px; }
.all .section-title, .all .section-sub { text-align: center; }
.section-sub { font-size: 18px; color: rgba(255, 255, 255, 0.8); margin: 8px 0 36px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.feature-tile { padding: 18px 20px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.feature-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.feature-tile h3 { font-size: 16px; font-weight: 600; color: var(--gold); }
.feature-tile p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }

/* ---------- Changelog ---------- */
.changelog { max-width: 860px; margin: 0 auto; padding: 112px 24px 0; scroll-margin-top: 16px; }
.changelog .section-title { margin-bottom: 32px; }
.releases { list-style: none; display: flex; flex-direction: column; gap: 36px; }
.release { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.release-version { flex: 0 0 120px; font-size: 24px; font-weight: 800; color: var(--text-4); }
.release-body { flex: 1 1 280px; min-width: 0; padding-left: 24px; border-left: 2px solid rgba(255, 255, 255, 0.2); }
.release.current .release-body { border-left-color: var(--coral); }
.release-date { font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.release-body ul { margin-top: 10px; padding-left: 18px; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); }
.release.current ul { color: rgba(255, 255, 255, 0.9); }

/* ---------- Text pages (privacy policy, support) ---------- */
.text-page { padding-top: 48px; padding-bottom: 72px; }
.text-header { margin-bottom: 40px; }
.text-header h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; margin: 12px 0 20px; text-wrap: balance; }
.text-header .lead { font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.text-meta { margin-top: 16px; font-size: 14px; color: var(--text-4); }
.text-page .checklist { margin-bottom: 40px; }
.prose-card { padding: 32px; border-radius: 28px; background: var(--glass); border: 1px solid var(--line); scroll-margin-top: 16px; }
.prose-card + .prose-card { margin-top: 16px; }
.prose-card h2 { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--gold); margin-bottom: 12px; }
.prose-card p, .prose-card li { font-size: 17px; line-height: 1.7; color: var(--text-2); }
.prose-card p + p, .prose-card ul + p, .prose-card p + ul { margin-top: 12px; }
.prose-card ul { padding-left: 20px; }
.prose-card li + li { margin-top: 4px; }
.prose-card strong { color: var(--text); font-weight: 600; }
.prose-card .btn { margin-top: 20px; }

/* ---------- Closing CTA + footer ---------- */
.cta { padding-top: 112px; padding-bottom: 40px; }
/* Optical centring: the wide, bold headline makes the card's content top-heavy, while the narrow
   badge leaves the bottom corners empty. Measured as ink weighted by lightness contrast against the
   gradient, the content's centre of mass sits ~22px above the card's centre at full width and is
   roughly neutral on phones (where the headline wraps and the badge carries more weight). Shifting
   the content down by half that difference — 0 at ≤500px, rising linearly to 11px at the 1240px
   wrap width — balances it without crowding the badge against the bottom edge. */
.cta-card {
    --cta-optical: clamp(0px, 1.5vw - 7.5px, 11px);
    border-radius: 32px; padding: calc(64px + var(--cta-optical)) 32px calc(64px - var(--cta-optical)); text-align: center;
    background: var(--brand-gradient); color: var(--navy-1); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.cta-card h2 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 12px; }
.cta-card p { font-size: 19px; margin-bottom: 28px; }
.cta-card .app-store-badge { margin: 0 auto; }

.site-footer {
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center;
    padding-top: 16px; padding-bottom: 48px; font-size: 14px; color: var(--text-4);
}
.footer-link { color: var(--text-3); text-decoration: none; padding: 12px 18px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.2s ease; }
.footer-link:hover { color: #ffffff; background: var(--glass-strong); border-color: rgba(255, 255, 255, 0.4); }
.site-footer .copyright { flex-basis: 100%; text-align: center; }

@media (max-width: 600px) {
    /* The four nav items don't fit one phone-width line, and wrapping left "Get the app" alone
       on a second row. Instead the CTA joins the brand, and the three page links get the row
       below to themselves, in equal thirds. Sizes ease down so it all still fits at 320px. */
    .site-header { display: grid; grid-template-columns: 1fr auto; gap: 14px 12px; padding-bottom: 8px; }
    .brand { font-size: clamp(16px, 4.8vw, 18px); }
    .site-nav { display: contents; font-size: clamp(14px, 4vw, 15px); }
    .site-nav .nav-cta { grid-area: 1 / 2; margin-left: 0; padding: 12px clamp(14px, 4.5vw, 20px); white-space: nowrap; }
    .nav-pages { grid-area: 2 / 1 / 3 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .nav-pages a { justify-self: center; padding: 10px clamp(8px, 3vw, 14px); white-space: nowrap; }

    /* Below ~375px the desktop minimums leave a single word on its own line
       ("Your", "for"); scaling with the viewport keeps the phone line breaks down to 320px. */
    .hero h1 { font-size: clamp(40px, 12.8vw, 48px); }
    .page-header h1 { font-size: clamp(32px, 9.6vw, 40px); }
    .hero { padding-bottom: 48px; gap: 40px; }
    .spot { gap: 32px; padding-top: 48px; padding-bottom: 48px; }
    .spot .shot { height: 360px; }
    .spot .shot.peek { --w-max: 80%; }
    .devices-panel { padding: 32px 20px; }
    /* Three themes don't fit one phone-width row; a stacked list reads better than a pill
       that wraps one button onto a line of its own. */
    .segmented.theme-choice { display: flex; flex-direction: column; align-items: stretch; border-radius: 28px; }
    /* Phone between the copy and the pickers, so a tap changes something still on screen. */
    .themes .devices-panel { flex-direction: column; align-items: stretch; gap: 0; }
    .themes .devices-copy { display: contents; }
    .themes .devices-visual { order: 1; flex: none; min-height: 0; margin-bottom: 28px; }
    .themes .theme-pickers { order: 2; gap: 12px; }
    .themes .device-frame.iphone { width: 170px; }
    /* The swatches and sun/moon say it; screen readers still get the labels. */
    .themes .picker-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .segmented.theme-choice button { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
    .prose-card { padding: 24px 20px; border-radius: 20px; }
    .text-header h1 { font-size: clamp(32px, 9.6vw, 40px); }
    .phone { width: 260px; height: 540px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .app-store-badge, .theme-stack img { transition: none; }
}