/* Agencies page (owner 2026-10-23): a two-column hero with a live partner
   card, three big benefit rows on one calm field, a bento for support and
   privacy, a dark closing card, and animations that play once on scroll
   (js/agencies.js adds .ag-on). Everything is scoped to body.ag-page so the
   shared .pcard/.pviz/.steps styles on other pages are untouched. */

/* ---------- Hero + live demo ---------- */
.ag-page .ag-hero { padding-bottom: 40px; }
.ag-page .ag-hero h1 { font-size: clamp(36px, 4.6vw, 58px); }

.ag-demo { padding: 0 0 96px; }
.ag-demo-frame { position: relative; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 100px rgba(15, 30, 60, .18), 0 0 0 1px rgba(15, 30, 60, .03); }
.ag-demo-frame::before { content: ''; position: absolute; inset: -60px -40px auto; height: 260px; background: url(../assets/atmos/blue.jpg) center / cover no-repeat; opacity: .0; pointer-events: none; }
/* The demo sits on the blue atmosphere field like the homepage hero shot
   (owner, 2026-10-23): same 46 / 36 / 22px backdrop at the same breakpoints. */
/* The backdrop grows outward into the page gutter, so the demo window keeps
   the full content width it had before the backdrop (owner, 2026-10-23). */
.ag-demo-stage { margin-inline: calc(-1 * min(46px, 24px + max(0px, (100vw - var(--max) - 16px) / 2))); padding: 46px; border-radius: 22px; background: #dfe8f7 url(../assets/atmos/blue.jpg) center / cover no-repeat; }
.ag-demo-stage .ag-demo-frame { border-radius: 14px; border-color: rgba(255, 255, 255, .7); box-shadow: 0 30px 80px rgba(10, 30, 80, .22), 0 0 0 1px rgba(15, 30, 60, .03); }
@media (max-width: 1000px) { .ag-demo-stage { margin-inline: -24px; padding: 36px; border-radius: 0; } }
@media (max-width: 760px) { .ag-demo-stage { padding: 12px 10px 14px; } }
.ag-demo-chrome { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.ag-demo-dots { display: flex; gap: 7px; }
.ag-demo-dots i { width: 11px; height: 11px; border-radius: 50%; background: #e2e2dc; display: block; }
.ag-demo-dots i:nth-child(1) { background: #ff5f57; } .ag-demo-dots i:nth-child(2) { background: #febc2e; } .ag-demo-dots i:nth-child(3) { background: #28c840; }
.ag-demo-addr { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ag-demo-full {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px;
  border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-size: 13px; font-weight: 650; color: var(--ink); text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 30, 60, .06); transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ag-demo-full svg { flex: none; color: var(--accent); transition: transform .15s ease; }
.ag-demo-full:hover { color: var(--accent-deep); border-color: rgba(0, 113, 227, .35); box-shadow: 0 4px 12px rgba(0, 113, 227, .14); transform: translateY(-1px); }
.ag-demo-full:hover svg { transform: scale(1.12); }
.ag-demo-full:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the dashboard renders at desktop width (1360px) and is scaled to fit; --s is set by js/agencies.js */
.ag-demo-viewport { position: relative; height: calc(860px * var(--s, 1)); overflow: hidden; background: #f9f9f7; }
.ag-demo iframe { display: block; width: 1360px; height: 860px; border: 0; background: #f9f9f7; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.ag-demo-note { margin: 16px auto 0; text-align: center; font-size: 14px; color: var(--ink-faint); }

/* ---------- Benefits ---------- */
.ag-page .pillars { gap: 22px; }
.ag-page .pcard { border-radius: 24px; box-shadow: 0 1px 0 rgba(15, 30, 60, .03); }
.ag-page .pcard .ptext { padding: 52px 52px; }

/* compounding quarters under the 30% figure */
.ag-quarters { display: flex; align-items: flex-end; gap: 7px; height: 46px; margin-top: 16px; }
.ag-quarters i { width: 26px; border-radius: 5px 5px 3px 3px; background: linear-gradient(180deg, #4f9bff, #0071e3); height: var(--h); transform-origin: bottom; }

/* audit row: the real fixes and audit panels, layered */
.ag-shots { min-height: 400px; }
/* beats .home-v2 .pviz > * { position: relative } */
.ag-page .pviz > .ag-shot { position: absolute; }
.ag-shot { position: absolute; width: 112%; max-width: none; height: auto; border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 30, 60, .22); }
.ag-shot-back { left: 14%; top: 8%; width: 100%; }
.ag-shot-front { left: 6%; top: 44%; width: 88%; }
.ag-shots-one .ag-shot-front { left: 8%; top: 10%; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html.anim .ag-shots:not(.ag-on) .ag-shot-back { opacity: 0; transform: translateY(24px); }
  html.anim .ag-shots:not(.ag-on) .ag-shot-front { opacity: 0; transform: translate(-24px, 24px); }
  html.anim .ag-shots .ag-shot { transition: opacity .7s, transform .9s cubic-bezier(.2, .8, .2, 1); }
  html.anim .ag-shots .ag-shot-front { transition-delay: .35s; }
}

/* badge row: the partners page's four-badge fan, sized for half a card */
.ag-fan { margin: 0; padding: 0; }
.ag-fan .pdir-fan-item { width: 150px; margin: 0 -12px; }

/* bento: support + privacy */
.ag-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ag-tile { background: var(--white); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.ag-tile .pviz { min-height: 290px; }
.ag-tile .ptext { padding: 34px 38px 38px; }
.ag-tile .ptag { display: flex; align-items: center; gap: 8px; font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, monospace); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.ag-tile .ptag svg { width: 14px; height: 14px; color: var(--accent); }
.ag-tile h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.ag-tile .ptext > p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 18px; }

/* closing card: the bigger picture (light; the site has no dark mode) */
.ag-dark { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; border-radius: 24px; padding: 56px 56px; background: radial-gradient(70% 90% at 88% 15%, rgba(0, 113, 227, .12), transparent 60%), radial-gradient(60% 80% at 8% 100%, rgba(255, 138, 0, .10), transparent 60%), var(--white); border: 1px solid var(--line); position: relative; overflow: hidden; }
.ag-dark::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 113, 227, .16) 1.2px, transparent 1.4px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 85%); mask-image: linear-gradient(90deg, transparent 35%, #000 85%); pointer-events: none; }
.ag-dark > * { position: relative; }
.ag-dark .ptag { display: flex; align-items: center; gap: 8px; font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, monospace); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.ag-dark .ptag svg { width: 14px; height: 14px; color: var(--accent); }
.ag-dark h3 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.ag-dark p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; margin-bottom: 20px; }

/* steps: a line that fills, numbers that turn into checks, once */
.ag-page .steps { position: relative; }
.ag-page .steps::before, .ag-page .steps::after { content: ''; position: absolute; top: 45px; left: 16%; right: 16%; height: 2px; border-radius: 2px; background: var(--line); z-index: 0; }
.ag-page .steps::after { background: linear-gradient(90deg, #1e8e3e, #34c26a); transform-origin: left; transform: scaleX(var(--fill, 0)); transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.ag-page .step { z-index: 1; }
html.anim .ag-page .step .num, html.anim .ag-page .step .num span, html.anim .ag-page .step .num .ck { animation: none !important; }
.ag-page .step .num { position: relative; transition: background .35s, transform .35s; }
.ag-page .step .num span { transition: opacity .2s, transform .3s; }
.ag-page .step .num .ck { position: absolute; width: 16px; height: 16px; opacity: 0; transform: scale(.4); transition: opacity .25s .1s, transform .35s .1s cubic-bezier(.3, 1.6, .5, 1); }
.ag-page .step.is-done .num { background: #1e8e3e; transform: scale(1.08); }
.ag-page .step.is-done .num span { opacity: 0; transform: scale(.4); }
.ag-page .step.is-done .num .ck { opacity: 1; transform: none; }

/* ---------- Animations (play once; .ag-on set by js/agencies.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.anim [data-ag-anim]:not(.ag-on) .ag-row,
  html.anim [data-ag-anim]:not(.ag-on) .pdw-row,
  html.anim [data-ag-anim]:not(.ag-on) .ag-hc-foot { opacity: 0; transform: translateY(10px); }
  html.anim [data-ag-anim] .ag-row, html.anim [data-ag-anim] .pdw-row, html.anim [data-ag-anim] .ag-hc-foot { transition: opacity .5s, transform .5s cubic-bezier(.2, .8, .2, 1); }
  html.anim [data-ag-anim] .ag-row, html.anim [data-ag-anim] .pdw-row { transition-delay: calc(var(--r, 0) * 120ms); }
  html.anim [data-ag-anim] .ag-hc-foot { transition-delay: .55s; }

  /* bars grow */
  html.anim [data-ag-anim]:not(.ag-on) .ag-bars i,
  html.anim [data-ag-anim]:not(.ag-on) .pdw-spark rect,
  html.anim [data-ag-anim]:not(.ag-on) .ag-quarters i { transform: scaleY(0); }
  html.anim [data-ag-anim] .ag-bars i, html.anim [data-ag-anim] .ag-quarters i { transition: transform .55s cubic-bezier(.2, .9, .3, 1.1); transition-delay: calc(.3s + var(--r, 0) * 120ms + var(--i, 0) * 45ms); }
  html.anim [data-ag-anim] .pdw-spark rect { transform-box: fill-box; transform-origin: bottom; transition: transform .5s cubic-bezier(.2, .9, .3, 1.1); transition-delay: calc(.35s + var(--r, 0) * 150ms); }
  html.anim [data-ag-anim] .ag-quarters i { transition-duration: .7s; transition-delay: calc(.5s + var(--i, 0) * 150ms); }


  /* partner badge row: pops in with a little tilt */
  html.anim [data-ag-anim]:not(.ag-on) .partner-badge-img { opacity: 0; transform: translateY(18px) rotate(-6deg) scale(.92); }
  html.anim [data-ag-anim] .partner-badge-img { transition: opacity .6s .15s, transform .9s .15s cubic-bezier(.2, 1.4, .4, 1); }
  .ag-page .partner-badge-img:hover { transform: rotate(-2deg) scale(1.03); }

  /* support chat: question, typing, answer */
  html.anim [data-ag-anim]:not(.ag-on) .scm-msg, html.anim [data-ag-anim]:not(.ag-on) .scm-meta { opacity: 0; transform: translateY(10px); }
  html.anim [data-ag-anim] .scm-msg, html.anim [data-ag-anim] .scm-meta { transition: opacity .45s, transform .45s cubic-bezier(.2, .8, .2, 1); }
  html.anim [data-ag-anim] .scm-msg:first-child { transition-delay: .2s; }
  html.anim [data-ag-anim] .scm-msg.scm-out { transition-delay: 2.1s; }
  html.anim [data-ag-anim] .scm-meta { transition-delay: 2.7s; }
  html.anim [data-ag-anim].ag-on .ag-typing { animation: agTyping 1.3s .8s both; }
  @keyframes agTyping { 0% { opacity: 0; transform: translateY(6px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; height: 0; margin: 0; padding: 0; } }
  .ag-typing i { animation: agDot 1s infinite; }
  .ag-typing i:nth-child(2) { animation-delay: .15s; }
  .ag-typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes agDot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

  /* legal card: question, answer, then the stamp lands */
  html.anim [data-ag-anim]:not(.ag-on) .pdm-block, html.anim [data-ag-anim]:not(.ag-on) .pdm-card { opacity: 0; transform: translateY(10px); }
  html.anim [data-ag-anim] .pdm-card { transition: opacity .5s, transform .5s; }
  html.anim [data-ag-anim] .pdm-block { transition: opacity .5s .35s, transform .5s .35s; }
  html.anim [data-ag-anim] .pdm-block-a { transition-delay: 1s; }
  html.anim [data-ag-anim]:not(.ag-on) .pdm-stamp { opacity: 0; }
  html.anim [data-ag-anim].ag-on .pdm-stamp { animation: agStamp .5s 1.9s both cubic-bezier(.3, 1.5, .5, 1); }
  @keyframes agStamp { 0% { opacity: 0; transform: scale(1.9) rotate(-14deg); } 100% { opacity: 1; transform: rotate(-6deg); } }

  /* roadmap: ticks from the bottom up, the future glows */
  html.anim [data-ag-anim]:not(.ag-on) .vj-row, html.anim [data-ag-anim]:not(.ag-on) .vj-link { opacity: 0; transform: translateY(8px); }
  html.anim [data-ag-anim] .vj-row, html.anim [data-ag-anim] .vj-link { transition: opacity .45s, transform .45s; }
  html.anim [data-ag-anim] .vj-row:last-child { transition-delay: .2s; }
  html.anim [data-ag-anim] .vj-link:nth-last-child(2) { transition-delay: .5s; }
  html.anim [data-ag-anim] .vj-row:nth-last-child(3) { transition-delay: .8s; }
  html.anim [data-ag-anim] .vj-dashed { transition-delay: 1.1s; }
  html.anim [data-ag-anim] .vj-future { transition-delay: 1.4s; }
  html.anim [data-ag-anim].ag-on .vj-future .vj-node { animation: agGlow 2.8s 2s ease-in-out infinite; }
  @keyframes agGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 196, 255, .0); } 50% { box-shadow: 0 0 0 7px rgba(124, 196, 255, .18), 0 0 22px rgba(124, 196, 255, .55); } }
}

/* typing dots (also hidden for reduced motion) */
.ag-typing { display: flex; gap: 4px; padding: 10px 14px; margin: 0 0 10px 38px; width: max-content; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(15, 30, 60, .12); opacity: 0; }
.ag-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8a8d93; display: block; }
@media (prefers-reduced-motion: reduce) { .ag-typing { display: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ag-demo-viewport { height: clamp(600px, 78svh, 760px); }
  .ag-demo iframe { width: 100%; height: 100%; transform: none; }
  .ag-demo-addr { display: none; }
  .ag-shots { min-height: 300px; }
  .ag-page .ag-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ag-bento, .ag-dark { grid-template-columns: minmax(0, 1fr); }
  .ag-dark { padding: 36px 26px; }
  .ag-page .pcard .ptext, .ag-tile .ptext { padding: 30px 24px; }
  .ag-page .steps::before, .ag-page .steps::after { display: none; }
}

/* "This is just the start" in the site's own language (owner, 2026-10-25:
   it looked off): one white tile like the others, the copy on the left and
   an atmos field on the right with the roadmap as a glass card. No dot grid,
   no pastel washes. */
.ag-dark { gap: 0; padding: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.ag-dark::before { display: none; }
.ag-dark > .ptext { padding: 52px 52px 50px; align-self: center; }
.ag-dark .ag-dark-viz.pviz { min-height: 100%; padding: 40px 32px; border-radius: 0; }
.ag-dark .vision-journey { width: min(340px, 100%); padding: 22px 22px 22px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.58));
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(16, 24, 40, 0.05), 0 24px 48px -18px rgba(16, 24, 40, 0.28); }
.ag-dark .vj-node { width: 26px; height: 26px; }
.ag-dark .vj-node svg { width: 12px; height: 12px; }
.ag-dark .vj-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.ag-dark .vj-sub { font-size: 11.5px; margin-top: 2px; }
.ag-dark .vj-row { gap: 14px; align-items: center; }
.ag-dark .vj-link { height: 22px; margin-left: 12px; }
.ag-dark .vj-beyond { margin-left: 12px; height: 22px; }
.ag-dark .vj-row.vj-future .vj-node { background: rgba(255, 255, 255, 0.6); animation: vjPulse 2.4s ease-out infinite; }
@keyframes vjPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.35); } 70%, 100% { box-shadow: 0 0 0 10px rgba(0, 113, 227, 0); } }
@media (prefers-reduced-motion: reduce) { .ag-dark .vj-row.vj-future .vj-node { animation: none; } }
@media (max-width: 900px) {
  .ag-dark { padding: 0; grid-template-columns: minmax(0, 1fr); }
  .ag-dark > .ptext { padding: 30px 24px; }
  .ag-dark .ag-dark-viz.pviz { min-height: 300px; }
}

/* Support chat (owner, 2026-10-25: the loader "bugs"): the typing bubble
   and the reply share one grid cell, so the reply's space is there from the
   start and nothing jumps when the dots make way for it. The dots sit on the
   reply's side (ours), and only fade. */
.scm-slot { display: grid; }
.scm-slot > * { grid-area: 1 / 1; }
.scm-slot > .ag-typing { align-self: start; justify-self: end; margin: 2px 38px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.66));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -12px rgba(16, 24, 40, 0.3); }
@media (prefers-reduced-motion: no-preference) {
  html.anim [data-ag-anim].ag-on .scm-slot > .ag-typing { animation: agTypingFade 1.4s .8s both; }
  @keyframes agTypingFade { 0% { opacity: 0; transform: translateY(6px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
}
/* The legal card's paper dog-ear was drawn for a white sheet; on glass it
   reads as a stray patch in the corner. */
.home-v2 .pviz .pdm-card::after { display: none; }