/* Shared styles for every page: type, colours, pills, top bar, headline, press line, footer.
   Visual register after Body Shop / Gentle Systems / OEM / Deoron (prototyping repo:
   pod/reference/web-references.md). Page-specific styles stay in each page. */
:root {
  --bg: #F6F6F5;
  --pill: #EAEAE8;
  --ink: #1b1b1f;
  --grey: #8a8a8f;
  --line: rgba(27,27,31,0.10);
  --font: "TeX Gyre Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: clamp(17px, 1.25vw, 19px);
  --head: clamp(30px, 3.6vw, 52px);
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--text); line-height: 1.45; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* pills */
.pill { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 100px; background: var(--pill); font-size: 15px; text-decoration: none; white-space: nowrap; border: 0; font-family: inherit; color: inherit; cursor: pointer; }
.pill.dark { background: var(--ink); color: var(--bg); gap: 10px; padding: 0 18px; }

/* top bar */
nav.bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; gap: 8px; padding: 16px; }
nav.bar .grow { flex: 1; max-width: 360px; }
nav.bar div { display: flex; gap: 8px; }

/* big line, second sentence grey */
.head { padding: clamp(80px, 16vh, 180px) 16px clamp(60px, 10vh, 120px); font-size: var(--head); line-height: 1.08; letter-spacing: -0.035em; max-width: 26ch; font-weight: 400; }
.head span { color: var(--grey); }

/* the big dark button */
.cta { display: flex; width: 100%; max-width: 440px; align-items: center; justify-content: space-between; height: 60px; padding: 0 28px; border: 0; border-radius: 100px; background: var(--ink); color: var(--bg); font: inherit; font-size: 19px; letter-spacing: -0.02em; cursor: pointer; text-decoration: none; transition: opacity .18s ease; }
.cta:hover { opacity: 0.85; }
.cta:disabled { opacity: 0.45; cursor: default; }

/* press line, headline size */
.press { padding: clamp(80px, 14vh, 160px) 16px; font-size: var(--head); line-height: 1.08; letter-spacing: -0.035em; max-width: 24ch; }
.press span { color: var(--grey); }
.press a { text-decoration: none; }
.press a:hover { color: var(--grey); }

footer.bar { display: flex; justify-content: space-between; gap: 8px; padding: 16px; }
footer.bar div { display: flex; gap: 8px; }

@media (max-width: 820px) {
  nav.bar .grow { max-width: none; }
}