/* ============================================================
   Next Move public site: the multi-page layer.
   Loads after styles.css (the tokens and the home hero/nav/button rules,
   untouched because the 3D test page also uses it). Every value here comes
   from DESIGN.md. The client's own class names are the selectors: her copy
   is verbatim, only the look is ours.

   Ground rules carried from styles.css: the finished page is the default
   state; nothing here hides content behind a script; separation is
   hairlines only; one mint accent; transform and opacity are the only
   things that ever move.
   ============================================================ */

:root {
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --danger: #ff8a8a; /* form errors only (7.5:1 on navy) */
  --wrap: 68rem;
}

[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: 24px;
  top: -80px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--mint);
  color: var(--navy);
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 18px; outline: 2px solid var(--text); outline-offset: 3px; }
#content:focus { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- type ---------- */
body { font-family: var(--sans); }

h2 {
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  max-width: 28ch;
  text-wrap: balance;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 8px;
}
h4 { margin: 0 0 16px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
blockquote { margin: 0; }
ul, ol { margin: 0 0 16px; padding-left: 1.25em; }
li { margin: 0 0 8px; }
li::marker { color: var(--muted); }
code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.1em 0.4em;
}
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* Labels: the one mono voice (section labels, eyebrows, dates, categories). */
.section-label,
.hero-eyebrow,
.cat,
.meta,
.last-updated,
.effective-date,
.tldr .label,
.footer-col h3,
.footer-col h4,
blockquote footer,
.step-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.section-label { color: var(--mint); margin: 0 0 16px; }
.hero-eyebrow { display: block; color: var(--mint); line-height: 1.6; margin: 0 0 20px; }

/* ---------- containers and sections ---------- */
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

main > section,
.trust-strip,
.privacy-note {
  padding: 96px 0;
  border-bottom: 1px solid var(--line);
}
main > section:last-child { border-bottom: 0; }

/* Bare sections (the client's about/advisory markup): the container applied without a wrapper. */
main > section:not([class]):not(:has(> .container)) {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--wrap) - 48px));
  justify-content: center;
  padding: 96px 24px;
}

.page-header,
.people main > section:not([class]):has(> h1) {
  padding: 120px 0 96px;
  border-bottom: 1px solid var(--line);
}
.people main > section:not([class]):has(> h1) { padding: 120px 24px 96px; }
.page-header h1 + p,
.people main > section:not([class]):has(> h1) > h1 + p,
.lede {
  font-size: 1.125rem;
  color: var(--muted);
  max-width: var(--measure);
  margin: 24px 0 0;
}
.people main > section:not([class]):has(> h1) > p:first-child { color: var(--mint); margin-bottom: 20px; }
.page-header .section-label { margin-bottom: 20px; }

/* ---------- nav (extends .nav from styles.css) ---------- */
.nav { flex-wrap: wrap; row-gap: 12px; }
.nav-links { align-items: center; flex-wrap: wrap; row-gap: 8px; }
.nav-links a { padding: 8px 0; transition: color 120ms var(--ease); }
.nav-links a:hover { text-decoration: none; }
.nav-links a.active { color: var(--mint); }
.nav-links a.btn-nav-cta,
.nav-links a.btn-nav-cta:hover {
  color: var(--navy);
  background: var(--mint);
  border-radius: 10px;
  padding: 0 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  margin-left: 6px;
}
.nav-links a.btn-nav-cta:hover { transform: scale(1.02); }
.nav-toggle:hover { border-color: var(--mint-line); }
.faq-list summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--text); transition: transform 200ms var(--ease), opacity 200ms var(--ease); }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- buttons (the two treatments from DESIGN.md) ---------- */
.btn-primary,
.btn-inline,
.cta a:first-of-type,
.hs-button,
.investor-cta .email-link,
.people main > section:last-child:not([class]) > p:last-child > a:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--mint);
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms var(--ease);
}
.btn-primary:hover, .btn-inline:hover, .cta a:first-of-type:hover, .hs-button:hover, .investor-cta .email-link:hover,
.people main > section:last-child:not([class]) > p:last-child > a:first-child:hover { text-decoration: none; transform: scale(1.02); }
.btn-primary:active, .btn-inline:active, .cta a:first-of-type:active, .hs-button:active, .investor-cta .email-link:active { transform: scale(0.985); }

