/* Coachly brand system for the marketing site.
   ------------------------------------------------------------------
   This is the SNKRS language the App Store screenshots (v13), the
   Instagram grid (v2) and the UGC endcard all share: a flat near-white
   ground, black condensed caps at scale, one red rule, and photography
   that carries the frame rather than sitting in a rounded card.

   It replaces the earlier light-editorial look (bone #f5f1ea, Fraunces
   serif on ink). That system was approved in July and then read as
   "too feminine" when the same treatment went out on social, which is
   why render-grid-v2.mjs dropped it. The site was the last surface
   still on it.

   Every value below is taken from the renderers so a page and a tile
   put side by side are the same brand:
     scripts/render-grid-v2.mjs, scripts/build-carousels.mjs,
     scripts/add-ugc-endcard.mjs

   SCOPE: this file owns the palette, the base reset and the type
   primitives — and NOTHING that positions anything. Every page links it
   before its own <style>, and the sub-pages each carry their own nav,
   hero and footer layout from when they were built. A bare `header`,
   `.nav` or `section` rule in here would land on top of those and
   squash them, so page chrome lives in the page.                       */

:root{
  --paper:#f2f1ef;      /* the ground, everywhere */
  --paper-2:#eae8e4;    /* a half-step down, for inset panels */
  --ink:#0d0c0f;        /* headlines, and the dark bands */
  --ink-2:#2c2a30;
  --grey:#6f6a72;       /* body copy and support text */
  --red:#e01824;        /* the accent, the rule, the ticks */
  --line:#dedad3;
  --line-strong:#c9c4bc;
  --maxw:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:Saira,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---- type ------------------------------------------------------- */

/* The display face. Condensed 800 caps, near-solid leading — the same
   setting as headType() in render-grid-v2.mjs. Square corners and no
   letterspacing tricks; the weight is doing the work. */
.display,
.display h1,.display h2{
  font-family:'Saira Condensed',"Arial Narrow",sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.005em;
}

.eyebrow{
  font-family:'Saira Semi Condensed',sans-serif;
  font-weight:700;font-size:14px;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--red);
}
.eyebrow.on-dark{color:#ff5560}

/* The rule. One per block, never two — it is the brand's punctuation. */
.rule{width:72px;height:8px;background:var(--red);margin:22px 0 26px}

.lede{font-size:19px;color:var(--grey);max-width:58ch}

/* ---- buttons ---------------------------------------------------- */

.btn{
  display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-family:Saira,sans-serif;font-weight:700;font-size:16px;
  padding:15px 30px;border-radius:2px;
}
.btn:hover{background:#c8121d}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-ghost{
  display:inline-block;text-decoration:none;
  font-family:Saira,sans-serif;font-weight:700;font-size:16px;
  padding:15px 28px;border:1px solid var(--line-strong);color:var(--ink);
  border-radius:2px;
}
.btn-ghost:hover{border-color:var(--ink)}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:34px}
.cta-note{font-size:14px;color:var(--grey);margin-top:16px}
.cta-note.on-dark{color:rgba(242,241,239,.55)}

/* ---- shared blocks ---------------------------------------------- */

/* The one piece of layout that is safe here: a class no sub-page uses. */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}