@import url("../../_ds/fonts.css");
@import url("../../_ds/theme.css");
@import url("../../_shared/chrome.css");
@import url("../../_shared/components.css");
@import url("../../_shared/audience-switcher.css");

/* ──────────────────────────────────────────────────────────
   /for/agencies — WHITE-LABEL (your brand, our engine).
   A client deliverable that re-skins live, a horizontal drag rail
   of productized offerings, one-engine-many-clients lanes, a teal
   band, partner tiers. Layout broken, delightful, interactive.
─────────────────────────────────────────────────────────── */
main { position: relative; z-index: 1; }
.back-to-top, .back-to-top * { cursor: none; }

.ag-h2 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-h2); line-height: 0.98;
  letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); }

.ag-blur[data-reveal] { opacity: 0; filter: blur(16px); transform: translateZ(0); backface-visibility: hidden;
  will-change: filter, opacity; transition: opacity 0.7s ease, filter 0.7s ease; }
.ag-blur[data-reveal].is-in { opacity: 1; filter: blur(0); transform: translateZ(0); }

/* ═══ Act 1 — Hero: asymmetric, the re-skinning deliverable dominates ═══ */
.ag-hero { min-height: 100vh; display: grid; align-items: center;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 84px);
  padding: clamp(112px, 14vh, 156px) var(--page-gutter, 7vw) clamp(56px, 8vh, 96px); }
.ag-hero-copy { max-width: 560px; }
.ag-hero-h1 { margin: clamp(12px, 1.6vh, 20px) 0 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero-xl); line-height: 0.96; letter-spacing: var(--tracking-denser, -0.03em);
  color: var(--text-primary); }
.ag-hero-sub { margin: clamp(16px, 2vh, 24px) 0 0; font-family: var(--font-base); font-size: var(--mkt-body);
  line-height: 1.55; color: var(--text-secondary); max-width: 44ch; }
.ag-clients { margin: clamp(24px, 3.4vh, 38px) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ag-client { font-family: var(--font-base); font-size: var(--mkt-body-xs); color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 8px 16px;
  cursor: pointer; transition: border-color 0.25s ease, color 0.25s ease; }
.ag-client:hover { color: var(--text-primary); }
.ag-client.is-active { color: var(--text-primary); border-color: var(--border); }

/* The deliverable — flat, hairline, no colored top, no shadow */
.ag-doc { border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden; }
.ag-doc-bar { display: flex; align-items: center; gap: 14px; padding: clamp(18px, 1.8vw, 24px) clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--border-subtle); }
.ag-doc-mono { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 19px; color: #fff;
  background: var(--ag-accent, #7C4FE8); transition: background 0.45s ease; }
.ag-doc-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-doc-name { font-family: var(--font-base); font-weight: 600; font-size: var(--mkt-body); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s ease; }
.ag-doc-sub { font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-tertiary); }
.ag-doc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-code);
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); }
.ag-doc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ag-accent, #7C4FE8); transition: background 0.45s ease; }
.ag-doc-body { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(20px, 2.4vw, 36px); padding: clamp(20px, 2.2vw, 32px); }
.ag-doc-rows { display: flex; flex-direction: column; }
.ag-doc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: clamp(10px, 1.4vh, 16px) 0; border-top: 1px solid color-mix(in srgb, var(--border-subtle) 60%, transparent);
  font-family: var(--font-base); font-size: var(--mkt-body-xs); color: var(--text-tertiary); }
.ag-doc-row:first-child { border-top: 0; }
.ag-doc-row b { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h4); color: var(--text-primary);
  font-variant-numeric: tabular-nums; }
.ag-doc-chart { display: flex; align-items: flex-end; gap: clamp(6px, 0.8vw, 11px); height: 100%; min-height: 120px; }
.ag-doc-chart span { flex: 1; height: var(--h, 40%); border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--ag-accent, #7C4FE8) 78%, transparent); transition: background 0.45s ease; }
.ag-doc-foot { padding: 14px clamp(18px, 2vw, 28px); border-top: 1px solid var(--border-subtle);
  font-family: var(--font-code); font-size: 11.5px; color: var(--text-tertiary); }
.ag-doc-foot b { color: var(--text-secondary); font-weight: 500; }

/* ═══ Act 2 — Templates (horizontal drag rail) ═══ */
.ag-tpl-act { padding: clamp(88px, 12vh, 150px) 0 clamp(88px, 12vh, 150px); }
.ag-tpl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  max-width: 1320px; margin: 0 auto; padding: 0 var(--page-gutter, 7vw) clamp(36px, 5vh, 56px); }
.ag-tpl-hint { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary); white-space: nowrap; }
.ag-rail { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; padding: 4px 0; }
.ag-rail::-webkit-scrollbar { display: none; }
.ag-rail.is-grabbing { cursor: grabbing; }
.ag-rail-track { display: inline-flex; gap: clamp(16px, 1.8vw, 26px); padding: 0 var(--page-gutter, 7vw); }
.ag-tpl { flex: 0 0 clamp(260px, 32vw, 360px); border: 1px solid var(--border-subtle); border-radius: 18px;
  padding: clamp(26px, 2.6vw, 38px); min-height: clamp(220px, 26vh, 300px); display: flex; flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease; user-select: none; }
