/* company.html — per-firm interview-questions playlist page */
.cmp { max-width: 880px; margin: 0 auto; padding: 8px 18px 60px; }
.cmp-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 20px; color: var(--text-secondary, #6b7280); }
.cmp-loading__spinner { width: 28px; height: 28px; border: 3px solid var(--border-color, #e5e7eb); border-top-color: #6366f1; border-radius: 50%; animation: cmp-spin .8s linear infinite; }
@keyframes cmp-spin { to { transform: rotate(360deg); } }

.cmp-crumb { font-size: .82rem; color: var(--text-secondary, #6b7280); margin: 10px 0 18px; }
.cmp-crumb a { color: var(--text-secondary, #6b7280); text-decoration: none; }
.cmp-crumb a:hover { color: #6366f1; }

.cmp-hero { margin-bottom: 30px; }
.cmp-hero__eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6366f1; margin-bottom: 10px; }
.cmp-hero__title { font-size: 2.1rem; font-weight: 800; line-height: 1.12; color: var(--text-primary, #111827); margin: 0 0 14px; }
.cmp-hero__blurb { font-size: 1.02rem; line-height: 1.6; color: var(--text-secondary, #4b5563); max-width: 64ch; margin: 0 0 18px; }
.cmp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cmp-stat { font-size: .85rem; color: var(--text-secondary, #6b7280); background: var(--bg-surface, #f7f8ff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 999px; padding: 7px 14px; }
.cmp-stat b { color: var(--text-primary, #111827); }
.cmp-hero__links { display: flex; flex-wrap: wrap; gap: 10px; }

.cmp-list { margin: 26px 0; }
.cmp-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cmp-list__head h2 { font-size: 1.2rem; margin: 0; color: var(--text-primary, #111827); }
.cmp-list__head span { font-size: .8rem; color: var(--text-secondary, #9ca3af); }
.cmp-row { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; margin-bottom: 8px; text-decoration: none; background: var(--bg-surface, #fff); transition: border-color .12s, transform .12s; }
.cmp-row:hover { border-color: #6366f1; transform: translateX(2px); }
.cmp-row__n { font: 700 .85rem/1 'JetBrains Mono', monospace; color: #9aa0d6; text-align: center; }
.cmp-row__title { font-size: .98rem; font-weight: 600; color: var(--text-primary, #111827); }
.cmp-row__cat { font-size: .76rem; color: var(--text-secondary, #6b7280); white-space: nowrap; }
.cmp-row__diff { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.cmp-row__diff--easy { background: rgba(16,185,129,.14); color: #059669; }
.cmp-row__diff--medium { background: rgba(245,158,11,.16); color: #b45309; }
.cmp-row__diff--hard { background: rgba(239,68,68,.14); color: #dc2626; }

.cmp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }

.cmp-related { margin-top: 36px; }
.cmp-related h2 { font-size: 1.12rem; margin: 0 0 14px; color: var(--text-primary, #111827); }
.cmp-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cmp-rel { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 11px; text-decoration: none; background: var(--bg-surface, #fff); transition: border-color .12s, transform .12s; }
.cmp-rel:hover { border-color: #6366f1; transform: translateY(-2px); }
.cmp-rel b { font-size: .92rem; color: var(--text-primary, #111827); }
.cmp-rel span { font-size: .78rem; color: var(--text-secondary, #6b7280); }

@media (max-width: 640px) {
  .cmp-hero__title { font-size: 1.6rem; }
  .cmp-row { grid-template-columns: 24px 1fr auto; }
  .cmp-row__cat { display: none; }
}