/* Beyond Wealth app on desktop: uses the whole screen, side navigation, wider grids. */
@media (min-width: 1000px) {
  .wrap { max-width: none; width: 100%; margin: 0; padding-left: 176px; padding-right: 56px; padding-bottom: 64px; }
  .top { margin-left: -176px; margin-right: -56px; padding-left: 40px; padding-right: 56px; }
  .top .nm { font-size: 14px; }

  /* Tab bar becomes a left rail */
  .tabs {
    left: 24px; top: 96px; bottom: auto; transform: none;
    width: 112px; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 6px;
    padding: 10px; border-radius: 26px;
  }
  .tabs .pill { display: none; }
  .tabs a { padding: 14px 0 12px; font-size: 12.5px; border-radius: 18px; }
  .tabs a.on { background: linear-gradient(100deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); box-shadow: 0 6px 20px rgba(212,180,117,.35); }
  .tabs a:not(.on):hover { color: var(--txt); background: rgba(255,255,255,.04); }

  /* Bigger hero, wider type */
  .h1 { font-size: 46px; }
  .hero { grid-template-columns: 1fr 220px; margin-top: 28px; }
  .hero .h1 { font-size: 52px; }
  .hero canvas { width: 220px; height: 220px; }
  .lead { font-size: 18px; max-width: 64ch; }

  /* Grids use the space */
  .grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .stack > .btn, .stack > a.btn { grid-column: 1 / -1; }
  #view .v > .card.gold, #view .v > a.card.gold { max-width: none; }
  .reader { max-width: 760px; font-size: 17.5px; }
  #lessons, #lsn { max-width: 900px; }

  /* Sheets open as centered windows */
  .sheet {
    top: 50%; bottom: auto; width: min(620px, 92vw); max-height: 86vh;
    border-radius: 28px; border-bottom: 1px solid var(--line2);
    transform: translate(-50%, -40%) scale(.98); opacity: 0; pointer-events: none;
    transition: transform .35s var(--ease), opacity .3s;
  }
  .sheet.on { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
  .grab { display: none; }
  .toast { bottom: 32px; }
}
@media (min-width: 1400px) {
  .stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wrap { padding-left: 200px; padding-right: 72px; }
  .top { margin-left: -200px; margin-right: -72px; }
}
@media (min-width: 1800px) {
  .stack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}