/* ==========================================================================
   Consigliere: shared design system.
   Editorial Humanist (default), with Warm Dark as the alternate theme.
   See DESIGN.md for the visual contract.

   Square structure, warm off-white paper, near-black ink, deep forest green
   as the primary accent and warm rust as the secondary. The brand motif is
   the restrained fedora mark, used in the masthead, application, footer, and
   at the center of the hand-arranged eight-person hero network. The alternate
   theme inverts the mood, not the layout: warm near-black charcoal, soft
   ivory ink, muted lighter green and rust.
   No gradients, glass, stock imagery, rounded SaaS cards, or shadow-heavy
   decoration.
   Mobile first. No horizontal scroll at 360px. Tap targets >= 40px.

   Token roles (values change per theme, roles do not):
   --accent*   primary accent: deep forest green (both themes, adapted)
   --warmth    secondary accent: warm rust, links between people, editorial
               details, the odd word that should feel hand-marked
   ========================================================================== */

/* --- tokens: editorial humanist (default) ---------------------------------- */

:root {
  --bg: oklch(96.2% 0.016 92);
  --surface: oklch(93.5% 0.02 92);
  --surface-2: oklch(91% 0.022 90);
  --ink: oklch(20% 0.012 80);
  --ink-muted: oklch(42% 0.02 80);
  --accent: oklch(36% 0.07 152);
  --accent-lift: oklch(31% 0.065 152);
  --accent-fill: oklch(37% 0.072 152);
  --accent-fill-hover: oklch(33% 0.07 152);
  --warmth: oklch(44% 0.1 48);
  --line: oklch(84% 0.03 88);
  --line-strong: oklch(65% 0.05 85);
  --button-ink: oklch(96.5% 0.014 92);
  --danger: oklch(48% 0.16 27);
  --ok: oklch(43% 0.1 145);
  --radius: 0px;
  color-scheme: light;

  --serif: Petrona, Georgia, 'Times New Roman', Times, serif;
  --wordmark: 'Limelight', 'Suez One', Georgia, serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --t-display: clamp(3.35rem, 9.2vw, 7rem);
  --t-h1: clamp(2.125rem, 5.8vw, 3.5rem);
  --t-h2: clamp(1.55rem, 3.6vw, 2.35rem);
  --t-h3: clamp(1.18rem, 2.2vw, 1.5rem);
  --t-lead: clamp(1.08rem, 1.8vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.78rem;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: clamp(4rem, 10vw, 7.5rem);

  --measure: 68ch;
  --page: 74rem;
  --tap: 44px;
}

/* --- tokens: warm dark (alternate, ?theme=dark) ----------------------------
   Same charcoal room; the green and rust are muted and lifted so they stay
   harmonious and AA-conformant on the dark ground. */

html[data-theme='dark'] {
  --bg: oklch(16% 0.012 70);
  --surface: oklch(19% 0.014 70);
  --surface-2: oklch(22% 0.014 70);
  --ink: oklch(94% 0.018 82);
  --ink-muted: oklch(71% 0.018 75);
  --accent: oklch(70% 0.08 155);
  --accent-lift: oklch(77% 0.075 155);
  --accent-fill: oklch(68% 0.085 155);
  --accent-fill-hover: oklch(74% 0.08 155);
  --warmth: oklch(66% 0.1 48);
  --line: oklch(29% 0.025 75);
  --line-strong: oklch(43% 0.05 77);
  --button-ink: oklch(17% 0.012 70);
  --danger: oklch(67% 0.13 27);
  --ok: oklch(68% 0.08 145);
  color-scheme: dark;
}

/* --- reset --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Smooth scrolling belongs to the long landing page and its anchors. Task
   surfaces such as /apply move between steps instantly, so a programmatic
   scroll never animates under a finger that is already reaching for a
   button. */
html:has(body.landing) {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  letter-spacing: 0.008em;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid var(--accent-lift);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.landing) {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* The hero network is the one place where "almost no duration" would be
     wrong: an infinite animation at 0.01ms would thrash. It settles into
     a still composition instead, with each pulse parked at its own point
     along its wire. */
  .human-network,
  .human-network .nw-pulse {
    animation: none !important;
  }
  .human-network .nw-pulse {
    stroke-dashoffset: var(--rest, 50);
    opacity: 0.9;
  }
  .human-network .nw-pulse-soft {
    opacity: 0.65;
  }
}

/* --- type ---------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
}
h2 {
  font-size: var(--t-h2);
}
h3 {
  font-size: var(--t-h3);
  line-height: 1.25;
}

.display {
  font-family: var(--serif);
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
}

/* one italic emphasis word per headline, in the editorial register:
   never more than one */
.display em {
  font-style: italic;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-lead);
  color: var(--ink-muted);
  line-height: 1.55;
}

.muted {
  color: var(--ink-muted);
}

.small {
  font-size: var(--t-small);
}

.micro {
  font-size: var(--t-micro);
  color: var(--ink-muted);
}

/* small caps label above a section, led by a small rust tilde: the
   editorial kicker, so every section opens like a magazine department.
   The tilde is the house separator. No elongated dashes anywhere in
   rendered copy or in generated `content`. */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}

/* The hero eyebrow is a sentence of positioning, not a label, so it keeps its
   own capitalisation and reads at copy size. */
.eyebrow-plain {
  text-transform: none;
  letter-spacing: 0.06em;
  font-size: var(--t-small);
  font-weight: 500;
}

.eyebrow::before {
  content: '~';
  color: var(--warmth);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  flex: none;
}

strong,
b {
  font-weight: 600;
  color: var(--ink);
}

a {
  color: var(--accent-lift);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

code,
kbd,
pre {
  font-family: var(--mono);
  font-size: 0.9em;
}

code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 0.1em 0.4em;
}

/* --- layout -------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--s-5);
  padding-left: max(var(--s-5), env(safe-area-inset-left));
  padding-right: max(var(--s-5), env(safe-area-inset-right));
}

.narrow {
  max-width: 44rem;
}

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

.stack > * + * {
  margin-top: var(--s-4);
}

.stack-lg > * + * {
  margin-top: var(--s-6);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* hairline gold rule, the house ornament */
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-6) 0;
}

.rule-short {
  border: 0;
  border-top: 1px solid var(--accent);
  width: 3rem;
  margin: var(--s-5) 0;
  opacity: 0.8;
}

/* --- header / tabs ------------------------------------------------------- */

.masthead {
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-2) 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink);
  border: 0;
}

.wordmark:hover {
  color: var(--accent-lift);
}

/* The masthead carries the fedora alone, as the click-back-home link. The
   wordmark itself opens the homepage hero instead. The link keeps a full
   40px+ square tap target even though the visible mark is small. */
.wordmark-icon {
  justify-content: center;
  min-width: 44px;
}

.wordmark-icon .fedora-mark {
  width: 2.5rem;
  margin-right: 0;
}

/* The wordmark gets the page's one cinematic title-card gesture. Limelight
   is a clean prohibition-era deco face: sharp caps with a marquee geometry,
   used only here so the rest of the Editorial Humanist system does not turn
   into a costume. */
.hero-wordmark {
  margin: 0 0 var(--s-4);
  font-family: var(--wordmark);
  font-size: clamp(3rem, 12vw, 6.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.tabs {
  display: flex;
  gap: var(--s-4);
  align-items: center;
}

.tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--t-small);
  color: var(--ink-muted);
  border: 0;
}

.tab:hover,
.tab[aria-current='page'] {
  color: var(--accent-lift);
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--s-5);
  border: 1px solid var(--accent-fill);
  border-radius: var(--radius);
  background: var(--accent-fill);
  color: var(--button-ink);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  background: var(--accent-fill-hover);
  border-color: var(--accent-fill-hover);
  color: var(--button-ink);
  /* a fine inner keyline, like a ruleset tightening around the word */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--button-ink) 35%, transparent);
}

.btn:active {
  background: var(--accent);
  border-color: var(--accent);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn-ghost:hover {
  background: transparent;
  color: var(--accent-lift);
  border-color: var(--accent);
}

.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ink-muted);
  padding: 0 var(--s-3);
}

.btn-quiet:hover {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}

/* The Integrated plan CTA uses the warm rust accent instead of the forest
   green, so the paid path reads as a distinct action. */
.btn-accent {
  background: var(--warmth);
  border-color: var(--warmth);
  color: var(--button-ink);
}

.btn-accent:hover {
  background: color-mix(in oklch, var(--warmth) 86%, black);
  border-color: color-mix(in oklch, var(--warmth) 86%, black);
  color: var(--button-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--button-ink) 35%, transparent);
}

.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--bg);
}

.btn-lg {
  min-height: 52px;
  padding: 0 var(--s-6);
  font-size: var(--t-body);
}

.btn-block {
  width: 100%;
}

/* --- surfaces ------------------------------------------------------------ */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
}

.panel-quiet {
  background: transparent;
  border: 1px solid var(--line);
  padding: var(--s-5);
}

.note {
  border-left: 1px solid var(--accent);
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  color: var(--ink-muted);
  font-size: var(--t-small);
}

/* --- forms --------------------------------------------------------------- */

label,
.label {
  display: block;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
}

input[type='text'],
input[type='email'],
input[type='url'],
input[type='search'],
input[type='password'],
select,
textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 1rem; /* 16px minimum, or iOS zooms on focus */
  line-height: 1.5;
  transition: border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--ink-muted) 70%, transparent);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.field + .field {
  margin-top: var(--s-5);
}

.hint {
  font-size: var(--t-micro);
  color: var(--ink-muted);
  margin-top: var(--s-2);
}

.error {
  font-size: var(--t-small);
  color: var(--danger);
  margin-top: var(--s-2);
}

/* choice list: multi-select and radio groups, square by design */
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: var(--t-body);
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.choice:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

.choice[aria-pressed='true'],
.choice.is-selected {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--ink);
}

.choice-key {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--accent);
  min-width: 1.25rem;
}

input[type='checkbox'],
input[type='radio'] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--accent);
  flex: none;
  margin-top: 0.3rem;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--tap);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}

.switch-row label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-body);
  color: var(--ink);
}

/* --- lists, tables, badges ---------------------------------------------- */

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

.bullets li {
  padding-left: var(--s-5);
  position: relative;
  color: var(--ink);
}

.bullets li::before {
  content: '~';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 600;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}

