@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root {
  --paper:#f7f8f2;
  --ink:#203c32;
  --muted:#65716a;
  --lime:#dcf291;
  /* Product accents bridge the warm landing palette and the app. */
  --mint:#73f1d5;
  --mint-soft:#e1f5ef;
  --teal:#176b62;
  --sky:#38bdf8;
  --line:#dce1d7;
  --white:#fff;
  --font:'DM Sans',sans-serif;
  --head:'Manrope',sans-serif;
  color-scheme:light;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

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

button {
  font:inherit;
  cursor:pointer;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  color:inherit;
}

button:active,.button:active {
  transform:scale(.96);
}

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:5px;
}

img {
  display:block;
  max-width:100%;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  font-family:var(--head);
  font-weight:600;
}

h1,h2 {
  text-wrap:balance;
}

p {
  text-wrap:pretty;
}

button[hidden],[hidden] {
  display:none!important;
}

.container {
  max-width:1280px;
  width:calc(100% - 112px);
  margin-inline:auto;
}

.section {
  padding-block:112px;
}

.eyebrow {
  font-size:11px;
  font-weight:650;
  letter-spacing:1.7px;
  line-height:1.5;
  margin-bottom:24px;
}

.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6e9236;
  margin-right:7px;
}

.header {
  height:100px;
  max-width:1392px;
  padding-inline:56px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  position:relative;
  z-index:20;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--head);
  font-size:26px;
  letter-spacing:-1.2px;
  font-weight:800;
  white-space:nowrap;
}

.brand-domain {
  font-size:15px;
  letter-spacing:-.5px;
}

.brand-symbol {
  display:inline-flex;
  align-items:center;
  gap:3px;
  transform:skew(-22deg);
  height:25px;
}

.brand-symbol i {
  width:5px;
  height:14px;
  background:currentColor;
  display:block;
}

.brand-symbol i:nth-child(2) {
  height:23px;
}

.brand-symbol i:nth-child(3) {
  height:31px;
}

.desktop-nav {
  display:flex;
  gap:30px;
  font-size:13px;
  font-weight:500;
}

.desktop-nav a {
  padding-block:14px;
  transition:opacity .2s;
}

.desktop-nav a:hover {
  opacity:.6;
}

.header-actions {
  display:flex;
  align-items:center;
  gap:24px;
}

.language {
  font-size:11px;
  min-height:44px;
  min-width:40px;
  display:grid;
  place-items:center;
}

.login {
  font-size:13px;
  display:flex;
  align-items:center;
  gap:24px;
  border:1px solid #aebaae;
  border-radius:6px;
  padding:12px 18px;
  min-height:44px;
}

.login:hover {
  background:#edf0e4;
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  width:44px;
  height:44px;
  padding:12px;
}

.menu-toggle span {
  height:2px;
  background:var(--ink);
  display:block;
  margin-block:5px;
}

.mobile-nav {
  position:absolute;
  top:78px;
  left:20px;
  right:20px;
  padding:14px;
  background:var(--paper);
  box-shadow:0 8px 25px #203c3220;
  border:1px solid var(--line);
  border-radius:12px;
}

.mobile-nav a {
  display:block;
  padding:14px;
}

.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:12px;
  z-index:100;
}

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

.hero {
  display:grid;
  grid-template-columns:1fr 1.06fr;
  gap:58px;
  align-items:center;
  padding-block:40px 74px;
}

.hero-copy {
  padding-bottom:20px;
}

.hero h1 {
  font-size:clamp(48px,4.7vw,68px);
  letter-spacing:-3.6px;
  line-height:1.09;
  margin-bottom:26px;
  font-weight:600;
}

.hero h1 span {
  color:#788774;
}

.hero-description {
  font-size:16px;
  line-height:1.8;
  max-width:410px;
  color:#59675d;
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:32px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  border-radius:7px;
  font-size:13px;
  font-weight:600;
  min-height:54px;
  padding:16px 22px;
  transition:background .2s,transform .2s;
  white-space:nowrap;
}

.button span {
  font-size:22px;
  line-height:1;
}

.button-dark {
  background:var(--ink);
  color:var(--white);
}

.button-dark:hover {
  background:#385548;
}

.button-lime {
  background:var(--lime);
  color:var(--ink);
}

.button-lime:hover {
  background:#eafab8;
}

.text-link {
  font-size:12px;
  border-bottom:1px solid #bbc5b7;
  padding:12px 0;
  display:flex;
  gap:12px;
  align-items:center;
  white-space:nowrap;
}

.hero-note {
  font-size:11px;
  margin-top:20px;
  color:var(--muted);
}

.hero-visual {
  position:relative;
  margin-bottom:28px;
}

.hero-photo {
  height:548px;
  width:100%;
  object-fit:cover;
  object-position:62% center;
  border-radius:13px;
  outline:1px solid #00000008;
  outline-offset:-1px;
}

.photo-caption {
  position:absolute;
  top:24px;
  left:24px;
  color:var(--white);
  background:var(--ink);
  padding:9px 11px;
  border-radius:5px;
  max-width:calc(100% - 48px);
  font-size:9px;
  line-height:1.5;
  letter-spacing:1.6px;
}

.floating-workout {
  position:absolute;
  bottom:29px;
  left:-33px;
  right:22px;
  display:flex;
  align-items:center;
  gap:13px;
  border-radius:9px;
  padding:20px;
  background:#fffffff5;
  box-shadow:0 12px 30px #162c321c;
  animation:card-arrive .8s .2s both;
}