.btn-secondary,
.footer-email-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms var(--ease), border-color 120ms var(--ease);
}
.btn-secondary:hover, .footer-email-form button:hover { border-color: var(--mint-line); text-decoration: none; }
.btn-secondary:active, .footer-email-form button:active { transform: scale(0.985); }

summary:focus-visible, input:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

/* ---------- surfaces ---------- */
.step-card, .audience-card, .card, .stat-card, .contact-card, .principle, .post-card,
.people main > section:not([class]) > article,
.people main > section:not([class]) > div > div,
.policy-section:last-child,
article.content > section[aria-label="About the author"] {
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}
.step-card p, .audience-card p, .card p, .principle p, .access-block p { color: var(--muted); margin: 0; }
.step-card h3, .audience-card h3, .card h3, .principle h3, .access-block h3 { margin-bottom: 8px; }

.demo-wrap, .privacy-card, .cta .container, #policy-heading, .tldr,
.people main > section:last-child:not([class]) {
  background: var(--mint-tint);
  border: 1px solid var(--mint-line);
  border-radius: 16px;
  padding: 44px 40px;
}

/* Quotes: the mission line and the voices. */
blockquote[data-mission] {
  background: var(--navy-2);
  border-left: 2px solid var(--mint);
  padding: 28px 32px;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
  max-width: 40ch;
  margin: 0 0 40px;
}
blockquote footer { color: var(--muted); font-weight: 500; margin-top: 16px; }

/* ============================================================
   HOME
   ============================================================ */
.hero-mission {
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 24px 24px 0;
}
.hero-mission.assemble { display: block; }
body[data-page="index"] .hero { padding-top: 96px; }
.hero-container {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
h1 .highlight { color: var(--mint); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 40px; }
.hero-visual svg { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; }
/* The client's diagram markup carries a gradient; the site is flat, so the colours are set here. */
.hero-visual svg [fill^="url("] { fill: var(--mint); }
.hero-visual svg [stroke="#30363d"] { stroke: var(--line-strong); }
.hero-visual svg [stroke="#00c896"] { stroke: var(--mint); }
.hero-visual svg [fill="#161b22"] { fill: var(--navy-2); }
.hero-visual svg [fill="#f0f6fc"] { fill: var(--text); }
.hero-visual svg [fill="#0d1117"] { fill: var(--navy); }
.hero-visual svg text { font-family: var(--sans); }

.trust-strip { padding: 24px 0; }
.trust-list {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
}
.trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.9375rem;
}
.trust-list li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none; }

.section-head { margin-bottom: 40px; }
.steps-grid, .audience-grid, .card-grid, .stats-grid, .contact-grid, .principle-list, .post-grid {
  display: grid;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  margin-bottom: 16px;
}
.access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.access-block + .access-block { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }

.faq-list { max-width: var(--measure); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  padding: 16px 40px 16px 0;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 14px;
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--mint);
  transition: transform 200ms var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 0 24px; }

.demo-wrap .section-text { font-size: 1.125rem; max-width: 52ch; margin: 0 0 28px; }
.nm-demo-form { max-width: 34rem; }
.final-cta { border-bottom: 0; }

/* ============================================================
   ABOUT and ADVISORY BOARD (mostly structural selectors: her markup has no classes there)
   ============================================================ */
.principle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mission h2 { margin-top: 0; }

