/* Page 01 — Home. Values taken from canvas frame 1A. */

/* ---------- shared section furniture ---------- */
.di-sechead { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 700px; }
.di-sechead__dek { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); margin: 0; }
.di-sechead--split {
  flex-direction: row; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-8); max-width: none;
}
.di-sechead--split > div { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 700px; }
.di-link { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--accent); white-space: nowrap; }

/* ---------- hero ---------- */
.di-hero {
  padding: 64px 48px 48px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  text-align: center;
  background: linear-gradient(var(--paper) 0%, var(--surface-muted) 100%);
}
.di-hero__h1 { margin: 0; max-width: 900px; text-wrap: balance; }
.di-hero__dek {
  margin: 0; max-width: 640px; text-wrap: pretty;
  font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-secondary);
}
.di-hero__cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.di-btn--lg { font-size: 15px; padding: 14px 24px; min-height: 0; }
.di-hero__trust { font-size: 13px; color: var(--text-muted); }

.di-hero__band { width: 100%; max-width: 1342px; background: var(--surface); border-radius: var(--r-frame); padding: 8px; }
.di-hero__band-img {
  position: relative;
  aspect-ratio: 1326 / 400;
  border-radius: 14px;
  background: var(--surface-muted);
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.di-hero__band-chip {
  margin-bottom: 18px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 11px; border-radius: var(--r-badge);
}

@media (max-width: 767px) {
  .di-hero { padding: 36px var(--pad-section-x-m) 28px; gap: 18px; }
  .di-hero__band-img { aspect-ratio: 4 / 3; }
}

/* ---------- picks ---------- */
.di-section-picks {
  padding: 56px 0;
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.di-picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }

.di-pick {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}
.di-pick__media {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  background: var(--border-strong);
}
.di-pick__img { width: 100%; height: 100%; object-fit: cover; }
.di-pick__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(16,20,19,.92) 0%, rgba(16,20,19,.72) 34%, rgba(16,20,19,0) 62%);
}
.di-pick__price {
  position: absolute; top: 16px; left: 16px;
  background: var(--paper); border: 1px solid #fff; color: var(--ink);
  font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -.015em;
  padding: 10px 16px; border-radius: var(--r-pill);
  box-shadow: 0 2px 10px rgba(16,20,19,.18);
}
.di-pick__rank {
  position: absolute; top: 16px; right: 16px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  padding: 8px 12px; border-radius: var(--r-pill);
}
.di-pick__title {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.di-pick__dev {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
}
.di-pick__name { font-size: 30px; font-weight: var(--fw-semibold); letter-spacing: -.03em; line-height: 1.1; color: #fff; }

.di-pick__body { flex: 1; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.di-pick__pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.di-badge--outline { background: var(--surface); border-color: var(--border); color: var(--neutral-tag); }

.di-pick__facts { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.di-pick__fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.di-pick__fact dd { margin: 0; font-size: 13px; color: var(--text-primary); }

.di-pick__why {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
}
.di-pick__why p { margin: 0; color: var(--text-body); }
.di-pick__actions { display: flex; gap: var(--sp-2); margin-top: auto; }
.di-pick__actions .di-btn { flex: 1; }

@media (max-width: 900px) {
  .di-picks { grid-template-columns: 1fr; }
  .di-pick__name { font-size: 22px; }
  .di-pick__facts { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ledger strip ---------- */
.di-ledger { background: var(--paper); border-bottom: 1px solid var(--border); }
.di-ledger__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); padding-block: var(--sp-10); }
.di-ledger__item { display: flex; flex-direction: column; gap: 4px; }
.di-ledger__value { font-size: 30px; font-weight: var(--fw-semibold); letter-spacing: -.03em; color: var(--ink); }

@media (max-width: 767px) { .di-ledger__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }

/* ---------- thesis ---------- */
.di-thesis { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
.di-thesis__intro { display: flex; flex-direction: column; gap: var(--sp-3); }
.di-thesis__list { display: flex; flex-direction: column; }
.di-thesis__item {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
}
.di-thesis__item p { margin: 6px 0 0; color: var(--text-secondary); }
.di-thesis__n {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--accent);
}
/* The reason to wait carries the same weight as the reasons to buy. */
.di-thesis__n--caveat { color: var(--negative); }
.di-thesis__item--caveat { background: var(--negative-soft); border-radius: var(--r-md); padding-inline: var(--sp-5); }

@media (max-width: 1023px) { .di-thesis { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---------- masterplan ---------- */
.di-section-masterplan {
  padding-block: var(--pad-section-y);
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.di-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); }
.di-facts__item {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.di-facts__value { font-size: 26px; font-weight: var(--fw-semibold); letter-spacing: -.03em; color: var(--ink); }

.di-drivers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-top: var(--sp-8); }
.di-drivers__item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
}
.di-drivers__n { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.di-drivers__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.di-drivers__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.di-drivers__top h3 { margin: 0; }
.di-drivers__body p { margin: 0; }

@media (max-width: 1023px) { .di-facts { grid-template-columns: repeat(2, 1fr); } .di-drivers { grid-template-columns: 1fr; } }

/* ---------- tools ---------- */
.di-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); margin-top: var(--sp-8); }
.di-tools__item {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}
.di-tools__item:hover { border-color: var(--accent); color: var(--ink); }
.di-tools__item h3 { margin: 0; }
.di-tools__item p { margin: 0; flex: 1; }
.di-tools__n { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }

@media (max-width: 1279px) { .di-tools { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .di-tools { grid-template-columns: 1fr; } }

/* ---------- location ---------- */
.di-location { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: start; }
.di-location__note { margin-top: var(--sp-4); max-width: 52ch; }
.di-location__list { margin: 0; }
.di-location__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--border);
}
.di-location__row dt { font-size: 15px; color: var(--text-body); }
.di-location__row dd { margin: 0; font-size: 15px; color: var(--ink); }

@media (max-width: 1023px) { .di-location { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---------- about ---------- */
.di-about { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-12); align-items: start; }
.di-about__text { display: flex; flex-direction: column; gap: var(--sp-4); }
.di-about__text p { margin: 0; color: var(--text-secondary); }
.di-about__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.di-about__slots { display: flex; flex-direction: column; gap: var(--sp-3); }
/* README §9: dashed slots stay empty until real material exists. Nothing is invented. */
.di-slot {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  background: var(--surface-sunken);
}

@media (max-width: 1023px) { .di-about { grid-template-columns: 1fr; gap: var(--sp-8); } }

/* ---------- investment pack ---------- */
.di-section-pack {
  padding-block: var(--pad-section-y);
  background: var(--ink);
  color: var(--text-on-dark);
}
.di-pack { display: grid; grid-template-columns: 1.2fr 380px; gap: var(--sp-12); align-items: start; }
.di-pack__text { display: flex; flex-direction: column; gap: var(--sp-4); }
.di-pack__text h2, .di-pack__text p { color: var(--text-on-dark); }
.di-pack__text .di-eyebrow { color: var(--gold-light); }
.di-pack__inside { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.di-pack__inside li { color: rgba(251,251,250,.78); }

.di-gated {
  display: flex; flex-direction: column; gap: var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--sp-6);
}
.di-field { display: flex; flex-direction: column; gap: 5px; }
.di-field input {
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  font-family: var(--font-sans); font-size: 15px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
}
.di-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.di-gated .di-micro { margin: 0; }

@media (max-width: 1023px) { .di-pack { grid-template-columns: 1fr; gap: var(--sp-8); } }

/* ---------- consultation ---------- */
.di-consult { border-top: 1px solid var(--border); }
.di-consult__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
  padding-block: var(--sp-10);
  flex-wrap: wrap;
}
.di-consult__inner h2 { margin: 0; }
.di-consult__inner p { margin: 6px 0 0; color: var(--text-secondary); }

.di-more { margin-top: var(--sp-6); }