.workout-icon {
  width:40px;
  height:46px;
  display:grid;
  place-items:center;
  background:#edf3d9;
  border-radius:6px;
  font-size:24px;
}

.small-label {
  font-size:8px;
  letter-spacing:1.2px;
  font-weight:600;
  display:block;
}

.floating-workout strong {
  display:block;
  font-size:14px;
  margin:7px 0;
}

.floating-workout strong span {
  font-weight:400;
  color:var(--muted);
  margin-left:10px;
}

.floating-workout small {
  font-size:9px;
  color:var(--muted);
}

.round-check {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--lime);
  margin-left:auto;
}

.hero-visual-note {
  position:absolute;
  right:3px;
  bottom:-22px;
  font-size:9px;
  color:var(--muted);
}

.benefits-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-block:1px solid var(--line);
  padding-block:26px;
  font-size:12px;
}

.benefits-strip i {
  font-size:18px;
  font-style:normal;
  color:#8a9b64;
}

.section-heading {
  text-align:center;
}

.section-heading .eyebrow {
  margin-bottom:18px;
}

h2 {
  font-size:clamp(32px,3.1vw,44px);
  line-height:1.2;
  letter-spacing:-1.7px;
}

.steps-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:62px;
}

.step-number {
  font-size:12px;
  color:#829078;
  letter-spacing:1px;
}

.step-mini {
  height:95px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-block:14px 25px;
}

.step h3 {
  font-size:18px;
  letter-spacing:-.6px;
  margin-bottom:12px;
}

.step p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  max-width:320px;
}

.strava-mark {
  font-size:15px;
  font-weight:800;
  color:#d65222;
  background:white;
  border:1px solid #e9eae3;
  padding:15px 12px;
  border-radius:9px;
}

.connection-line {
  border-top:1px dashed #a9b69c;
  width:35px;
}

.mini-brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--head);
  font-weight:800;
  font-size:15px;
}

.mini-brand .brand-domain {
  font-size:10px;
}

.mini-brand .brand-symbol {
  transform:skew(-22deg) scale(.7);
  margin-right:-6px;
}

.connection-check {
  background:var(--mint);
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:11px;
}

.goal-mini {
  gap:13px;
}

.goal-mini>span:first-child {
  font-size:36px;
  color:#7f965c;
}

.goal-mini small {
  display:block;
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted);
}

.goal-mini strong {
  font-size:12px;
  display:block;
  margin-top:8px;
}

.mini-tag {
  font-size:10px;
  border:1px solid var(--line);
  padding:8px;
  border-radius:5px;
}

.plan-mini {
  gap:7px;
  align-items:flex-end;
  padding-bottom:17px;
}

.plan-mini span {
  height:40px;
  width:32px;
  border-radius:5px;
  background:#dfe8c8;
}

.plan-mini span:nth-child(2n) {
  height:55px;
  background:#c1d49d;
}

.plan-mini span:nth-child(3) {
  height:32px;
}

.plan-mini span:nth-child(5) {
  height:63px;
  background:#829c67;
}

.plan-mini span:last-child {
  height:72px;
  background:var(--ink);
  color:var(--lime);
  display:grid;
  place-items:center;
  font-size:20px;
}

.planner-section {
  padding-block:96px;
  background:#eaf0e3;
  scroll-margin-top:20px;
}

.planner-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:60px;
}

.planner-heading>p {
  max-width:340px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.goal-options {
  display:flex;
  gap:10px;
  margin-block:36px 26px;
  flex-wrap:wrap;
}

.goal-options button {
  min-height:45px;
  padding:11px 20px;
  border:1px solid #c6d0be;
  border-radius:6px;
  background:transparent;
  font-size:12px;
  transition:background .2s,color .2s,transform .2s;
}

.goal-options button:hover {
  background:#dce6d1;
}

.goal-options button[aria-pressed=true] {
  background:var(--mint);
  color:var(--ink);
  border-color:var(--teal);
}

.goal-options button span {
  margin-left:14px;
}

.planner-demo {
  background:#fff;
  border:1px solid #d7ded1;
  border-radius:12px;
  box-shadow:0 15px 40px #36472c0a;
  display:grid;
  grid-template-columns:175px minmax(0,1fr);
  overflow:hidden;
}

.demo-sidebar {
  border-right:1px solid #e5e9df;
  background:#fafbf8;
  padding:27px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.demo-brand {
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--head);
  font-weight:800;
  font-size:15px;
  margin-bottom:30px;
}

.demo-brand .brand-domain {
  font-size:9px;
}

.demo-brand .brand-symbol {
  transform:skew(-22deg) scale(.65);
  margin-right:-8px;
}

.sidebar-link {
  padding:10px 9px;
  border-radius:5px;
  font-size:13px;
  display:flex;
  gap:10px;
  color:#7a8577;
}

.sidebar-link span {
  font-size:10px;
}

.sidebar-link.active {
  background:var(--mint-soft);
  color:var(--teal);
}

.sidebar-bottom {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:30px;
  font-size:9px;
}

.avatar {
  width:28px;
  height:28px;
  background:#e5ebdd;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:12px;
}

.sidebar-bottom small {
  display:block;
  color:#7e897b;
  font-size:7px;
  margin-top:4px;
}

.demo-main {
  padding:28px;
  min-width:0;
}

.demo-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:8px;
  letter-spacing:1.4px;
  color:#73806c;
}

