/*
 * 256bank.com — site styles
 *
 * Layout + components only. All design tokens (color, typography, spacing,
 * radii, motion) come from the design-system files dropped in alongside:
 *   tokens.css    → CSS custom properties
 *   themes.css    → .theme-light / .theme-dark token resolution
 *   typography.css → .d-* utility classes
 *
 * Convention: NEVER hardcode design values here. Always reference vars.
 * Marketing surface = Helvetica Neue (document-sans), light theme default
 * with dark hero islands, per BRAND.md.
 */

/* ── Site-local token additions ───────────────────────────────────── */
/*
 * The canonical design-system tokens cover the app surface. The marketing
 * site needs two small dark-theme bridge colors that the canonical
 * palette does not provide: a readable "build" chip foreground and a
 * readable error-status foreground on dark navy backgrounds.
 *
 * Anchored to existing palette where possible (copper-300 for build),
 * with one explicit soft-red for form errors. If the design-system later
 * introduces semantic-on-dark variants, swap these to var(--*) references.
 */
:root {
  --site-build-on-dark:  #D89863;  /* alias for var(--copper-300) — used in chip-build */
  --site-error-on-dark:  #FF8B8B;  /* soft red for form-status.error on dark navy */
}

/* ── Reset ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-document-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  background: var(--t-bg);
  color: var(--t-text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--d-theme) var(--e-smooth),
              color var(--d-theme) var(--e-smooth);
}
img, svg { display: block; max-width: 100%; }
a { color: var(--purple-600); text-decoration: none; transition: color var(--d-fast) var(--e-out); }
a:hover { color: var(--purple-500); }
button { font: inherit; cursor: pointer; }

/* Selection */
::selection { background: var(--purple-200); color: var(--navy-900); }
.theme-dark ::selection { background: var(--purple-400); color: var(--navy-950); }

/* Focus ring — visible, brand-coloured */
:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Layout primitives ────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.wrap-narrow {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--s-6);
}

section { padding: var(--s-12) 0; }

@media (min-width: 720px) {
  section { padding: var(--s-13) 0; }
  .wrap, .wrap-narrow { padding: 0 var(--s-7); }
}

/* ── Header ───────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--t-bg);
  border-bottom: 1px solid var(--t-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 64px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--t-text-1);
}

.brand-lockup .mark { width: 28px; height: 28px; }

.brand-lockup .wordmark {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  letter-spacing: var(--ls-compact);
}

.brand-lockup .wordmark .accent {
  color: var(--purple-500);
}

.theme-dark .brand-lockup .wordmark .accent {
  color: var(--purple-300);
}

.primary-nav {
  display: none;
  align-items: center;
  gap: var(--s-6);
}

.primary-nav a {
  font-family: var(--font-document-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  color: var(--t-text-2);
  letter-spacing: var(--ls-minimal);
  padding: var(--s-2) 0;
  border-bottom: 1px solid transparent;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: var(--t-text-1);
  border-bottom-color: var(--purple-500);
}

@media (min-width: 720px) {
  .primary-nav { display: flex; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.signin-pill {
  display: inline-flex;
  align-items: center;
  background: var(--purple-500);
  color: #fff;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-family: var(--font-document-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--d-fast) var(--e-out);
}
.signin-pill:hover { background: var(--purple-600); color: #fff; }
.theme-dark .signin-pill { background: var(--purple-400); color: var(--navy-900); }
.theme-dark .signin-pill:hover { background: var(--purple-300); }

.theme-toggle {
  background: transparent;
  border: 1px solid var(--t-border-strong);
  color: var(--t-text-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.theme-toggle:hover {
  color: var(--t-text-1);
  border-color: var(--t-text-2);
}

.theme-toggle .label-light,
.theme-toggle .label-dark { display: none; }
.theme-light .theme-toggle .label-dark { display: inline; }
.theme-dark .theme-toggle .label-light { display: inline; }

/* Mobile nav toggle */
.menu-toggle {
  display: inline-flex;
  background: transparent;
  border: 1px solid var(--t-border-strong);
  color: var(--t-text-1);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.menu-toggle:hover { background: var(--t-surface-1); }

@media (min-width: 720px) {
  .menu-toggle { display: none; }
}

/* Mobile slide-down nav */
.mobile-nav {
  display: none;
  background: var(--t-bg-elevated);
  border-bottom: 1px solid var(--t-border);
  padding: var(--s-4) var(--s-6) var(--s-6);
}
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; padding: 0; margin: 0; }
.mobile-nav li { padding: var(--s-3) 0; border-bottom: 1px solid var(--t-border); }
.mobile-nav li:last-child { border-bottom: none; }
.mobile-nav a {
  color: var(--t-text-1);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  display: block;
}

