/* token-rules — merged from the static build's app.css, source order preserved. */

.rules-section { min-height: 1130px; padding-top: 120px; background-color: var(--paper); background-image: var(--noise); }
.rules-section .section-intro h2 { margin-top: 27px; font-size: 60px; line-height: 60px; }
.rules-grid { display: grid; width: min(100%, var(--page-max)); grid-template-columns: repeat(3,1fr); gap: 20px; margin: 68.5px auto 0; padding-inline: var(--page-gutter); }
.rule-card { position: relative; min-height: 401px; padding: 0 32px 24px; border: 1px solid rgba(0,0,0,.1); background: #fff var(--noise); }
.rule-card__number { position: absolute; top: 0; left: 0; width: 35px; height: 35px; color: #fff; background: var(--wine); font-size: 24px; font-weight: 500; text-align: center; line-height: 35px; }
.rule-illustration { display: grid; height: 180px; place-items: center; margin-top: 49px; }
.rule-illustration img { max-width: 261px; max-height: 180px; }
.rule-illustration::before, .rule-illustration::before { top: 12px; left: 16px; width: 18px; height: 6px; border-radius: 4px; background: var(--wine); box-shadow: 26px 0 var(--wine), 52px 0 rgba(72,12,8,.16); }
.rule-card small { display: block; margin-top: 22px; color: var(--coral); font-size: 16px; line-height: 16px; }
.rule-card h3 { margin: 17px 0 0; font-size: 32px; font-weight: 500; line-height: 32px; }
.rule-card p { margin: 11px 0 0; color: rgba(0,0,0,.6); font-size: 16px; line-height: 24px; }