th {
  text-align: left;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.15rem var(--s-3);
  border: 1px solid var(--line-strong);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.badge-gold {
  border-color: var(--accent);
  color: var(--accent);
}

.badge-ok {
  border-color: var(--ok);
  color: var(--ok);
}

.badge-danger {
  border-color: var(--danger);
  color: var(--danger);
}

/* copy-to-clipboard field: value + button, square, no wrap surprises */
.copyfield {
  display: flex;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.copyfield input {
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: var(--t-small);
  min-width: 0;
}

.copyfield .btn {
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--accent-lift);
  white-space: nowrap;
}

.copyfield .btn:hover {
  background: transparent;
  color: var(--ink);
}

/* --- progress (application flow) ---------------------------------------- */

.progress {
  height: 2px;
  background: var(--line);
  width: 100%;
}

.progress > span {
  display: block;
  height: 2px;
  background: var(--accent);
  border-right: 2px solid var(--warmth);
  transition: width 0.25s ease;
}

/* --- utilities ----------------------------------------------------------- */

.center {
  text-align: center;
}

.center p,
.center .lead {
  margin-left: auto;
  margin-right: auto;
}

.nowrap {
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer {
  border-top: 1px solid var(--line);
  padding: var(--s-6) 0 var(--s-8);
  color: var(--ink-muted);
  font-size: var(--t-small);
}

/* --- landing page -------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 100;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  display: flex;
  align-items: center;
  background: var(--accent-fill);
  color: var(--button-ink);
  border: 0;
  transform: translateY(calc(-100% - var(--s-5)));
}

.skip-link:focus {
  transform: translateY(0);
}

.landing section {
  border-bottom: 1px solid var(--line);
}

.hero {
  min-height: min(49rem, calc(100svh - 57px));
  display: flex;
  align-items: center;
  padding: clamp(3rem, 7vw, 5.75rem) 0 clamp(2.75rem, 6vw, 5rem);
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-copy,
.membership-inner,
.section-heading,
.method-heading,
.steps,
.provenance-layout > *,
.closing-inner {
  min-width: 0;
}

.hero-copy {
  max-width: 52rem;
  text-align: center;
}

.hero-title {
  max-width: 25ch;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.08;
  text-wrap: balance;
}

.hero-lead {
  max-width: 47ch;
  margin: var(--s-6) auto 0;
  color: var(--ink-muted);
  font-size: var(--t-lead);
  line-height: 1.55;
}

.hero-subtitle {
  margin: var(--s-3) auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--warmth);
  line-height: 1.3;
}

.hero-formlead {
  max-width: 44ch;
  margin: var(--s-6) auto 0;
  color: var(--ink);
  font-weight: 600;
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  line-height: 1.4;
}

.hero-caption {
  margin: var(--s-3) auto 0;
  color: var(--ink-muted);
  font-size: var(--t-small);
  letter-spacing: 0.01em;
}

.hero-cta {
  margin-top: var(--s-6);
}

.hero-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  align-items: start;
  width: 100%;
  max-width: 34rem;
  margin: var(--s-6) auto 0;
}

.hero-entry .hero-cta {
  justify-self: center;
  width: auto;
  margin-top: var(--s-1);
  min-height: var(--tap);
  padding: 0 var(--s-7);
  white-space: nowrap;
}

.hero-entry input[aria-invalid='true'] {
  border-color: var(--danger);
}

.hero-entry-error {
  grid-column: 1 / -1;
  margin: var(--s-1) 0 0;
}

.hero-terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-4);
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
  min-width: 0;
  color: var(--ink);
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.35;
}

.hero-terms li {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .hero-terms li {
    white-space: normal;
    text-align: center;
  }
}

.hero-terms li + li::before {
  content: '\00b7';
  color: var(--accent);
  margin-right: var(--s-4);
}

.hero-human {
  min-width: 0;
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: var(--s-4);
}

.hero-pullquote {
  width: min(100%, 42rem);
  margin: 0 auto;
  padding: 0;
  color: var(--warmth);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-style: italic;
  line-height: 1.35;
  text-align: center;
}

.hero-pullquote p {
  max-width: none;
  margin: 0;
}

/* The restored centered-fedora community artwork. Eight human busts form
   the earlier hand-arranged composition around a fedora hub, connected to
   the hub and to each other. Rust pulses travel the wires on staggered
   timings. Strokes use theme tokens, so one original inline SVG serves
   warm paper and the dark alternate. */
.human-network {
  display: block;
  width: min(100%, 46rem);
  height: auto;
  margin: 0 auto;
  color: var(--accent);
  animation: thread-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nw-wire {
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 0.48;
}

/* each figure is filled with the page colour so it reads as one solid
   person, not as a circle beside an unrelated curve */
.nw-person path {
  fill: var(--bg);
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* one pulse per wire. pathLength is normalised to 100 in the markup, so
   the dash pattern below means "a short mark travelling the whole run",
   whatever the real length of that run. */
.nw-pulse {
  fill: none;
  stroke: var(--warmth);
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-dasharray: 9 91;
  stroke-dashoffset: var(--rest, 50);
  will-change: stroke-dashoffset;
  animation: nw-travel var(--dur, 5s) linear var(--delay, 0s) infinite;
}

.nw-pulse-soft {
  stroke-width: 3.4;
  opacity: 0.8;
}

@keyframes nw-travel {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

.nw-hub-ring {
  fill: var(--bg);
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.9;
  stroke-opacity: 0.34;
}

html[data-theme='dark'] .nw-hub-img {
  filter: invert(1) hue-rotate(180deg) brightness(1.05);
}

.nw-label {
  fill: var(--accent);
  font-family: var(--sans, inherit);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nw-hat path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.66;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nw-hat .nw-hat-brim {
  fill: var(--bg);
}

.nw-hat .nw-hat-dent {
  stroke-width: 0.5;
  opacity: 0.7;
}

.nw-hat .nw-hat-band {
  stroke: var(--warmth);
  stroke-width: 0.95;
}

@keyframes thread-in {
  from { opacity: 0; }
  to { opacity: 1; }
}



.problem,
.method,
.guarantees,
.provenance {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.section-heading {
  display: grid;
  gap: var(--s-3);
  max-width: 54rem;
}

.section-heading h2,
.section-heading p {
  margin-bottom: 0;
}

.contrast-grid {
  display: grid;
  margin-top: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--line);
}

.contrast-grid article {
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}

.contrast-grid h3 {
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  margin-bottom: var(--s-4);
}

.contrast-grid p:last-child {
  color: var(--ink-muted);
  margin-bottom: 0;
}

.contrast-index {
  margin-bottom: var(--s-7);
  color: var(--accent);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
}

.method-layout {
  display: grid;
  gap: clamp(3rem, 8vw, 6.5rem);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}

.steps h3 {
  margin-bottom: var(--s-3);
}

.steps p {
  color: var(--ink-muted);
  margin-bottom: 0;
}

.step-number {
  color: var(--accent);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  padding-top: 0.34rem;
}

.guarantees {
  background: var(--surface);
  border-top-color: var(--line-strong);
}

.guarantees-layout {
  display: grid;
  gap: clamp(3rem, 8vw, 6rem);
}

.promise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}

.promise-list li {
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.promise-list li:nth-child(odd) {
  padding-right: var(--s-4);
}

.promise-list li:nth-child(even) {
  padding-left: var(--s-4);
  border-left: 1px solid var(--line);
}

.promise-list li::before {
  content: '~';
  margin-right: var(--s-3);
  color: var(--accent);
  font-weight: 600;
  flex: none;
}

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

.provenance h2 {
  margin-bottom: var(--s-5);
}

.provenance .lead {
  max-width: 58ch;
  margin-bottom: 0;
}

.closing {
  padding: clamp(5rem, 13vw, 10rem) 0;
}

.closing-inner {
  max-width: 50rem;
}

.closing h2 {
  font-size: clamp(2.3rem, 7vw, 4.75rem);
  max-width: 12ch;
}

.closing .lead {
  margin: var(--s-5) 0 var(--s-6);
  max-width: 48ch;
}

.footer p {
  margin: 0;
}

/* The footer's own layout lives with the footer pages, further down, because
   the same markup is now shared by every page on the site. */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
}

@media (min-width: 48rem) {
  .hero-grid {
    grid-template-columns: minmax(19rem, 0.86fr) minmax(24rem, 1.14fr);
  }

  .contrast-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contrast-grid article {
    padding: var(--s-7) var(--s-7) 0 0;
    border-bottom: 0;
  }

  .contrast-grid article + article {
    border-left: 1px solid var(--line);
    padding-right: 0;
    padding-left: var(--s-7);
  }

  .method-layout {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }

  .method-heading {
    position: sticky;
    top: 7rem;
    align-self: start;
  }

  .guarantees-layout {
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
  }

  .provenance-layout {
    grid-template-columns: minmax(12rem, 0.5fr) minmax(0, 1.5fr);
    align-items: start;
  }
}

/* At real desktop widths the artwork keeps the larger share of the hero,
   while the qualifiers remain comfortably readable and may wrap once. */
@media (min-width: 75rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2.25rem, 4vw, 3rem);
  }

  .hero-terms {
    gap: var(--s-2) var(--s-3);
  }

  .hero-terms li + li::before {
    margin-right: var(--s-3);
  }
}

@media (max-width: 42rem) {
  .tabs .tab[href='/apply'] {
    display: none;
  }
}

@media (max-width: 30rem) {
  .page {
    padding-left: max(var(--s-4), env(safe-area-inset-left));
    padding-right: max(var(--s-4), env(safe-area-inset-right));
  }

  .masthead-inner {
    gap: var(--s-3);
  }

  .wordmark {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
  }

  .tabs {
    gap: var(--s-3);
  }

  .tab {
    font-size: var(--t-micro);
  }

  .hero {
    min-height: 0;
  }

  .hero-human .human-network {
    width: calc(100% + 1.5rem);
    max-width: none;
    margin-left: -0.75rem;
  }

  .hero-terms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2) var(--s-3);
  }

  .hero-terms li + li::before {
    display: none;
  }

  .promise-list {
    grid-template-columns: 1fr;
  }

  .promise-list li:nth-child(odd),
  .promise-list li:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --- the hat: the masthead mark, application signature, page sign-off,
   and the hub of the hero network. Four open strokes with a rust band. */

/* approved white-hat outlined fedora (raster mark), mirrors coming-soon */
.fedora-img {
  width: 2.5rem;
  height: auto;
  flex: none;
  display: block;
}

html[data-theme='dark'] .fedora-img {
  filter: invert(1) hue-rotate(180deg) brightness(1.05);
}

.fedora-mark {
  width: 2.1rem;
  height: auto;
  margin-right: var(--s-2);
  flex: none;
  overflow: visible;
}

.fedora-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fedora-mark .fm-dent {
  stroke-width: 1.15;
  opacity: 0.72;
}

.fedora-mark .fm-band {
  stroke: var(--warmth);
  stroke-width: 2.1;
}

/* --- manifesto ----------------------------------------------------------
   The one loud moment on a quiet page. Editorial scale, no ornament. */

.manifesto {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.manifesto-lines {
  margin: 0 0 var(--s-5);
  max-width: 24ch;
  font-family: var(--serif);
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.manifesto-lines span {
  display: block;
}

.manifesto-lines .manifesto-cause {
  color: var(--warmth);
  font-style: italic;
}

/* Josh's evidence lines: quieter annotations under two of the manifesto
   beats, set small in the sans so they read as footnotes to the claim,
   never as part of it. The rust tilde is the house separator. */
.manifesto-lines .manifesto-evidence {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 46ch;
  margin: var(--s-1) 0 var(--s-4);
}

.manifesto-lines .manifesto-evidence::before {
  content: '~';
  color: var(--warmth);
  font-weight: 600;
  margin-right: var(--s-2);
}

.manifesto-close-wrap {
  display: grid;
  place-items: center;
  margin-top: clamp(2.75rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--accent);
}

.manifesto-close {
  margin: 0;
  max-width: 58ch;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}

.aside-line {
  margin: var(--s-5) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lead);
  color: var(--warmth);
}

/* --- membership: one page, two modes ------------------------------------
   Grow is the default. Scale is the same page with a different panel, kept
   in the URL so it can be linked and bookmarked. */

.membership {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.mode-switch {
  display: inline-flex;
  margin: var(--s-5) 0 var(--s-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
}

.mode-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: 8rem;
  padding: 0 var(--s-5);
  border: 0;
  color: var(--ink-muted);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.mode-tab + .mode-tab {
  border-left: 1px solid var(--line-strong);
}

.mode-tab:hover {
  color: var(--accent-lift);
}

.mode-tab[aria-current='true'] {
  background: var(--accent-fill);
  color: var(--button-ink);
}

.mode-panel {
  max-width: 56rem;
  border-top: 1px solid var(--accent);
  padding-top: var(--s-5);
}

.mode-panel:focus-visible {
  outline: 2px solid var(--accent-lift);
  outline-offset: 6px;
}

.mode-panel h3 {
  margin: var(--s-2) 0 var(--s-5);
  font-size: var(--t-h2);
  font-weight: 400;
}

.plan-intro {
  margin: 0 0 var(--s-5);
  max-width: var(--measure);
  font-family: var(--serif);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
}

.plan-price {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--t-small);
  letter-spacing: 0.04em;
}

.plan-price strong {
  color: var(--accent);
  font-weight: 600;
}

.plan-points {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  max-width: var(--measure);
}

.plan-points li {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.plan-points li::before {
  content: '~';
  position: absolute;
  left: 0;
  top: var(--s-3);
  color: var(--warmth);
  font-weight: 600;
}

.plan-note {
  margin: var(--s-4) 0 0;
  max-width: var(--measure);
  color: var(--ink-muted);
  font-size: var(--t-small);
}

.membership-intro {
  max-width: 27ch;
  font-size: clamp(1.65rem, 3.2vw, 2.7rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.018em;
}

/* Mode visibility. Grow shows unless the page is in scale mode. */

[data-mode-panel='scale'] {
  display: none;
}

html[data-mode='scale'] [data-mode-panel='grow'] {
  display: none;
}

html[data-mode='scale'] [data-mode-panel='scale'] {
  display: block;
}

/* Without JavaScript the head script never runs, so the ordinary link to
   /?mode=scale#scale still works: :target reveals the panel. */

[data-mode-panel='scale']:target {
  display: block;
}

body:has([data-mode-panel='scale']:target) [data-mode-panel='grow'] {
  display: none;
}

@media (max-width: 30rem) {
  .mode-switch {
    display: flex;
    width: 100%;
  }

  .mode-tab {
    flex: 1 1 50%;
    min-width: 0;
    padding: 0 var(--s-3);
  }
}

/* --- application flow (/apply) ------------------------------------------
   One question per screen. The page is a single column so nothing competes
   with the question being asked. Product register: familiar controls, real
   labels, no invented affordances. */

.apply-main {
  padding: clamp(2.5rem, 7vw, 5rem) 0 var(--s-9);
}

.apply-page {
  max-width: 44rem;
}

.apply-free-quote {
  margin: 0 0 clamp(2.25rem, 5vw, 3.5rem);
  color: var(--warmth);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 5vw, 3.15rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-wrap: balance;
}

/* The same fedora closes every page and opens the application. */
.footer-mark {
  width: 2.75rem;
  color: var(--accent);
  flex: none;
}

.footer-mark svg {
  width: 100%;
}

.footer-mark .fm-band {
  stroke: var(--warmth);
}

/* restored-draft notice and submit alerts sit above the question */

.apply-notice,
.apply-alert {
  border: 1px solid var(--line);
  padding: var(--s-4);
  margin-bottom: var(--s-6);
}

.apply-notice p,
.apply-alert p {
  margin: 0;
  max-width: none;
}

.apply-notice p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  font-size: var(--t-small);
  color: var(--ink-muted);
}

.apply-alert {
  border-color: var(--danger);
}

.apply-alert-title {
  font-family: var(--serif);
  font-size: var(--t-h3);
  color: var(--ink);
  margin-bottom: var(--s-2) !important;
}

.apply-alert-body {
  color: var(--ink-muted);
  font-size: var(--t-small);
}

.apply-alert-actions:empty,
#form-alert-actions:empty {
  display: none;
}

#form-alert-actions {
  margin-top: var(--s-4);
}

/* the step itself */

/* Only the question block moves. The action row stays put so a fast click on
   Continue or Back can never land on a moving target. */
.step-count,
.step-body {
  animation: step-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-body {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.step-count {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 var(--s-4);
}

.step-question {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 5.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance;
}

.step-hint {
  margin: var(--s-4) 0 0;
  color: var(--ink-muted);
  font-size: var(--t-small);
  max-width: 54ch;
}

.step-fields {
  margin-top: clamp(2rem, 5vw, 2.75rem);
}

.step-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: clamp(2rem, 5vw, 2.75rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.step-key {
  margin: var(--s-3) 0 0;
}

.btn.is-loading {
  opacity: 0.7;
}

/* fields: the error line keeps its space whether or not it has words in it,
   so an appearing message never shifts the buttons under a pointer. */

.step-fields .error {
  min-height: 1.4em;
}

.step-fields .field + .field {
  margin-top: var(--s-4);
}

/* a name is not 44rem wide; long-form answers may be */
.step-fields input,
.step-fields .select {
  max-width: 32rem;
}

.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select {
  border-color: var(--danger);
}

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

.btn-sm {
  min-height: 40px;
  padding: 0 var(--s-4);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
}

.voice-status {
  margin: 0;
}

/* native select, with an affordance drawn in CSS rather than an image */

.select {
  position: relative;
  display: block;
}

.select select {
  padding-right: var(--s-7);
}

.select::after {
  content: '';
  position: absolute;
  right: var(--s-4);
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.35rem;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
  pointer-events: none;
}

/* multi-select choice list */

.choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

/* the choice is a <label>, so the uppercase field-label treatment has to be
   undone: these are sentences to read, not headers */
.choices .choice {
  margin-bottom: 0;
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  align-items: center;
}

.choice-label {
  flex: 1 1 auto;
  min-width: 0;
}

.choice:has(input:checked),
.choice.is-selected {
  border-color: var(--accent);
  background: var(--surface);
}

.choice:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent-lift);
  outline-offset: 2px;
}

/* review screen */

.review {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  border-top: 1px solid var(--line);
}

.review-block {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.review-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.review-question {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 400;
  margin: 0;
  max-width: 40ch;
}

.review-head .btn {
  flex: none;
}

.review-list {
  margin: var(--s-3) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1) 0;
}

.review-list dt {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--s-3);
}

.review-list dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-small);
  overflow-wrap: anywhere;
}

.data-agreement {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: var(--s-4);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.55;
  text-transform: none;
  cursor: pointer;
}

.data-agreement input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--accent-fill);
}

