.comps-page {
  --bg: #171916;
  --bg-deep: #10120f;
  --surface: #1e211c;
  --surface-elevated: #262a23;
  --text: #f1f0e7;
  --text-secondary: #b9bdb0;
  --text-dim: #929889;
  --validated: #4dd0e1;
  --validated-dim: rgba(77, 208, 225, .1);
  --font-display: 'Barlow Condensed', Impact, sans-serif;
  --radius: 0;
  --radius-sm: 0;
}

.comps-page :focus-visible { outline: 3px solid var(--validated); outline-offset: 5px; }
.comps-page main:focus { outline: none; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 200; padding: 12px 20px; background: var(--validated); color: var(--bg); }
.skip-link:focus { top: 12px; }
.comps-page .header { background: rgba(23, 25, 22, .95); border-bottom-color: rgba(241, 240, 231, .16); }
.comps-page .header-content { max-width: 1360px; padding: 18px 4%; }
.comps-page .logo-text { font-family: var(--font-body); font-size: 15px; letter-spacing: -.04em; }
.comps-page .logo-text em { color: var(--text); }
.comps-page .logo-icon { border-radius: 7px; }
.comps-page .header-nav a[aria-current="page"] { color: var(--validated); }
.comps-page .cta-button { border-radius: 0; background: var(--validated); font-size: 12px; }

