/*
 * MealMatrix marketing home — layered on top of legal.css (shares the design
 * tokens, top nav, footer, and badges). Self-contained: system fonts, inline
 * SVG, no external requests. Landing-specific components only.
 */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .98rem; line-height: 1; text-decoration: none;
  padding: .8rem 1.2rem; border-radius: 11px; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-ink); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); }

/* Google Play badge (placeholder mark — swap the official asset before launch) */
.play-badge {
  display: inline-flex; align-items: center; gap: .65rem; text-decoration: none;
  background: #000; color: #fff; border-radius: 11px; padding: .55rem 1.05rem; border: 1px solid #000;
}
.play-badge:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.play-badge svg { width: 26px; height: 26px; flex: none; }
.play-badge .pb-small { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; line-height: 1.2; }
.play-badge .pb-big { display: block; font-size: 1.12rem; font-weight: 600; line-height: 1.1; }

/* Hero */
.home-hero {
  background:
    radial-gradient(1200px 460px at 8% -30%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(1000px 420px at 100% -20%, rgba(79,70,229,.2), transparent 60%),
    var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.home-hero-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 3.4rem 1.25rem 3.2rem;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center;
}
.pill {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600;
  color: var(--brand-ink); background: #fff; border: 1px solid #d6d8fb; border-radius: 999px; padding: .35rem .8rem;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.home-hero h1 {
  margin: 1rem 0 .6rem; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em;
}
.home-hero h1 .grad { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero p.sub { margin: 0; font-size: 1.15rem; color: var(--ink-soft); max-width: 34rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
.hero-note { margin: 1.1rem 0 0; font-size: .86rem; color: var(--ink-faint); }

/* Phone mockup (pure HTML/CSS, no images) */
.phone-wrap { display: flex; justify-content: center; }
.phone {
  width: 270px; background: #0e1430; border-radius: 38px; padding: 12px;
  box-shadow: 0 30px 60px -20px rgba(16,23,41,.5), 0 8px 20px -8px rgba(16,23,41,.3);
}
.phone-screen { background: #f6f8fc; border-radius: 28px; overflow: hidden; }
.ps-top { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; padding: 1rem 1.1rem 1.3rem; }
.ps-top .hi { font-size: .78rem; opacity: .9; }
.ps-top .bal { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin-top: .15rem; }
.ps-top .balcap { font-size: .68rem; opacity: .85; text-transform: uppercase; letter-spacing: .08em; }
.ps-chip { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; background: rgba(255,255,255,.18); border-radius: 999px; padding: .25rem .6rem; font-size: .72rem; }
.ps-list { padding: .8rem; display: grid; gap: .55rem; }
.ps-item { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .65rem; }
.ps-emoji { width: 34px; height: 34px; border-radius: 9px; background: var(--brand-wash); display: grid; place-items: center; font-size: 1.05rem; }
.ps-meta { flex: 1; min-width: 0; }
.ps-name { font-size: .82rem; font-weight: 600; color: var(--ink); }
.ps-sub { font-size: .68rem; color: var(--ink-faint); }
.ps-price { font-size: .8rem; font-weight: 700; color: var(--brand-ink); }
.ps-bar { display: flex; justify-content: space-around; padding: .6rem; border-top: 1px solid var(--line); background: #fff; }
.ps-bar span { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-sunk); }
.ps-bar span.on { background: var(--brand); }

/* Generic section scaffolding */
.section { max-width: var(--maxw); margin: 0 auto; padding: 3.6rem 1.25rem; }
.section-tit { text-align: center; max-width: 40rem; margin: 0 auto 2.2rem; }
.section-tit .eyebrow { display: inline-block; }
.section-tit h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -.02em; margin: .5rem 0 .5rem; }
.section-tit p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

/* Trust strip */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.trust-inner { max-width: var(--maxw); margin: 0 auto; padding: 1.1rem 1.25rem; display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: center; justify-content: center; color: var(--ink-soft); font-size: .92rem; }
.trust-inner b { color: var(--ink); }
.trust-inner .sep { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }

/* Feature grid */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.feature {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm);
}
.feature .fico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: var(--brand-wash); color: var(--brand-ink); margin-bottom: 1rem; }
.feature .fico svg { width: 22px; height: 22px; }
.feature h3 { margin: 0 0 .35rem; font-size: 1.1rem; letter-spacing: -.01em; }
.feature p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.55; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; counter-reset: step; }
.step { position: relative; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem; }
.step .num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; margin-bottom: .8rem; }
.step h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* Split / operators band */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.split ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.split li { margin: .45rem 0; color: var(--ink-soft); }
.split-art { background: linear-gradient(135deg, #eef0fe, #f6f7ff); border: 1px solid #e0e2fb; border-radius: var(--radius); min-height: 260px; display: grid; place-items: center; padding: 1.5rem; }
.split-art svg { width: 100%; max-width: 320px; height: auto; }

/* Security band */
.security { background: var(--ink); color: #c7d0df; }
.security .section { padding-top: 3.2rem; padding-bottom: 3.2rem; }
.security h2 { color: #fff; }
.security .sec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.8rem; }
.security .sec-item { background: #161d33; border: 1px solid #283246; border-radius: var(--radius-sm); padding: 1.2rem; }
.security .sec-item .si-ico { color: #b9b4ff; margin-bottom: .6rem; }
.security .sec-item .si-ico svg { width: 22px; height: 22px; }
.security .sec-item h3 { margin: 0 0 .25rem; font-size: 1rem; color: #fff; }
.security .sec-item p { margin: 0; font-size: .88rem; color: #93a0b4; line-height: 1.5; }
.security a.link { color: #b9b4ff; }

/* FAQ */
.faq { max-width: 48rem; margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 1.1rem; margin: .7rem 0; background: #fff; }
.faq details[open] { border-color: #c9caf7; box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 1rem 0; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform .2s ease; color: var(--ink-faint); flex: none; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details p { margin: 0 0 1rem; color: var(--ink-soft); }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.cta-band .section { text-align: center; }
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -.02em; margin: 0 0 .6rem; }
.cta-band p { color: rgba(255,255,255,.92); font-size: 1.08rem; margin: 0 auto 1.6rem; max-width: 34rem; }
.cta-band .play-badge { border-color: rgba(255,255,255,.4); }

/* Responsive */
@media (max-width: 880px) {
  .home-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .phone-wrap { order: 2; }
  .features, .steps, .security .sec-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .features, .steps, .security .sec-grid { grid-template-columns: 1fr; }
  .nav-cta { display: none; }
  /* Login is the only sign-in entry on mobile, so keep it visible in the opened
     menu even though the redundant "Get the app" CTA is hidden here (the hero
     carries its own download CTA on mobile). */
  .site-nav a.nav-cta.nav-login { display: inline-flex; }
}

@media print { .home-hero, .cta-band, .security { background: none !important; color: #000 !important; } }