.data-agreement-copy {
  display: grid;
  gap: var(--s-1);
}

.data-agreement-copy strong {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
}

.data-agreement-copy span {
  color: var(--ink-muted);
}

.data-agreement:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent-lift);
  outline-offset: 2px;
}

/* Where the limit named in the agreement is actually written down. Sits just
   under the checkbox, outside its label, in the same quiet register. */
.data-agreement-link {
  margin: var(--s-2) 0 0;
  padding-left: calc(1.25rem + var(--s-3) + var(--s-4));
  font-size: var(--t-small);
}

.data-agreement + .error,
.data-agreement-link + .error {
  min-height: 1.5em;
  margin-top: var(--s-2);
}

/* confirmation */

.apply-done-title {
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-5);
}

.apply-next {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  counter-reset: next;
}

.apply-next li {
  counter-increment: next;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}

.apply-next li::before {
  content: '0' counter(next);
  color: var(--accent);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  padding-top: 0.42rem;
}

.apply-next h2 {
  grid-column: 2;
  font-size: var(--t-h3);
  margin: 0 0 var(--s-2);
}

.apply-next p {
  grid-column: 2;
  color: var(--ink-muted);
  font-size: var(--t-small);
  margin: 0;
}

.apply-done-panel {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--accent);
}

.apply-done-h {
  font-size: var(--t-h3);
  margin-bottom: var(--s-2);
}

.apply-done-panel .copyfield {
  margin-top: var(--s-4);
}

.apply-done-panel .btn-lg {
  margin-top: var(--s-4);
}

.apply-done-panel .hint:empty {
  display: none;
}

@media (max-width: 30rem) {
  .step-actions .btn-lg,
  .apply-done-panel .btn-lg {
    width: 100%;
  }

  .step-actions .btn-quiet {
    padding-left: 0;
  }

  .review-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }

  .review-head .btn-quiet {
    padding-left: 0;
  }

  .apply-next li {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .apply-next li::before {
    grid-column: 1;
    padding-top: 0;
  }

  .apply-next h2,
  .apply-next p {
    grid-column: 1;
  }
}

/* --- member sign-in and private profile ----------------------------------
   One restrained task surface, not a dashboard shell. Familiar controls and
   fixed product type sizes keep the interface quiet; the editorial display
   face is reserved for page and section headings. */

.tab-button {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--sans);
  cursor: pointer;
}

.member-auth-main {
  min-height: calc(100svh - 57px);
  display: flex;
  align-items: center;
  padding: clamp(3rem, 8vw, 7rem) 0;
}

.member-login-layout {
  display: grid;
  gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
}

.member-login-intro h1 {
  max-width: 12ch;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
}

.member-login-intro .lead {
  max-width: 34rem;
  margin-top: var(--s-5);
}

.member-link-explainer {
  max-width: 34rem;
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--accent);
  color: var(--ink-muted);
  font-size: var(--t-small);
}

.member-link-explainer p:last-child {
  margin-bottom: 0;
}

.member-link-label {
  color: var(--accent);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}

.member-login-form-wrap {
  border-top: 1px solid var(--line-strong);
}

.member-login-form {
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}

/* Why a visitor was sent back here: expired link, invalid link, or sign out. */
.member-login-notice {
  margin: 0 0 var(--s-5);
  padding: var(--s-4);
  border-left: 2px solid var(--accent);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: var(--t-small);
}

.member-signout-note {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.member-login-form .btn {
  margin-top: var(--s-5);
}

/* The two email actions sit together; the second sits closer to the first. */
.member-login-actions .btn + .btn {
  margin-top: var(--s-3);
}

/* Second-step code entry, revealed after a code is requested. */
.passcode-step {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.passcode-step #login-code {
  font-family: var(--sans);
  font-size: 1.4rem;
  letter-spacing: 0.4em;
  text-align: center;
}

.passcode-step #login-code-resend {
  margin-top: var(--s-2);
}

/* "or continue with" divider before the social buttons. */
.member-login-social {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.member-login-or {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.member-login-or::before,
.member-login-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.member-login-social .btn {
  text-align: center;
}

.member-login-consent {
  margin: var(--s-5) 0 0;
  color: var(--ink-muted);
  font-size: var(--t-micro);
  line-height: 1.55;
}

.member-login-consent a {
  color: var(--accent-lift);
}

.member-sensitive-action {
  margin-top: var(--s-3);
}

.member-login-form .error,
.member-profile-form .error {
  min-height: 1.45em;
}

.member-form-status {
  min-height: 1.55em;
  margin: var(--s-4) 0 0;
  color: var(--accent-lift);
  font-size: var(--t-small);
}

.member-login-help {
  padding-top: var(--s-6);
}

.member-login-help h2 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: var(--s-2);
}

.member-login-help p {
  color: var(--ink-muted);
  font-size: var(--t-small);
  margin-bottom: var(--s-3);
}

@media (min-width: 52rem) {
  .member-login-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
  }

  .member-login-form-wrap {
    border-top-color: var(--accent);
  }
}

/* private profile loading / invalid-link states */

.member-loading,
.member-auth-error {
  min-height: calc(100svh - 57px);
  padding-top: clamp(4rem, 10vw, 8rem);
  padding-bottom: clamp(4rem, 10vw, 8rem);
}

.member-auth-error h1 {
  max-width: 17ch;
  font-size: clamp(2.35rem, 6vw, 4.25rem);
}

.member-auth-error .lead {
  max-width: 42rem;
  margin-bottom: var(--s-6);
}

.skeleton {
  display: block;
  width: min(42rem, 80%);
  height: 1rem;
  margin-top: var(--s-4);
  background: var(--surface-2);
  animation: skeleton-pulse 1.4s ease-in-out infinite alternate;
}

.skeleton-title {
  width: min(28rem, 70%);
  height: 3rem;
  margin-top: 0;
}

.skeleton-short {
  width: min(22rem, 55%);
}

@keyframes skeleton-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* private profile structure */

.member-main {
  min-height: calc(100svh - 57px);
}

.member-welcome {
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.member-welcome-inner {
  display: grid;
  gap: var(--s-7);
  align-items: end;
}

.member-welcome h1 {
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  margin-bottom: var(--s-3);
}

.member-welcome .lead {
  margin-bottom: 0;
}

.member-plan-note {
  padding-top: var(--s-4);
  border-top: 1px solid var(--accent);
  color: var(--ink-muted);
  font-size: var(--t-small);
}

.member-plan-note p:last-child {
  margin: 0;
}

.member-section-nav {
  position: sticky;
  top: 57px;
  z-index: 15;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}

.member-section-nav .page {
  display: flex;
  align-items: stretch;
  gap: var(--s-5);
  min-width: max-content;
}

.member-section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  border: 0;
  color: var(--ink-muted);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.member-section-nav a:hover {
  color: var(--accent-lift);
}

.member-layout {
  display: grid;
  gap: clamp(3rem, 8vw, 6rem);
  padding-top: var(--s-7);
  padding-bottom: var(--s-9);
  align-items: start;
}

.member-section {
  scroll-margin-top: 8rem;
  padding: clamp(2.75rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--line);
}

.member-profile-form > .member-section:first-child {
  border-top-color: var(--accent);
}

.member-section-heading {
  max-width: 40rem;
  margin-bottom: var(--s-7);
}

.member-section-heading h2 {
  font-size: 2rem;
  margin-bottom: var(--s-3);
}

.member-section-heading > p:last-child {
  color: var(--ink-muted);
  font-size: var(--t-small);
  margin-bottom: 0;
}

.member-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

.member-field-grid .field + .field {
  margin-top: 0;
}

.member-field-grid-lower {
  margin-top: var(--s-6);
}

.member-wide-field {
  margin-top: var(--s-5);
}

.label-optional {
  margin-left: var(--s-1);
  color: var(--ink-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

.member-context-fields {
  margin-top: var(--s-6);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}

.member-context-field {
  padding-top: var(--s-5);
}

.member-context-field + .member-context-field {
  border-top: 1px solid var(--line);
}

.member-add-context {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.member-add-context-row {
  display: flex;
  align-items: stretch;
  gap: var(--s-3);
}

.member-add-context-row .select {
  flex: 1 1 auto;
  min-width: 0;
}

.member-add-context-row .btn {
  flex: none;
}

.member-switch-row {
  align-items: flex-start;
}

.member-switch-row > div {
  min-width: 0;
}

.member-switch-row label {
  font-weight: 600;
}

.member-switch-row .hint {
  margin-bottom: 0;
}

.member-switch-row input {
  margin-top: 0.45rem;
}

.member-select-field {
  max-width: 28rem;
  margin-top: var(--s-6);
}

.member-pending-list {
  border-top: 1px solid var(--line);
}

.member-empty,
.member-pending-item {
  margin: 0;
  padding: var(--s-5) 0;
  color: var(--ink-muted);
  font-size: var(--t-small);
  border-bottom: 1px solid var(--line);
}

.member-pending-item h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--s-3);
}

.member-pending-item p:last-child {
  margin-bottom: 0;
}

.member-pending-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.member-pending-actions .member-form-status {
  flex: 1 1 100%;
  margin: 0;
}

.member-savebar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  background: var(--bg);
  border-top: 1px solid var(--accent);
}

.member-savebar .member-form-status {
  margin: 0;
}

.member-private-column {
  min-width: 0;
}

.member-private-section {
  scroll-margin-top: 8rem;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
}

.member-private-section:first-child {
  border-top-color: var(--accent);
}

.member-private-section h2 {
  font-size: 1.65rem;
}

.member-copy-group {
  margin-top: var(--s-6);
}

.member-copy-group .copyfield {
  min-width: 0;
}

.member-copy-group .copyfield .btn {
  padding: 0 var(--s-3);
}

.member-copy-group .hint {
  min-height: 1.4em;
}

.member-referral-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--s-5) 0;
  border-top: 1px solid var(--line);
}

