.rules-section { background:#ff80ba; }
.rules-heading { display:flex; justify-content:space-between; align-items:end; gap:25px; margin-bottom:34px; }
.rules-heading p { max-width:350px; margin:0; }
.rules-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.rule-card { background:var(--paper); border:2px solid var(--navy); border-radius:10px; padding:24px 26px 0; overflow:hidden; }
.rule-card h3 { display:flex; align-items:center; gap:14px; font-size:32px; margin-bottom:13px; }
.rule-mark { display:grid; place-items:center; flex:none; min-width:52px; height:52px; padding:0 13px; border-radius:26px; white-space:nowrap; background:var(--yellow); font:800 23px/1 var(--display); letter-spacing:-.5px; }
.rule-card:nth-child(4n+2) .rule-mark,.rule-card:nth-child(4n+3) .rule-mark { background:var(--blue); color:white; }
.rule-card>p { font-size:15px; margin-bottom:22px; max-width:55ch; }
.rule-card details { margin:0 -26px; border-top:1px solid #19244935; }
.rule-card summary { padding:14px 26px; cursor:pointer; font-size:14px; font-weight:800; }
.rule-card summary:hover { background:#ffe46d55; }
.rule-card summary:focus-visible { outline-offset:-5px; }
.rule-card details[open] summary { background:var(--yellow); }
.rule-coaching { padding:20px 26px 24px; font-size:14px; }
.rule-coaching p { margin-bottom:15px; }
.rule-coaching p:last-child { margin-bottom:0; }
.rule-coaching strong { color:var(--blue); }
.rule-coaching a { text-decoration:underline; text-underline-offset:3px; }
.rule-mark svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.rule-practice { background:#fff4bf; border-radius:8px; padding:12px 14px; }
.rules-practice-picker { display:flex; align-items:center; flex-wrap:wrap; gap:15px 24px; margin-top:30px; }
.rules-practice-picker p { margin:0; font-size:14px; flex:1; min-width:180px; }
.rules-sources { max-width:90ch; font-size:13px; margin:27px 0 0; line-height:1.7; }
.rules-sources a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:700px) {
    .rules-heading { display:block; }
    .rules-heading p { margin-top:20px; }
    .rules-grid { grid-template-columns:1fr; gap:14px; }
    .rule-card { padding:20px 21px 0; }
    .rule-card h3 { font-size:29px; }
    .rule-mark { min-width:46px; height:46px; padding:0 11px; font-size:21px; }
    .rule-card details { margin:0 -21px; }
    .rule-card summary { padding:14px 21px; }
    .rule-coaching { padding:18px 21px 21px; }
}