/* Deployed from GitHub Actions on push to main. */
/* ---------- tokens ---------- */
:root {
  /* color — base scale */
  --red-700: #a8121f;
  --red-600: #c9192a;
  --red-500: #d91f2b;
  --red-400: #e8434d;
  --black-900: #0d0d0e;
  --black-800: #161719;
  --black-700: #212327;
  --steel-700: #3a3d42;
  --steel-600: #53575e;
  --steel-500: #6f7379;
  --steel-400: #9a9ea4;
  --steel-300: #c2c5c9;
  --steel-200: #dfe1e3;
  --steel-100: #eef0f1;
  --white: #ffffff;
  --yellow-500: #f2b705;
  --yellow-600: #c99304;

  /* color — brand as channels, for the grid/wash/tint layers that need alpha */
  --brand-rgb: 217, 31, 43;
  --ink-rgb: 58, 61, 66;

  /* color — semantic */
  --brand-primary: var(--red-500);
  --brand-primary-hover: var(--red-600);
  --brand-primary-active: var(--red-700);
  --brand-on-primary: var(--white);
  --surface-page: var(--white);
  --surface-sunken: var(--steel-100);
  --surface-border: var(--steel-200);
  --text-primary: var(--black-900);
  --text-secondary: var(--steel-600);
  --text-tertiary: var(--steel-500);
  --text-link: var(--red-600);
  --text-link-hover: var(--red-700);
  --surface-inverse: var(--black-800);
  --text-on-inverse: var(--steel-300);

  /* type scale — fluid, so the landing H1 is the largest type on the site
     at every width instead of being out-scaled by the subpages */
  --size-h1: clamp(30px, 4.4vw, 52px);
  --size-h2: clamp(24px, 2.8vw, 34px);
  --size-h3: clamp(20px, 2vw, 24px);
  --size-product-h2: clamp(26px, 2.6vw, 35px);

  /* typography */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --leading-tight: 1.05;
  --leading-relaxed: 1.65;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.12em;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* spacing / radius / shadow / motion */
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(13, 13, 14, 0.12);
  --ease-standard: cubic-bezier(.2, .7, .3, 1);
  --ease-arrive: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: 120ms;
  --duration-standard: 200ms;
  --duration-reveal: 380ms;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--surface-page);
  color: var(--text-primary);
}

a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }

/* Inline links in prose: padding-block grows the pointer target to the 24px
   WCAG 2.2 AA minimum without changing the line box around it. */
.lead a, .secondary a, .doors-sub a, .door-copy a, .process-step-copy a, .not-this a {
  padding-block: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

img { max-width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 18px;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.skip-link:focus { left: 0; color: var(--brand-on-primary); }

@keyframes idPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes statusConfirm {
  from { opacity: .01; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes errorSignal {
  0% { opacity: .01; transform: translateX(-5px); }
  65% { opacity: 1; transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ---------- page frame ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
.page { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- header ---------- */
.header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 16px 32px;
  border-bottom: 3px solid var(--brand-primary);
  background: var(--surface-sunken);
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
.header-logo { height: 66px; width: 132px; object-fit: contain; display: block; }

/* nav sits between the mark and the status block; the hub page grew two doors,
   so every page needs a way back to both */
.site-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--steel-600);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.site-nav a:hover { color: var(--brand-primary); box-shadow: inset 0 -2px 0 var(--brand-primary); }
.site-nav a[aria-current="page"] { color: var(--black-900); box-shadow: inset 0 -2px 0 var(--brand-primary); }
.site-nav a:focus-visible { outline: 3px solid var(--yellow-500); outline-offset: 2px; }

.header-meta { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; flex-wrap: wrap; }

.phase-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--black-800);
  border: 1px solid rgba(217, 31, 43, .4);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

.eyebrow { display: flex; align-items: center; gap: var(--space-3); }
.eyebrow-bar { width: 28px; height: 3px; background: var(--brand-primary); }
.eyebrow-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--red-600);
}

.status-group { display: flex; align-items: center; gap: 10px; }
.status-dot {
  width: 7px; height: 7px;
  background: var(--brand-primary);
  border-radius: var(--radius-full);
  animation: idPulse 1.8s ease-in-out infinite;
  flex: none;
}
.status-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--steel-600);
}

/* ---------- main background treatment ---------- */
.main {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--surface-page);
}

/* "Blueprint & Hazard Stripe" — the substrate half of the north star.
   Two rule densities (fine 16px, coarse 96px) read as drafting paper; the red
   radial wash anchors the composition to the hero. Masked off toward the
   bottom so it stays a substrate rather than wallpaper. */
.main-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 110% 65% at 76% -8%, rgba(var(--brand-rgb), .10), transparent 62%),
    linear-gradient(to right, rgba(var(--ink-rgb), .085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb), .085) 1px, transparent 1px),
    linear-gradient(to right, rgba(var(--ink-rgb), .042) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb), .042) 1px, transparent 1px);
  background-size: 100% 100%, 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
}

