/* ============================================================
   SmartSwipe for Travel Agents — page-specific styles.
   Loaded alongside assets/css/styles.css (shared tokens, buttons,
   inputs, nav, footer, form-field primitives). This file only adds
   the components unique to /agents — it never redefines the base
   site's classes, so the original landing page is unaffected.
   ============================================================ */

/* ---------- shared page rhythm ---------- */

/* Wider shell on this page only (styles.css's --shell-width stays 1120px
   for the OTA page) — desktop has more to lay out side-by-side here. */
@media (min-width: 1024px) {
  .shell { max-width: 1280px; }
}

.ag-section { padding: 44px 0; }
.ag-section--tint { background: var(--bg-card); }
@media (min-width: 1024px) {
  .ag-section { padding: 60px 0; }
}

/* ---------- sticky nav (this page only — styles.css's .nav stays
   static on the OTA page, since it doesn't load this stylesheet) ---------- */

.nav { position: sticky; top: 0; z-index: 40; }

/* ---------- premium card polish (hover lift, reused across sections) ---------- */

.ag-problem-item,
.ag-service-card,
.ag-who-card,
.ag-workflow__example,
.ag-mock-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .ag-problem-item:hover,
  .ag-service-card:hover,
  .ag-who-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--navy-600);
  }
  .ag-mock-card:hover { box-shadow: var(--shadow-md), 0 20px 40px rgba(18, 22, 63, 0.1); }
}

.ag-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-600);
  margin-bottom: 10px;
}
.ag-eyebrow--light { color: var(--teal-500); }

.ag-lede {
  margin-top: 14px;
  font-size: 16.5px;
  color: var(--ink-700);
  max-width: 60ch;
}
.ag-lede--light { color: rgba(245, 242, 233, 0.75); }

/* ---------- nav badge ---------- */

.ag-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy-900);
  background: var(--gold-500);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-left: 8px;
  transform: translateY(-1px);
}

.ag-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}
.ag-nav-back {
  font-size: 13px;
  color: rgba(245, 242, 233, 0.6);
  font-weight: 500;
}
.ag-nav-back:hover { color: var(--gold-300); }

.ag-nav-link {
  display: none;
  font-size: 14px;
  font-weight: 600;
  color: rgba(245, 242, 233, 0.75);
}
.ag-nav-link:hover { color: var(--cream-100); }
@media (min-width: 900px) {
  .ag-nav-link { display: inline-block; }
}

/* ---------- hero ---------- */

.ag-hero { background: var(--navy-900); position: relative; overflow: hidden; }
.ag-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 90% -10%, rgba(22, 179, 159, 0.16), transparent 60%),
    radial-gradient(500px 400px at -10% 100%, rgba(231, 185, 76, 0.14), transparent 60%);
  pointer-events: none;
}
.ag-hero__inner { position: relative; padding: 48px 0 60px; }
@media (min-width: 1024px) { .ag-hero__inner { padding: 76px 0 80px; } }

.ag-hero__kicker {
  display: block;
  margin-bottom: 16px;
}

.ag-hero__headline {
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 700;
  color: var(--cream-100);
  max-width: 18ch;
  line-height: 1.08;
}
.ag-hero__subhead {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(245, 242, 233, 0.78);
  max-width: 62ch;
}

.ag-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.ag-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: rgba(245, 242, 233, 0.08);
  border: 1px solid rgba(245, 242, 233, 0.14);
  color: rgba(245, 242, 233, 0.85);
}

.ag-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.ag-trial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-300);
  background: rgba(231, 185, 76, 0.12);
  border: 1px solid rgba(231, 185, 76, 0.3);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
}

.ag-trust-line {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(245, 242, 233, 0.5);
}

/* ---------- repeated CTA banner ---------- */

.ag-cta-banner {
  background: var(--bg-card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  text-align: center;
}
.ag-cta-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ag-cta-banner p { font-size: 15.5px; font-weight: 600; color: var(--navy-900); }
@media (min-width: 640px) {
  .ag-cta-banner__inner { flex-direction: row; justify-content: center; }
}

/* ---------- mock UI label ---------- */

.ag-mock-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-500);
  background: var(--bg-page);
  border: 1px dashed var(--line);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* ---------- demo walkthrough ---------- */

