function SampleCard() {
  return (
    <section style={{
      padding: '96px 48px',
      background: 'var(--syn-paper)',
    }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{
            fontFamily: 'var(--syn-font-mono)', fontSize: 12,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'var(--syn-fg-subtle)', fontWeight: 500, marginBottom: 14,
          }}>A card from yesterday</div>
          <h2 style={{
            fontFamily: 'var(--syn-font-display)',
            fontSize: 40, fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.1,
            color: 'var(--syn-navy)', margin: '0 0 20px',
          }}>The format is the product</h2>
          <p style={{
            fontFamily: 'var(--syn-font-body)', fontSize: 16,
            lineHeight: 1.65, color: 'var(--syn-fg-muted)', margin: 0,
            maxWidth: 420,
          }}>
            Read it in 12 seconds. Re-read the proof in 30. Open the context if you want the rotation note. Same shape every day, across newsletter, web, and app.
          </p>
        </div>
        <article style={{
          background: '#FFFFFF',
          border: '1px solid var(--syn-border)',
          borderRadius: 20,
          padding: 32,
          boxShadow: '2px 2px 0 #F6D889, 4px 4px 0 #EB954A, 6px 6px 0 #EB6C5F',
          marginRight: 8, marginBottom: 8,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
            <span style={{
              fontFamily: 'var(--syn-font-mono)', fontSize: 11,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: '#EB6C5F', fontWeight: 600,
            }}>Signal · NBA · DEN</span>
            <span style={{
              fontFamily: 'var(--syn-font-mono)', fontSize: 11,
              color: 'var(--syn-fg-subtle)',
            }}>03/24/26</span>
          </div>
          <h3 style={{
            fontFamily: 'var(--syn-font-display)', fontWeight: 600,
            fontSize: 28, lineHeight: 1.18, letterSpacing: '-0.025em',
            color: 'var(--syn-navy)', margin: '0 0 18px',
          }}>Denver's bench just became a defensive liability</h3>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 4 }}>
            <span style={{
              fontFamily: 'var(--syn-font-display)', fontWeight: 700,
              fontVariantNumeric: 'tabular-nums', fontSize: 62,
              lineHeight: 0.95, letterSpacing: '-0.04em',
              color: 'var(--syn-navy)',
            }}>121.4</span>
            <span style={{
              fontFamily: 'var(--syn-font-mono)', fontSize: 11,
              letterSpacing: '0.04em', color: 'var(--syn-fg-subtle)',
              textTransform: 'uppercase', maxWidth: 160, lineHeight: 1.4,
            }}>Bench DRTG · L10 · league-worst</span>
          </div>
          <div style={{ height: 1, background: 'var(--syn-rule)', margin: '20px 0 14px' }} />
          <div style={{
            fontFamily: 'var(--syn-font-mono)', fontSize: 10,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: '#B86618', fontWeight: 600, marginBottom: 8,
          }}>Proof</div>
          <p style={{
            fontFamily: 'var(--syn-font-body)', fontSize: 14.5,
            lineHeight: 1.65, color: 'var(--syn-fg)', margin: 0,
          }}>
            DEN second units have allowed 121.4 points per 100 over the L10 — dead last, by 3.1 on the next team.{' '}
            <a style={{
              fontFamily: 'var(--syn-font-mono)', fontSize: 12,
              color: 'var(--syn-fg-subtle)', textDecoration: 'underline',
              textDecorationColor: '#1F3A65', textUnderlineOffset: 3,
              cursor: 'pointer',
            }}>Cleaning the Glass · 03/24</a>
          </p>
          <button style={{
            background: 'transparent', border: 0, padding: 0, marginTop: 18,
            fontFamily: 'var(--syn-font-mono)', fontSize: 11,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'var(--syn-orange)', fontWeight: 600, cursor: 'pointer',
          }}>+ Context</button>
        </article>
      </div>
    </section>
  );
}
window.SampleCard = SampleCard;