/* =============================================================
   AGENCY PAGE (/for/agencies) — 2026-07-24
   -------------------------------------------------------------
   Companion sheet for `solutions/agency_page.pug`.

   The page is composed almost entirely from the homepage v8 design
   system (`homepage-visual-v8.css`): .cf-opportunity,
   .cf-triggers-v3/.cf-trigm, .cf-hiw3, .cf-why, .cf-analytics, .cf-grow,
   .cf-safety, .cf-mark. That sheet is fully `.cf-`-scoped, so loading it
   on this template cannot leak into nav, footer or other solution pages.

   THIS file only carries the handful of components v8 has no equivalent
   for, all prefixed `.cfa-` so they can never collide with v8 or with
   solution-pages.css:

     .cfa-uses    "how agencies use it" card grid
     .cfa-ws      workspace switcher (accurate to the app's sidebar dropdown)
     .cfa-usage   "X of Y DMs used this month" meter + daily bar chart
     .cfa-split   copy-left / visual-right block

   Design rules inherited from the project:
     - one background: white (the FAQ keeps a faint off-white)
     - no pricing: costs live on /pricing only
     - dark backgrounds are #000000 only
     - no box-shadow anywhere; borders carry elevation
     - no gradients on dark backgrounds
     - accent #d1fe17 used sparingly
     - no scroll-reveal animation (v8 disables it deliberately)

   Palette, deliberately short: white #fff surfaces, #000 only in the
   hero and the closing card, lime #d1fe17 as the single accent.
   ============================================================= */

/* -------------------------------------------------------------
   Shared section scaffolding — mirrors .cf-opportunity / .cf-hiw3
   geometry so these sections sit flush with the v8 ones.
   ------------------------------------------------------------- */
.cfa-section {
  padding: clamp(44px, 5.5vw, 72px) clamp(20px, 3vw, 40px);
}
.cfa-section--lime {
  background: #f4fcdb;
}
.cfa-section--white {
  background: #fff;
}
.cfa-section--warm {
  background: #fbfaf7;
}
.cfa-section--black {
  background: #000;
}

.cfa-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* Colour lives on the wrapper, not on the h2. `homepage-clean.css` ships
   `h2 { color: inherit !important; }`, so any colour set directly on
   .cfa-title is discarded and the heading inherits from its parent. Setting
   it here is what actually reaches the heading, and it avoids an
   !important war with a sheet that every page loads. */
.cfa-head {
  max-width: 720px;
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  color: #14171f;
}
.cfa-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.cfa-section--black .cfa-head {
  color: #fff;
}

.cfa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.85rem;
}
.cfa-eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #d1fe17;
}
.cfa-section--black .cfa-eyebrow {
  color: rgba(255, 255, 255, 0.62);
}

/* `h2 { text-align: center }` ships in creatorflow-modern.css AND
   homepage-clean.css, so left alignment has to be stated, not assumed.
   Colour is inherited from .cfa-head — see the note there. */
.cfa-title {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: inherit;
  text-align: left;
  margin: 0 !important;
}
.cfa-head--center .cfa-title {
  text-align: center;
}

.cfa-subtitle {
  margin: 0.9rem 0 0;
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
  line-height: 1.6;
  color: #4b5563;
  max-width: 62ch;
}
.cfa-head--center .cfa-subtitle {
  margin-left: auto;
  margin-right: auto;
}
.cfa-section--black .cfa-subtitle {
  color: rgba(255, 255, 255, 0.72);
}

/* Small print that states a product limit out loud. Deliberately not
   styled as a disclaimer — an agency reading a stated cap up front is
   the point, so it gets the same weight as body copy. */
.cfa-note {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #6b7280;
}
.cfa-section--black .cfa-note {
  color: rgba(255, 255, 255, 0.6);
}

/* =============================================================
   .cfa-ws — workspace switcher.
   Drawn to match the app: a sidebar row (name + plan badge + toggle)
   opening a dropdown headed "Workspaces", one row per workspace as a
   coloured icon + name, a checkmark on the active one, and
   "+ Create Workspace" at the foot. No per-row stats, no avatars,
   no usage pill — none of those exist in the product.
   ============================================================= */
.cfa-ws {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 12px;
  max-width: 340px;
}

.cfa-ws__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #000000;
  border-radius: 11px;
  padding: 10px 12px;
}
.cfa-ws__trigger-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfa-ws__plan {
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #14171f;
  background: #d1fe17;
  border-radius: 999px;
  padding: 3px 8px;
}
.cfa-ws__caret {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
}

.cfa-ws__menu {
  margin-top: 8px;
  border: 1px solid #eceef1;
  border-radius: 12px;
  padding: 8px;
}
.cfa-ws__menu-head {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 4px 6px 8px;
}

.cfa-ws__row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  padding: 8px 8px;
}
.cfa-ws__row--active {
  background: rgba(209, 254, 23, 0.14);
}
.cfa-ws__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--chip, #e5e7eb);
  border: 1px solid rgba(20, 23, 31, 0.07);
}
.cfa-ws__name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #14171f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfa-ws__check {
  flex: 0 0 auto;
  color: #3f7d00;
  display: flex;
}