/* ── Hero (dark island) ───────────────────────────────────────────── */

.hero {
  /* Always dark, even when site is in light theme — per BRAND.md
     "marketing site stays light-themed; hero materials stay dark for
     institutional register". */
  background: var(--grad-platform);
  color: rgba(255,255,255,0.95);
  padding: var(--s-13) 0 var(--s-14);
  position: relative;
  overflow: hidden;
}

.hero::before {
  /* Subtle radial glow behind the mark */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, rgba(167,139,250,0.22) 0%, transparent 55%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  gap: var(--s-9);
  align-items: center;
}

@media (min-width: 880px) {
  .hero-inner {
    /* minmax(0, 1fr) so the text column can shrink and leaves room
       for the square mark on the right. align-items: stretch lets
       the mark grow to match the text-column's natural height. */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-12);
    align-items: stretch;
  }
}

.hero-eyebrow {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-extreme);
  text-transform: uppercase;
  color: var(--purple-300);
  margin: 0 0 var(--s-5);
}

.hero-title {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-light);
  font-size: clamp(36px, 6vw, 56px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-5);
  color: #fff;
}

.hero-title .em {
  color: var(--purple-300);
  font-weight: var(--fw-regular);
}

.hero-lead {
  font-family: var(--font-document-sans);
  font-size: var(--fs-17);
  line-height: var(--lh-relaxed);
  color: rgba(255,255,255,0.75);
  margin: 0 0 var(--s-7);
  max-width: 560px;
}

.hero-mark {
  /* Narrow / stacked layout: keep the previous fixed footprint so the
     mark doesn't blow up on small screens where it sits below the
     text. The desktop rule below grows it to text-block height. */
  width: 168px;
  height: 168px;
  filter: drop-shadow(0 8px 28px rgba(167,139,250,0.32));
  justify-self: center;
  align-self: center;
}
/* When the hero mark is rendered via the ambient JS (div + injected SVG),
   make sure the SVG fills the container exactly so it scales the same
   way the prior <img> did. */
.hero-mark[data-mark-ambient] {
  display: block;
  line-height: 0;
}
.hero-mark[data-mark-ambient] > svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (min-width: 720px) {
  .hero-mark { width: 220px; height: 220px; }
}
@media (min-width: 880px) {
  /* Side-by-side layout: grow the mark to the height of the text
     column and force a square via aspect-ratio so width tracks
     height (the image is rendered square anyway, no distortion). */
  .hero-mark {
    width: auto;
    height: 100%;
    max-height: 480px;          /* sanity cap on very tall viewports */
    aspect-ratio: 1 / 1;
    align-self: stretch;
    justify-self: end;
    object-fit: contain;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ── Buttons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-minimal);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
  text-decoration: none;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: #fff;
  color: var(--navy-900);
}
.btn-primary:hover { background: var(--purple-100); color: var(--navy-900); }

.btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.25);
}
.btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
}

