/* =====================================================================
   Varsity Valuations — components

   The public/verified distinction is carried structurally: every element
   that displays intelligence gets a left rule. Neutral rule on white for
   public, green rule on a tinted ground for verified. The badge repeats
   the information but the rule is what makes it legible at a glance.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6875rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--size-body);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.btn--primary {
  background: var(--surface-ink);
  color: var(--text-inverse);
  border-color: var(--surface-ink);
}

.btn--primary:hover {
  background: #1c2836;
  border-color: #1c2836;
}

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  border-color: var(--text-primary);
  background: var(--surface);
}

.btn--on-ink {
  background: var(--text-inverse);
  color: var(--surface-ink);
  border-color: var(--text-inverse);
}

.btn--on-ink:hover {
  background: #ffffff;
}

.btn--ghost-on-ink {
  background: transparent;
  color: var(--text-inverse);
  border-color: var(--border-ink);
}

.btn--ghost-on-ink:hover {
  border-color: var(--text-inverse-muted);
}

.btn--small {
  padding: 0.4375rem 0.875rem;
  font-size: var(--size-small);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------------------------------------------------------------------
   Intelligence layer badges
   --------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--public {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.badge--verified {
  background: var(--accent-tint-strong);
  color: var(--accent-primary);
}

.badge--illustrative {
  background: var(--accent-secondary-tint);
  color: var(--accent-secondary);
}

.badge--claimed {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 247, 249, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--nav-height);
}

.site-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  flex-shrink: 0;
}

.logo-mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.logo-word {
  font-size: var(--size-body);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}

.site-nav__link {
  font-size: var(--size-body);
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 1.5px solid transparent;
}

.site-nav__link:hover {
  color: var(--text-primary);
}

.site-nav__link[aria-current="page"] {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

/* Organizations dropdown ---------------------------------------------- */

.nav-dropdown {
  position: relative;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: 0;
  padding: var(--space-2) 0;
  font-size: var(--size-body);
  color: var(--text-secondary);
}

.nav-dropdown__toggle:hover {
  color: var(--text-primary);
}

.nav-dropdown__chevron {
  width: 9px;
  height: 9px;
  transition: transform 0.15s ease;
}

.nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__chevron {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: calc(var(--space-4) * -1);
  min-width: 210px;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: none;
}

.nav-dropdown__menu[data-open="true"] {
  display: block;
}

.nav-dropdown__menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--size-small);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.nav-dropdown__menu a:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Mobile menu --------------------------------------------------------- */

.site-nav__toggle {
  display: none;
  margin-left: auto;
  padding: var(--space-2);
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.site-nav__toggle svg {
  width: 18px;
  height: 18px;
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */

.hero {
  padding: var(--space-8) 0 var(--space-9);
}

.hero__copy {
  max-width: 46rem;
}

.hero__copy > * + * {
  margin-top: var(--space-5);
}

.hero .btn-row {
  margin-top: var(--space-6);
}

/* ---------------------------------------------------------------------
   Product preview panel (hero dashboard)
   --------------------------------------------------------------------- */

.panel {
  margin-top: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.panel__title {
  font-size: var(--size-small);
  font-weight: 600;
}

.panel__body {
  padding: var(--space-5);
}

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

/* Search field mockup -------------------------------------------------- */

.mock-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.mock-search svg {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.mock-search__query {
  font-size: var(--size-body);
  color: var(--text-secondary);
}

/* Metric row ----------------------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.metric {
  padding: var(--space-4);
  background: var(--surface);
}

.metric__label {
  font-size: var(--size-meta);
  color: var(--text-muted);
}

.metric__value {
  margin-top: var(--space-1);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.metric__delta {
  font-size: var(--size-meta);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Intelligence cards — the core public/verified visual system
   --------------------------------------------------------------------- */

.intel-list > * + * {
  margin-top: var(--space-3);
}

.intel-card {
  padding: var(--space-4);
  padding-left: calc(var(--space-4) - 2px);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.intel-card--verified {
  background: var(--accent-tint);
  border-color: var(--accent-tint-strong);
  border-left-color: var(--accent-primary);
}

.intel-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.intel-card__headline {
  font-size: var(--size-body);
  font-weight: 500;
  line-height: 1.4;
}

.intel-card__summary {
  margin-top: var(--space-2);
  font-size: var(--size-small);
  color: var(--text-secondary);
}

.intel-card__source {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--size-meta);
  color: var(--text-muted);
}

.intel-card__source a {
  color: var(--text-secondary);
}

.source-sep {
  color: var(--border-strong);
}

/* Verified deal figure ------------------------------------------------- */

.deal-amount {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-primary);
  line-height: 1.1;
}

.deal-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--size-meta);
  color: var(--text-secondary);
}

.deal-why {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--accent-tint-strong);
  font-size: var(--size-meta);
  color: var(--text-secondary);
}

