/* Back2Fit apps site — marketing + legal.

   Palette is the mobile app's warm-studio theme, taken from mobile/src/theme.ts, so that the
   page and the screenshots on it read as one thing. It deliberately does NOT follow
   back2fitwellness.com's black ground and #ff3855 crimson: the two sites link to each other,
   but this one is about the app, and the app is cream.

   Two values are darkened from the app rather than copied, because the web uses them at sizes
   and weights the app never does:

     --muted       Theme.muted #9a8e80 is 2.85:1 on the cream ground — it fails AA, and it
                   carries every section label, caption and footer link. #7a6c5e is 4.5:1.
     --accent-ink  Theme.accent is 3.5:1 on cream: fine as a fill, an icon or a rule (the
                   non-text bar is 3:1), too weak for link text. Same hue at 4.9:1.

   So: --accent paints, --accent-ink is read. Committed light design — the app has no dark mode
   either — so there is no prefers-color-scheme variant and every colour is painted explicitly.
   Contrast on the ground: ink 13.5:1, body 5.0:1, muted 4.5:1, accent-ink 4.9:1. */

:root {
  --ground:      #f6f1ea;   /* Theme.phoneBg — the app's screen background */
  --card:        #ffffff;   /* Theme.card                                  */
  --surface:     #ffffff;
  --surface-alt: #faf6f0;
  --line:        #e6dbcc;   /* a shade deeper than cardBorder so borders read on cream */
  --line-soft:   #efe6d9;   /* Theme.cardBorder                            */
  --ink:         #2a2520;   /* Theme.ink                                   */
  --body:        #6f665c;   /* Theme.body                                  */
  --muted:       #7a6c5e;   /* darkened from Theme.muted — see above       */
  --accent:      #bc6b4a;   /* Theme.accent, terracotta. Fills, icons, rules */
  --accent-ink:  #a2542f;   /* the same hue, readable as text              */
  --accent-soft: #f7ece5;   /* Theme.accentSoft                            */
  --shadow: 0 1px 2px rgba(42, 37, 32, .06), 0 18px 40px -26px rgba(42, 37, 32, .28);
}

* { box-sizing: border-box; }

/* scroll-padding-top keeps the "Features" jump from landing under the sticky header, which
   the header itself has no way to reserve room for. Sized to it, plus a little air. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 730px; }

h1, h2, h3 {
  color: var(--ink); margin: 0; text-wrap: balance;
  font-family: 'Barlow Semi Condensed', 'Roboto Condensed', ui-sans-serif, sans-serif;
  font-weight: 500;
}
h1 { font-size: clamp(44px, 8vw, 76px); line-height: 1.02; letter-spacing: -.005em; }
h2 { font-size: clamp(30px, 4.5vw, 42px); line-height: 1.1; }
h3 { font-size: 21px; line-height: 1.25; }
p { margin: 0; }
strong { color: var(--ink); font-weight: 500; }

a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 3px; }

.eyebrow {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 20px; font-weight: 500; color: var(--accent-ink); letter-spacing: .01em;
}
.label {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}

/* The squiggle under the brand site's hero heading, reused here as a section rule. Theirs
   is yellow, which is 2:1 on cream and reads as a smudge, so it takes the terracotta. */
