/* RE:WORK — Precision SaaS / career assessment.
   Reads as a product surface: hairline borders, a state panel, a numbered
   flow. Warm orange does the pointing; nothing else is coloured. */

.ax-header { background: var(--surface-alt); }
.ax-logo { text-transform: none; }
.ax-h1 { font-weight: 700; }

/* the state panel in the hero */
.ax-check {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .05);
}
.ax-check-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.ax-meter { height: 6px; margin: 18px 0; border-radius: 99px; background: var(--surface-alt); }
.ax-meter i { display: block; width: 64%; height: 100%; border-radius: 99px; background: var(--accent); }
.ax-signals { display: grid; gap: 8px; }
.ax-signals li {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
}
.ax-check .ax-btn { margin-top: 13px; }

/* the four-up panel under the hero */
.ax-panel-wrap { padding-bottom: 8px; }
.ax-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
.ax-metric { padding: 22px; border-right: 1px solid var(--border); }
.ax-metric:last-child { border-right: 0; }
.ax-metric:hover { background: var(--surface-alt); }
.ax-metric small { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.ax-metric strong { display: block; margin-top: 8px; font-size: 22px; letter-spacing: -.03em; }
.ax-metric em { font-size: 10px; font-style: normal; color: var(--accent-ink, var(--accent)); }

/* conversion flow + policy */
.ax-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ax-card { padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.ax-card small { font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.ax-card h3 { margin: 6px 0; font-size: 23px; letter-spacing: -.03em; }
.ax-card--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast, #fff);
}
.ax-card--accent small { color: rgba(255, 255, 255, .72); }
.ax-card--accent .ax-note { color: rgba(255, 255, 255, .82); }
.ax-steps { margin-top: 18px; }
.ax-steps li {
  display: flex;
  gap: 15px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.ax-card--accent .ax-steps li { border-color: rgba(255, 255, 255, .28); }

@media (max-width: 900px) {
  .ax-panel { grid-template-columns: 1fr 1fr; }
  .ax-metric:nth-child(2n) { border-right: 0; }
  .ax-flow { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .ax-panel { grid-template-columns: 1fr; } .ax-metric { border-right: 0; } }