/* =============================================================================
   ADU Explorer — Homepage components
   ============================================================================= */

/* -----------------------------------------------------------------------------
   I. HERO
   ----------------------------------------------------------------------------- */
.hero { padding-block: var(--s-5) var(--s-6); }
@media (min-width: 64rem) {
  .hero { padding-block: var(--s-6) var(--s-7); }
}

.hero__kicker {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--topo);
  margin-bottom: var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.hero__kicker::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--topo);
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw + 0.5rem, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-variation-settings: "opsz" 96, "SOFT" 0, "wght" 380;
  text-wrap: balance;
  margin-bottom: var(--s-3);
}
.hero__title em {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 360;
  color: var(--stamp);
}

.hero__lede {
  font-size: clamp(1.0625rem, 0.8vw + 0.95rem, 1.375rem);
  line-height: 1.55;
  max-width: 44ch;
  font-variation-settings: "opsz" 20, "wght" 380;
  color: var(--ink);
  margin-bottom: var(--s-4);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.hero__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: var(--rule-w) solid var(--rule);
  max-width: 56rem;
}
@media (min-width: 36rem) {
  .hero__meta { grid-template-columns: repeat(3, 1fr); }
}
.hero__meta-item {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.4;
}
.hero__meta-item strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* -----------------------------------------------------------------------------
   II. STAT BAND
   ----------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 36rem) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-top: var(--rule-w) solid var(--rule);
  position: relative;
}
@media (min-width: 36rem) {
  .stat:nth-child(odd)  { border-right: var(--rule-w) solid var(--rule); padding-right: var(--s-3); }
  .stat:nth-child(even) { padding-left: var(--s-3); }
}
@media (min-width: 64rem) {
  .stat { border-right: var(--rule-w) solid var(--rule); padding-inline: var(--s-3); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child  { border-right: 0; padding-right: 0; }
}

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-1);
  display: block;
}

.stat__value {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
  line-height: 1;
  font-variation-settings: "opsz" 56, "wght" 420;
  letter-spacing: -0.022em;
  color: var(--ink);
  display: block;
  margin-bottom: var(--s-1);
}
.stat__value .unit {
  font-size: 0.55em;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-left: 0.15em;
  font-variation-settings: "opsz" 20, "wght" 440;
}

.stat__caption {
  font-family: var(--font-serif);
  font-size: var(--t-body-sm);
  line-height: 1.45;
  color: var(--ink);
  font-variation-settings: "opsz" 16, "wght" 380;
  max-width: 28ch;
}

.stat__source {
  font-family: var(--font-mono);
  font-size: var(--t-mono-2xs);
  color: var(--ink-faded);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--s-2);
  padding-top: var(--s-1);
  border-top: 1px dotted var(--rule);
  display: block;
}

/* -----------------------------------------------------------------------------
   III. ATLAS — city grid
   ----------------------------------------------------------------------------- */
.atlas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--rule-w) solid var(--rule);
}
@media (min-width: 40rem) { .atlas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .atlas { grid-template-columns: repeat(3, 1fr); } }

.atlas__card {
  position: relative;
  padding: var(--s-3);
  border-bottom: var(--rule-w) solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  transition: background var(--t-fast) var(--ease);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 220px;
}
@media (min-width: 40rem) {
  .atlas__card:nth-child(odd)  { border-right: var(--rule-w) solid var(--rule); }
}
@media (min-width: 64rem) {
  .atlas__card { border-right: var(--rule-w) solid var(--rule); }
  .atlas__card:nth-child(3n) { border-right: 0; }
  .atlas__card:nth-child(odd) { border-right: var(--rule-w) solid var(--rule); }
  .atlas__card:nth-child(3n) { border-right: 0; }
}

.atlas__card:hover {
  background: var(--paper-inset);
  color: var(--ink);
}
.atlas__card:hover .atlas__name { color: var(--stamp); }

.atlas__sheet {
  font-family: var(--font-mono);
  font-size: var(--t-mono-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faded);
  position: absolute;
  top: var(--s-2);
  right: var(--s-3);
}

.atlas__name {
  font-family: var(--font-serif);
  font-size: 2.125rem;
  line-height: 1.05;
  font-variation-settings: "opsz" 56, "wght" 440;
  letter-spacing: -0.014em;
  margin-top: var(--s-3);
  margin-bottom: 0;
  transition: color var(--t-fast) var(--ease);
}

.atlas__coords {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--topo);
  letter-spacing: 0.04em;
}
.atlas__coords::before { content: "⊕ "; }

