/* ==================================================================
 * App Dashboard — light, colorful, illustrated, fully card-based.
 * Deliberately distinct from the main site's text-forward homepage,
 * built around the hero illustration and a consistent 3-tint card
 * system using only the existing brand colors (green/gold/navy) —
 * varied and vibrant, but never off-brand.
 * ================================================================== */

.mt-app-home{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:#FEEFD8; /* matches the hero illustration's own background,
                          so the image blends straight into the page */
  font-family:var(--mt-sans);
  color:var(--mt-navy);
  -webkit-font-smoothing:antialiased;
}

.mt-ah-wrap{
  max-width:520px;
  margin:0 auto;
  padding:22px 18px calc(40px + env(safe-area-inset-bottom));
}

.mt-ah-topbar{ margin-bottom:6px; }
.mt-ah-mark{ width:38px; height:38px; display:block; }

/* -------- Hero: illustration + headline + two bold pills -------- */
.mt-ah-hero-card{ text-align:center; margin-bottom:30px; }
.mt-ah-hero-img{
  width:78%;
  max-width:300px;
  margin:0 auto;
  display:block;
}
.mt-ah-hero-headline{
  font-family:var(--mt-display); font-weight:800;
  font-size:1.4rem; line-height:1.3; letter-spacing:-.2px;
  color:var(--mt-navy); margin:10px auto 18px; max-width:24ch;
}

.mt-ah-hero-pills{
  display:flex;
  gap:10px;
}
.mt-ah-pill{
  flex:1;
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 14px;
  border-radius:16px;
  text-decoration:none;
  font-family:var(--mt-display); font-weight:700;
  font-size:.88rem;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(33,58,71,.14);
  transition:transform .15s ease;
}
.mt-ah-pill:active{ transform:scale(.96); }
.mt-ah-pill img{ width:26px; height:26px; flex-shrink:0; }
.mt-ah-pill-green{ background:var(--mt-green); }
.mt-ah-pill-gold{ background:var(--mt-gold-deep); }

/* -------- Section labels -------- */
.mt-ah-h2{
  font-family:var(--mt-display); font-weight:800;
  font-size:1.08rem; color:var(--mt-navy);
  margin:0 0 12px;
}

/* -------- Card grid: the vibrant, colorful, tinted cards -------- */
.mt-ah-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:30px;
}

.mt-ah-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  border-radius:18px;
  padding:16px 15px;
  min-height:128px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 4px 14px rgba(33,58,71,.06);
  transition:transform .15s ease;
}
.mt-ah-card:active{ transform:scale(.96); }

.mt-ah-card.tint-a{ background:var(--mt-green-tint); }
.mt-ah-card.tint-b{ background:var(--mt-gold-tint); }
.mt-ah-card.tint-c{ background:#E7EEF3; }

.mt-ah-card-num{
  font-family:var(--mt-display); font-weight:800;
  font-size:1.5rem; color:rgba(33,58,71,.22);
  margin-bottom:2px;
}
.mt-ah-card-icon-img{ width:44px; height:44px; margin-bottom:4px; }

.mt-ah-card-name{
  font-family:var(--mt-display); font-weight:800;
  font-size:.92rem; color:var(--mt-navy); line-height:1.2;
}
.mt-ah-card-desc{
  font-size:.76rem; color:var(--mt-ink-soft); line-height:1.3;
  flex:1;
}
.mt-ah-card-go{
  align-self:flex-end;
  font-weight:800; font-size:1rem;
  color:var(--mt-green-deep);
  margin-top:auto;
}

/* -------- Premium CTA banner -------- */
.mt-ah-cta-banner{
  display:flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(120deg, var(--mt-navy) 0%, #17262F 100%);
  border-radius:20px;
  padding:18px;
  text-decoration:none;
  margin-bottom:24px;
  box-shadow:0 10px 24px rgba(33,58,71,.2);
}
.mt-ah-cta-banner img{ width:48px; height:48px; flex-shrink:0; }
.mt-ah-cta-text{
  flex:1;
  font-family:var(--mt-display); font-weight:800;
  font-size:.95rem; color:#fff; line-height:1.3;
}
.mt-ah-cta-go{ font-size:1.2rem; font-weight:800; color:var(--mt-gold); }

.mt-ah-full-site{
  display:block;
  text-align:center;
  padding:10px;
  font-weight:700; font-size:.86rem;
  color:var(--mt-ink-soft) !important;
  text-decoration:none;
}
.mt-ah-full-site:hover{ color:var(--mt-navy) !important; }

@media (max-width:360px){
  .mt-ah-hero-pills{ flex-direction:column; }
}

[dir="rtl"] .mt-ah-card{ align-items:flex-end; text-align:right; }
[dir="rtl"] .mt-ah-card-go{ align-self:flex-start; }
[dir="rtl"] .mt-ah-cta-banner{ direction:rtl; }