/* Sancaq home page (tools/build_legal.py). Builds on legal.css. */
.hero { text-align: center; padding: 18px 0 8px; }
.hero img { width: 132px; height: 132px; border-radius: 32px; box-shadow: 0 10px 30px rgba(61,53,83,.22); }
.hero h1 { font-size: clamp(34px, 8vw, 54px); color: var(--accent); margin: 14px 0 0; }
.hero .tag { font-size: clamp(18px, 4vw, 22px); font-weight: 900; margin: 2px 0 10px; }
.hero .lead { max-width: 600px; margin: 0 auto 22px; color: var(--soft); font-weight: 700; }
.play { display: inline-block; padding: 14px 34px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 1000; font-size: 20px; text-decoration: none; box-shadow: 0 5px 0 #B84E1C, 0 10px 24px rgba(229,103,42,.35); }
.play:active { transform: translateY(3px); box-shadow: 0 2px 0 #B84E1C; }
.soon { color: var(--soft); font-size: 14px; font-weight: 700; margin: 16px 0 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 30px 0 8px; }
.grid section { background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: 0 3px 12px rgba(61,53,83,.08); }
.grid h2 { margin: 0 0 4px; font-size: 18px; }
.grid p { margin: 0; color: var(--soft); font-weight: 600; font-size: 15px; }
ol.steps { font-weight: 700; }