.demo-label {
  background:#f1f3ec;
  border-radius:4px;
  padding:5px 8px;
  font-size:7px;
  letter-spacing:1px;
}

.demo-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:24px;
}

.demo-title h3 {
  font-size:20px;
  letter-spacing:-.6px;
}

.demo-title p {
  font-size:10px;
  color:var(--muted);
  margin-top:8px;
}

.plan-ready {
  font-size:8px;
  white-space:nowrap;
}

.plan-ready .status-dot {
  background:var(--sky);
  width:5px;
  height:5px;
  margin-right:3px;
}

.demo-meta {
  display:flex;
  gap:22px;
  font-size:9px;
  color:#6e7b68;
  padding-block:20px;
  border-bottom:1px solid #e8ebe4;
}

.demo-meta strong {
  color:var(--ink);
  font-weight:500;
}

.week-title {
  display:flex;
  justify-content:space-between;
  margin-block:22px 18px;
  font-size:11px;
}

.week-title span {
  font-size:9px;
  color:var(--muted);
}

.week-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px;
}

.day-name {
  font-size:8px;
  letter-spacing:1px;
  color:#768171;
  display:block;
  text-align:center;
  margin-bottom:10px;
}

.day-workout {
  border-radius:5px;
  background:#ecf2e2;
  padding:11px 8px;
  height:129px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.workout-type {
  font-size:6px;
  font-weight:600;
  letter-spacing:.7px;
  align-self:flex-start;
}

.day-workout strong {
  font-size:10px;
  line-height:1.4;
  font-weight:500;
}

.workout-duration {
  font-size:9px;
  color:#5c6a53;
  margin-top:auto;
}

.day-workout.quality {
  background:#f3e9cb;
}

.day-workout.long {
  background:#dce8f0;
}

.day-workout.rest {
  background:#fafbf8;
  border:1px dashed #dfe4d8;
  color:#75806d;
}

.day-workout.rest .workout-duration {
  color:#88917f;
}

.workout-bars {
  display:flex;
  gap:3px;
  align-items:flex-end;
  height:16px;
}

.workout-bars i {
  background:#9ebc74;
  height:7px;
  width:10px;
  border-radius:1px;
}

.quality .workout-bars i {
  background:#c4a45b;
  height:14px;
}

.quality .workout-bars i:nth-child(2n) {
  height:6px;
}

.long .workout-bars i {
  background:#8cabbc;
  height:12px;
}

.rest .workout-bars {
  visibility:hidden;
}

.demo-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:24px;
  align-items:center;
  font-size:9px;
  color:#687860;
}

.demo-bottom a {
  font-size:10px;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #d4ddcc;
  border-radius:5px;
  padding:10px;
}

.demo-disclaimer {
  font-size:10px;
  color:#66755d;
  margin-top:19px;
  text-align:center;
  min-height:16px;
}

.features {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
}

.feature-copy>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin-top:24px;
}

.feature-point {
  display:flex;
  gap:18px;
  margin-top:28px;
}

.feature-point>span {
  font-size:10px;
  padding-top:4px;
  color:#839370;
}

.feature-point h3 {
  font-size:15px;
  letter-spacing:-.3px;
  margin-bottom:7px;
}

.feature-point p {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}

.workout-detail-scene {
  position:relative;
  min-width:0;
  padding:25px 20px;
}

.scene-orbit {
  position:absolute;
  inset:20px -25px;
  border-radius:50%;
  border:1px solid #dce4ce;
  transform:rotate(-25deg);
}

.scene-orbit:before {
  content:'';
  position:absolute;
  inset:35px -20px;
  border:1px solid #dce4ce;
  border-radius:50%;
}

.workout-detail {
  position:relative;
  background:#fff;
  box-shadow:0 15px 50px #2c452718,0 1px 3px #2c452705;
  padding:30px;
  border-radius:13px;
  transform:rotate(2deg);
}

.detail-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#697861;
}

.detail-top>span:last-child {
  font-size:25px;
}

.session-tag {
  font-size:7px;
  letter-spacing:1px;
  padding:6px 8px;
  background:#f1e8cb;
  border-radius:3px;
  display:inline-block;
  margin-block:26px 13px;
}

.workout-detail h3 {
  font-size:34px;
  letter-spacing:-1.4px;
  line-height:1.1;
}

.workout-detail>p {
  font-size:11px;
  color:var(--muted);
  line-height:1.7;
  margin-top:15px;
  max-width:260px;
}

.session-chart {
  display:flex;
  gap:6px;
  height:68px;
  align-items:flex-end;
  margin-block:22px;
}

.session-chart i {
  height:20px;
  background:#d0dfb2;
  flex:1;
  border-radius:3px 3px 0 0;
}

.session-chart i:nth-child(2) {
  height:25px;
}

.session-chart i:nth-child(3) {
  height:30px;
}

.session-chart i:nth-child(n+4):nth-child(-n+11) {
  height:62px;
  background:#9aa96f;
}

.session-chart i:nth-child(n+4):nth-child(-n+11):nth-child(odd) {
  height:27px;
  background:#d0dfb2;
}

.session-chart i:nth-child(12) {
  height:29px;
}

.session-chart i:nth-child(13) {
  height:24px;
}

.session-steps {
  list-style:none;
  padding:0;
  margin:0;
}