.ag-demo {
  margin-top: 32px;
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 22px;
  max-width: 640px;
}

.ag-demo__progress {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}
.ag-demo__progress-seg {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(245, 242, 233, 0.16);
  overflow: hidden;
  display: block;
}
.ag-demo__progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold-500);
  border-radius: var(--radius-pill);
}
.ag-demo__progress-seg.is-done .ag-demo__progress-fill { width: 100%; }
.ag-demo__progress-seg.is-filling .ag-demo__progress-fill {
  width: 100%;
  transition: width linear var(--ag-demo-duration, 3.2s);
}

.ag-demo__stage {
  position: relative;
  min-height: 210px;
}
.ag-demo__frame {
  display: none;
  animation: agDemoFadeIn 0.35s ease;
}
.ag-demo__frame.is-active { display: block; }
@keyframes agDemoFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ag-demo__frame-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 8px;
}
.ag-demo__frame-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--cream-100);
  margin-bottom: 18px;
  max-width: 32ch;
}

.ag-demo__rates {
  background: var(--navy-800);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.ag-demo__rate-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(245, 242, 233, 0.7);
  font-variant-numeric: tabular-nums;
}
.ag-demo__rate-row + .ag-demo__rate-row { border-top: 1px solid rgba(245, 242, 233, 0.08); }
.ag-demo__rate-row.is-best { color: var(--teal-500); }
.ag-demo__rate-row.is-total {
  color: var(--cream-100);
  font-size: 16px;
  font-weight: 700;
}

.ag-demo__funnel {
  background: var(--navy-800);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.ag-demo__funnel-chip {
  font-size: 13px;
  font-weight: 600;
  color: rgba(245, 242, 233, 0.85);
  background: rgba(245, 242, 233, 0.08);
  border: 1px solid rgba(245, 242, 233, 0.16);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
}
.ag-demo__funnel-down {
  flex-basis: 100%;
  color: var(--gold-500);
  font-size: 18px;
  font-weight: 700;
}
.ag-demo__funnel-target {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy-900);
  background: var(--gold-500);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
}

.ag-demo__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.ag-demo__badge--private { background: rgba(231, 185, 76, 0.16); color: var(--gold-300); border: 1px solid rgba(231, 185, 76, 0.3); }
.ag-demo__badge--shareable { background: rgba(22, 179, 159, 0.16); color: var(--teal-500); border: 1px solid rgba(22, 179, 159, 0.3); }

/* Agent Workspace frame — dark dashboard styling (internal / private feel) */
.ag-demo__ws {
  background: var(--navy-800);
  border: 1px solid rgba(245, 242, 233, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.ag-demo__ws-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 12px;
  padding: 7px 0;
  font-size: 13.5px;
}
.ag-demo__ws-row + .ag-demo__ws-row { border-top: 1px solid rgba(245, 242, 233, 0.08); }
.ag-demo__ws-label { font-weight: 600; color: rgba(245, 242, 233, 0.85); }
.ag-demo__ws-values { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.ag-demo__ws-cost { color: rgba(245, 242, 233, 0.55); }
.ag-demo__ws-op { color: rgba(245, 242, 233, 0.35); font-weight: 700; }
.ag-demo__ws-margin { color: var(--gold-300); font-weight: 600; }
.ag-demo__ws-selling { color: var(--cream-100); font-weight: 700; }

/* Customer Quote frame — light document/message styling (shareable feel) */
.ag-demo__doc {
  background: var(--cream-100);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.ag-demo__doc-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.ag-demo__doc-row + .ag-demo__doc-row { border-top: 1px solid rgba(18, 22, 63, 0.1); }
.ag-demo__doc-row.is-total { color: var(--navy-900); font-size: 15.5px; font-weight: 700; border-top: 2px solid var(--navy-900); margin-top: 4px; padding-top: 10px; }

.ag-demo__controls {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ag-demo__play {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--gold-500);
  color: var(--navy-900);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
.ag-demo__play:hover { background: var(--gold-600); transform: scale(1.05); }
.ag-demo__play-icon { transform: translateX(1px); }

.ag-demo__dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ag-demo__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(245, 242, 233, 0.22);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ag-demo__dot:hover { background: rgba(245, 242, 233, 0.4); }
.ag-demo__dot.is-active { background: var(--gold-500); transform: scale(1.15); }

/* ---------- sticky mobile CTA ---------- */

.ag-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10, 12, 36, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(245, 242, 233, 0.1);
  display: none;
  transform: translateY(0);
  transition: transform 0.2s ease;
}
.ag-sticky-cta.is-hidden { transform: translateY(100%); }
@media (max-width: 767px) {
  .ag-sticky-cta { display: block; }
  body { padding-bottom: 76px; }
}

/* ---------- problem section ---------- */

.ag-flow {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ag-flow__chip {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--bg-page);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
}
.ag-flow__plus {
  color: var(--ink-500);
  font-weight: 700;
  font-size: 15px;
}
.ag-flow__arrow {
  color: var(--gold-600);
  font-weight: 700;
  font-size: 18px;
  margin: 0 2px;
}

.ag-problem-grid {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .ag-problem-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ag-problem-grid { grid-template-columns: repeat(3, 1fr); }
}
.ag-problem-item {
  display: flex;
  gap: 10px;
  background: var(--bg-page);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
}
.ag-problem-item span { color: var(--gold-600); flex-shrink: 0; }

/* ---------- workflow (compact grid) ---------- */

.ag-workflow-grid {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 900px) {
  .ag-workflow-grid { flex-direction: row; align-items: stretch; gap: 0; }
}

.ag-wf-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  flex: 1;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .ag-wf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--navy-600); }
}
.ag-wf-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-500);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  margin-bottom: 10px;
}
.ag-wf-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.ag-wf-card p { font-size: 12.5px; color: var(--ink-500); }