.cfa-ws__create {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 9px 8px;
  border-top: 1px solid #f1f2f4;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #4b5563;
}
.cfa-ws__create-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #14171f;
  font-weight: 800;
  line-height: 1;
  font-size: 0.875rem;
}

/* =============================================================
   .cfa-usage — Account Settings usage block. The product shows a
   count string plus a daily bar chart in lime. Bars only: the app
   has no line charts, so no sparkline here.
   ============================================================= */
.cfa-usage {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px 18px 18px;
}
.cfa-usage__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.cfa-usage__count {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #14171f;
}
.cfa-usage__count b {
  font-weight: 700;
}
.cfa-usage__scope {
  font-size: 0.75rem;
  /* was #9ca3af — 2.54:1 on white, below AA */
  color: #6b7280;
  white-space: nowrap;
}
.cfa-usage__chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 68px;
}
.cfa-usage__chart i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: #d1fe17;
  min-height: 3px;
}

/* =============================================================
   `homepage-clean.css` ships `h2 { margin-bottom: 3rem !important; }`,
   which beats v8's intended `1.15rem` and leaves 48px between a heading
   and its own subtitle. Restore the v8 value for the sections this page
   borrows. Scoped by section id so the homepage is untouched.
   ============================================================= */
#client-setups .cf-triggers-v3__title,
#toolkit .cf-grow__title,
#how-it-works .cf-hiw3__title {
  margin: 0 0 1.15rem !important;
}

/* =============================================================
   Adjustments to the borrowed v8 components.
   v8's trigger grid is built for the homepage's four cards; this page
   runs three, which would otherwise leave a dead fourth column and
   ragged card heights.
   ============================================================= */
#client-setups .cf-triggers-v3__grid {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
#client-setups .cf-triggers-v3__card {
  justify-content: flex-start;
}
/* Keep the comment→DM mockups on a common baseline so the card titles
   below them line up across the row. */
#client-setups .cf-trigm {
  min-height: 178px;
  display: flex;
  flex-direction: column;
}
#client-setups .cf-trigm__dm {
  margin-top: auto;
}
@media (max-width: 900px) {
  #client-setups .cf-triggers-v3__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  #client-setups .cf-triggers-v3__grid {
    grid-template-columns: 1fr;
  }
  #client-setups .cf-trigm {
    min-height: 0;
  }
}

/* =============================================================
   .cfa-split — generic two-column "copy left / visual right" block,
   matching .cf-analytics__inner proportions so the rhythm holds.
   ============================================================= */
.cfa-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.cfa-split--visual-first .cfa-split__visual {
  order: -1;
}

.cfa-split__points {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cfa-split__point {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.cfa-split__point-dot {
  flex: 0 0 auto;
  margin-top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d1fe17;
}
.cfa-split__point-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #14171f;
  margin-bottom: 2px;
}
.cfa-split__point-desc {
  display: block;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #4b5563;
}
/* Inline links in proposal lines were rendering as default browser blue. */
.cfa-split__point-desc a {
  color: #14171f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cfa-split__point-desc a:hover {
  color: #3f7d00;
}
.cfa-section--black .cfa-split__point-title {
  color: #fff;
}
.cfa-section--black .cfa-split__point-desc {
  color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 900px) {
  .cfa-split {
    grid-template-columns: 1fr;
  }
  .cfa-split--visual-first .cfa-split__visual {
    order: 0;
  }
  .cfa-ws {
    max-width: 100%;
  }
}

/* =============================================================
   .cfa-cta — the inline CTA row reused by several sections.
   Button geometry matches the sitewide standard (8px radius,
   black to lime on hover, no shadow).
   ============================================================= */
.cfa-cta {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.cfa-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #000000;
  color: #fff;
  border: 1px solid #000000;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cfa-cta__btn:hover {
  background: #d1fe17;
  color: #14171f;
  border-color: #d1fe17;
}
.cfa-section--black .cfa-cta__btn {
  background: #d1fe17;
  color: #14171f;
  border-color: #d1fe17;
}
.cfa-section--black .cfa-cta__btn:hover {
  background: #fff;
  border-color: #fff;
}
.cfa-cta__note {
  font-size: 0.8125rem;
  color: #6b7280;
}
.cfa-section--black .cfa-cta__note {
  color: rgba(255, 255, 255, 0.6);
}
.cfa-cta__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: #14171f;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cfa-section--black .cfa-cta__link {
  color: rgba(255, 255, 255, 0.8);
}

/* =============================================================
   FAQ — the homepage `.cf-hp-faq` component.
   homepage-visual-v8.css carries only the SKIN (rounded item, lime
   circle icon, open-state colours). Everything structural —
   __container width, __list flex, the __question flex row, and the
   native disclosure-triangle resets — lives in homepage-v3.css and
   homepage-v4.css, which this template does not load. Without them the
   browser shows its own black triangle, the chevron drops onto its own
   line, and the items run edge to edge.
   Restated here, structure ONLY: no padding, background, border or
   radius, so v8's skin keeps winning (this sheet loads after v8).
   ============================================================= */