.people main > section:not([class]):has(> img) {
  grid-template-columns: 140px minmax(0, calc(var(--wrap) - 48px - 180px));
  column-gap: 40px;
  row-gap: 0;
  align-items: start;
}
.people main > section:not([class]):has(> img) > img { grid-column: 1; grid-row: 1 / span 8; }
.people main > section:not([class]):has(> img) > p:first-child,
.people main > section:not([class]):has(> h1) > p:first-child {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
  margin: 0 0 20px;
}
.people main > section:not([class]):has(> img) > p:first-child + img { grid-row: 2 / span 8; }
.people main > section:not([class]):has(> img) > :not(img) { grid-column: 2; }
.people main > section:not([class]):has(> img) > h2 { margin-bottom: 8px; }
.people main > section:not([class]) > p:first-child + img + h2 + p,
.people main > section:not([class]) > article > h2 + p,
.people main > section:not([class]) > div > div > h3 + p {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.people main > section:not([class]) > img, .people main > section:not([class]) > article > img, .people main > section:not([class]) > div > div > img {
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--navy-2);
  display: block;
}
.people main > section:not([class]) > img { width: 140px; height: 140px; }
.people main > section:not([class]) > article > img { width: 128px; height: 128px; }
.people main > section:not([class]) > div > div > img { width: 80px; height: 80px; margin-bottom: 16px; }
.people main > section:not([class]) > p:has(> a):last-child,
.people main > section:not([class]) > article > p:last-child,
.people main > section:not([class]):has(> img) > p:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  font-size: 0.875rem;
  margin-top: 24px;
}
.people main > section:not([class]) > p > span, .people main > section:not([class]) > article > p > span { color: var(--muted); flex: none; }
.people main > section:not([class]) > div:has(> div > img) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin: 40px 0;
}
.people main > section:not([class]) > div > div > h3 { margin-bottom: 4px; }
.people main > section:not([class]) > div > div > p:last-child { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.people main > section:not([class]) > article {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
}
.people main > section:not([class]) > article > img { grid-row: 1 / span 6; }
.people main > section:not([class]) > article > :not(img) { grid-column: 2; }
.people main > section:not([class]) > article > h2 { margin-bottom: 4px; }
.people main > section:not([class]) > article + article { margin-top: 24px; }
.people main > section:not([class]) > p:has(> a):last-child > a:first-child + span { display: none; }

.cta { padding: 96px 24px; }
.cta .container { max-width: calc(var(--wrap) - 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.cta .container > p { flex-basis: 100%; font-size: 1.125rem; margin: 0 0 12px; }
.cta .container > span { color: var(--muted); }
.people main > section:last-child:not([class]) { width: calc(100% - 48px); max-width: calc(var(--wrap) - 48px); margin: 96px auto; padding: 44px 40px; display: block; }
.people main > section:last-child:not([class]) > p:first-child { font-size: 1.125rem; margin: 0 0 20px; }
.people main > section:last-child:not([class]) > p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; line-height: 1.5; }
.people main > section:last-child:not([class]) > p:last-child > span { color: var(--muted); }

/* ============================================================
   VOICES
   ============================================================ */
.privacy-note { padding: 40px 0; }
.privacy-card { max-width: var(--wrap); margin: 0 auto; width: calc(100% - 48px); padding: 28px 32px; font-size: 1rem; }
.privacy-note .privacy-card { max-width: calc(var(--wrap) - 48px); }
@media (min-width: 1140px) { .privacy-note .privacy-card { width: 100%; } }
.privacy-card strong { display: block; margin-bottom: 8px; }
.voices .voices-list {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
.voice {
  margin: 0;
  max-width: calc(var(--measure) + 64px);
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--mint);
  border-radius: 0;
  padding: 28px 32px;
}
.voice blockquote { font-size: 1.25rem; line-height: 1.5; }
.voice figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 20px;
}
.mission-pullquote { display: grid; justify-items: center; }
.mission-pullquote blockquote[data-mission] { margin: 0; text-align: center; border-left: 0; border-top: 2px solid var(--mint); }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

/* ============================================================
   CONTACT and INVESTORS
   ============================================================ */
.contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-card.featured { grid-column: span 2; background: var(--mint-tint); border-color: var(--mint-line); }
.contact-card.featured p { color: var(--text); max-width: var(--measure); }
.contact-card .email-link { margin-top: auto; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 10px 0; }
.contact-card .btn-inline { align-self: flex-start; margin-top: auto; }
.contact-card { display: flex; flex-direction: column; }
.contact-card p { color: var(--muted); margin: 0 0 20px; }
.email-link { font-size: 1.125rem; font-weight: 600; word-break: break-word; }
#agency-form { margin-top: 64px; background: var(--navy-2); border: 1px solid var(--line); border-radius: 16px; padding: 40px; color-scheme: dark; display: grid; grid-template-columns: 5fr 7fr; column-gap: 40px; align-items: start; }
#agency-form > h2, #agency-form > p { grid-column: 1; }
#agency-form > p { color: var(--muted); max-width: var(--measure); margin-bottom: 0; }
#agency-form > div, #agency-form > iframe, #agency-form > form { grid-column: 2; grid-row: 1 / span 4; }
/* HubSpot renders its forms inside an iframe here (checked 2026-09-24), which page CSS cannot reach, so the
   form sits on a light "paper" surface exactly as the client's own site does (#f5f8fa). Everything else stays navy. */
.nm-demo-form, #agency-form { background: #f5f8fa; color: #1a1a2e; border-color: rgba(0, 0, 0, 0.06); }
.nm-demo-form { padding: 28px; border-radius: 16px; }
#agency-form > h2 { color: #1a1a2e; }
#agency-form > p, #agency-form .form-fallback, .nm-demo-form .form-fallback { color: #4a5568; }
#agency-form .form-fallback a, .nm-demo-form .form-fallback a { color: #00795a; }
#agency-form iframe, .nm-demo-form iframe { display: block; width: 100% !important; }
.form-fallback { font-size: 0.9375rem; color: var(--muted); }
.nm-demo-form:has(.hs-form) .form-fallback, #agency-form:has(.hs-form) .form-fallback, .nm-demo-form:has(iframe) .form-fallback, #agency-form:has(iframe) .form-fallback { display: none; }
.form-fallback a { text-decoration: underline; text-underline-offset: 3px; }
.office-block { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.8; }
.office-block strong { color: var(--text); }

.investor-section > .container > p { max-width: var(--measure); color: var(--muted); font-size: 1.0625rem; }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
.stat-card .number { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 8px; color: var(--text); }
.stat-card .label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
[aria-labelledby="why-heading"] .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card p { color: var(--text); }
.investor-cta .container { background: var(--mint-tint); border: 1px solid var(--mint-line); border-radius: 16px; padding: 44px 40px; max-width: calc(var(--wrap) - 48px); }
.investor-cta .email-link { margin-top: 0; }
.investor-cta .container > p:first-of-type { max-width: var(--measure); color: var(--muted); font-size: 1.0625rem; margin-bottom: 28px; }
.investor-cta .email-link { font-size: 1rem; }
.disclaimer, .footer-disclaimer { font-size: 0.875rem; color: var(--muted); max-width: var(--measure); margin-top: 40px; }

/* ============================================================
   BLOG
   ============================================================ */
main.page {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 96px 24px;
}
main.page > header { margin-bottom: 40px; }
main.page > header > p:first-child { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); margin-bottom: 20px; }
main.page > header > h1 + p { font-size: 1.125rem; color: var(--muted); max-width: var(--measure); margin-top: 24px; }
main.page > h1 { margin-bottom: 40px; }
main.page > h2 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
  border-top: 1px solid var(--line);
  margin: 64px 0 24px;
  padding-top: 40px;
  max-width: none;
}
main.page > nav.breadcrumbs { margin-bottom: 24px; }
main.page > h1 + p { font-size: 1.125rem; color: var(--muted); max-width: var(--measure); margin: -24px 0 40px; }
.post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post-card { display: flex; flex-direction: column; }
.post-card .meta { color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; }
.post-card .cat { color: var(--mint); }
.post-card h2, .post-card h3 { margin: 0 0 12px; max-width: none; }
.post-card h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.5rem); line-height: 1.1; }
main.page > article.post-card { padding: 40px; margin-top: 40px; }
main.page > article.post-card > h2 + p { color: var(--text); font-size: 1.125rem; max-width: var(--measure); }
main.page > article.post-card > p:last-child a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
main.page > article.post-card > p:last-child a:hover { color: var(--text); }
.post-card:has(h2 a:hover, h3 a:hover), .post-card:focus-within { border-color: var(--line-strong); }
.post-grid .post-card { position: relative; }
.post-grid .post-card h3 a::after { content: ''; position: absolute; inset: 0; }
.post-card { transition: border-color 200ms var(--ease); }
.post-card h2 a, .post-card h3 a { color: var(--text); }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--mint); text-decoration: none; }
.post-card p { color: var(--muted); margin: 0; }
.post-card > p:last-child, .post-card > .meta:last-child { margin-top: auto; padding-top: 16px; font-size: 0.875rem; }
.post-card .desc + .meta { margin-bottom: 0; }
main.page > article.post-card + article.post-card { margin-top: 16px; }
main.page > .post-card + h2 { margin-top: 64px; }


