/* ===================================================================
   ARBOREUM ONE-PAGER — page styles
   Implements "Arboreum One-Pager.dc.html" from the Claude Design
   project as a standalone static site. Layout values mirror the
   design 1:1; components (buttons, inputs) mirror the design system.
   =================================================================== */

html { scroll-behavior: smooth; }
/* The hidden attribute must always win, even over display: flex/grid rules. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--pink-50); }
a { color: var(--blue-700); }
a:hover { color: var(--brown-900); }

.page { background: var(--surface-page); min-height: 100vh; }
.container { max-width: 1200px; margin: 0 auto; }

/* ===== Buttons (design system: Button.jsx) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.btn:hover { filter: brightness(0.93); }
.btn:active { transform: scale(var(--press-scale)); }
.btn-sm { gap: 6px; height: 36px; padding: 0 16px; font-size: var(--text-sm); }
.btn-md { gap: 8px; height: 46px; padding: 0 22px; font-size: var(--text-base); }
.btn-lg { gap: 10px; height: 56px; padding: 0 30px; font-size: var(--text-md); }
.btn-primary { background: var(--accent-primary); color: var(--accent-on-primary); border: 1.5px solid var(--accent-primary); }
.btn-primary:hover { color: var(--accent-on-primary); }
.btn-secondary { background: var(--accent-secondary); color: var(--accent-on-secondary); border: 1.5px solid var(--accent-secondary); }
.btn-secondary:hover { color: var(--accent-on-secondary); }
.btn-outline { background: transparent; color: var(--text-strong); border: 1.5px solid var(--border-strong); }
.btn-outline:hover { color: var(--text-strong); }

/* ===== Inputs (design system: Input.jsx) ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.input-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.input-shell:focus-within { border-color: var(--focus-ring); box-shadow: var(--ring); }
.input-shell input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-strong);
}
.input-shell input:focus-visible { box-shadow: none; }
.field.has-error .input-shell { border-color: var(--status-danger); }
.field-error {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--status-danger);
}
.field-error:empty { display: none; }
textarea.textarea {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  resize: vertical;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
textarea.textarea:focus { border-color: var(--focus-ring); box-shadow: var(--ring); }

/* Honeypot: off-screen rather than display:none, which bots detect. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 248, 247, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header .container {
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wordmark { display: inline-flex; text-decoration: none; }
.wordmark span {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 24px;
  letter-spacing: -0.045em;
  color: var(--brown-900);
  line-height: 1;
}
.site-nav { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.site-nav a:hover { color: var(--brown-900); }
.header-actions { display: flex; gap: 10px; align-items: center; }

/* ===== Hero ===== */
.hero { position: relative; overflow: hidden; }
.hero .container {
  padding: clamp(48px, 7vw, 88px) 28px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(40px, 5.4vw, 66px);
  line-height: 1.02;
  margin: 16px 0 18px;
}
.hero .lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text-body);
  max-width: 504px;
  line-height: 1.55;
  margin: 0 0 20px;
}
.hero .lead + .lead { margin-bottom: 28px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 5;
  max-height: 560px;
}
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  display: block;
}
.hero-art .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,248,247,0.08), rgba(12,25,23,0.28));
}