.member-referral-stats div {
  padding: var(--s-4) var(--s-3) var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.member-referral-stats div:nth-child(even) {
  padding-left: var(--s-3);
  border-left: 1px solid var(--line);
}

.member-referral-stats dt {
  min-height: 2.4em;
  color: var(--ink-muted);
  font-size: var(--t-micro);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.member-referral-stats dd {
  margin: var(--s-2) 0 0;
  color: var(--accent-lift);
  font-family: var(--serif);
  font-size: 1.7rem;
}

.member-referral-list {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
  border-top: 1px solid var(--line);
}

.member-referral-list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: var(--t-small);
}

@media (min-width: 44rem) {
  .member-welcome-inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
  }

  .member-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .member-layout {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.34fr);
  }

  .member-private-column {
    position: sticky;
    top: 8rem;
  }
}

@media (max-width: 38rem) {
  .member-savebar {
    align-items: stretch;
    flex-direction: column;
  }

  .member-savebar .btn {
    width: 100%;
  }

  .member-add-context-row {
    flex-direction: column;
  }

  .member-add-context-row .btn {
    width: 100%;
  }

  .member-referral-stats {
    grid-template-columns: 1fr;
  }

  .member-referral-stats div:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .member-referral-stats dt {
    min-height: 0;
  }
}

/* --- services page (/services) -------------------------------------------
   A founder-focused menu in the shared editorial system. The page stays
   deliberately free of pricing tiles, package claims, and agency theatre. */

.services main > section {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  border-bottom: 1px solid var(--line);
}

.services main > section:last-child {
  border-bottom: 0;
}

.services-open-inner,
.services-cta-inner {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}

.services-open-inner > *,
.services-cta-inner > * {
  max-width: 54rem;
}

.services-open h1 {
  margin-bottom: 0;
  max-width: 18ch;
  font-size: clamp(3rem, 8vw, 6.6rem);
  line-height: 0.95;
}

.services-open .lead,
.services-menu-heading .lead,
.services-cta .lead {
  margin-bottom: 0;
  max-width: 62ch;
}

.services-boundary {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-strong);
  color: var(--ink-muted);
  font-size: var(--t-small);
  max-width: 54ch;
}

.services-boundary strong {
  color: var(--ink);
}

.services-menu-heading {
  display: grid;
  gap: var(--s-3);
  max-width: 48rem;
}

.services-menu-heading h2,
.services-cta h2 {
  margin-bottom: 0;
}

.service-groups {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--line-strong);
}

.service-group {
  display: grid;
  grid-template-columns: minmax(12rem, 0.68fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2.25rem, 5vw, 4.5rem) 0;
  border-bottom: 1px solid var(--line);
}

.service-group-heading {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: var(--s-3);
  align-content: start;
}

.service-group-heading span {
  padding-top: 0.42rem;
  color: var(--warmth);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
}

.service-group-heading h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2.8vw, 2.35rem);
  line-height: 1.08;
}

.service-group > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0 clamp(2rem, 5vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-group > ul li {
  position: relative;
  margin: 0;
  padding: 0.72rem 0.2rem 0.72rem 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  line-height: 1.45;
}

.service-group > ul li::before {
  content: '~';
  position: absolute;
  left: 0;
  top: 0.73rem;
  color: var(--accent);
  font-weight: 600;
}

.service-qualifier {
  grid-column: 2;
  margin: calc(-1 * var(--s-2)) 0 0;
  color: var(--ink-muted);
  font-size: var(--t-small);
  max-width: 62ch;
}

.services-cta .btn {
  margin-top: var(--s-3);
}

.services-cta-note {
  margin: var(--s-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--t-small);
}

@media (max-width: 52rem) {
  .service-group {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .service-qualifier {
    grid-column: 1;
    margin-top: 0;
  }
}

@media (max-width: 38rem) {
  .services main > section {
    padding: 4rem 0;
  }

  .services-open h1 {
    font-size: clamp(2.8rem, 16vw, 4.5rem);
  }

  .service-group > ul {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FOOTER PAGES: /terms, /privacy, /contact, /careers, /about
   Plus the one shared site footer that links them.

   These are reading surfaces, not marketing surfaces. One measure-limited
   column of editorial prose, a rust rule opening each section, and nothing
   that competes with the text. Same tokens as everywhere else, so the warm
   dark alternate follows for free.
   ========================================================================== */

/* --- the shared footer, widened to carry the five document pages --------- */

.footer-inner {
  align-items: flex-start;
  gap: var(--s-6) var(--s-8);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  max-width: 34ch;
}

.footer-line,
.footer-fine {
  margin: 0;
}

.footer-fine {
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--ink-muted);
}

.footer-nav {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 8.5rem;
}

.footer-nav li {
  margin: 0;
}

/* A footer link is quiet until it is wanted: no rule underneath at rest, a
   rust rule on hover, and the standard focus ring for keyboards. */
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
}

.footer-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--warmth);
}

@media (min-width: 40rem) {
  .footer-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

/* --- document page shell -------------------------------------------------- */

.doc-main {
  padding: var(--s-7) 0 var(--s-9);
}

.doc-page {
  max-width: 58rem;
}

.doc-head {
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-7);
}

.doc-head h1 {
  font-size: var(--t-h1);
  margin: 0 0 var(--s-4);
  max-width: 26ch;
}

.doc-head .lead {
  max-width: 54ch;
  margin: 0;
}

.doc-stamp {
  margin: var(--s-5) 0 0;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- document body ------------------------------------------------------- */

/* The global `section` rule gives landing bands a tall rhythm. A reading page
   is one continuous column, so these sections take their own tighter one. */
.doc-body > section {
  padding: var(--s-6) 0 0;
  margin-bottom: var(--s-6);
  border-top: 1px solid var(--line);
}

.doc-body > section:first-child {
  padding-top: 0;
  border-top: 0;
}

.doc-body > section:last-child {
  margin-bottom: 0;
}

.doc-body h2 {
  position: relative;
  font-size: var(--t-h3);
  line-height: 1.25;
  margin: 0 0 var(--s-4);
  max-width: 34ch;
}

.doc-body h2::before {
  content: '~';
  display: block;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1;
  color: var(--warmth);
  margin-bottom: var(--s-3);
}

.doc-body p {
  max-width: 66ch;
  line-height: 1.65;
}

.doc-body p:last-child {
  margin-bottom: 0;
}

.doc-list {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  max-width: 66ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.doc-list li {
  position: relative;
  padding-left: var(--s-5);
  line-height: 1.65;
}

.doc-list li::before {
  content: '~';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--line-strong);
  font-weight: 600;
}

/* --- fact list: a term and its plain-English detail ---------------------- */

.doc-facts {
  margin: 0 0 var(--s-4);
  max-width: 66ch;
  display: grid;
  gap: var(--s-4);
}

.doc-facts dt {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-1);
}

.doc-facts dd {
  margin: 0;
  line-height: 1.65;
}

/* --- pending: an honest gap, marked as one ------------------------------- */

.doc-pending {
  border-left: 2px solid var(--line-strong);
  padding: 0 0 0 var(--s-4);
  margin: 0 0 var(--s-4);
  color: var(--ink-muted);
}

.doc-pending-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warmth);
  margin-right: var(--s-2);
}

.doc-code-line {
  margin-bottom: var(--s-4);
}

.doc-code {
  font-size: 0.95em;
  letter-spacing: 0.04em;
}

@media (min-width: 48rem) {
  .doc-facts {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--s-5) var(--s-5);
    align-items: baseline;
  }

  .doc-facts dt {
    margin-bottom: 0;
    padding-top: 0.25em;
  }
}

/* --- restored compact Contact page -------------------------------------- */

.contact-page .masthead-inner {
  min-height: 72px;
}

.contact-page .contact-fedora {
  display: block;
  width: 2.5rem;
  height: auto;
}

html[data-theme='dark'] .contact-page .contact-fedora {
  filter: invert(1) hue-rotate(180deg) brightness(1.05);
}

.contact-page .sf-mark {
  width: 2rem;
  height: 2.75rem;
  color: var(--line-strong);
  flex: none;
}

.contact-page .sf-mark path {
  stroke: currentColor;
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
}

.contact-page .map-embed {
  margin: 0 0 var(--s-4);
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}

.contact-page .map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 42rem) {
  .contact-page .masthead-inner {
    min-height: 56px;
  }

  .contact-page .tabs .tab[href='/apply'] {
    display: none;
  }

  .contact-page .sf-mark {
    width: 1.45rem;
    height: 2.2rem;
  }
}

/* ==========================================================================
   OUR NETWORK AND BLIND DOSSIER PREVIEW
   Honest editorial surfaces. The network roster remains private until each
   person approves their public details; the dossier is visibly fictionalized.
   ========================================================================== */

.doc-hero {
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line);
}

.doc-hero-inner {
  max-width: 62rem;
}

.doc-hero h1 {
  max-width: 18ch;
  margin: 0 0 var(--s-5);
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.doc-hero .lead {
  max-width: 58ch;
  margin: 0;
}

.network-intro,
.dossier-wrap {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.network-pending {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: 66rem;
}

.network-pending-mark {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.network-pending-mark .fedora-mark {
  width: 62%;
  margin: 0;
}

.network-pending h2 {
  max-width: 20ch;
  margin: 0 0 var(--s-4);
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.02;
}

.network-pending p:not(.eyebrow) {
  max-width: 64ch;
}

.network-pending .btn {
  margin-top: var(--s-3);
}

.dossier-hero {
  padding-bottom: var(--s-7);
}

.dossier-preview-note {
  display: inline-block;
  margin: var(--s-5) 0 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--warmth);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: var(--t-small);
}

.dossier-card {
  max-width: 68rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 10px 10px 0 var(--accent-wash);
}

.dossier-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(13rem, 0.6fr);
  gap: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: 2px solid var(--accent);
}

.dossier-card-head h2 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(1.85rem, 4vw, 3.1rem);
  line-height: 1.05;
}

.dossier-redactions {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  margin: 0;
}

.dossier-redactions div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.dossier-redactions dt {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dossier-redactions dd {
  margin: 0;
  font-family: var(--serif);
  color: var(--warmth);
}

.dossier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.dossier-grid section {
  min-width: 0;
  padding: var(--s-6);
  border-bottom: 1px solid var(--line);
}

.dossier-grid section:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid var(--line);
}

.dossier-grid section:nth-child(even) {
  padding-right: 0;
}

.dossier-index {
  margin: 0 0 var(--s-3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--warmth);
}

.dossier-grid h3,
.dossier-fit h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--t-h3);
  line-height: 1.2;
}

.dossier-grid p:last-child,
.dossier-fit p:last-child {
  margin-bottom: 0;
}

.dossier-fit {
  padding: var(--s-7) 0;
  max-width: 54rem;
}

.dossier-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
}

.dossier-actions p {
  max-width: 44ch;
  margin: 0;
}

.dossier-actions .btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.dossier-back {
  max-width: 68rem;
  margin-top: var(--s-5);
  text-align: right;
}

@media (max-width: 42rem) {
  .network-pending,
  .dossier-card-head,
  .dossier-grid {
    grid-template-columns: 1fr;
  }

  .network-pending-mark {
    width: 6rem;
  }

  .dossier-grid section,
  .dossier-grid section:nth-child(odd),
  .dossier-grid section:nth-child(even) {
    padding: var(--s-5) 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .dossier-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dossier-actions .row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ==========================================================================
   Public network roster, profile pages, lead forms, and the coming-soon
   footer line. Same Editorial Humanist rules: square, quiet, no cards for
   their own sake, no horizontal scroll at 360px.
   ========================================================================== */

.network-directory {
  padding-block: var(--s-8);
}

.network-directory-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}

.network-directory-head .lead {
  max-width: 56ch;
}

.network-search {
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-small);
  color: var(--ink-muted);
}

.network-search input {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  min-height: var(--tap);
  padding: 0 var(--s-4);
  width: min(20rem, 100%);
}

.network-search input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.network-status {
  color: var(--ink-muted);
  font-size: var(--t-small);
  margin: 0 0 var(--s-5);
}

.network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
  gap: var(--s-5) var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.network-person-link {
  display: grid;
  gap: var(--s-3);
  color: inherit;
  text-decoration: none;
}

.network-person-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  filter: saturate(0.92);
}

.network-person-link:hover .network-person-photo,
.network-person-link:focus-visible .network-person-photo {
  border-color: var(--accent);
}

.network-person-copy {
  display: grid;
  gap: 0.125rem;
}

.network-person-copy strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.25;
}

.network-person-copy span {
  color: var(--ink-muted);
  font-size: var(--t-small);
  line-height: 1.35;
}

/* --- individual profile -------------------------------------------------- */

.network-profile-main {
  padding-bottom: var(--s-8);
}

.profile-hero {
  padding-top: var(--s-7);
}

.profile-back {
  display: inline-block;
  margin-bottom: var(--s-5);
}

.profile-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