.content-wrap {
  position: relative;
  z-index: 1;
  padding: 72px 40px 88px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------- two-column hero ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  width: 100%;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .col-right { order: 2; }
  .hero-grid .col-left { order: 1; }
}

.col-left { display: flex; flex-direction: column; min-width: 0; }
.col-left-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; width: 100%; }

.headline {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-h1);
  line-height: 0.96;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
  max-width: 24ch;
  /* Red is the site's one accent. Spending it on the largest element on the
     page leaves nothing for the CTA to stand against, so the headline is ink
     and the accent lands on the phrase that carries the meaning. */
  color: var(--black-900);
  text-wrap: balance;
}
.headline .accent { color: var(--brand-primary); }

.lead {
  margin: 0;
  font-size: 19px;
  line-height: var(--leading-relaxed);
  color: var(--steel-700);
  max-width: 72ch;
  text-wrap: pretty;
}

.secondary {
  margin: 0;
  font-size: 16px;
  line-height: var(--leading-relaxed);
  color: var(--steel-500);
  max-width: 72ch;
  text-wrap: pretty;
}

.button-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: 6px; }
/* WCAG 2.2 AA Target Size (Minimum): inline links still need a 24x24 CSS px
   pointer target, which bare inline text does not give them. */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 6px 2px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ---------- buttons / inputs ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-md);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--brand-primary-hover); }
.btn:active { background: var(--brand-primary-active); transform: scale(0.97); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

.btn-lg { height: 48px; padding: 0 22px; }
.btn-md { height: 42px; padding: 0 18px; }

.btn-secondary {
  background: var(--white);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
}
.btn-secondary:hover { background: var(--surface-sunken); color: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.btn-secondary:active { color: var(--brand-primary-active); border-color: var(--brand-primary-active); transform: scale(0.97); }

.input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.input:focus-visible { border-color: var(--brand-primary); }
.btn:focus-visible,
.panel-cta:focus-visible,
.text-link:focus-visible,
.footer-mail:focus-visible,
.door a:focus-visible,
.skip-link:focus-visible,
.input:focus-visible {
  outline: 3px solid var(--yellow-500);
  outline-offset: 3px;
}
.input.has-error { border-color: var(--red-600); }
.input-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--black-800);
}

/* ---------- right column / product panel ---------- */
.col-right { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }

.product-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--white);
}
.product-title-block { margin: 16px 14px 0; }
.product-eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  font-style: italic;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--steel-500);
}
.product-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-product-h2);
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
  color: var(--black-900);
}

.panel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 14px;
  margin-top: 14px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-sunken);
}
.panel-meta-left,
.panel-meta-right { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--steel-600); }
.panel-meta-right { text-align: right; }

.viewer-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 340px;
  background: #0b0d10;
}
.viewer-wrap iframe { display: block; width: 100%; min-height: 340px; border: 0; background: #0b0d10; }

.panel-cta {
  display: block;
  padding: 16px 14px;
  background: var(--brand-primary);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  border-top: 1px solid var(--surface-border);
  transition: background var(--duration-standard) ease-out;
}
.panel-cta:hover { background: var(--red-600); color: var(--white); }

/* ---------- spec grid 2x2 (product-panel) ---------- */
.spec-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--surface-border);
}
.spec-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px;
  min-width: 0;
  border-bottom: 1px solid var(--surface-border);
}
.spec-cell:nth-child(odd) { border-right: 1px solid var(--surface-border); }
.spec-cell:nth-last-child(-n+2) { border-bottom: 0; }
.spec-cell-label {
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--steel-500);
}
.spec-cell-value {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  letter-spacing: var(--tracking-wide);
  color: var(--black-900);
  overflow-wrap: anywhere;
}

/* ---------- spec strip ---------- */
.spec-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  border-top: 1px solid var(--surface-border);
  margin-top: 12px;
  justify-content: space-evenly;
}
.spec-strip-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 28px 20px 0;
  flex: 1 1 220px;
}
.spec-strip-cell + .spec-strip-cell { padding-left: 28px; border-left: 1px solid var(--surface-border); }
@media (max-width: 900px) {
  .spec-strip-cell + .spec-strip-cell { border-left: none; padding-left: 0; }
}
.spec-strip-value { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-size: 21px; color: var(--black-900); }
.spec-strip-label { font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--steel-500); line-height: 1.45; }

/* ---------- signup card ---------- */
/* The site's one persistent conversion point. DESIGN.md called for a steel-500
   fill; at 14px that put the sub-copy at 3.3:1 and made this the only card on
   the site that shares no vocabulary with .contact-card, which does the same
   job on build-with-us. Same sunken surface, with a red rule marking it as the
   action. */
.signup-card {
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface-sunken);
}
.signup-heading-block { display: flex; flex-direction: column; gap: 6px; }
.signup-heading { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 21px; letter-spacing: var(--tracking-tight); text-transform: uppercase; margin: 0; color: var(--black-900); }
.signup-sub { margin: 0; font-size: 14px; line-height: var(--leading-relaxed); color: var(--steel-600); text-wrap: pretty; }

