/* The landing page: a loud yellow hero, then the freshest finds. */
.hero { background: var(--tag-yellow); color: var(--ink); text-align: center; padding: 32px 16px 36px; border-bottom: 4px solid var(--ink); }
.hero-inner { max-width: 640px; margin: 0 auto; }
.hero h1 { color: var(--ink); font-size: clamp(2.2rem, 9vw, 3.4rem); margin: .2em 0 .1em; }
.hero-coin { width: 96px; height: 96px; transform: rotate(-8deg); }
.tagline { font-family: var(--title-font); font-weight: 600; font-size: 1.35rem; margin-bottom: .6em; }
.tagline .hl { background: linear-gradient(transparent 55%, #fff 55%, #fff 92%, transparent 92%); }
.promise { font-size: 1rem; max-width: 30em; margin: 0 auto 1.2em; }
.hero-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .button.yellow { background: var(--ink); color: var(--tag-yellow); border-color: var(--ink); box-shadow: 0 3px 0 #000; }
.hero .button:not(.yellow) { border-color: var(--ink); }
.faq h2 { margin-top: 1.2em; }