.ag-wf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-600);
  font-weight: 700;
  font-size: 16px;
  transform: rotate(90deg);
  padding: 0;
}
@media (min-width: 900px) {
  .ag-wf-arrow { transform: none; padding: 0 6px; flex: 0 0 auto; }
}

.ag-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ag-status-pill {
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--navy-900);
  color: var(--gold-300);
}

/* ---------- Agent Workspace / Customer Quote transformation ---------- */

.ag-transform {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
@media (min-width: 1000px) {
  .ag-transform { flex-direction: row; align-items: stretch; gap: 0; }
}

.ag-panel {
  flex: 1;
  border-radius: var(--radius-lg);
  padding: 22px;
  min-width: 0;
}
.ag-panel--workspace { background: var(--navy-900); box-shadow: var(--shadow-md); }
.ag-panel--quote { background: var(--cream-100); box-shadow: var(--shadow-md); border: 1px solid rgba(18, 22, 63, 0.06); }

.ag-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.ag-panel__badge--private { background: rgba(231, 185, 76, 0.16); color: var(--gold-300); border: 1px solid rgba(231, 185, 76, 0.3); }
.ag-panel__badge--shareable { background: rgba(22, 179, 159, 0.14); color: var(--teal-600); border: 1px solid rgba(22, 179, 159, 0.3); }

.ag-panel__trip { font-weight: 700; font-size: 14.5px; margin-bottom: 16px; }
.ag-panel--workspace .ag-panel__trip { color: var(--cream-100); }
.ag-panel--quote .ag-panel__trip { color: var(--navy-900); }

.ag-panel__col-labels {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.85fr 0.95fr;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(245, 242, 233, 0.4);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(245, 242, 233, 0.12);
}
.ag-panel__col-labels span:not(:first-child) { text-align: right; }

.ag-panel__row {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.85fr 0.95fr;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(245, 242, 233, 0.08);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  align-items: baseline;
}
.ag-panel__row-label { font-weight: 600; color: rgba(245, 242, 233, 0.9); }
.ag-panel__row-cost { text-align: right; color: rgba(245, 242, 233, 0.5); }
.ag-panel__row-margin { text-align: right; color: var(--gold-300); font-weight: 600; }
.ag-panel__row-selling { text-align: right; color: var(--cream-100); font-weight: 700; }

.ag-panel__quote-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(18, 22, 63, 0.08);
}

.ag-panel__total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--navy-900);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ag-panel__total span:first-child { font-weight: 700; font-size: 14.5px; color: var(--navy-900); }
.ag-panel__total span:last-child {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 27px);
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}

.ag-panel__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ag-mock-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--bg-page);
  color: var(--ink-700);
}