.btn-light-primary {
  background: var(--purple-500);
  color: #fff;
}
.btn-light-primary:hover { background: var(--purple-600); color: #fff; }

.btn-light-ghost {
  background: transparent;
  color: var(--navy-900);
  border-color: var(--t-border-strong);
}
.btn-light-ghost:hover { background: var(--t-surface-2); color: var(--navy-900); }

.theme-dark .btn-light-ghost {
  color: rgba(255,255,255,0.9);
}

/* ── Section eyebrow + heading ────────────────────────────────────── */

.section-eyebrow {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-extreme);
  text-transform: uppercase;
  color: var(--purple-500);
  margin: 0 0 var(--s-4);
}
.theme-dark .section-eyebrow { color: var(--purple-300); }

.section-title {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-light);
  font-size: clamp(28px, 4vw, 40px);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin: 0 0 var(--s-5);
  color: var(--t-text-1);
}

.section-lead {
  font-family: var(--font-document-sans);
  font-size: var(--fs-17);
  line-height: var(--lh-relaxed);
  color: var(--t-text-2);
  margin: 0 0 var(--s-9);
  max-width: 640px;
}

/* ── Trust strip (logos / labels under hero) ──────────────────────── */

.trust-strip {
  background: var(--t-bg);
  border-bottom: 1px solid var(--t-border);
  padding: var(--s-7) 0;
}

/* ── Nums bar ─────────────────────────────────────────────────────────
   Four-cell honest stats strip sitting between the trust strip and the
   portfolio teaser. Each cell is plain prose — no fabricated figures,
   no aspirational metrics. */

.nums-bar {
  background: var(--t-surface-2);
  border-bottom: 1px solid var(--t-border);
}
.nums-bar .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  padding-top: var(--s-9);
  padding-bottom: var(--s-9);
}
@media (min-width: 640px)  { .nums-bar .wrap { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nums-bar .wrap { grid-template-columns: repeat(4, 1fr); } }

.nums-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  border-left: 2px solid var(--t-border);
}
.nums-val {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-light);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--t-text-1);
}
.nums-lbl {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-extreme);
  text-transform: uppercase;
  color: var(--t-text-3);
}
.nums-note {
  font-family: var(--font-document-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-relaxed);
  color: var(--t-text-2);
  margin: 0;
}

/* ── Card → live-link affordance ──────────────────────────────────────
   Portfolio cards that point to a shipped live product get an
   "Open live ↗" footer pill. Card-link spans the whole card. */
.card.card-link {
  position: relative;
  transition: border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
  cursor: pointer;
}
.card.card-link:hover {
  border-color: var(--purple-300);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(123, 94, 167, .12);
}
.card.card-link a.card-cover {
  position: absolute; inset: 0;
  text-indent: -9999px;
  z-index: 1;
}
.card .card-live {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--purple-500);
  color: #fff;
  font-family: var(--font-document-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-minimal);
  text-decoration: none;
  width: max-content;
}
.card .card-live:hover { background: var(--purple-600); }
.card .card-live-host {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  opacity: .85;
  margin-left: 4px;
}

.trust-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-7);
  align-items: center;
  justify-content: center;
}

.trust-label {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-extreme);
  text-transform: uppercase;
  color: var(--t-text-3);
}

.trust-item {
  font-family: var(--font-document-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--t-text-2);
  letter-spacing: var(--ls-minimal);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--t-border-strong);
  border-radius: var(--r-pill);
}

/* ── Project cards ────────────────────────────────────────────────── */