.atlas__facts {
  list-style: none;
  padding: var(--s-2) 0 0;
  margin-top: auto;
  border-top: 1px dotted var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-1) var(--s-2);
}
.atlas__fact {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.4;
}
.atlas__fact strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  font-variation-settings: "opsz" 18, "wght" 480;
  letter-spacing: -0.005em;
  font-feature-settings: "tnum" on;
}

.atlas__arrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  color: var(--ink);
  margin-top: var(--s-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.atlas__card:hover .atlas__arrow { color: var(--stamp); }

/* -----------------------------------------------------------------------------
   IV. ESTIMATOR TEASER
   ----------------------------------------------------------------------------- */
.estimator {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 56rem) { .estimator { grid-template-columns: 1.1fr 1fr; column-gap: var(--s-5); } }

.estimator__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1px solid var(--ink);
  padding: 0.35em 0.85em;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.estimator__chip .dot {
  width: 6px; height: 6px;
  background: var(--stamp);
  border-radius: 50%;
}

.estimator__band {
  background: var(--paper-inset);
  border: 1px solid var(--rule-strong);
  padding: var(--s-4);
  position: relative;
}
.estimator__band-stamp {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-mono-2xs);
  color: var(--ink-faded);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.estimator__band-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-1);
}

.estimator__band-range {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.04;
  font-variation-settings: "opsz" 56, "wght" 440;
  letter-spacing: -0.018em;
  font-feature-settings: "tnum" on;
  margin-bottom: var(--s-3);
  color: var(--ink);
}
.estimator__band-range .dash {
  color: var(--rule-strong);
  margin-inline: 0.15em;
}

.estimator__breakdown {
  list-style: none;
  padding: 0;
  border-top: 1px dotted var(--rule);
}
.estimator__breakdown li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: var(--s-1) 0;
  border-bottom: 1px dotted var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.estimator__breakdown li strong {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  font-variation-settings: "opsz" 18, "wght" 460;
  letter-spacing: 0;
  font-feature-settings: "tnum" on;
}

.estimator__uplift {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.05em;
}
.estimator__uplift strong {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-variation-settings: "opsz" 28, "wght" 460;
  color: var(--topo);
  letter-spacing: -0.012em;
  font-feature-settings: "tnum" on;
}

/* -----------------------------------------------------------------------------
   V. TIMELINE — six-phase
   ----------------------------------------------------------------------------- */
.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--rule-w) solid var(--rule);
  position: relative;
  counter-reset: phase;
}

.timeline__row {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: var(--rule-w) solid var(--rule);
  align-items: start;
}
@media (min-width: 48rem) {
  .timeline__row {
    grid-template-columns: 4rem 1fr 12rem;
    gap: var(--s-4);
  }
}

.timeline__num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: 1;
  font-variation-settings: "opsz" 56, "wght" 360;
  color: var(--stamp);
  letter-spacing: -0.02em;
}

.timeline__body h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-variation-settings: "opsz" 28, "wght" 460;
  letter-spacing: -0.008em;
  margin-bottom: var(--s-1);
}
.timeline__body p {
  font-size: var(--t-body);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--ink);
}

.timeline__duration {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.timeline__duration strong {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 47.99rem) {
  .timeline__duration { grid-column: 2; margin-top: var(--s-1); }
}

.timeline__total {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}
.timeline__total strong {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-h4);
  font-variation-settings: "opsz" 20, "wght" 460;
  letter-spacing: -0.005em;
  text-transform: none;
}

/* -----------------------------------------------------------------------------
   VI. LAWS — 2026 statutes
   ----------------------------------------------------------------------------- */
.laws {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.laws__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-bottom: var(--rule-w) solid var(--rule);
}
.laws__row:first-child { border-top: var(--rule-w) solid var(--rule); }
@media (min-width: 56rem) {
  .laws__row {
    grid-template-columns: 12rem 1fr;
    gap: var(--s-4);
  }
}

.laws__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-0);
}
.laws__citation {
  font-family: var(--font-mono);
  font-size: var(--t-mono-md);
  letter-spacing: 0.06em;
  color: var(--stamp);
  font-weight: 600;
  text-transform: uppercase;
}
.laws__effective {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.laws__title {
  font-family: var(--font-serif);
  font-size: var(--t-h4);
  font-variation-settings: "opsz" 22, "wght" 460;
  letter-spacing: -0.005em;
  margin-bottom: var(--s-1);
  line-height: 1.25;
}
.laws__summary {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  max-width: 64ch;
  margin-bottom: var(--s-1);
}
.laws__who {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--topo);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
.laws__who::before { content: "AFFECTS —"; color: var(--ink-soft); margin-right: 0.4em; }

/* -----------------------------------------------------------------------------
   VII. FIELD NOTES — value / income / flexibility
   ----------------------------------------------------------------------------- */
.notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--rule-w) solid var(--rule);
}
@media (min-width: 56rem) { .notes { grid-template-columns: repeat(3, 1fr); } }

