/* LiftTracker home page — Sequel-style layout, LiftTracker colours.
   Deliberately does NOT share style.css: that file still serves
   privacy/ and support/, which the shipped app links to
   (LegalLinks.swift). Changing one must not restyle the other.

   Palette is lifted verbatim from style.css so the two agree:
   dark-mode first-class, green accent, no third hue. */

:root {
  color-scheme: light dark;

  /* --- live-site tokens, unchanged --- */
  --bg: #ffffff;
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --accent: #34c759;
  --card: #ffffff;          /* deviates from the live site's #f5f5f7 — see note below */
  --rule: rgba(0, 0, 0, 0.08);

  /* --- v2 additions --- */
  /* The live site puts #f5f5f7 cards on a white page. This layout inverts that:
     a grey page with raised cards. So in light mode the two swap roles, or the
     cards disappear into the background. Dark mode needs no such change. */
  --page: #f2f2f5;
  --ph: #e4e4ea;            /* chart panel fill */
  --glow-a: rgba(52, 199, 89, 0.20);
  --glow-b: rgba(52, 199, 89, 0.10);
  --glow-c: rgba(120, 210, 255, 0.12);
  --hero-base: linear-gradient(#fff 0%, #fff 30%, #f7fbf8 62%, var(--page) 100%);

  --radius-card: 26px;
  --radius-media: 16px;
  --maxw: 1100px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0d10;
    --fg: #f4f5f7;
    --muted: #9aa0a8;
    --accent: #30d158;
    --card: #17181c;
    --rule: rgba(255, 255, 255, 0.1);

    --page: #0c0d10;
    --ph: #212329;
    --glow-a: rgba(48, 209, 88, 0.22);
    --glow-b: rgba(48, 209, 88, 0.12);
    --glow-c: rgba(70, 160, 255, 0.10);
    --hero-base: linear-gradient(#0c0d10 0%, #0d1113 34%, #0c1011 70%, var(--page) 100%);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--page);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 4.5rem 0 3.5rem;
  background:
    radial-gradient(52% 42% at 22% 74%, var(--glow-b) 0%, transparent 64%),
    radial-gradient(46% 40% at 50% 82%, var(--glow-a) 0%, transparent 64%),
    radial-gradient(52% 44% at 80% 72%, var(--glow-c) 0%, transparent 64%),
    var(--hero-base);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(transparent, var(--page));
  pointer-events: none;
}

.app-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.6rem;
  border-radius: 22px;
  border: 1px solid var(--rule);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: block;
}

.hero h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
/* Sits below the phone group, which puts it inside the 140px `.hero::after`
   fade. That pseudo-element is absolutely positioned and so paints over in-flow
   content — without its own stacking position the badge would wear a
   page-coloured wash. Apple's terms rule out altering the badge's appearance,
   so the badge lifts above the fade rather than the fade being softened. */
.hero .store { position: relative; z-index: 1; margin-top: 1.8rem; display: flex; flex-direction: column; align-items: center; }

/* App Store badge — Apple's supplied artwork, referenced as a file rather than
   inlined so no stylesheet rule can recolour it. Apple prohibits modifying the
   badge, and the black lockup carries its own white outline, so it needs nothing
   from us to hold up on the dark theme. Size only — no hover transform either,
   since Apple's terms rule out animating the badge. */
.badge-link { display: inline-block; }
/* Stands in for the badge's link until the app is approved — see index.html. */
.cta-note { margin-top: 0.7rem; color: var(--muted); font-size: 0.95rem; }
.appstore { height: 52px; width: auto; display: block; }

/* Phone group — three identical upright devices on one baseline, centre in front */
.fan {
  position: relative;
  margin: 2.5rem auto 0;
  max-width: 760px;
  height: 540px;
}
/* Real screenshots carry Apple's bezel and a transparent surround, so they need
   no drawn frame — and the shadow must follow the alpha silhouette, not the
   element box, or a square shadow shows behind the rounded corners.
   Same width and a shared `bottom` put all three on one plane; overlap and
   z-order are the only things marking the centre as forward. Horizontal offsets
   are from the fan's centre line, so the group stays centred at any width. */
.fan .fan-shot {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 236px;
  display: block;
  height: auto;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.42));
}
.fan .left   { z-index: 1; transform: translateX(calc(-50% - 216px)); }
.fan .right  { z-index: 1; transform: translateX(calc(-50% + 216px)); }
.fan .center { z-index: 2; transform: translateX(-50%); }