/* ===== Shared section shells ===== */
.section { padding: var(--section-y) 28px; scroll-margin-top: 90px; }
.section-card {
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.section-intro { margin: 0 auto 44px; text-align: center; }
.section-intro h2 { font-size: var(--text-2xl); margin: 12px 0 16px; }
.section-intro .intro-copy {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
}

/* ===== Why CDC ===== */
#why-cdc { margin-top: var(--section-y); }
#why-cdc .section-intro { max-width: 680px; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 44px;
}
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}
.card h3 { margin: 0 0 8px; font-size: var(--text-lg); }
.card p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
}
.icon-tile {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.icon-tile svg { width: 24px; height: 24px; }
.icon-tile.green { background: var(--green-100); color: var(--green-700); }
.icon-tile.orange { background: var(--orange-100); color: var(--orange-700); }
.icon-tile.blue { background: var(--blue-100); color: var(--blue-700); }

.qa-panel {
  max-width: 820px;
  margin: 0 auto;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.qa-panel h3 { margin: 0 0 20px; }
.qa-panel .qa-list { display: flex; flex-direction: column; gap: 16px; }
.qa-panel p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
}
.qa-panel .q { color: var(--text-strong); font-weight: var(--fw-semibold); }

/* ===== Pull quote ===== */
.pull-quote {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 32vw, 380px);
  display: grid;
  place-items: center;
  padding: clamp(56px, 8vw, 96px) 28px;
  /* Fallback behind the painting: the quote is light text, so without this
     it would sit cream-on-cream if the image ever fails to load. */
  background: var(--ink-900);
}
.pull-quote > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.pull-quote .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,25,23,0.30) 0%, rgba(12,25,23,0.52) 60%, rgba(12,25,23,0.78) 100%);
}
.pull-quote p {
  position: relative;
  margin: 0;
  max-width: 900px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-dark);
  text-wrap: pretty;
}

/* ===== How it works ===== */
#how-it-works .section-intro { max-width: 760px; margin-bottom: 36px; }
#how-it-works .section-intro h2 { margin: 12px 0 10px; }
#how-it-works .section-intro .intro-copy {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 760px;
  margin: 0 auto 24px;
}
.step-card { position: relative; padding: 28px; }
.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--brown-900);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 21px;
  line-height: 1;
  text-align: center;
  margin-bottom: 16px;
}
.note-panel {
  max-width: 760px;
  margin: 0 auto 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.note-panel.tint { background: var(--blue-100); }
.note-panel.card-like { background: var(--surface-card); box-shadow: var(--shadow-sm); }
.note-panel h3 { margin: 0 0 12px; font-size: var(--text-lg); }
.note-panel p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.55;
}
.note-panel .stack { display: flex; flex-direction: column; gap: 12px; }

/* ===== The risks ===== */
#risks .section-intro { max-width: 760px; }
#risks .card-grid { margin-bottom: 24px; }
#risks .card p { color: var(--text-body); }
.wrongs-panel {
  /* Capped to match .qa-panel — unconstrained, this ran to ~150 characters
     per line on wide screens, well past the readable maximum. */
  max-width: 820px;
  margin: 0 auto;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.wrongs-panel h3 { margin: 0 0 12px; font-size: var(--text-lg); }
.wrongs-panel p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.55;
}
.wrongs-panel p + p { margin-top: 12px; }

/* ===== Our purpose ===== */
.approach { background: var(--ink-800); }
.approach .section-intro { max-width: 800px; margin-bottom: 48px; }
.approach .eyebrow { color: var(--orange); }
.approach h2 {
  font-size: var(--text-2xl);
  margin: 14px 0 0;
  color: var(--text-on-dark);
  text-wrap: pretty;
}
.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(28px, 3vw, 48px);
}
.approach-col .rule { width: 32px; height: 2px; background: var(--orange); margin-bottom: 18px; }
.approach-col h3 { margin: 0 0 10px; color: var(--text-on-dark); }
.approach-col p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--blue-200);
  line-height: 1.65;
}

/* ===== Who's with us =====
   Ownership reads as the section intro (centred, like Why CDC and The
   risks), leaving "Our advisers" as the section's single heading. This
   replaced a two-column layout that left a ~450px hole once the owners
   copy shrank to two sentences. */
#partners .eyebrow.centered { display: block; margin-bottom: 32px; text-align: center; }
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.partners-grid h2 { font-size: var(--text-2xl); margin: 0 0 20px; }
.partners-grid .col p {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0 0 18px;
}
.partners-grid .col p:last-child { margin-bottom: 0; }
.partners-grid .col strong { color: var(--text-strong); }
.partners-grid a.inline-cta { font-weight: var(--fw-semibold); cursor: pointer; }
.adviser-list { display: flex; flex-direction: column; }
.adviser { padding: 24px 0; border-top: 1px solid var(--border-subtle); }
.adviser:first-child { padding-top: 0; border-top: none; }
.adviser:last-child { padding-bottom: 0; }
.adviser-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.adviser-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--text-strong);
  white-space: nowrap;
}
.adviser-tag { color: var(--blue-700); font-size: 11px; white-space: nowrap; }
.adviser p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
}
.adviser.open-note p { color: var(--text-muted); }

/* ===== Who we are ===== */
.team { background: var(--surface-sunken); }
.team .section-intro { max-width: 736px; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 224px));
  justify-content: center;
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}
.team-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 22px;
  margin-bottom: 10px;
}
.avatar.green { background: var(--green-100); color: var(--green-700); }
.avatar.orange { background: var(--orange-100); color: var(--orange-700); }
.avatar.blue { background: var(--blue-100); color: var(--blue-700); }
.team-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  color: var(--text-strong);
  line-height: 1.2;
}
.team-role { font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); }
/* LinkedIn badge, sitting on the avatar rather than on its own line. Overlapping
   means it adds no height, so a card with a link and one without are identical
   and the name stays centred. An icon on its own row cost 30px and left the
   name looking off-centre when placed inline beside it. */
.avatar-wrap { position: relative; display: inline-flex; }
.team-linkedin {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: inline-flex;
  padding: 5px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.team-linkedin svg { width: 13px; height: 13px; }
/* The badge reads at 25px but that is a mean target on a phone. This extends
   the tappable area to roughly 41px without changing how it looks. */
.team-linkedin::after { content: ""; position: absolute; inset: -8px; }
.team-linkedin:hover,
.team-linkedin:focus-visible { color: var(--text-link); border-color: var(--text-link); }

/* ===== Contact modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(12, 25, 23, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay[hidden] { display: none; }
.modal-dialog {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 36px;
  width: min(620px, 100%);
  max-height: 90vh;
  overflow: auto;
  position: relative;
}
.modal-dialog h2 { font-size: var(--text-xl); margin: 0 0 24px; }
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { background: var(--surface-sunken); color: var(--text-strong); }
.modal-close svg { width: 18px; height: 18px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.form-success { display: flex; gap: 12px; align-items: flex-start; }
.form-success svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; }
.form-success.on-light svg { color: var(--green-700); }
.form-success p {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.55;
}
.form-success + .success-actions { margin-top: 20px; }

/* ===== Careers page ===== */
.page-careers { display: flex; flex-direction: column; }
.careers-intro { padding: clamp(32px, 4.5vw, 56px) 28px clamp(32px, 4vw, 48px); }
.careers-intro .inner { max-width: 720px; margin: 0 auto; text-align: center; }
.careers-intro h1 {
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  margin: 16px 0 18px;
}
.careers-intro p {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
}
.careers-intro a { font-weight: var(--fw-semibold); }
.vacancies { padding: 0 28px var(--section-y); flex: 1; }
.vacancies .inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.speculative-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px;
  text-align: center;
}
.speculative-card h2 { margin: 0 0 10px; font-size: var(--text-xl); }
.speculative-card p {
  margin: 0 auto 22px;
  max-width: 480px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
}
.back-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.back-link svg { width: 16px; height: 16px; }

/* CV file attach control */
.file-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.file-drop {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1.5px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  background: var(--surface-sunken);
  transition: border-color var(--dur-base) var(--ease-out);
}
.file-drop:hover { border-color: var(--blue-700); }
.file-drop svg { width: 18px; height: 18px; color: var(--text-muted); flex: 0 0 auto; }
.file-drop .file-name { font-family: var(--font-sans); font-size: 15px; color: var(--text-muted); }
.file-drop.has-file .file-name { color: var(--text-strong); }
.file-drop input[type="file"] { display: none; }
.file-error {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--orange-600);
}
.file-error:empty { display: none; }

/* Point-of-collection privacy line, under each form's submit button. */
.form-note {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ===== Legal / prose pages (privacy notice) =====
   Deliberately quieter than the marketing pages. This is a document to be
   read start to finish, not a page to be scanned, so the heading ladder is
   compressed and the measure is narrower than elsewhere on the site. */
.legal-page { padding: clamp(40px, 5vw, 72px) 28px var(--section-y); flex: 1; }
.prose {
  /* ~78 characters at 16px — comfortable for continuous reading, and
     narrower than the 680px used for the marketing panels. */
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.7;
}
/* Headings here use the body face, not the display face used elsewhere on
   the site. Bricolage Grotesque has enough personality to slow a reader
   down over a long legal document; Hanken Grotesk is easier to read at
   length. Hierarchy therefore comes from size and weight alone, which is
   how most legal documents are set anyway. The tight display tracking
   inherited from base.css is relaxed to suit the body face. */
.prose h1,
.prose h2,
.prose h3 {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
.prose h1 {
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: 1.15;
  margin: 14px 0 24px;
}
/* Section headings, with a hairline rule and plenty of air above so the
   sections separate without the headings needing to shout. */
.prose h2 {
  font-size: 25px;
  line-height: 1.25;
  margin: 52px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
}
.prose h3 {
  font-weight: var(--fw-bold);
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-strong);
  margin: 30px 0 6px;
}
.prose p { margin: 0 0 18px; }
.prose .lede { font-size: 18px; color: var(--text-strong); margin-bottom: 22px; }
.prose ul { margin: 0 0 18px; padding-left: 20px; }
.prose li { margin-bottom: 10px; padding-left: 4px; }
.prose li::marker { color: var(--text-faint); }
.prose strong { color: var(--text-strong); }
.prose a { text-underline-offset: 3px; }

/* ===== Footer: sign-up band ===== */
.signup-band { background: var(--ink-800); padding: clamp(64px, 9vw, 110px) 28px; }
.signup-inner { max-width: 620px; margin: 0 auto; }
.signup-band .eyebrow { color: var(--orange); }
.signup-band h2 { color: var(--text-on-dark); font-size: var(--text-3xl); margin: 16px 0 14px; }
.signup-band .band-copy {
  font-family: var(--font-sans);
  color: var(--blue-200);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 32px;
}
.signup-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.signup-form .field { flex: 1 1 300px; min-width: 240px; }
.signup-band .form-success svg { color: var(--orange); }
.signup-band .form-success p { color: var(--text-on-dark); }
/* Turnstile is mounted on first focus, so this slot spends most of its life
   empty — and an empty flex child would still claim a 12px gap. When it does
   fill, it takes a line of its own beneath the field and button. */
.turnstile-slot:empty { display: none; }
.signup-form .turnstile-slot { flex: 1 0 100%; }
/* The point-of-collection line sits on the dark band, so it cannot use the
   muted grey the light forms use. --blue-200 clears 8.9:1 here. */
.signup-band .form-note { color: var(--blue-200); margin-top: 16px; }
.signup-band .form-note a { color: var(--text-on-dark); }
footer#signup { scroll-margin-top: 90px; }

/* ===== Footer: small print ===== */
.footer-bottom {
  background: var(--surface-page);
  border-top: 1px solid var(--border-subtle);
  padding: 24px 28px;
}
.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.legal {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.6;
  max-width: 720px;
  margin: 0;
  flex: 1 1 420px;
}
.legal .directors {
  display: block;
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
}
.footer-links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.footer-links a, .footer-links span {
  font-family: var(--font-rounded);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-links a { color: var(--text-strong); text-decoration: none; }
.footer-links a:hover { color: var(--orange-600); }
.footer-links a.linkedin { display: inline-flex; gap: 8px; align-items: center; }
.footer-links a.linkedin svg { width: 16px; height: 16px; flex: 0 0 auto; }
.footer-links .copyright { color: var(--text-muted); }