.signup-confirm {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--black-900);
  border: 1px solid var(--surface-border);
  padding: 10px 12px;
  background: var(--white);
}

/* Form and confirmation share one slot so the card does not collapse and
   re-expand when the async state swaps. */
.signup-slot { display: flex; flex-direction: column; }
/* An email field has no business being 1100px wide on a desktop viewport —
   cap the measure so the field reads as a field, not as the page. */
.signup-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; max-width: 560px; }
.signup-input-wrap { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* Reserved slot: the message appears in place instead of pushing the submit
   button down the page when validation fails. */
.signup-error {
  min-height: 17px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--red-700);
  visibility: hidden;
}
.signup-error.visible { visibility: visible; animation: errorSignal var(--duration-standard) var(--ease-arrive) both; }
.signup-confirm.is-revealed { display: block; animation: statusConfirm 300ms var(--ease-arrive) both; }

/* ---------- section rhythm ---------- */
.section { display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: 24px; }
.section-head { display: flex; flex-direction: column; gap: 10px; }

/* ---------- hazard stripe ---------- */
.hazard-stripe {
  height: 12px;
  background: repeating-linear-gradient(45deg, var(--yellow-500) 0 16px, var(--black-900) 16px 32px);
}

/* ---------- footer ---------- */
.footer {
  padding: 26px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-on-inverse);
  background: var(--surface-inverse);
}
.footer-right { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.footer-mail { display: inline-flex; align-items: center; min-height: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--red-400); }
.footer-mail:hover { color: var(--white); }
.footer-tag { font-family: var(--font-mono); font-size: 12px; color: var(--steel-400); }

/* ---------- responsive: header wrap ---------- */
@media (max-width: 900px) {
  .header { padding: 14px 20px; row-gap: var(--space-3); }
  .site-nav { order: 3; width: 100%; margin-left: 0; }
  .site-nav a { padding: 8px 10px; }
  .header-meta { margin-left: auto; }
}

@media (max-width: 560px) {
  .content-wrap { padding: 48px 20px 64px; gap: 32px; }
  .header-logo { height: 52px; width: 104px; }
  .header-meta { width: 100%; margin-left: 0; }
  .signup-card { padding: var(--space-5); }
  .spec-grid-2x2 { grid-template-columns: 1fr; }
  .spec-cell:nth-child(odd) { border-right: 0; }
  .spec-cell:nth-last-child(-n+2):not(:last-child) { border-bottom: 1px solid var(--surface-border); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- two doors ---------- */
.doors { padding: 56px 0 8px; }
.doors-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-h2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  margin: 10px 0 0;
  color: var(--black-900);
  max-width: 34ch;
}
.doors-sub { margin: 10px 0 0; font-size: 15px; color: var(--steel-600); max-width: 60ch; line-height: var(--leading-relaxed); }
.doors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: 28px;
}
@media (max-width: 900px) {
  .doors-grid { grid-template-columns: 1fr; }
}
.door {
  position: relative;
  border: 1px solid var(--surface-border);
  border-top: 3px solid var(--brand-primary);
  border-radius: var(--radius-md);
  padding: 28px 24px 24px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.door--prospect { border-top-color: var(--black-900); }
.door-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-widest);
  color: var(--steel-500);
}
.door-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--black-900);
}
.door-copy {
  margin: 0;
  font-size: 15px;
  line-height: var(--leading-relaxed);
  color: var(--steel-600);
}
.door-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

/* ---------- systems catalog grid (reuses .product-panel per entry) ---------- */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}
.systems-grid .product-panel { height: 100%; }
.panel-meta-right.is-concept { color: var(--steel-600); }

/* ---------- process steps (build-with-us) ---------- */
.process-steps { display: grid; gap: var(--space-6); counter-reset: step; margin-top: 28px; }
.process-step { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-5); align-items: start; }
.process-step-num {
  counter-increment: step;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: 22px;
  color: var(--brand-primary);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-full);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.process-step-num::before { content: counter(step, decimal-leading-zero); }
.process-step-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 6px;
  color: var(--black-900);
}
.process-step-copy { margin: 0; font-size: 15px; line-height: var(--leading-relaxed); color: var(--steel-600); max-width: 60ch; }

/* ---------- contact form (build-with-us) ---------- */
.contact-card {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--surface-sunken);
  margin-top: 12px;
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-field.full { grid-column: 1 / -1; }
.contact-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--steel-600); }
.contact-textarea {
  width: 100%; min-height: 120px; padding: 10px 14px; resize: vertical;
  font-family: var(--font-body); font-size: 14px; color: var(--text-primary);
  background: var(--white); border: 1px solid var(--steel-300); border-radius: var(--radius-md);
}
.contact-textarea:focus { outline: none; border-color: var(--brand-primary); }

/* ---------- not-this list ---------- */
.not-this { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.not-this li { display: flex; gap: 10px; font-size: 14px; color: var(--steel-600); line-height: var(--leading-relaxed); }
.not-this li::before { content: "—"; color: var(--brand-primary); font-weight: var(--weight-bold); flex: none; }