@media (max-width: 700px) {
  .fan { height: 360px; }
  .fan .fan-shot { width: 140px; }
  .fan .left  { transform: translateX(calc(-50% - 118px)); }
  .fan .right { transform: translateX(calc(-50% + 118px)); }
}

/* ---------- Section headers ---------- */

.section { padding-block: 2.5rem; }
.section-head { max-width: 38rem; margin-bottom: 1.9rem; }
.section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ---------- Bento grid ---------- */

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.tile {
  --tile-pad: 2rem;
  --tile-pad-b: 1.25rem;   /* trimmed: the media sits closer to the card edge */
  position: relative;      /* anchor for a bleed shot — see .media-bleed */
  grid-column: 1 / -1;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--tile-pad) var(--tile-pad) var(--tile-pad-b);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tile h3 { font-size: clamp(1.35rem, 1.9vw, 1.6rem); font-weight: 650; letter-spacing: -0.015em; }
.tile p { margin-top: 0.55rem; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.7; max-width: 40ch; }
/* The media box absorbs whatever height the grid row gains from a taller
   neighbour, so a tile with less copy does not end in a band of dead space. */
.tile .media { margin-top: 1.6rem; flex: 1 0 auto; }

/* The screenshot tile is a fixed width, so the phone inside it never shrinks as
   the page margins grow; the chart tile takes whatever width is left. 458px is
   what the old 5-of-12 split resolved to, so that tile is unchanged. */
@media (min-width: 860px) {
  .bento { grid-template-columns: 458px minmax(0, 1fr); }
  .span-5 { grid-column: 1; }
  .span-7 { grid-column: 2; }
}

/* A phone that bleeds off the bottom of its tile. The 04-06 source shots already
   end part-way down the device, so the card's bottom edge is the cut and nothing
   needs clipping.
   The shot anchors to the TILE, not to this box — an absolutely positioned box's
   containing block is the padding box, so `bottom: 0` lands exactly on the card
   edge, and it stays welded there even when a longer-text neighbour stretches
   the tile taller. This box's height only reserves the space in flow. */
.media-bleed { min-height: 400px; }
.media-bleed .tile-shot {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 236px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.34));
}

/* Sparkline chart — the illustrated version from the live site, themed */
.chart {
  height: 100%;
  min-height: 400px;
  background: var(--ph);
  border-radius: var(--radius-media);
  padding: 1.5rem;
  display: grid;
  place-items: center;
}
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Stacked on a phone there is no tall neighbour to match, so the 400px floor
   just leaves the sparkline floating in grey. */
@media (max-width: 859px) {
  .chart { min-height: 240px; }
}
/* ---------- "And so much more" ---------- */

.more { padding-block: 3rem 2.5rem; text-align: center; }
.more h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 2.25rem;
}
.more-grid {
  display: grid;
  gap: 1.6rem 3rem;
  text-align: left;
}
@media (min-width: 720px) {
  .more-grid { grid-template-columns: 1fr 1fr; }
}
.more-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.35rem;
}
.more-item .glyph {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--ph);
  border: 1px solid var(--rule);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.more-item .glyph.gold { color: #ffd60a; }
.more-item .glyph svg { width: 22px; height: 22px; display: block; }
/* PR / 1RM / RPE are set as type, the way the app draws them */
.more-item .lettering {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1;
}
.more-item .lettering.three { font-size: 11.5px; letter-spacing: 0.01em; }
.more-item h3 { font-size: 1.22rem; font-weight: 650; }
.more-item .soon {
  margin-left: 0.55rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: middle;
}
.more-item p { margin-top: 0.35rem; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }

/* ---------- Closing CTA ---------- */

.closer { text-align: center; padding: 2rem 0 3rem; display: flex; flex-direction: column; align-items: center; }

/* ---------- Footer ---------- */

footer {
  padding: 2.5rem 0 3rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}
footer .links { display: flex; justify-content: center; gap: 1.1rem; margin-bottom: 0.7rem; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }