/* ─────────────────────────────────────────────────────────────────────────
   Foundry — shared page chrome. Loaded after styles.css (the Classical
   token sheet) on every page. Everything that appears on two or more
   pages lives here: the dark ground, nav, footer, kicker, stat strip,
   section heads, and the subpage components (page hero, motif, bench
   grid, tiers strip, CTA band, FAQ, hub cards). Rules used by a single
   page stay in that page's inline <style> block.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --ink:       #1b1917;   /* the dark ground — a shade below neutral-900 */
  --on-ink:    #e8e2d6;   /* body text on the dark ground */
  --on-ink-hi: #f4efe4;   /* headings on the dark ground */
  --edge:      clamp(20px, 5vw, 64px);
  --wrap:      1180px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--color-bg); color: var(--color-text); text-wrap: pretty; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--edge); }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-600); }

@keyframes drawRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .rule-draw { animation: none !important; }
}

/* ── the dark band: nav + hero live on one continuous ground ────────────── */
.band-dark { background: var(--ink); color: var(--on-ink); }

/* ── nav ────────────────────────────────────────────────────────────────── */
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 22px;
  border-bottom: 1px solid rgba(225,173,102,0.28);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 50px; height: auto; display: block; }
.brand span {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--font-heading); font-size: 25px; font-weight: 500;
  letter-spacing: 0.2em; margin-right: -0.2em; line-height: 1;
  color: var(--color-accent-300);
}
.brand span small {
  font-size: 8.5px; font-weight: 500;
  letter-spacing: 0.55em; margin-right: -0.55em;
  color: rgba(225,173,102,0.8);
}
.nav-links { display: flex; align-items: center; gap: 34px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.nav-links a { color: var(--on-ink); white-space: nowrap; }
.nav-links a:hover { color: var(--color-accent-300); }
.nav-links a[aria-current="page"] {
  color: var(--color-accent-300);
  border-bottom: 1px solid var(--color-accent-400); padding-bottom: 3px;
}
.nav-links .btn {
  text-transform: none; letter-spacing: 0.02em;
  color: var(--color-accent-300); border-color: var(--color-accent-400);
}
.nav-links .btn:hover { background: color-mix(in srgb, var(--color-accent-300) 14%, transparent); color: var(--color-accent-300); }

/* ── kicker + drawn rule (every hero) ───────────────────────────────────── */
.kicker {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent-300); font-variant-numeric: tabular-nums;
}
.kicker .series { color: rgba(232,226,214,0.55); }
.rule-draw {
  height: 1px; background: var(--color-accent-400); width: 64px;
  margin: 18px 0 26px; transform-origin: left; animation: drawRule 1.1s ease-out both;
}

/* ── stat strip on the dark ground ──────────────────────────────────────── */
.creds {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(225,173,102,0.3);
  border-bottom: 1px solid rgba(225,173,102,0.3);
}
.creds div { padding: 16px 18px; border-right: 1px solid rgba(225,173,102,0.22); }
.creds div:first-child { padding-left: 0; }
.creds div:last-child { padding-right: 0; border-right: 0; }
.creds b {
  display: block; font-family: var(--font-heading); font-size: 30px; font-weight: 400;
  font-variant-numeric: tabular-nums; color: var(--color-accent-300);
}
.creds small { display: block; font-size: 11.5px; line-height: 1.5; color: rgba(232,226,214,0.7); margin-top: 4px; }

/* ── section heads and numerals ─────────────────────────────────────────── */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.sec-head h2 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(26px, 3.2vw, 34px); margin: 0; }
.sec-head span { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); }
.n { font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.18em; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }

/* ── subpage hero: the flyer band, web scale ────────────────────────────── */
.page-hero { position: relative; padding-block: 60px 64px; }
.page-hero > * { position: relative; }
.page-hero .motif {
  position: absolute; top: 0; right: 0; height: 100%; width: auto;
  opacity: 0.11; pointer-events: none;
}
.page-hero h1 {
  font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(40px, 5.8vw, 64px); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0 0 18px; color: var(--on-ink-hi);
}
.page-hero .lede {
  font-size: 17px; line-height: 1.72;
  max-width: 34em; margin: 0; color: rgba(232,226,214,0.82);
}
.page-hero .creds { margin-top: 44px; }

/* ── subpage body sections ──────────────────────────────────────────────── */
.sect { padding-top: 64px; }
/* the CTA band closes every subpage main and runs straight into the dark footer */
.page-main { padding-bottom: 0; }

/* the 2x2 numbered grid, from the flyers' .bench */
.bench { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 44px; }
.bench > div { border-left: 1px solid var(--color-divider); padding: 3px 6px 3px 20px; }
.bench h3 { font-family: var(--font-heading); font-weight: 500; font-size: 23px; margin: 10px 0 8px; }
.bench p { font-size: 14.5px; line-height: 1.68; color: var(--color-neutral-800); margin: 0; max-width: 30em; }

/* the 3-up strip on the light ground, from the pricing/affiliate flyers */
.tiers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
}
.tiers div { padding: 18px 20px; border-right: 1px solid var(--color-divider); }
.tiers div:first-child { padding-left: 0; }
.tiers div:last-child { border-right: 0; }
.tiers b {
  display: block; font-family: var(--font-heading); font-weight: 400; font-size: 34px;
  color: var(--color-accent-700); font-variant-numeric: tabular-nums;
}
.tiers small { display: block; font-size: 12px; line-height: 1.55; color: var(--color-neutral-800); margin-top: 4px; }

/* two-column hairline list ("what qualifies in practice") */
.qual-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; list-style: none; margin: 0; padding: 0; }
.qual-list li {
  border-left: 1px solid var(--color-divider); padding: 3px 6px 3px 18px;
  font-size: 14.5px; line-height: 1.6; color: var(--color-neutral-800);
}
.qual-list li b { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 17.5px; color: var(--color-text); margin-bottom: 2px; }

/* FAQ: hairline-separated question/answer rows */
.faq > div { border-top: 1px solid var(--color-divider); padding: 24px 0; }
.faq > div:last-child { border-bottom: 1px solid var(--color-divider); }
.faq h3 { font-family: var(--font-heading); font-weight: 500; font-size: 21px; margin: 0 0 8px; }
.faq p { font-size: 14.5px; line-height: 1.68; color: var(--color-neutral-800); margin: 0; max-width: 52em; }

/* italic bridge line, from the flyers' .note */
.note-line { margin: 40px 0 0; text-align: center; font-style: italic; font-size: 13px; color: var(--color-neutral-600); }

/* ── closing CTA band ───────────────────────────────────────────────────── */
.cta-band { background: var(--ink); color: var(--on-ink); margin-top: 84px; padding-block: 72px; text-align: center; }
.cta-band h2 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(30px, 3.8vw, 42px); line-height: 1.08; margin: 0 0 14px; color: var(--on-ink-hi);
}
.cta-band p { font-size: 15.5px; line-height: 1.7; color: rgba(232,226,214,0.78); max-width: 38em; margin: 0 auto 28px; }
.cta-band .btn {
  font-size: 15px; padding: 12px 26px;
  color: var(--color-accent-300); border-color: var(--color-accent-400);
}
.cta-band .btn:hover { background: color-mix(in srgb, var(--color-accent-300) 14%, transparent); color: var(--color-accent-300); }
.cta-band .alt { display: block; margin-top: 18px; font-size: 13px; color: rgba(232,226,214,0.6); }
.cta-band .alt a { color: var(--color-accent-300); }

/* ── industries hub cards ───────────────────────────────────────────────── */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* Related-briefs strip on industry pages: four cards read as 2x2 on wide screens; the breakpoints below still apply. */
@media (min-width: 1001px) { .related .ind-grid { grid-template-columns: repeat(3, 1fr); } }
.ind-card {
  display: block; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: 28px 30px; color: var(--color-text);
}
.ind-card[hidden] { display: none; }
.ind-card:hover { border-color: var(--color-accent); color: var(--color-text); }
.ind-card .ind-name {
  display: block; font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-700); font-variant-numeric: tabular-nums;
}
.ind-card h3 { font-family: var(--font-heading); font-weight: 500; font-size: 26px; line-height: 1.15; margin: 12px 0 10px; }
.ind-card p { font-size: 14px; line-height: 1.65; color: var(--color-neutral-800); margin: 0 0 18px; }
.ind-card .more { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.ind-card:hover .more { color: var(--color-accent-600); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { background: var(--ink); }
.foot-nav {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding-block: 26px 22px; border-bottom: 1px solid rgba(225,173,102,0.18);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.foot-nav a { color: rgba(232,226,214,0.7); }
.foot-nav a:hover { color: var(--color-accent-300); }
.foot-nav .mail { margin-left: auto; text-transform: none; letter-spacing: 0.02em; }
.foot-inner {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 30px; font-size: 12.5px; color: rgba(232,226,214,0.65);
}
.foot-inner .mark {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--font-heading); font-size: 15px; line-height: 1;
  letter-spacing: 0.2em; margin-right: -0.2em; color: var(--color-accent-300);
}
.foot-inner .mark:hover { color: var(--color-accent-200); }
.foot-inner .mark small { font-size: 7px; letter-spacing: 0.5em; margin-right: -0.5em; color: rgba(225,173,102,0.8); }

/* ── shared responsive collapse ─────────────────────────────────────────── */
@media (max-width: 1000px) {
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  /* keep brand + Industries + the one action on phones */
  .nav-links .nav-secondary { display: none; }
  .nav-links { gap: 22px; }
}
@media (max-width: 720px) {
  .page-hero .motif { display: none; }
  .bench { grid-template-columns: 1fr; gap: 30px; }
  .qual-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ind-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .creds { grid-template-columns: 1fr; }
  .creds div { padding: 14px 0; border-right: 0; border-bottom: 1px solid rgba(225,173,102,0.22); }
  .creds div:last-child { border-bottom: 0; }
  .tiers { grid-template-columns: 1fr; }
  .tiers div { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .tiers div:last-child { border-bottom: 0; }
  .brand span { font-size: 20px; letter-spacing: 0.16em; }
  .brand img { width: 40px; }
  .foot-nav .mail { margin-left: 0; }
}
@media (max-width: 480px) {
  /* phones: the anvil mark alone carries the brand so Industries + the
     action always fit beside it */
  .brand span { display: none; }
  .nav-inner { gap: 16px; }
  .nav-links { gap: 16px; font-size: 12px; }
}

/* ── affiliate signup form (the /go/ affiliate landers) ───────────────────
   One card, one column, one button. Submitting it opens the account, so the
   form is the conversion and there is no CTA hop to the portal. It sits on
   the dark hero ground and carries its own light surface. Shared here rather
   than inline because every affiliate lander uses the identical form; see
   /apply.js for the behaviour and docs/affiliate-signup.md for the flow. */
.signup {
  max-width: 560px; margin: 34px auto 0; text-align: left;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: 26px 26px 24px; box-shadow: 0 20px 46px rgba(0, 0, 0, 0.3);
}
.signup h2 {
  margin: 0 0 6px; font-size: 22px; line-height: 1.25;
}
.signup .signup-sub {
  margin: 0 0 20px; font-size: 13.5px; line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}
.signup .field { margin-bottom: 14px; }
.signup .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.signup label {
  display: block; margin-bottom: 6px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.signup input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 15px;
  padding: 11px 12px; color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
}
.signup input:focus-visible {
  outline: 2px solid var(--color-accent-500); outline-offset: 1px;
}
.signup .btn {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  margin-top: 18px; font-size: 15.5px; padding: 14px 20px; cursor: pointer;
}
.signup .btn[disabled] { opacity: 0.55; cursor: default; }
.signup .fine {
  margin: 14px 0 0; font-size: 12px; line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup .signup-error {
  margin: 14px 0 0; padding: 10px 12px; font-size: 13.5px; line-height: 1.55;
  border-left: 2px solid #a8341f; background: color-mix(in srgb, #a8341f 8%, transparent);
}
/* The confirmation that replaces the form on success. */
.signup-done h2 { margin: 0 0 10px; font-size: 22px; }
.signup-done p { font-size: 14.5px; line-height: 1.7; }
.signup-done p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .signup { padding: 22px 18px 20px; }
  .signup .row { grid-template-columns: 1fr; gap: 0; }
  .signup .row .field { margin-bottom: 14px; }
}
/* Wide variant: the same form as a band in a light section below a dark
   hero (the partners page), rather than a card floating on the dark ground.
   Three columns of fields and one row for the button and the fine print, so
   it reads landscape. Surface and field colours swap against the base
   because the page ground here is already --color-bg. */
.signup-wide {
  max-width: none; margin: 0; box-shadow: none;
  background: var(--color-surface); padding: 28px 28px 24px;
}
.signup-wide input { background: var(--color-bg); }
.signup-wide .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 22px; }
.signup-wide .signup-actions {
  display: grid; grid-template-columns: auto 1fr; gap: 16px 28px; align-items: start;
  margin-top: 6px;
}
.signup-wide .signup-actions .btn { width: auto; margin-top: 0; padding: 14px 28px; white-space: nowrap; }
.signup-wide .signup-actions .fine { margin: 3px 0 0; }
@media (max-width: 900px) {
  .signup-wide .grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .signup-wide { padding: 22px 18px 20px; }
  .signup-wide .grid3 { grid-template-columns: 1fr; }
  .signup-wide .signup-actions { grid-template-columns: 1fr; }
  .signup-wide .signup-actions .btn { width: 100%; }
}