/* Achilles landing page (the home page and the pages under /for/). The app's design system on the web:
   Chalk colours, Space Grotesk over Figtree, pills, and the frosted glass tiles of Today's Shortcuts
   (white frost over a soft glow, a bright rim, a ringed button). The markup comes from site/src/render.mjs;
   the blog and the other pages keep their own inline styles. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/space-grotesk.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fonts/figtree.woff2) format("woff2"); }
:root {
  --paper: #F2F2F0; --raised: #FFFFFF; --sunken: #E6E6E3;
  --ink: #0D0D0D; --muted: #595956; --line: #D9D9D5; --line-strong: #8A8A86;
  --accent: #C92A12; --accent-soft: #FDECE8; --on-ink: #F2F2F0; --on-ink-muted: #A3A3A0;
  --steel: #8E9BA8; --amber: #F2B04A; --iris: #8B7BE0; --success: #0D7566;
  --glass-a: rgba(255, 255, 255, .62); --glass-b: rgba(255, 255, 255, .28);
  --glass-rim: rgba(255, 255, 255, .95); --glass-shadow: rgba(142, 155, 168, .22);
  --glass-hi: #FFFFFF; --glow-strength: 70%;
  --display: "Space Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --text: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 12px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ax-wrap {
  max-width: 76rem; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 700px) { .ax-wrap { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); } }
.ax-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Type */
.ax-display { font: 500 clamp(2.5rem, 1.35rem + 5vw, 5.25rem)/1.0 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.ax-h2 { font: 500 clamp(1.75rem, 1.25rem + 2.1vw, 2.9rem)/1.06 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.ax-h3 { font: 600 1.125rem/1.25 var(--text); letter-spacing: -.01em; }
.ax-eyebrow { font: 600 .75rem/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ax-lede { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); line-height: 1.45; color: var(--muted); max-width: 34em; text-wrap: pretty; }
.ax-num { font-family: var(--display); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ax-rule { height: 1.5px; background: var(--ink); border: 0; margin: 0; }

/* Header */
.ax-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.ax-brand { display: inline-flex; align-items: center; gap: 10px; font: 500 1.3rem/1 var(--display); letter-spacing: -.03em; text-decoration: none; }
.ax-brand svg { width: 24px; height: 23px; flex: none; }
.ax-nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); font: 500 .9375rem/1 var(--text); }
.ax-nav a:not(.ax-btn) { text-decoration: none; color: var(--muted); }
.ax-nav a:not(.ax-btn):hover { color: var(--ink); }
@media (max-width: 620px) { .ax-nav a:not(.ax-btn) { display: none; } }

/* Buttons and chips */
.ax-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; font: 600 .9375rem/1 var(--text); text-decoration: none; white-space: nowrap;
  transition: transform .16s var(--ease), background .2s, box-shadow .2s;
}
.ax-btn:active { transform: scale(.965); }
.ax-btn--ink { background: var(--ink); color: var(--paper); }
.ax-btn--line { border: 1.5px solid var(--line-strong); }
.ax-btn--paper { background: var(--paper); color: var(--ink); }
.ax-btn--glass { background: linear-gradient(135deg, var(--glass-a), var(--glass-b)); border: 1px solid var(--glass-rim); box-shadow: 0 8px 18px var(--glass-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ax-btn--sm { min-height: 40px; padding: 0 16px; font-size: .875rem; }
.ax-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: var(--raised); border: 1px solid var(--line); font: 500 .8125rem/1.1 var(--text); white-space: nowrap;
}
.ax-ic { flex: none; display: block; }

/* Glass. A tile carries its own glow (soft circles under white frost), as the app's tiles do. */
.ax-tile {
  --g1: var(--steel); --g2: var(--glass-hi); --g3: transparent;
  position: relative; border-radius: 24px; border: 1px solid var(--glass-rim);
  background:
    linear-gradient(135deg, var(--glass-a), var(--glass-b)),
    radial-gradient(60% 75% at 18% 100%, color-mix(in srgb, var(--g1) var(--glow-strength), transparent), transparent 72%),
    radial-gradient(46% 56% at 88% 6%, var(--g2), transparent 72%),
    radial-gradient(50% 60% at 96% 96%, var(--g3), transparent 72%),
    var(--sunken);
  box-shadow: 0 8px 18px var(--glass-shadow);
}
.ax-tile[data-glow="accent"] { --g1: var(--amber); --g3: color-mix(in srgb, var(--accent) 42%, transparent); }
.ax-tile[data-glow="amber"] { --g1: var(--amber); }
.ax-tile[data-glow="iris"] { --g1: var(--iris); }
.ax-tile[data-glow="steel"] { --g1: var(--steel); }
/* A field of soft colour behind the hero. Blobs are placed with inline left/top/width and --c. */
.ax-field { position: relative; isolation: isolate; overflow: hidden; background: var(--sunken); border-radius: var(--r-lg); }
.ax-blob { position: absolute; z-index: -1; aspect-ratio: 1; border-radius: 50%; background: var(--c, var(--steel)); opacity: var(--o, .6); filter: blur(calc(var(--b, 46) * 1px)); pointer-events: none; }
@keyframes ax-drift { 50% { transform: translate(var(--dx, 24px), var(--dy, -18px)) scale(1.08); } }
.ax-blob.is-drifting { animation: ax-drift var(--t, 16s) ease-in-out infinite; }

/* The ringed button: a white disc with a ring drawn round it. */
.ax-ring { position: relative; width: 68px; height: 68px; flex: none; display: grid; place-items: center; color: var(--ink); }
.ax-ring > svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ax-ring .disc {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #0D0D0D;
  background: radial-gradient(circle at 35% 30%, #fff, #EDEDEA); border: 1px solid #fff;
  box-shadow: 0 6px 14px rgba(142, 155, 168, .35);
}
@keyframes ax-turn { to { transform: rotate(360deg); } }
.ax-ring .orbit { transform-origin: 50% 50%; animation: ax-turn 7s linear infinite; }

/* Avatars */
.ax-avatar { display: block; border-radius: 50%; background: var(--sunken); }

/* ───────── The phone and the app's screens, drawn at the app's 390 by 844 and scaled ───────── */
.ax-phone {
  --s: .72; --h: 844;
  position: relative; flex: none; width: calc(390px * var(--s) + 18px); height: calc(var(--h) * 1px * var(--s) + 18px);
  padding: 9px; border-radius: calc(54px * var(--s) + 9px); background: #0D0D0D;
  box-shadow: 0 30px 60px -28px rgba(13, 13, 13, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.ax-phone .ax-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(46px * var(--s)); background: #F2F2F0; }
.ax-app {
  /* The app is light in every variation, like a real phone on a dark page. */
  --paper: #F2F2F0; --raised: #FFFFFF; --sunken: #E6E6E3; --ink: #0D0D0D; --muted: #595956; --line: #D9D9D5; --line-strong: #8A8A86;
  --accent: #C92A12; --accent-soft: #FDECE8; --glass-a: rgba(255,255,255,.62); --glass-b: rgba(255,255,255,.28); --glass-rim: rgba(255,255,255,.95);
  --glass-shadow: rgba(142,155,168,.22); --glass-hi: #fff; --glow-strength: 70%;
  position: absolute; left: 0; top: 0; width: 390px; height: calc(var(--h) * 1px); transform: scale(var(--s)); transform-origin: 0 0;
  background: var(--paper); color: var(--ink); font: 400 15px/1.45 var(--text); text-align: left; padding: 54px 22px 0; overflow: hidden;
}
.ax-app > .app-in { position: absolute; inset: 0; padding: 54px 22px 0; transition: opacity .45s, transform .6s var(--ease); }
.ax-app > .app-in.is-out { opacity: 0; transform: translateY(14px) scale(.985); pointer-events: none; }
.app-ov { font: 600 11px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.app-ttl { font: 500 25px/29px var(--display); letter-spacing: -.025em; }
.app-hd { font: 600 17px/22px var(--text); letter-spacing: -.01em; }
.app-sub { font: 400 14px/20px var(--text); color: var(--muted); }
.app-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-top: 16px; font: 500 17px/1 var(--display); }
.app-tabs span { padding-bottom: 12px; color: var(--muted); }
.app-tabs .on { color: var(--ink); border-bottom: 2.5px solid var(--accent); margin-bottom: -1px; }
.app-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 999px; font: 600 14px/1 var(--text); }
.app-pill.ink { background: var(--ink); color: #fff; } .app-pill.line { border: 1.5px solid var(--line-strong); }
.app-card { background: var(--raised); border-radius: 20px; padding: 16px; }
.app-x { width: 38px; height: 38px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; }
.app-gap { width: 38px; }
.app-pill--wide { width: 100%; height: 54px; font-size: 15px; }

/* Today: the date, the tabs, the greeting, the "Fit the rest of the week?" card over the week's
   calendar, the day's card and the tab bar, as the app's Today tab draws them. The page starts at
   its top and moves up once, far enough to bring the calendar clear of the tab bar. */
.app-today { padding: 0 !important; --ghost: #8A8A86; --flag: #C0242C; }
.app-scroll { padding: 65px 22px 0; transform: translateY(-84px); }
.ax-app > .app-in:not(.is-out) > .app-scroll { animation: app-pan 1.1s var(--ease) 1.3s both; }
.ax-app > .app-in:not(.is-out) .app-date { animation: app-date .5s ease-out 1.3s both; }
@keyframes app-pan { from { transform: none; } }
@keyframes app-date { from { opacity: 1; } }
.app-date { height: 44px; opacity: 0; } .app-date .app-ov { font-size: 10.5px; }
.app-date .ax-avatar { width: 44px; height: 44px; }
.app-today .app-tabs { margin-top: 29px; gap: 35px; font-size: 17px; }
.app-today .app-tabs span { padding-bottom: 14px; }
.app-today .app-tabs .on { border-bottom-width: 3px; }
.app-hello { margin-top: 12px; font: 500 22px/30px var(--display); letter-spacing: -.025em; }
.app-today .app-hello + .app-sub { margin-top: 0; font-size: 14px; }
.app-fit { margin-top: 22px; background: var(--raised); border: 1px solid var(--line); border-radius: 28px; padding: 16px 15px 15px; }
.app-fit .app-ov { display: block; font-size: 10.8px; letter-spacing: .1em; color: var(--flag); }
.app-fit .h { margin-top: 4px; font: 500 18px/25px var(--display); letter-spacing: -.02em; }
.app-fitweek { position: relative; margin-top: 7px; height: 122px; border-radius: 18px; background: var(--paper); display: grid; grid-template-columns: repeat(7, 1fr); }
.app-fitweek > span { position: relative; display: grid; justify-items: center; align-content: start; padding-top: 6px; }
.app-fitweek .miss::before { content: ""; position: absolute; inset: 3px; border-radius: 15px; background: var(--accent-soft); }
.app-fitweek small { position: relative; font: 600 10.5px/14px var(--text); letter-spacing: .06em; color: var(--muted); }
.app-fitweek b { position: relative; font: 500 15.5px/18px var(--display); letter-spacing: -.02em; }
.app-fitweek .past small, .app-fitweek .past b { color: var(--ghost); }
.app-fitweek .now small, .app-fitweek .now b { color: var(--accent); }
.app-fitweek .c { position: absolute; left: 50%; top: 64px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ghost); background: var(--raised); }
.app-fitweek .c.done { background: var(--ink); border-color: var(--ink); color: #fff; }
.app-fitweek .c.missed { background: none; border-color: var(--flag); color: var(--flag); }
.app-fitweek .c.offer { border-style: dashed; border-color: var(--ink); }
.app-fitweek .c.today, .app-fitweek .c.plan { background: #F6F6F4; border-color: #D0D0CD; color: #A7A7A6; }
.app-fitweek > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.app-fit .mv { margin-top: 12px; display: grid; gap: 1px; }
.app-fit .mv b { display: flex; align-items: center; gap: 7px; font: 600 15.5px/20px var(--text); }
.app-fit .mv span { display: flex; align-items: center; gap: 4px; font: 400 13.5px/18px var(--text); color: var(--muted); }
.app-fit .nt { margin-top: 17px; font: 400 13.5px/18px var(--text); color: var(--muted); }
.app-btns { margin-top: 15px; display: flex; gap: 8px; }
.app-btns .app-pill { font-size: 15px; padding: 0 24px; } .app-btns .line { background: var(--raised); }
.app-band { margin-top: 22px; display: flex; align-items: center; gap: 22px; font: 600 13px/22px var(--text); }
.app-band b { font-weight: 600; margin-right: auto; }
.app-band span { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; }
/* The calendar: today's pill is the largest, the days beside it stand on a lighter one. */
.app-strip { margin-top: 23px; height: 116px; display: grid; grid-template-columns: repeat(7, 1fr); align-items: start; }
.app-strip > span { position: relative; justify-self: center; display: grid; justify-items: center; align-content: start; width: 45px; height: 100px; margin-top: 1px; border-radius: 23px; }
.app-strip small { font: 400 12px/15px var(--text); color: var(--muted); margin-top: 6px; }
.app-strip b { font: 500 17px/20px var(--display); letter-spacing: -.02em; }
.app-strip .mk { position: absolute; left: 50%; top: 58px; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); border: 1.5px solid var(--ghost); }
.app-strip .mk.dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--ghost); border: 0; }
.app-strip .mk.done { background: var(--ink); border-color: var(--ink); color: #fff; }
.app-strip .mk.missed { background: none; border-color: var(--flag); color: var(--flag); }
.app-strip .d3 small { font-size: 11px; margin-top: 8px; } .app-strip .d3 b { font-size: 16px; } .app-strip .d3 .mk:not(.dot) { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.app-strip .d1 { background: #EDEDEB; }
.app-strip .d1 small { font-size: 13px; line-height: 16px; } .app-strip .d1 b { font-size: 19px; line-height: 22px; }
.app-strip .d1 .mk { top: 62px; } .app-strip .d1 .mk:not(.dot) { width: 27px; height: 27px; margin: -13.5px 0 0 -13.5px; }
.app-strip .d0 { width: 53px; height: 116px; margin-top: 0; border-radius: 27px; background: var(--sunken); }
.app-strip .d0 small { font-size: 14.5px; line-height: 18px; color: var(--accent); margin-top: 7px; }
.app-strip .d0 b { font-size: 22px; line-height: 24px; color: var(--accent); }
.app-strip .d0 b::after { content: ""; display: block; width: 5px; height: 5px; margin: 1px auto 0; border-radius: 50%; background: var(--accent); }
.app-strip .d0 .mk { top: 72px; } .app-strip .d0 .mk.today { width: 31px; height: 31px; margin: -15.5px 0 0 -15.5px; background: var(--ink); border-color: var(--ink); color: #fff; }
.app-strip .past small, .app-strip .past b { color: var(--ghost); }
.app-daynav { margin-top: 17px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font: 500 17px/26px var(--display); letter-spacing: -.01em; color: var(--ghost); }
.app-daynav svg { color: var(--ink); }
.app-upnext { margin-top: 20px; padding: 24px 20px 22px; border-radius: 34px; border: 1.5px solid #fff; background: linear-gradient(140deg, #FEF5F2, var(--accent-soft)); box-shadow: 0 18px 34px -14px rgba(201, 42, 18, .22); display: grid; gap: 6px; }
.app-upnext .app-ov { margin-right: auto; color: var(--ink); letter-spacing: .12em; }
.app-upnext .app-row > i { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; margin-right: 10px; }
.app-upnext .app-ttl { margin-top: 8px; font-size: 31px; line-height: 36px; }
.app-upnext .app-sub { color: var(--ink); font-size: 15px; }
.app-upnext .app-row + .app-ttl ~ .app-row { margin-top: 20px; }
.app-upnext .ax-num { font-size: 24px; }
.app-bar { position: absolute; left: 80px; right: 80px; bottom: 34px; height: 64px; padding: 6px 24px 6px 6px; border-radius: 32px; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(rgba(255, 255, 255, .78), rgba(236, 236, 238, .62)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 12px 30px rgba(13, 13, 13, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.app-bar .on { height: 52px; padding: 0 20px 0 18px; border-radius: 26px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; gap: 9px; font: 600 14.5px/1 var(--display); letter-spacing: -.01em; }

/* Coach chat */
.app-chat { display: flex; flex-direction: column; height: 100%; }
.app-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-chat-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-top: 6px; position: relative; }
.app-face { width: 132px; height: 132px; margin: 4px auto -6px; }
.app-face svg { width: 100%; height: 100%; overflow: visible; display: block; }
.app-chat-hello { text-align: center; font: 500 20px/25px var(--display); letter-spacing: -.02em; }
.app-bub { max-width: 82%; padding: 11px 15px; border-radius: 20px; font: 400 14.5px/21px var(--text); }
.app-bub.me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.app-bub.co { align-self: flex-start; background: var(--raised); border-bottom-left-radius: 6px; }
.app-step { align-self: flex-start; display: inline-flex; gap: 7px; align-items: center; font: 500 12.5px/1 var(--text); color: var(--muted); }
.app-box { margin: auto -6px 22px; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 18px; border-radius: 999px; background: var(--raised); box-shadow: 0 6px 18px rgba(13,13,13,.08); color: var(--muted); font-size: 14.5px; }
.app-box span { flex: 1; } .app-box i { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.app-tint { position: absolute; inset: 0 0 auto; height: 340px; background: radial-gradient(70% 60% at 50% 30%, rgba(139,123,224,.30), transparent 75%); pointer-events: none; }

/* An exercise's page: the picture whole on night, the dose, the steps, and Start pinned below */
.app-ex { padding: 0 !important; display: flex; flex-direction: column; }
.app-hero { flex: none; height: 322px; background: #0D0D0D; position: relative; display: grid; justify-items: center; }
.app-hero img { height: 322px; width: auto; display: block; }
.app-hero .app-x { position: absolute; left: 18px; top: 54px; width: 44px; height: 44px; background: rgba(242, 242, 240, .94); }
.app-watch { position: absolute; left: 18px; bottom: 16px; height: 40px; padding: 0 18px 0 15px; border-radius: 999px; display: inline-flex; align-items: center; gap: 9px; background: rgba(13, 13, 13, .88); color: #fff; font: 600 14px/1 var(--text); }
.app-detail { flex: 1; min-height: 0; overflow: hidden; padding: 20px 22px 0; -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent); }
.app-detail .app-ov { font-size: 10px; letter-spacing: .14em; color: var(--ink); }
.app-detail .app-ttl { margin-top: 9px; font-size: 32px; line-height: 34px; letter-spacing: -.03em; }
.app-nums { margin-top: 16px; display: flex; gap: 26px; padding-block: 14px; border-block: 1px solid var(--line); }
.app-nums span { display: grid; gap: 4px; } .app-nums b { font: 500 24px/24px var(--display); letter-spacing: -.03em; }
.app-nums i { font: 600 9.5px/12px var(--text); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.app-detail .app-hd { margin-top: 20px; font: 500 18px/22px var(--display); letter-spacing: -.02em; }
.app-cue { margin-top: 11px; display: flex; gap: 12px; align-items: flex-start; font: 400 14.5px/20px var(--text); }
.app-cue b { flex: none; width: 19px; font: 500 13px/20px var(--display); color: var(--muted); }
.app-start { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 22px 34px; border-top: 1px solid var(--line); background: var(--paper); }
.app-start i { flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 600 10.5px/1 var(--text); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.app-start .app-pill { flex: 1; height: 56px; font: 600 15.5px/1 var(--display); }

/* Run page */
.app-prof { display: flex; align-items: flex-end; gap: 3px; height: 92px; padding: 14px 14px 0; background: var(--raised); border-radius: 20px 20px 0 0; }
.app-prof i { flex: var(--w, 1); border-radius: 5px 5px 0 0; background: var(--ink); height: calc(var(--z) * 18%); min-width: 4px; }
.app-prof i.rest { background: var(--line); } .app-prof i.hard { background: var(--accent); }
.app-seg { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; background: var(--raised); border-top: 1px solid var(--line); font-size: 14.5px; }
.app-seg:last-of-type { border-radius: 0 0 20px 20px; }
.app-seg b { font-weight: 600; grid-column: 1 / 3; } .app-seg small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.app-zone { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.app-zone i { width: 4px; border-radius: 1.5px; background: var(--line); } .app-zone i.f { background: var(--ink); }
.app-zone i:nth-child(1) { height: 5px; } .app-zone i:nth-child(2) { height: 8px; } .app-zone i:nth-child(3) { height: 11px; } .app-zone i:nth-child(4) { height: 13.5px; } .app-zone i:nth-child(5) { height: 16px; }
.app-runs .app-ttl { margin-top: 16px; }
.app-runs .app-sub { margin: 4px 0 18px; }
.app-runs .app-card { margin-top: 12px; display: grid; gap: 10px; }
.app-runs .app-card .app-hd { font-size: 15px; }
.app-runs .app-opt { background: var(--paper); }
.app-runs .app-pill--wide { margin-top: 14px; }
.app-z { font: 500 12.5px/1 var(--text); color: var(--muted); display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; }

/* The Workout now sheet: the dial's tile beside Where and Focus, the focus chips, Build, and the
   day's own workout under "Also today" */
.app-now { padding: 0 !important; }
.app-dim { position: absolute; inset: 0; background: #6F6F6E; }
.app-sheet { position: absolute; inset: 191px 0 0; background: var(--paper); border-radius: 30px 30px 0 0; padding: 22px 24px 0; }
.app-sheet .app-ttl { font-size: 23px; line-height: 36px; letter-spacing: -.02em; }
.app-sheet > .app-sub { font-size: 13.3px; line-height: 19px; margin-top: 1px; }
.app-tiles { margin-top: 18px; height: 250px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-glass, .app-focus { position: relative; border-radius: 28px; padding: 14px 14px 0 16px; display: grid; align-content: start; }
.app-glass { background: linear-gradient(150deg, #FDFDFD, #F2F2F1); border: 1.5px solid #fff; box-shadow: 0 10px 24px -8px rgba(13, 13, 13, .12); }
.app-tiles .app-ov { letter-spacing: .1em; }
.app-long { grid-row: 1 / 3; justify-items: center; }
.app-long .app-ov { justify-self: start; }
.app-dial { position: relative; width: 130px; height: 130px; margin-top: 10px; display: grid; place-items: center; }
.app-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.app-dial div { position: relative; text-align: center; }
.app-dial b { display: block; font: 500 29px/30px var(--display); letter-spacing: -.04em; } .app-dial small { display: block; color: var(--muted); font-size: 11px; line-height: 14px; }
.app-pm { margin-top: 15px; display: flex; gap: 13px; }
.app-pm i { width: 43px; height: 43px; border-radius: 50%; background: var(--raised); border: 1px solid #DFDFDF; display: grid; place-items: center; }
.app-where { margin-top: 8px; display: flex; align-items: center; gap: 7px; font: 500 20px/26px var(--display); letter-spacing: -.02em; }
.app-glass > small { margin-top: 6px; font-size: 12.5px; line-height: 16px; color: var(--muted); }
.app-focus { background: #0B0B0B; color: var(--paper); padding-top: 13px; }
.app-focus .app-ov, .app-focus small { color: #A3A3A0; }
.app-focus b { margin-top: 9px; font: 600 18px/22px var(--text); letter-spacing: -.01em; }
.app-focus small { margin-top: 5px; font-size: 13.5px; line-height: 16px; }
.app-focus i { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(242, 242, 240, .62); display: grid; place-items: center; }
.app-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.app-opt { padding: 9px 14px; border-radius: 999px; background: var(--raised); font: 500 13.5px/1 var(--text); border: 1.5px solid transparent; }
.app-opt.on { border-color: var(--ink); }
.app-sheet .app-opts { margin-top: 13px; gap: 9px; flex-wrap: nowrap; }
.app-sheet .app-opt { flex: none; height: 43px; padding: 0 14.5px; display: inline-flex; align-items: center; font-size: 13px; white-space: nowrap; border: 1px solid var(--line); }
.app-sheet .app-opt.on { background: var(--sunken); border: 1.5px solid var(--ink); }
.app-sheet .app-pill--wide { margin-top: 17px; height: 55px; font-size: 16px; }
.app-sheet > .app-ov { display: block; margin-top: 25px; letter-spacing: .1em; }
.app-also { margin-top: 9px; height: 64px; padding: 0 18px 0 15px; border-radius: 24px; background: var(--accent-soft); display: flex; align-items: center; gap: 13px; }
.app-also span { flex: 1; display: grid; gap: 2px; } .app-also b { font: 600 14px/19px var(--text); } .app-also small { font-size: 12px; line-height: 16px; color: var(--muted); }

/* Science */
.app-bars { display: inline-flex; gap: 3px; align-items: flex-end; }
.app-bars i { width: 6px; border-radius: 2px; background: var(--line); } .app-bars i.f { background: var(--ink); }
.app-bars i:nth-child(1) { height: 9px; } .app-bars i:nth-child(2) { height: 14px; } .app-bars i:nth-child(3) { height: 19px; } .app-bars i:nth-child(4) { height: 24px; }
.app-src { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); font: 400 12.5px/18px var(--text); color: var(--muted); }
.app-src b { font: 500 12px/18px var(--display); color: var(--ink); }
.app-area { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--raised); border-radius: 18px; }
.app-area b { font: 600 14.5px/1.2 var(--text); display: block; } .app-area small { color: var(--muted); font-size: 12.5px; }
.app-area sup { font: 500 10px/1 var(--display); color: var(--accent); margin-left: 3px; }
.app-science .app-ttl { margin-top: 16px; }
.app-science > .app-ov { margin: 20px 0 8px; }
.app-evidence { margin-top: 14px; display: flex; gap: 14px; align-items: center; }
.app-evidence b { font: 600 15px/1.2 var(--text); display: block; }
.app-evidence small { color: var(--muted); font-size: 12.5px; }
.app-areas { display: grid; gap: 8px; }

/* ───────── The week board ───────── */
.ax-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(3px, .9vw, 8px); }
.ax-day {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 126px;
  padding: 10px 2px 10px; border-radius: 18px; background: var(--sunken); border: 1.5px solid transparent;
}
.ax-day.is-today { background: var(--raised); border-color: var(--ink); }
.ax-day > b { font: 500 .6875rem/1 var(--text); color: var(--muted); }
.ax-day.is-today > b { color: var(--accent); font-weight: 600; }
.ax-slots { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ax-slot { display: grid; justify-items: center; gap: 4px; position: relative; }
.ax-slot > i {
  width: clamp(30px, 8.4vw, 40px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font: 500 clamp(.8rem, 2.6vw, 1rem)/1 var(--display); font-style: normal; transition: background .3s, color .3s, border-color .3s, opacity .3s;
}
.ax-slot > small { font: 500 .625rem/1 var(--text); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ax-slot[data-k="w"] > i { background: var(--ink); color: var(--paper); }
.ax-slot[data-k="r"] > i { background: var(--raised); border: 1.5px solid var(--ink); }
.ax-slot[data-k="r"][data-hard] > i { border-color: var(--accent); color: var(--accent); }
.ax-slot[data-k="s"] > i { background: var(--amber); color: #0D0D0D; }
.ax-slot[data-k="a"] > i { border: 1.5px dashed var(--line-strong); color: var(--muted); }
.ax-slot.is-missed > i { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
.ax-slot.is-dropped { opacity: .35; } .ax-slot.is-dropped > i { text-decoration: line-through; }
@keyframes ax-land { 0% { transform: scale(1); } 30% { transform: scale(1.22); } 60% { transform: scale(.94); } 100% { transform: scale(1); } }
.ax-slot.is-landed > i { animation: ax-land .6s var(--ease); }
.ax-brk { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--steel); }
.ax-rest { font: 500 .625rem/1 var(--text); color: var(--line-strong); margin-top: 12px; }
.ax-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 .75rem/1.2 var(--text); color: var(--muted); }
.ax-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ax-legend i { width: 12px; height: 12px; border-radius: 50%; display: block; }

/* The proposal card: the week offers a change, the person confirms it. */
.ax-cue {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 6px; border-radius: 999px;
  border: 1.5px dashed var(--line-strong); font: 600 .875rem/1 var(--text); transition: background .2s, border-color .2s;
}
.ax-cue:hover { background: var(--raised); border-color: var(--ink); border-style: solid; }
.ax-cue i { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.ax-prop { border-radius: 22px; background: var(--accent-soft); padding: 18px; display: grid; gap: 12px; }
.ax-prop h3 { margin: 0; font: 500 1.25rem/1.15 var(--display); letter-spacing: -.02em; }
.ax-prop li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; line-height: 1.35; }
.ax-prop li svg { margin-top: 2px; color: var(--accent); }
.ax-prop .ax-prop-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes ax-rise { from { opacity: 0; transform: translateY(10px); } }
.ax-prop, .ax-settled { animation: ax-rise .45s var(--ease); }
.ax-settled { display: flex; align-items: center; gap: 10px; font: 500 .9375rem/1.3 var(--text); min-height: 44px; }
.ax-settled i { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; flex: none; }
.ax-settled button { text-decoration: underline; text-underline-offset: 3px; color: var(--muted); font-weight: 500; }

/* Phase road (runners) */
.ax-road { display: grid; gap: 8px; }
.ax-road-bar { position: relative; display: flex; gap: 4px; height: 10px; }
.ax-road-bar span { flex: var(--w, 1); border-radius: 5px; background: var(--line); }
.ax-road-bar span.on { background: var(--ink); } .ax-road-bar span.done { background: var(--line-strong); }
.ax-road-bar em { position: absolute; top: -5px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--accent); border: 3px solid var(--paper); }
.ax-road-lbl { display: flex; gap: 4px; font: 500 .75rem/1 var(--text); color: var(--muted); }
.ax-road-lbl span { flex: var(--w, 1); } .ax-road-lbl span.on { color: var(--ink); font-weight: 600; }

/* A session, as the plan lists it */
.ax-sess { display: grid; gap: 4px; }
.ax-sess-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; }
.ax-sess-head h3 { margin: 0; font: 500 1.5rem/1.1 var(--display); letter-spacing: -.025em; }
.ax-sess-head span { font: 500 .8125rem/1 var(--text); color: var(--muted); }
.ax-part { font: 600 .6875rem/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 0 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.ax-part em { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 500; }
.ax-ex { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.ax-ex b { font: 600 1rem/1.3 var(--text); }
.ax-ex .d { font: 500 .9375rem/1.3 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ax-ex .w { grid-column: 1 / -1; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.ax-step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--raised); border: 1px solid var(--line); margin-top: 14px; }
.ax-step .arrow { display: inline-flex; align-items: center; gap: 8px; font: 500 1.25rem/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.ax-step .arrow s { color: var(--muted); text-decoration: none; }
.ax-step p { font-size: .875rem; line-height: 1.35; color: var(--muted); } .ax-step p b { color: var(--ink); font-weight: 600; display: block; }

/* A run, as its page shows it */
.ax-run { display: grid; gap: 0; }
.ax-run .app-prof, .ax-run .app-seg { background: var(--raised); }

/* Muscle map */
.ax-map { display: flex; gap: 6%; justify-content: center; align-items: stretch; min-height: 0; height: 100%; width: 100%; }
.ax-map svg { flex: 0 1 auto; height: 100%; width: auto; min-width: 0; max-width: 47%; overflow: visible; }
.ax-map svg:only-child { max-width: 100%; }
.ax-map .b { fill: var(--raised); stroke: var(--line-strong); stroke-width: 2.5; stroke-linejoin: round; }
.ax-map .m { fill: var(--line); stroke: var(--raised); stroke-width: 1.6; stroke-linejoin: round; transition: fill .5s; }
.ax-map .m.lit { fill: var(--accent); }

/* Coach demo */
.ax-coach { display: grid; gap: 14px; }
.ax-weekblock { display: grid; gap: 18px; }
.ax-coach-top { display: flex; align-items: center; gap: 14px; }
.ax-coach-face { width: 84px; height: 84px; flex: none; margin: -6px 0 -6px -8px; }
.ax-coach-face svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ax-qs { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-q { min-height: 44px; padding: 10px 15px; border-radius: 999px; background: var(--raised); border: 1.5px solid var(--line); font: 500 .875rem/1.15 var(--text); text-align: left; transition: border-color .2s, background .2s; }
.ax-q:hover, .ax-q[aria-pressed="true"] { border-color: var(--ink); }
.ax-q[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ax-talk { display: grid; gap: 10px; min-height: 9.5rem; align-content: start; }
.ax-talk .me { justify-self: end; max-width: 85%; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: var(--ink); color: var(--paper); font-size: .9375rem; line-height: 1.35; animation: ax-rise .35s var(--ease); }
.ax-talk .co { justify-self: start; max-width: 92%; padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: var(--paper); font-size: .9375rem; line-height: 1.45; animation: ax-rise .35s var(--ease); }
.ax-answers { display: none; }
.ax-talk .co .w { opacity: 0; transition: opacity .25s; } .ax-talk .co .w.in { opacity: 1; }
@keyframes ax-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.ax-dots { display: inline-flex; gap: 4px; padding: 4px 0; } .ax-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ax-dot 1.1s infinite; }
.ax-dots i:nth-child(2) { animation-delay: .15s; } .ax-dots i:nth-child(3) { animation-delay: .3s; }
.ax-routine { margin-top: 10px; padding: 14px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--iris) 45%, var(--line)); display: grid; gap: 6px; background: var(--paper); }
.ax-routine b { font: 500 1.125rem/1.2 var(--display); letter-spacing: -.02em; } .ax-routine span { color: var(--muted); font-size: .875rem; line-height: 1.4; }

/* ───────── A lane's page (the tailored result) ───────── */
.ax-pp { display: grid; gap: clamp(36px, 6vw, 72px); padding-block: clamp(20px, 4vw, 44px) clamp(40px, 6vw, 80px); }
.ax-pp-head { display: grid; gap: 18px; justify-items: start; }
.ax-pp-head .who { display: flex; align-items: center; gap: 14px; }
.ax-pp-head .ax-avatar { width: 64px; height: 64px; }
.ax-pp-head h1 { max-width: 15em; font: 500 clamp(2.1rem, 1.3rem + 4vw, 4.25rem)/1.02 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.ax-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-goal { font-size: .875rem; color: var(--muted); margin-top: 4px; }
.ax-goal b { color: var(--ink); font-weight: 600; }
.ax-pp-sec { display: grid; gap: 20px; }
.ax-pp-sec > header { display: grid; gap: 8px; max-width: 40rem; }
.ax-pp-sec > header p { color: var(--muted); }
.ax-two { display: grid; gap: 20px 40px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .ax-two { grid-template-columns: minmax(0, 1fr); } }
.ax-card { background: var(--raised); border-radius: var(--r-lg); padding: clamp(16px, 2.6vw, 28px); }
.ax-side { display: grid; gap: 16px; align-content: start; }
.ax-mapbox { height: clamp(240px, 34vw, 340px); padding: 18px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.ax-fits { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .ax-fits { grid-template-columns: minmax(0, 1fr); } }
.ax-fit { padding: 20px; display: grid; gap: 10px; align-content: start; }
.ax-fit .ax-ring { margin: -6px 0 2px -8px; }
.ax-fit p { color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.ax-cta { display: grid; gap: 18px; justify-items: start; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-lg); background: var(--ink); color: var(--paper); position: relative; overflow: hidden; isolation: isolate; }
.ax-cta .ax-h2 { max-width: 14em; }
.ax-cta p { color: var(--on-ink-muted); max-width: 34em; }
.ax-cta p b { color: inherit; }
.ax-stores { display: flex; gap: 10px; flex-wrap: wrap; }
.ax-store { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px; border-radius: 14px; background: var(--paper); color: var(--ink); text-decoration: none; }
.ax-store small { display: block; font: 500 .625rem/1.1 var(--text); letter-spacing: .04em; opacity: .7; }
.ax-store b { display: block; font: 600 1.0625rem/1.15 var(--text); letter-spacing: -.01em; }
.ax-reads { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9375rem; }
.ax-reads a { text-underline-offset: 3px; }

/* From an example to the visitor's own plan. */
.ax-notyou { padding: clamp(18px, 2.6vw, 28px); display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.ax-notyou > div { display: grid; gap: 6px; flex: 1 1 20rem; }
.ax-notyou p { color: var(--muted); max-width: 40em; }
.ax-fits--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .ax-fits--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ax-fits--4 { grid-template-columns: minmax(0, 1fr); } }

/* Three numbers: what a plan is built from. */
.ax-stats { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ax-stats { grid-template-columns: minmax(0, 1fr); } }
.ax-stat { padding: clamp(20px, 2.6vw, 30px); display: grid; gap: 12px; align-content: start; }
.ax-stat b { font: 500 clamp(2.75rem, 1.5rem + 3.6vw, 4.5rem)/.95 var(--display); letter-spacing: -.045em; }
.ax-stat span { color: var(--muted); font-size: 1rem; line-height: 1.4; max-width: 17em; }
.ax-stat strong { color: var(--ink); font-weight: 600; }

/* The mixer: the visitor's own answers write a plan's first line. */
.ax-mix { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
.ax-mix-rows { display: grid; gap: 20px; }
.ax-mix-row { display: grid; gap: 9px; }
.ax-mix-say { position: sticky; top: 88px; padding: clamp(18px, 2.6vw, 30px); display: grid; gap: 14px; }
.ax-mix-out { font: 500 clamp(1.5rem, 1.05rem + 1.5vw, 2.3rem)/1.14 var(--display); letter-spacing: -.028em; color: var(--muted); text-wrap: pretty; }
.ax-mix-out b { color: var(--ink); font-weight: 500; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ax-mix-out b.is-new { animation: ax-mark 1.1s var(--ease); }
@keyframes ax-mark { from { background: color-mix(in srgb, var(--accent) 26%, transparent); } to { background: transparent; } }
@media (max-width: 860px) {
  .ax-mix { grid-template-columns: minmax(0, 1fr); }
  .ax-mix-say { order: -1; top: 74px; z-index: 3; padding: 14px 16px; gap: 6px; }
  .ax-mix-out { font-size: 1.25rem; line-height: 1.18; }
}

/* Steps and footer (the footer's markup is the shared partial, site/partials/footer.html) */
.ax-steps { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: s; }
@media (max-width: 860px) { .ax-steps { grid-template-columns: minmax(0, 1fr); } }
.ax-steps li { counter-increment: s; padding: 22px; border-radius: 24px; display: grid; gap: 8px; align-content: start; }
.ax-steps li::before { content: counter(s); font: 500 2.5rem/1 var(--display); letter-spacing: -.04em; }
.ax-steps p { color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 26px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.foot a { text-underline-offset: 3px; }

/* ───────── The home page: the orbit in one large glass rectangle ───────── */
/* One large glass rectangle: the app's abilities circle a phone and the one in front shows on its
   screen. site.js turns the orbit; without it the first ability stays up. */
.hero {
  margin-top: 4px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center;
  border: 1px solid var(--glass-rim); box-shadow: 0 30px 70px -40px rgba(142, 155, 168, .8), 0 1px 0 #fff inset;
  border-radius: clamp(28px, 4vw, 44px);
  overflow: clip;   /* not hidden: focusing an orb at the edge must never scroll the rectangle */
}
.hero-copy { display: grid; gap: 20px; justify-items: start; padding: clamp(24px, 5vw, 64px); padding-right: 0; position: relative; z-index: 4; }
.hero-copy .ax-display { max-width: 9.5em; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.stage { position: relative; height: 640px; }
.stage .ax-phone { --s: .65; position: absolute; left: 50%; top: 34px; transform: translateX(-50%); z-index: 2; }
.stage-light { position: absolute; left: 50%; top: 46%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(60px); opacity: .5; background: var(--light, var(--iris)); transition: background 1.2s; z-index: 0; }
.orbit-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.orbit-line.back { z-index: 1; } .orbit-line.front { z-index: 3; }
.orbit-line ellipse { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .1 11; opacity: .34; }
.orb {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 2px; padding: 3px 16px 3px 3px; border-radius: 999px;
  font: 600 .875rem/1 var(--text); white-space: nowrap; will-change: transform, opacity; opacity: 0;   /* until site.js places it */
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.5)); border: 1px solid var(--glass-rim);
  box-shadow: 0 8px 18px var(--glass-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .4s, box-shadow .4s;
}
.orb.is-on { background: #fff; box-shadow: 0 14px 30px rgba(142, 155, 168, .5); }
.orb .ax-ring { width: 46px; height: 46px; } .orb .ax-ring .disc { width: 32px; height: 32px; box-shadow: none; background: transparent; border-color: transparent; }
.orb .prog { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); opacity: 0; }
.orb .prog circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.orb.is-on .prog { opacity: 1; } .orb.is-on .ring { opacity: 0; }
.orb.is-on .prog circle { animation: fill var(--dwell, 4.4s) linear forwards; }
.hero.is-held .orb.is-on .prog circle { animation-play-state: paused; }
@keyframes fill { to { stroke-dashoffset: 0; } }
.ticker { display: grid; gap: 12px; min-height: 6.6rem; align-content: start; }
.ticker-text { display: grid; gap: 4px; }
.ticker-text b { font: 500 1.5rem/1.1 var(--display); letter-spacing: -.025em; }
.ticker-text span { color: var(--muted); font-size: .9375rem; line-height: 1.4; max-width: 26em; }
.ticker-text.swap { animation: ax-rise .5s var(--ease); }
.pips { display: flex; gap: 5px; }
.pips button { width: 28px; height: 20px; display: grid; place-items: center; }
.pips button::after { content: ""; width: 100%; height: 4px; border-radius: 2px; background: var(--line-strong); opacity: .4; transition: opacity .3s, background .3s; }
.pips button[aria-current="true"]::after { background: var(--ink); opacity: 1; }
.ticker--stage { display: none; }

/* Lanes: five glass columns, like the week board's days, each a link to its own page. */
.sec { padding-block: clamp(40px, 7vw, 88px) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); }
.sec--last { padding-bottom: clamp(40px, 7vw, 88px); }
.sec-head { display: grid; gap: 10px; padding-top: 22px; }
.sec-head p { color: var(--muted); max-width: 36em; }
.lanes { display: flex; gap: clamp(6px, 1.2vw, 12px); height: clamp(340px, 46vw, 470px); }
.lane {
  flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; text-align: left; text-decoration: none; color: inherit; border-radius: clamp(20px, 2.6vw, 30px);
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: clamp(10px, 1.6vw, 18px) 6px;
  transition: flex-grow .55s var(--ease), box-shadow .3s, transform .16s var(--ease);
}
.lane:active { transform: scale(.975); }
.lane .ax-avatar { width: clamp(44px, 7vw, 76px); height: auto; aspect-ratio: 1; }
.lane-name { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; font: 500 clamp(1.25rem, .8rem + 2.2vw, 2.4rem)/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.lane-more { position: absolute; left: clamp(96px, 9vw, 118px); right: 18px; top: 22px; bottom: 22px; display: grid; align-content: space-between; gap: 12px; opacity: 0; pointer-events: none; transition: opacity .25s; min-width: 220px; }
.lane-more strong { display: block; margin-top: 8px; font: 500 1.6rem/1.08 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.lane-more > span:first-child, .lane-more .ax-eyebrow { display: block; }
.lane-facts { display: grid; gap: 6px; justify-items: start; }
.lane-more .go { display: inline-flex; align-items: center; gap: 8px; font: 600 .9375rem/1 var(--text); }
@media (hover: hover) and (min-width: 900px) {
  .lanes:hover .lane { flex-grow: .82; }
  .lanes .lane:hover, .lanes .lane:focus-visible { flex-grow: 3.1; }
  .lane { justify-items: start; padding-inline: 20px; }
  .lane .ax-avatar, .lane .you-mark, .lane .ax-ring { justify-self: start; }
  .lane-name { justify-self: start; margin-left: 14px; }
  .lane:hover .lane-more, .lane:focus-visible .lane-more { opacity: 1; transition: opacity .4s .22s; }
}
/* The sixth lane is the visitor: ink, with an empty place where the others have a face. */
.lane--you { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); box-shadow: 0 8px 18px var(--glass-shadow); }
.you-mark { width: clamp(44px, 7vw, 76px); aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(242, 242, 240, .55); display: grid; place-items: center; flex: none; }
.lane--you .ax-ring { color: var(--paper); } .lane--you .ax-ring .disc { color: var(--ink); }
.lane--you .ax-eyebrow { color: var(--on-ink-muted); } .lane--you .ax-chip { color: var(--ink); }

@media (max-width: 600px) { .lanes { gap: 5px; } .lane .ax-ring { width: 46px; height: 46px; } .lane .ax-ring .disc { width: 32px; height: 32px; } .lane .ax-avatar, .lane .you-mark { width: 42px; } .lane { padding-inline: 2px; border-radius: 18px; } }

/* The exercise pictures that drift past under one line about the library: two rows going opposite
   ways. Each row holds its list twice, so moving it by one list's width (half the row and half a
   gap) loops with no seam. One list is 2,600 px wide, so the strip is never wider than 2,560. The
   cards are small and nameless so the rows stay quiet. A mouse over them holds the rows, and the
   button (shown by site.js) stops and starts them. With reduced motion the rows stand still and
   can be swiped. */
.reel { position: relative; max-width: 2560px; margin: clamp(40px, 7vw, 88px) auto 0; }
.reel-head p { margin: 0 0 18px; text-align: center; color: var(--muted); font: 400 1rem/1.4 var(--text); text-wrap: balance; }
.reel-head b { color: var(--ink); font: 600 1.0625rem/1.3 var(--display); letter-spacing: -.01em; }
.reel-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reel-row, .reel ul { display: flex; gap: 10px; }
.reel-row { width: max-content; animation: reel 60s linear infinite; }
.reel-row:nth-child(2) { animation-duration: 70s; animation-direction: reverse; }
.reel.is-paused .reel-row { animation-play-state: paused; }
@media (hover: hover) { .reel-rows:hover .reel-row { animation-play-state: paused; } }
.reel-pause { position: absolute; bottom: 12px; right: max(16px, env(safe-area-inset-right, 0px)); width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(13, 13, 13, .16), inset 0 0 0 1px rgba(255, 255, 255, .9); }
.reel-pause[hidden], .reel-pause svg:last-child, .reel-pause[aria-pressed="true"] svg:first-child { display: none; }
.reel-pause[aria-pressed="true"] svg:last-child { display: block; }
.reel ul { margin: 0; padding: 0; list-style: none; }
.reel li { position: relative; flex: none; width: 120px; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #E9E9E6; box-shadow: inset 0 0 0 1px var(--line); }
.reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); pointer-events: none; }
@keyframes reel { to { transform: translateX(calc(-50% - 5px)); } }
@media (max-width: 700px) {
  .reel-rows, .reel-row, .reel ul { gap: 8px; } .reel li { width: 92px; border-radius: 13px; }
  .reel-head p { font-size: .9375rem; } .reel-head b { display: block; font-size: 1rem; }
  @keyframes reel { to { transform: translateX(calc(-50% - 4px)); } }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding: 26px 20px 0; gap: 16px; }
  .hero-copy .ticker { display: none; }
  .ticker--stage { display: grid; padding: 0 20px 22px; text-align: left; position: relative; z-index: 4; min-height: 7.6rem; }
  .stage { height: 520px; }
  .stage .ax-phone { --s: .51; top: 18px; }
  .orb { padding: 2px; gap: 0; } .orb .orb-name { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .4s var(--ease), opacity .3s, padding .4s; }
  .orb.is-on { padding-right: 14px; } .orb.is-on .orb-name { max-width: 11em; opacity: 1; padding-left: 2px; }
}

/* ───────── A lane's page: the bar with the other examples ───────── */
.lane-bar { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.lane-bar .ax-wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 10px; }
.lane-tabs { display: flex; gap: 6px; min-width: 0; }
.lane-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; font: 600 .8125rem/1 var(--text); color: var(--muted); text-decoration: none; flex: none; border: 1.5px solid transparent; }
.lane-tabs a:hover { color: var(--ink); }
.lane-tabs a[aria-current="page"] { color: var(--ink); background: var(--raised); border-color: var(--ink); }
.lane-tabs .ax-avatar { width: 34px; height: 34px; }
.lane-tabs .you-mark { width: 34px; border-width: 1.5px; border-color: var(--line-strong); color: var(--ink); }
/* Narrower, a tab is its picture. Its name stays for screen readers, and shows on the open page's tab while there is room. */
@media (max-width: 860px) {
  .lane-tabs { gap: 3px; } .lane-tabs a { padding: 3px; }
  .lane-tabs a:not([aria-current]) > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lane-tabs a[aria-current] { padding-right: 12px; }
}
@media (max-width: 560px) {
  .lane-tabs a[aria-current] { padding-right: 3px; }
  .lane-tabs a[aria-current] > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 420px) { .lane-bar .ax-brand span { display: none; } }

/* ───────── From page to page ─────────
   A lane's face on the home page and on its own page carry the same view-transition-name (set in
   the markup), so the browser moves it from one to the other while the rest cross-fades. Browsers
   without cross-document view transitions just open the page. The switch itself
   (@view-transition, off with reduced motion) is a <style> in each page's head (build.mjs): Chrome
   reads it when the body starts, which is often before this file has arrived, and then skips the move. */
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.3, .1, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ax-app > .app-in > .app-scroll, .ax-app > .app-in .app-date { animation: none !important; }
  .reel-rows { -webkit-mask-image: none; mask-image: none; }
  .reel-row { animation: none; width: auto; overflow-x: auto; scrollbar-width: none; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .reel ul[aria-hidden] { display: none; }
}