.profile-photo {
  width: 100%;
  max-width: 17.5rem;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.profile-title {
  font-size: var(--t-lead);
  color: var(--ink-muted);
  margin-top: 0;
}

.profile-intro-band {
  margin-top: var(--s-8);
  padding-block: var(--s-7);
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.profile-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--s-7);
  align-items: start;
}

.membership-note {
  border-left: 2px solid var(--warmth);
  padding-left: var(--s-4);
  margin-top: var(--s-5);
}

.membership-note p {
  margin-bottom: 0;
  color: var(--ink-muted);
}

/* --- shared lead forms (profile request, early access) -------------------- */

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

.lead-form label {
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-small);
}

.lead-form label > span {
  font-weight: 600;
}

.lead-form label small {
  color: var(--ink-muted);
  font-weight: 400;
}

.lead-form input[type='text'],
.lead-form input[type='email'],
.lead-form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  width: 100%;
}

.lead-form textarea {
  resize: vertical;
  min-height: 6rem;
}

.lead-form input:focus-visible,
.lead-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lead-form fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-3);
  margin: 0;
}

.lead-form legend {
  font-weight: 600;
  font-size: var(--t-small);
  padding-inline: var(--s-2);
}

.check-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  font-size: var(--t-body);
}

.check-row input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent-fill);
}

.form-message {
  margin: var(--s-3) 0 0;
  font-size: var(--t-small);
  color: var(--ink-muted);
}

.form-message.success {
  color: var(--ok);
}

.form-message.error {
  color: var(--danger);
}

.form-fine {
  color: var(--ink-muted);
  font-size: var(--t-small);
}

/* --- early access page ---------------------------------------------------- */

.early-access-body {
  padding-block: var(--s-8);
}

.early-access-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--s-7);
  align-items: start;
}

.early-offers {
  display: grid;
  gap: var(--s-6);
}

.early-offers article {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s-4);
}

.early-form-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--s-6);
}

/* --- services additions ---------------------------------------------------- */

.services-systems,
.services-scope {
  padding-block: var(--s-8);
  border-top: 1px solid var(--line);
}

.system-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--s-6);
}

.system-terms article {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s-4);
}

.system-terms span {
  display: block;
  color: var(--warmth);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}

.scope-list,
.services-facts {
  display: grid;
  gap: 0;
  margin: var(--s-6) 0 0;
}

.scope-list > div,
.services-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
}

.scope-list dt,
.services-facts dt {
  font-weight: 600;
}

.scope-list dt span {
  display: block;
  color: var(--accent);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--s-1);
}

.services-facts dd strong {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 500;
  margin-bottom: var(--s-1);
}

.scope-list dd,
.services-facts dd {
  margin: 0;
  color: var(--ink-muted);
}

.services-coming {
  padding-block: var(--s-8);
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.services-coming-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

/* --- footer coming-soon line ---------------------------------------------- */

.footer-coming-stack {
  margin-top: var(--s-2);
}

.footer-coming {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
}

.footer-coming + .footer-coming {
  margin-top: var(--s-1);
}

.footer-coming a {
  color: var(--ink-muted);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}

.footer-coming a:hover,
.footer-coming a:focus-visible {
  color: var(--accent);
}

/* --- small screens --------------------------------------------------------- */

@media (max-width: 52rem) {
  .profile-hero-grid,
  .profile-intro-grid,
  .early-access-grid,
  .services-coming-inner {
    grid-template-columns: 1fr;
  }

  .scope-list > div,
  .services-facts > div {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .network-search,
  .network-search input {
    width: 100%;
  }
}

/* --- private operator dashboard (/admin) ---------------------------------
   A working surface, not a marketing page: the editorial display face is kept
   for the page and section headings, numbers use the product sans, and the
   only decoration is the same square rule work as the rest of the system.
   Locked by default; the unlocked view is revealed by admin.js. */

.admin-main {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--s-9);
}

.admin-gate {
  max-width: 34rem;
  display: grid;
  gap: var(--s-5);
}

.admin-gate h1 {
  font-size: var(--t-h1);
  margin: 0;
}

.admin-gate .lead {
  margin: 0;
  color: var(--ink-muted);
}

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

.admin-gate-form input {
  font-family: var(--mono);
  letter-spacing: 0.08em;
}

.admin-gate-note p {
  margin: 0 0 var(--s-3);
  font-size: var(--t-small);
  color: var(--ink-muted);
}

.admin-gate-note p:last-child {
  margin-bottom: 0;
}

.admin-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-7);
}

.admin-head-inner {
  display: grid;
  gap: var(--s-5);
  align-items: end;
}

.admin-head h1 {
  font-size: var(--t-h1);
  margin: 0 0 var(--s-2);
}

.admin-head h1:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.admin-head .lead {
  margin: 0;
  font-size: var(--t-small);
  font-family: var(--sans);
  color: var(--ink-muted);
}

.admin-head-tools {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}

.admin-head-tools .hint {
  margin: 0;
}

.admin-layout {
  display: grid;
  gap: var(--s-6);
  min-width: 0;
}

.admin-layout > *,
.admin-review-layout > * {
  min-width: 0;
}

.admin-alert {
  margin: 0;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-small);
  color: var(--ink);
}

.admin-review-layout {
  display: grid;
  gap: var(--s-5);
}

.admin-application-list,
.admin-candidate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.admin-application-button {
  width: 100%;
  min-height: 3.5rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: var(--s-3) var(--s-2);
  text-align: left;
  cursor: pointer;
}

.admin-application-button strong,
.admin-application-button span { display: block; }
.admin-application-button span { margin-top: var(--s-1); color: var(--ink-muted); font-size: var(--t-micro); }
.admin-application-button[aria-current="true"] { background: var(--surface); color: var(--accent-lift); }

.admin-review-detail { display: grid; gap: var(--s-5); }
.admin-review-detail h3 { margin: 0; font-size: var(--t-h4); }
.admin-review-meta { margin: calc(-1 * var(--s-4)) 0 0; color: var(--ink-muted); font-size: var(--t-small); }
.admin-review-facts { display: grid; grid-template-columns: minmax(8rem, .4fr) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.admin-review-facts dt,
.admin-review-facts dd { margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.admin-review-facts dt { color: var(--ink-muted); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; }
.admin-review-facts dd { font-size: var(--t-small); min-width: 0; overflow-wrap: anywhere; }
.admin-review-facts .admin-cell-link { overflow-wrap: anywhere; }
.admin-review-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.admin-candidate-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-5); }
.admin-candidate-heading p { margin: var(--s-1) 0 0; color: var(--ink-muted); font-size: var(--t-small); }
.admin-candidate { border-bottom: 1px solid var(--line); padding: var(--s-3) 0; }
.admin-candidate-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; cursor: pointer; }
.admin-candidate-main input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; }
.admin-candidate-main strong { display: block; }

/* The landing pages give every section generous vertical air. A working
   surface wants the opposite, so the shared rule is overridden here and the
   rhythm comes from a rule above each block instead. */
.admin-section {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-6) 0 0;
  border-top: 1px solid var(--line);
}

.admin-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.admin-section-heading {
  width: 100%;
  max-width: 44rem;
  min-width: 0;
  display: grid;
  gap: var(--s-2);
}

.admin-section-heading h2 {
  font-size: var(--t-h3);
  margin: 0;
}

.admin-section-heading p {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-muted);
}

.admin-section .hint {
  margin: 0;
}

.admin-totals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

/* Borders live on the cells, not on the grid, so a part-filled last row simply
   stops rather than leaving a coloured gap. */
.admin-total {
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-4) var(--s-5);
  display: grid;
  gap: var(--s-1);
  align-content: start;
}

.admin-total-value {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--ink);
}

.admin-total-label {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Seven columns of real record data. Below roughly 48rem the wrapper scrolls
   sideways rather than crushing names and addresses into single letters. */
.admin-table {
  min-width: 46rem;
}

.admin-table td {
  padding-right: var(--s-5);
}

.admin-table .admin-cell-strong {
  display: block;
  font-weight: 500;
  color: var(--ink);
}

.admin-cell-note {
  display: block;
  font-size: var(--t-micro);
  color: var(--ink-muted);
  margin-top: var(--s-1);
}

.admin-cell-when {
  white-space: nowrap;
  color: var(--ink-muted);
}

.admin-cell-link {
  color: var(--accent-lift);
  white-space: nowrap;
}

.admin-layout .table-wrap {
  border-bottom: 1px solid var(--line);
}

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

.admin-byday-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 6.5rem;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-small);
}

.admin-byday-day {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-muted);
}

.admin-byday-track {
  display: block;
  height: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.admin-byday-bar {
  display: block;
  height: 100%;
  background: var(--accent-fill);
}

.admin-byday-count {
  text-align: right;
  color: var(--ink-muted);
  font-size: var(--t-micro);
  white-space: nowrap;
}

.admin-mail-note p {
  margin: 0 0 var(--s-3);
  font-size: var(--t-small);
  overflow-wrap: anywhere;
}

.admin-mail-note p:last-child {
  margin-bottom: 0;
}

@media (min-width: 48rem) {
  .admin-review-layout { grid-template-columns: minmax(13rem, .42fr) minmax(0, 1fr); align-items: start; }

  .admin-scroll-hint {
    display: none;
  }

  .admin-head-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-head-tools {
    justify-items: end;
    text-align: right;
  }
}

@media (max-width: 40rem) {
  .admin-byday-row {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    row-gap: var(--s-1);
  }

  .admin-byday-count {
    grid-column: 2;
    text-align: left;
  }
}

/* ========================================================================
   Video-first homepage correction, scoped to body.video-home.
   The rest of the full app keeps the shared system above unchanged.
   ======================================================================== */
.video-home {
  background: var(--bg);
  color: var(--ink);
}

.video-home .home-masthead {
  position: relative;
}

.video-home .home-masthead .masthead-inner {
  max-width: none;
  padding-left: max(3rem, env(safe-area-inset-left));
  padding-right: max(2.25rem, env(safe-area-inset-right));
}

.video-home .fedora-img {
  width: 2.8rem;
  height: auto;
}

.video-home .home-masthead-right {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.15rem, 2vw, 1.75rem);
}

.video-home .tabs .tab[href='/apply'] {
  display: inline-flex;
}

.video-home .masthead-location {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8.4rem;
  min-height: 3.1rem;
}

.video-home .sutro-mark {
  position: absolute;
  left: 50%;
  bottom: -0.15rem;
  width: 2.7rem;
  height: 3.35rem;
  transform: translateX(-50%);
  opacity: 0.3;
  stroke: var(--ink-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.1;
}

.video-home .masthead-tag {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.video-home .video-hero,
.video-home .home-film,
.video-home .home-method {
  border-bottom: 1px solid var(--line);
}

.video-home .video-hero {
  min-height: 0;
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.25rem, 3.5vw, 3.5rem);
}

.video-home .video-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(31rem, 1.05fr);
  align-items: start;
  gap: clamp(3.25rem, 5vw, 5.5rem);
  max-width: 88rem;
  min-width: 0;
}

.video-home .video-hero-copy {
  min-width: 0;
  padding-top: clamp(0.25rem, 1vw, 0.75rem);
  text-align: center;
}

@media (min-width: 72.01rem) {
  .video-home .video-hero-copy {
    padding-top: clamp(1.5rem, 2.4vw, 2.25rem);
  }

  .video-home .home-network {
    margin-top: -0.5rem;
  }
}

