/* LIBRANCY — shared responsive layout (mobile-first)
   Breakpoints: base = phones · ≥768px tablets · ≥1080px desktops.
   Layout widths live here; colors/spacing stay inline in the apps. */

.lbr-shell {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  box-shadow: 0 0 60px rgba(0,31,63,.06);
  display: flex;
  flex-direction: column;
}
.lbr-nav { width: 100%; max-width: 480px; }

/* ---------- Tablets ---------- */
@media (min-width: 768px) {
  .lbr-shell { max-width: 640px; }
  .lbr-shell.wide { max-width: 960px; }        /* funnel hero = website hero */
  .lbr-shell.parent { max-width: 780px; }
  .lbr-nav { max-width: 640px; }

  .grid-auto { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .grid-auto > * { margin-bottom: 0 !important; }
  .creations-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ---------- Desktops ---------- */
@media (min-width: 1080px) {
  .lbr-shell { max-width: 720px; }
  .lbr-shell.wide { max-width: 1100px; }
  .lbr-shell.parent { max-width: 1020px; }
  .lbr-nav { max-width: 720px; }

  /* Funnel hero: standard two-column website hero (copy left, product right) */
  .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
  .hero-grid h1 { font-size: 40px !important; line-height: 1.12 !important; }

  /* Parent dashboard: economy + leaderboards side by side */
  .grid-2col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
  .grid-2col > * { margin-top: 0 !important; }
}

/* Comfortable reading on very large screens */
@media (min-width: 1500px) {
  .lbr-shell.wide { max-width: 1180px; }
}