article.content { max-width: var(--measure); margin: 0 auto; font-size: 1.0625rem; line-height: 1.6; }
article.content > h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.5rem); line-height: 1.1; max-width: none; margin: 24px 0 24px; }
article.content h2 { font-size: 1.5rem; margin: 48px 0 16px; max-width: none; }
article.content h3 { font-size: 1.25rem; margin: 32px 0 12px; }
article.content p, article.content ul, article.content ol { margin-bottom: 20px; }
article.content li { margin-bottom: 10px; }
article.content a { text-decoration: underline; text-underline-offset: 3px; }
article.content img { display: block; margin: 24px 0; }
.table-wrap { overflow-x: auto; margin: 24px 0 40px; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
article.content table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.875rem; line-height: 1.5; margin: 0; }
article.content th:first-child, article.content td:first-child { position: sticky; left: 0; background: var(--navy); border-right: 1px solid var(--line); font-weight: 500; }
article.content thead th { color: var(--text); border-bottom: 1px solid var(--line-strong); }
article.content th strong { font-weight: inherit; }
article.content th, article.content td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
article.content th { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.875rem; color: var(--muted); }
.breadcrumbs .sep { color: var(--muted); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.875rem; color: var(--muted); margin: 0 0 40px; }
.byline .author-name { color: var(--text); font-weight: 500; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
.tldr { padding: 28px 32px; margin: 0 0 40px; }
.tldr .label { color: var(--mint); margin-bottom: 12px; }
.tldr p { margin: 0; }
article.content .faq { margin-top: 56px; }
article.content .faq h2 { margin-top: 0; }
.faq-item { border-top: 1px solid var(--line); padding: 20px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { font-weight: 600; margin-bottom: 8px; }
.faq-a { color: var(--muted); }
article.content > section[aria-label="About the author"] { display: flex; gap: 16px; align-items: flex-start; }
article.content > section[aria-label="About the author"] .avatar { width: 48px; height: 48px; font-size: 0.875rem; flex: none; }
article.content > section[aria-label="About the author"] p { margin: 8px 0 0; color: var(--muted); font-size: 0.9375rem; }

/* ============================================================
   LEGAL (privacy, terms)
   ============================================================ */
.policy-content > .container > *, .terms-content > .container > * { max-width: var(--measure); }
.policy-content, .terms-content { font-size: 1.0625rem; line-height: 1.6; }
.last-updated, .effective-date { color: var(--muted); margin: 0 0 24px; max-width: none !important; }
.effective-date strong { font-weight: 500; }
#policy-heading { margin-bottom: 40px; }
#policy-heading h2 { margin-top: 0; }
#policy-heading li { font-size: 1.0625rem; }
.policy-section + .policy-section, .terms-content h3 { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
#policy-heading + .policy-section { border-top: 0; padding-top: 0; }
.policy-section h3, .terms-content h3 { font-size: 1.5rem; margin-bottom: 12px; }
.policy-section:last-child { border-top: 0; padding: 28px; margin-top: 48px; }
.policy-section:last-child h3 { font-size: 1.25rem; }
.policy-content a, .terms-content a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.terms-content h3 + p, .terms-content h3 + ul { margin-top: 0; }

/* ============================================================
   FOOTERS: the client's three markups, one look
   ============================================================ */
footer[role="contentinfo"] {
  border-top: 1px solid var(--line);
  padding: 64px 24px 72px;
  color: var(--muted);
  font-size: 0.875rem;
}
footer[role="contentinfo"] a { color: var(--muted); transition: color 120ms var(--ease); }
footer[role="contentinfo"] a:hover { color: var(--text); text-decoration: none; }
footer[role="contentinfo"] ul { list-style: none; padding: 0; margin: 0; }
footer[role="contentinfo"] li { margin: 0 0 4px; }
footer[role="contentinfo"] li a, .footer-links a { display: inline-block; padding: 8px 0; }
footer[role="contentinfo"] p { margin: 0 0 12px; }
.footer-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.footer-brand img { width: 150px; height: auto; display: block; margin-bottom: 16px; }
.footer-brand p { max-width: 36ch; }
.footer-logo { font-size: 1.125rem; font-weight: 700; color: var(--text); display: inline-block; margin-bottom: 12px; }
.footer-logo .tm { font-size: 0.6em; vertical-align: super; }
.footer-col h3, .footer-col h4 { color: var(--muted); margin: 0 0 16px; }
.footer-email-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.footer-email-form input { flex: 1 1 180px; }
.footer-email-form button { padding: 0 18px; }
.footer-email-form.success input { display: none; }
.footer-email-form.success button { pointer-events: none; opacity: 0.5; }
.footer-email-form button[disabled] { opacity: 0.5; cursor: default; }
.footer-email-form.success::after { content: 'Thanks — you\2019re on the list.'; color: var(--text); }
.small, .footer-secondary { font-size: 0.875rem; }
.footer-bottom { max-width: var(--wrap); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }
.footer-disclaimer { max-width: var(--wrap); margin: 16px auto 0; }
.footer-content {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-left { max-width: var(--measure); margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }


/* ---------- inputs (ours and HubSpot's) ---------- */
/* If HubSpot ever renders inline (form set to raw HTML in HubSpot) these rules dress it for the paper surface it sits on.
   Today it renders in an iframe, so they are inert. !important on purpose: HubSpot's own sheet loads after ours. */
.hs-form, .hs-form-private { color: #1a1a2e !important; font-family: var(--sans) !important; }
.hs-form fieldset, .hs-form-private fieldset { max-width: none !important; }
.hs-form label, .hs-form-private label, .hs-form legend { color: #1a1a2e !important; font-size: 0.875rem !important; font-weight: 500 !important; display: block; margin-bottom: 6px; }
.hs-form .hs-form-required, .hs-form-private .hs-form-required { color: #b42318 !important; }
.hs-form .hs-input, .hs-form-private .hs-input, .hs-form input[type="text"], .hs-form input[type="email"], .hs-form input[type="tel"], .hs-form input[type="number"], .hs-form select, .hs-form textarea {
  background: #fff !important;
  color: #1a1a2e !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 10px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font: inherit !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
.hs-form textarea, .hs-form-private textarea { min-height: 120px !important; padding: 12px 14px !important; }
.hs-form .hs-input:focus, .hs-form-private .hs-input:focus { outline: 2px solid #00795a !important; outline-offset: 3px !important; }
.hs-form .hs-button, .hs-form-private .hs-button, .hs-form input[type="submit"] {
  background: var(--mint) !important;
  color: var(--navy) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font: inherit !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  min-height: 48px !important;
  padding: 0 26px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  line-height: 1 !important;
  cursor: pointer;
}
.hs-form .hs-error-msgs label, .hs-form-private .hs-error-msgs label { color: #b42318 !important; font-weight: 400 !important; }
.hs-form .hs-input.error, .hs-form-private .hs-input.error, .hs-form .hs-input.invalid { border-color: #b42318 !important; }
.hs-form .submitted-message, .hs-form-private .submitted-message, .submitted-message { color: #1a1a2e !important; font-size: 1.125rem; }
.hs-form ul.inputs-list, .hs-form-private ul.inputs-list { list-style: none !important; padding: 0 !important; }
.hs-form .hs-richtext, .hs-form-private .hs-richtext, .hs-form .legal-consent-container { color: #4a5568 !important; font-size: 0.875rem !important; }
.hs-form .hs-richtext a, .hs-form-private .hs-richtext a { color: #00795a !important; }

input[type="email"], input[type="text"], input[type="tel"], input[type="url"], input[type="number"], select, textarea, .hs-input {
  font: inherit;
  color: var(--text);
  background: var(--navy);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  min-height: 48px;
  padding: 0 14px;
}
textarea, textarea.hs-input { min-height: 120px; padding: 12px 14px; }
input::placeholder, textarea::placeholder { color: var(--muted); }
.hs-form fieldset { max-width: none !important; border: 0; padding: 0; margin: 0 0 16px; }
.hs-form .hs-form-field { margin-bottom: 16px; }
.hs-form label { display: block; font-size: 0.875rem; margin-bottom: 6px; color: var(--text); }
.hs-form .hs-input { width: 100% !important; }
.hs-form .input { margin-right: 0 !important; }
.hs-form .hs-error-msgs { list-style: none; padding: 0; margin: 6px 0 0; font-size: 0.875rem; }
.hs-form .actions { margin-top: 24px; }
.submitted-message { font-size: 1.125rem; border-left: 2px solid var(--mint); padding: 4px 0 4px 16px; }
.hs-button[disabled] { opacity: 0.5; cursor: default; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--navy) inset; -webkit-text-fill-color: var(--text); }
.hs-form .inputs-list { list-style: none; padding: 0; margin: 0; }
.hs-form input[type="checkbox"], .hs-form input[type="radio"] { width: auto !important; min-height: 0; accent-color: var(--mint); margin-right: 8px; }
.hs-form .legal-consent-container { font-size: 0.875rem; color: var(--muted); }

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 1100px) {
  .stats-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-container { grid-template-columns: 1fr; gap: 40px; }
  .steps-grid, .audience-grid, .contact-grid, .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid, .card-grid, [aria-labelledby="why-heading"] .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #agency-form { grid-template-columns: 1fr; }
  #agency-form > div, #agency-form > iframe, #agency-form > form { grid-column: 1; grid-row: auto; margin-top: 24px; }
  .people main > section:not([class]) > div:has(> div > img) { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .access-grid { gap: 0 40px; }
}

/* ============================================================
   PHONE
   ============================================================ */
@media (max-width: 960px) {
  .nav-links { display: flex; width: 100%; gap: 4px 18px; font-size: 0.875rem; }
  html.js .nav-links.is-folding { display: none; }
  html.js .nav-links.is-folding.open { display: flex; flex-direction: column; align-items: stretch; padding-top: 8px; }
  html.js .nav-links.is-folding.open a { min-height: 44px; padding: 12px 0; }
  html.js .nav-links.is-folding.open a.btn-nav-cta { justify-content: center; margin-top: 8px; }
  .nav-links a.btn-nav-cta { margin-left: 0; }
}
@media (max-width: 640px) {
  main > section, .trust-strip, .privacy-note { padding: 64px 0; }
  main > section:not([class]):not(:has(> .container)) { padding: 64px 24px; }
  .page-header, .people main > section:not([class]):has(> h1) { padding: 72px 0 64px; }
  .people main > section:not([class]):has(> h1) { padding: 72px 24px 64px; }
  .page-header h1 br { display: none; }
  .hero-mission { padding: 16px 24px 0; }
  body[data-page="index"] .hero { padding-top: 56px; }
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary, .cta-buttons a { width: 100%; }
  .trust-list { gap: 8px; }
  .steps-grid, .audience-grid, .contact-grid, .post-grid, .card-grid, [aria-labelledby="why-heading"] .card-grid, .stats-grid, .principle-list, .access-grid { grid-template-columns: 1fr; }
  .contact-card.featured { grid-column: auto; }
  .investor-cta .container { padding: 32px 24px; }
  .steps-grid, .audience-grid { gap: 12px; }
  .access-col + .access-col { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }
  .step-card, .audience-card, .card, .stat-card, .contact-card, .principle, .post-card,
  .people main > section:not([class]) > article, .people main > section:not([class]) > div > div, .policy-section:last-child, .voice, #agency-form { padding: 24px; }
  .demo-wrap, .privacy-card, .cta .container, #policy-heading, .tldr, .people main > section:last-child:not([class]) { padding: 32px 24px; }
  .people main > section:not([class]):has(> img) { grid-template-columns: 1fr; }
  .people main > section:not([class]):has(> img) > img, .people main > section:not([class]):has(> img) > p:first-child + img { grid-column: 1; grid-row: auto; margin-bottom: 24px; }
  .people main > section:not([class]):has(> img) > :not(img) { grid-column: 1; }
  .people main > section:not([class]) > article { grid-template-columns: 1fr; }
  .people main > section:not([class]) > article > img { grid-row: auto; margin-bottom: 16px; }
  .people main > section:not([class]) > article > :not(img) { grid-column: 1; }
  .cta .container > a:first-of-type, .people main > section:last-child:not([class]) > p:last-child > a:first-child { width: 100%; }
  .people main > section:last-child:not([class]) { width: auto; margin: 64px 24px; }
  blockquote[data-mission] { font-size: 1.25rem; padding: 24px; }
  .stat-card .number { font-size: 2rem; }
  .policy-section + .policy-section, .terms-content h3 { margin-top: 28px; padding-top: 28px; }
  .policy-content, .terms-content, article.content { font-size: 1rem; }
  .table-wrap::before { content: 'Swipe sideways for the full table'; display: block; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  footer[role="contentinfo"] { padding: 48px 24px 64px; }
  .footer-content { flex-direction: column; }
  main.page { padding: 64px 24px; }
}

/* ---------- print (counsel prints the legal pages) ---------- */
@media print {
  body { background: #fff; color: #111; }
  .nav, footer[role="contentinfo"] .footer-links, #plexus, #intro { display: none !important; }
  a { color: #111; }
  .policy-section:last-child, #policy-heading { background: none; border-color: #999; }
}