.deal-why strong {
  color: var(--accent-primary);
  font-weight: 600;
}

/* The single orchestrated motion on the page: the verified deal arrives
   once, after load, to demonstrate that alerts are pushed not polled. */
.deal-notification {
  opacity: 0;
  transform: translateY(8px);
}

.deal-notification.is-arrived {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .deal-notification {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   Problem section — fragmented sources
   --------------------------------------------------------------------- */

.fragments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.fragment {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

.fragment__label {
  font-size: var(--size-small);
  font-weight: 600;
}

.fragment__note {
  margin-top: var(--space-2);
  font-size: var(--size-meta);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   Two-layer section
   --------------------------------------------------------------------- */

.layers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.layer {
  padding: var(--space-6);
  border-radius: var(--radius-md);
}

.layer--public {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-strong);
}

.layer--verified {
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-strong);
  border-left: 3px solid var(--accent-primary);
}

.layer__label {
  font-size: var(--size-meta);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.layer--verified .layer__label {
  color: var(--accent-primary);
}

.layer__title {
  font-size: var(--size-h3);
  margin-bottom: var(--space-2);
}

.layer__claim {
  font-size: var(--size-body);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.layer__items {
  border-top: 1px solid var(--border-subtle);
}

.layer--verified .layer__items {
  border-top-color: var(--accent-tint-strong);
}

.layer__items li {
  padding: var(--space-3) 0;
  font-size: var(--size-small);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.layer--verified .layer__items li {
  border-bottom-color: var(--accent-tint-strong);
}

/* ---------------------------------------------------------------------
   Search visualization
   --------------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.chip {
  padding: 0.3125rem 0.6875rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--size-meta);
  color: var(--text-secondary);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.chip[aria-pressed="true"] {
  background: var(--surface-ink);
  border-color: var(--surface-ink);
  color: var(--text-inverse);
}

.search-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.result-column__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.result-column__title {
  font-size: var(--size-small);
  font-weight: 600;
}

.result-column__count {
  font-size: var(--size-meta);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.result-rows li {
  padding: var(--space-3) 0;
  font-size: var(--size-small);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.result-rows .count {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Audience cards
   --------------------------------------------------------------------- */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.audience-card {
  display: block;
  padding: var(--space-5);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}

.audience-card:hover {
  background: var(--bg-secondary);
}

.audience-card__role {
  font-size: var(--size-body);
  font-weight: 600;
}

.audience-card__promise {
  margin-top: var(--space-2);
  font-size: var(--size-small);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------
   Comparable athlete network
   --------------------------------------------------------------------- */

.comparables {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.network {
  width: 100%;
  height: auto;
}

.network__edge {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.network__edge--active {
  stroke: var(--accent-primary);
  stroke-width: 1.5;
}

.network__node circle {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1.5;
}

.network__node text {
  font-size: 10px;
  font-weight: 500;
  fill: var(--text-secondary);
  text-anchor: middle;
}

.network__node--self circle {
  fill: var(--surface-ink);
  stroke: var(--surface-ink);
}

.network__node--self text {
  fill: var(--text-inverse);
  font-weight: 600;
}

.network__node--active circle {
  fill: var(--accent-tint);
  stroke: var(--accent-primary);
}

.network__node--active text {
  fill: var(--accent-primary);
}

.signal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.signal {
  padding: 0.25rem 0.625rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--size-meta);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------
   Closing call to action
   --------------------------------------------------------------------- */

.closing {
  max-width: var(--container-narrow);
}

.closing > * + * {
  margin-top: var(--space-5);
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

.site-footer {
  padding: var(--space-8) 0 var(--space-6);
  background: var(--surface-ink);
  color: var(--text-inverse-muted);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--border-ink);
}

.site-footer__brand .logo-word {
  color: var(--text-inverse);
}

.site-footer__tagline {
  margin-top: var(--space-3);
  font-size: var(--size-small);
  color: var(--text-inverse-muted);
  max-width: 26ch;
}

.footer-group__title {
  font-size: var(--size-meta);
  font-weight: 600;
  color: var(--text-inverse);
  margin-bottom: var(--space-3);
}

.footer-group li + li {
  margin-top: var(--space-2);
}

.footer-group a {
  font-size: var(--size-small);
  color: var(--text-inverse-muted);
  text-decoration: none;
}

.footer-group a:hover {
  color: var(--text-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  font-size: var(--size-meta);
}

/* ---------------------------------------------------------------------
   Data-source notice — states whether figures are live or demo
   --------------------------------------------------------------------- */

.data-notice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-meta);
  color: var(--text-muted);
}

/* Grid child wrapper for the two search result columns. */
.result-column {
  min-width: 0;
}

/* ---------------------------------------------------------------------
   Stub pages — routes that exist in navigation but are built in later
   phases. Styled honestly rather than left to 404.
   --------------------------------------------------------------------- */

.stub {
  padding: var(--space-9) 0;
}

.stub__inner {
  max-width: var(--container-narrow);
}

.stub__inner > * + * {
  margin-top: var(--space-4);
}

.stub__phase {
  font-size: var(--size-meta);
  color: var(--text-muted);
}

/* =====================================================================
   Phase 2 — product, how it works, about
   ===================================================================== */

/* ---------------------------------------------------------------------
   Page header
   --------------------------------------------------------------------- */

.page-head {
  padding: var(--space-8) 0 var(--space-7);
}

.page-head__inner {
  max-width: 52rem;
}

.page-head__inner > * + * {
  margin-top: var(--space-5);
}

.page-head__kicker {
  font-size: var(--size-small);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   Feature rows — copy paired with a visual, alternating sides
   --------------------------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-subtle);
}

.feature:first-of-type {
  border-top: 0;
}

.feature--reverse .feature__copy {
  order: 2;
}

.feature__copy > * + * {
  margin-top: var(--space-4);
}

.feature__eyebrow {
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--accent-primary);
}

.feature__visual {
  min-width: 0;
}

/* ---------------------------------------------------------------------
   Intelligence graph
   --------------------------------------------------------------------- */

.graph {
  width: 100%;
  height: auto;
}

.graph__edge {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.graph__node rect {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1;
  rx: 3;
}

.graph__node text {
  font-size: 11px;
  font-weight: 500;
  fill: var(--text-secondary);
  text-anchor: middle;
}

.graph__node--core rect {
  fill: var(--surface-ink);
  stroke: var(--surface-ink);
}

.graph__node--core text {
  fill: var(--text-inverse);
  font-weight: 600;
}

.graph__node--verified rect {
  fill: var(--accent-tint);
  stroke: var(--accent-primary);
}

.graph__node--verified text {
  fill: var(--accent-primary);
}

/* ---------------------------------------------------------------------
   Source-linked research demo
   --------------------------------------------------------------------- */

.research {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.research__answer {
  font-size: var(--size-body-lg);
  line-height: 1.65;
  color: var(--text-primary);
}

.citation {
  display: inline-block;
  min-width: 1.125rem;
  padding: 0 0.25rem;
  margin-left: 0.125rem;
  background: var(--bg-secondary);
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  vertical-align: 0.3em;
  line-height: 1.5;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.citation:hover,
.citation[aria-expanded="true"] {
  background: var(--surface-ink);
  color: var(--text-inverse);
}

.sources {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.sources__title {
  font-size: var(--size-meta);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.source-item {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--size-small);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.source-item.is-highlighted {
  background: var(--bg-secondary);
}

.source-item__index {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-muted);
}

.source-item__meta {
  color: var(--text-muted);
  font-size: var(--size-meta);
}

/* ---------------------------------------------------------------------
   Market alerts
   --------------------------------------------------------------------- */

.alerts {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-strong);
}

.alert:last-child {
  border-bottom: 0;
}

.alert--verified {
  background: var(--accent-tint);
  border-left-color: var(--accent-primary);
  border-bottom-color: var(--accent-tint-strong);
}

.alert__body {
  flex: 1;
  min-width: 0;
}

.alert__text {
  font-size: var(--size-small);
  font-weight: 500;
}

.alert__time {
  font-size: var(--size-meta);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Steps — genuinely sequential, so numbered
   --------------------------------------------------------------------- */

.steps {
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--space-6);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--border-subtle);
}

.step__number {
  font-size: var(--size-h2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--border-strong);
  line-height: 1;
}

.step__body > * + * {
  margin-top: var(--space-4);
}

.step__title {
  font-size: var(--size-h3);
}

.step__detail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------------------------------------------------------------------
   Data architecture
   --------------------------------------------------------------------- */

.arch {
  display: grid;
  gap: var(--space-3);
}

.arch__layer {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.arch__layer--ingest {
  border-style: dashed;
}

.arch__layer--verified {
  background: var(--accent-tint);
  border-color: var(--accent-primary);
}

.arch__layer--core {
  background: var(--surface-ink);
  border-color: var(--surface-ink);
  color: var(--text-inverse);
}

.arch__name {
  font-size: var(--size-small);
  font-weight: 600;
}

.arch__items {
  margin-top: var(--space-2);
  font-size: var(--size-meta);
  color: var(--text-muted);
}

.arch__layer--core .arch__items {
  color: var(--text-inverse-muted);
}

.arch__layer--verified .arch__name {
  color: var(--accent-primary);
}

.arch__connector {
  justify-self: center;
  width: 1px;
  height: var(--space-4);
  background: var(--border-strong);
}

/* ---------------------------------------------------------------------
   Thesis statement — the one place a pull-quote treatment is used
   --------------------------------------------------------------------- */

.thesis {
  max-width: 46rem;
  padding-left: var(--space-5);
  border-left: 3px solid var(--accent-primary);
}

.thesis p {
  font-size: var(--size-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* ---------------------------------------------------------------------
   Principles grid (about page)
   --------------------------------------------------------------------- */

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.principle {
  padding: var(--space-5);
  background: var(--surface);
}

.principle__title {
  font-size: var(--size-body);
  font-weight: 600;
}

.principle__body {
  margin-top: var(--space-2);
  font-size: var(--size-small);
  color: var(--text-secondary);
}

/* =====================================================================
   Phase 3 — athlete dashboard
   ===================================================================== */

/* ---------------------------------------------------------------------
   Dashboard shell. Denser padding than marketing sections: this is meant
   to read as software, not as a page about software.
   --------------------------------------------------------------------- */

.dash {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1px;
  background: var(--border-subtle);
}

.dash__col {
  background: var(--bg-primary);
  padding: var(--space-5);
  min-width: 0;
}

.dash__col > * + * {
  margin-top: var(--space-5);
}

.module {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.module__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.module__title {
  font-size: var(--size-small);
  font-weight: 600;
}

.module__body {
  padding: var(--space-4);
}

.module__body > * + * {
  margin-top: var(--space-4);
}

.module--verified {
  background: var(--accent-tint);
  border-color: var(--accent-primary);
}

.module--verified .module__head {
  border-bottom-color: var(--accent-tint-strong);
}

/* ---------------------------------------------------------------------
   Athlete profile card
   --------------------------------------------------------------------- */

.profile {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.profile__avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: var(--surface-ink);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--size-body-lg);
  font-weight: 600;
}

.profile__name {
  font-size: var(--size-h3);
  letter-spacing: -0.02em;
}

.profile__context {
  margin-top: var(--space-1);
  font-size: var(--size-small);
  color: var(--text-secondary);
}

.profile__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Attribute rows — label left, figure right, aligned in a column. */
.attrs {
  border-top: 1px solid var(--border-subtle);
}

.attr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.attr:last-child {
  border-bottom: 0;
}

.attr__label {
  font-size: var(--size-small);
  color: var(--text-secondary);
}

.attr__value {
  font-size: var(--size-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------------------------------------------------------------------
   Profile completeness
   --------------------------------------------------------------------- */

.completeness__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.completeness__value {
  font-size: var(--size-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.meter {
  display: flex;
  gap: 2px;
  height: 6px;
}

.meter__segment {
  flex: 1;
  background: var(--bg-secondary);
  border-radius: 1px;
}

.meter__segment.is-filled {
  background: var(--surface-ink);
}

.completeness__hint {
  margin-top: var(--space-2);
  font-size: var(--size-meta);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   Percentile bars
   --------------------------------------------------------------------- */

.percentile + .percentile {
  margin-top: var(--space-4);
}

.percentile__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.percentile__label {
  font-size: var(--size-small);
  color: var(--text-secondary);
}

.percentile__value {
  font-size: var(--size-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.percentile__track {
  position: relative;
  height: 4px;
  background: var(--bg-secondary);
  border-radius: 2px;
}

.percentile__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--surface-ink);
  border-radius: 2px;
}

.percentile__scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-size: 0.625rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Comparable athlete table
   --------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
}

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

.data-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--size-meta);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr {
  transition: background-color 0.15s ease;
}

.data-table tbody tr:hover,
.data-table tbody tr.is-highlighted {
  background: var(--bg-secondary);
}

.data-table .numeric-cell {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.data-table__name {
  font-weight: 600;
}

/* Activity type is encoded by the same rule system used elsewhere. */
.activity-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--size-meta);
  color: var(--text-secondary);
}

.activity-tag::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: var(--border-strong);
  flex-shrink: 0;
}

.activity-tag--verified {
  color: var(--accent-primary);
  font-weight: 600;
}

.activity-tag--verified::before {
  background: var(--accent-primary);
}

/* ---------------------------------------------------------------------
   Claim strip
   --------------------------------------------------------------------- */

.claim-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--surface-ink);
  border-radius: var(--radius-md);
}

.claim-strip__copy {
  max-width: 46ch;
}

.claim-strip__title {
  font-size: var(--size-h3);
}

.claim-strip__body {
  margin-top: var(--space-2);
  font-size: var(--size-small);
  color: var(--text-secondary);
}

/* =====================================================================
   Phase 4 — organization experiences
   ===================================================================== */

/* ---------------------------------------------------------------------
   Persona tabs. A segmented control rather than underlined tabs: these
   are five parallel views of one platform, not a hierarchy.
   --------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 1px;
  padding: 3px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: 1;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--size-small);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tab:hover {
  color: var(--text-primary);
}

.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.persona[hidden] {
  display: none;
}

.persona__head {
  max-width: var(--container-narrow);
  margin: var(--space-7) 0 var(--space-6);
}

.persona__head > * + * {
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------------
   Persona dashboard grid
   --------------------------------------------------------------------- */

.persona__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.persona__grid > * {
  min-width: 0;
}

.persona__column > * + * {
  margin-top: var(--space-5);
}

/* ---------------------------------------------------------------------
   Stat rows — directional market movement
   --------------------------------------------------------------------- */

.stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.stat:last-child {
  border-bottom: 0;
}

.stat__label {
  font-size: var(--size-small);
  color: var(--text-secondary);
}

.stat__value {
  font-size: var(--size-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat__value--up {
  color: var(--accent-primary);
}

.stat__value--attention {
  color: var(--accent-secondary);
}

/* ---------------------------------------------------------------------
   Use cases
   --------------------------------------------------------------------- */

.use-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-6);
}

.use-case {
  padding: var(--space-5);
  background: var(--surface);
}

.use-case__title {
  font-size: var(--size-small);
  font-weight: 600;
}

.use-case__body {
  margin-top: var(--space-2);
  font-size: var(--size-small);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------
   Benchmark rows — a figure with the set it was drawn from
   --------------------------------------------------------------------- */

.benchmark {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--accent-tint-strong);
}

.benchmark:last-child {
  border-bottom: 0;
}

.benchmark__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.benchmark__label {
  font-size: var(--size-small);
  color: var(--text-secondary);
}

.benchmark__value {
  font-size: var(--size-body-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-primary);
  white-space: nowrap;
}

.benchmark__basis {
  margin-top: var(--space-1);
  font-size: var(--size-meta);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   Persona call to action
   --------------------------------------------------------------------- */

.persona__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--surface-ink);
  border-radius: var(--radius-md);
}

.persona__cta-copy {
  max-width: 52ch;
  font-size: var(--size-body);
  color: var(--text-secondary);
}

/* =====================================================================
   Phase 5 — forms, states, claim flow
   ===================================================================== */

.form-card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.form-card__title {
  font-size: var(--size-h3);
}

.form-card__intro {
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--size-small);
  color: var(--text-secondary);
  max-width: 60ch;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.field-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.field--full {
  grid-column: 1 / -1;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.field__label {
  font-size: var(--size-small);
  font-weight: 500;
}

.field__optional {
  font-weight: 400;
  color: var(--text-muted);
}

.field__hint {
  font-size: var(--size-meta);
  color: var(--text-muted);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--size-body);
  color: var(--text-primary);
  transition: border-color 0.15s ease;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--text-muted);
}

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

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%2347535f' stroke-width='1.5'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px;
  padding-right: 2rem;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.field__error {
  font-size: var(--size-meta);
  color: var(--error);
  min-height: 1rem;
}

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

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------
   Async states
   --------------------------------------------------------------------- */

.spinner {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.state {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--size-small);
}

.state--loading {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  align-items: center;
}

.state--empty {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-left: 3px solid var(--border-strong);
}

.state--error {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--error);
}

.state--success {
  background: var(--accent-tint);
  color: var(--text-primary);
  border: 1px solid var(--accent-tint-strong);
  border-left: 3px solid var(--accent-primary);
}

.state__title {
  font-weight: 600;
}

.state__body {
  margin-top: var(--space-1);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------
   Search results
   --------------------------------------------------------------------- */

.results {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.result {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-left: 3px solid transparent;
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.result:last-child {
  border-bottom: 0;
}

.result:hover {
  background: var(--bg-secondary);
}

.result[aria-pressed="true"] {
  background: var(--bg-secondary);
  border-left-color: var(--surface-ink);
}

.result__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--text-secondary);
}

.result[aria-pressed="true"] .result__avatar {
  background: var(--surface-ink);
  color: var(--text-inverse);
}

.result__body {
  flex: 1;
  min-width: 0;
}

.result__name {
  font-size: var(--size-body);
  font-weight: 600;
}

.result__meta {
  margin-top: 0.125rem;
  font-size: var(--size-meta);
  color: var(--text-muted);
}

.result__badges {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Privacy note
   --------------------------------------------------------------------- */

.notice-box {
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--size-small);
  color: var(--text-secondary);
}

.notice-box strong {
  color: var(--text-primary);
}

.step-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-7) 0 var(--space-5);
}

.step-divider__label {
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.step-divider__rule {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

[hidden] {
  display: none !important;
}

/* =====================================================================
   Phase 6 — deal submission
   ===================================================================== */

/* ---------------------------------------------------------------------
   Choice cards. Real radio inputs, styled — keyboard and screen-reader
   behaviour comes free, and the label is the whole target.
   --------------------------------------------------------------------- */

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.choice {
  position: relative;
  display: block;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice:hover {
  border-color: var(--text-muted);
}

.choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choice__title {
  font-size: var(--size-small);
  font-weight: 600;
}

.choice__body {
  margin-top: var(--space-1);
  font-size: var(--size-meta);
  color: var(--text-muted);
}

.choice:has(.choice__input:checked) {
  border-color: var(--surface-ink);
  background: var(--bg-secondary);
}

.choice:has(.choice__input:focus-visible) {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Privacy choices carry the verified treatment when they permit sharing,
   so the consequence of the setting is visible in the control itself. */
.choice--verified:has(.choice__input:checked) {
  border-color: var(--accent-primary);
  background: var(--accent-tint);
}

.choice--verified:has(.choice__input:checked) .choice__title {
  color: var(--accent-primary);
}

/* ---------------------------------------------------------------------
   Document upload
   --------------------------------------------------------------------- */

.upload {
  display: block;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upload:hover,
.upload.is-dragging {
  border-color: var(--text-muted);
  background: var(--bg-secondary);
}

.upload__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.upload__prompt {
  font-size: var(--size-small);
  font-weight: 500;
}

.upload__hint {
  margin-top: var(--space-1);
  font-size: var(--size-meta);
  color: var(--text-muted);
}

.upload:has(.upload__input:focus-visible) {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.file-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--surface-ink);
  border-radius: var(--radius-md);
}

.file-chip__body {
  flex: 1;
  min-width: 0;
}

.file-chip__name {
  font-size: var(--size-small);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip__size {
  font-size: var(--size-meta);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.file-chip__remove {
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--size-meta);
  color: var(--text-secondary);
}

.file-chip__remove:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* ---------------------------------------------------------------------
   Anonymized preview — shows the submitter exactly what others will see
   --------------------------------------------------------------------- */

.preview {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
}

.preview__intro {
  margin-bottom: var(--space-4);
  font-size: var(--size-small);
  color: var(--text-secondary);
}

.preview__private {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.preview__private-title {
  font-size: var(--size-meta);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.preview__private-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--size-meta);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}

.preview__private-list li:last-child {
  border-bottom: 0;
}

.preview__private-value {
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.submit-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.submit-layout > * {
  min-width: 0;
}

/* ---------------------------------------------------------------------
   Verification status explainer
   --------------------------------------------------------------------- */

.status-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.status-step {
  padding: var(--space-4);
  background: var(--surface);
}

.status-step--terminal {
  background: var(--accent-tint);
}

.status-step__name {
  font-size: var(--size-small);
  font-weight: 600;
  font-family: var(--font-sans);
}

.status-step--terminal .status-step__name {
  color: var(--accent-primary);
}

.status-step__body {
  margin-top: var(--space-2);
  font-size: var(--size-meta);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------
   Turnstile widget slot. Reserves height so the form does not jump when
   the challenge finishes loading.
   --------------------------------------------------------------------- */

.turnstile {
  margin-top: var(--space-5);
  min-height: 65px;
}

.turnstile:empty {
  min-height: 0;
}