/* PROBLEM */
    .problem {
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
    }

    .split-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 72px;
      padding-bottom: 72px;
    }

    .problem-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
    }

    .problem-card {
      background: var(--bg2);
      padding: 52px 48px;
      transition: background 0.25s;
    }

    .problem-card:hover {
      background: var(--surface2);
    }

    .problem-number {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--text-dim);
      margin-bottom: 28px;
      display: block;
    }

    .problem-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 24px;
      letter-spacing: -0.01em;
      margin-bottom: 16px;
      color: var(--text);
      line-height: 1.2;
    }

    .problem-body {
      font-size: 15px;
      font-weight: 300;
      color: var(--text-muted);
      line-height: 1.8;
    }

    .problem-footer {
      margin-top: 64px;
      padding: 28px 40px;
      border: 1px solid var(--border-mid);
      background: var(--surface);
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .pfooter-rule {
      width: 32px;
      height: 1px;
      background: var(--accent);
      flex-shrink: 0;
    }

    .problem-footer p {
      font-size: 14px;
      font-weight: 300;
      color: var(--text-muted);
    }

    .problem-footer strong {
      color: var(--text);
      font-weight: 500;
    }