/* trefaapp.com, every page. Edit here, not in the pages. */
/* Self-hosted fonts — no Google Fonts, no third-party requests */
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Honeypot: moved off-canvas rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 400;
  color: #1C1614;
  background: #F2EDE7;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #5C1F26; text-decoration: none; }
a:hover { color: #C4703F; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
:focus-visible {
  outline: 2px solid #5C1F26;
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Nav ─────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px max(80px, calc((100% - 1120px) / 2));
  border-bottom: 1px solid #DDD5C8;
  background: #F2EDE7;
  position: relative;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-mark { width: 34px; height: 34px; flex-shrink: 0; }
.nav-wordmark {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.13em;
  color: #1C1614;
}
.nav-centre {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
  color: #575044;
}
.nav-centre a { color: #575044; }
.nav-centre a:hover { color: #1C1614; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-signin {
  font-size: 15px;
  font-weight: 500;
  color: #575044;
}
.nav-signin:hover { color: #1C1614; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5C1F26;
  color: #F2EDE7;
  font-size: 15px;
  font-weight: 600;
  height: 44px;
  padding: 0 22px;
  border-radius: 6px;
  transition: background 0.15s ease;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: #4a191f; color: #F2EDE7; }

/* Waitlist form */
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}
.waitlist-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.waitlist-input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px;
  color: #1C1614;
  background: #FBF8F3;
  border: 1.5px solid #C9C0B0;
  border-radius: 6px;
}
.waitlist-input::placeholder { color: #8E8676; }
.waitlist-input:focus {
  outline: none;
  border-color: #5C1F26;
  box-shadow: 0 0 0 2px rgba(92, 31, 38, 0.2);
}
.waitlist-submit {
  height: 52px;
  padding: 0 22px;
  white-space: nowrap;
  flex-shrink: 0;
}
.waitlist-note {
  font-size: 13px;
  line-height: 1.5;
  color: #575044;
}
.waitlist-note a { color: #575044; text-decoration: underline; }
.waitlist-note a:hover { color: #1C1614; }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.nav-toggle svg {
  width: 24px;
  height: 24px;
  stroke: #1C1614;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
}
#nav-check { display: none; }
.nav-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #F2EDE7;
  border-bottom: 1px solid #DDD5C8;
  flex-direction: column;
  padding: 16px 40px 24px;
  gap: 12px;
  z-index: 50;
}
.nav-mobile a {
  font-size: 16px;
  font-weight: 500;
  color: #575044;
  padding: 8px 0;
}
/* `.nav-mobile a` outranks `.btn-primary`, which painted this button's label in
   RAL 7013 on Oxblood: 1.6:1, unreadable. */
.nav-mobile a.btn-primary { color: #F2EDE7; font-weight: 600; padding: 0 22px; }
#nav-check:checked ~ .nav-mobile { display: flex; }

/* ── Hero ────────────────────────────────────────────── */
.hero {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  align-items: center;
  padding: 88px max(80px, calc((100% - 1120px) / 2)) 72px;
}
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex-grow: 1;
  max-width: 560px;
}
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #575044;
  text-transform: uppercase;
}
.hero h1 {
  font-size: 66px;
  line-height: 1.04;
  color: #1C1614;
  text-wrap: pretty;
}
.hero-body {
  font-size: 18px;
  line-height: 1.6;
  color: #4A443B;
  max-width: 500px;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
  flex-wrap: wrap;
}
.btn-hero {
  height: 52px;
  padding: 0 30px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #1C1614;
  border: 1.5px solid #C9C0B0;
  padding: 0 26px;
  transition: border-color 0.15s, background 0.15s;
}
.btn-secondary:hover {
  border-color: #575044;
  background: #FBF8F3;
  color: #1C1614;
}
.hero-fine {
  font-size: 14px;
  line-height: 1.6;
  color: #575044;
}

/* Hero preview: one post, drawn with the same reproduced screen the app preview
   uses further down, so the two cannot drift apart. It is the post on the GunCon
   table roll-ups, with a drawn target where the print has a photograph: no real
   people and no real firearms are pictured anywhere on this site. */
.hero-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  flex-shrink: 0;
}
.hero-fig .phone { --s: 0.8; border-radius: 26px; }
.hero-fig figcaption { font-size: 13px; color: #6B6355; }
.sc-photo { height: 300px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.sc-photo svg { display: block; width: 100%; height: 100%; }

/* ── Disciplines ─────────────────────────────────────── */
.disciplines {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px max(80px, calc((100% - 1120px) / 2));
  border-top: 1px solid #DDD5C8;
  border-bottom: 1px solid #DDD5C8;
  background: #EDE6DC;
}
.disciplines-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill {
  padding: 9px 16px;
  background: #F7F3EC;
  border: 1px solid #DCD3C4;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #1C1614;
}
.disciplines-note {
  font-size: 14px;
  color: #575044;
}

/* ── Shared section heading ──────────────────────────── */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}
.section-head h2 { font-size: 38px; line-height: 1.18; color: #1C1614; text-wrap: pretty; }
.section-head p { font-size: 17px; line-height: 1.6; color: #4A443B; text-wrap: pretty; }

/* ── Why ─────────────────────────────────────────────── */
.why {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 76px max(80px, calc((100% - 1120px) / 2));
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature-icon {
  width: 26px;
  height: 26px;
  stroke: #5C1F26;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature h3 {
  font-size: 24px;
  line-height: 1.25;
  color: #1C1614;
}
.feature p {
  font-size: 16px;
  line-height: 1.6;
  color: #4A443B;
}
.more {
  align-self: flex-start;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.not-marketplace {
  max-width: 760px;
  padding: 18px 22px;
  border: 1.5px solid #1C1614;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: #1C1614;
  text-wrap: pretty;
}

/* ── Logbook ─────────────────────────────────────────── */
.logbook {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  padding: 76px max(80px, calc((100% - 1120px) / 2));
  background: #EDE6DC;
  border-top: 1px solid #DDD5C8;
  border-bottom: 1px solid #DDD5C8;
}
.logbook .section-head { flex: 1 1 0; max-width: 440px; }
.logbook-points {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  max-width: 560px;
}
.point {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid #D2C8B8;
}
.point:first-child { border-top: none; padding-top: 0; }
.point:last-child { padding-bottom: 0; }
.point h3 { font-size: 22px; line-height: 1.25; color: #1C1614; }
.point p { font-size: 16px; line-height: 1.6; color: #4A443B; }
.coming-tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F7E9E4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5C1F26;
}

/* ── Clubs ───────────────────────────────────────────── */
.clubs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 64px;
  padding: 76px max(80px, calc((100% - 1120px) / 2));
  background: #EDE6DC;
  border-top: 1px solid #DDD5C8;
}
.clubs .section-head { flex: 1 1 0; max-width: 560px; }
.club-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 0;
  max-width: 440px;
  padding: 28px;
  background: #FBF8F3;
  border: 1px solid #DDD5C8;
  border-radius: 14px;
}
.club-card h3 { font-size: 24px; line-height: 1.25; color: #1C1614; }
.club-card p { font-size: 16px; line-height: 1.6; color: #4A443B; }

/* ── App preview ─────────────────────────────────────── */
.preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 76px max(80px, calc((100% - 1120px) / 2));
}
.preview-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  max-width: 560px;
}
.preview h2 { font-size: 38px; line-height: 1.18; color: #1C1614; text-wrap: pretty; }
.preview-head p { font-size: 17px; line-height: 1.6; color: #4A443B; }
/* Capped so the four screens settle into a 2x2 block on desktop rather than a single
   row that only fits at the very widest viewport. Collapses to one column on mobile. */
.phones {
  display: flex; gap: 44px; flex-wrap: wrap; justify-content: center;
  width: 100%; max-width: 572px;
}
.phone-fig { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.phone-fig figcaption { font-size: 14px; font-weight: 500; color: #575044; text-align: center; }
.phone {
  --s: 0.62;
  width: calc(390px * var(--s));
  height: calc(844px * var(--s));
  overflow: hidden;
  border: 1px solid #DDD5C8;
  border-radius: 20px;
  box-shadow: 0 18px 40px -24px rgba(28, 22, 20, 0.35);
}
.phone.dark { border-color: #674B4A; }
/* The screens are reproduced at the design's native 390x844 and scaled down as a
   unit, so every measurement stays exactly what the design specified. Light and dark
   share every rule and differ only in these custom properties. */
.screen {
  --bg: #EDE6DC;
  --surface: #FBF8F3;
  --raised: #F2EDE7;
  --text: #1C1614;
  --muted: #575044;
  --card-line: #E3DACC;
  --head-line: #DDD5C8;
  --edge: #DDD5C8;
  --accent: #5C1F26;
  --glyph: #B3A794;
  --mention: #5C1F26;
  --chip: #F2EDE7;
  --sx-line: #E3DACC;
  width: 390px;
  height: 844px;
  transform: scale(var(--s));
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}
/* Dark is built from Oxblood's own hue, muted, so it never reads as a switched-off
   screen and never introduces a second colour next to the logo (decided 2026-09-14,
   "Deep leather"). The active tab is Stone: Clay on these cards is 3.6:1, too weak. */
.screen.dark {
  --bg: #533332;
  --surface: #462726;
  --raised: #604140;
  --text: #F2EDE7;
  --muted: #E4DCCE;
  --card-line: transparent;
  --head-line: transparent;
  --edge: #674B4A;
  --accent: #F2EDE7;
  --glyph: #77605F;
  --mention: #F2EDE7;
  --chip: #533332;
  --sx-line: #604140;
}
.sc-head {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  height: 52px; background: var(--surface); border-bottom: 1px solid var(--head-line);
  font-size: 17px; font-weight: 600;
}
.sc-views {
  display: flex; gap: 4px; padding: 8px; flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--head-line);
}
.sc-view { padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sc-view.on { background: var(--raised); color: var(--text); }
.sc-list { display: flex; flex-direction: column; gap: 16px; padding: 16px; flex-grow: 1; overflow: hidden; }
.sc-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px;
}
.sc-row { display: flex; align-items: center; gap: 8px; }
.sc-av { width: 36px; height: 36px; border-radius: 999px; background: var(--raised); border: 1px solid var(--card-line); flex-shrink: 0; }
.sc-who { display: flex; flex-direction: column; }
.sc-name { font-size: 15px; font-weight: 600; }
.sc-handle { font-size: 13px; color: var(--muted); }
.sc-text { font-size: 15px; line-height: 21px; }
.sc-img {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; height: 268px; background: var(--raised); border-radius: 6px; flex-shrink: 0;
}
.sc-img svg { width: 28px; height: 28px; stroke: var(--glyph); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sc-img-label { font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; max-width: 230px; }
.sc-meta { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
/* A logged session shared to the feed. Built as a ledger, not a stat box: one row per
   ammunition line (calibre, the build that fired it, rounds, share of the day), so two
   calibres or six read the same way. Place and tagged people are chips that wrap. */
.sc-mention { font-weight: 600; color: var(--mention); }
.sx { display: flex; flex-direction: column; border: 1px solid var(--sx-line); border-radius: 8px; overflow: hidden; }
.sx-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--chip); }
.sx-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.sx-title svg { width: 15px; height: 15px; fill: none; stroke: var(--mention); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sx-row { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; column-gap: 10px; row-gap: 5px; padding: 8px 12px; border-top: 1px solid var(--sx-line); }
.sx-cal { justify-self: start; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--sx-line); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sx-gun { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.25; }
.sx-gun small { font-size: 11px; font-weight: 400; color: var(--muted); }
.sx-n { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.sx-bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--sx-line); }
.sx-bar i { display: block; height: 100%; border-radius: 2px; background: var(--mention); }
.sx-total { display: flex; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--sx-line); font-size: 13px; }
.sx-total b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--chip); font-size: 12px; font-weight: 500; }
.sx-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-chip.person { color: var(--mention); font-weight: 600; }
.sc-soon { align-self: flex-start; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--edge); font-size: 12px; color: var(--muted); }
.sc-tag { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--raised); font-size: 13px; color: var(--muted); }
.sc-body { display: flex; flex-direction: column; gap: 16px; padding: 24px; flex-grow: 1; overflow: hidden; }
.sc-id { display: flex; align-items: center; gap: 16px; }
.sc-av-lg { width: 64px; height: 64px; border-radius: 999px; background: var(--raised); border: 1px solid var(--card-line); flex-shrink: 0; }
.sc-id-name { font-size: 24px; font-weight: 600; }
.sc-id-handle { font-size: 15px; color: var(--muted); }
.sc-panel { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; }
.sc-panel-label { font-size: 15px; font-weight: 600; }
.sc-panel-value { font-size: 15px; line-height: 21px; color: var(--muted); }
.sc-btn { display: flex; align-items: center; justify-content: center; padding: 10px 24px; border: 1px solid var(--edge); border-radius: 6px; font-size: 15px; font-weight: 600; flex-shrink: 0; }
.sc-tabs {
  display: flex; align-items: flex-start; justify-content: space-around; flex-shrink: 0;
  padding: 8px 0 22px; background: var(--surface); border-top: 1px solid var(--edge);
}
.sc-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; font-size: 10px; font-weight: 500; color: var(--muted); }
.sc-tab svg { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-tab.on { font-weight: 600; color: var(--accent); }
.sc-tab.on svg { stroke: var(--accent); }
.preview-note { font-size: 13px; line-height: 1.6; color: #6B6355; text-align: center; max-width: 560px; }

/* ── Advocacy ────────────────────────────────────────── */
.advocacy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 64px;
  padding: 60px max(80px, calc((100% - 1120px) / 2));
  background: #5C1F26;
  color: #F2EDE7;
}
.advocacy h2 {
  font-size: 38px;
  line-height: 1.18;
  flex-grow: 1;
  max-width: 460px;
  text-wrap: pretty;
}
.advocacy p {
  font-size: 17px;
  line-height: 1.65;
  max-width: 440px;
  color: #E4D6D3;
}

/* ── Closing call to action ──────────────────────────── */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 76px max(80px, calc((100% - 1120px) / 2));
  text-align: center;
}
.cta h2 {
  font-size: 38px;
  line-height: 1.18;
  color: #1C1614;
  max-width: 620px;
  text-wrap: balance;
}

/* ── Footer ──────────────────────────────────────────── */
.footer {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 48px max(80px, calc((100% - 1120px) / 2)) 56px;
  background: #EDE6DC;
  border-top: 1px solid #DDD5C8;
}
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-mark { width: 26px; height: 26px; }
.footer-wordmark {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.13em;
  color: #1C1614;
}
.footer-domain {
  font-size: 14px;
  color: #575044;
}
.footer-links {
  display: flex;
  gap: 56px;
  font-size: 14px;
  line-height: 2;
  color: #575044;
}
.footer-col {
  display: flex;
  flex-direction: column;
}
.footer-col a { color: #575044; }
.footer-col a:hover { color: #1C1614; }
.footer-disclaimer {
  font-size: 13px;
  line-height: 1.6;
  color: #6B6355;
  border-top: 1px solid #DCD3C4;
  padding-top: 20px;
  max-width: 720px;
}
.footer-legal {
  font-size: 12px;
  color: #6B6355;
  line-height: 1.6;
}
.footer-legal span {
  display: inline-block;
  margin-right: 16px;
}


/* ── Shared shell for every page (added 2026-10-03) ─────── */
.nav-left { color: #1C1614; }
.nav-centre a.on { color: #1C1614; box-shadow: inset 0 -2px 0 #5C1F26; padding-bottom: 2px; }
.nav-mobile a.on { color: #1C1614; font-weight: 600; }
.page-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 72px max(80px, calc((100% - 1120px) / 2)) 56px;
  border-bottom: 1px solid #DDD5C8;
}
.page-head h1 { font-size: 54px; line-height: 1.08; color: #1C1614; max-width: 780px; text-wrap: pretty; }
.page-head .lede { font-size: 19px; line-height: 1.6; color: #4A443B; max-width: 660px; text-wrap: pretty; }
.section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 72px max(80px, calc((100% - 1120px) / 2));
}
.section.band { background: #EDE6DC; border-top: 1px solid #DDD5C8; border-bottom: 1px solid #DDD5C8; }
.section.tight { padding-top: 56px; padding-bottom: 56px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.split { display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; }
.split > * { flex: 1 1 0; min-width: 0; }
.split > .hero-fig { flex: none; }
.teaser {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: #FBF8F3;
  border: 1px solid #DDD5C8;
  border-radius: 14px;
}
.teaser h2, .teaser h3 { font-size: 24px; line-height: 1.25; color: #1C1614; }
.teaser p { font-size: 16px; line-height: 1.6; color: #4A443B; }
.teaser .more { margin-top: auto; }
.principles { display: flex; flex-direction: column; counter-reset: p; list-style: none; max-width: 760px; }
.principles li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 6px 16px;
  padding: 22px 0;
  border-top: 1px solid #D2C8B8;
}
.principles li:first-child { border-top: none; padding-top: 0; }
.principles li::before {
  counter-increment: p;
  content: counter(p, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: #5C1F26;
}
.principles h3 { font-size: 22px; line-height: 1.25; color: #1C1614; }
.principles p { font-size: 16px; line-height: 1.6; color: #4A443B; }
.phone-note { font-size: 13px; line-height: 1.6; color: #6B6355; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; }
.fact { padding: 8px 14px; border: 1px solid #DCD3C4; border-radius: 999px; background: #F7F3EC; font-size: 14px; font-weight: 500; }

/* Long-form pages: moderation, privacy. */
.prose { max-width: 720px; padding: 56px max(80px, calc((100% - 1120px) / 2)) 80px; }
.prose h1 { font-size: 40px; line-height: 1.15; margin-bottom: 12px; }
.prose .meta { font-size: 14px; color: #575044; margin-bottom: 40px; }
.prose .draft {
  padding: 14px 16px;
  background: #EDE6DC;
  border-left: 3px solid #C4703F;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  color: #4A443B;
  margin-bottom: 36px;
}
.prose h2 { font-size: 24px; line-height: 1.25; margin: 36px 0 12px; }
.prose p, .prose li { font-size: 16px; line-height: 1.6; color: #4A443B; margin-bottom: 12px; }
.prose ul { padding-left: 1.25em; margin-bottom: 12px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: #1C1614; font-weight: 600; }
.prose .placeholder {
  background: #EDE6DC;
  padding: 0 4px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 0.92em;
}
.footer-links { gap: 48px; }

/* ── Second pass, 2026-10-03: the polish a product site is expected to have ── */
.nav { position: sticky; top: 0; z-index: 40; }
[id] { scroll-margin-top: 96px; }
.hero { padding-top: 72px; }
.hero h1 { font-size: 72px; letter-spacing: -0.02em; }
.hero-text { gap: 24px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 6px; }
.trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: #4A443B; }
.trust svg { width: 16px; height: 16px; stroke: #5C1F26; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.feature-icon, .teaser > svg {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 13px;
  border-radius: 999px;
  background: #F7E9E4;
  stroke: #5C1F26;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.teaser, .club-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.teaser:hover, .club-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(28, 22, 20, 0.35); }
.more::after { content: " \2192"; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; }
.step { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: #FBF8F3; border: 1px solid #DDD5C8; border-radius: 14px; }
.step::before {
  counter-increment: s;
  content: counter(s, decimal-leading-zero);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: #5C1F26;
}
.step h3 { font-size: 22px; line-height: 1.25; color: #1C1614; }
.step p { font-size: 16px; line-height: 1.6; color: #4A443B; }
.faq { display: flex; flex-direction: column; max-width: 760px; border-top: 1px solid #DDD5C8; }
.faq details { border-bottom: 1px solid #DDD5C8; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 21px; color: #1C1614;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: 'Archivo', system-ui, sans-serif; font-size: 22px; font-weight: 400; color: #5C1F26; flex-shrink: 0; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { font-size: 16px; line-height: 1.6; color: #4A443B; padding: 0 0 20px; max-width: 680px; }
.page-head { position: relative; overflow: hidden; }
.page-head::after {
  content: ""; position: absolute; right: max(40px, calc((100% - 1120px) / 2 - 40px)); top: -20px; width: 300px; height: 300px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M13 15 H51 V26 H38.5 L36.2 45 H27.8 L25.5 26 H13 Z' fill='%235C1F26'/%3E%3Ccircle cx='32' cy='52.5' r='4.6' fill='%235C1F26'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.05; pointer-events: none;
}
.page-head > * { position: relative; z-index: 1; }
.footer-col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #575044; margin-bottom: 4px; }

/* ── Responsive ──────────────────────────────────────── */
/* Six links stop fitting beside the lockup and the button a little above the
   tablet breakpoint (measured: 3px to spare at 961px), so the menu collapses first. */
@media (max-width: 1040px) {
  .nav-centre { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 960px) {
  .nav, .hero, .disciplines, .why, .logbook, .preview, .clubs, .advocacy, .cta, .footer, .page-head, .section, .prose {
    padding-left: 40px;
    padding-right: 40px;
  }
  .nav { padding-top: 20px; padding-bottom: 20px; }
  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .hero h1 { font-size: 52px; }
  .page-head::after { display: none; }
  .hero-fig { align-self: center; }
  .why, .logbook, .clubs, .cta {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .why-grid, .grid-2, .grid-3, .steps {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .split { flex-direction: column; align-items: stretch; gap: 36px; }
  .split > * { flex: none; }
  .split > .hero-fig { align-self: center; }
  .page-head { padding-top: 48px; padding-bottom: 40px; }
  .page-head h1 { font-size: 40px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .logbook, .clubs {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
  }
  .logbook .section-head, .logbook-points, .clubs .section-head, .club-card {
    flex: none;
    max-width: none;
  }
  .advocacy {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .advocacy h2, .preview h2, .section-head h2, .cta h2 { font-size: 32px; }
}

@media (max-width: 720px) {
  .nav, .hero, .disciplines, .why, .logbook, .preview, .clubs, .advocacy, .cta, .footer, .page-head, .section, .prose {
    padding-left: 24px;
    padding-right: 24px;
  }
  .nav { padding-top: 16px; padding-bottom: 16px; }
  .nav-mobile { padding-left: 24px; padding-right: 24px; }
  .hero h1 { font-size: 42px; }
  .faq summary { font-size: 18px; }
  .step { padding: 22px; }
  .hero-body { font-size: 16px; }
  .page-head h1 { font-size: 34px; }
  .page-head .lede { font-size: 17px; }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .prose { padding-top: 40px; }
  .prose h1 { font-size: 32px; }
  .teaser { padding: 22px; }
  .principles li { grid-template-columns: 36px 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-hero { width: 100%; padding: 0 22px; }
  .waitlist-row { flex-direction: column; }
  /* In a column, `flex: 1` sizes the field from its content and ignores the 52px
     height, which left a 19px sliver to type an address into. */
  .waitlist-input { flex: none; width: 100%; }
  .waitlist-submit { width: 100%; }
  .disciplines { padding-top: 24px; padding-bottom: 24px; }
  .why, .logbook, .clubs, .cta { padding-top: 48px; padding-bottom: 48px; }
  .advocacy { padding: 48px 24px; }
  .advocacy h2, .preview h2, .section-head h2, .cta h2 { font-size: 28px; }
  .club-card { padding: 22px; }
  .cta { align-items: stretch; }
  .cta .waitlist-form { max-width: none; }
  .footer { padding: 40px 24px 48px; }
  .footer-links { gap: 32px; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 34px; }
  .pill { font-size: 13px; padding: 8px 12px; }
  .hero-fig .phone { --s: 0.76; }
}