body.page-for-agencies .cf-hp-faq {
  background: #fbfaf7;
}
.cf-hp-faq__container {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 24px;
}
.cf-hp-faq__header {
  text-align: center;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.cf-hp-faq__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: #14171f;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 !important;
}
.cf-hp-faq__subtitle {
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.6;
  max-width: 560px;
  margin: 0.75rem auto 0;
}
.cf-hp-faq__list {
  display: flex;
  flex-direction: column;
}
/* The summary row. `list-style: none` plus both marker pseudo-elements
   are all required: WebKit uses ::-webkit-details-marker, Firefox and
   modern Chrome use ::marker, and Safari needs the list-style too. */
.cf-hp-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #14171f;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease;
}
.cf-hp-faq__question::-webkit-details-marker {
  display: none;
}
.cf-hp-faq__question::marker {
  content: '';
}
.cf-hp-faq__question:hover {
  color: #3f4651;
}
.cf-hp-faq__question span {
  flex: 1;
  min-width: 0;
}
.cf-hp-faq__answer p {
  font-size: 0.9375rem;
  color: #4b5563;
  line-height: 1.7;
  margin: 0;
  padding-bottom: 18px;
}
/* FAQ answers carry inline links (pricing, agency programme); without this
   they render in default browser blue. */
.cf-hp-faq__answer a {
  color: #14171f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf-hp-faq__answer a:hover {
  color: #3f7d00;
}
@media (max-width: 600px) {
  .cf-hp-faq__container {
    padding: 0 16px;
  }
  .cf-hp-faq__question {
    font-size: 0.9375rem;
  }
}

/* =============================================================
   ONE BACKGROUND: WHITE.
   The borrowed v8 sections each ship their own band colour
   (.cf-triggers-v3 #f4fcdb, .cf-hiw3 #fbfaf7, .cf-grow #fff). On the
   homepage that alternation is the point; here it read as too many
   colours, so every section is white and the lime is left to do the
   accent work on its own. Only the FAQ keeps a faint off-white so the
   page has one soft edge before the closing card.
   ============================================================= */
body.page-for-agencies .cf-triggers-v3,
body.page-for-agencies .cf-hiw3,
body.page-for-agencies .cf-grow {
  background: #ffffff;
}
body.page-for-agencies .cf-hp-faq {
  background: #fbfaf7;
}

/* Card surfaces inside those sections were tinted to sit on a coloured
   band; on white they need a plain neutral border instead. */
body.page-for-agencies .cf-triggers-v3__card,
body.page-for-agencies .cf-grow__card {
  border-color: #e9eaec;
}
body.page-for-agencies .cf-trigm {
  background: #fbfbfa;
  border-color: #eceef0;
}

/* =============================================================
   .cfa-uses — "how agencies use it". Four plain cards, no tint,
   lime only on the icon.
   ============================================================= */
.cfa-uses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.cfa-use {
  background: #fff;
  border: 1px solid #e9eaec;
  border-radius: 18px;
  padding: 24px 26px 26px;
}
.cfa-use__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #d1fe17;
  color: #14171f;
  margin-bottom: 14px;
}
.cfa-use__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #14171f;
  margin: 0 0 7px;
  line-height: 1.3;
}
.cfa-use__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}
@media (max-width: 820px) {
  .cfa-uses {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   SECTION HEADING SCALE — match the homepage.
   Two sheets clobber every h2 on this page with !important:
     · homepage-clean.css:885   `h2 { font-size: 2.25rem !important }`  -> 36px
     · homepage-clean.css:1521  (inside @media max-width:768px)
       `h2 { font-size: 1.375rem !important }`                        -> 22px
   (Not typography-normalization.css: its `main section h2` arm never matches,
   neither page has a <main> element, and the homepage loads that sheet too yet
   still renders 52px.)
   homepage-clean.css is loaded by THIS template and NOT by the homepage,
   which is why the same v8 components render 36px/22px here against
   52px/33px there — a 31% smaller heading on every section.
   Restated at v8's own scale, scoped to this page so nothing else moves.
   ============================================================= */
body.page-for-agencies .cfa-title,
body.page-for-agencies .cf-hiw3__title,
body.page-for-agencies .cf-triggers-v3__title,
body.page-for-agencies .cf-grow__title,
body.page-for-agencies .cf-hp-faq__title {
  font-size: clamp(32px, 4.4vw, 52px) !important;
  line-height: 1.07 !important;
  letter-spacing: -0.03em !important;
  font-weight: 600 !important;
  /* homepage-clean.css ships `h2 { color: inherit !important }`, so the
     borrowed v8 titles resolved to #000 while .cfa-title used #14171f —
     two heading colours alternating down one page. */
  color: #14171f !important;
}

/* The three-step cards were tinted to sit on v8's #fbfaf7 band; this page
   forces that section white, so they need a visible neutral border. */
body.page-for-agencies .cf-hiw3__step,
body.page-for-agencies .cf-hiw3__viz > div {
  border-color: #e9eaec;
}