/* ============================================================================
   LAYOUT — page sections
   Band rhythm: gradient → white → white → white+clay → dark → white → deck → ink
   ========================================================================== */

/* ── Nav ──────────────────────────────────────────────────────────────── */

.nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  padding-block: var(--space-md);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.nav__mark {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  font-size: var(--text-caption);
  text-decoration: none;
  color: var(--text-primary);
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease);
}
.nav__links a:hover { opacity: 1; }

@media (min-width: 800px) {
  .nav__links { display: flex; }
}

/* ── 1. Hero ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: var(--gradient-hero);
  padding-block: clamp(120px, 20vw, 180px) var(--section-pad-y);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  gap: var(--space-lg);
}
.hero__display { max-width: 14ch; }
.hero__lede { max-width: 58ch; color: #45525a; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-xs);
}

@media (min-width: 900px) {
  .hero__inner { max-width: 74%; }
}

/* ── 2. Diagram ───────────────────────────────────────────────────────── */

.diagram-section__head {
  display: grid;
  gap: var(--space-sm);
  max-width: 56ch;
  margin-block-end: var(--space-xl);
}

/* ── 3. Concept ───────────────────────────────────────────────────────── */

.concept__head {
  max-width: 46ch;
  margin-block-end: var(--space-2xl);
}
.concept__grid {
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
}
@media (min-width: 760px) {
  .concept__grid { grid-template-columns: 1fr 1fr; }
}
.feature-block { display: grid; gap: var(--space-xs); }
.feature-block__rule {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: 0 0 var(--space-sm);
}
.feature-block__body {
  color: var(--text-muted);
  margin: 0;
  max-width: 46ch;
}

/* ── 4. Tiers ─────────────────────────────────────────────────────────── */

.tiers__head {
  display: grid;
  gap: var(--space-sm);
  max-width: 52ch;
  margin-block-end: var(--space-xl);
}

.counter { display: grid; gap: 10px; margin-block-end: var(--space-2xl); }
.counter__label {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.counter__track {
  position: relative;
  height: 4px;
  background: var(--border-hairline);
  overflow: hidden;
}
.counter__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0%;
  background: var(--color-deep-ink);
  transition: width var(--dur-slow) var(--ease);
}

.tier-list { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) {
  .tier-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}

.tier {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  border-radius: var(--radius-panel);   /* hard-edged. never rounded. */
  padding-block-start: var(--space-sm);
  border-block-start: 3px solid var(--tier-swatch, var(--color-deep-ink));
}
.tier--hero  { --tier-swatch: var(--tier-hero); }
.tier--mid   { --tier-swatch: var(--tier-mid); }
.tier--small { --tier-swatch: var(--tier-small); }

.tier__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.tier__count {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
  letter-spacing: 0;
}
.tier__kicker {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.tier__blurb { color: var(--text-muted); margin: 0; max-width: 42ch; }
.tier__price {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.zone-list { list-style: none; margin: 0; padding: 0; display: grid; }

.zone-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-block-start: 1px solid var(--border-hairline);
  background: none;
  font: inherit;
  font-size: var(--text-caption);
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              padding-inline-start var(--dur-fast) var(--ease);
}
html:not(.js) .zone-row { cursor: default; }
.zone-row:hover { padding-inline-start: 6px; }

/* THE CLAY MOMENT. Selection state only — never tier identity, never more
   than one on screen at a time. */
.zone-row[aria-current='true'] {
  color: var(--accent);
  padding-inline-start: 6px;
}
.zone-row[aria-current='true'] .zone-row__status { color: var(--accent); }

.zone-row__status {
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 0.94em;
}
.zone-row[data-status='sold'] { opacity: 0.42; }
.zone-row[data-status='sold'] .zone-row__label { text-decoration: line-through; }

.zone-row__slots {
  color: var(--text-muted);
  font-size: 0.88em;
}

/* ── 5. Why (dark, right-aligned terminal band) ───────────────────────── */

.why__inner { display: grid; gap: var(--space-2xl); }
@media (min-width: 900px) {
  .why__inner {
    grid-template-columns: 1fr minmax(0, 54%);
    align-items: start;
  }
  .why__head { position: sticky; top: var(--space-xl); }
}
.why__head { display: grid; gap: var(--space-sm); max-width: 46ch; }
.why__lede { max-width: none; }
.why__stat { max-width: none; }
.why__points { display: grid; gap: var(--space-lg); }
.why-point { display: grid; gap: 10px; }
.why-point__rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin: 0 0 var(--space-sm);
}
.why-point__body { margin: 0; color: rgba(255, 255, 255, 0.72); max-width: 52ch; }

