/* ══════════════════════════════════════
   CUSTOMIZE (backgrounds + dial themes)
   ══════════════════════════════════════ */
.customize { background: var(--void-deep); border-block: 1px solid var(--hairline); }
.customize__copy h2 { margin-bottom: var(--space-sm); }
.customize__copy p { color: var(--ink-400); margin-bottom: var(--space-md); }
.customize__list { display: flex; flex-direction: column; gap: .9rem; margin-bottom: var(--space-md); }
.customize__list li { position: relative; padding-left: 1.6rem; color: var(--ink-300); font-size: .94rem; }
.customize__list li::before { content: '◆'; position: absolute; left: 0; top: .05em; color: var(--brass); font-size: .65em; }
.customize__list li strong { color: var(--ink-100); }
.customize__visuals { display: flex; gap: 1.4rem; justify-content: center; }

/* ══════════════════════════════════════
   THEME GALLERY
   ══════════════════════════════════════ */
.themes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

/* ══════════════════════════════════════
   STATS PANEL (data the compass surfaces)
   ══════════════════════════════════════ */
.statpanel { background: var(--void-deep); border-block: 1px solid var(--hairline); }
.statpanel__copy h2 { margin-bottom: var(--space-sm); }
.statpanel__copy p { color: var(--ink-400); margin-bottom: var(--space-md); }
.statpanel__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem;
}
.statpanel__cell {
  background: var(--void-card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: .9rem .7rem;
  text-align: center;
}
.statpanel__cell svg { width: 20px; height: 20px; color: var(--brass); margin-bottom: .4rem; }
.statpanel__cell .label { font-size: .68rem; color: var(--ink-600); text-transform: uppercase; letter-spacing: .06em; }
.statpanel__cell .value { font-family: var(--font-mono); font-size: .98rem; color: var(--ink-100); font-weight: 600; margin-top: .15rem; }

/* ══════════════════════════════════════
   WEATHER SECTION
   ══════════════════════════════════════ */
.weather { background: var(--void); }
.weather__copy h2 { margin-bottom: var(--space-sm); }
.weather__copy p { color: var(--ink-400); margin-bottom: var(--space-md); }
.weather__cards { display: flex; flex-direction: column; gap: 1rem; }
.weather-card {
  background: var(--void-raised); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 1.1rem 1.25rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.weather-card__icon {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--cyan-dim); color: var(--cyan);
}
.weather-card h4 { font-size: .92rem; color: var(--ink-100); margin-bottom: .2rem; font-family: var(--font-sans); font-weight: 600; }
.weather-card p { font-size: .85rem; color: var(--ink-400); max-width: none; }

/* ══════════════════════════════════════
   LOCATION / SAVED PLACES
   ══════════════════════════════════════ */
.saved { background: var(--void-deep); border-block: 1px solid var(--hairline); }
.saved__grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.saved__copy h2 { margin-bottom: var(--space-sm); }
.saved__copy p { color: var(--ink-400); margin-bottom: var(--space-md); }
.saved__visuals { display: flex; gap: 1.5rem; justify-content: center; }

/* ══════════════════════════════════════
   HOW IT WORKS (calibration is a real sequence — numbered legitimately)
   ══════════════════════════════════════ */
.how__list { display: flex; flex-direction: column; gap: var(--space-xl); }
.how__step { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.how__step--reverse { grid-template-columns: 1fr auto; }
.how__step--reverse .phone { order: 2; }
.how__step--reverse .how__step-copy { order: 1; }
.how__step-copy h3 { margin-bottom: .5rem; }
.how__step-copy p { color: var(--ink-400); font-size: .95rem; }

/* ══════════════════════════════════════
   FEATURES
   ══════════════════════════════════════ */
.features__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-md); }

/* ══════════════════════════════════════
   USE CASES
   ══════════════════════════════════════ */
.usecases { background: var(--void-deep); border-block: 1px solid var(--hairline); }
.usecases__list { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: var(--space-sm); }
.usecases__list li {
  background: var(--void-card); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: .8rem 1.05rem; font-size: .88rem; color: var(--ink-300);
  display: flex; align-items: center; gap: .6rem;
}
.usecases__list li::before { content: '⌖'; color: var(--cyan); font-size: .85rem; flex-shrink: 0; }

/* ══════════════════════════════════════
   FAQ
   ══════════════════════════════════════ */
.faq__inner { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__list { display: flex; flex-direction: column; gap: .65rem; }

/* ══════════════════════════════════════
   FINAL CTA
   ══════════════════════════════════════ */
.cta-final {
  text-align: center; padding-block: var(--space-2xl);
  border-top: 1px solid var(--hairline);
}
.cta-final__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.cta-final h2 { max-width: 20ch; }
.cta-final p { color: var(--ink-400); max-width: 46ch; margin-inline: auto; }
.section-playcta { text-align: center; margin-top: var(--space-md); }
.section-playcta--inline { text-align: left; margin-top: var(--space-sm); }