/* Gait Capture website. The category standard, done well: the app's own light canvas, the app
   icon's deep forest for two chapters, real app screens large enough to read, and one action, an
   email. Every text pairing meets WCAG AA (figures beside each colour). */
:root {
  color-scheme: light;

  --canvas: #f3f4f0;        /* the app's canvas, also the ground of every cropped app card */
  --surface: #ffffff;
  --sunk: #eceee8;          /* the quiet chapter */
  --ink: #11150f;           /* 16.7:1 on canvas */
  --ink-2: #454b41;         /* 8.1:1 on canvas, 7.7:1 on sunk */
  --ink-3: #5c6356;         /* 5.6:1 on canvas, 5.3:1 on sunk */
  --line: #dfe3da;

  --forest: #2c4f26;        /* the app icon's ground */
  --forest-ink: #f4f6ed;    /* 8.5:1 on forest */
  --forest-ink-2: #cbd6c1;  /* 6.2:1 on forest */
  --lime: #96c753;          /* the icon's sensor dots; never text */

  --action: #3b631a;        /* white text 7.0:1; as a link 6.4:1 on canvas */
  --action-strong: #2e4e13; /* white text 9.5:1 */
  --on-action: #ffffff;
  --select: #d8e6c4;

  /* The app's foot colours (#299e66 left, #336bd9 right), darkened for text: 4.8:1 and 5.7:1 on canvas. */
  --left: #1f7a4f;
  --right: #2a5bbf;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  /* The app sets its numbers in SF Pro Rounded. */
  --font-numbers: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --page: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --chapter: clamp(88px, 11vw, 160px);
  --tap: 44px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-contrast: more) {
  :root { --ink-2: #11150f; --ink-3: #454b41; --line: #9aa192; --forest-ink-2: #f4f6ed; }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

::selection { background: var(--select); color: var(--ink); }

a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--action-strong); }

:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
/* Anchored sections land below the sticky header rather than under it. */
[id] { scroll-margin-top: 76px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 12px; z-index: 30; padding: 12px 16px; background: var(--action); color: var(--on-action); border-radius: 10px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* The side margins never fall inside a notch or the Dynamic Island in landscape. */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.narrow { max-width: calc(780px + 2 * var(--gutter)); }

/* Type: SF Pro's own spacing, semibold headlines, the way Apple sets its product pages. */
.display, .display-2, .h2, .h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
.display { font-size: clamp(3rem, 1rem + 6.5vw, 7rem); line-height: 1.02; letter-spacing: -.015em; }
.display-2 { font-size: clamp(2.375rem, 1.6rem + 2.9vw, 4.25rem); line-height: 1.06; letter-spacing: -.01em; }
.h2 { font-size: clamp(2rem, 1.45rem + 2.1vw, 3.25rem); line-height: 1.1; letter-spacing: -.005em; }
.h3 { font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); line-height: 1.18; letter-spacing: 0; }
.lede { font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.body { color: var(--ink-2); }
.small { font-size: .875rem; color: var(--ink-3); }
p { text-wrap: pretty; }

/* Buttons --------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; font: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out); }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-strong); color: var(--on-action); }
.btn-light { background: var(--forest-ink); color: var(--forest); }
.btn-light:hover { background: var(--surface); color: var(--forest); }
.btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px #11150f47; }
.btn-secondary:hover { background: var(--surface); color: var(--ink); }
.btn-small { min-height: var(--tap); padding: 0 20px; font-size: .9375rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Header ---------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--canvas); box-shadow: 0 1px 0 #11150f14; }
.header-bar { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--ink); font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand svg { width: 26px; height: 26px; color: var(--forest); flex: none; }
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 12px; color: var(--ink-2); font-size: .9375rem; text-decoration: none; border-radius: 8px; }
.site-nav a:hover { color: var(--ink); }
.header-bar > .btn { flex: none; }

@media (max-width: 760px) {
  .site-nav { display: none; }
  .header-bar { justify-content: space-between; min-height: 58px; }
}

/* Hero ------------------------------------------------------------------ */
/* The phone sinks into the chapter below. Width and sink come from one value, so the cut falls in
   the same place on the screen (about 85% of the way down) at every width. */
.hero { overflow: hidden; padding-top: clamp(40px, 7vw, 104px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-copy { padding-bottom: clamp(48px, 8vw, 120px); }
.hero-copy .lede { margin-top: 28px; max-width: 30ch; }
.hero-device { align-self: end; display: grid; justify-items: center; }
.hero-device .phone { --w: min(380px, 100%); max-width: var(--w); margin-bottom: calc(var(--w) * -.34); }
.hero-art { width: min(320px, 70%); padding-bottom: 96px; }
.hero-art .footprints .print { fill: var(--forest); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero-copy { padding-bottom: 24px; }
  .hero-device .phone { --w: min(78vw, 340px); }
}

/* Phones ---------------------------------------------------------------- */
/* Whole screens in a thin graphite frame with a hairline edge. Corners follow the iPhone's
   screen (about 13.7% of the width across and 6.3% of the height down) at any size. */
.phone { margin: 0; width: 100%; max-width: 340px; }
.phone-frame { position: relative; padding: 2%; background: #2b2e2a; border-radius: 15.2% / 6.85%; box-shadow: inset 0 0 0 1px #4a4f48, 0 36px 72px -28px #11150f59, 0 16px 32px -20px #11150f40; }
.phone-frame::after { content: ""; position: absolute; top: 2.1%; left: 50%; width: 31%; height: 4.15%; transform: translateX(-50%); background: #0b0c0b; border-radius: 999px; }
.phone img { display: block; width: 100%; height: auto; border-radius: 13.7% / 6.3%; background: var(--canvas); }

/* Cards cropped from the app, on the page's canvas (the app's own). A crop that ends inside a
   card fades into the page, as the app would scroll on. */
.app-card { margin: 0; width: 100%; max-width: 560px; }
.app-card img { display: block; width: 100%; height: auto; }
/* A crop that ends inside a card ends in blank space under its last line; only that strip fades. */
.app-card-fade img { -webkit-mask-image: linear-gradient(to bottom, #000 97%, transparent); mask-image: linear-gradient(to bottom, #000 97%, transparent); }

/* Chapters -------------------------------------------------------------- */
.chapter { padding-block: var(--chapter); }
.chapter-quiet { background: var(--sunk); }
.chapter-title { max-width: 16ch; margin-bottom: clamp(48px, 7vw, 96px); }

.chapter-forest { background: var(--forest); color: var(--forest-ink); }
.chapter-forest a:not(.btn) { color: var(--forest-ink); }
.chapter-forest :focus-visible { outline-color: var(--lime); }

/* A sensor on each shoe (#how): the app icon's footprints, large. */
.how-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 8vw, 120px); align-items: center; }
.how-art { display: grid; justify-items: center; }
.footprints { width: min(360px, 100%); height: auto; overflow: visible; }
.footprints .print { fill: var(--forest-ink); }
.footprints .sensor { fill: var(--lime); }
.how-copy > * + * { margin-top: 20px; }
.how-copy p { max-width: 34ch; font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem); line-height: 1.45; color: var(--forest-ink-2); }

/* The one orchestrated moment: as the chapter scrolls in, the left print steps down, then the right.
   Without scroll-driven animation, or with reduced motion, both prints simply stay in place. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .how-art .print { animation: step-in linear both; animation-timeline: view(); animation-range: entry 15% cover 38%; animation-timing-function: var(--ease-out); }
    .how-art .print-right { animation-range: entry 32% cover 52%; }
  }
}
@keyframes step-in {
  from { opacity: 0; transform: translateY(56px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .footprints { width: min(220px, 60vw); }
  .how-art { justify-items: start; }
}

/* What you see after a walk --------------------------------------------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.feature + .feature { margin-top: clamp(72px, 10vw, 140px); }
.feature > figure { justify-self: center; }
.feature-copy > * + * { margin-top: 16px; }
.feature-copy p { max-width: 34ch; font-size: 1.1875rem; color: var(--ink-2); }
/* The left-right phone sits on the left, so the page alternates after the hero's phone on the right. */
.feature-left-right { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.feature-left-right .feature-copy { order: 2; }
.feature-text-only { grid-template-columns: minmax(0, 1fr); }

/* The hero shows what stood out; here one of its sentences is quoted large, with its two numbers in
   the app's number face and foot colours. */
.readout { max-width: 21ch; font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.2; font-weight: 600; color: var(--ink); text-wrap: balance; }
.num { font-family: var(--font-numbers); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-left { color: var(--left); }
.num-right { color: var(--right); }

/* The last two sit side by side: words above, the app's card below. */
.feature-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px); margin-top: clamp(72px, 10vw, 140px); align-items: start; }
.feature-pair .feature { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.feature-pair .feature + .feature { margin-top: 0; }
.feature-pair .feature > figure { justify-self: start; }
.feature-pair .h3 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.feature-pair .feature-copy p { font-size: 1.0625rem; }

@media (max-width: 900px) {
  .feature, .feature-left-right { grid-template-columns: minmax(0, 1fr); }
  .feature-left-right .feature-copy { order: 0; }
  .feature-pair { grid-template-columns: minmax(0, 1fr); }
  .feature .phone { max-width: min(78vw, 340px); }
  .feature > figure { justify-self: start; }
}

/* Every way of walking counts ------------------------------------------- */
.everyone { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.everyone .display-2 { max-width: 11ch; }
.everyone-body > * + * { margin-top: 24px; }
.everyone-body .lede { max-width: 36ch; }
.everyone-body p:last-child { max-width: 40ch; color: var(--ink-2); }
.aids { --sep: 1.1em; display: flex; flex-wrap: wrap; row-gap: 6px; max-width: calc(34ch + var(--sep)); font-family: var(--font-display); font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); line-height: 1.3; font-weight: 600; color: var(--ink); }
.aids li { white-space: nowrap; }
/* Each name carries its separator in front. The list sits one separator to the left and that
   strip is clipped, so the separator that opens each line is hidden and none ends a line. */
.aids { margin-left: calc(-1 * var(--sep)); clip-path: inset(0 0 0 var(--sep)); }
.aids li::before { content: "·"; content: "·" / ""; display: inline-block; width: var(--sep); text-align: center; color: var(--ink-3); font-weight: 400; }

@media (max-width: 900px) {
  .everyone { grid-template-columns: minmax(0, 1fr); }
}

/* The founder's note ---------------------------------------------------- */
.note blockquote p { font-family: var(--font-display); font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.28; font-weight: 500; color: var(--ink); }
.note figcaption { margin-top: 24px; font-size: 1rem; color: var(--ink-3); }

/* Privacy and questions: heading on the left, text on the right --------- */
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split .h2 { max-width: 14ch; }
.split-body > * + * { margin-top: 16px; }
.split-body p { max-width: 54ch; color: var(--ink-2); font-size: 1.1875rem; }
.text-link { font-weight: 600; }
/* Founder, privacy and questions share the canvas, so one chapter's space separates them. */
#privacy, #faq { padding-top: 0; }

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--tap); padding: 22px 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 16px; height: 16px; background: linear-gradient(var(--ink) 0 0) center / 16px 2px no-repeat, linear-gradient(var(--ink) 0 0) center / 2px 16px no-repeat; transition: transform .35s var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline-offset: 4px; }
.faq-q { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.faq-a { padding: 0 40px 26px 0; }
.faq-a p { max-width: 60ch; color: var(--ink-2); }
.faq-a p + p { margin-top: 12px; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* The close ------------------------------------------------------------- */
.close { display: grid; justify-items: center; gap: 36px; text-align: center; }
.close .display-2 { max-width: 14ch; }
/* The address in plain text, for anyone whose browser has no email app set up. */
.close-note { max-width: 40ch; margin-top: -12px; font-size: .9375rem; line-height: 1.5; color: var(--forest-ink-2); }
.close-note a { font-weight: 600; }
/* Cream to white would barely show on the forest, so hover thickens the underline instead. */
.close-note a:hover { text-decoration-thickness: 2px; }

/* Footer ---------------------------------------------------------------- */
.site-footer { padding-block: 56px 48px; padding-bottom: max(48px, env(safe-area-inset-bottom)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); gap: 32px 56px; align-items: start; }
.footer-line { margin-top: 6px; font-size: .9375rem; color: var(--ink-3); }
.footer-nav { display: grid; gap: 2px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink-2); font-size: .9375rem; text-decoration: none; }
.footer-nav a:hover, .footer-nav a[aria-current="page"] { color: var(--ink); }
/* The wellness statement, word for word, in every footer. */
.statement { max-width: 44ch; font-size: .875rem; line-height: 1.5; color: var(--ink-3); }
.footer-fine p + p { margin-top: 10px; font-size: .875rem; color: var(--ink-3); }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-nav a { min-height: var(--tap); }
}

/* Error pages ----------------------------------------------------------- */
.error-page { padding-block: clamp(48px, 8vw, 112px) var(--chapter); }
.error-page .narrow > * + * { margin-top: 24px; }

/* Privacy policy -------------------------------------------------------- */
.legal { padding-block: clamp(48px, 8vw, 104px) 0; }
/* About 75 characters a line: ch is wide in SF Pro, so 56ch is roughly 630px at 18px. */
.prose { max-width: calc(56ch + 2 * var(--gutter)); }
.prose > * + * { margin-top: 14px; }
.prose h2 { margin-top: 40px; font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { display: grid; gap: 8px; padding-left: 22px; list-style: disc; }
.prose .display-2 { margin-bottom: 8px; }
.legal + .chapter { padding-block: 56px var(--chapter); background: transparent; }

/* Small phones ---------------------------------------------------------- */
@media (max-width: 480px) {
  body { font-size: 1.0625rem; }
  .error-page .actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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