.video-home .video-hero-heading {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.video-home .hero-wordmark {
  position: relative;
  left: 50%;
  align-self: flex-start;
  width: max-content;
  max-width: none;
  margin: 0 0 clamp(1.7rem, 2.8vw, 2.65rem);
  transform: translateX(-50%);
  font-size: clamp(4rem, 6.5vw, 6.25rem);
  line-height: 0.86;
  white-space: nowrap;
  text-align: center;
  text-wrap: wrap;
}

.video-home .video-hero h1 {
  max-width: none;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3vw, 3.05rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.03;
  text-align: center;
}

.video-home .video-hero h1 span {
  display: block;
  white-space: nowrap;
}

.video-home .home-network {
  width: min(112%, 53rem);
  max-width: none;
  margin: clamp(0.5rem, 1.25vw, 1rem) 0 0 -8%;
  overflow: visible;
}

.video-home .human-network {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  color: var(--accent);
  animation: video-home-thread-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.video-home .nw-wire {
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 0.48;
}

.video-home .nw-person path {
  fill: var(--bg);
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-home .nw-persona {
  fill: currentColor;
  stroke: none;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
}

.video-home .nw-pulse {
  fill: none;
  stroke: var(--warmth);
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-dasharray: 9 91;
  stroke-dashoffset: var(--rest, 50);
  will-change: stroke-dashoffset;
  animation: video-home-nw-travel var(--dur, 5s) linear var(--delay, 0s) infinite;
}

.video-home .nw-pulse-soft {
  stroke-width: 3.4;
  opacity: 0.8;
}

.video-home .nw-hub-ring {
  fill: var(--bg);
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.9;
  stroke-opacity: 0.34;
}

.video-home .nw-hat-image {
  display: block;
}

@keyframes video-home-nw-travel {
  0% { stroke-dashoffset: 100; opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes video-home-thread-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.video-home .home-network figcaption {
  margin-top: clamp(0.6rem, 1.1vw, 1rem);
  color: var(--warmth);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-style: italic;
  font-weight: 500;
  text-align: center;
}

.video-home .home-capture {
  width: min(100%, 37rem);
  margin: clamp(1.25rem, 2.1vw, 1.8rem) auto 0;
  text-align: center;
}

.video-home .home-capture h2 {
  max-width: none;
  margin: 0 auto;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: clamp(1.08rem, 1.35vw, 1.24rem);
  font-weight: 400;
  white-space: nowrap;
}

.video-home .home-capture-lead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.video-home .home-hero-cta {
  display: flex;
  justify-content: center;
  margin: clamp(1.8rem, 2.8vw, 2.3rem) auto 0;
}

.video-home .home-caption {
  margin: 0.65rem 0 0;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  font-weight: 400;
  line-height: normal;
}

.video-home .home-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0;
  list-style: none;
  max-width: 37rem;
  margin: clamp(2.15rem, 3.5vw, 2.9rem) auto 0;
  padding: 0;
  color: var(--ink);
  font-size: clamp(0.88rem, 1vw, 0.98rem);
  font-weight: 700;
  line-height: 1.6;
}

.video-home .home-values li {
  display: inline;
}

.video-home .home-values .home-value-break {
  display: block;
  flex-basis: 100%;
  height: 0;
}

.video-home .home-values li + li::before {
  content: '\00b7';
  margin: 0 0.65rem;
  color: var(--accent);
}

.video-home .home-values .home-value-break::before,
.video-home .home-values .home-value-break + li::before {
  content: none;
  margin: 0;
}

.video-home .home-film {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
}

.video-home .home-film-inner {
  display: grid;
  justify-items: center;
  gap: clamp(2.25rem, 4vw, 3.75rem);
  width: min(100%, 54rem);
  text-align: center;
}

.video-home .home-film-copy {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 54rem;
  text-align: center;
}

.video-home .home-film-copy h2 {
  max-width: none;
  margin: 0 auto;
  transform: translateX(clamp(-1.5rem, -1.4vw, -0.55rem));
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3vw, 3.05rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.03;
}

.video-home .home-film-copy h2 span {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}

.video-home .home-film-copy h2 span + span {
  margin-top: 0.32em;
}

@media (max-width: 42rem) {
  .video-home .home-film-copy h2 {
    transform: translateX(-0.55rem);
  }

  .video-home .home-film-copy h2 span {
    white-space: normal;
  }
}

.video-home .home-promo {
  width: min(100%, 38rem);
  margin: 0 auto;
  background: oklch(12% 0.008 70);
  border: 1px solid var(--line-strong);
  box-shadow: 0 1.75rem 4.5rem -3rem color-mix(in oklch, var(--ink) 60%, transparent);
}

.video-home .home-promo-video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: oklch(12% 0.008 70);
}

/* The film's last line deliberately repeats the network caption treatment. */
.video-home .home-film-signoff {
  margin: clamp(0.6rem, 1.1vw, 1rem) 0 0;
  color: var(--warmth);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-style: italic;
  font-weight: 500;
  text-align: center;
}

/* Reusable, scoped public-site Apply placement. The shared button component
   retains its established hover, focus and active behavior. */
.video-home .site-apply-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.video-home .site-apply-cta-after-testimonials {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.video-home .site-apply-cta-after-epigraph {
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Member testimonials stay a readable stack without JavaScript. The homepage
   enhancement turns that source order into the reference carousel, one voice
   at a time, without changing its content or semantic figure structure. */
.video-home .home-testimonials {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.video-home .home-testimonials-inner {
  width: min(100%, 62rem);
}

.video-home .testimonial-epigraph {
  max-width: 42rem;
  margin: clamp(2.25rem, 4vw, 3.25rem) auto 0;
  color: var(--warmth);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.video-home .testimonial-epigraph p {
  margin: 0;
}

.video-home .testimonial-epigraph cite {
  font: inherit;
}

/* The Capone epigraph completes How It Works, after the third step, without
   adding a second rule between the method and the homepage footer. */
.video-home .home-method .testimonial-epigraph {
  grid-column: 1 / -1;
  max-width: none;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

@media (min-width: 48rem) {
  .video-home .home-method .testimonial-epigraph p {
    white-space: nowrap;
  }
}

.video-home .testimonial-carousel {
  min-width: 0;
}

.video-home .testimonial-carousel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.video-home .testimonial-track {
  display: grid;
  gap: var(--s-7);
}

.video-home .testimonial-slide {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  margin: 0;
  text-align: center;
}

.video-home .testimonial-slide img {
  width: clamp(4.5rem, 8vw, 5.5rem);
  height: clamp(4.5rem, 8vw, 5.5rem);
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-subtle);
}

.video-home .testimonial-slide blockquote {
  max-width: 50rem;
  margin: 0;
}

.video-home .testimonial-slide blockquote p {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.7vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

.video-home .testimonial-slide figcaption {
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.video-home .testimonial-slide figcaption span {
  display: block;
}

.video-home .testimonial-slide figcaption span:first-child {
  color: var(--ink);
}

.video-home .testimonial-slide figcaption span + span {
  margin-top: var(--s-1);
  font-size: var(--t-micro);
  font-weight: 500;
}

.video-home .testimonial-controls {
  display: none;
}

.video-home .testimonial-carousel.is-enhanced {
  overflow: hidden;
}

.video-home .testimonial-carousel.is-enhanced .testimonial-track {
  display: flex;
  gap: 0;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.video-home .testimonial-carousel.is-enhanced .testimonial-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 0 var(--s-4);
}

.video-home .testimonial-carousel.is-enhanced .testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}

.video-home .testimonial-control,
.video-home .testimonial-dot {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.video-home .testimonial-control {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  white-space: nowrap;
}

.video-home .testimonial-control:focus-visible {
  position: static;
  width: auto;
  height: auto;
  min-height: 2.5rem;
  padding: 0 var(--s-3);
  margin: 0;
  clip: auto;
}

.video-home .testimonial-control:focus-visible::after {
  content: attr(aria-label);
}

.video-home .testimonial-control:hover,
.video-home .testimonial-control:focus-visible,
.video-home .testimonial-dot:hover,
.video-home .testimonial-dot:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.video-home .testimonial-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-2);
}

.video-home .testimonial-dot {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  padding: 0;
  border-radius: 50%;
}

.video-home .testimonial-dot[aria-current='true'] {
  background: var(--warmth);
  border-color: var(--warmth);
}

@media (prefers-reduced-motion: reduce) {
  .video-home .testimonial-carousel.is-enhanced .testimonial-track {
    transition: none;
  }
}

.video-home .home-method {
  padding: clamp(4.5rem, 9vw, 8rem) 0;
}

.video-home .home-method-layout {
  display: grid;
  column-gap: clamp(2.5rem, 7vw, 7rem);
  row-gap: 0;
}

.video-home .home-method-heading h2 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3vw, 3.05rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.03;
}

.video-home .home-method-heading h2 span {
  display: block;
}

.video-home .home-method-heading h2 .method-context-line {
  margin-bottom: 0.95em;
}

.video-home .home-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.video-home .home-steps li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.5rem, 3.5vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
}

.video-home .home-step-number {
  padding-top: 0.2rem;
  color: var(--warmth);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
}

.video-home .home-steps h3 {
  margin-bottom: var(--s-2);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 500;
}

.video-home .home-steps p {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-muted);
}

.video-home .home-footer {
  padding-top: clamp(3rem, 6vw, 5rem);
}

.video-home .home-footer .footer-inner {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(3rem, 10vw, 9rem);
}

.video-home .home-footer-mark {
  width: 4rem;
  margin-bottom: var(--s-4);
}

.video-home .home-footer .footer-nav {
  min-width: min(100%, 22rem);
}

@media (max-width: 49.999rem) {
  .video-home .home-method-heading {
    margin-bottom: clamp(2.5rem, 7vw, 4rem);
  }
}

@media (min-width: 50rem) {
  .video-home .home-method-layout {
    grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.35fr);
    align-items: start;
  }

  .video-home .home-method-heading h2 {
    max-width: 12ch;
  }
}

@media (min-width: 72.01rem) and (max-width: 100rem) {
  .video-home .hero-wordmark {
    font-size: clamp(4rem, 5.6vw, 5rem);
  }

  .video-home .home-network {
    width: min(108%, 51rem);
    margin-left: -7%;
  }
}

@media (max-width: 72rem) {
  .video-home .video-hero {
    min-height: 0;
  }

  .video-home .video-hero-inner {
    grid-template-columns: 1fr;
    width: min(100%, 47rem);
  }

  .video-home .hero-wordmark {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .video-home .video-hero h1 span {
    white-space: normal;
  }

  .video-home .home-network {
    width: min(100%, 42rem);
    margin: 1.75rem auto 0;
  }
}

@media (min-width: 42.01rem) and (max-width: 72rem) {
  .video-home .hero-wordmark {
    font-size: clamp(4.75rem, 13vw, 7rem);
  }
}

@media (max-width: 42rem) {
  .video-home .home-masthead .masthead-inner {
    padding-left: max(2rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }

  .video-home .page {
    padding-left: max(var(--s-4), env(safe-area-inset-left));
    padding-right: max(var(--s-4), env(safe-area-inset-right));
  }

  .video-home .home-masthead-right {
    gap: var(--s-3);
  }

  .video-home .tabs {
    gap: var(--s-3);
  }

  .video-home .masthead-location {
    width: 7rem;
  }

  .video-home .sutro-mark {
    width: 2.25rem;
    height: 2.85rem;
  }

  .video-home .masthead-tag {
    font-size: 0.61rem;
    letter-spacing: 0.14em;
  }

  .video-home .tab {
    font-size: 0.82rem;
  }

  .video-home .masthead-location {
    display: inline-flex;
    width: 5.55rem;
    min-height: 2.6rem;
  }

  .video-home .sutro-mark {
    bottom: -0.1rem;
    width: 1.9rem;
    height: 2.4rem;
  }

  .video-home .masthead-tag {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }

  .video-home .video-hero {
    padding-top: 2.75rem;
  }

  .video-home .hero-wordmark {
    font-size: clamp(2.75rem, 12.5vw, 3.35rem);
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .video-home .home-capture h2 {
    white-space: normal;
  }

  .video-home .home-network {
    width: calc(100% + 1rem);
    margin-top: 0.9rem;
    margin-left: -0.5rem;
  }

  .video-home .home-film-inner {
    grid-template-columns: 1fr;
  }

  .video-home .home-promo {
    width: min(100%, 28rem);
  }

  .video-home .home-footer .footer-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 24rem) {
  .video-home .masthead-inner {
    align-items: flex-start;
  }

  .video-home .tabs {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .video-home .home-steps li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-home .home-promo-video {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  .video-home .home-promo,
  .video-home .home-capture,
  .video-home .home-steps,
  .video-home .home-steps li {
    border-color: CanvasText;
  }
}

/* ==========================================================================
   Restored /network proof-of-network surface. This is intentionally scoped
   to the route so the current homepage shell and every other application
   route retain their own layout contracts.
   ========================================================================== */
.network-page .home-masthead {
  position: relative;
}

.network-page .home-masthead .masthead-inner {
  max-width: none;
  padding-left: max(3rem, env(safe-area-inset-left));
  padding-right: max(2.25rem, env(safe-area-inset-right));
}

.network-page .fedora-img {
  width: 2.8rem;
  height: auto;
}

.network-page .home-masthead-right {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.15rem, 2vw, 1.75rem);
}

.network-page .tabs .tab[href='/apply'] {
  display: inline-flex;
}

.network-page .masthead-location {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8.4rem;
  min-height: 3.1rem;
}

.network-page .sutro-mark {
  position: absolute;
  left: 50%;
  bottom: -0.15rem;
  width: 2.7rem;
  height: 3.35rem;
  transform: translateX(-50%);
  opacity: 0.3;
  stroke: var(--ink-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.1;
}

.network-page .masthead-tag {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.network-page .doc-hero {
  padding: clamp(3rem, 6vw, 4.75rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 0;
}

.network-page .network-hero-copy {
  min-width: 0;
  text-align: center;
}

.network-page .doc-hero h1 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.network-page .network-employers {
  padding-block: clamp(2rem, 5vw, 3.5rem) 0;
}

.network-page .network-employers-title {
  margin: 0 0 var(--s-4);
  color: var(--ink-muted);
  text-align: center;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.network-page .network-employer-marquee {
  --employer-gap: clamp(1.5rem, 3vw, 3rem);
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}

.network-page .network-employer-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: network-employer-scroll 48s linear infinite;
}

.network-page .network-employer-group {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--employer-gap);
  margin: 0;
  padding: var(--s-3) var(--employer-gap) var(--s-3) 0;
  list-style: none;
}

.network-page .network-employer-group li {
  flex: 0 0 clamp(7.5rem, 12vw, 10rem);
  min-width: 0;
}

.network-page .network-employer-group img {
  width: 100%;
  aspect-ratio: 8 / 3;
  object-fit: contain;
}

.network-page .network-employer-marquee:hover .network-employer-track,
.network-page .network-employer-marquee:focus .network-employer-track,
.network-page .network-employer-marquee:focus-within .network-employer-track {
  animation-play-state: paused;
}

@keyframes network-employer-scroll {
  to { transform: translateX(-50%); }
}

.network-page .network-directory {
  padding-block: clamp(2.75rem, 6vw, 5rem) var(--s-8);
}

.network-page .network-directory-head {
  display: block;
  width: 100%;
  margin-bottom: var(--s-7);
  text-align: center;
}

.network-page .network-directory-head > div {
  width: 100%;
}

.network-page .network-bench-intro {
  max-width: 92ch;
  margin: var(--s-3) auto 0;
  color: var(--ink-muted);
  font-size: var(--t-body);
  line-height: 1.6;
}

.network-page .network-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 3.5rem) clamp(0.75rem, 3vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.network-page .network-person {
  min-width: 0;
}

.network-page .network-person-card {
  display: grid;
  grid-template-rows: auto 4.375rem;
  justify-items: center;
  gap: var(--s-4);
  min-width: 0;
  height: 100%;
  padding: var(--s-2);
  text-align: center;
}

.network-page .network-person-photo {
  display: block;
  width: min(100%, 8.5rem);
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  filter: saturate(0.92);
}

.network-page .network-person-copy {
  display: grid;
  grid-template-rows: 1.5rem 2.5rem;
  gap: 0.375rem;
  width: 100%;
  min-width: 0;
}

.network-page .network-person-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.network-page .network-person-title {
  display: -webkit-box;
  height: 2.5rem;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: var(--t-small);
  line-height: 1.25rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.network-page .network-bench-cta {
  margin-top: var(--s-7);
  text-align: center;
}

.network-page .network-bench-cta p {
  max-width: 44rem;
  margin: 0 auto var(--s-4);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  text-wrap: balance;
}

.network-page .home-footer {
  padding-top: clamp(3rem, 6vw, 5rem);
}

.network-page .home-footer .footer-inner {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(3rem, 10vw, 9rem);
}

.network-page .home-footer-mark {
  width: 4rem;
  margin-bottom: var(--s-4);
}

.network-page .home-footer .footer-nav {
  min-width: min(100%, 22rem);
}

@media (min-width: 40rem) {
  .network-page .network-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .network-page .network-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 55rem) {
  .network-page .network-hero-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .network-page .network-employer-marquee { overflow: visible; }
  .network-page .network-employer-track {
    width: 100%;
    transform: none;
    will-change: auto;
    animation: none !important;
  }
  .network-page .network-employer-group {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding-right: 0;
  }
  .network-page .network-employer-group[aria-hidden='true'] { display: none; }
}

@media (max-width: 42rem) {
  .network-page .home-masthead .masthead-inner {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(0.85rem, env(safe-area-inset-right));
  }
  .network-page .masthead-location { width: auto; min-width: 5.25rem; }
  .network-page .masthead-tag { font-size: 0.56rem; letter-spacing: 0.13em; }
  .network-page .sutro-mark { width: 2.15rem; height: 2.7rem; }
  .network-page .home-masthead-right { gap: 0.7rem; }
  .network-page .home-footer .footer-inner { grid-template-columns: 1fr; }
}

/* ========================================================================
   Canonical public shell: scoped so legacy route content retains its own
   layout and functional controls while sharing the current homepage chrome.
   ======================================================================== */
.public-shell .masthead { position: relative; }
.public-shell .public-shell-inner {
  max-width: none;
  padding-left: max(3rem, env(safe-area-inset-left));
  padding-right: max(2.25rem, env(safe-area-inset-right));
}
.public-shell .fedora-img { width: 2.8rem; height: auto; }
.public-shell .public-shell-right { display: inline-flex; align-items: center; gap: clamp(1.15rem, 2vw, 1.75rem); }
.public-shell .public-shell-tabs .tab[href='/apply'] { display: inline-flex; }
.public-shell .masthead-location { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 8.4rem; min-height: 3.1rem; }
.public-shell .sutro-mark { position: absolute; left: 50%; bottom: -0.15rem; width: 2.7rem; height: 3.35rem; transform: translateX(-50%); opacity: 0.3; stroke: var(--ink-muted); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.1; }
.public-shell .masthead-tag { position: relative; z-index: 1; margin: 0; color: var(--ink); font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.public-shell .public-shell-footer { padding-top: clamp(3rem, 6vw, 5rem); }
/* Canonical homepage footer mark treatment, shared by every public shell. */
.public-shell .public-shell-footer .home-footer-mark { width: 4rem; margin-bottom: var(--s-4); }
.public-shell .public-shell-footer .footer-inner { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(3rem, 10vw, 9rem); }
.public-shell .public-shell-footer .footer-nav { min-width: min(100%, 22rem); }
.public-shell .public-shell-footer .footer-brand .footer-line a {
  color: inherit;
  border-bottom-color: transparent;
  text-decoration: none;
}
.public-shell .public-shell-footer .footer-brand .footer-line a:hover {
  color: var(--accent-lift);
  border-bottom-color: transparent;
}
.public-shell .public-shell-footer .footer-brand .footer-line a:focus-visible {
  border-bottom-color: transparent;
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.public-shell-context { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); padding-top: var(--s-3); padding-bottom: 0; color: var(--ink-muted); font-size: var(--t-small); }
.public-shell-context-label { margin-right: auto; }
@media (max-width: 42rem) {
  .public-shell .public-shell-inner { padding-left: max(2rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); }
  .public-shell .public-shell-right { gap: var(--s-3); }
  .public-shell .tabs { gap: var(--s-3); }
  .public-shell .masthead-location { width: 5.55rem; min-height: 2.6rem; }
  .public-shell .sutro-mark { bottom: -0.1rem; width: 1.9rem; height: 2.4rem; }
  .public-shell .masthead-tag { font-size: .5rem; letter-spacing: .1em; }
  .public-shell .tab { font-size: .82rem; }
  .public-shell .public-shell-footer .footer-inner { grid-template-columns: 1fr; }
}

/* Network refinement: a compact centered proposition gets visitors to the
   proof and public roster without making the hero another illustration stage. */
.network-page .doc-hero-inner.network-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  max-width: 72rem;
}

.network-page .network-hero-copy {
  grid-column: 2;
}

.network-page .network-hero-art {
  grid-column: 3;
  justify-self: start;
  width: clamp(5rem, 8vw, 7rem);
  margin-left: clamp(1.5rem, 3.35vw, 3rem);
  pointer-events: none;
}

.network-page .network-hero-hat {
  display: block;
  width: 100%;
  height: auto;
}

.network-page .doc-hero h1 {
  max-width: none;
  margin: 0 auto;
  font-size: clamp(1.35rem, 3.15vw, 2.75rem);
  line-height: 1.14;
}

.network-page .doc-hero h1 > span {
  display: block;
  white-space: nowrap;
}

.network-page .doc-hero h1 > span + span {
  margin-top: 0.42em;
}

.network-page .network-directory-apply {
  display: flex;
  justify-content: center;
}

.network-page .network-directory-apply-before {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.network-page .network-directory-apply-after {
  margin: var(--s-7) 0 0;
}

.apply-signature-hat {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 55rem) {
  .network-page .doc-hero-inner.network-hero-grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .network-page .network-hero-art {
    width: clamp(3.5rem, 10vw, 5rem);
    margin-left: clamp(0.75rem, 2.5vw, 1.5rem);
  }

  .network-page .doc-hero h1 {
    font-size: clamp(1.35rem, 6.45vw, 2rem);
  }
}

@media (max-width: 42rem) {
  .network-page .doc-hero-inner.network-hero-grid {
    display: block;
  }

  .network-page .network-hero-art {
    width: min(28vw, 5rem);
    margin: var(--s-4) auto 0;
  }

  .network-page .doc-hero h1 > span {
    white-space: normal;
  }
}


/* ==========================================================================
   Member profile v2 (matches-forward, single column, no right rail).
   Scoped under .member-v2 so tokens and element rules never touch the rest
   of the site. Folded from launch-expansion/redesign/profile-mockup-v2.
   ========================================================================== */
/* Consigliere private profile mockup v2 (non-production).
   Editorial Humanist, matches-forward, single column, no right rail. */

.member-v2 {
  --bg: oklch(96.2% 0.016 92);
  --surface: oklch(93.5% 0.02 92);
  --surface-2: oklch(91% 0.022 90);
  --ink: oklch(20% 0.012 80);
  --ink-muted: oklch(42% 0.02 80);
  --accent: oklch(36% 0.07 152);
  --accent-lift: oklch(31% 0.065 152);
  --accent-fill: oklch(37% 0.072 152);
  --accent-fill-hover: oklch(33% 0.07 152);
  --warmth: oklch(44% 0.1 48);
  --line: oklch(84% 0.03 88);
  --line-strong: oklch(65% 0.05 85);
  --button-ink: oklch(96.5% 0.014 92);

  --serif: Petrona, Georgia, 'Times New Roman', Times, serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-h1: clamp(2.125rem, 5.8vw, 3.4rem);
  --t-h2: clamp(1.5rem, 3.4vw, 2.2rem);
  --t-h3: clamp(1.12rem, 2vw, 1.35rem);
  --t-lead: clamp(1.06rem, 1.6vw, 1.24rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.78rem;

  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  --page: 58rem;
  --tap: 44px;
}

.member-v2, .member-v2 * { box-sizing: border-box; }
.member-v2 [hidden] { display: none !important; }
.member-v2 { -webkit-text-size-adjust: 100%; }
.member-v2 {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.member-v2 img { max-width: 100%; display: block; }
.member-v2 h1, .member-v2 h2, .member-v2 h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
.member-v2 p { margin: 0; }
.member-v2 a { color: var(--accent); }
.member-v2 a:hover { color: var(--accent-lift); }

.member-v2 .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.member-v2 .skip-link {
  position: absolute; left: -999px; top: 0; z-index: 10;
  background: var(--ink); color: var(--bg); padding: var(--s-3) var(--s-4);
}
.member-v2 .skip-link:focus { left: var(--s-4); top: var(--s-4); }

.member-v2 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- kicker (eyebrow) ---- */
.member-v2 .kicker {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}
.member-v2 .kicker::before { content: '~ '; color: var(--warmth); }
.member-v2 .kicker span { color: var(--ink-muted); text-transform: none; letter-spacing: normal; font-weight: 400; }

/* ---- masthead ---- */
.member-v2 .masthead {
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  max-width: 74rem; margin: 0 auto;
}
.member-v2 .brand { display: inline-flex; align-items: center; min-height: var(--tap); }
.member-v2 .brand img { width: 46px; height: auto; }
.member-v2 .masthead-status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-small); color: var(--ink-muted);
}
.member-v2 .privacy-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---- main ---- */
.member-v2 .mv2-page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--s-5) var(--s-8);
}

/* ---- identity ---- */
.member-v2 .identity {
  display: flex; gap: var(--s-5); align-items: flex-start;
  padding: var(--s-8) 0 var(--s-7);
  border-bottom: 1px solid var(--line);
}
.member-v2 .portrait {
  flex: none;
  width: 84px; height: 84px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--button-ink);
  font-family: var(--serif); font-size: 1.9rem; letter-spacing: 0.02em;
}
.member-v2 .identity-copy h1 { font-size: var(--t-h1); margin: var(--s-2) 0; }
.member-v2 .role-line { font-size: var(--t-lead); color: var(--ink); }
.member-v2 .location-line { font-size: var(--t-small); color: var(--ink-muted); margin-top: 2px; }
.member-v2 .chapter {
  font-family: var(--serif); font-style: italic;
  font-size: var(--t-lead); color: var(--ink-muted);
  margin-top: var(--s-4); max-width: 46ch;
}

/* ---- generic block ---- */
.member-v2 .block { padding: var(--s-8) 0; border-bottom: 1px solid var(--line); }
.member-v2 .block-head {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  align-items: baseline; justify-content: space-between;
  margin-bottom: var(--s-6);
}
.member-v2 .block-head h2 { font-size: var(--t-h2); }
.member-v2 .block-note { font-size: var(--t-small); color: var(--ink-muted); max-width: 40ch; }

/* ---- buttons ---- */
.member-v2 .btn {
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  padding: 0 var(--s-5); min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0; line-height: 1.1;
}
.member-v2 .btn-primary { background: var(--accent-fill); color: var(--button-ink); }
.member-v2 .btn-primary:hover { background: var(--accent-fill-hover); }
.member-v2 .btn-quiet {
  background: transparent; color: var(--ink);
  border-color: var(--line-strong);
}
.member-v2 .btn-quiet:hover { border-color: var(--ink); }
.member-v2 .btn-sm { min-height: 40px; padding: 0 var(--s-4); }
.member-v2 .btn-block { width: 100%; }

/* ---- matches ---- */
.member-v2 .match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.member-v2 .match {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
}
.member-v2 .match-open { border-color: var(--line-strong); background: var(--surface-2); }
.member-v2 .match-mark {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  background: var(--bg);
}
.member-v2 .match-mark-live { color: var(--accent); border-color: var(--accent); }
.member-v2 .match-body h3 { font-size: var(--t-h3); margin: var(--s-2) 0; }
.member-v2 .match-status {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600; color: var(--ink-muted);
}
.member-v2 .match-status-new { color: var(--warmth); }
.member-v2 .match-status-live { color: var(--accent); }
.member-v2 .match-line { color: var(--ink); }
.member-v2 .match-why { margin: var(--s-4) 0 0; }
.member-v2 .match-why dt {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent); font-weight: 600; margin-bottom: 2px;
}
.member-v2 .match-why dd { margin: 0; color: var(--ink-muted); }
.member-v2 .match-sealed {
  font-size: var(--t-small); color: var(--ink-muted);
  margin-top: var(--s-4);
  padding-left: var(--s-4);
  border-left: 2px solid var(--line-strong);
}
.member-v2 .match-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.member-v2 .matches-foot { font-size: var(--t-small); color: var(--ink-muted); margin-top: var(--s-5); }

/* ---- context contribution ---- */
.member-v2 .context-list { display: grid; gap: 0; }
.member-v2 .ctx { padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.member-v2 .ctx:first-child { border-top: 0; padding-top: 0; }
.member-v2 .ctx-feature {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--s-6);
  margin: var(--s-5) 0;
}
.member-v2 .ctx-head {
  display: flex; gap: var(--s-4); align-items: baseline; justify-content: space-between;
  margin-bottom: var(--s-4);
}
.member-v2 .ctx-head h3 { font-size: var(--t-h3); max-width: 34ch; }
.member-v2 .edit-toggle {
  flex: none;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  color: var(--accent); padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--accent);
  min-height: 40px;
}
.member-v2 .edit-toggle:hover { color: var(--accent-lift); }
.member-v2 .ctx-read p { color: var(--ink); max-width: 60ch; }

.member-v2 .ctx-facts { margin: 0; display: grid; gap: var(--s-3); }
.member-v2 .ctx-facts > div { display: grid; grid-template-columns: 12rem 1fr; gap: var(--s-4); }
.member-v2 .ctx-facts dt {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-muted); font-weight: 600; padding-top: 3px;
}
.member-v2 .ctx-facts dd { margin: 0; color: var(--ink); }

.member-v2 .ctx-sub-label {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent); font-weight: 600; margin: var(--s-5) 0 var(--s-2);
}
.member-v2 .ctx-inits { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.member-v2 .ctx-inits li { position: relative; padding-left: var(--s-5); color: var(--ink); }
.member-v2 .ctx-inits li::before { content: '~'; position: absolute; left: 0; color: var(--warmth); }

.member-v2 .ctx-priorities { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); }
.member-v2 .ctx-priorities li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: baseline; }
.member-v2 .ctx-priorities span {
  font-family: var(--serif); font-size: 1.4rem; color: var(--warmth); line-height: 1;
}
.member-v2 .ctx-priorities p { margin: 0; max-width: 56ch; }

.member-v2 .ctx-feature blockquote {
  margin: 0 0 var(--s-5);
  font-family: var(--serif); font-style: italic;
  font-size: var(--t-lead); color: var(--ink);
  max-width: 52ch;
}

/* editors */
.member-v2 .ctx-edit { display: grid; gap: var(--s-4); max-width: 44rem; }
.member-v2 .field { display: grid; gap: var(--s-2); }
.member-v2 .field label {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-muted); font-weight: 600;
}
.member-v2 .label-optional { text-transform: none; letter-spacing: normal; color: var(--ink-muted); font-weight: 400; }
.member-v2 input[type=text], .member-v2 input[type=email], .member-v2 input[type=url], .member-v2 textarea, .member-v2 select {
  font-family: var(--sans); font-size: var(--t-body); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong);
  padding: var(--s-3) var(--s-4); width: 100%; border-radius: 0;
}
.member-v2 textarea { resize: vertical; line-height: 1.5; }
.member-v2 input:focus, .member-v2 textarea:focus, .member-v2 select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.member-v2 .ctx-edit-actions { display: flex; gap: var(--s-3); }

/* ---- invite ---- */
.member-v2 .invite { border-bottom: 1px solid var(--line); }
.member-v2 .invite-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: var(--s-7);
}
.member-v2 .invite-copy h2 { font-size: var(--t-h2); margin-bottom: var(--s-4); }
.member-v2 .invite-copy p { color: var(--ink-muted); max-width: 40ch; }
.member-v2 .invite-form { display: grid; gap: var(--s-4); }
.member-v2 .invite-note { font-size: var(--t-small); color: var(--ink-muted); margin-top: 2px; }

