/* /for-brands/agency: the brand side of the TrybeDaily Agency (built dark
   2026-10-20, AGENCY_BRAND_PAGE; functions/api/_agency-brands.js). The hero
   and its glowing button are /agency's own (agency.css); this adds the
   secondary action and the sections below it. */
.ab-page{max-width:960px}
.ab-page .ag-hero{padding-bottom:36px}
.ab-page .ag-hero h1{max-width:18ch}
.ab-page .ag-lede{max-width:60ch}
.ab-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:28px 0 0}
.ab-actions .ag-cta-big{min-width:0}
.ab-how-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:60px;padding:14px 26px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--violet) 32%,var(--rule));background:var(--pane);color:var(--ink);font-weight:650;font-size:16px;text-decoration:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.ab-how-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.ab-how-link:hover{background:var(--violet-soft);border-color:color-mix(in srgb,var(--violet) 55%,var(--rule));color:var(--violet)}
.ab-how-link:hover svg{transform:translateY(2px)}
.ab-how-link:focus-visible{outline:3px solid color-mix(in srgb,var(--violet) 70%,transparent);outline-offset:3px}
.ab-reply{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}

/* Sections: a heading and its content, generous space between them. */
.ab-sec{margin:56px 0 0;scroll-margin-top:24px}
.ab-sec>h2{margin:0 0 6px;font-size:clamp(24px,3.2vw,30px);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.ab-sec>.ab-sub{margin:0 0 22px;max-width:60ch;font-size:16px;line-height:1.55;color:var(--ink-2)}

/* Why brands work with us: three reasons, one rule between them, no boxes. */
.ab-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.ab-why li{padding:22px 22px 4px 0}
.ab-why li+li{padding-left:22px;border-left:1px solid var(--rule)}
.ab-why svg{display:block;width:26px;height:26px;margin:0 0 14px;fill:none;stroke:var(--violet);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ab-why h3{margin:0 0 6px;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.ab-why p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.ab-why .ab-key{position:relative}
.ab-why .ab-key h3{color:var(--violet)}

/* How it works: the order matters, so the steps are numbered and joined. */
.ab-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:ab}
.ab-steps li{position:relative;padding:22px 22px 24px;border:1px solid var(--rule);border-radius:12px;background:var(--pane)}
.ab-steps li:not(:last-child)::after{content:"";position:absolute;top:39px;right:-17px;width:16px;height:2px;background:color-mix(in srgb,var(--violet) 45%,var(--rule))}
.ab-n{display:grid;place-items:center;width:34px;height:34px;margin:0 0 14px;border-radius:50%;background:var(--violet-fill);color:#fff;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.ab-steps h3{margin:0 0 6px;font-size:17px;font-weight:700;line-height:1.3;color:var(--ink)}
.ab-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}

/* What it costs: one plain statement on a quiet tint. */
.ab-cost{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:26px 28px;border-radius:16px;
  background:color-mix(in srgb,var(--violet-fill) 7%,var(--pane));border:1px solid color-mix(in srgb,var(--violet-fill) 20%,var(--rule))}
.ab-cost svg{width:30px;height:30px;fill:none;stroke:var(--violet);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ab-cost p{margin:0;font-size:18px;line-height:1.5;color:var(--ink);max-width:56ch}
.ab-cost p strong{font-weight:700}

/* FAQ: /agency's disclosure rows (ag-q), on one panel. */
.ab-faq{padding:6px 24px;border:1px solid var(--rule);border-radius:16px;background:var(--pane)}
.ab-faq .ag-q p{font-size:15px}

/* The closing ask repeats the one action. */
.ab-end{margin:56px 0 40px;padding:34px 32px;border-radius:16px;text-align:center;
  border:1px solid color-mix(in srgb,var(--violet-fill) 22%,var(--rule));
  background:radial-gradient(90% 120% at 50% 0%,color-mix(in srgb,var(--violet-fill) 16%,transparent),transparent 70%),var(--pane)}
.ab-end h2{margin:0 0 8px;font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ab-end p{margin:0 auto 22px;max-width:48ch;font-size:15.5px;line-height:1.55;color:var(--ink-2)}

@media(max-width:760px){
  .ab-why{grid-template-columns:1fr;border-top:0}
  .ab-why li,.ab-why li+li{padding:18px 0;border-left:0;border-top:1px solid var(--rule)}
  .ab-why svg{margin-bottom:10px}
  .ab-steps{grid-template-columns:1fr;gap:12px}
  .ab-steps li:not(:last-child)::after{top:auto;bottom:-13px;right:auto;left:38px;width:2px;height:12px}
  .ab-sec{margin-top:44px}
}
@media(max-width:600px){
  .ab-actions{margin-top:22px}
  .ab-actions>a{width:100%}
  .ab-cost{grid-template-columns:1fr;gap:12px;padding:22px 20px}
  .ab-cost p{font-size:16.5px}
  .ab-faq{padding:4px 16px}
  .ab-end{padding:26px 18px}
  .ab-end .ag-cta-big{width:100%}
}

/* Owner 2026-10-20: "How it works" glides down instead of snapping; the
   heading stops clear of the masthead. Reduced-motion readers still jump. */
html{scroll-behavior:smooth}
.ab-sec{scroll-margin-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}