/* Web counterparts of IosThemeColorTokens: lightBackground, freshTeal,
   darkBackground and lightOnPrimaryContainer. Dark teal text keeps AA contrast. */
:root {
  color-scheme: light dark;
  --bg: #f3faf8; --fg: #152c2b; --muted: #48645f; --line: #c4d6d2;
  --surface: #ffffff; --soft: #e4f1ee; --accent: #08746d; --brand: #36d1c4;
  --button: #08746d; --on-button: #ffffff; --preview: #071314;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 1rem/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-wrap: anywhere; }
a { color: inherit; text-underline-offset: .3em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
main:focus { outline: none; }
.shell { width: min(100%, 1240px); margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 56px); }
nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; min-height: 96px; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; font-size: 1.12rem; font-weight: 760; text-decoration: none; }
.brand-symbol { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .65rem; background: var(--fg); color: var(--bg); font-size: 1.6rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; }
.nav-links a, footer > a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font-size: .92rem; }
.nav-links [aria-current="page"] { color: var(--accent); font-weight: 700; }
p { margin: 0 0 1rem; }
h1, h2, h3 { line-height: 1.14; text-wrap: balance; }
h1 { margin: 1.2rem 0 1.5rem; font-size: clamp(2.3rem, 5vw, 4.6rem); letter-spacing: -.058em; font-weight: 760; }
h1 span { display: block; color: var(--accent); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.65rem); letter-spacing: -.04em; margin: 0 0 1rem; }
h3 { font-size: 1.15rem; letter-spacing: -.018em; margin: 0 0 .65rem; line-height: 1.35; }
.eyebrow { font-size: .72rem; line-height: 1.65; letter-spacing: .13em; font-weight: 760; color: var(--accent); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(3rem, 7vw, 6.5rem) 4rem; }
.hero-copy { min-width: 0; }
.lead { max-width: 42rem; font-size: 1.1rem; line-height: 1.8; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.4rem; margin-block: 1.6rem; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 1.3rem; min-height: 48px; padding: .85rem 1.3rem; background: var(--button); color: var(--on-button); border-radius: .8rem; text-decoration: none; font-weight: 680; line-height: 1.4; }
.button:hover { text-decoration: underline; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; gap: .8rem; font-weight: 620; }
.hero-note { display: flex; align-items: flex-start; gap: .9rem; margin-top: 2.25rem; font-size: .85rem; max-width: 31rem; }
.hero-note > span { display: grid; place-items: center; flex: 0 0 1.8rem; height: 1.8rem; background: var(--soft); border-radius: 50%; color: var(--accent); font-weight: 700; }
.hero-note strong { display: block; margin-bottom: .25rem; }
.hero-note p { margin: 0; color: var(--muted); }
.showcase { margin: 0; min-width: 0; }
.preview { padding: 1.3rem; border: 1px solid #344a50; border-radius: 1.8rem; color: #f3faf8; background: var(--preview); box-shadow: 0 1.2rem 3.2rem #07131418; }
.preview-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .35rem 1.2rem; }
.preview-brand { font-weight: 680; font-size: .92rem; }
.preview-mark { color: #36d1c4; font-size: 1.8rem; }
.workout-card { background: #132124; border: 1px solid #344a50; padding: 1.3rem; border-radius: 1.1rem; }
.sport-label { display: block; color: #a7c3bd; font-size: .74rem; margin-bottom: .55rem; }
.workout-card h2 { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.03em; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: .8rem; margin: 1.5rem 0; }
.metrics dt { font-size: .7rem; color: #a7c3bd; }
.metrics dd { margin: .15rem 0 0; font-size: 1.8rem; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1.3; }
.metrics dd span { font-size: .85rem; font-weight: 500; color: #a7c3bd; }
.sample-chart { display: flex; align-items: flex-end; gap: 3.5%; height: 4rem; padding-top: .6rem; border-bottom: 1px solid #344a50; }
.sample-chart i { display: block; flex: 1; height: 50%; background: #36d1c4; border-radius: .3rem .3rem 0 0; }
.sample-chart i:nth-child(4n+1) { height: 36%; } .sample-chart i:nth-child(4n+2) { height: 62%; }
.sample-chart i:nth-child(4n+3) { height: 83%; } .sample-chart i:nth-child(6n) { height: 100%; }
.preview-step { display: flex; align-items: flex-start; gap: .8rem; padding: 1.2rem .25rem 0; }
.step-number { flex: 0 0 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid #36d1c4; color: #36d1c4; border-radius: 50%; font-size: .75rem; font-weight: 700; }
.preview-step h3 { margin: 0 0 .25rem; font-size: .85rem; }
.preview-step p { margin: 0; color: #a7c3bd; font-size: .76rem; line-height: 1.6; }
.file-types { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.2rem .25rem .2rem; }
.file-types span { border: 1px solid #344a50; color: #c8e2dd; border-radius: .45rem; padding: .25rem .65rem; font-size: .68rem; letter-spacing: .06em; font-weight: 650; }
figcaption { margin: 1rem .4rem 0; font-size: .73rem; color: var(--muted); text-align: center; }
.feature-section { padding-block: 3rem 4rem; border-top: 1px solid var(--line); }
.section-heading { max-width: 45rem; margin-bottom: 2rem; }
.section-heading > p:last-child { color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feature-card { padding: 1.65rem; border: 1px solid var(--line); background: var(--surface); border-radius: 1rem; }
.card-number { display: block; color: var(--accent); font-size: .82rem; font-weight: 750; margin-bottom: 2rem; }
.feature-card p, .platform-card p, .compatibility p { color: var(--muted); font-size: .94rem; margin: 0; }
.platform-section { padding-bottom: 4rem; }
.platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.platform-card { padding: 1.6rem; border-radius: 1rem; background: var(--soft); }
.platform-card h3 { margin-top: .4rem; font-size: 1.4rem; }
.compatibility { max-width: 52rem; margin-top: 1.6rem; }
.compatibility h3 { font-size: .95rem; }
.compatibility p { font-size: .82rem; }
.privacy-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface); }
.privacy-banner > div { flex: 1 1 32rem; }
.privacy-banner h2 { font-size: 1.7rem; }
.privacy-banner p:not(.eyebrow) { max-width: 46rem; color: var(--muted); font-size: .92rem; margin-bottom: 0; }
.privacy-banner > a { font-size: .88rem; }
.get-started { padding-block: 5rem; max-width: 50rem; }
.get-started > p:not(.eyebrow) { color: var(--muted); }
.availability-note { font-size: .8rem; }
.page-heading { padding-block: 4rem 2rem; max-width: 52rem; }
.page-heading h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); }
.reading { display: grid; gap: 1rem; max-width: 52rem; padding-bottom: 5rem; }
.reading-card { padding: 1.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
.reading-card h2 { font-size: 1.2rem; letter-spacing: -.015em; }
.reading-card p { color: var(--muted); margin: 0; }
footer { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 3rem; padding-block: 1.5rem 2.5rem; }
footer > div { max-width: 38rem; }
footer p { margin: .4rem 0 0; font-size: .76rem; color: var(--muted); }
.skip { position: absolute; z-index: 2; top: 8px; left: 16px; padding: 12px; color: var(--fg); background: var(--surface); transform: translateY(-200%); }
.skip:focus { transform: none; }
@media (max-width: 950px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .hero-copy { max-width: 42rem; } .showcase { max-width: 30rem; width: 100%; justify-self: center; } .feature-grid { grid-template-columns: minmax(0, 1fr); } .card-number { margin-bottom: 1rem; } }
@media (max-width: 560px) { .platform-grid { grid-template-columns: minmax(0, 1fr); } nav { align-items: flex-start; } .nav-links { gap: .2rem 1rem; } .hero-grid { padding-block: 2.5rem 3rem; } .privacy-banner { padding: 1.4rem; } .get-started { padding-block: 3.5rem; } }
@media (prefers-color-scheme: dark) { :root { --bg: #071314; --fg: #f3faf8; --muted: #a7c3bd; --line: #344a50; --surface: #101c1e; --soft: #1d2b2f; --accent: #36d1c4; --button: #36d1c4; --on-button: #071314; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .button, .brand-symbol, .preview, .workout-card, .step-number { border: 1px solid ButtonText; } .sample-chart { display: none; } }