/* Grow Together, growtogether.benmartel.com. Paper direction tokens copied from ~/.claude/design/tokens.css (2026-09-18). */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@500;600&family=Source+Sans+3:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
  color-scheme: light;
  --bg: #f3eee4;
  --surface: #fbf8f1;
  --surface-2: #ebe4d5;
  --border: #d5cbb8;
  --text: #1f1b16;
  --muted: #6d655a;
  --accent: #8f6218;
  --accent-dim: rgba(143, 98, 24, 0.12);
  --on-accent: #fbf8f1;
  --ok: #3b7a47;   --ok-dim: rgba(59, 122, 71, 0.12);
  --warn: #a8690f; --warn-dim: rgba(168, 105, 15, 0.14);
  --err: #a8382e;  --err-dim: rgba(168, 56, 46, 0.12);
  --th-bg: #2a2520; --th-fg: #f3eee4;
  --stripe: #ebe4d5;
  --highlight: #dfe9d6;
  --font-body: 'Source Sans 3', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --fs: 14px; --fs-table: 13px; --lh: 1.45;
  --display-weight: 600; --display-tracking: 0;
  --label-transform: uppercase; --label-tracking: 0.06em; --label-weight: 600;
  --radius: 3px; --radius-sm: 2px; --radius-pill: 999px;
  --border-w: 1px; --card-border-w: 1px; --shadow: none;
  --pad: 12px; --gap: 12px; --row-pad: 6px 10px;
  --note-rule: 3px; --note-pad: 12px;
}
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--accent); } a:hover { color: var(--text); }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.label { font-size: 11px; color: var(--muted); text-transform: var(--label-transform); letter-spacing: var(--label-tracking); font-weight: var(--label-weight); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); margin: 0; line-height: 1.15; }
h1 { font-size: 44px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
p { margin: 0 0 12px; }
.card { background: var(--surface); border: var(--card-border-w) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.btn { font-weight: 600; font-size: 15px; padding: 0 16px; height: 44px; border-radius: var(--radius-sm); border: var(--border-w) solid var(--border); background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--muted); color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { color: var(--on-accent); background: #7a5314; border-color: #7a5314; }
.chip { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--radius-pill); border: var(--border-w) solid var(--border); color: var(--muted); white-space: nowrap; display: inline-block; }
.note { font-style: italic; color: var(--muted); border-left: var(--note-rule) solid var(--accent); padding-left: var(--note-pad); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; font-weight: var(--label-weight); color: var(--th-fg); background: var(--th-bg); padding: 8px 10px; text-transform: var(--label-transform); letter-spacing: var(--label-tracking); }
td { padding: 8px 10px; border-top: var(--border-w) solid var(--border); vertical-align: top; }
tbody tr:nth-child(even) td { background: var(--stripe); }
.table-wrap { overflow-x: auto; border: var(--border-w) solid var(--border); border-radius: var(--radius); background: var(--surface); }
.table-wrap table { min-width: 560px; }

/* header */
.topbar { border-bottom: var(--border-w) solid var(--border); background: var(--surface); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 22px; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.brand svg { width: 26px; height: 26px; }
.brand small { font-family: var(--font-body); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
nav.main { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
nav.main a { padding: 8px 10px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; text-decoration: none; font-size: 15px; min-height: 40px; display: inline-flex; align-items: center; }
nav.main a:hover { color: var(--text); }
nav.main a.active { color: var(--text); background: var(--surface-2); }
nav.main a.btn { margin-left: 6px; }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; padding: 44px 0 36px; }
.hero .eyebrow { margin-bottom: 14px; }
.hero h1 { margin-bottom: 16px; }
.lede { font-size: 19px; line-height: 1.5; color: var(--text); margin-bottom: 22px; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.hero figure { margin: 0; }
.hero figure img { border: var(--border-w) solid var(--border); border-radius: var(--radius); background: var(--surface); }
.hero figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* sections */
section.band { padding: 36px 0; border-top: var(--border-w) solid var(--border); }
section.band.surface { background: var(--surface); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sec-head .label { margin-bottom: 6px; display: block; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.feature img.mark { width: 84px; height: 84px; margin-bottom: 4px; }
.feature h3 { margin-bottom: 2px; }
.feature p { margin: 0; color: var(--text); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.steps li { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.steps .num { font-family: var(--font-mono); color: var(--accent); font-size: 13px; font-weight: 500; }
.steps h3 { font-size: 18px; }
.steps p { margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.tile { padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.tile .value { font-family: var(--font-mono); font-size: 28px; font-weight: 500; line-height: 1.1; }
.tile .sub { font-size: 12px; color: var(--muted); }
.list-plain { margin: 0; padding-left: 20px; }
.list-plain li { margin: 6px 0; }
.offer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.offer a.card, .offer div.card { padding: 14px 16px; text-decoration: none; color: var(--text); display: block; }
.offer .card b { display: block; margin-bottom: 4px; font-size: 16px; }
.offer .card span { color: var(--muted); font-size: 14px; }
.offer a.card:hover { border-color: var(--muted); }

/* prose pages */
.prose { max-width: 720px; }
.prose h2 { margin: 34px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 22px 0 6px; }
.prose p, .prose li { font-size: 17px; line-height: 1.6; }
.page-head { padding: 40px 0 8px; }
.page-head .label { display: block; margin-bottom: 10px; }
.page-head h1 { font-size: 40px; margin-bottom: 12px; }
.page-head .lede { max-width: 720px; }
.marked { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.marked img { width: 96px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 16px; }
.thumbs figure { margin: 0; width: 132px; }
.thumbs img { width: 132px; height: 132px; object-fit: cover; border: var(--border-w) solid var(--border); border-radius: var(--radius); }
.thumbs figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }
.photo { border: var(--border-w) solid var(--border); border-radius: var(--radius); }
figure.photo-fig { margin: 0; }
figure.photo-fig figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* contact + footer */
.contact { padding: 36px 0; border-top: var(--border-w) solid var(--border); background: var(--surface); }
.contact .inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
.contact h2 { margin-bottom: 8px; }
.contact .lines { font-size: 17px; display: flex; flex-direction: column; gap: 6px; }
.contact .lines a { text-decoration: none; }
.contact .lines .mono { font-size: 18px; }
footer { border-top: var(--border-w) solid var(--border); padding: 18px 0 28px; color: var(--muted); font-size: 13px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; }
footer a { color: var(--muted); }

@media (max-width: 760px) {
  h1 { font-size: 34px; }
  .page-head h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .hero { grid-template-columns: 1fr; gap: 22px; padding: 26px 0 24px; }
  .hero figure { order: -1; }
  .grid-3, .grid-2, .steps, .tiles, .offer, .contact .inner { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .marked { grid-template-columns: 64px 1fr; gap: 14px; }
  .marked img { width: 64px; }
  .lede { font-size: 17px; }
  .prose p, .prose li { font-size: 16px; }
  nav.main a { padding: 8px 8px; font-size: 14px; }
}