/* ============================================================
 * flibbr / brand-ai.css
 *
 * Surface CSS for /brand-ai/ (page-brand-ai.php).
 * Lifted from the locked canonical
 * `flibbr-design-mockup-final-brand-ai.html` (locked
 * 2 May 2026), reduced to surface-only scope.
 *
 * SCOPE
 * Only the page-specific selectors are in this stylesheet —
 * all page-* chassis selectors are inherited from
 * page-chassis.css, including the .page-label sticky-CTA
 * family which was promoted to chassis at v0.5.34 (open #56
 * closed). The IntersectionObserver footer script that
 * toggles .is-released remains in functions.php since it
 * names the surface-specific anchor target (#try).
 *
 * NAMING
 * All page-content selectors live under .page-prose to match
 * the canonical and the v0.5.32 validation-room.css pattern.
 * Op-learning #16: every body-prose-targeted rule is
 * `.page-prose .brandai-*` so chassis cascade rules
 * (`.page-prose p { margin: 0 }`) don't override.
 *
 * SURFACE-SPECIFIC CLASS FAMILIES
 *   - .brandai-cta-block + .brandai-cta-prose + .brandai-cta-pill
 *     + .brandai-cta-pill-arrow + .brandai-cta-fineprint
 *     (used twice, §6 / §7, both routing to product subdomain
 *     per v37 §2.4 Hosting Option B; href wired under open #73)
 *   - .brandai-loop + .brandai-loop-step + .brandai-loop-step-body
 *     + .brandai-loop-step-name + .brandai-loop-step-prose
 *     (the §2 "How a session works" 4-step flow, decimal-leading-
 *     zero counters)
 *
 * @package Flibbr
 * @since   0.5.33
 * ============================================================ */


/* ============================================================
 * PAGE-LABEL sticky-CTA pattern
 *
 * Promoted to assets/css/page-chassis.css at v0.5.34 (open #56
 * closed). Chassis now ships:
 *   - .page-label typography baseline (was already chassis)
 *   - .page-label sticky behaviour (was here)
 *   - .page-label.is-released release-state (was here)
 *   - .page-label-text block-level child (was here)
 *   - 880px-down position-static reset (was here)
 *   - .page-label-cta + .page-label-cta-arrow + their :hover
 *     states (was here)
 *
 * This surface still owns the IntersectionObserver footer
 * script in functions.php — it names #try as the
 * release-trigger anchor (surface-specific).
 * ============================================================ */


/* ============================================================
 * BRAND-AI CTA BLOCK — used twice on this page, once each for
 * the §6 "Try a free case" outbound CTA and the §7 "Start a
 * subscription" outbound CTA. Both route off-domain to the
 * product subdomain (Option B hosting, locked v37 §2.4).
 *
 * Solid container in --paper-warm (warm-off-white card on
 * warm-paper page). Internal stack: serif headline (h2
 * inherits) · supporting prose · ink-violet pill · fineprint.
 * Width caps at the prose measure (60ch via inheritance).
 * Visual treatment is identical to the validation-room
 * cta-block, ported across the canon as a single CTA-block
 * grammar.
 *
 * Op-learning #16: rules that target an element type (h2, p)
 * inside this block are `.page-prose .brandai-cta-block <t>`
 * so they win the cascade against `.page-prose <t>` chassis
 * rules.
 * ============================================================ */
.page-prose .brandai-cta-block {
	background: var(--paper-warm);
	padding: var(--s-7) var(--s-7) var(--s-8) var(--s-7);
	margin-top: var(--s-8);
	max-width: 60ch;
}
/* The h2 inside a CTA block sheds the chassis-default border-
   top + padding-top, since the warm-paper container is the
   visual container; a rule above the H2 would double-frame. */
.page-prose .brandai-cta-block h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.page-prose .brandai-cta-prose {
	margin-top: var(--s-5);
	margin-bottom: var(--s-5);
}
.brandai-cta-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	font-family: var(--sans); font-weight: 600;
	font-size: 13px; line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--paper);
	background: var(--accent);
	text-decoration: none;
	transition:
		background var(--motion-duration-ui) var(--motion-ease-ui);
}
.brandai-cta-pill:hover {
	background: var(--ink);
	color: var(--paper);
}

/* #210 chassis cascade override — .page-prose a (0,1,1) defeats surface color (0,1,0); class>type wins. */
.page-prose .brandai-cta-pill { color: var(--paper); }
.brandai-cta-pill-arrow {
	display: inline-block;
	font-size: 15px; line-height: 1;
	transition: transform var(--motion-duration-ui) var(--motion-ease-ui);
}
.brandai-cta-pill:hover .brandai-cta-pill-arrow {
	transform: translateX(3px);
}
/* Sub-line below the pill — for the price / off-domain note */
.brandai-cta-fineprint {
	margin-top: var(--s-4);
	font-family: var(--sans); font-weight: 400;
	font-size: 12px; line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--ink-quiet);
}
.brandai-cta-fineprint em { font-style: italic; }


/* ============================================================
 * BRAND-AI LOOP-LIST — the §2 "How a session works" four-step
 * flow. Numbered list using decimal-leading-zero counters
 * (matches TOC + pillar conventions used elsewhere on the
 * site). Each step is a heading + supporting line. No icons,
 * no chrome — the rigour is the rhythm.
 *
 * Op-learning #16: scoped under .page-prose so the .page-prose
 * p { margin: 0 } chassis rule doesn't zero out the loop-step-
 * prose paragraphs.
 * ============================================================ */
.page-prose .brandai-loop {
	counter-reset: loop-counter;
	display: flex; flex-direction: column;
	gap: var(--s-6);
	margin-top: var(--s-3);
}
.page-prose .brandai-loop-step {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--s-5);
	align-items: baseline;
	counter-increment: loop-counter;
}
.page-prose .brandai-loop-step::before {
	content: counter(loop-counter, decimal-leading-zero);
	font-family: var(--sans); font-weight: 600;
	font-size: 13px; line-height: 1;
	letter-spacing: 0.08em;
	color: var(--ink-quiet);
	padding-top: 6px;
}
.page-prose .brandai-loop-step-body {
	display: flex; flex-direction: column;
	gap: var(--s-2);
}
.page-prose .brandai-loop-step-name {
	font-family: var(--serif); font-weight: 600;
	font-size: 19px; line-height: 1.3;
	color: var(--ink);
}
.page-prose .brandai-loop-step-prose {
	font-family: var(--serif); font-weight: 400;
	font-size: 17px; line-height: 1.6;
	color: var(--ink-soft);
	margin: 0;
}
.page-prose .brandai-loop-step-prose em { font-style: italic; }
@media (max-width: 540px) {
	.page-prose .brandai-loop-step {
		grid-template-columns: 1fr;
		gap: var(--s-2);
	}
	.page-prose .brandai-loop-step::before {
		padding-top: 0;
	}
}

/* G.3b — brandai-cta-pill tap-target */
@media (max-width: 880px) {
  .brandai-cta-pill {
    min-height: 44px;
  }
}