.cards {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards-3 { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: var(--t-surface-1);
  border: 1px solid var(--t-border);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.theme-light .card { background: #fff; }

.card:hover {
  border-color: var(--purple-300);
  transform: translateY(-2px);
}

.card-head {
  display: flex;
  /* flex-start so the status chip aligns with the TOP of the title,
     not its vertical centre. Multi-line titles (e.g. "Youth banking
     · MyMonii") would otherwise drop the chip below single-line
     siblings; now every chip lines up on the first line of text. */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}

.card-title {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  letter-spacing: var(--ls-compact);
  margin: 0;
  color: var(--t-text-1);
}

.card-tagline {
  font-family: var(--font-document-sans);
  font-size: var(--fs-13);
  color: var(--t-text-3);
  margin: 0 0 var(--s-5);
  letter-spacing: var(--ls-minimal);
}

.card-body {
  font-family: var(--font-document-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--t-text-2);
  margin: 0 0 var(--s-5);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--t-text-3);
  letter-spacing: var(--ls-minimal);
}

/* ── Status chip ──────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-family: var(--font-document-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chip-live    { color: var(--success); background: rgba(45,106,79,0.10); }
.chip-pilot   { color: var(--purple-600); background: rgba(123,94,167,0.10); }
.chip-build   { color: var(--warning); background: rgba(184,134,45,0.12); }
.chip-internal { color: var(--ink-mid); background: rgba(76,79,92,0.10); }
.theme-dark .chip-live    { color: #6FD09A; background: rgba(111,208,154,0.10); }
.theme-dark .chip-pilot   { color: var(--purple-300); background: rgba(167,139,250,0.12); }
.theme-dark .chip-build   { color: var(--site-build-on-dark); background: rgba(216,152,99,0.14); }
.theme-dark .chip-internal { color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); }

/* ── 2-up content row (image / text side-by-side) ─────────────────── */

.two-up {
  display: grid;
  gap: var(--s-9);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 880px) {
  .two-up { grid-template-columns: 1fr 1fr; gap: var(--s-12); }
}

/* ── Approach gesture-demo block ──────────────────────────────────── */

.gesture-demo {
  display: grid;
  gap: var(--s-7);
  align-items: center;
  background: var(--grad-platform);
  color: rgba(255,255,255,0.9);
  border-radius: var(--r-2xl);
  padding: var(--s-12) var(--s-9);
  position: relative;
  overflow: hidden;
}
@media (min-width: 720px) {
  .gesture-demo { grid-template-columns: auto 1fr; gap: var(--s-12); padding: var(--s-13) var(--s-12); }
}

.gesture-mark-host {
  --mark-size: 200px;
  width: var(--mark-size);
  height: var(--mark-size);
  position: relative;
  justify-self: center;
}

.gesture-instruction {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-extreme);
  text-transform: uppercase;
  color: var(--purple-300);
  margin: 0 0 var(--s-3);
}

.gesture-headline {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-light);
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: var(--ls-compact);
  line-height: var(--lh-snug);
  color: #fff;
  margin: 0 0 var(--s-5);
}