.session-steps li {
  display:flex;
  gap:10px;
  align-items:center;
  border-top:1px solid #edf0e8;
  padding-block:14px;
}

.session-dot {
  width:7px;
  height:7px;
  background:#c8d9a8;
  border-radius:50%;
  flex-shrink:0;
}

.session-dot.strong {
  background:#a68a42;
}

.session-steps strong {
  font-size:11px;
  font-weight:500;
}

.session-steps small {
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:5px;
}

.session-steps b {
  font-size:10px;
  font-weight:500;
  margin-left:auto;
  white-space:nowrap;
}

.detail-footer {
  border-top:1px solid #edf0e8;
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#738264;
}

.watch-section {
  background:#213d33;
  color:var(--paper);
  overflow:hidden;
}

.watch-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:80px;
  padding-block:85px;
}

.watch-copy .eyebrow {
  color:#c3d697;
}

.watch-copy h2 {
  font-size:38px;
}

.watch-copy h2 span {
  color:#b9cc9f;
}

.watch-copy>p:not(.eyebrow) {
  color:#c1cbc2;
  font-size:14px;
  line-height:1.9;
  margin-block:26px;
  max-width:430px;
}

.watch-copy>small {
  font-size:10px;
  display:block;
  color:#c0cdbc;
  line-height:1.6;
  max-width:360px;
  margin-top:18px;
}

.watch-scene {
  height:410px;
  position:relative;
  display:grid;
  place-items:center;
}

.watch-orbit {
  position:absolute;
  border:1px solid #cbe0ad1f;
  border-radius:50%;
  width:400px;
  height:400px;
}

.watch-orbit.two {
  width:300px;
  height:300px;
}

.watch-strap {
  height:440px;
  width:139px;
  background:repeating-linear-gradient(0deg,#5c6c4e 0px,#5c6c4e 3px,#687856 4px,#687856 6px);
  border-radius:38px;
  transform:rotate(-12deg);
  box-shadow:inset 7px 0 12px #0002,inset -7px 0 12px #0002;
  position:absolute;
}

.watch-body {
  width:236px;
  height:252px;
  border-radius:62px;
  background:linear-gradient(130deg,#697067,#292e2a 35%,#51584e 70%,#171d18);
  padding:10px;
  position:relative;
  transform:rotate(-12deg);
  box-shadow:16px 22px 35px #07140e66,inset 0 0 0 2px #75816d;
}

.watch-body:after {
  content:'';
  position:absolute;
  right:-7px;
  top:68px;
  width:8px;
  height:33px;
  background:#68705f;
  border-radius:0 5px 5px 0;
}

.watch-screen {
  height:100%;
  border:4px solid #111c16;
  border-radius:51px;
  background:#0e2118;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:21px 16px;
  color:var(--mint);
  box-shadow:inset 0 1px 4px #000;
}

.watch-brand {
  font-size:8px;
  font-weight:700;
  letter-spacing:2px;
  color:#899d74;
  margin-bottom:21px;
}

.watch-step {
  font-size:8px;
  letter-spacing:1px;
}

.watch-time {
  font-size:52px;
  line-height:1.25;
  font-weight:550;
  font-variant-numeric:tabular-nums;
  letter-spacing:-2px;
}

.watch-pace {
  font-size:7px;
  letter-spacing:1.5px;
  color:#b4c69c;
}

.watch-progress {
  height:4px;
  width:120px;
  margin-top:18px;
  background:#34472c;
  border-radius:5px;
  overflow:hidden;
}

.watch-progress i {
  display:block;
  width:65%;
  height:100%;
  background:var(--mint);
  transform-origin:left;
}

.watch-next {
  font-size:7px;
  color:#a7b995;
  margin-top:12px;
}

.sync-badge {
  position:absolute;
  bottom:16px;
  right:14px;
  padding:14px 17px;
  background:#f4f6e9;
  color:var(--ink);
  border-radius:7px;
  box-shadow:0 4px 20px #0002;
  font-size:11px;
  transform:rotate(-3deg);
}

.sync-badge>span {
  margin-right:8px;
  background:var(--lime);
  border-radius:50%;
  padding:2px 5px;
}

.faq-section {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
}

.faq-section>div>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin-top:22px;
}

.faq-list details {
  border-bottom:1px solid var(--line);
}

.faq-list details:first-child {
  border-top:1px solid var(--line);
}

summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  font-size:14px;
  font-weight:500;
  padding-block:22px;
  min-height:64px;
}

summary::-webkit-details-marker {
  display:none;
}

summary>span {
  font-size:22px;
  font-weight:400;
  transition:transform .2s;
}

details[open] summary>span {
  transform:rotate(45deg);
}

details>p {
  font-size:13px;
  line-height:1.85;
  color:var(--muted);
  padding-bottom:24px;
  padding-right:25px;
}

.closing {
  position:relative;
  background:#e7eecf;
  text-align:center;
  padding:68px 40px;
  border-radius:14px;
  overflow:hidden;
}

.closing .eyebrow {
  position:relative;
}

.closing h2 {
  position:relative;
  font-size:36px;
}

.closing h2 span {
  color:#738260;
}

.closing .button {
  margin-top:28px;
  position:relative;
}

.closing-note {
  font-size:10px;
  color:#5f7054;
  margin-top:18px;
  position:relative;
}

.closing-line {
  position:absolute;
  width:700px;
  height:700px;
  left:-520px;
  top:-150px;
  border:1px solid #bbcba5;
  border-radius:50%;
}

.closing-line:before,.closing-line:after {
  content:'';
  position:absolute;
  inset:-35px;
  border:1px solid #bbcba5;
  border-radius:50%;
}

.closing-line:after {
  inset:-70px;
}

.footer {
  padding-block:55px 28px;
}

.footer-top {
  display:flex;
  align-items:center;
  gap:38px;
  padding-bottom:35px;
}

.footer-top>p {
  font-size:12px;
  color:var(--muted);
}

.footer-top>a:last-child {
  font-size:12px;
  margin-left:auto;
}

.footer-top>a:last-child span {
  margin-left:20px;
}

.footer-bottom {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:18px;
  font-size:10px;
  color:var(--muted);
}

.footer-bottom>div {
  display:flex;
  gap:25px;
  align-items:center;
}

.footer-bottom button {
  border:0;
  background:none;
  padding:12px 0;
  font-size:10px;
  min-height:40px;
}

.footer-bottom a {
  display:inline-flex;
  align-items:center;
  min-height:40px;
}

#cookie-feedback {
  font-size:12px;
  color:var(--muted);
  padding-top:15px;
}

#cc-main {
  --cc-font-family:var(--font);
  --cc-primary-color:var(--ink);
  --cc-btn-primary-bg:var(--ink);
  --cc-btn-primary-border-color:var(--ink);
  --cc-btn-primary-hover-bg:#345547;
  --cc-btn-primary-hover-border-color:#345547;
  --cc-btn-secondary-bg:#e8eddf;
  --cc-btn-secondary-color:var(--ink);
  --cc-bg:var(--paper);
  --cc-modal-border-radius:12px;
}

.reveal {
  opacity:1;
}

.motion-ready .reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s,transform .6s;
}

.motion-ready .reveal.visible {
  opacity:1;
  transform:translateY(0);
}

.steps-grid .step:nth-child(2) {
  transition-delay:.09s;
}

.steps-grid .step:nth-child(3) {
  transition-delay:.18s;
}

.week-grid.updated .day-workout {
  animation:workout-in .4s both;
}

.week-grid.updated .day-column:nth-child(2) .day-workout {
  animation-delay:.04s;
}

.week-grid.updated .day-column:nth-child(3) .day-workout {
  animation-delay:.08s;
}

.week-grid.updated .day-column:nth-child(4) .day-workout {
  animation-delay:.12s;
}

.week-grid.updated .day-column:nth-child(5) .day-workout {
  animation-delay:.16s;
}

.week-grid.updated .day-column:nth-child(6) .day-workout {
  animation-delay:.20s;
}

.week-grid.updated .day-column:nth-child(7) .day-workout {
  animation-delay:.24s;
}