.squiggle { display: block; width: 62px; height: 12px; color: var(--accent); }
.squiggle svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* ---- site chrome ---- */
.site-head { border-bottom: 1px solid var(--line); background: var(--ground); position: sticky; top: 0; z-index: 10; }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 18px; padding-bottom: 18px;
}
.brand {
  display: inline-flex; align-items: baseline; gap: 2px; color: var(--ink); text-decoration: none;
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; font-size: 25px; letter-spacing: .01em;
}
.brand em { font-style: normal; color: var(--accent-ink); }
.site-nav { display: flex; gap: 26px; font-size: 15px; }
.site-nav a { color: var(--body); text-decoration: none; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

/* ---- hero ---- */
/* padding-block, not the shorthand: .hero and .wrap are both single-class selectors, so a
   `padding: 92px 0 72px` here would win the cascade and wipe out .wrap's side padding,
   pinning the hero to the viewport edge. */
/* Wider than the .wrap default (1060) so the collage has room to be the hero image rather than
   a thumbnail beside the text. Overrides .wrap's max-width deliberately — same-specificity, and
   this rule comes later. The copy column is fixed so every extra pixel of viewport goes to the
   image instead of stretching the measure. */
.hero {
  max-width: 1280px;
  padding-block: 76px 60px;
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 48px; align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.hero p.lede { font-size: 18px; max-width: 46ch; }
/* The collage is a transparent PNG carrying its own rims and shadows, so it needs no frame —
   only room. It bleeds slightly past the column on wide screens, which keeps it from looking
   politely boxed. */
.hero-shot { min-width: 0; }
.hero-shot img { display: block; width: 100%; height: auto; max-width: 780px; margin-inline: auto; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding-block: 56px 48px; }
  .hero-shot { order: 2; }
  .hero-shot img { max-width: 560px; }
}

/* ---- store buttons ---- */
.stores { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px 13px 18px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 2px rgba(42, 37, 32, .05);
  transition: border-color .14s ease, background .14s ease;
}
.store:hover { border-color: var(--accent); background: var(--surface-alt); }
.store svg { width: 23px; height: 23px; flex-shrink: 0; fill: currentColor; }
.store .lines { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.store .small { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.store .big { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 19px; font-weight: 500; }
/* Not published yet: same shape, visibly inert — never a dead link to a store 404.
   Inert is painted, not faded. A blanket opacity here dropped "Coming soon" to 2.05:1 and the
   store name to 3.19:1 against the page, which is illegible for the first thing on it; muting
   the colours instead keeps both above 4.5:1 while still reading as not-yet-a-button. */
.store.soon { cursor: default; background: var(--surface-alt); box-shadow: none; color: var(--body); }
.store.soon .small { color: var(--muted); }
.store.soon svg { color: var(--muted); }
.store.soon:hover { border-color: var(--line); background: var(--surface-alt); }

/* ---- sections ---- */
section { padding: 64px 0; border-top: 1px solid var(--line-soft); }
section > .wrap { display: flex; flex-direction: column; gap: 32px; }
.sec-head { display: flex; flex-direction: column; gap: 10px; max-width: 58ch; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.feature { background: var(--card); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; }
.feature .ico { width: 26px; height: 26px; color: var(--accent); margin-bottom: 6px; }
.feature .ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feature p { font-size: 15px; }

/* ---- screenshots ---- */
.shots { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.shot { flex: 0 0 auto; width: 236px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.shot .frame {
  border-radius: 26px; border: 1px solid var(--line); background: var(--surface);
  padding: 8px; overflow: hidden; box-shadow: var(--shadow);
}
.shot img { display: block; width: 100%; border-radius: 19px; }
.shot figcaption { font-size: 13px; color: var(--muted); text-align: center; letter-spacing: .04em; text-transform: uppercase; }
.shots-empty {
  border: 1px dashed var(--line); border-radius: 8px; padding: 30px;
  text-align: center; font-size: 14px; color: var(--muted); background: var(--surface);
}
.shots-empty code { color: var(--body); }

/* ---- prose (privacy / support) ---- */
.prose { padding-block: 60px 96px; display: flex; flex-direction: column; gap: 26px; }
.prose h2 { font-size: 29px; margin-top: 18px; }
.prose h3 { font-size: 19px; margin-top: 8px; }
.prose p, .prose li { font-size: 16px; }
.prose ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose li::marker { color: var(--accent-ink); }
.prose .updated { font-size: 14px; color: var(--muted); }
.callout {
  background: var(--accent-soft); border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: 4px; padding: 18px 20px; font-size: 15.5px;
}
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 440px; }
.prose th, .prose td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.prose th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.prose td strong { color: var(--ink); }
.scroll-x { overflow-x: auto; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: 4px;
  padding: .08em .34em; color: var(--ink); overflow-wrap: anywhere;
}

/* ---- footer ---- */
.site-foot { border-top: 1px solid var(--line); padding: 36px 0 60px; font-size: 14px; color: var(--muted); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: baseline; justify-content: space-between; }
.site-foot nav { display: flex; gap: 24px; flex-wrap: wrap; }
.site-foot a { color: var(--body); text-decoration: none; }
.site-foot a:hover { color: var(--accent-ink); text-decoration: underline; }

@media (max-width: 560px) {
  .hero { padding-block: 60px 48px; }
  section { padding: 48px 0; }
  .site-nav { gap: 16px; font-size: 14px; }
  .brand { font-size: 22px; }
}

/* Brand and nav side by side need a 499px viewport at the full type scale, and still 439px at
   the reduced one above — so on a phone they always collided, and the nav wrapped mid-list
   ("Main / site"). Below that they stack instead: brand on one row, the whole nav on the next.
   The nav is 254px wide at this scale, which clears the 272px a 320px phone leaves after the
   wrap padding, so it stays on one line all the way down. It may still wrap if a link is ever
   added — hence the row-gap, so that degrades into two tidy rows rather than an overflow. */
@media (max-width: 460px) {
  .site-head .wrap {
    flex-direction: column; align-items: flex-start;
    gap: 7px; padding-top: 12px; padding-bottom: 12px;
  }
  .site-nav { flex-wrap: wrap; row-gap: 6px; }
  /* Two rows make the sticky header ~93px, so the anchor offset grows with it. */
  html { scroll-padding-top: 112px; }
}