.note {
  padding: var(--s-4) var(--s-3);
  border-bottom: var(--rule-w) solid var(--rule);
  position: relative;
}
@media (min-width: 56rem) {
  .note { border-bottom: 0; border-right: var(--rule-w) solid var(--rule); }
  .note:last-child { border-right: 0; }
}

.note__num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-variation-settings: "opsz" 28, "wght" 360;
  color: var(--stamp);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-2);
}

.note__label {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--topo);
  margin-bottom: var(--s-2);
}

.note h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-variation-settings: "opsz" 28, "wght" 460;
  letter-spacing: -0.008em;
  line-height: 1.2;
  margin-bottom: var(--s-2);
  text-wrap: balance;
}
.note p {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
.note__figure {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-variation-settings: "opsz" 56, "wght" 420;
  color: var(--ink);
  font-feature-settings: "tnum" on;
  letter-spacing: -0.018em;
  margin-top: var(--s-2);
  display: block;
  border-top: 1px dotted var(--rule);
  padding-top: var(--s-2);
}

/* -----------------------------------------------------------------------------
   VIII. FAQ
   ----------------------------------------------------------------------------- */
.faq { border-top: var(--rule-w) solid var(--rule); }
.faq details {
  border-bottom: var(--rule-w) solid var(--rule);
  padding: var(--s-3) 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 2.5rem;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-serif);
  font-size: var(--t-h4);
  font-variation-settings: "opsz" 20, "wght" 460;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--stamp);
  text-align: right;
  transition: transform var(--t-fast) var(--ease);
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--stamp); }

.faq__answer {
  margin-top: var(--s-2);
  font-size: var(--t-body);
  line-height: 1.6;
  max-width: 70ch;
  color: var(--ink);
}

/* -----------------------------------------------------------------------------
   IX. CTA — final lead capture
   ----------------------------------------------------------------------------- */
.cta {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-6) 0;
  margin-top: var(--s-5);
  position: relative;
}
.cta__grid {
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 64rem) {
  .cta__grid {
    grid-template-columns: 7rem 1.1fr 1fr;
    column-gap: var(--s-5);
    padding-inline: var(--gutter-lg);
  }
}
.cta__margin .section__numeral { color: var(--highlight); }
.cta__margin .section__stamp { color: var(--paper); }
.cta__margin .section__stamp .sheet-num { color: var(--highlight); }

.cta__title {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1.05;
  font-variation-settings: "opsz" 72, "wght" 380;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin-bottom: var(--s-3);
}
.cta__title em {
  font-style: italic;
  color: var(--highlight);
  font-variation-settings: "opsz" 72, "SOFT" 100, "wght" 360;
}

.cta__lede {
  font-size: var(--t-body-lg);
  line-height: 1.55;
  max-width: 44ch;
  color: var(--paper);
  opacity: 0.85;
}

.cta__form {
  display: grid;
  gap: var(--s-2);
  align-self: end;
}
.cta__form .field {
  display: grid;
  gap: var(--s-0);
}
.cta__form label {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--highlight);
}
.cta__form input,
.cta__form select,
.cta__form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--paper);
  padding: var(--s-1) 0;
  color: var(--paper);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  width: 100%;
  font-variation-settings: "opsz" 18, "wght" 380;
}
.cta__form input::placeholder,
.cta__form textarea::placeholder { color: rgba(245,241,232,0.45); }
.cta__form input:focus,
.cta__form select:focus,
.cta__form textarea:focus {
  outline: none;
  border-bottom-color: var(--highlight);
}

.cta__form .btn--stamp { margin-top: var(--s-2); }

.cta__note {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
  margin-top: var(--s-1);
}

/* -----------------------------------------------------------------------------
   X. SOURCES / COLOPHON-EXTRA
   ----------------------------------------------------------------------------- */
.sources {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--rule-w) solid var(--rule);
}
@media (min-width: 48rem) { .sources { grid-template-columns: repeat(2, 1fr); } }

.sources li {
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  border-bottom: var(--rule-w) solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
@media (min-width: 48rem) {
  .sources li:nth-child(odd) { padding-right: var(--s-3); border-right: var(--rule-w) solid var(--rule); }
  .sources li:nth-child(even) { padding-left: var(--s-3); }
}
.sources__num {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  color: var(--stamp);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.sources a {
  font-size: var(--t-body-sm);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.sources a:hover { color: var(--stamp); border-bottom-color: var(--stamp); }