/*
 * The website, in the app's clothes.
 *
 * Same palette, same faces, same rounded shapes. The phone screens further
 * down are markup rather than screenshots: the app is not on a store yet, and
 * a rendering that shares the app's tokens stays honest about what it is
 * while staying sharp at any density.
 */

:root {
  --paper: #F2F8FF;
  --surface: #FFFFFF;
  --sunken: #E7EFF8;
  --ink: #0E1726;
  --ink-2: #46566B;
  --ink-3: #6E8099;
  --ink-4: #8FA3BA;
  --rule: #E4EBF3;
  --blue: #1466CC;
  --blue-deep: #0B4A99;
  --blue-soft: #E6F1FF;
  --clay: #B3391F;
  --amber: #A8690A;
  --amber-soft: #FDF2E3;
  --shadow: 0 2px 10px rgba(20, 102, 204, 0.06);
  --lift: 0 18px 50px rgba(11, 74, 153, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.display, h1, h2, h3 { font-family: 'Archivo', 'Figtree', system-ui, sans-serif; }
.mono {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--blue); color: #fff; padding: 10px 18px; border-radius: 0 0 12px 0;
  font-weight: 600;
}
.skip:focus { left: 0; top: 0; text-decoration: none; z-index: 20; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
main.wide .wrap { max-width: 1060px; }
.measure { max-width: 66ch; }

/* --- header ------------------------------------------------------------ */
header.site {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
header.site .wrap {
  max-width: 1060px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand .mark { display: block; border-radius: 9px; }
.brand .name {
  font-family: 'Archivo', 'Figtree', system-ui, sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: 2.6px;
  color: var(--blue-deep); padding-left: 2px;
}
nav.site { display: flex; gap: 22px; flex-wrap: wrap; }
/* 44pt is Apple's minimum for a control, and the header links are controls
   even though they look like text. They were 25pt tall, which is fine with a
   mouse and fiddly with a thumb on an iPad. */
nav.site a {
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  display: inline-flex; align-items: center; min-height: 44px;
}
nav.site a:hover { color: var(--blue); text-decoration: none; }
nav.site a[aria-current='page'] { color: var(--blue); }

/* --- hero -------------------------------------------------------------- */
.hero { padding: 64px 0 52px; }
.hero .wrap { max-width: 1060px; }
.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  font-weight: 700; letter-spacing: -1px; line-height: 1.06;
  margin: 0 0 16px; text-wrap: balance;
}
.hero p { font-size: 19px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 42ch; }

.hero-home .wrap {
  display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 40px; align-items: center;
}
.hero-home .hero-art { justify-self: center; }
.hero-home .hero-art img { width: 100%; max-width: 400px; height: auto; display: block; }
.hero:not(.hero-home) { text-align: center; padding-bottom: 8px; }
.hero:not(.hero-home) p { margin: 0 auto; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 600; font-size: 16px;
}
.btn:hover { background: #1d2a3d; color: #fff; text-decoration: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); }
.btn.ghost:hover { background: var(--blue-soft); color: var(--blue-deep); }
.cta-note { font-size: 14px; color: var(--ink-3); margin: 12px 0 0; }

.levels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin: 8px 0 4px;
}
.level {
  background: var(--surface); border-radius: 18px; padding: 18px 20px;
  box-shadow: var(--shadow);
}
.level h3 { font-size: 16px; font-weight: 700; margin: 7px 0 5px; }
.level p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* --- feature rows ------------------------------------------------------ */
.rows { display: flex; flex-direction: column; gap: 96px; margin: 44px 0 12px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.row:nth-child(even) .row-art { order: -1; }
.row h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 700;
  letter-spacing: -0.5px; line-height: 1.15; margin: 12px 0 12px; text-wrap: balance;
}
.row p { color: var(--ink-2); margin: 0 0 14px; font-size: 17px; }
.row-art { display: flex; justify-content: center; }

.pill-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; }
.pill-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15.5px; color: var(--ink-2); line-height: 1.5;
}
.pill-list .tick { color: var(--blue); font-weight: 700; flex-shrink: 0; }

/* --- phone -------------------------------------------------------------- */
.phone {
  width: 292px; flex-shrink: 0;
  background: #0E1726; border-radius: 42px; padding: 11px;
  box-shadow: var(--lift);
}
.screen {
  background: var(--paper); border-radius: 32px; overflow: hidden;
  padding: 22px 18px; min-height: 560px;
  display: flex; flex-direction: column; gap: 13px;
  font-size: 15px; line-height: 1.5;
}
.screen .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
.screen .card {
  background: var(--surface); border-radius: 20px; padding: 15px 16px;
  box-shadow: var(--shadow); margin: 0;
}
.screen .big {
  font-family: 'Archivo', sans-serif; font-size: 30px; font-weight: 700;
  letter-spacing: -0.6px; line-height: 1.05; margin: 5px 0 6px;
}
.screen .say { font-size: 14px; color: #263447; line-height: 1.45; margin: 0 0 7px; }
.screen .stat { font-size: 12.5px; color: var(--ink-4); margin: 0; }
.screen .pace { font-size: 13px; color: var(--blue); margin: 0 0 3px; }

.tempy-row { display: flex; align-items: center; gap: 12px; }
.tempy-row img { width: auto; height: 54px; max-width: 78px; flex-shrink: 0; }
.tempy-row .line { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.dots { display: flex; gap: 3px; margin-top: 5px; }
.dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--sunken); }
.dots i.on { background: var(--blue); }
.dots-label { font-size: 11px; color: var(--ink-3); margin-top: 4px; }

.screen .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600;
  background: var(--blue-soft); color: var(--blue-deep);
}
.chip.amber { background: var(--amber-soft); color: #8A5606; }
.chip i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.bar { height: 7px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: var(--blue); }

.slider { display: flex; gap: 4px; align-items: flex-end; height: 46px; margin: 10px 0 6px; }
.slider i { flex: 1; border-radius: 4px; background: var(--sunken); }
.slider i.on { background: var(--blue); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag {
  font-size: 12px; padding: 5px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink-2);
}
.tag.on { background: var(--blue); border-color: var(--blue); color: #fff; }

.krow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; }
.krow + .krow { border-top: 1px solid var(--rule); }
.krow .k { font-size: 13.5px; color: var(--ink-2); }
.krow .v { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500; color: var(--ink); }

.dashed {
  border: 1px dashed #C3DCF9; border-radius: 16px; padding: 11px 13px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
}
.screen .go {
  height: 44px; border-radius: 999px; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px; margin-top: auto;
}

/* --- not found ---------------------------------------------------------- */
.lost { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.lost p { margin: 0 0 6px; }
.runner { width: min(340px, 80vw); }
.runner img { width: 100%; height: auto; display: block; animation: lope 0.9s ease-in-out infinite; }

/* The single still is the whole picture, so the run has to come from the
   motion: a rise and fall with a slight forward pitch at the top of it. */
@keyframes lope {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-9px) rotate(-1.6deg); }
  50%      { transform: translateY(0) rotate(0deg); }
  75%      { transform: translateY(-5px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .runner img { animation: none; }
}

/* --- content ----------------------------------------------------------- */
main { padding: 56px 0 88px; }
main h2 {
  font-size: 25px; font-weight: 700; letter-spacing: -0.3px;
  margin: 46px 0 12px; text-wrap: balance;
}
main h3 { font-size: 18px; font-weight: 700; margin: 28px 0 8px; }
main p, main li { color: var(--ink-2); }
main strong { color: var(--ink); font-weight: 600; }
main ul { padding-left: 22px; }
main li { margin-bottom: 8px; }

.card {
  background: var(--surface); border-radius: 22px; padding: 26px 28px;
  box-shadow: var(--shadow); margin: 22px 0;
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-3);
}

.note {
  border-left: 3px solid var(--blue); background: var(--blue-soft);
  border-radius: 0 16px 16px 0; padding: 16px 20px; margin: 24px 0;
}
.note p { margin: 0; color: var(--blue-deep); }
.warn { border-left-color: var(--clay); background: #FCEBE6; }
.warn p { color: #8F2D18; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 32px 0; }
/* Four cards want two rows of two rather than a row of four squeezed thin. */
.features.four { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 900px) { .features.four { grid-template-columns: repeat(2, 1fr); } }
.feature { background: var(--surface); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.band .feature { text-align: center; display: flex; flex-direction: column; align-items: center; }
.band .feature p { max-width: 30ch; }
.feature h3 { margin: 12px 0 6px; font-size: 17px; }
.feature p { margin: 0; font-size: 15px; line-height: 1.55; }
.feature img { width: auto; height: 78px; max-width: 100%; display: block; margin: 0 auto 10px; }

/* A tinted disc behind Tempy, for the same reason the app has one.
   
   A Malayan tapir's saddle is white. These cards are --surface, they sit on a
   band that is also --surface, and the artwork was drawn for the app's blue
   ground -- so the middle of the animal disappeared and what was left read as
   two disconnected blue shapes. The injured tapir suffered worst because it is
   sitting down, which puts the largest area of white saddle facing forward.
   
   The disc restores the saddle and reads as deliberate rather than as a fix. */
.band .feature img {
  height: 100px; width: 100px; object-fit: contain;
  background: var(--sunken); border-radius: 999px; padding: 8px;
  margin-bottom: 12px;
}

.band {
  background: var(--surface); border-radius: 28px; padding: 42px 40px;
  box-shadow: var(--shadow); margin: 76px 0 0; text-align: center;
}
.band h2 { margin-top: 0; line-height: 1.2; }
.band p { margin: 0 auto; max-width: 56ch; }
.band .cta { justify-content: center; }

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
tbody tr:last-child td { border-bottom: none; }
.scroller { overflow-x: auto; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); }
.scroller table { margin: 0; }
.scroller th, .scroller td { padding-left: 22px; padding-right: 22px; }

/* --- footer ------------------------------------------------------------ */
footer.site {
  border-top: 1px solid var(--rule); background: var(--surface);
  padding: 34px 0; font-size: 14px; color: var(--ink-3);
}
footer.site .wrap {
  max-width: 1060px;
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: space-between;
}
.foot-brand { display: flex; align-items: center; gap: 11px; }
.foot-brand .mark { width: 30px; height: 30px; border-radius: 7px; }
footer.site nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer.site nav a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 880px) {
  .hero-home .wrap { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .hero-home .hero-copy p { margin-inline: auto; }
  .hero-home .cta { justify-content: center; }
  .hero-home .hero-art { order: -1; }
  .hero-home .hero-art img { max-width: 300px; }
  .row { grid-template-columns: 1fr; gap: 28px; }
  .row:nth-child(even) .row-art { order: 0; }
  .row-art { order: 0; }
  .rows { gap: 64px; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero { padding: 26px 0 32px; }
  header.site { position: static; padding: 6px 0; }
  header.site .wrap { gap: 12px; }
  .wrap { padding: 0 18px; }
  .brand .mark { width: 32px; height: 32px; }
  .brand .name { font-size: 17px; letter-spacing: 2px; }
  nav.site { gap: 16px; }
  nav.site a { font-size: 15px; }
  .band { padding: 30px 20px; }
  .btn { width: 100%; justify-content: center; }
  .cta { gap: 10px; }
}

/* Below the narrowest common phone the mockup has to shrink, or it decides
   the width of the page. */
@media (max-width: 380px) {
  .phone { width: 100%; max-width: 292px; border-radius: 34px; padding: 9px; }
  .screen { border-radius: 26px; padding: 18px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* -- the Ask Tempy mock ---------------------------------------------------- */

.screen .mock-title {
  font-size: 20px; letter-spacing: -0.3px; margin: 4px 0 10px; color: var(--ink);
}

/* Chat bubbles. Asymmetric on purpose: the athlete's own words sit right and
   tinted, the coach's sit left on the card surface, which is the arrangement
   every messaging app has taught people to read without a legend. */
.screen .bubble {
  font-size: 13.5px; line-height: 1.45; border-radius: 16px;
  padding: 9px 12px; margin: 0 0 8px; max-width: 88%;
}
.screen .bubble.me { background: var(--blue-soft); color: var(--blue-deep); margin-left: auto; }
.screen .bubble.them { background: #F2F5F9; color: #263447; }

.screen .card.proposal { border: 1px dashed #BBD4F2; background: transparent; }
.screen .card.proposal .say { font-weight: 600; margin-bottom: 4px; }
/* Its own name, not `.note`: that is a page-level callout component with a
   rule and a tinted ground, and borrowing the class put a blue box inside the
   phone where a caption belonged. */
.screen .card.proposal .mock-note { font-size: 12.5px; color: var(--ink-3); margin: 0 0 9px; }

/* The week bars. Heights are set inline because each one is data. */
.screen .weeks { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-bottom: 10px; }
.screen .weeks span { width: 13px; border-radius: 3px; background: var(--blue); display: block; }

.screen .mock-btn {
  background: var(--blue); color: #fff; text-align: center; font-weight: 600;
  font-size: 13.5px; border-radius: 999px; padding: 9px;
}

/* The price line under a feature. Quieter than body copy: it is a fact people
   look for rather than a claim being made at them. */
.fine { font-size: 14.5px; color: var(--ink-3); line-height: 1.55; }


/* -- the About hero -------------------------------------------------------- */

/* Tempy before the argument. The About page opened straight into prose, which
   is the one page where somebody is deciding whether they like the thing --
   and the tapir is a large part of whether they do. */
.about-hero {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; margin: 0 0 44px;
}
.about-hero img { width: 200px; height: 200px; }
.about-hero-line {
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(20px, 3.2vw, 27px); line-height: 1.3; letter-spacing: -0.3px;
  color: var(--ink); max-width: 22ch; margin: 0; text-wrap: balance;
}

@media (max-width: 600px) {
  .about-hero img { width: 150px; height: 150px; }
}