.ag-panel__note {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
}
.ag-panel--workspace .ag-panel__note { color: rgba(231, 185, 76, 0.85); }
.ag-panel--quote .ag-panel__note { color: var(--teal-600); }

.ag-transform__arrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0;
}
@media (min-width: 1000px) {
  .ag-transform__arrow { flex-direction: column; padding: 0 16px; flex: 0 0 auto; }
}
.ag-transform__arrow-btn {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--navy-900);
  background: var(--gold-500);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.ag-transform__arrow-icon { color: var(--gold-600); font-size: 20px; font-weight: 700; }

/* ---------- multi-service grid ---------- */

.ag-service-grid {
  margin-top: 28px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .ag-service-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ag-service-grid { grid-template-columns: repeat(5, 1fr); } }
.ag-service-card {
  background: var(--bg-page);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-align: center;
}
.ag-service-card__icon { font-size: 24px; display: block; margin-bottom: 8px; }
.ag-service-card__label { font-size: 13px; font-weight: 600; color: var(--ink-900); }

.ag-combine-flow {
  margin-top: 32px;
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}
.ag-combine-flow__route {
  font-family: var(--font-display);
  color: var(--cream-100);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 14px;
}
.ag-combine-flow__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.ag-combine-flow__item {
  font-size: 13px;
  font-weight: 600;
  color: rgba(245, 242, 233, 0.85);
  background: rgba(245, 242, 233, 0.08);
  border: 1px solid rgba(245, 242, 233, 0.16);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
}
.ag-combine-flow__plus { color: rgba(245, 242, 233, 0.4); font-weight: 700; }
.ag-combine-flow__result {
  margin-top: 16px;
  display: inline-block;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--navy-900);
  background: var(--gold-500);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
}

/* ---------- keep suppliers diagram ---------- */

.ag-supplier-diagram {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ag-supplier-diagram__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.ag-supplier-diagram__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 640px;
}
.ag-supplier-diagram__chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--bg-page);
  border: 1px solid var(--line);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
}
.ag-supplier-diagram__down { font-size: 20px; color: var(--gold-600); }
.ag-supplier-diagram__core {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--cream-100);
  background: var(--navy-900);
  padding: 12px 28px;
  border-radius: var(--radius-md);
}
.ag-supplier-diagram__pipeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teal-600);
}

.ag-note {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-700);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.ag-note a { color: var(--teal-600); font-weight: 600; text-decoration: underline; }

/* ---------- features ---------- */

.ag-feature-status {
  margin-top: 28px;
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.ag-feature-status--now {
  background: rgba(22, 179, 159, 0.08);
  border: 1.5px solid rgba(22, 179, 159, 0.35);
}
.ag-feature-status__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-600);
  background: rgba(22, 179, 159, 0.14);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.ag-feature-status h3 { font-size: 16.5px; font-weight: 700; color: var(--navy-900); margin-bottom: 6px; }
.ag-feature-status p { font-size: 14.5px; color: var(--ink-700); max-width: 60ch; }

.ag-feature-grid {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) { .ag-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ag-feature-grid { grid-template-columns: repeat(3, 1fr); } }

.ag-feature-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
}
.ag-feature-card__tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-600);
  background: rgba(231, 185, 76, 0.14);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.ag-feature-card h3 { font-size: 15px; font-weight: 700; color: var(--navy-900); margin-bottom: 6px; }
.ag-feature-card p { font-size: 13.5px; color: var(--ink-700); }

/* ---------- pricing ---------- */

.ag-pricing-grid {
  margin-top: 28px;
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) { .ag-pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.ag-pricing-card {
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.ag-pricing-card--featured {
  border-color: var(--gold-500);
  box-shadow: var(--shadow-md);
}
.ag-pricing-card__badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy-900);
  background: var(--gold-500);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
}
.ag-pricing-card__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-900);
}
.ag-pricing-card__tagline {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: 8px;
}
.ag-pricing-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 14px;
}
.ag-pricing-card__price {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}
.ag-pricing-card__period {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
}
.ag-pricing-card__everything {
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy-900);
}
.ag-pricing-card__features {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ag-pricing-card__features li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--ink-700);
  line-height: 1.4;
}
.ag-pricing-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal-600);
  font-weight: 700;
}
.btn--ghost-dark {
  background: transparent;
  color: var(--ink-700);
  border: 1.5px solid var(--line);
}
.btn--ghost-dark:hover { border-color: var(--navy-700); color: var(--navy-900); }

