/* ==========================================================================
   Landing page extras — only referenced by index.html. Kept separate from
   assets/m3.v1.css so the pages users open constantly (FAQ, What's New)
   never pay for hero/marketing styling they don't use.
   ========================================================================== */

.hero{padding:36px 0 8px}
.hero .eyebrow{
  display:inline-flex;align-items:center;height:26px;padding:0 12px;
  border-radius:13px;background:var(--md-sys-color-primary-container);
  color:var(--md-sys-color-on-primary-container);font-size:12px;font-weight:600;
  letter-spacing:.3px;margin-bottom:16px;
}
.hero h1{font-size:34px;line-height:1.15;font-weight:400;margin:0 0 12px;letter-spacing:-.2px}
.hero h1 b{font-weight:600;color:var(--md-sys-color-primary)}
.hero p.sub{font-size:16px;line-height:26px;color:var(--md-sys-color-on-surface-variant);max-width:46ch;margin:0 0 20px}

/* ---- Ledger illustration (signature element) ---- */
.ledger-wrap{margin:28px 0 8px;display:flex;justify-content:center}
.ledger{width:100%;max-width:340px;height:auto}
.ledger text{font-family:Roboto,"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif}

/* ---- Stat strip ---- */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0}
.stat{
  flex:1 1 120px;background:var(--md-sys-color-surface-container);border-radius:var(--shape-m);
  padding:12px 14px;
}
.stat .num{font-size:20px;font-weight:600;color:var(--md-sys-color-primary);display:block}
.stat .lbl{font-size:12px;color:var(--md-sys-color-on-surface-variant)}

/* ---- Feature grid ---- */
.features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 8px}
@media (max-width:420px){.features{grid-template-columns:1fr}}
.feature{
  background:var(--md-sys-color-surface-container-low);border-radius:var(--shape-l);
  padding:16px;
}
.feature .icon{
  width:40px;height:40px;border-radius:12px;
  background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.feature .icon svg{width:22px;height:22px}
.feature .ftitle{font-size:14px;font-weight:600;margin:0 0 4px}
.feature .fdesc{font-size:13px;line-height:19px;color:var(--md-sys-color-on-surface-variant);margin:0}

/* ---- CTA band ---- */
.cta-band{
  margin:32px 0 8px;padding:24px 20px;border-radius:var(--shape-xl);
  background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);
  text-align:center;
}
.cta-band p.title-l{margin:0 0 6px}
.cta-band p.body-m{color:var(--md-sys-color-on-primary-container);opacity:.85;margin:0 0 16px}
.cta-band .btn-filled{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}

/* ---- Languages line ---- */
.langs{font-size:13px;color:var(--md-sys-color-on-surface-variant);margin:4px 0 0}