function RulesSection() {
  return (
    <section id="rules" data-screen-label="07 Rules">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>07</b> &nbsp;/&nbsp; Rules</div>
          <div>
            <h2 className="h1">Do · Don't.</h2>
            <p className="lede" style={{ marginTop: 16 }}>The short list. Print this, pin it, ship faster.</p>
          </div>
        </div>

        <div className="rule-row">
          <div className="rule do">
            <div className="badge">✓ DO</div>
            <div className="preview">
              <Lockup height={32} color="#000945"/>
            </div>
            <p>Use the full lockup at comfortable scale with plenty of breathing room.</p>
          </div>
          <div className="rule dont">
            <div className="badge">✕ DON'T</div>
            <div className="preview">
              <div style={{ transform: 'scaleX(0.65)' }}>
                <Lockup height={36} color="#000945"/>
              </div>
            </div>
            <p>Never stretch, squash, or distort the wordmark or mark.</p>
          </div>
        </div>

        <div className="rule-row">
          <div className="rule do">
            <div className="badge">✓ DO</div>
            <div className="preview" style={{ background: '#000945' }}>
              <Lockup height={32} color="#fafaf7"/>
            </div>
            <p>On dark backgrounds, switch the mark to paper colour. Cutouts let the navy show through.</p>
          </div>
          <div className="rule dont">
            <div className="badge">✕ DON'T</div>
            <div className="preview" style={{ background: 'linear-gradient(135deg, #ff6b6b, #ffd93d)' }}>
              <Lockup height={32} color="#fafaf7"/>
            </div>
            <p>Never place the logo on rainbow gradients, photos, or busy patterns.</p>
          </div>
        </div>

        <div className="rule-row">
          <div className="rule do">
            <div className="badge">✓ DO</div>
            <div className="preview">
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <Mark size={56}/>
                <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>// app icon · favicon · social avatar</div>
              </div>
            </div>
            <p>Use the icon alone for favicons, avatars, and tight spaces.</p>
          </div>
          <div className="rule dont">
            <div className="badge">✕ DON'T</div>
            <div className="preview">
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <Mark size={48}/>
                <span style={{ fontFamily: 'Comic Sans MS, cursive', fontSize: 24, color: '#000945' }}>boolland</span>
              </div>
            </div>
            <p>Never re-typeset the wordmark in another typeface. Always use the artwork.</p>
          </div>
        </div>

        <div className="rule-row">
          <div className="rule do">
            <div className="badge">✓ DO</div>
            <div className="preview">
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <div style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-0.03em', color: '#000945' }}>We code your <span style={{ color: '#3645d3' }}>vision.</span></div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.1em' }}>// confident · two-tone</div>
              </div>
            </div>
            <p>Color the emphasis word in <span className="mono" style={{ background: 'var(--paper-2)', padding: '1px 6px', borderRadius: 4 }}>Signal Blue</span> — one accent per line, max.</p>
          </div>
          <div className="rule dont">
            <div className="badge">✕ DON'T</div>
            <div className="preview">
              <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.03em' }}>
                <span style={{ color: '#ff5252' }}>We </span>
                <span style={{ color: '#ffb700' }}>code </span>
                <span style={{ color: '#33cc66' }}>your </span>
                <span style={{ color: '#3645d3' }}>vision.</span>
              </div>
            </div>
            <p>Never rainbow the brand. Color is signal, not decoration.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.RulesSection = RulesSection;