@keyframes workout-in {
  from {
    opacity:.3;
    transform:translateY(8px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes card-arrive {
  from {
    opacity:0;
    transform:translateY(15px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(min-width:1500px) {
  .hero h1 {
    font-size:72px;
  }
  .hero-photo {
    height:570px;
  }
}

@media(max-width:1150px) {
  .container {
    width:calc(100% - 72px);
  }
  .header {
    padding-inline:36px;
  }
  .hero {
    gap:35px;
  }
  .hero h1 {
    font-size:53px;
    letter-spacing:-2.8px;
  }
  .hero-actions {
    gap:15px;
    flex-wrap:wrap;
  }
  .hero-photo {
    height:510px;
  }
  .desktop-nav {
    gap:20px;
  }
  .header-actions {
    gap:12px;
  }
  .steps-grid {
    gap:25px;
  }
  .step h3 {
    font-size:16px;
  }
  .mini-tag {
    display:none;
  }
  .planner-demo {
    grid-template-columns:145px minmax(0,1fr);
  }
  .demo-sidebar {
    padding:23px 12px;
  }
  .demo-main {
    padding:22px;
  }
  .demo-title h3 {
    font-size:18px;
  }
  .plan-ready {
    display:none;
  }
  .features {
    gap:60px;
  }
  .watch-grid {
    gap:55px;
  }
  .watch-copy h2 {
    font-size:34px;
  }
  .floating-workout {
    left:-20px;
    right:14px;
    padding:16px;
  }
  .floating-workout small {
    font-size:8px;
  }
}

@media(max-width:900px) {
  .desktop-nav {
    display:none;
  }
  .menu-toggle {
    display:block;
  }
  .header {
    height:86px;
  }
  .hero {
    gap:30px;
    grid-template-columns:1fr 1fr;
    padding-top:25px;
  }
  .hero h1 {
    font-size:43px;
    letter-spacing:-2px;
  }
  .hero-description {
    font-size:14px;
  }
  .hero-photo {
    height:480px;
  }
  .hero-actions {
    gap:10px;
  }
  .button {
    font-size:12px;
    padding-inline:18px;
    gap:25px;
  }
  .hero-note {
    font-size:10px;
  }
  .floating-workout {
    left:-14px;
    right:10px;
    gap:9px;
    padding:12px;
  }
  .floating-workout strong {
    font-size:12px;
  }
  .floating-workout small {
    display:none;
  }
  .round-check {
    display:none;
  }
  .benefits-strip {
    font-size:10px;
    gap:12px;
  }
  .benefits-strip i {
    font-size:14px;
  }
  .section {
    padding-block:80px;
  }
  .steps-grid {
    gap:20px;
  }
  .step-mini {
    transform:scale(.9);
    transform-origin:left center;
    width:110%;
  }
  .step p {
    font-size:12px;
  }
  .step h3 {
    line-height:1.5;
  }
  .planner-section {
    padding-block:75px;
  }
  .planner-heading {
    gap:30px;
  }
  .planner-heading>p {
    max-width:270px;
    font-size:12px;
  }
  .planner-demo {
    grid-template-columns:minmax(0,1fr);
  }
  .demo-sidebar {
    display:none;
  }
  .features {
    gap:35px;
  }
  .workout-detail {
    padding:22px;
  }
  .workout-detail-scene {
    padding:20px 0;
  }
  .workout-detail h3 {
    font-size:30px;
  }
  .feature-copy>p:not(.eyebrow) {
    font-size:13px;
  }
  .feature-point p {
    font-size:12px;
  }
  .watch-grid {
    gap:35px;
  }
  .watch-body {
    width:210px;
    height:230px;
  }
  .watch-screen {
    padding:16px 12px;
  }
  .watch-time {
    font-size:45px;
  }
  .watch-orbit {
    width:340px;
    height:340px;
  }
  .watch-orbit.two {
    width:270px;
    height:270px;
  }
  .watch-copy h2 {
    font-size:29px;
  }
  .watch-copy>p:not(.eyebrow) {
    font-size:13px;
  }
  .sync-badge {
    right:-10px;
    font-size:10px;
  }
  .faq-section {
    gap:35px;
  }
  .closing h2 {
    font-size:30px;
  }
}

@media(max-width:650px) {
  .container {
    width:calc(100% - 40px);
  }
  .header {
    padding-inline:20px;
    height:80px;
    gap:12px;
  }
  .brand {
    font-size:24px;
  }
  .brand-domain {
    font-size:12px;
  }
  .brand-symbol {
    transform:skew(-22deg) scale(.8);
    margin-right:-3px;
  }
  .header-actions {
    gap:5px;
  }
  .login {
    font-size:12px;
    padding:9px 12px;
    gap:13px;
  }
  .language {
    min-width:32px;
  }
  .menu-toggle {
    width:36px;
    padding:8px;
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:35px;
    padding-block:28px 35px;
  }
  .hero-copy {
    padding-bottom:0;
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.3px;
    margin-bottom:19px;
  }
  .hero h1 {
    font-size:clamp(43px,11.5vw,64px);
    letter-spacing:-2.6px;
    line-height:1.09;
    margin-bottom:23px;
  }
  .hero-description {
    font-size:15px;
    line-height:1.75;
    max-width:360px;
  }
  .hero-actions {
    gap:23px;
    margin-top:25px;
    flex-wrap:wrap;
  }
  .button {
    min-height:52px;
    font-size:12px;
    gap:22px;
    padding:15px 18px;
  }
  .text-link {
    font-size:11px;
    gap:9px;
  }
  .hero-note {
    font-size:10px;
    margin-top:15px;
  }
  .hero-visual {
    margin:0 0 24px;
  }
  .hero-photo {
    height:365px;
    object-position:65% center;
    border-radius:10px;
  }
  .photo-caption {
    font-size:8px;
    left:18px;
    top:20px;
  }
  .floating-workout {
    left:12px;
    right:12px;
    bottom:17px;
    padding:14px;
    gap:10px;
    border-radius:7px;
  }
  .floating-workout strong {
    font-size:12px;
  }
  .floating-workout small {
    display:block;
    font-size:8px;
  }
  .round-check {
    display:grid;
    font-size:10px;
    width:21px;
    height:21px;
  }
  .small-label {
    font-size:7px;
  }
  .workout-icon {
    width:33px;
    height:41px;
  }
  .hero-visual-note {
    font-size:8px;
    bottom:-18px;
  }
  .benefits-strip {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 14px;
    padding:22px 0;
    font-size:10px;
  }
  .benefits-strip i {
    display:none;
  }
  .benefits-strip span:before {
    content:'✓';
    margin-right:8px;
    color:#6e8746;
  }
  .section {
    padding-block:64px;
  }
  h2 {
    font-size:32px;
    letter-spacing:-1.4px;
  }
  .section-heading {
    text-align:left;
  }
  .steps-grid {
    grid-template-columns:1fr;
    gap:27px;
    margin-top:35px;
  }
  .step {
    display:grid;
    grid-template-columns:25px 1fr;
    column-gap:15px;
    align-items:start;
    border-bottom:1px solid var(--line);
    padding-bottom:26px;
  }
  .step:last-child {
    border-bottom:0;
    padding-bottom:0;
  }
  .step-number {
    font-size:9px;
    grid-row:1/4;
    padding-top:29px;
  }
  .step-mini {
    height:62px;
    margin:0 0 20px;
    transform:none;
    width:auto;
  }
  .step h3 {
    font-size:18px;
    margin-bottom:9px;
    line-height:1.4;
  }
  .step p {
    font-size:13px;
    max-width:none;
    grid-column:2;
  }
  .mini-tag {
    display:block;
  }
  .plan-mini {
    padding-bottom:0;
    align-items:center;
  }
  .plan-mini span {
    height:24px;
    width:25px;
  }
  .plan-mini span:nth-child(2n) {
    height:38px;
  }
  .plan-mini span:nth-child(3) {
    height:25px;
  }
  .plan-mini span:nth-child(5) {
    height:45px;
  }
  .plan-mini span:last-child {
    height:54px;
  }
  .planner-section {
    padding-block:60px;
  }
  .planner-heading {
    display:block;
  }
  .planner-heading>p {
    max-width:none;
    font-size:13px;
    margin-top:20px;
  }
  .goal-options {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-block:28px 20px;
  }
  .goal-options button {
    font-size:11px;
    padding:11px 10px;
    min-height:45px;
    text-align:center;
  }
  .goal-options button span {
    display:none;
  }
  .demo-main {
    padding:20px 16px;
  }
  .demo-title {
    margin-top:20px;
  }
  .demo-title h3 {
    font-size:20px;
    line-height:1.35;
  }
  .demo-title p {
    font-size:10px;
    line-height:1.6;
  }
  .demo-topline {
    font-size:8px;
  }
  .demo-meta {
    flex-wrap:wrap;
    gap:12px 20px;
    font-size:9px;
    padding-block:17px;
  }
  .demo-meta>span:last-child {
    flex-basis:100%;
  }
  .week-title {
    margin-block:19px 15px;
  }
  .week-title span {
    font-size:8px;
  }
  .week-grid {
    display:flex;
    flex-direction:column;
    gap:7px;
  }
  .day-column {
    display:grid;
    grid-template-columns:30px 1fr;
    gap:8px;
    align-items:center;
  }
  .day-name {
    font-size:8px;
    margin:0;
    text-align:left;
  }
  .day-workout {
    height:auto;
    min-height:63px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:5px 12px;
    position:relative;
    padding:10px 12px;
  }
  .workout-type {
    font-size:6px;
    grid-column:1;
  }
  .day-workout strong {
    font-size:11px;
    grid-column:1;
  }
  .workout-duration {
    grid-column:2;
    grid-row:1/3;
    align-self:center;
    margin:0;
    font-size:11px;
  }
  .workout-bars {
    display:none;
  }
  .day-workout.rest {
    min-height:44px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .rest .workout-type,.rest .workout-duration {
    display:none;
  }
  .rest strong {
    font-size:10px;
  }
  .demo-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-top:18px;
    font-size:9px;
  }
  .demo-bottom a {
    width:100%;
    justify-content:space-between;
    font-size:11px;
    padding:12px;
  }
  .demo-disclaimer {
    font-size:9px;
    line-height:1.7;
    padding-inline:8px;
    text-align:left;
  }
  .features {
    grid-template-columns:1fr;
    gap:35px;
    overflow:hidden;
  }
  .feature-copy>p:not(.eyebrow) {
    font-size:14px;
  }
  .feature-point {
    gap:15px;
    margin-top:23px;
  }
  .feature-point h3 {
    font-size:15px;
  }
  .feature-point p {
    font-size:13px;
  }
  .workout-detail-scene {
    padding:25px 18px;
  }
  .scene-orbit {
    inset:20px 0;
  }
  .workout-detail {
    padding:24px;
    transform:rotate(1.5deg);
  }
  .workout-detail h3 {
    font-size:34px;
  }
  .session-steps small {
    font-size:9px;
  }
  .watch-grid {
    display:flex;
    flex-direction:column-reverse;
    gap:36px;
    padding-block:58px 45px;
  }
  .watch-copy h2 {
    font-size:32px;
  }
  .watch-copy>p:not(.eyebrow) {
    font-size:14px;
    margin-block:23px;
  }
  .watch-copy>small {
    font-size:9px;
    max-width:310px;
  }
  .watch-scene {
    width:100%;
    height:365px;
    margin-top:10px;
  }
  .watch-strap {
    height:365px;
    width:124px;
  }
  .watch-body {
    width:220px;
    height:240px;
  }
  .watch-screen {
    padding:20px 14px;
  }
  .watch-time {
    font-size:48px;
  }
  .sync-badge {
    right:0;
    bottom:18px;
    font-size:10px;
  }
  .watch-orbit {
    width:330px;
    height:330px;
  }
  .watch-orbit.two {
    width:260px;
    height:260px;
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:32px;
  }
  .faq-section>div>p:not(.eyebrow) {
    margin-top:16px;
    font-size:13px;
  }
  summary {
    font-size:13px;
    padding-block:19px;
  }
  details>p {
    font-size:12px;
    padding-right:20px;
  }
  .closing {
    padding:45px 23px;
    border-radius:10px;
  }
  .closing h2 {
    font-size:29px;
    line-height:1.25;
  }
  .closing-note {
    font-size:9px;
    line-height:1.7;
  }
  .closing-line {
    left:-650px;
  }
  .footer {
    padding-block:39px 20px;
  }
  .footer-top {
    flex-wrap:wrap;
    gap:18px;
    padding-bottom:26px;
  }
  .footer-top>p {
    font-size:11px;
    order:3;
    flex-basis:100%;
  }
  .footer-top>a:last-child {
    font-size:11px;
  }
  .footer-bottom {
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:8px 18px;
    padding-top:16px;
    font-size:9px;
  }
  .footer-bottom>div {
    gap:17px;
    margin-left:auto;
  }
  .footer-bottom>span:last-child {
    flex-basis:100%;
  }
  .footer-bottom button {
    font-size:9px;
  }
}

@media(max-width:370px) {
  .container {
    width:calc(100% - 32px);
  }
  .header {
    padding-inline:16px;
  }
  .brand {
    font-size:21px;
  }
  .header-actions {
    gap:0;
  }
  .login {
    gap:8px;
    padding-inline:9px;
  }
  .hero-actions {
    gap:14px;
  }
  .hero h1 {
    font-size:43px;
  }
  .floating-workout small {
    font-size:7px;
  }
  .round-check {
    display:none;
  }
  .goal-mini {
    gap:8px;
  }
  .mini-tag {
    font-size:9px;
  }
  .goal-mini strong {
    font-size:11px;
  }
  .demo-title h3 {
    font-size:18px;
  }
  .watch-copy h2 {
    font-size:29px;
  }
}

@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .motion-ready .reveal {
    opacity:1;
    transform:none;
  }
  .workout-detail {
    transform:none;
  }
}

/* Keep decorative orbits within their section without hiding page overflow. */
.features {
  overflow: clip;
}

@media (max-width: 650px) {
  .step {
    grid-template-columns: 25px minmax(0, 1fr);
    min-width: 0;
  }
  .step-mini {
    min-width: 0;
  }
}

@media (max-width: 370px) {
  .connect-mini {
    gap: 6px;
  }
  .connection-line {
    width: 18px;
  }
  .strava-mark {
    font-size: 12px;
    padding: 13px 9px;
  }
  .mini-brand {
    font-size: 13px;
    gap: 5px;
  }
  .connection-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .mini-tag {
    display: none;
  }
}


/* Show both supported account providers in the connection illustration. */
.account-providers {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 5px;
}
.account-providers .strava-mark,
.account-providers .garmin-mark {
  display: block;
  padding: 7px 12px;
  border: 1px solid #e9eae3;
  border-radius: 5px;
  background: var(--white);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  text-align: center;
}
.garmin-mark {
  color: var(--ink);
}

/* Legal pages share the brand shell and keep longer text easy to read. */
.legal-hero {
  padding-block: 55px 54px;
}
.legal-hero-shell {
  max-width: 860px;
}
.legal-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 25px;
}
.legal-badge {
  padding: 7px 11px;
  border-radius: 5px;
  background: var(--mint-soft);
  color: var(--teal);
  font-size: 10px;
  font-weight: 600;
}
.legal-kicker {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-hero h1 {
  font-size: clamp(38px, 4.5vw, 62px);
  letter-spacing: -2.5px;
  line-height: 1.15;
  margin-bottom: 23px;
}
.legal-intro {
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 740px;
}
.legal-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 25px;
  font-size: 11px;
  color: var(--muted);
}
.legal-meta strong {
  font-weight: 500;
  color: var(--ink);
}
.legal-content {
  padding-block: 0 45px;
}
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 45px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 45px;
}
.legal-summary {
  background: #eaf0e3;
  border-radius: 12px;
  padding: 28px;
  position: sticky;
  top: 30px;
}
.legal-summary .eyebrow {
  color: var(--teal);
  font-size: 9px;
  margin-bottom: 17px;
}
.legal-summary h2 {
  font-size: 23px;
  letter-spacing: -.7px;
  line-height: 1.35;
  margin-bottom: 18px;
}
.legal-summary p,
.legal-summary li {
  font-size: 13px;
  line-height: 1.8;
  color: #53634e;
}
.legal-summary ul {
  padding-left: 17px;
  margin: 18px 0 0;
}
.legal-summary li + li {
  margin-top: 12px;
}
.legal-summary li::marker {
  color: var(--teal);
}
.legal-article {
  min-width: 0;
  background: var(--white);
  border-radius: 12px;
  padding: 40px 44px;
  box-shadow: 0 8px 30px #203c3205, 0 1px 3px #203c3208;
}
.legal-article section + section {
  margin-top: 30px;
  border-top: 1px solid #e8ece2;
  padding-top: 30px;
}
.legal-article h2 {
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -.55px;
  margin-bottom: 14px;
  text-wrap: pretty;
}
.legal-article p,
.legal-article li {
  font-size: 15px;
  line-height: 1.9;
  color: #56635a;
  overflow-wrap: anywhere;
}
.legal-article p + p {
  margin-top: 14px;
}
.legal-contact {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-contact:hover {
  color: var(--ink);
}
@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: minmax(0, 235px) minmax(0, 1fr);
    gap: 25px;
  }
  .legal-summary {
    padding: 23px;
  }
  .legal-summary h2 {
    font-size: 21px;
  }
  .legal-article {
    padding: 28px;
  }
}
@media (max-width: 650px) {
  .legal-hero {
    padding-block: 30px 32px;
  }
  .legal-topline {
    gap: 10px;
    margin-bottom: 20px;
  }
  .legal-kicker {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .legal-hero h1 {
    font-size: 38px;
    letter-spacing: -1.6px;
  }
  .legal-intro {
    font-size: 14px;
    line-height: 1.85;
  }
  .legal-meta {
    font-size: 10px;
    gap: 10px;
    margin-top: 20px;
  }
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding-top: 28px;
  }
  .legal-summary {
    position: static;
    padding: 24px;
  }
  .legal-summary h2 {
    font-size: 23px;
  }
  .legal-article {
    padding: 26px 22px;
  }
  .legal-article h2 {
    font-size: 20px;
  }
  .legal-article p,
  .legal-article li {
    font-size: 14px;
  }
  .legal-content {
    padding-bottom: 15px;
  }
}