/* The public home page: cream paper and ink type, one claim on a cream rally plate outlined in
   ink; the dark devices break out of it as proof. Faces, palette (this page's light one), header
   and footer come from public-base.css, which loads first. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 500 16px/1.6 "Chakra Petch", sans-serif; overflow-wrap: anywhere; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
.mono { font-family: "Azeret Mono", monospace; letter-spacing: .04em; }

/* The shared header and footer, sized for this page's larger 16px body. */
.wordmark { line-height: 1; }
.page-links { font-size: 11px; }
.foot { padding-bottom: 40px; font-size: 13px; }

/* The one amber thing on the page; the ink ring sets it off the cream page (3:1 for a control). */
.cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 56px; padding: 15px 26px; border-radius: 32px; background: var(--cta); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; letter-spacing: .01em; }
.cta:hover { background: #ffc256; }
.cta:active { background: #e89c10; }
.cta:focus-visible { outline: 3px solid var(--ghost-text); outline-offset: 4px; }
.cta-arrow { flex: none; font-size: 20px; line-height: 1; }
.requirement { font: 12px/1.6 "Azeret Mono", monospace; color: var(--muted); letter-spacing: .02em; }
.promise { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.5; }
.promise::before { content: ""; flex: none; width: 10px; height: 10px; border: 2px solid var(--ahead); border-radius: 50%; transform: translateY(1px); }
.promise small { display: block; color: var(--muted); font-size: 13px; }
.text-link { text-underline-offset: 4px; }
.text-link:hover { color: var(--ghost-text); }

/* Device frames around the real app screenshots: the bezels stay dark on the paper. */
.phone { position: relative; overflow: hidden; border-radius: 14% / 6.4%; background: #000; box-shadow: 0 0 0 1px #3e3119, 0 0 0 7px #120e07, 0 0 0 8px #3e3119, 0 28px 48px var(--shade); }
.phone > img { width: 100%; }
.watch { position: relative; overflow: hidden; border-radius: 17% / 14%; background: #000; box-shadow: 0 0 0 1px #3e3119, 0 0 0 9px #120e07, 0 0 0 10px #3e3119, 0 22px 40px var(--shade); }
.watch > img { width: 100%; }
.shot-card { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px #2a2113, 0 22px 44px var(--shade); }
.shot-card > img { width: 100%; }

.home main { overflow: hidden; }
.poster { max-width: 1360px; margin: 0 auto; padding: 40px 40px 0; }

/* The plate quotes the app's card header: cream, rivets, livery stripes, a dark bar. An ink
   outline keeps it from dissolving into the cream page. */
.plate, .finale-plate { position: relative; overflow: hidden; background: var(--cream); color: var(--ink); border-radius: 14px; box-shadow: 0 0 0 2px var(--ink); }
.plate { padding: 44px 56px 0; }
.plate::before, .plate::after, .finale-plate::before, .finale-plate::after { content: ""; position: absolute; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #968664; }
.plate::before, .finale-plate::before { left: 12px; }
.plate::after, .finale-plate::after { right: 12px; }
.livery { position: absolute; top: 0; bottom: 0; right: 7%; width: 210px; transform: skewX(-24deg); background: linear-gradient(90deg, var(--ghost) 0 22%, transparent 22% 39%, var(--navy) 39% 61%, transparent 61% 78%, var(--behind) 78% 100%); }
.plate-meta { position: relative; font-size: 13px; text-transform: uppercase; letter-spacing: .22em; font-weight: 700; margin-bottom: 18px; }
.plate h1 { position: relative; max-width: 9.5ch; font-size: clamp(56px, 9.2vw, 132px); font-weight: 700; font-style: italic; line-height: .84; letter-spacing: -.045em; text-transform: uppercase; padding-bottom: 40px; }
.plate-bar { position: relative; margin: 0 -56px; padding: 14px 56px; background: var(--ink); color: var(--cream); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }
.flag { flex: none; width: 76px; height: 22px; background: repeating-conic-gradient(var(--cream) 0% 25%, var(--ink) 0% 50%) 0 0/11px 11px; }

.poster-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding: 40px 0 72px; }
.poster-copy { display: grid; gap: 22px; justify-items: start; max-width: 540px; }
.poster-lead { font-size: 22px; line-height: 1.45; }
.poster-copy .requirement { max-width: 46ch; }
/* Devices climb back up over the plate, past the livery. */
.poster-devices { position: relative; height: 560px; margin-top: -330px; }
.poster-phone { position: absolute; right: 200px; top: 0; width: 270px; transform: rotate(-4deg); }
.poster-watch { position: absolute; right: -10px; top: 220px; width: 250px; transform: rotate(3deg); }

/* Stage bands: one oversized number per band, not a grid of equal cards. */
.stage { max-width: 1360px; margin: 0 auto; padding: 72px 40px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "stat shots" "copy shots"; column-gap: 64px; row-gap: 28px; align-items: start; }
.stage-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "shots stat" "shots copy"; }
.stat { grid-area: stat; font-size: clamp(76px, 10vw, 160px); font-weight: 700; font-style: italic; line-height: .86; letter-spacing: -.045em; }
.stat span { display: block; margin-top: 14px; font: 500 15px/1.4 "Azeret Mono", monospace; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; font-style: normal; }
.stat-ahead { color: var(--ahead); }
.stage-copy { grid-area: copy; display: grid; gap: 14px; max-width: 34em; }
.stage-copy h2 { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 4px; }
.stage-copy p { font-size: 18px; line-height: 1.6; color: var(--text-2); }
.stage-shots { grid-area: shots; margin: 0; }
.fitness-pair { display: grid; grid-template-columns: 1fr; gap: 0; position: relative; max-width: 470px; justify-self: center; width: 100%; }
.fitness-pair .shot-records { width: 74%; justify-self: end; margin-top: 20px; margin-right: -64px; }
.shot-sheet { max-width: 470px; margin: 0 auto; }

/* Race your friends: three rally stages on one rule, read left to right like a road book. The
   steps share rows, so the three captions start on one line whatever the device's height.
   iPhone 17 Pro screenshots are 1206 × 2622 (served at 541 × 1176), the web invitation page is
   390 × 844 (541 × 1171); each frame keeps its image's ratio and only adds the bezel. */
.friends-shot { aspect-ratio: 541 / 1176; }
.friends-web { aspect-ratio: 541 / 1171; }
.friends-watch { aspect-ratio: 422 / 514; }
.friends-shot > img, .friends-web > img, .friends-watch > img { width: 100%; height: 100%; }
.friends { max-width: 1360px; margin: 0 auto; padding: 72px 40px 80px; border-top: 1px solid var(--rule); }
.friends-head { display: grid; gap: 14px; max-width: 40em; margin-bottom: 48px; }
.friends-head h2 { font-size: clamp(44px, 5.4vw, 76px); font-weight: 700; font-style: italic; line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.friends-head p { font-size: 18px; line-height: 1.6; color: var(--text-2); }
.friends-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 48px; }
.friends-step { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.friends-marker { display: flex; align-items: center; gap: 14px; padding: 0 0 26px; border-top: 2px solid var(--text); }
.friends-num { margin-top: -2px; padding: 10px 12px 8px; background: var(--text); color: var(--ground); font-size: 34px; font-weight: 700; font-style: italic; line-height: 1; letter-spacing: -.03em; }
.friends-label { font: 700 14px/1.3 "Azeret Mono", monospace; letter-spacing: .18em; text-transform: uppercase; padding-top: 6px; }
.friends-device { display: flex; align-items: center; }
.friends-device .phone { width: min(100%, 250px); }
.friends-device .watch { width: min(100%, 232px); margin-left: 9px; }
.friends-line { margin-top: 30px; max-width: 30em; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.friends-line strong { color: var(--text); font-weight: 700; }
/* The season band's shots: the invitation page, the group, the standings, each a step lower. */
.friends-trio { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 210px)); gap: 28px; justify-content: center; align-self: start; }
.friends-trio > li:nth-child(2) { margin-top: 40px; }
.friends-trio > li:nth-child(3) { margin-top: 80px; }
.friends-cap { margin-top: 20px; font: 700 12px/1.3 "Azeret Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* The Watch mid-race: eight frames in one row, read left to right like the race itself. Ultra
   49 mm screenshots are 422 × 514; each frame keeps that ratio and only adds the bezel. */
.race { max-width: 1360px; margin: 0 auto; padding: 72px 40px; border-top: 1px solid var(--rule); }
.race-head { display: grid; gap: 14px; max-width: 40em; margin-bottom: 44px; }
.race-head h2 { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.race-head p { font-size: 18px; line-height: 1.6; color: var(--text-2); }
.race .watch { aspect-ratio: 422 / 514; }
.race .watch > img { width: 100%; height: 100%; }
.race-strip { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px; padding: 10px 0 0; }
.race-strip figcaption { padding: 22px 2px 0; }
.race-strip:focus-visible { outline: 3px solid var(--ghost-text); outline-offset: 6px; }
.race-strip-hint { display: none; }
.race-label { display: block; font: 700 12px/1.3 "Azeret Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.race-line { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--text-2); }

/* The Run band: the top of a Run's page, then four of its views on a strip like the Watch's.
   Every frame holds a full iPhone 17 Pro screenshot served at 541 × 1176. */
.stage-run { grid-template-rows: auto 1fr auto; grid-template-areas: "stat shots" "copy shots" "strip strip"; }
.run-phone { aspect-ratio: 541 / 1176; }
.run-phone > img { width: 100%; height: 100%; }
.run-hero { justify-self: center; width: min(100%, 330px); }
.run-strip-wrap { grid-area: strip; min-width: 0; margin-top: 36px; }
.run-strip { grid-template-columns: repeat(4, minmax(0, 240px)); justify-content: space-between; }

/* Also in Ghost Runner: a ruled list, not cards; one plain line each. */
.also { max-width: 1360px; margin: 0 auto; padding: 64px 40px 72px; border-top: 1px solid var(--rule); }
.also h2 { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 32px; }
.also-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 40px; margin: 0; }
.also-list > div { padding: 18px 0 22px; border-top: 1px solid var(--rule-faint); }
.also-list dt { font-size: 17px; font-weight: 700; line-height: 1.3; }
.also-list dd { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

.finale { max-width: 1360px; margin: 0 auto; padding: 24px 40px 72px; }
.finale-plate { padding: 52px 56px 56px; }
.finale-plate h2 { position: relative; max-width: 14ch; font-size: clamp(40px, 6vw, 88px); font-weight: 700; font-style: italic; line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.finale-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 40px; align-items: center; padding-top: 32px; }
.finale-body .requirement { grid-column: 2; }
.finale-body .promise { max-width: 64ch; }

@media (max-width: 1100px) {
  .poster-devices { margin-top: -240px; height: 520px; }
  .poster-phone { right: 180px; width: 230px; }
  .poster-watch { width: 210px; }
  /* The row becomes a strip you swipe; the next frame always shows past the edge. */
  .race-strip { display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 -40px; padding: 12px 40px 20px; scroll-padding: 0 40px; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
  .race-strip > li { flex: 0 0 210px; scroll-snap-align: start; }
  .race-strip:focus-visible { outline-offset: -3px; }
  .race-strip-hint { display: flex; align-items: center; gap: 10px; margin: -24px 0 18px; font: 500 12px/1.4 "Azeret Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .race-strip-hint::after { content: ""; flex: none; width: 34px; height: 1px; background: var(--muted); }
  .run-strip > li { flex-basis: 240px; }
  .also-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .friends-steps { gap: 0 28px; }
  .friends-trio { gap: 22px; }
}
@media (max-width: 700px) {
  .page-links { font-size: 10px; }
  .cta { width: 100%; font-size: 16px; padding: 15px 22px; }
  .poster { padding: 20px 16px 0; }
  .plate { padding: 30px 22px 0; border-radius: 12px; }
  .plate-meta { font-size: 11px; margin-bottom: 14px; }
  .plate h1 { font-size: clamp(50px, 16vw, 72px); padding-bottom: 28px; }
  .livery { width: 110px; right: -6%; }
  .plate-bar { margin: 0 -22px; padding: 12px 22px; font-size: 10px; letter-spacing: .12em; }
  .flag { width: 44px; height: 16px; background-size: 8px 8px; }
  .poster-body { grid-template-columns: 1fr; gap: 20px; padding: 28px 8px 48px; }
  .poster-copy { gap: 18px; }
  .poster-devices { height: 470px; margin-top: 12px; }
  .poster-phone { right: auto; left: 4%; top: 16px; width: 52%; }
  .poster-watch { right: 2%; top: 150px; width: 48%; }
  .poster-lead { font-size: 19px; }
  .stage, .stage-flip { grid-template-columns: 1fr; grid-template-areas: "stat" "copy" "shots"; padding: 52px 24px; row-gap: 22px; }
  .stage-run { grid-template-areas: "stat" "copy" "shots" "strip"; }
  .run-hero { width: 74%; }
  .run-strip-wrap { margin-top: 30px; }
  .stat { font-size: clamp(64px, 20vw, 88px); }
  .stat span { font-size: 13px; }
  .stage-copy h2 { font-size: 28px; }
  .stage-copy p { font-size: 17px; }
  .race { padding: 52px 24px; }
  .race-head { margin-bottom: 36px; }
  .race-head h2 { font-size: 28px; }
  .race-head p { font-size: 17px; }
  .race-strip { margin: 0 -24px; padding: 12px 24px 20px; scroll-padding: 0 24px; gap: 18px; }
  .race-strip > li { flex-basis: min(58vw, 230px); }
  .fitness-pair .shot-records { margin-right: 0; margin-top: 16px; }
  .friends { padding: 52px 24px 56px; }
  .friends-head { margin-bottom: 32px; }
  .friends-head h2 { font-size: 44px; }
  .friends-head p { font-size: 17px; }
  .friends-steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 44px; }
  .friends-step { grid-row: auto; grid-template-rows: none; }
  .friends-marker { padding-bottom: 20px; }
  .friends-num { font-size: 28px; }
  .friends-device { justify-content: center; }
  .friends-device .phone { width: 66%; }
  .friends-device .watch { width: 62%; margin: 10px 0 0; }
  .friends-line { margin-top: 22px; }
  .friends-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .friends-trio > li:nth-child(2) { margin-top: 24px; }
  .friends-trio > li:nth-child(3) { margin-top: 48px; }
  .friends-cap { margin-top: 14px; font-size: 10px; letter-spacing: .1em; }
  .also { padding: 48px 24px 56px; }
  .also h2 { font-size: 28px; margin-bottom: 20px; }
  .also-list { grid-template-columns: minmax(0, 1fr); }
  .also-list > div { padding: 12px 0 14px; }
  .also-list dd { margin-top: 4px; }
  .finale { padding: 8px 16px 48px; }
  .finale-plate { padding: 36px 22px 40px; }
  .finale-plate h2 { font-size: 40px; }
  .finale-body { grid-template-columns: 1fr; padding: 24px 8px 0; }
  .finale-body .requirement { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}