/* ==========================================================================
   Agent — Payroll
   Shared template (Agent_Template.css) covers owns/how/sees/closing/pager.
   This file holds the accent token, section rhythm, and the hero's
   monospace tagline visual.
   ========================================================================== */

:root {
  --agent-accent: #4338ca;
  --pr-indigo: #4338ca;
  --pr-indigo-soft: rgba(67, 56, 202, 0.08);
  --pr-mono: var(--font-roboto), sans-serif;
  --pr-gradient: linear-gradient(135deg, #4338ca, #14b8a6);
  --agent-gradient: var(--pr-gradient);
}

.btn-link {
  background: color-mix(in srgb, var(--agent-accent) 18%, white);
}

/* "Next" points to Data Analyst and Scientist (group 4) — theme the link to its own group */
.agent-pager-next {
  background: linear-gradient(135deg, #5B3FE0, #8a6ef5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- group-3 gradient theme (matches the AI-Labs portfolio group tab) ---- */
.eyebrow {
  background: linear-gradient(135deg, rgba(67, 56, 202, 0.12), rgba(20, 184, 166, 0.12));
}

.section-head h2 {
  background: var(--pr-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.agent-owns-idx,
.agent-step-num {
  background: var(--pr-gradient);
  color: #fff;
}

/* ---------- back link ---------- */
.agent-back-link {
  display: block;
  letter-spacing: 0.02em;
  margin-bottom: 40px;
}

.agent-back-link:hover {
  color: var(--pr-indigo);
}

/* ---------- generic section rhythm ---------- */
.pr-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}

.pr-section:last-of-type {
  border-bottom: none;
}

.pr-kicker {
  display: block;
  font-family: var(--pr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pr-indigo);
  margin-bottom: 14px;
}

.pr-section-title {
  font-size: clamp(22px, 2.4vw, 30px);
  margin-bottom: 10px;
  color: var(--ink);
}

.pr-section-sub {
  max-width: 640px;
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 0;
}

/* ==========================================================================
   HERO (kept unique visual: monospace tagline)
   ========================================================================== */
.pr-hero {
  background: linear-gradient(180deg, #ffffff 0%, #eefbf8 100%);
  padding: 56px 0 0;
}

.pr-eyebrow {
  color: var(--pr-indigo) !important;
}

.pr-hero-h1 {
  font-family: var(--font-montserrat-bold), sans-serif;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.12;
  max-width: 880px;
  color: var(--ink);
  margin-bottom: 20px;
}

.pr-hero-tagline {
  font-family: var(--pr-mono);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--pr-indigo);
  margin-bottom: 22px;
}

.pr-hero-lede {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 32px;
}

.pr-hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.pr-hero-actions .btn-primary {
  background: var(--pr-gradient);
  box-shadow: 0 12px 24px -10px rgba(67, 56, 202, 0.5);
}

.pr-hero-actions .btn-primary:hover {
  box-shadow: 0 16px 30px -10px rgba(67, 56, 202, 0.6);
}

.pr-hero-actions .btn-primary .btn-circle {
  background: #fff;
}

.pr-hero-actions .btn-primary .btn-arrow {
  background: var(--pr-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pr-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pr-link span {
  color: var(--pr-indigo);
}

.pr-hero-rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 560px) {
  .pr-hero-actions {
    gap: 16px;
  }
}