.gesture-body {
  font-family: var(--font-document-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.gesture-status {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: rgba(255,255,255,0.6);
  letter-spacing: var(--ls-minimal);
}

/* ── Press-and-hold mark visual ───────────────────────────────────── */

.mark-button {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: block;
  transition: transform var(--d-normal) var(--e-smooth);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mark-button:hover { transform: scale(1.02); }
.mark-button:active { transform: scale(0.98); }
.mark-button svg { width: 100%; height: 100%; }

/* Progress ring overlay (drawn by mark-gesture.js) */
.mark-progress {
  position: absolute;
  inset: -10px;
  pointer-events: none;
}

/* ── Roles / people grid ──────────────────────────────────────────── */

.role-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .role-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .role-grid { grid-template-columns: 1fr 1fr 1fr; } }

.role {
  border: 1px solid var(--t-border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  background: var(--t-surface-1);
}
.theme-light .role { background: #fff; }

.role-eyebrow {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-extreme);
  text-transform: uppercase;
  color: var(--purple-500);
  margin: 0 0 var(--s-2);
}
.theme-dark .role-eyebrow { color: var(--purple-300); }

.role-name {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-18);
  margin: 0 0 var(--s-2);
  color: var(--t-text-1);
}

.role-body {
  font-family: var(--font-document-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  color: var(--t-text-2);
  margin: 0;
}

/* ── Contact paths + form ─────────────────────────────────────────── */

.path-picker {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-9);
}
@media (min-width: 720px) { .path-picker { grid-template-columns: 1fr 1fr 1fr; } }

.path-pick {
  background: var(--t-surface-1);
  border: 1px solid var(--t-border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-align: left;
  color: var(--t-text-1);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.theme-light .path-pick { background: #fff; }
.path-pick:hover { border-color: var(--purple-300); }
.path-pick[aria-pressed="true"] {
  border-color: var(--purple-500);
  background: var(--purple-50);
}
.theme-dark .path-pick[aria-pressed="true"] {
  background: rgba(167,139,250,0.08);
  border-color: var(--purple-400);
}

.path-pick .role-eyebrow { margin-bottom: var(--s-1); }
.path-pick .path-title {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  margin: 0 0 var(--s-2);
  color: var(--t-text-1);
}
.path-pick .path-sub {
  font-family: var(--font-document-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--t-text-2);
  margin: 0;
}

.form {
  display: grid;
  gap: var(--s-5);
}

.field {
  display: grid;
  gap: var(--s-2);
}

.field label {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--t-text-3);
}

.field input,
.field textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--t-border-strong);
  background: var(--t-bg-elevated);
  color: var(--t-text-1);
  border-radius: var(--r-md);
  font-family: var(--font-document-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}

.field textarea { resize: vertical; min-height: 120px; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple-500);
}

/* Honeypot — visually hidden but in DOM */
.field-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

.form-status {
  font-family: var(--font-document-sans);
  font-size: var(--fs-13);
  color: var(--t-text-2);
  line-height: var(--lh-normal);
  flex: 1;
}
.form-status.ok    { color: var(--success); }
.form-status.error { color: var(--error); }
.theme-dark .form-status.ok    { color: #6FD09A; }
.theme-dark .form-status.error { color: var(--site-error-on-dark); }

/* ── Pillar list (approach page) ──────────────────────────────────── */

.pillar-list {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 720px) { .pillar-list { grid-template-columns: 1fr 1fr; } }

.pillar {
  border-left: 3px solid var(--purple-500);
  padding: var(--s-3) var(--s-5);
}
.theme-dark .pillar { border-left-color: var(--purple-400); }

.pillar h3 {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-18);
  margin: 0 0 var(--s-2);
  color: var(--t-text-1);
}

.pillar p {
  font-family: var(--font-document-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  color: var(--t-text-2);
  margin: 0;
}

/* ── Footer ───────────────────────────────────────────────────────── */

.site-footer {
  background: var(--t-bg);
  border-top: 1px solid var(--t-border);
  padding: var(--s-9) 0 var(--s-7);
  margin-top: var(--s-12);
}

.site-footer-inner {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .site-footer-inner { grid-template-columns: 2fr 1fr 1fr; gap: var(--s-9); }
}

.footer-brand .brand-lockup { margin-bottom: var(--s-3); }
.footer-brand p {
  font-family: var(--font-document-sans);
  font-size: var(--fs-13);
  color: var(--t-text-3);
  line-height: var(--lh-relaxed);
  margin: 0;
  max-width: 340px;
}

.footer-col h4 {
  font-family: var(--font-document-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-extreme);
  text-transform: uppercase;
  color: var(--t-text-3);
  margin: 0 0 var(--s-4);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}

.footer-col a {
  font-family: var(--font-document-sans);
  font-size: var(--fs-14);
  color: var(--t-text-2);
}
.footer-col a:hover { color: var(--purple-500); }

.footer-meta {
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 1px solid var(--t-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--t-text-4);
  letter-spacing: var(--ls-minimal);
}

/* ── Utilities ────────────────────────────────────────────────────── */

.center { text-align: center; }
.muted  { color: var(--t-text-3); }
.tabular { font-variant-numeric: tabular-nums; }

.placeholder {
  border: 1px dashed var(--warning);
  background: rgba(184,134,45,0.06);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  color: var(--warning);
}