.comps-hero {
  max-width: 1360px;
  min-height: 520px;
  margin: 0 auto;
  padding: 78px 4% 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 8%;
  align-items: end;
  border-bottom: 1px solid var(--border-strong);
}
.comps-kicker { font: 500 10px/1.5 var(--font-mono); letter-spacing: .09em; color: var(--text-dim); }
.comps-hero .comps-kicker { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); }
.comps-hero .comps-kicker span, .status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--validated); box-shadow: 0 0 0 4px rgba(77, 208, 225, .09); }
.comps-hero h1 { margin-top: 28px; font: 700 clamp(80px, 10vw, 148px)/.82 var(--font-display); letter-spacing: -.025em; }
.comps-hero h1 em { color: var(--validated); font-style: normal; }
.comps-hero-copy > p:last-child { max-width: 620px; margin-top: 30px; color: var(--text-secondary); font-size: clamp(15px, 1.5vw, 19px); line-height: 1.7; }
.comps-scorecard { position: relative; padding: 30px 28px 26px; color: var(--bg); background: var(--validated); box-shadow: 9px 9px 0 rgba(77, 208, 225, .12); transform: rotate(1.5deg); }
.comps-scorecard::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(23, 25, 22, .24); pointer-events: none; }
.scorecard-index { position: relative; display: block; font: 500 8px/1 var(--font-mono); letter-spacing: .08em; }
.comps-scorecard strong { position: relative; display: block; margin: 42px 0 18px; font: 700 42px/.92 var(--font-display); }
.comps-scorecard p { position: relative; color: #23464a; font-size: 12px; line-height: 1.65; }

.comps-board { max-width: 1360px; margin: 0 auto; padding: 82px 4% 92px; }
.board-header { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 34px; }
.board-header h2, .method-strip h2 { margin-top: 14px; font: 700 clamp(44px, 6vw, 76px)/.9 var(--font-display); letter-spacing: -.015em; }
.board-status { display: flex; align-items: center; gap: 10px; padding-bottom: 7px; color: var(--text-secondary); font: 9px/1.5 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; text-align: right; }
.comps-list { border-top: 1px solid var(--border-strong); }
.comp-card { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(300px, 1.2fr) minmax(330px, 1.35fr); min-height: 174px; border-bottom: 1px solid var(--border-strong); transition: background .2s ease; }
.comp-card:hover { background: rgba(241, 240, 231, .025); }
.comp-identity { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-content: center; padding: 26px 26px 26px 4px; }
.comp-rank { color: var(--validated); font: 600 42px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.trait-lockup { min-width: 0; }
.trait-icons { min-height: 27px; display: flex; gap: 8px; margin-bottom: 9px; }
.trait-icon, .trait-fallback { width: 25px; height: 25px; object-fit: contain; }
.trait-icon { filter: brightness(0) invert(1); opacity: .86; }
.trait-fallback { display: grid; place-items: center; border: 1px solid var(--border-strong); color: var(--text-dim); font: 10px/1 var(--font-mono); }
.trait-name { font-size: 16px; font-weight: 600; line-height: 1.25; }
.sample-size { margin-top: 7px; color: var(--text-dim); font: 9px/1.5 var(--font-mono); letter-spacing: .03em; text-transform: uppercase; }
.comp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.comp-stat { display: flex; flex-direction: column; justify-content: center; padding: 25px 20px; }
.comp-stat + .comp-stat { border-left: 1px solid var(--border); }
.comp-stat strong { color: var(--validated); font: 600 clamp(30px, 3vw, 43px)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.comp-stat span { margin-top: 9px; color: var(--text-dim); font: 8px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.recent-board { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 24px 4px 24px 28px; }
.recent-label { margin-bottom: 12px; color: var(--text-dim); font: 8px/1.4 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.unit-row { display: flex; gap: 7px; flex-wrap: wrap; }
.unit { --cost: var(--text-dim); position: relative; width: 47px; height: 47px; overflow: hidden; background: var(--surface-elevated); border: 2px solid var(--cost); }
.unit[data-cost="2"] { --cost: #5fae6a; }
.unit[data-cost="3"] { --cost: #5b9bd5; }
.unit[data-cost="4"] { --cost: #a66ac7; }
.unit[data-cost="5"] { --cost: #d9a441; }
.unit img { width: 100%; height: 100%; display: block; object-fit: cover; }
.unit-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-secondary); font: 600 17px/1 var(--font-display); }
.comp-skeleton { height: 174px; border-bottom: 1px solid var(--border-strong); background: linear-gradient(100deg, transparent 20%, rgba(241, 240, 231, .045) 40%, transparent 60%); background-size: 220% 100%; animation: comp-shimmer 1.4s linear infinite; }
@keyframes comp-shimmer { to { background-position: -220% 0; } }
.comps-state { padding: 70px 24px; text-align: center; border-bottom: 1px solid var(--border-strong); }
.comps-state h2 { font: 600 38px/1 var(--font-display); }
.comps-state p { max-width: 500px; margin: 14px auto 0; color: var(--text-secondary); font-size: 14px; }
.retry-button { margin-top: 24px; padding: 12px 18px; border: 0; background: var(--validated); color: var(--bg); font: 600 12px/1 var(--font-body); cursor: pointer; }
.retry-button:hover { background: var(--text); }

.method-strip { padding: 80px max(4%, calc((100vw - 1252px) / 2)); color: var(--bg); background: var(--text); }
.method-strip .comps-kicker { color: #596054; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 45px; border-top: 1px solid rgba(23, 25, 22, .2); border-left: 1px solid rgba(23, 25, 22, .2); }
.method-grid p { min-height: 165px; padding: 24px; border-right: 1px solid rgba(23, 25, 22, .2); border-bottom: 1px solid rgba(23, 25, 22, .2); color: #4f554a; font-size: 12px; line-height: 1.65; }
.method-grid span { display: block; color: #007d83; font: 600 30px/1 var(--font-display); }
.method-grid strong { display: block; margin: 25px 0 8px; color: var(--bg); font-size: 16px; }
.method-strip .method-note { max-width: 760px; margin-top: 26px; padding: 18px 20px; color: #4f554a; background: transparent; border: 1px solid rgba(23, 25, 22, .2); border-radius: 0; font-size: 11px; line-height: 1.7; }
.comps-page .footer { margin-top: 0; background: var(--bg-deep); }

@media (max-width: 980px) {
  .comps-hero { grid-template-columns: 1fr .55fr; gap: 5%; }
  .comp-card { grid-template-columns: .8fr 1.2fr; }
  .recent-board { grid-column: 1 / -1; padding: 21px 4px; border-top: 1px solid var(--border); }
  .comp-identity { padding-left: 4px; }
  .unit { width: 45px; height: 45px; }
}

@media (max-width: 700px) {
  .comps-page .header-content { padding: 14px 5%; }
  .comps-hero { min-height: 0; grid-template-columns: 1fr; padding: 55px 6%; gap: 45px; }
  .comps-hero h1 { font-size: clamp(72px, 23vw, 112px); }
  .comps-scorecard { max-width: 350px; transform: rotate(1deg); }
  .comps-board { padding: 62px 6% 70px; }
  .board-header { align-items: start; flex-direction: column; gap: 16px; }
  .board-status { text-align: left; }
  .comp-card { display: block; padding: 25px 0; }
  .comp-identity { padding: 0 0 22px; grid-template-columns: 43px 1fr; gap: 12px; }
  .comp-rank { font-size: 36px; }
  .comp-stats { border: 1px solid var(--border); }
  .comp-stat { padding: 18px 11px; }
  .comp-stat strong { font-size: 32px; }
  .recent-board { padding: 22px 0 0; border-top: 0; }
  .unit-row { gap: 6px; }
  .unit { flex: 0 0 calc((100% - 42px) / 8); width: auto; height: auto; aspect-ratio: 1; min-width: 34px; }
  .method-strip { padding: 60px 6%; }
  .method-grid { grid-template-columns: 1fr; }
  .method-grid p { min-height: 0; }
}

@media (max-width: 420px) {
  .comp-stat strong { font-size: 28px; }
  .comp-stat span { font-size: 7px; }
  .unit { flex-basis: calc((100% - 30px) / 6); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .comp-skeleton { animation: none; background: rgba(241, 240, 231, .025); }
  .comp-card { transition: none; }
}