.why-context { display: grid; gap: 10px; }
.stat-grid {
  display: grid;
  align-items: start;
  gap: var(--space-md);
  margin-block-start: 4px;
}
@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat { display: grid; gap: 2px; }
.stat__figure {
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-bold);
  color: var(--color-pure-white);
}
.stat__figure a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur) var(--ease);
}
.stat__figure a:hover { text-decoration-color: currentColor; }
.stat__body { margin: 0; color: rgba(255, 255, 255, 0.72); max-width: 40ch; }

.honesty {
  margin-block-start: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  gap: 8px;
}
.honesty__title {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.honesty__body { margin: 0; color: rgba(255, 255, 255, 0.72); }

/* ── 6. Journey ───────────────────────────────────────────────────────── */

.journey__inner { display: grid; gap: var(--space-2xl); }
@media (min-width: 860px) {
  .journey__inner { grid-template-columns: 1fr minmax(0, 340px); align-items: start; }
}
.journey__copy { display: grid; gap: var(--space-md); max-width: 48ch; }

.embed {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 340px;
  background: var(--color-charcoal-deck);
  color: rgba(255, 255, 255, 0.55);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-md);
  font-size: var(--text-caption);
}
.embed blockquote { margin: 0; width: 100%; }

/* ── 6.5 Who ──────────────────────────────────────────────────────────── */

/* Journey's embed placeholder is a tall 9:16 box next to a short paragraph,
   so the standard section-pad-y on both sides stacks with that empty space
   and reads as an oversized gap. Trimmed on both sides of this one seam. */
#journey { padding-block-end: var(--space-2xl); }
#who { padding-block-start: var(--space-2xl); }

.who__inner { display: grid; gap: var(--space-xl); }
@media (min-width: 860px) {
  .who__inner { grid-template-columns: 1fr minmax(0, 280px); align-items: start; }
}
.who__head { display: grid; gap: var(--space-sm); }
.who__photo {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  /* Hard-edged, like every other panel on this site — no rounding. */
}

/* ── 7. Form ──────────────────────────────────────────────────────────── */

.form-section__inner { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) {
  .form-section__inner { grid-template-columns: 1fr minmax(0, 52%); }
}

.pathswitch {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  margin-block-end: var(--space-lg);
}
.pathswitch__btn {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pathswitch__btn[aria-selected='true'] {
  background: var(--color-pure-white);
  color: var(--color-deep-ink);
}

.field { display: grid; gap: 7px; margin-block-end: var(--space-md); }
.field__label {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
}
.field__hint {
  font-weight: var(--weight-regular);
  color: rgba(255, 255, 255, 0.5);
}
.field input,
.field select {
  font: inherit;
  font-size: var(--text-body);
  color: var(--color-pure-white);
  background: transparent;
  border: 0;
  border-block-end: 1px solid rgba(255, 255, 255, 0.32);
  padding: 12px 2px;
  border-radius: 0;
  min-height: 48px;
  transition: border-color var(--dur) var(--ease);
}
.field input::placeholder { color: rgba(255, 255, 255, 0.32); }
.field input:focus,
.field select:focus {
  outline: none;
  border-block-end-color: var(--accent);
}
.field select option { color: var(--color-deep-ink); }
.field--invalid input { border-block-end-color: #e0785c; }
.field__error {
  font-size: var(--text-caption);
  color: #e0785c;
}

.form__note {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.55);
  max-width: 46ch;
  margin-block-start: var(--space-md);
}
.form__status {
  margin-block-start: var(--space-md);
  font-size: var(--text-caption);
}
.form__status[data-state='error'] { color: #e0785c; }

.form-success {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
}

/* Honeypot — never shown, never announced. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── 8. Footer ────────────────────────────────────────────────────────── */

.footer {
  background: var(--surface-footer);
  color: var(--text-on-dark);
  padding-block: var(--space-2xl) var(--space-xl);
}
.footer__mark {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
  margin-block-end: var(--space-xl);
}
.footer__grid {
  display: grid;
  gap: var(--space-lg);
  margin-block-end: var(--space-xl);
}
@media (min-width: 700px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
}
.footer__coltitle {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-block-end: var(--space-xs);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer__list a {
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  font-size: var(--text-caption);
  transition: color var(--dur) var(--ease);
}
.footer__list a:hover { color: var(--color-pure-white); }
.footer__legal {
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
  padding-block-start: var(--space-md);
  display: grid;
  gap: var(--space-xs);
}
.footer__legal p {
  margin: 0;
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.42);
  max-width: 68ch;
  line-height: 1.5;
}