/* /money on Design System 4 (Oct 19, 2026). Only ds.css tokens; no new hues,
 * no motion. The page is mostly opened on a phone from a creator link, so
 * the hero is shorter than the homepage's and the quiz arrives quickly. */

/* Condensed hero: same headline, a size down, no product mock. */
.mn-hero { padding: clamp(44px, 6vw, 84px) 0 clamp(48px, 6vw, 80px); }
.mn-hero .ls-h1 { font-size: clamp(38px, 4.6vw, 66px); max-width: 15ch; }
@media (min-width: 900px) { .mn-hero .ls-h1 { max-width: none; } }
.mn-hero .ls-lead { margin-top: 20px; max-width: 54ch; }
.mn-hero .ls-ctas { margin-top: 28px; }

/* The quiz sits right under the hero; the section top is the hero bottom. */
.mn-find { padding-top: 0; }
.mn-find .ls-section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.mn-find .ls-h2 { font-size: clamp(30px, 3.6vw, 50px); }

/* The 3-step mini: the homepage stairs at a smaller rise. */
.mn-how .ls-section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.mn-how .ls-step:nth-child(2) { margin-top: 40px; }
.mn-how .ls-step:nth-child(3) { margin-top: 80px; }
@media (max-width: 760px) {
  .mn-how .ls-step:nth-child(2), .mn-how .ls-step:nth-child(3) { margin-top: 0; }
}
.mn-honest { margin-top: clamp(32px, 4vw, 48px); }

/* Pricing microline: one centered line between two hairlines. */
.mn-price-line { text-align: center; padding: 30px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.mn-price-main { font: 400 clamp(20px, 2vw, 25px)/1.35 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.mn-price-main strong { font-weight: 400; font-size: 1.28em; letter-spacing: -.02em; }
.mn-price-line .ls-fine { margin-top: 10px; text-wrap: pretty; }
.mn-price-line .ls-link + .ls-link { margin-left: 10px; }
.mn-nw { white-space: nowrap; }

/* The end while the stores are not live: one plain line under the price. */
.mn-price:has(+ .mn-end) { padding-bottom: 0; }
.ls-section.mn-end { padding: clamp(28px, 4vw, 44px) 0 var(--section); }
.mn-soon-line { font-size: 15px; color: var(--ink-2); }

/* Download (stores live): the final glass card. */
.mn-dl-card .ls-lead { margin-top: 18px; max-width: 52ch; }

/* When the stores are live: buttons left, a large QR code right, on a
 * light ground so every phone camera reads it. Under 760px the QR goes
 * below the buttons: most visitors here are already on a phone. */
.mn-dl-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 5vw, 64px); align-items: center; text-align: left; }
.mn-dl-copy .ls-lead { margin-left: 0; }
.mn-qr { display: grid; justify-items: center; gap: 14px; }
/* The SVG paints its own light ground and quiet zone (qr.py). */
.mn-qr .ls-qr { display: block; width: clamp(220px, 24vw, 280px); height: auto; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-card); }
.mn-qr figcaption { max-width: 26ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); text-align: center; }
@media (max-width: 760px) {
  .mn-dl-grid { grid-template-columns: 1fr; text-align: center; }
  .mn-dl-copy .ls-lead { margin-left: auto; }
  .mn-dl-copy .ls-ctas { justify-content: center; }
}