/**
 * agents.css – Alixco referral / agent programme landing page (/agents).
 * Loaded IN ADDITION TO smefinancing.css so it reuses the .alx-sme-* design
 * language (eyebrow, h2, section, steps, cta, benefit cards) and only adds:
 *   - the hero band
 *   - the two commission example cards + formula strip
 *   - the worked-example callout
 *   - the trust stat row
 *   - a no-JS FAQ accordion (<details>/<summary>)
 * Token-based (tokens.css), dark-mode aware.
 */

/* ── Hero ── */
.alx-ag-hero {
  text-align: center;
  padding: var(--sp-xl) 0 var(--sp-lg);
}
.alx-ag-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 2.8rem);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.12;
  margin: var(--sp-sm) 0;
}
.alx-ag-hero h1 .hl { color: var(--c-blue); }
.alx-ag-hero p {
  color: var(--c-muted);
  max-width: 62ch;
  margin: 0 auto var(--sp-lg);
  font-size: 1.05rem;
  line-height: 1.55;
}
.alx-ag-hero .alx-ag-cta { display: inline-flex; gap: var(--sp-sm); flex-wrap: wrap; justify-content: center; }

/* ── Commission example cards ── */
.alx-ag-calc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-lg);
}
.alx-ag-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--sp-lg) var(--sp-xl);
  display: flex;
  flex-direction: column;
}
.alx-ag-card .tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-blue);
  background: var(--c-active);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  margin-bottom: var(--sp-sm);
}
.alx-ag-card h3 { font-family: var(--font-display); font-weight: 700; color: var(--c-text); margin: 0 0 var(--sp-sm); }
.alx-ag-card .rows { margin: 0 0 var(--sp-md); }
.alx-ag-card .r { display: flex; justify-content: space-between; gap: var(--sp-md); padding: 6px 0; border-top: 1px dashed var(--c-line); color: var(--c-body); font-size: .92rem; }
.alx-ag-card .r:first-child { border-top: 0; }
.alx-ag-card .r .rl { color: var(--c-muted); }
.alx-ag-card .payout {
  margin-top: auto;
  background: var(--c-card-2);
  border-radius: var(--r-card);
  padding: var(--sp-md) var(--sp-lg);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-sm);
}
.alx-ag-card .payout .pl { font-family: var(--font-display); font-weight: 600; color: var(--c-text); }
.alx-ag-card .payout .pv { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--c-success-text); }

/* ── Formula strip ── */
.alx-ag-formula {
  margin-top: var(--sp-lg);
  background: var(--c-blue-variant);
  color: #fff;
  border-radius: var(--r-card);
  padding: var(--sp-lg) var(--sp-xl);
  text-align: center;
  font-family: var(--font-display);
}
.alx-ag-formula .f { font-weight: 700; font-size: 1.15rem; }
.alx-ag-formula .n { display: block; margin-top: 6px; font-weight: 400; font-size: .9rem; opacity: .92; }
:root[data-theme="dark"] .alx-ag-formula { background: #13314c; border: 1px solid var(--c-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .alx-ag-formula { background: #13314c; border: 1px solid var(--c-line); } }

/* ── Worked-example callout ── */
.alx-ag-example {
  margin-top: var(--sp-lg);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-green-alt);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--sp-lg) var(--sp-xl);
}
.alx-ag-example h3 { font-family: var(--font-display); color: var(--c-text); margin: 0 0 var(--sp-xs); }
.alx-ag-example .big { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--c-success-text); margin: var(--sp-xs) 0; }
.alx-ag-example p { color: var(--c-body); margin: 0; font-size: .92rem; line-height: 1.55; }
.alx-ag-example .disclaimer { color: var(--c-muted); font-size: .82rem; margin-top: var(--sp-sm); }

/* ── Trust stat row ── */
.alx-ag-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
.alx-ag-stat {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--sp-lg);
  text-align: center;
}
.alx-ag-stat .v { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--c-blue); }
.alx-ag-stat .l { color: var(--c-muted); font-size: .86rem; margin-top: 4px; }

/* ── No-JS FAQ accordion ── */
.alx-faq { display: grid; gap: var(--sp-sm); }
.alx-faq-item {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.alx-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-md) var(--sp-lg);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
}
.alx-faq-item > summary::-webkit-details-marker { display: none; }
.alx-faq-item > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-card); }
.alx-faq-item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.alx-faq-item[open] > summary::after { transform: rotate(-135deg); }
.alx-faq-item > .alx-faq-a { padding: 0 var(--sp-lg) var(--sp-md); color: var(--c-body); line-height: 1.6; font-size: .94rem; }
.alx-faq-item > .alx-faq-a p { margin: 0 0 var(--sp-sm); }
.alx-faq-item > .alx-faq-a p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .alx-faq-item > summary::after { transition: none; } }

/* ── For-professionals band ── */
.alx-ag-pro {
  margin-top: var(--sp-xl);
  background: var(--c-card-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--sp-lg) var(--sp-xl);
}
.alx-ag-pro h3 { font-family: var(--font-display); color: var(--c-text); margin: 0 0 var(--sp-xs); }
.alx-ag-pro p { color: var(--c-body); margin: 0; font-size: .92rem; line-height: 1.55; }

@media (max-width: 860px) {
  .alx-ag-calc-grid { grid-template-columns: 1fr; }
  .alx-ag-trust { grid-template-columns: 1fr; }
}