/* ---------- PROTECT + GROW ---------- */

.ag-protect-grow {
  margin-top: 32px;
  display: grid;
  gap: 16px;
}
@media (min-width: 700px) { .ag-protect-grow { grid-template-columns: repeat(2, 1fr); } }

.ag-protect-grow__col {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
}
.ag-protect-grow__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.ag-protect-grow__tag--protect { color: #C4432B; background: rgba(196, 67, 43, 0.1); }
.ag-protect-grow__tag--grow { color: var(--teal-600); background: rgba(22, 179, 159, 0.12); }
.ag-protect-grow__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ag-protect-grow__col li {
  font-size: 14px;
  color: var(--ink-700);
  padding-left: 18px;
  position: relative;
}
.ag-protect-grow__col li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-500);
}

/* ---------- trial explainer ---------- */

.ag-trial-explainer {
  margin-top: 32px;
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.ag-trial-explainer h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--cream-100);
  margin-bottom: 14px;
}
.ag-trial-explainer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
@media (min-width: 700px) { .ag-trial-explainer__list { grid-template-columns: repeat(2, 1fr); } }
.ag-trial-explainer__list li {
  font-size: 13.5px;
  color: rgba(245, 242, 233, 0.8);
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}
.ag-trial-explainer__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold-500);
  font-weight: 700;
}

/* ---------- FAQ ---------- */

.ag-faq-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
}
.ag-faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 4px 18px;
}
.ag-faq-item summary {
  padding: 14px 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ag-faq-item summary::-webkit-details-marker { display: none; }
.ag-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 400;
  color: var(--gold-600);
}
.ag-faq-item[open] summary::after { content: "−"; }
.ag-faq-item p {
  padding: 0 0 16px;
  font-size: 14.5px;
  color: var(--ink-700);
}

/* ---------- who it's for (compact strip) ---------- */

.ag-who-strip {
  padding: 22px 0;
  background: var(--bg-card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ag-who-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.ag-who-strip__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  flex-shrink: 0;
}
.ag-who-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ag-who-strip__list span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--bg-page);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* ============================================================
   Multi-step waitlist form
   ============================================================ */

.ag-waitlist { background: var(--navy-900); }
.ag-waitlist__intro p { margin-top: 14px; color: rgba(245, 242, 233, 0.72); font-size: 16px; max-width: 46ch; }

.ag-stepform {
  margin-top: 28px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 26px;
  max-width: 640px;
}

.ag-stepform__progress-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
  margin-bottom: 10px;
}
.ag-stepform__progress-fill {
  height: 100%;
  background: var(--teal-500);
  border-radius: var(--radius-pill);
  transition: width 0.25s ease;
  width: 25%;
}
.ag-stepform__progress-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 22px;
  display: block;
}

.ag-stepform__step { display: none; flex-direction: column; gap: 20px; }
.ag-stepform__step.is-active { display: flex; }

.ag-stepform__step-title { font-size: 18px; font-weight: 700; color: var(--navy-900); }

.ag-stepform__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}
.ag-stepform__nav [hidden] { display: none; }
.ag-stepform__nav .btn--ghost-dark {
  background: transparent;
  color: var(--ink-700);
  border: 1.5px solid var(--line);
}
.ag-stepform__nav .btn--ghost-dark:hover { border-color: var(--navy-700); color: var(--navy-900); }

.ag-stepform__status {
  font-size: 14px;
  font-weight: 600;
  min-height: 20px;
  margin-top: 14px;
}
.ag-stepform__status.is-error { color: #C4432B; }

.ag-stepform__success {
  display: none;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  padding: 12px 0;
}
.ag-stepform__success.is-active { display: flex; }
.ag-stepform__success-main { font-size: 20px; font-weight: 700; color: var(--navy-900); }
.ag-stepform__success-sub { font-size: 14.5px; color: var(--ink-700); }
.ag-stepform__success-tester {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-600);
  background: rgba(22, 179, 159, 0.1);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

/* form control helpers reused inside the stepper */
.ag-stepform .check-grid { gap: 8px; }