/* ============================================================
   Lemariku — App page (app.html)   · loads after base.css
   Unique: feature tabs + phone device + right-aligned waitlist banner
   ============================================================ */

/* ---- Waitlist banner: right-aligned text + CTA ---- */
.banner--right { text-align: right; }
.banner--right .banner__scrim { background: linear-gradient(270deg, rgba(0,0,0,.66), rgba(0,0,0,.28) 72%); }
.banner--right .banner__inner { align-items: flex-end; justify-content: center; }
.banner--right .banner__title { max-width: 16ch; }

/* ---- App feature tabs ---- */
.tabbar-wrap { display: flex; justify-content: center; margin-bottom: clamp(34px, 5vw, 56px); }
.tabbar { display: inline-flex; gap: 4px; padding: 6px; background: #F3EEE9; border: 1px solid var(--line); border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tab { font: 700 15px/1 var(--body); color: var(--slate); background: none; border: 0; padding: 13px 26px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.tab:hover { color: var(--ink); }
.tab.is-active { background: #141210; color: #fff; box-shadow: inset 0 0 0 1.5px var(--teal); }

.tabview { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.tabview__title { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; }
.tabview__desc { font-size: 16px; line-height: 1.6; color: var(--slate); margin-top: 20px; max-width: 44ch; }
.tabfeats { display: flex; flex-direction: column; gap: 22px; margin-top: clamp(28px, 4vw, 40px); }
.tabfeat { display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: 16px; color: var(--ink); }
.tabfeat svg { width: 26px; height: 26px; flex: none; color: var(--ink); }

.tabview__device { display: flex; justify-content: center; background: #FAF6F1; border: 1px solid var(--line); border-radius: 26px; padding: clamp(28px, 4vw, 48px); }
.device { position: relative; width: min(300px, 100%); background: #0d0d0d; border-radius: 46px; padding: 12px; box-shadow: 0 40px 80px -36px rgba(0,0,0,.5); }
.device__screen { border-radius: 34px; overflow: hidden; background: #fff; aspect-ratio: 300 / 620; }
.device__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

@media (max-width: 900px) {
  .tabview { grid-template-columns: 1fr; gap: 36px; }
  .tabview__device { order: -1; }
}