/* ---- settings ---- */
.member-v2 .settings-grid { display: grid; gap: 0; }
.member-v2 .setting {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0; border-top: 1px solid var(--line);
}
.member-v2 .setting:first-child { border-top: 0; }
.member-v2 .setting-copy h3 { font-size: 1.08rem; font-family: var(--sans); font-weight: 600; margin-bottom: 2px; }
.member-v2 .setting-copy p { font-size: var(--t-small); color: var(--ink-muted); max-width: 44ch; }

.member-v2 .toggle { position: relative; flex: none; display: inline-flex; align-items: center; cursor: pointer; min-height: var(--tap); }
.member-v2 .toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.member-v2 .toggle-track {
  width: 52px; height: 30px; background: var(--surface-2);
  border: 1px solid var(--line-strong); position: relative; transition: background .15s ease;
}
.member-v2 .toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; background: var(--ink-muted);
  transition: transform .15s ease, background .15s ease;
}
.member-v2 .toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.member-v2 .toggle input:checked + .toggle-track::after { transform: translateX(22px); background: var(--button-ink); }
.member-v2 .toggle input:focus-visible + .toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }

.member-v2 .select { position: relative; display: inline-block; }
.member-v2 .select select { padding-right: 2.5rem; min-height: var(--tap); appearance: none; }
.member-v2 .select::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.member-v2 .privacy-note {
  margin-top: var(--s-7); padding: var(--s-6);
  border: 1px solid var(--line); background: var(--surface);
}
.member-v2 .privacy-seq { margin: var(--s-3) 0 var(--s-4); padding-left: 1.3rem; display: grid; gap: var(--s-2); color: var(--ink); }
.member-v2 .privacy-seq li::marker { color: var(--warmth); }
.member-v2 .privacy-fine { font-size: var(--t-small); color: var(--ink-muted); max-width: 58ch; }