.ag-tpl:hover { border-color: var(--border); transform: translateY(-4px); }
.ag-tpl-n { font-family: var(--font-code); font-size: 13px; color: #7ADAE6; }
.ag-tpl h3 { margin: auto 0 10px; font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h4);
  line-height: 1.04; letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); }
.ag-tpl p { margin: 0; font-family: var(--font-base); font-size: var(--mkt-body-sm); line-height: 1.5; color: var(--text-secondary); }

/* ═══ Act 3 — One engine, every client (CSS-only solo on hover) ═══ */
.ag-eng-act { padding: clamp(90px, 13vh, 168px) var(--page-gutter, 7vw); }
.ag-eng-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: clamp(200px, 24vw, 300px) 1fr;
  gap: clamp(28px, 4vw, 72px); align-items: center; }
.ag-eng-source { border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: clamp(22px, 2.4vw, 32px); }
.ag-eng-source-k { display: block; font-family: var(--font-code); font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; color: #7ADAE6; }
.ag-eng-source-v { display: block; margin-top: 10px; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-h4); line-height: 1.04; color: var(--text-primary); }
.ag-lanes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ag-lane { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: clamp(16px, 2vh, 24px) 0;
  border-top: 1px solid var(--border-subtle);
  transition: opacity 0.25s ease, padding-left 0.25s ease; }
.ag-lane:last-child { border-bottom: 1px solid var(--border-subtle); }
.ag-lanes:hover .ag-lane { opacity: 0.4; }
.ag-lanes .ag-lane:hover, .ag-lanes .ag-lane:focus-within { opacity: 1; padding-left: clamp(12px, 1.4vw, 20px); }
.ag-lane-c { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h4); color: var(--text-primary); }
.ag-lane-o { font-family: var(--font-code); font-size: clamp(12.5px, 1vw, 15px); color: var(--text-tertiary); }
.ag-lane:hover .ag-lane-o, .ag-lane:focus-within .ag-lane-o { color: #7ADAE6; }

/* ═══ Act 4 — Teal band ═══ */
.ag-teal { position: relative; background: transparent; }
.ag-teal-fill { position: absolute; inset: 0; background: #7ADAE6; z-index: 0; clip-path: circle(0% at 50% 110%); }
.ag-teal.is-in .ag-teal-fill { clip-path: circle(155% at 50% 110%); transition: clip-path 1.2s cubic-bezier(0.22,1,0.36,1); }
.ag-teal-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto;
  padding: clamp(120px, 20vh, 220px) var(--page-gutter, 7vw); }
.ag-teal-kicker { margin: 0 0 clamp(16px, 2vh, 24px); font-family: var(--font-code); font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(29,22,18,0.62); }
.ag-teal-h2 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero); line-height: 0.95; letter-spacing: var(--tracking-denser, -0.03em); color: #1D1612; }
.ag-teal-body { margin: clamp(22px, 3vh, 34px) 0 0; font-family: var(--font-base);
  font-size: var(--mkt-lead); line-height: 1.5; color: rgba(29,22,18,0.82); max-width: 56ch; }

/* ═══ Act 5 — Partner tiers ═══ */
.ag-tier-act { padding: clamp(90px, 13vh, 168px) var(--page-gutter, 7vw); }
.ag-tier-inner { max-width: 1180px; margin: 0 auto; }
.ag-tiers { margin: clamp(40px, 6vh, 64px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.ag-tier { border: 1px solid var(--border-subtle); border-radius: 18px; padding: clamp(26px, 2.6vw, 38px);
  transition: border-color 0.25s ease, transform 0.25s ease; }
.ag-tier:hover, .ag-tier:focus-within { border-color: var(--border); transform: translateY(-4px); }
.ag-tier-n { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h4);
  line-height: 1; letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); margin-bottom: 14px; }
.ag-tier p { margin: 0; font-family: var(--font-base); font-size: var(--mkt-body-sm); line-height: 1.55; color: var(--text-secondary); }

/* ═══ Act 6 — Closer ═══ */
.ag-end { padding: clamp(120px, 18vh, 210px) var(--page-gutter, 7vw); text-align: center;
  display: flex; flex-direction: column; align-items: center; }
.ag-end-h2 { margin: 16px 0 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero); line-height: 0.95; letter-spacing: var(--tracking-denser, -0.03em); color: var(--text-primary); }
.ag-end-cta { margin-top: clamp(30px, 4.5vh, 52px); }

/* Topbar inversion over the teal band (dark chrome, purple CTA) */

/* ═══ Breakpoints ═══ */
@media (max-width: 900px) {
  .ag-hero { grid-template-columns: 1fr; gap: clamp(32px, 5vh, 48px); }
  .ag-eng-inner { grid-template-columns: 1fr; gap: 28px; }
  .ag-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ag-hero { min-height: 0; }
  .ag-doc-body { grid-template-columns: 1fr; }
  .ag-doc-chart { min-height: 90px; }
  .ag-tpl-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (min-width: 1600px) {
  .ag-hero { max-width: 1560px; margin: 0 auto; }
  .ag-eng-inner, .ag-tier-inner { max-width: 1320px; }
  .ag-tpl-head { max-width: 1480px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-doc { transform: none; }
  .ag-teal.is-in .ag-teal-fill { transition: none; }
}