/* yantara-responsive.css — responsive breakpoints + sticky-nav offsets for the
   landing page. The page is built with inline React styles, so these overrides
   use !important to win specificity. Class hooks are added in the JSX. */

/* Fixed nav is ~70px tall — offset in-page anchor jumps so section headings
   aren't hidden underneath it. */
#problem, #features, #how, #scenic, #scenarios, #group,
#coming-next, #roadmap, #limits, #privacy, #cta, #ea-faq { scroll-margin-top: 84px; }
html { scroll-padding-top: 84px; }

/* ===== Large displays — scale the whole page up so type is comfortable and
   the content uses more of a wide Mac / external monitor instead of sitting in
   a narrow centered column. `zoom` scales layout + fonts uniformly. ===== */
@media (min-width: 1680px) { #root { zoom: 1.12; } }
@media (min-width: 2000px) { #root { zoom: 1.26; } }
@media (min-width: 2560px) { #root { zoom: 1.45; } }

/* Custom dropdowns in the signup form — native arrow removed (inline styles),
   so draw our own chevron and keep the popup list dark. */
.y-select-wrap::after {
  content: "▾";
  position: absolute; right: 4px; bottom: 14px;
  color: rgba(232,230,225,0.55); font-size: 13px; pointer-events: none;
}
.y-select option { background-color: #141414; color: #e8e6e1; }
.y-select option:disabled { color: rgba(232,230,225,0.45); }
.y-select:focus { border-bottom-color: #e97339 !important; }

/* Hide the BETA·COHORT status pill when the nav gets tight (it crowds LIMITS) */
@media (max-width: 1200px) { .y-beta-status { display: none !important; } }

/* In the 769–1100px band the inline links can't fit next to the bigger wordmark
   + CTA — hide them earlier so the CTA never wraps or clips. */
@media (max-width: 1100px) { .y-navlinks { display: none !important; } }

/* ===== Tablet / small laptop — keep TWO columns, just tighten padding ===== */
@media (max-width: 900px) {
  #root section { padding-top: 88px !important; padding-bottom: 88px !important; padding-left: 40px !important; padding-right: 40px !important; }
  .y-navinner { padding-left: 40px !important; padding-right: 40px !important; }
  .y-hero-body { padding-left: 40px !important; padding-right: 40px !important; }
}

/* ===== Phone — collapse to a single column ===== */
@media (max-width: 768px) {
  #root section { padding-top: 64px !important; padding-bottom: 64px !important; padding-left: 22px !important; padding-right: 22px !important; }

  /* collapse every multi-column layout */
  .y-stack { grid-template-columns: 1fr !important; gap: 22px !important; }

  /* nav: drop the inline links, keep logo + CTA */
  .y-navinner { padding: 12px 22px !important; }
  .y-navlinks { display: none !important; }

  /* hero */
  .y-hero-body { padding: 24px 22px 0 !important; }
  .y-metarow { flex-wrap: wrap !important; gap: 8px 16px !important; }
  .y-metarow > :nth-child(4) { margin-left: 0 !important; }
  .y-specs { grid-template-columns: 1fr 1fr 1fr !important; }

  /* footer: 4 cols -> 2 */
  .y-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* roadmap rows: hide the trailing status chip, tighten columns */
  .y-roadmap-row { grid-template-columns: 16px 96px 1fr !important; gap: 14px !important; padding-left: 22px !important; padding-right: 22px !important; }
  .y-roadmap-row > :nth-child(4) { display: none !important; }

  /* problem / limits side note + rows */
  .y-row-110 { grid-template-columns: 80px 1fr !important; gap: 16px !important; padding-left: 22px !important; padding-right: 22px !important; }
}

/* ===== Small phone ===== */
@media (max-width: 480px) {
  #root section { padding-top: 52px !important; padding-bottom: 52px !important; }
  .y-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .y-specs { grid-template-columns: 1fr !important; }
  .y-feature-themes { grid-template-columns: 1fr !important; }
}