.member-v2 .session-row {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between;
  margin-top: var(--s-6);
}
.member-v2 .session-fine { font-size: var(--t-small); color: var(--ink-muted); }

/* ---- footer ---- */
.member-v2 .site-foot {
  border-top: 1px solid var(--line);
  max-width: var(--page); margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-8);
  text-align: center;
}
.member-v2 .site-foot img { width: 52px; height: auto; margin: 0 auto var(--s-4); opacity: 0.85; }
.member-v2 .site-foot p { color: var(--ink-muted); font-size: var(--t-small); }
.member-v2 .foot-fine { font-size: var(--t-micro); margin-top: var(--s-2); }

/* ---- responsive ---- */
@media (max-width: 40rem) {

  .member-v2 .masthead { padding: var(--s-3) var(--s-4); }
  .member-v2 .mv2-page { padding: 0 var(--s-4) var(--s-7); }
  .member-v2 .identity { flex-direction: column; gap: var(--s-4); padding: var(--s-6) 0 var(--s-5); }
  .member-v2 .portrait { width: 64px; height: 64px; font-size: 1.5rem; }
  .member-v2 .block { padding: var(--s-6) 0; }
  .member-v2 .block-head { margin-bottom: var(--s-5); }
  .member-v2 .match { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-4); }
  .member-v2 .match-actions .btn { flex: 1 1 auto; }
  .member-v2 .ctx-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .member-v2 .ctx-feature { padding: var(--s-5); }
  .member-v2 .invite-inner { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-5); }
  .member-v2 .setting { flex-wrap: wrap; }
  .member-v2 .setting-inline { flex-wrap: nowrap; }

}

@media (prefers-reduced-motion: reduce) {

  .member-v2, .member-v2 * { transition: none !important; }

}


/* Empty-state prose inside the v2 profile: never shaming, just muted. */
.member-v2 .mv2-empty { color: var(--ink-muted); font-style: italic; }

/* ==========================================================================
   Go-to-network flow (/start): a three-step, single-page experience —
   form, scanning loader, then the match count. Reuses .lead-form, .btn,
   .eyebrow, .page and the public shell. No gradients, glass, or shadows.
   ========================================================================== */

.gtn-step {
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.gtn-step:focus {
  outline: none;
}

.gtn-page-inner {
  max-width: 46rem;
}

.gtn-h1 {
  max-width: 16ch;
  margin: 0 0 var(--s-5);
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.gtn-lead {
  max-width: 54ch;
  margin: 0 0 var(--s-7);
}

.gtn-form {
  margin-top: var(--s-5);
}

/* The lead-form base styles only key off text/email/textarea; the go-to-network
   form also uses url + number inputs, so bring them into the same treatment. */
.gtn-form input[type='url'],
.gtn-form input[type='number'] {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  width: 100%;
}

.gtn-form input[type='url']:focus-visible,
.gtn-form input[type='number']:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.gtn-field-hint {
  display: block;
  color: var(--ink-muted);
  font-weight: 400;
  font-size: var(--t-micro);
  margin-top: var(--s-1);
}

.gtn-form-fine {
  margin-top: var(--s-2);
}

/* --- step 2: the scanning loader ---------------------------------------- */

.gtn-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 50vh;
  justify-content: center;
}

.gtn-loader-title {
  margin: var(--s-4) 0 var(--s-3);
  font-size: var(--t-h2);
  letter-spacing: -0.02em;
}

.gtn-loader-status {
  margin: 0;
  max-width: 40ch;
  min-height: 1.6em;
}

/* Concentric node/graph pulse: three expanding forest-green rings around a
   core, with a few orbiting rust nodes. Flat strokes only — no glow. */
.gtn-radar {
  position: relative;
  width: clamp(9rem, 32vw, 12rem);
  height: clamp(9rem, 32vw, 12rem);
}

.gtn-radar-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.2);
  animation: gtn-pulse 2.6s ease-out infinite;
}

.gtn-radar-ring:nth-child(2) {
  animation-delay: 0.65s;
}

.gtn-radar-ring:nth-child(3) {
  animation-delay: 1.3s;
}

.gtn-radar-core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--accent);
}

.gtn-radar-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.275rem 0 0 -0.275rem;
  border-radius: 50%;
  background: var(--warmth);
  transform-origin: 0.275rem 0.275rem;
  animation: gtn-orbit 3.4s linear infinite;
}

.gtn-radar-node-1 {
  --gtn-r: 3.4rem;
  transform: rotate(0deg) translateX(var(--gtn-r));
  animation-delay: -0.2s;
}
.gtn-radar-node-2 {
  --gtn-r: 4.6rem;
  transform: rotate(72deg) translateX(var(--gtn-r));
  animation-delay: -1s;
}
.gtn-radar-node-3 {
  --gtn-r: 3rem;
  transform: rotate(144deg) translateX(var(--gtn-r));
  animation-delay: -1.8s;
}
.gtn-radar-node-4 {
  --gtn-r: 4.9rem;
  transform: rotate(216deg) translateX(var(--gtn-r));
  animation-delay: -2.4s;
}
.gtn-radar-node-5 {
  --gtn-r: 3.8rem;
  transform: rotate(288deg) translateX(var(--gtn-r));
  animation-delay: -3s;
}

@keyframes gtn-pulse {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  15% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes gtn-orbit {
  to {
    transform: rotate(360deg) translateX(var(--gtn-r, 4rem));
  }
}

/* --- step 3: the result -------------------------------------------------- */

.gtn-result-inner {
  max-width: 40rem;
}

.gtn-result-count {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0 0 var(--s-6);
}

.gtn-result-number {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
}

.gtn-result-label {
  font-size: var(--t-h3);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.gtn-result-lead {
  max-width: 52ch;
  margin: 0 0 var(--s-6);
}

.gtn-result-actions {
  margin: 0 0 var(--s-4);
}

.gtn-result-fine {
  margin: 0;
  max-width: 52ch;
}

/* Respect reduced-motion: freeze the scan animation into a static diagram. */
@media (prefers-reduced-motion: reduce) {
  .gtn-radar-ring {
    animation: none;
    opacity: 0.4;
    transform: scale(1);
  }
  .gtn-radar-ring:nth-child(2) {
    transform: scale(0.66);
  }
  .gtn-radar-ring:nth-child(3) {
    transform: scale(0.33);
  }
  .gtn-radar-node {
    animation: none;
  }
}