:root {
  --paper: #f7f5ef;
  --paper-deep: #eeece4;
  --surface: #fffefa;
  --surface-muted: #f1efe8;
  --ink: #171a18;
  --ink-soft: #505753;
  --ink-faint: #616964;
  --line: #d9d8d0;
  --line-strong: #b8bbb5;
  --control-border: #858b86;
  --accent: #043945;
  --accent-dark: #022c36;
  --accent-soft: #dde9e7;
  --brand-coral: #fd4714;
  --success: #176b44;
  --success-soft: #dcece3;
  --warning: #7c5610;
  --warning-soft: #f3e8c9;
  --danger: #a0352b;
  --danger-dark: #77251e;
  --danger-soft: #f5dedb;
  --strava: #c34112;
  --strava-dark: #9f320b;
  --strava-soft: #fae6dc;
  --focus: #067d72;
  --radius-xs: .35rem;
  --radius-sm: .6rem;
  --radius: .9rem;
  --radius-lg: 1.35rem;
  --shell: 74rem;
  --shell-app: 82rem;
  --header-height: 4.5rem;
  --space-1: .35rem;
  --space-2: .6rem;
  --space-3: .9rem;
  --space-4: 1.25rem;
  --space-5: 1.75rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 6rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
input, select, textarea, button { font: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; }
button, input, select, textarea { color: inherit; }
button, select { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .58; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 650; letter-spacing: -.035em; line-height: 1.08; }
h1 { max-width: 17ch; margin-bottom: var(--space-4); font-size: clamp(2.4rem, 6vw, 5.8rem); }
h2 { margin-bottom: var(--space-3); font-size: clamp(1.65rem, 3.3vw, 2.75rem); }
h3 { margin-bottom: var(--space-2); font-size: 1.08rem; letter-spacing: -.015em; }
p { color: var(--ink-soft); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 1000; top: .75rem; left: .75rem; transform: translateY(-150%); padding: .65rem 1rem; border-radius: var(--radius-sm); background: var(--ink); color: white; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(calc(100% - 2rem), var(--shell)); margin-inline: auto; }
.shell--narrow { max-width: 46rem; }
.shell--legal { max-width: 54rem; }
.shell--app { width: min(calc(100% - 2rem), var(--shell-app)); }

.site-header { position: relative; z-index: 100; min-height: var(--header-height); border-bottom: 1px solid rgba(23, 26, 24, .12); background: rgba(247, 245, 239, .96); }
.site-header__inner { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-size: 1.05rem; font-weight: 760; letter-spacing: -.025em; text-decoration: none; }
.brand__mark { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; }
.brand__copy { display: grid; gap: .12rem; line-height: 1; }
.brand__name { display: block; }
.brand__tagline { display: block; color: var(--accent); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .54rem; font-weight: 730; letter-spacing: .035em; white-space: nowrap; }
.site-header .brand { gap: .75rem; font-size: 1.125rem; }
.site-header .brand__mark { width: 3rem; height: 3rem; }
.site-header .brand__tagline { font-size: .6rem; letter-spacing: .045em; }
.site-nav { display: flex; align-items: center; gap: 1.35rem; }
.site-nav > a { color: var(--ink-soft); font-size: .9rem; font-weight: 650; text-decoration: none; }
.site-nav > a:hover, .site-nav > a[aria-current="page"] { color: var(--ink); }
.site-nav > a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--brand-coral); text-decoration-thickness: 2px; }
.nav-logout { margin: 0; }
.nav-logout button { padding: 0; border: 0; background: transparent; color: var(--ink-soft); font-size: .9rem; font-weight: 650; }
.nav-logout button:hover { color: var(--ink); text-decoration: underline; }
.nav-toggle { display: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: transparent; }
.nav-toggle > span:not(.sr-only) { display: block; width: 1.15rem; height: 2px; margin: .25rem auto; background: var(--ink); transition: transform .15s ease; }
.locale-switcher { display: flex; padding-left: 1rem; border-left: 1px solid var(--line); }
.locale-switcher button { min-width: 2rem; padding: .25rem .3rem; border: 0; background: transparent; color: var(--ink-faint); font-size: .72rem; font-weight: 750; }
.locale-switcher button:hover, .locale-switcher button[aria-current="true"] { color: var(--accent-dark); text-decoration: underline; }
.site-footer { padding: var(--space-7) 0; border-top: 1px solid var(--line); }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5) var(--space-7); align-items: start; }
.site-footer p { margin: .65rem 0 0; font-size: .88rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer nav a, .site-footer nav .text-button { color: var(--ink-soft); font-size: .88rem; }
.site-footer__meta { grid-column: 1 / -1; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.brand--footer { font-size: 1rem; }

.eyebrow { margin-bottom: .7rem; color: var(--accent-dark); font-size: .72rem; font-weight: 800; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.lede, .hero__lede { max-width: 60ch; color: var(--ink-soft); font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.55; }
.stack > * + * { margin-top: var(--space-4); }
.stack-large > * + * { margin-top: var(--space-6); }
.button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .55rem; padding: .67rem 1.2rem; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: transparent; color: var(--ink); font-size: .9rem; font-weight: 720; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.button:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); }
.button--primary { border-color: var(--accent); background: var(--accent); color: white; }
.button--primary:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--accent-dark); background: var(--accent-dark); }
.button--dark { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.button--dark:hover:not(:disabled):not([aria-disabled="true"]) { background: #303531; }
.button--light { border-color: white; background: white; color: var(--ink); }
.button--light:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--paper); }
.button--ghost { border-color: var(--control-border); background: transparent; }
.button--ghost:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--ink); background: var(--surface); }
.button--strava { border-color: var(--strava); background: var(--strava); color: white; }
.button--strava:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--strava-dark); background: var(--strava-dark); }
.button.button--strava-connect { border-color: var(--strava); background: var(--surface); color: var(--strava-dark); }
.button.button--strava-connect:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--strava-dark); background: var(--strava-soft); color: var(--strava-dark); }
.button__service-mark { display: grid; width: 1.25rem; height: 1.25rem; place-items: center; border-radius: var(--radius-xs); background: var(--strava); color: white; font-size: .64rem; font-weight: 800; line-height: 1; }
.button--danger { border-color: var(--danger); background: var(--danger); color: white; }
.button--danger:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--danger-dark); background: var(--danger-dark); }
.button--danger-ghost { border-color: var(--danger); color: var(--danger-dark); }
.button--danger-ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--danger-soft); }
.button[aria-disabled="true"] { cursor: not-allowed; opacity: .58; pointer-events: none; }
.button--small { min-height: 2.35rem; padding: .45rem .75rem; font-size: .8rem; }
.button--wide { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.button-row--end { justify-content: flex-end; margin-top: var(--space-5); }
.text-link, .text-button { color: var(--accent-dark); font-weight: 720; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.text-link:hover, .text-button:hover { color: var(--ink); }
.text-link--back::before { margin-right: .45rem; content: "←"; }
.text-button { padding: 0; border: 0; background: transparent; font-size: .88rem; }
.icon-link { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; text-decoration: none; }
.icon-link:hover { border-color: var(--ink); }

.hero { overflow: hidden; padding: clamp(4rem, 8vw, 8rem) 0; border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(26rem, .8fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
/* The headline is sized from its own column, not the viewport: at 7vw the
   longest French and Spanish word ("Automatiquement.") overflowed under the
   example card. Breaking is a last resort, never a hyphenated headline. */
.hero__copy { container-type: inline-size; }
.hero h1 { margin-bottom: var(--space-5); font-size: clamp(2.5rem, 11.5cqi, 6.5rem); overflow-wrap: break-word; }
.hero__lede { max-width: 38rem; }
.hero .button-row { margin-top: var(--space-6); }
.demo-login-form { margin-top: var(--space-3); }
.demo-login-form button { border: 0; background: transparent; }
.trust-list { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; padding: 0; margin: var(--space-5) 0 0; color: var(--ink-faint); font-size: .78rem; list-style: none; }
.trust-list li::before { margin-right: .4rem; color: var(--accent); content: "✓"; font-weight: 800; }
.hero__preview { position: relative; padding: 3.4rem 0; }
.activity-card { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); }
.activity-card--demo { position: relative; z-index: 1; padding: clamp(1.3rem, 4vw, 2.2rem); transform: rotate(-1deg); }
.activity-card__topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-5); }
.activity-card__type { margin: 0; color: var(--ink-faint); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.activity-card h2 { margin: .25rem 0 .85rem; font-size: 1.55rem; }
.activity-card__original { font-size: .9rem; }
.demo-label { display: inline-flex; padding: .27rem .55rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--ink-faint); font-size: .65rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.status-dot { display: inline-flex; align-items: center; gap: .4rem; color: var(--success); font-size: .72rem; font-weight: 700; }
.status-dot span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--success); }
.managed-block { padding: var(--space-4); border-left: 2px solid var(--accent); background: var(--accent-soft); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .78rem; line-height: 1.55; }
.managed-block > span { display: block; color: var(--accent-dark); font-size: .62rem; }
.managed-block p { margin: .6rem 0; color: var(--ink); }
.managed-block--large { padding: var(--space-5); font-size: .86rem; }
.managed-block code { display: block; overflow-wrap: anywhere; color: var(--ink); font-size: .72rem; line-height: 1.7; }
.demo-carousel { padding: 0; border: 0; margin: 0; }
.demo-focus { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.demo-focus__label { color: var(--ink-faint); font-size: .7rem; font-weight: 750; }
.demo-focus__choices { display: inline-flex; padding: .2rem; border: 1px solid var(--line-strong); border-radius: 2rem; background: var(--surface); }
.demo-focus__choice { padding: .28rem .65rem; border: 0; border-radius: 2rem; background: transparent; color: var(--ink-faint); font-size: .69rem; font-weight: 750; }
.demo-focus__choice.is-active { background: var(--accent); color: white; }
.demo-carousel__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.demo-carousel__tab { padding: .35rem .8rem; border: 1px solid var(--line-strong); border-radius: 2rem; background: var(--paper); color: var(--ink-faint); cursor: pointer; font-size: .74rem; font-weight: 700; }
.demo-carousel__panel { display: none; }
.demo-carousel__panel:first-child { display: block; }
.demo-carousel__input:nth-of-type(1):checked ~ .demo-carousel__tabs .demo-carousel__tab:nth-child(1),
.demo-carousel__input:nth-of-type(2):checked ~ .demo-carousel__tabs .demo-carousel__tab:nth-child(2),
.demo-carousel__input:nth-of-type(3):checked ~ .demo-carousel__tabs .demo-carousel__tab:nth-child(3),
.demo-carousel__input:nth-of-type(4):checked ~ .demo-carousel__tabs .demo-carousel__tab:nth-child(4) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.demo-carousel__input:nth-of-type(1):focus-visible ~ .demo-carousel__tabs .demo-carousel__tab:nth-child(1),
.demo-carousel__input:nth-of-type(2):focus-visible ~ .demo-carousel__tabs .demo-carousel__tab:nth-child(2),
.demo-carousel__input:nth-of-type(3):focus-visible ~ .demo-carousel__tabs .demo-carousel__tab:nth-child(3),
.demo-carousel__input:nth-of-type(4):focus-visible ~ .demo-carousel__tabs .demo-carousel__tab:nth-child(4) { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo-carousel__input:checked ~ .demo-carousel__panels > .demo-carousel__panel { display: none; }
.demo-carousel__input:nth-of-type(1):checked ~ .demo-carousel__panels > .demo-carousel__panel:nth-child(1),
.demo-carousel__input:nth-of-type(2):checked ~ .demo-carousel__panels > .demo-carousel__panel:nth-child(2),
.demo-carousel__input:nth-of-type(3):checked ~ .demo-carousel__panels > .demo-carousel__panel:nth-child(3),
.demo-carousel__input:nth-of-type(4):checked ~ .demo-carousel__panels > .demo-carousel__panel:nth-child(4) { display: block; }
.activity-card__disclaimer { margin: .75rem 0 0; color: var(--ink-faint); font-size: .66rem; line-height: 1.45; }
.preview-note { position: absolute; z-index: 2; padding: .55rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-size: .72rem; font-weight: 700; }
.preview-note--one { top: .25rem; right: -1rem; }
.preview-note--two { bottom: .25rem; left: -1.3rem; }

.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section--narrow { padding-block: clamp(4rem, 8vw, 7rem); }
.section--tint { border-block: 1px solid var(--line); background: var(--paper-deep); }
.section--pricing { border-block: 1px solid var(--line); background: var(--surface-muted); }
.section--comparison { border-bottom: 1px solid var(--line); background: var(--surface); }
.section-heading { max-width: 43rem; margin-bottom: var(--space-7); }
.section-heading > p:last-child { max-width: 60ch; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading--split { display: grid; max-width: none; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: end; }
.section-heading--split p { margin-bottom: .2rem; }
.steps-grid { display: grid; padding: 0; margin: 0; grid-template-columns: repeat(3, 1fr); list-style: none; }
.steps-grid li { min-height: 15rem; padding: var(--space-5); border: 1px solid var(--line); border-right: 0; }
.steps-grid li:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.steps-grid li:last-child { border-right: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0; }
.steps-grid li > span { display: block; margin-bottom: var(--space-6); color: var(--accent); font-family: ui-monospace, monospace; font-size: .8rem; }
.steps-grid p { margin-bottom: 0; font-size: .9rem; }
.feature-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(3rem, 8vw, 8rem); }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.feature-grid article { min-height: 13rem; padding: var(--space-5); border-top: 1px solid var(--line-strong); }
.feature-grid article:nth-child(odd) { border-right: 1px solid var(--line-strong); }
.feature-grid article > span { display: grid; width: 2.3rem; height: 2.3rem; margin-bottom: var(--space-5); place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent-dark); font-size: .72rem; font-weight: 800; }
.feature-grid p { margin-bottom: 0; font-size: .88rem; }
.comparison-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.comparison-card { min-height: 20rem; padding: clamp(1.5rem, 4vw, 2.6rem); border: 1px solid var(--line-strong); background: var(--surface-muted); }
.comparison-card:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.comparison-card:last-child { border-left: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.comparison-card--accent { background: var(--accent-dark); color: white; }
.comparison-card--accent p, .comparison-card--accent li { color: #d1e5e1; }
.comparison-card__label, .sport-card__label { margin-bottom: var(--space-5); color: var(--accent-dark); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.comparison-card ul, .price-card__features { padding: 0; margin: var(--space-5) 0 0; list-style: none; }
.comparison-card li, .price-card__features li { position: relative; padding-left: 1.35rem; color: var(--ink-soft); font-size: .88rem; }
.comparison-card.comparison-card--accent li { color: #d1e5e1; }
.comparison-card li + li, .price-card__features li + li { margin-top: .65rem; }
.comparison-card li::before, .price-card__features li::before { position: absolute; left: 0; color: var(--accent); content: "✓"; font-weight: 800; }
.comparison-card--accent li::before { color: #8dd5ca; }
.sport-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.sport-card { min-height: 15rem; padding: var(--space-5); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.sport-card h3 { max-width: 20ch; font-size: 1.35rem; }
.sport-card p:last-child { margin-bottom: 0; }
.metric-cloud { display: flex; flex-wrap: wrap; gap: .65rem; }
.metric-cloud span { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--surface); color: var(--ink-soft); font-size: .8rem; }
.metric-cloud .metric-cloud__more { border-style: dashed; color: var(--accent-dark); }
.pricing-grid { display: grid; max-width: 48rem; margin-inline: auto; grid-template-columns: repeat(2, 1fr); }
.price-card { position: relative; display: flex; min-height: 27rem; flex-direction: column; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line-strong); background: var(--surface); }
.price-card:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.price-card:last-child { border-left: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.price-card--featured { background: var(--ink); color: var(--paper); }
.price-card--featured p { color: #cdd1ce; }
.price-card.is-current { outline: 2px solid var(--accent); outline-offset: -2px; }
.price-card.is-selected { box-shadow: inset 0 0 0 3px var(--brand-coral); }
.price-card--featured.is-current, .price-card--featured.is-selected { outline-color: var(--brand-coral); box-shadow: inset 0 0 0 3px var(--brand-coral); }
.price-card__badge { position: absolute; top: 1rem; right: 1rem; padding: .25rem .55rem; border-radius: 2rem; background: var(--accent-soft); color: var(--accent-dark); font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.price-card__name { color: var(--ink); font-weight: 720; }
.price { margin: var(--space-6) 0 var(--space-4); color: var(--ink); }
.price strong { font-size: clamp(2.8rem, 6vw, 4.3rem); font-weight: 650; letter-spacing: -.06em; }
.price span { color: var(--ink-faint); font-size: .9rem; }
.price-tax { margin: calc(-1 * var(--space-3)) 0 var(--space-4); color: var(--ink-faint); font-size: .7rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.price-card--featured .price { color: var(--paper); }
.price-card--featured .price span { color: #cdd1ce; }
.price-card--featured .price-tax { color: #cdd1ce; }
.price-card--featured .button--primary { border-color: var(--paper); background: var(--paper); color: var(--accent-dark); }
.price-card--featured .button--primary:hover:not(:disabled):not([aria-disabled="true"]) { border-color: white; background: white; color: var(--accent-dark); }
.price-card .button, .price-card form { margin-top: auto; }
.price-card__features { margin-bottom: var(--space-5); }
.price-card--featured .price-card__features li { color: #d1d5d2; }
.price-card--featured .price-card__features li::before { color: #8dd5ca; }
.pricing-footnote { margin: var(--space-5) auto 0; text-align: center; font-size: .8rem; }
.pricing-grid--app { margin-top: var(--space-6); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-list details { border-bottom: 1px solid var(--line-strong); }
.faq-list summary { position: relative; padding: 1.3rem 2.4rem 1.3rem 0; font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 1.15rem; right: .3rem; content: "+"; color: var(--accent); font-size: 1.4rem; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 58ch; padding: 0 0 1.4rem; margin: 0; }
.closing-cta { padding: clamp(5rem, 11vw, 9rem) 0; background: var(--accent-dark); color: white; text-align: center; }
.closing-cta .eyebrow, .closing-cta p { color: #d1e5e1; }
.closing-cta h2 { max-width: 19ch; margin-inline: auto; font-size: clamp(2rem, 5vw, 4rem); }
.closing-cta .button { margin-top: var(--space-4); }

.app-section { min-height: 70vh; padding: clamp(2.5rem, 6vw, 5rem) 0 var(--space-8); }
.page-heading { margin-bottom: var(--space-6); }
.page-heading h1 { max-width: 20ch; margin-bottom: var(--space-3); font-size: clamp(2.2rem, 4vw, 3.5rem); }
.page-heading > p:last-child { max-width: 65ch; margin-bottom: 0; }
.page-heading--actions { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.page-heading--actions > *:last-child { flex: 0 0 auto; }
.activity-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.activity-hero-description { max-width: 58rem; padding: var(--space-4); margin-top: var(--space-5); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-muted); }
.activity-hero-description .eyebrow { margin-bottom: .45rem; }
.activity-hero-description__text { margin: 0; color: var(--ink-soft); line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.activity-metadata-editor { max-width: 58rem; padding: var(--space-5); margin-top: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-soft); }
.activity-metadata-editor form { display: grid; gap: var(--space-4); }
.activity-metadata-feedback { min-height: 1.4em; margin: 0; }
.activity-preview-editor { display: block; width: 100%; min-height: 13rem; resize: vertical; white-space: pre-wrap; }
.field textarea.activity-preview-editor { border-color: #4bb1a7; background: #222723; color: #eef2ef; caret-color: #eef2ef; }
.field textarea.activity-preview-editor:hover { border-color: #84c4bd; }
.field textarea.activity-preview-editor:focus { border-color: var(--focus); }
.activity-preview-edit-field small { display: block; margin-top: var(--space-2); color: var(--ink-muted); }
.activity-preview-limit { color: var(--ink-muted); font-size: .78rem; }
.activity-preview-panel[aria-busy="true"] { position: relative; }
.activity-preview-panel[aria-busy="true"]::after { position: absolute; inset: 0; border-radius: inherit; background: rgb(255 255 255 / 55%); content: ""; pointer-events: none; }
.activity-preview-panel[aria-busy="true"] .button-row, .activity-preview-panel[aria-busy="true"] .activity-preview-feedback { position: relative; z-index: 1; }
.activity-preview-panel--primary { margin-bottom: var(--space-7); }
.activity-preview-feedback { min-height: 1.2em; margin: var(--space-3) 0 0; text-align: right; }
.panel, .side-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.panel { padding: clamp(1.2rem, 3vw, 2rem); }
.panel__header { margin-bottom: var(--space-5); }
.panel__header h2 { margin-bottom: .55rem; font-size: clamp(1.35rem, 3vw, 1.85rem); }
.panel__header > p:last-child { max-width: 62ch; margin-bottom: 0; font-size: .9rem; }
.panel__header--actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.flash-stack { position: relative; z-index: 90; padding-top: var(--space-3); }
.flash { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.flash + .flash { margin-top: .5rem; }
.flash--success { border-color: #9fc3ac; background: var(--success-soft); }
.flash--error { border-color: #d9aaa4; background: var(--danger-soft); }
.flash button { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; }
.latest-description { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding: clamp(1.35rem, 4vw, 2.4rem); margin-bottom: var(--space-6); border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.latest-description h2 { margin: .2rem 0 .55rem; font-size: clamp(1.6rem, 4vw, 2.35rem); }
.latest-description p { max-width: 70ch; margin-bottom: 0; }
.latest-description__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; }
.latest-description__preview { display: -webkit-box; overflow: hidden; padding: .8rem 1rem; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: rgb(255 255 255 / 58%); color: var(--ink); font-size: .86rem; line-height: 1.55; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.latest-description__action { min-width: max-content; }
.pricing-availability { max-width: 48rem; margin: 0 auto var(--space-6); text-align: center; }
.status-grid { display: grid; margin-bottom: var(--space-6); grid-template-columns: repeat(3, 1fr); }
.status-card { min-height: 15rem; padding: var(--space-5); border: 1px solid var(--line); border-right: 0; background: var(--surface); }
.status-card:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.status-card:last-child { border-right: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0; }
.status-card__heading { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--space-5); }
.status-card__heading h2 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.status-card__icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--surface-muted); color: var(--accent-dark); font-size: .72rem; font-weight: 800; }
.status-card > p:not(.status-pill) { min-height: 3rem; margin-top: var(--space-3); font-size: .84rem; }
.status-card .text-link, .status-card .text-button { font-size: .8rem; }
.sync-progress { margin: var(--space-3) 0; }
.sync-progress progress { display: block; width: 100%; height: .65rem; accent-color: var(--accent); }
.sync-progress small { display: block; margin-top: .35rem; color: var(--text-muted); font-size: .76rem; }
.status-pill { display: inline-flex; min-height: 1.8rem; align-items: center; gap: .42rem; padding: .22rem .6rem; border-radius: 2rem; background: var(--surface-muted); color: var(--ink-soft); font-size: .69rem; font-weight: 750; line-height: 1.2; }
.status-pill > span { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.status-pill--success { background: var(--success-soft); color: var(--success); }
.status-pill--warning { background: var(--warning-soft); color: var(--warning); }
.status-pill--danger { background: var(--danger-soft); color: var(--danger); }
.status-pill--neutral { background: var(--surface-muted); color: var(--ink-soft); }
.onboarding-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-5); margin-bottom: var(--space-6); border-radius: var(--radius); background: var(--accent-soft); }
.onboarding-banner h2 { margin: .3rem 0; font-size: 1.4rem; }
.onboarding-banner p { margin-bottom: 0; }
.onboarding-banner__step { color: var(--accent-dark); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.athlete-onboarding { padding: 0; margin-bottom: var(--space-6); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.athlete-onboarding form { padding: clamp(1.35rem, 4vw, 2.4rem); }
.athlete-onboarding__heading { display: flex; gap: var(--space-4); align-items: flex-start; }
.athlete-onboarding__heading h2 { margin: .2rem 0 .55rem; font-size: clamp(1.6rem, 4vw, 2.35rem); }
.athlete-onboarding__heading p:last-child { max-width: 62ch; margin-bottom: 0; color: var(--ink-soft); }
.athlete-onboarding__icon { display: grid; flex: 0 0 3rem; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; background: var(--accent-soft); font-size: 1.25rem; }
.athlete-onboarding__fields { margin-top: var(--space-6); }
.athlete-onboarding__privacy { margin: var(--space-5) 0 0; color: var(--ink-faint); font-size: .78rem; }
.athlete-onboarding__actions { justify-content: flex-end; margin-top: var(--space-5); }
.description-focus-onboarding { margin-bottom: var(--space-6); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.description-focus-onboarding > form { padding: clamp(1.35rem, 4vw, 2.4rem); }
.description-focus-onboarding__heading { display: flex; gap: var(--space-5); align-items: flex-start; justify-content: space-between; }
.description-focus-onboarding__heading h2 { margin: .2rem 0 .55rem; font-size: clamp(1.6rem, 4vw, 2.35rem); }
.description-focus-onboarding__heading p:last-child { max-width: 62ch; margin-bottom: 0; color: var(--ink-soft); }
.description-focus-toggle { display: flex; flex: 0 0 auto; gap: .35rem; padding: .25rem; border: 1px solid var(--line-strong); border-radius: 2rem; background: var(--surface-muted); }
.description-focus-toggle .choice-card span { min-height: 2.55rem; border-color: transparent; background: transparent; white-space: nowrap; }
.description-focus-toggle .choice-card input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.description-focus-onboarding__hint { max-width: 70ch; margin: var(--space-3) 0 var(--space-5); }
.description-focus-preview { max-width: 56rem; }
.description-focus-preview .activity-card--demo { min-height: 0; }
.description-focus-preview .activity-card--demo h3 { margin: .2rem 0 .7rem; font-size: 1.1rem; }
.description-focus-preview .managed-block { margin-top: var(--space-3); }
.description-focus-onboarding__actions { justify-content: flex-end; margin-top: var(--space-5); }
.activity-list-section { padding: 0; overflow: hidden; }
.activity-list-section .panel__header { padding: var(--space-5); margin: 0; border-bottom: 1px solid var(--line); }
.activity-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); color: var(--ink-faint); }
.activity-pagination [aria-disabled="true"] { opacity: .45; pointer-events: none; }
.inline-filter { display: flex; align-items: center; gap: .55rem; }
.inline-filter label { color: var(--ink-faint); font-size: .72rem; }
.inline-filter select { padding: .45rem 1.9rem .45rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); font-size: .78rem; }
.activity-row { position: relative; display: grid; min-height: 7.5rem; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); cursor: pointer; grid-template-columns: 2.8rem minmax(0, 1fr) auto auto; gap: var(--space-4); align-items: center; }
.activity-row[hidden] { display: none; }
.activity-row:last-child { border-bottom: 0; }
.activity-row:hover { background: #fbfaf6; }
.activity-row__primary-link { position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
.activity-row__primary-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.activity-row__icon { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); }
.activity-row__meta { margin: 0; color: var(--ink-faint); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.activity-row h3 { margin: .15rem 0 .2rem; }
.activity-row h3 a { text-decoration: none; }
.activity-row__description { display: -webkit-box; overflow: hidden; margin: 0 0 .3rem; color: var(--ink-soft); font-size: .78rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.activity-row__main > p:last-child { margin: 0; font-size: .78rem; }
.activity-row__facts { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin: 0; color: var(--ink-faint); font-size: .72rem; }
.activity-row__facts span { white-space: nowrap; }
.activity-row__facts span + span::before { margin-right: .8rem; color: var(--line-strong); content: "·"; }
.activity-sparkline { width: min(100%, 16rem); height: 2.8rem; margin-top: .45rem; color: var(--accent); }
.activity-sparkline--weather { color: var(--brand-coral); }
.activity-sparkline--air { color: var(--success); }
.activity-sparkline svg { width: 100%; height: 100%; overflow: visible; }
.activity-route-map { width: min(100%, 17.5rem); aspect-ratio: 16 / 7; overflow: hidden; margin-top: .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--accent); }
.activity-route-map svg { display: block; width: 100%; height: 100%; }
.activity-route-map.is-geographic { position: relative; background: #dce8e8; }
.activity-route-map.is-geographic svg { position: absolute; inset: 0; z-index: 2; }
.activity-route-map__canvas { position: absolute; inset: 0; z-index: 1; }
.activity-route-map__canvas .maplibregl-canvas { display: block; }
.activity-route-map.is-pmtiles > svg { opacity: 0; }
.activity-route-map__tiles { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.activity-route-map__tiles image { image-rendering: auto; }
.activity-route-map__attribution { position: absolute; right: .25rem; bottom: .2rem; z-index: 3; padding: .08rem .25rem; border-radius: .15rem; background: rgb(255 255 255 / 82%); color: #243a3e; font-size: .5rem; line-height: 1.2; text-decoration: none; }
.activity-route-map__line { fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; vector-effect: non-scaling-stroke; }
.activity-route-map__start { fill: var(--surface); stroke: currentcolor; stroke-width: 3; vector-effect: non-scaling-stroke; }
.activity-route-map__end { fill: var(--brand-coral); stroke: var(--surface); stroke-width: 3; vector-effect: non-scaling-stroke; }
.activity-route-map-panel { overflow: hidden; }
.activity-route-map--detail { width: 100%; max-width: 40rem; margin-top: 0; }
.activity-route-map-panel .retention-note { margin-bottom: 0; }
.activity-row__status { display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; }
.activity-row__status > span:last-child { color: var(--ink-faint); font-size: .65rem; }
.activity-row__actions { display: flex; align-items: center; gap: .5rem; }
.activity-row__actions form { position: relative; z-index: 2; }
.empty-state, .filter-empty { padding: var(--space-7) var(--space-5); text-align: center; }
.empty-state__icon { display: grid; width: 3.6rem; height: 3.6rem; margin: 0 auto var(--space-4); place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent-dark); font-size: 1.3rem; }
.empty-state h3 { font-size: 1.35rem; }
.empty-state p { max-width: 36rem; margin-inline: auto; }
.empty-state form { margin-top: var(--space-4); }
.retention-note { display: flex; align-items: flex-start; gap: .6rem; margin: var(--space-4) 0 0; font-size: .75rem; }
.retention-note > span { display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-size: .65rem; font-weight: 800; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-6); align-items: start; }
.description-preview { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.description-preview__user { margin-bottom: var(--space-5); white-space: pre-wrap; }
.preview-meta { display: flex; justify-content: space-between; margin-top: .65rem; color: var(--ink-faint); font-size: .7rem; }
.side-panel { padding: var(--space-4); }
.side-panel h2 { font-size: 1rem; }
.definition-list { margin: 0; }
.definition-list > div { display: grid; padding: .75rem 0; border-bottom: 1px solid var(--line); grid-template-columns: 1fr auto; gap: var(--space-3); }
.definition-list > div:last-child { border-bottom: 0; }
.definition-list dt { color: var(--ink-faint); font-size: .72rem; }
.definition-list dd { margin: 0; font-size: .75rem; font-weight: 680; text-align: right; }
.activity-charts-panel { overflow: hidden; }
.chart-summary { display: grid; margin: 0 0 var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chart-summary > div { min-width: 0; padding: var(--space-3) var(--space-4); border-right: 1px solid var(--line); }
.chart-summary > div:last-child { border-right: 0; }
.chart-summary dt { color: var(--ink-faint); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.chart-summary dd { margin: .2rem 0 0; overflow: hidden; font-size: .82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.activity-analysis { margin: 0 0 var(--space-7); padding: clamp(1.1rem, 3vw, 2rem); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.activity-analysis__heading { display: flex; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
.activity-analysis__heading h2 { margin-bottom: .35rem; font-size: clamp(1.55rem, 3vw, 2.35rem); }
.activity-analysis__heading p:last-child { max-width: 48rem; margin-bottom: 0; color: var(--ink-soft); }
.environment-overview { margin-bottom: var(--space-6); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.environment-overview__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.environment-overview__heading h3 { margin: .15rem 0; font-size: 1.2rem; }
.dashboard-environment-overview .environment-overview__heading h2 { margin: .15rem 0; font-size: clamp(1.35rem, 3vw, 1.85rem); }
.environment-overview__heading p:last-child { max-width: 42rem; margin: 0; color: var(--ink-soft); font-size: .76rem; }
.environment-overview__heading > span { flex: 0 0 auto; color: var(--ink-faint); font-size: .64rem; }
.environment-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.environment-summary { --environment-tone: var(--brand-coral); min-width: 0; padding: .72rem .78rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-muted); }
.environment-summary--air, .environment-summary--success { --environment-tone: var(--success); }
.environment-summary--marine { --environment-tone: #287c91; }
.environment-summary--warning, .environment-summary--weather { --environment-tone: var(--brand-coral); }
.environment-summary--danger { --environment-tone: var(--danger); }
.environment-summary__heading { display: flex; min-width: 0; align-items: center; gap: .42rem; }
.environment-summary__heading > span { flex: 0 0 auto; font-size: .9rem; }
.environment-summary__heading p { min-width: 0; margin: 0; overflow: hidden; color: var(--ink-faint); font-size: .62rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.environment-summary > strong { display: block; margin: .32rem 0 .12rem; overflow-wrap: anywhere; font-size: 1.05rem; line-height: 1.05; }
.environment-summary > strong small { color: var(--ink-soft); font-size: .62rem; }
.environment-summary > span { display: block; min-height: .8rem; overflow: hidden; color: var(--ink-faint); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.environment-summary meter { display: block; width: 100%; height: .34rem; margin-top: .5rem; border: 0; background: var(--line); }
.environment-summary meter::-webkit-meter-bar { border: 0; border-radius: 1rem; background: var(--line); box-shadow: none; }
.environment-summary meter::-webkit-meter-optimum-value { border-radius: 1rem; background: var(--environment-tone); }
.environment-summary meter::-moz-meter-bar { border-radius: 1rem; background: var(--environment-tone); }
.analysis-subheading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.analysis-subheading h3 { margin: 0; font-size: 1rem; }
.analysis-subheading p { margin: 0; color: var(--ink-faint); font-size: .68rem; }
.analysis-kpi-grid { display: grid; margin-bottom: var(--space-6); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.analysis-kpi { min-width: 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.analysis-kpi::before { display: block; width: 1.5rem; height: .18rem; margin-bottom: .65rem; border-radius: 1rem; content: ""; background: var(--accent); }
.analysis-kpi--success::before { background: var(--success); }
.analysis-kpi--warning::before, .analysis-kpi--weather::before { background: var(--brand-coral); }
.analysis-kpi--danger::before { background: var(--danger); }
.analysis-kpi p, .analysis-kpi span { display: block; margin: 0; color: var(--ink-faint); font-size: .66rem; }
.analysis-kpi .analysis-kpi__label { display: flex; align-items: center; gap: .35rem; }
.metric-help { position: relative; flex: 0 0 auto; }
.metric-help button { display: grid; width: 1.15rem; height: 1.15rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink-soft); cursor: help; font: inherit; font-weight: 800; place-items: center; }
.metric-help [role="tooltip"] { position: absolute; z-index: 20; top: calc(100% + .4rem); left: 50%; width: min(18rem, calc(100vw - 3rem)); padding: .55rem .65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--ink); box-shadow: 0 .45rem 1.2rem rgb(23 26 24 / 18%); color: var(--surface); font-size: .7rem; line-height: 1.4; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-.2rem); transition: opacity 120ms ease, transform 120ms ease; visibility: hidden; }
.metric-help:hover [role="tooltip"], .metric-help:focus-within [role="tooltip"] { opacity: 1; transform: translateX(-50%) translateY(0); visibility: visible; }
.analysis-kpi strong { display: block; margin: .25rem 0 .15rem; overflow-wrap: anywhere; font-size: clamp(1.25rem, 2.5vw, 1.8rem); line-height: 1.05; }
.analysis-kpi strong small { color: var(--ink-soft); font-size: .68rem; font-weight: 700; }
.chart-toolbar-wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-6); }
.chart-toolbar { display: flex; overflow-x: auto; gap: .45rem; margin: 0; padding-bottom: .25rem; scrollbar-width: thin; }
.chart-filter { display: inline-flex; min-height: 2.65rem; flex: 0 0 auto; align-items: center; gap: .45rem; padding: .55rem .8rem; border: 1px solid var(--line-strong); border-radius: 2rem; background: var(--surface); color: var(--ink-soft); font: inherit; font-size: .72rem; font-weight: 720; cursor: pointer; }
.chart-filter span { display: grid; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; place-items: center; border-radius: 1rem; background: var(--paper-deep); color: var(--ink-faint); font-size: .58rem; }
.chart-filter:hover { border-color: var(--accent); color: var(--ink); }
.chart-filter.is-active { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.chart-filter.is-active span { background: rgb(255 255 255 / 16%); color: inherit; }
.chart-axis-toggle { display: inline-flex; flex: 0 0 auto; padding: .2rem; border: 1px solid var(--line-strong); border-radius: 2rem; background: var(--surface-muted); }
.chart-axis-toggle button { min-height: 2.2rem; padding: .4rem .75rem; border: 0; border-radius: 2rem; background: transparent; color: var(--ink-soft); font: inherit; font-size: .7rem; font-weight: 730; cursor: pointer; }
.chart-axis-toggle button.is-active { background: var(--ink); color: var(--surface); }
.activity-chart-sections { display: grid; gap: var(--space-7); }
.activity-chart-section[hidden] { display: none; }
.activity-chart-section__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.activity-chart-section__heading h3 { margin: 0; font-size: 1.2rem; }
.activity-chart-section__heading span { color: var(--ink-faint); font-size: .68rem; }
.strava-data-panel { padding-top: var(--space-6); margin-top: var(--space-7); border-top: 1px solid var(--line-strong); }
.strava-data-panel .activity-chart-section__heading { align-items: flex-start; }
.strava-data-panel .activity-chart-section__heading p:last-child { max-width: 48rem; margin: .3rem 0 0; color: var(--ink-soft); font-size: .78rem; }
.strava-fact-grid { display: grid; margin: 0 0 var(--space-6); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.strava-fact-grid > div { min-width: 0; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-muted); }
.strava-fact-grid dt { color: var(--ink-faint); font-size: .64rem; }
.strava-fact-grid dd { margin: .22rem 0 0; overflow-wrap: anywhere; color: var(--ink); font-size: .92rem; font-weight: 760; }
.strava-stream-grid { display: grid; padding: 0; margin: var(--space-4) 0 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; list-style: none; }
.strava-stream { display: grid; min-width: 0; padding: .68rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-muted); grid-template-columns: auto 1fr; column-gap: .45rem; }
.strava-stream > span { grid-row: 1 / 3; color: var(--ink-faint); }
.strava-stream strong, .strava-stream small { min-width: 0; overflow-wrap: anywhere; }
.strava-stream strong { font-size: .72rem; }
.strava-stream small { color: var(--ink-faint); font-size: .61rem; }
.strava-stream.is-available { border-color: color-mix(in srgb, var(--success) 36%, var(--line)); background: color-mix(in srgb, var(--success) 6%, var(--surface)); }
.strava-stream.is-available > span { color: var(--success); }
.activity-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.environment-indicator-grid { display: grid; margin-top: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.environment-indicator { min-width: 0; padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.environment-indicator__heading { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.environment-indicator__heading h4 { margin: 0; font-size: .82rem; }
.environment-indicator__heading span { color: var(--ink-faint); font-size: .58rem; white-space: nowrap; }
.environment-indicator dl { display: grid; margin: .75rem 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.environment-indicator dl > div { min-width: 0; padding-top: .45rem; border-top: 2px solid var(--brand-coral); }
.environment-indicator--air dl > div { border-color: var(--success); }
.environment-indicator--marine dl > div { border-color: #287c91; }
.environment-indicator dt { color: var(--ink-faint); font-size: .57rem; }
.environment-indicator dd { margin: .18rem 0 0; overflow-wrap: anywhere; font-size: .88rem; font-weight: 760; }
.environment-indicator dd small { color: var(--ink-soft); font-size: .58rem; }
.activity-chart-card { --chart-color: var(--accent); min-width: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.activity-chart-card--weather { --chart-color: var(--brand-coral); }
.activity-chart-card--air { --chart-color: var(--success); }
.activity-chart-card--marine { --chart-color: #287c91; }
.activity-chart-card__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.activity-chart-card__heading h3, .activity-chart-card__heading h4 { margin-bottom: 0; font-size: .92rem; }
.activity-chart-card__heading p { margin: .2rem 0 0; color: var(--ink-faint); font-size: .64rem; }
.activity-chart-card__heading span { color: var(--ink-faint); font-size: .68rem; white-space: nowrap; }
.activity-chart { width: 100%; height: 8.5rem; margin: var(--space-3) 0; overflow: visible; }
.activity-chart-stage { min-width: 0; }
.activity-chart--interactive { height: auto; min-height: 13rem; margin: .7rem 0 .3rem; outline: none; touch-action: pan-y; }
.activity-chart--interactive:focus-visible { border-radius: var(--radius-xs); box-shadow: 0 0 0 3px var(--focus); }
.activity-chart__grid { stroke: var(--line); stroke-width: 1; }
.activity-chart__grid--vertical { stroke-dasharray: 2 6; }
.activity-chart [hidden] { display: none; }
.activity-chart__zero { stroke: var(--line-strong); stroke-dasharray: 4 5; stroke-width: 1; }
.activity-chart__line { fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.activity-chart__point { fill: var(--surface); stroke: currentcolor; stroke-width: 3; vector-effect: non-scaling-stroke; }
.activity-chart-card .activity-chart__line, .activity-chart-card .activity-chart__point { color: var(--chart-color); }
.activity-chart__axis-label { fill: var(--ink-faint); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 10px; }
.activity-chart__axis-label--y { text-anchor: end; dominant-baseline: middle; }
.activity-chart__axis-label--x { text-anchor: middle; }
.activity-chart__cursor line { stroke: var(--chart-color); stroke-dasharray: 3 4; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.activity-chart__cursor circle { fill: var(--surface); stroke: var(--chart-color); stroke-width: 3; vector-effect: non-scaling-stroke; }
.activity-chart-readout { display: flex; width: fit-content; min-width: 8rem; align-items: baseline; justify-content: space-between; gap: .75rem; margin: .7rem 0 0 auto; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-muted); color: var(--ink-faint); font-size: .58rem; pointer-events: none; }
.activity-chart-readout strong { color: var(--ink); font-size: .72rem; }
.activity-chart-card__meta { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0; color: var(--ink-faint); font-size: .66rem; }
.timeline { padding: 0; margin: var(--space-4) 0 0; list-style: none; }
.timeline li { position: relative; display: flex; gap: .75rem; padding-bottom: 1.2rem; }
.timeline li::before { position: absolute; top: .7rem; bottom: -.1rem; left: .3rem; width: 1px; content: ""; background: var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline li > span { position: relative; z-index: 1; width: .65rem; height: .65rem; flex: 0 0 auto; margin-top: .3rem; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
.timeline li.is-done > span { border-color: var(--success); background: var(--success); }
.timeline li.is-error > span { border-color: var(--danger); background: var(--danger); }
.timeline strong, .timeline small { display: block; }
.timeline strong { font-size: .75rem; }
.timeline small { margin-top: .15rem; color: var(--ink-faint); font-size: .65rem; }
.metric-table-wrap { overflow-x: auto; }
.metric-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.metric-table th, .metric-table td { padding: .85rem .7rem; border-bottom: 1px solid var(--line); text-align: left; }
.metric-table thead th { color: var(--ink-faint); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }
.metric-table tbody tr:last-child th, .metric-table tbody tr:last-child td { border-bottom: 0; }
.source-tag { display: inline-flex; padding: .2rem .45rem; border-radius: 1rem; background: var(--surface-muted); color: var(--ink-soft); font-size: .67rem; }
.notice { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--ink-soft); font-size: .8rem; }
.notice strong { display: block; margin-bottom: .2rem; color: var(--ink); }
.notice p { margin: 0; font-size: inherit; }
.notice--quiet { border-color: var(--line); background: var(--paper-deep); }
.notice--test { display: flex; gap: .6rem; margin-bottom: var(--space-5); border-color: #cbbd91; background: var(--warning-soft); }
.notice--test strong { flex: 0 0 auto; }
.notice--warning { border-color: #d3bc81; background: var(--warning-soft); color: var(--warning); }
.notice--error { border-color: #d9aaa4; background: var(--danger-soft); color: var(--danger-dark); }

.current-plan { display: grid; grid-template-columns: minmax(12rem, 1fr) auto auto; gap: var(--space-6); align-items: center; }
.current-plan h2 { font-size: 1.6rem; }
.current-plan__facts { display: flex; gap: var(--space-6); margin: 0; }
.current-plan__facts dt { color: var(--ink-faint); font-size: .68rem; }
.current-plan__facts dd { margin: .2rem 0 0; font-size: .85rem; font-weight: 700; }
.current-plan__notice { max-width: 34rem; color: var(--warning); font-size: .75rem; }
.check-list, .cross-list { padding: 0; margin: var(--space-5) 0; list-style: none; }
.check-list li, .cross-list li { position: relative; padding: .35rem 0 .35rem 1.5rem; color: var(--ink-soft); font-size: .82rem; }
.check-list li::before { position: absolute; left: 0; color: var(--accent); content: "✓"; font-weight: 800; }
.cross-list li::before { position: absolute; left: 0; color: var(--danger); content: "×"; font-weight: 800; }
.price-card--featured .check-list li { color: #cdd1ce; }
.billing-notes { display: flex; justify-content: center; gap: var(--space-6); margin: var(--space-5) 0; }
.billing-notes p { margin: 0; font-size: .75rem; }
.billing-notes span { margin-right: .35rem; color: var(--success); font-weight: 800; }
.invoices-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.invoices-panel h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.invoices-panel p { margin: 0; font-size: .8rem; }

.field, .field-group { display: block; }
.field > span, .field-group legend { display: block; margin-bottom: .4rem; color: var(--ink-soft); font-size: .74rem; font-weight: 680; }
.field input, .field select, .field textarea, .search-field input, .inline-filter select { width: 100%; min-height: 2.75rem; padding: .58rem .75rem; border: 1px solid var(--control-border); border-radius: var(--radius-xs); background: var(--surface); font-size: .86rem; }
.field input:hover, .field select:hover, .field textarea:hover, .search-field input:hover { border-color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus, .search-field input:focus { border-color: var(--focus); outline: 3px solid var(--focus); outline-offset: 2px; }
.field textarea { min-height: 7rem; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.form-grid--three { grid-template-columns: repeat(3, 1fr); }
.form-actions { display: flex; justify-content: flex-end; padding-top: var(--space-5); margin-top: var(--space-5); border-top: 1px solid var(--line); }
.input-suffix { display: flex; align-items: center; border: 1px solid var(--control-border); border-radius: var(--radius-xs); background: var(--surface); }
.input-suffix:focus-within { border-color: var(--focus); outline: 3px solid var(--focus); outline-offset: 2px; }
.input-suffix input { min-width: 0; border: 0; outline: 0 !important; }
.input-suffix > span { padding-right: .7rem; color: var(--ink-faint); font-size: .72rem; }
.field-group { padding: 0; margin: var(--space-5) 0; border: 0; }
.field-group legend { margin-bottom: .65rem; }
.switch-list { border-top: 1px solid var(--line); }
.switch-list--compact { margin-top: var(--space-4); }
.switch-row { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: var(--space-4); padding: .8rem 0; border-bottom: 1px solid var(--line); }
.switch-row strong, .switch-row small { display: block; }
.switch-row strong { font-size: .86rem; }
.switch-row small { margin-top: .15rem; color: var(--ink-faint); font-size: .72rem; font-weight: 400; }
input.switch { position: relative; width: 2.7rem; min-width: 2.7rem; height: 1.55rem; margin: 0; border: 1px solid var(--control-border); border-radius: 2rem; appearance: none; background: var(--surface-muted); transition: background-color .15s ease; }
input.switch::after { position: absolute; top: .18rem; left: .2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; content: ""; background: var(--ink-faint); transition: transform .15s ease; }
input.switch:checked { border-color: var(--accent); background: var(--accent); }
input.switch:checked::after { background: white; transform: translateX(1.13rem); }
.choice-grid { display: flex; flex-wrap: wrap; gap: .55rem; }
.choice-card { position: relative; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card span { display: inline-flex; min-height: 2.45rem; align-items: center; padding: .45rem .8rem; border: 1px solid var(--control-border); border-radius: 2rem; color: var(--ink-soft); font-size: .76rem; font-weight: 680; }
.choice-card input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.choice-card input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.settings-layout { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.settings-nav { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: .25rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.settings-nav a { padding: .55rem .7rem; border-radius: var(--radius-xs); color: var(--ink-soft); font-size: .78rem; font-weight: 680; text-decoration: none; }
.settings-nav a:hover { background: var(--surface-muted); color: var(--ink); }
.connection-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.connection-row p { margin: .15rem 0 0; font-size: .75rem; }
.connection-row--warning { border-color: var(--warning); background: var(--warning-soft); }
.service-mark { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: var(--radius-sm); background: var(--strava); color: white; font-weight: 800; }
.data-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.data-actions--single { grid-template-columns: 1fr; }
.data-actions > div { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.data-actions p { font-size: .8rem; }
.account-management { margin-top: var(--space-4); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.account-management summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); cursor: pointer; list-style: none; }
.account-management summary::-webkit-details-marker { display: none; }
.account-management summary::after { content: "+"; color: var(--ink-faint); font-size: 1.25rem; line-height: 1; }
.account-management[open] summary::after { content: "−"; }
.account-management summary strong, .account-management summary small { display: block; }
.account-management summary small { margin-top: .15rem; color: var(--ink-faint); font-size: .72rem; font-weight: 500; }
.account-management__actions { display: grid; padding: var(--space-4); border-top: 1px solid var(--line); background: var(--surface); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.account-management__actions > div { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.account-management__actions p { font-size: .8rem; }
.danger-zone { border-color: #dfb4af !important; background: #fffafa; }

.connect-flow { text-align: center; }
.connect-flow h1 { margin-inline: auto; font-size: clamp(2.4rem, 6vw, 4.6rem); }
.connect-flow .lede { margin-inline: auto; }
.consent-card { max-width: 38rem; padding: clamp(1.3rem, 4vw, 2.2rem); margin: var(--space-6) auto var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); text-align: left; }
.consent-card__header { display: flex; gap: var(--space-4); align-items: center; padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.consent-card__header h2 { margin-bottom: .2rem; font-size: 1.2rem; }
.consent-card__header p { margin: 0; font-size: .78rem; }
.permission-list { padding: 0; margin: var(--space-5) 0; list-style: none; }
.permission-list li { display: flex; gap: var(--space-4); padding: .8rem 0; }
.permission-list__icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent-dark); font-size: .62rem; font-weight: 800; }
.permission-list strong { display: block; font-size: .85rem; }
.permission-list p { margin: .12rem 0 0; font-size: .75rem; }
.check-row { display: flex; align-items: flex-start; gap: .7rem; color: var(--ink-soft); font-size: .78rem; }
.check-row input { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .25rem; accent-color: var(--accent); }
.fine-print { color: var(--ink-faint); font-size: .68rem; }
.consent-card .fine-print { margin: var(--space-3) 0 0; text-align: center; }

.composer-page { padding-top: var(--space-6); padding-bottom: 6.5rem; }
.composer-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.composer-heading .page-heading { margin-bottom: var(--space-5); }
.composer-heading__actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.profile-switcher { display: grid; grid-template-columns: minmax(15rem, 26rem) 1fr; align-items: end; gap: var(--space-4); margin-bottom: var(--space-5); }
.profile-switcher__field { margin: 0; }
.profile-switcher > p { margin: 0 0 .75rem; color: var(--muted); font-size: var(--text-small); }
.profile-mode-panel { margin-bottom: var(--space-5); }
.profile-mode-panel .choice-grid { max-width: 58rem; }
.save-state { color: var(--ink-faint); font-size: .72rem; }
.save-state.is-dirty { color: var(--warning); }
.save-state.is-error, .mobile-save-bar [data-save-state].is-error { color: var(--danger); }
.composer-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr); gap: var(--space-6); align-items: start; }
.composer-controls { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; padding: 0; border: 0; }
.composer-customization:disabled { opacity: .58; }
.composer-preview-column { position: sticky; top: var(--space-4); grid-column: 2; grid-row: 1; }
.composer-preview { padding: var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--ink); color: white; }
.composer-preview__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: var(--space-4); border-bottom: 1px solid #414642; }
.composer-preview__header .eyebrow { color: #84c4bd; }
.composer-preview__header h2 { margin: 0; color: white; font-size: 1.25rem; }
.composer-preview .text-button { color: #b2d8d3; }
.composer-preview .text-button:hover { color: white; }
.preview-context { padding: var(--space-5) 0; }
.preview-context > span { color: #9ba29d; font-size: .65rem; font-weight: 700; text-transform: uppercase; }
.preview-context strong { display: block; margin: .2rem 0 .6rem; font-size: 1.05rem; }
.preview-context p { margin: 0; color: #c8ccc9; font-size: .78rem; }
.live-preview { min-height: 13rem; padding: var(--space-4); margin: 0; overflow: auto; border-left: 2px solid #4bb1a7; background: #222723; color: #eef2ef; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .73rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.preview-counter { display: flex; justify-content: space-between; margin-top: .6rem; color: #9ba29d; font-size: .64rem; }
.preview-counter strong { color: #dce4df; }
.preview-counter.is-over, .preview-counter.is-over strong { color: #ffaaa1; }
.preview-legend { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid #414642; }
.preview-legend p { display: flex; align-items: center; gap: .4rem; margin: 0; color: #aeb5b0; font-size: .65rem; }
.legend-dot { width: .45rem; height: .45rem; border-radius: 50%; }
.legend-dot--user { background: #aeb5b0; }
.legend-dot--managed { background: #4bb1a7; }
.composer-preview .fine-print { margin: var(--space-4) 0 0; color: #9ba29d; }
.preset-picker { display: grid; padding: 0; margin: 0 0 var(--space-5); border: 0; grid-template-columns: repeat(4, 1fr); }
.preset-picker label { position: relative; }
.preset-picker input { position: absolute; opacity: 0; }
.preset-picker label > span { display: block; min-height: 7.2rem; padding: var(--space-4); border: 1px solid var(--line); border-right: 0; }
.preset-picker label:first-of-type > span { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.preset-picker label:last-of-type > span { border-right: 1px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.preset-picker strong, .preset-picker small { display: block; }
.preset-picker strong { font-size: .8rem; }
.preset-picker small { margin-top: .35rem; color: var(--ink-faint); font-size: .65rem; font-weight: 400; line-height: 1.35; }
.preset-picker input:checked + span { position: relative; z-index: 1; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); box-shadow: 1px 0 0 var(--accent); }
.preset-picker input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.advanced-options { margin-top: var(--space-5); border-top: 1px solid var(--line); }
.advanced-options summary { padding: 1rem 0; color: var(--accent-dark); font-size: .8rem; font-weight: 720; }
.advanced-options[open] summary { margin-bottom: var(--space-3); }
.calculation-options__intro { max-width: 48rem; margin-bottom: var(--space-4); }
.calculation-options__intro p { margin: 0 0 .35rem; color: var(--ink-soft); font-size: .76rem; }
.calculation-options__intro p:last-child { color: var(--accent-dark); }
.calculation-options .field-help { display: block; margin-top: .45rem; line-height: 1.5; }
.custom-format-options[hidden] { display: none; }
.custom-format-options { padding: var(--space-4); margin: var(--space-5) 0 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.custom-format-options > p, .field-help { color: var(--ink-faint); font-size: .68rem; }
.custom-format-grid { align-items: start; }
.field-label { display: block; margin-bottom: .4rem; color: var(--ink-soft); font-size: .74rem; font-weight: 680; }
.group-order-list { padding: 0; margin: 0; border-top: 1px solid var(--line); list-style: none; }
.group-order-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .76rem; font-weight: 680; }
.group-order-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.metric-pack-section { padding: var(--space-4); margin-bottom: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.metric-pack-section h3 { margin: 0; font-size: .82rem; }
.metric-pack-section > div:first-child p { margin: .25rem 0 var(--space-3); color: var(--ink-faint); font-size: .68rem; }
.metric-pack-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .55rem; }
.metric-pack-card { min-height: 5.4rem; padding: .75rem; border: 1px solid var(--control-border); border-radius: var(--radius-xs); background: var(--surface); color: var(--ink); text-align: left; }
.metric-pack-card strong, .metric-pack-card small { display: block; }
.metric-pack-card strong { font-size: .76rem; }
.metric-pack-card small { margin-top: .3rem; color: var(--ink-faint); font-size: .62rem; font-weight: 400; line-height: 1.35; }
.metric-pack-card:hover { border-color: var(--accent); }
.metric-pack-card[aria-pressed="true"] { border-color: var(--brand-coral); box-shadow: inset 0 0 0 1px var(--brand-coral); }
.catalogue-toolbar { display: grid; margin-bottom: var(--space-3); grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; }
.search-field { position: relative; display: block; }
.search-field > span:not(.sr-only) { position: absolute; z-index: 1; top: .58rem; left: .75rem; color: var(--ink-faint); font-size: 1rem; }
.search-field input { padding-left: 2.2rem; }
.field--inline { display: flex; align-items: center; gap: .6rem; }
.field--inline > span { margin: 0; white-space: nowrap; }
.catalogue-help { margin-bottom: var(--space-5); color: var(--ink-faint); font-size: .7rem; }
.metric-group + .metric-group { margin-top: var(--space-6); }
.metric-group__heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: .55rem; border-bottom: 1px solid var(--line-strong); }
.metric-group__heading h3 { margin: 0; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; }
.metric-group__heading span { color: var(--ink-faint); font-size: .65rem; }
.metric-list { counter-reset: metric; }
.metric-item { display: grid; min-height: 4.5rem; padding: .75rem .2rem; border-bottom: 1px solid var(--line); grid-template-columns: auto auto minmax(9rem, 1fr) auto auto; gap: .75rem; align-items: center; }
.metric-item[hidden], .metric-group[hidden] { display: none; }
.metric-item:not(.is-enabled) .metric-item__icon { background: var(--surface-muted); color: var(--ink-soft); }
.metric-item__toggle { position: relative; display: block; width: 2.3rem; height: 1.35rem; }
.metric-item__toggle input { position: absolute; opacity: 0; }
.metric-item__toggle .switch { position: absolute; inset: 0; border: 1px solid var(--control-border); border-radius: 2rem; background: var(--surface-muted); }
.metric-item__toggle .switch::after { position: absolute; top: .17rem; left: .18rem; width: .88rem; height: .88rem; border-radius: 50%; content: ""; background: var(--ink-faint); transition: transform .15s ease; }
.metric-item__toggle input:checked + .switch { border-color: var(--accent); background: var(--accent); }
.metric-item__toggle input:checked + .switch::after { background: white; transform: translateX(.93rem); }
.metric-item__toggle input:focus-visible + .switch { outline: 3px solid var(--focus); outline-offset: 2px; }
.metric-item__icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: var(--radius-xs); background: var(--surface-muted); color: var(--accent-dark); font-size: .67rem; font-weight: 760; }
.metric-item__identity strong, .metric-item__identity small { display: block; }
.metric-item__identity strong { font-size: .78rem; }
.metric-item__identity small { overflow: hidden; max-width: 33rem; color: var(--ink-faint); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.metric-order { display: inline-block; min-width: 2ch; color: var(--accent-dark); font-variant-numeric: tabular-nums; font-weight: 750; }
.metric-item__buttons { display: flex; }
.metric-item__buttons button { display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: .72rem; }
.metric-item__buttons button:first-child { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.metric-item__buttons button:last-child { border-left: 0; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.metric-item__buttons button:hover { background: var(--surface-muted); color: var(--ink); }
.metric-item__options { position: relative; }
.metric-item__options summary { padding: .35rem .5rem; color: var(--accent-dark); font-size: .68rem; font-weight: 700; list-style: none; }
.metric-item__options summary::-webkit-details-marker { display: none; }
.metric-item__options summary::after { margin-left: .3rem; content: "+"; }
.metric-item__options[open] { grid-column: 1 / -1; }
.metric-item__options[open] summary::after { content: "−"; }
.metric-options-grid { display: grid; padding: var(--space-4); margin-top: .6rem; border-radius: var(--radius-sm); background: var(--surface-muted); grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-3); }
.metric-options-grid .field > span { font-size: .65rem; }
.radio-list { padding: 0; margin: 0; border: 0; }
.radio-list label { display: flex; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.radio-list label:last-child { border-bottom: 0; }
.radio-list input { width: 1rem; height: 1rem; margin-top: .2rem; accent-color: var(--accent); }
.radio-list strong, .radio-list small { display: block; }
.radio-list strong { font-size: .82rem; }
.radio-list small { margin-top: .15rem; color: var(--ink-faint); font-size: .7rem; }
.sampling-custom { max-width: 14rem; margin-top: var(--space-4); }
.sampling-custom[hidden] { display: none; }
.mobile-save-bar { position: fixed; z-index: 50; right: max(1rem, calc((100vw - var(--shell)) / 2)); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; width: auto; align-items: center; gap: .7rem; padding: .35rem; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 .7rem 2rem rgb(8 26 29 / 16%); }
.mobile-save-bar span { padding-left: .45rem; color: var(--ink-faint); font-size: .68rem; white-space: nowrap; }
.mobile-save-bar .button { min-height: 3.25rem; padding-inline: 1.2rem; border-radius: calc(var(--radius-sm) - .2rem); }

.legal-hero { padding: clamp(4rem, 8vw, 7rem) 0; border-bottom: 1px solid var(--line); }
.legal-hero h1 { font-size: clamp(2.7rem, 7vw, 5rem); }
.legal-updated { margin-top: var(--space-5); color: var(--ink-faint); font-size: .72rem; }
.legal-section { padding: var(--space-7) 0 var(--space-8); }
.legal-layout { display: grid; grid-template-columns: 13rem minmax(0, 44rem); gap: clamp(3rem, 8vw, 7rem); justify-content: center; align-items: start; }
.legal-nav { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: .45rem; }
.legal-nav strong { margin-bottom: .4rem; font-size: .73rem; }
.legal-nav a { color: var(--ink-faint); font-size: .72rem; text-decoration: none; }
.legal-nav a:hover { color: var(--accent-dark); text-decoration: underline; }
.legal-copy section { padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--line); scroll-margin-top: 2rem; }
.legal-copy section:last-child { border-bottom: 0; }
.legal-copy h2 { font-size: 1.7rem; }
.legal-copy h3 { margin-top: var(--space-5); }
.legal-copy p, .legal-copy li { font-size: .9rem; }
.legal-copy li + li { margin-top: .45rem; }
.privacy-principles { display: grid; margin-top: var(--space-5); grid-template-columns: repeat(3, 1fr); }
.privacy-principles > div { padding: var(--space-4); border: 1px solid var(--line); border-right: 0; }
.privacy-principles > div:last-child { border-right: 1px solid var(--line); }
.privacy-principles span { display: grid; width: 2.2rem; height: 2.2rem; margin-bottom: var(--space-4); place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-size: .68rem; font-weight: 800; }
.privacy-principles strong { font-size: .78rem; }
.privacy-principles p { margin: .25rem 0 0; font-size: .7rem; }
.retention-table { margin: var(--space-5) 0; border-top: 1px solid var(--line); }
.retention-table > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .78rem; }
.retention-table span { color: var(--ink-faint); text-align: right; }
.legal-definitions { margin: var(--space-4) 0; }
.legal-definitions div { padding: var(--space-4); border: 1px solid var(--line); border-bottom: 0; }
.legal-definitions div:last-child { border-bottom: 1px solid var(--line); }
.legal-definitions dt { font-weight: 750; }
.legal-definitions dd { margin: .25rem 0 0; color: var(--ink-soft); font-size: .85rem; }
.terms-price-grid { display: grid; max-width: 25rem; margin: var(--space-5) 0; grid-template-columns: 1fr 1fr; }
.terms-price-grid div { padding: var(--space-4); border: 1px solid var(--line); }
.terms-price-grid div + div { border-left: 0; }
.terms-price-grid strong, .terms-price-grid span { display: block; }
.terms-price-grid strong { font-size: 1.7rem; }
.terms-price-grid span { color: var(--ink-faint); font-size: .7rem; }
.deletion-page { min-height: 72vh; text-align: center; }
.deletion-page h1 { margin-inline: auto; font-size: clamp(2.4rem, 6vw, 4.5rem); }
.deletion-page .lede { margin-inline: auto; }
.danger-mark, .completion-mark { display: grid; width: 3.6rem; height: 3.6rem; margin: var(--space-6) auto var(--space-5); place-items: center; border-radius: 50%; font-size: 1.5rem; font-weight: 800; }
.danger-mark { background: var(--danger-soft); color: var(--danger); }
.completion-mark { background: var(--success-soft); color: var(--success); }
.deletion-summary, .deletion-form { max-width: 36rem; margin: var(--space-6) auto 0; text-align: left; }
.deletion-summary { padding: var(--space-5); border: 1px solid #ddb7b2; border-radius: var(--radius); background: var(--surface); }
.deletion-summary h2 { font-size: 1.15rem; }
.deletion-form { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.deletion-form .check-row { margin: var(--space-4) 0; }
.completion-page { min-height: 72vh; text-align: center; }
.completion-page h1, .completion-page .lede { margin-inline: auto; }
.completion-page .button { margin-top: var(--space-4); }
.error-page { min-height: 70vh; }
.error-page .shell { position: relative; padding-top: var(--space-7); }
.error-page h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.error-code { position: absolute; z-index: -1; top: -3rem; right: 0; margin: 0; color: var(--paper-deep); font-size: clamp(8rem, 25vw, 17rem); font-weight: 800; letter-spacing: -.08em; line-height: 1; }
.request-id { margin-top: var(--space-5); font-size: .7rem; }
.request-id code { padding: .2rem .4rem; background: var(--paper-deep); }
.completion-page code, .request-id code, .admin-confirmation__subject code { overflow-wrap: anywhere; word-break: break-word; }
.error-page .button-row { margin-top: var(--space-5); }

@media (max-width: 64rem) {
  .hero__grid { grid-template-columns: 1fr 25rem; gap: 3rem; }
  .composer-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
  .metric-options-grid { grid-template-columns: repeat(2, 1fr); }
  .status-grid { grid-template-columns: 1fr; }
  .status-card { min-height: 0; border-right: 1px solid var(--line); border-bottom: 0; }
  .status-card:first-child { border-radius: var(--radius) var(--radius) 0 0; }
  .status-card:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
  .current-plan { grid-template-columns: 1fr auto; }
  .current-plan form { grid-column: 1 / -1; }
  .analysis-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .environment-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strava-fact-grid, .strava-stream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 50rem) {
  :root { --header-height: 4rem; }
  .site-header .brand { gap: .6rem; font-size: 1.05rem; }
  .site-header .brand__mark { width: 2.625rem; height: 2.625rem; }
  .site-header .brand__tagline { font-size: .54rem; }
  .nav-toggle { display: block; }
  .site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; padding: 1rem; border-bottom: 1px solid var(--line); background: var(--paper); flex-direction: column; align-items: stretch; }
  .site-nav.is-open { display: flex; }
  .site-nav > a { padding: .6rem .5rem; }
  .locale-switcher { justify-content: flex-start; padding: .7rem .2rem 0; border-top: 1px solid var(--line); border-left: 0; }
  .hero__grid, .feature-layout, .section-heading--split, .detail-grid, .settings-layout, .legal-layout { grid-template-columns: 1fr; }
  .hero__preview { max-width: 35rem; margin-inline: auto; }
  .feature-grid { margin-top: 1rem; }
  .comparison-grid { grid-template-columns: 1fr; }
  .comparison-card:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .comparison-card:last-child { border-top: 0; border-left: 1px solid var(--line-strong); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid li { min-height: auto; border-right: 1px solid var(--line); border-bottom: 0; }
  .steps-grid li:first-child { border-radius: var(--radius) var(--radius) 0 0; }
  .steps-grid li:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
  .steps-grid li > span { margin-bottom: var(--space-4); }
  .composer-heading { display: block; }
  .composer-heading__actions { justify-content: space-between; }
  .profile-switcher { grid-template-columns: 1fr; align-items: stretch; }
  .profile-switcher > p { margin: 0; }
  .composer-layout { display: flex; flex-direction: column; }
  .composer-preview-column { position: static; margin-bottom: var(--space-6); }
  .latest-description { grid-template-columns: 1fr; }
  .latest-description__action { min-width: 0; }
  .description-focus-onboarding__heading { flex-direction: column; }
  .description-focus-toggle { align-self: stretch; }
  .description-focus-toggle .choice-card { flex: 1; }
  .description-focus-toggle .choice-card span { justify-content: center; white-space: normal; }
  .settings-nav, .legal-nav { position: static; overflow-x: auto; flex-direction: row; white-space: nowrap; }
  .settings-nav { margin-bottom: var(--space-5); }
  .legal-nav { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
  .legal-nav strong { display: none; }
  .activity-row { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
  .activity-row__status { grid-column: 2; align-items: flex-start; }
  .activity-row__actions { grid-column: 3; grid-row: 1 / 3; }
  .chart-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-summary > div:nth-child(2) { border-right: 0; }
  .chart-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .activity-chart-grid { grid-template-columns: 1fr; }
  .environment-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .environment-indicator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-notes { flex-direction: column; align-items: center; gap: .4rem; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__meta { grid-column: 1; }
}

@media (max-width: 38rem) {
  .shell, .shell--app { width: min(calc(100% - 1.25rem), var(--shell)); }
  h1 { font-size: 2.45rem; }
  .page-heading--actions, .panel__header--actions, .onboarding-banner, .invoices-panel { align-items: stretch; flex-direction: column; }
  .page-heading--actions { display: flex; }
  .page-heading--actions .button { width: 100%; }
  .activity-heading-actions { width: 100%; justify-content: stretch; }
  .activity-heading-actions > * { flex: 1 1 auto; }
  .hero { padding-top: 3.5rem; }
  .hero h1 { font-size: 2.5rem; }
  .hero__preview { width: calc(100% - .8rem); }
  .preview-note { display: none; }
  .activity-card--demo { transform: none; }
  .feature-grid, .sport-grid, .pricing-grid, .form-grid, .form-grid--three, .data-actions, .account-management__actions, .privacy-principles, .terms-price-grid { grid-template-columns: 1fr; }
  .demo-focus { align-items: stretch; flex-direction: column; }
  .demo-focus__choices { display: flex; }
  .demo-focus__choice { flex: 1; }
  .feature-grid article:nth-child(odd) { border-right: 0; }
  .pricing-grid { gap: var(--space-3); }
  .price-card, .price-card:first-child, .price-card:last-child { min-height: 23rem; border: 1px solid var(--line-strong); border-radius: var(--radius); }
  .price-card--featured { border-color: var(--ink); }
  .preset-picker { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .preset-picker label > span, .preset-picker label:first-of-type > span, .preset-picker label:last-of-type > span { min-height: 6.2rem; border: 1px solid var(--line); border-radius: var(--radius-xs); }
  .catalogue-toolbar { grid-template-columns: 1fr; }
  .field--inline { display: block; }
  .field--inline > span { margin-bottom: .4rem; }
  .metric-item { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .metric-item__options, .metric-item__options[open] { grid-column: 1 / -1; }
  .metric-options-grid { grid-template-columns: 1fr; }
  .metric-item__identity small { max-width: 11rem; }
  .composer-heading__actions { position: static; padding: 0; background: transparent; }
  .mobile-save-bar { right: .625rem; bottom: max(.625rem, env(safe-area-inset-bottom)); }
  .current-plan { grid-template-columns: 1fr; }
  .current-plan__facts { flex-direction: column; gap: .7rem; }
  .connection-row { grid-template-columns: auto 1fr; }
  .connection-row .button { grid-column: 1 / -1; }
  .activity-row { padding-inline: var(--space-3); grid-template-columns: minmax(0, 1fr) auto; }
  .activity-row__icon { display: none; }
  .activity-row__status { grid-column: 1; }
  .activity-row__actions { grid-column: 2; }
  .activity-row__facts { gap: .1rem .45rem; }
  .activity-row__facts span + span::before { margin-right: .45rem; }
  .activity-route-map--compact { width: 100%; max-width: 22rem; }
  .chart-summary { grid-template-columns: 1fr; }
  .chart-summary > div, .chart-summary > div:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .chart-summary > div:last-child { border-bottom: 0; }
  .activity-chart-card { padding: var(--space-3); }
  .chart-toolbar-wrap { align-items: stretch; flex-direction: column; }
  .chart-axis-toggle { align-self: flex-start; }
  .environment-indicator-grid { grid-template-columns: 1fr; }
  .activity-analysis { padding: var(--space-4); }
  .environment-overview { padding: var(--space-3); }
  .environment-overview__heading, .analysis-subheading { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .analysis-kpi-grid { grid-template-columns: 1fr; }
  .strava-fact-grid, .strava-stream-grid { grid-template-columns: 1fr; }
  .activity-chart-card__heading { align-items: flex-start; flex-direction: column; }
  .activity-chart-readout { width: 100%; margin-top: var(--space-3); }
  .activity-chart--interactive { min-height: 11rem; }
  .preview-meta { flex-direction: column; gap: .2rem; }
  .privacy-principles > div { border-right: 1px solid var(--line); border-bottom: 0; }
  .privacy-principles > div:last-child { border-bottom: 1px solid var(--line); }
  .terms-price-grid div + div { border-top: 0; border-left: 1px solid var(--line); }
  .retention-table > div { flex-direction: column; gap: .25rem; }
  .retention-table span { text-align: left; }
  .notice--test { display: block; }
  .site-footer nav { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .site-header, .site-footer, .button, .settings-nav, .legal-nav { display: none !important; }
  body { background: white; color: black; }
  .legal-layout { display: block; }
}
.metric-explorer { margin-bottom: 2rem; }
.metric-explorer__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.metric-explorer__controls label { display: grid; gap: .4rem; }
.metric-explorer__canvas { min-height: 20rem; overflow-x: auto; margin-top: 1rem; }
.metric-explorer__canvas svg { display: block; width: 100%; min-width: 38rem; height: auto; }
@media (max-width: 640px) { .metric-explorer__canvas { min-height: 15rem; } }