/**
 * assets/kingdom.css — the ONE token file for One Trinity Kingdom (INVARIANT 5, per the ADR).
 *
 * No page in this repo may declare its own `:root`, an inline `<style>` block with a hex/font-family,
 * or a literal color value outside this file. This is the 12th copy of the house's design tokens across
 * the OneTrinity portfolio, and per the ADR it is the LAST — every page loads this file and reads
 * `var(--token)`, full stop.
 *
 * PALETTE — "the garden" (repainted 2026-08-28, Julia's direct art direction, replacing the noir/gold
 * launch theme): "fundo branco, cores marrons e terroso e verde esmeralda — jardim regado pelo Criador,
 * e steward pelo ser humano." A warm-white/ivory ground (never stark #fff — reads as paper, not a
 * SaaS dashboard), soil-brown ink and structural accent, emerald green for the living/growth accent —
 * Genesis 2:15's garden-and-steward image made literal in the color system, not just the copy.
 *
 * CONTRAST — measured via the standard WCAG relative-luminance formula, not eyeballed (every pair
 * checked against ALL THREE surface tiers --bg/--bg2/--bg3, since the previous theme's audit only
 * checked two and that gap is exactly where a prior --faint defect was found):
 *   --ink       #2B2116 on --bg #FBF7F0 = 14.76:1  (AAA, huge margin — primary text)
 *   --mut       #6B5D4C on --bg3        =  5.04:1  (AA normal text, worst-case surface)
 *   --faint     #6E5F4C on --bg3        =  4.88:1  (AA normal text — this token sits at small sizes,
 *                                                    mono eyebrows/badges, so it must clear 4.5 even
 *                                                    on the deepest surface, not just the lightest)
 *   --gold (terracotta) #8B5A2B on --bg3 = 4.62:1  (AA normal text — structural/eyebrow accent)
 *   --kingdom (emerald) #1F6F52 on --bg3 = 4.81:1  (AA normal text — links/CTAs/live-status)
 *   --kingdom-dim        #2E8A67 on --bg3 = 3.36:1 (AA UI-component/large-text only, 3:1 — never text,
 *                                                    same non-negotiable as the prior theme)
 *   --success #4F6B52 / --warn #7D5A1E / --danger #8A4A4E — all re-darkened for the light ground,
 *   each clearing 4.5:1 against --bg3 (worst case) so they're safe as text, not just as a small dot.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- color: base — warm ivory ground, espresso-brown ink (the garden's soil and paper) ---- */
  --bg: #FBF7F0;
  --bg2: #F4EEE1;
  --bg3: #EDE4D0;
  --ink: #2B2116;
  --mut: #6B5D4C;
  --faint: #6E5F4C;
  /* light theme flips the border convention: a border LIGHTENED a dark surface before (white-alpha),
     it must DARKEN a light one now — same --ink hue at low alpha, never a bare grey. */
  --line: rgba(43, 33, 22, 0.12);
  --line-strong: rgba(43, 33, 22, 0.20);

  /* ---- color: gold — repainted terracotta/soil brown (Julia's "marrons, terroso") ---- */
  --gold: #8B5A2B;
  --gold2: #A9713A;

  /* ---- color: Kingdom's own accent — repainted emerald (Julia's "verde esmeralda", the garden's
     living/growth color; token name kept stable so no page needed to change, per INVARIANT 5) ---- */
  --kingdom: #1F6F52;
  --kingdom-dim: #2E8A67;
  --kingdom-glow: rgba(31, 111, 82, 0.14);

  /* ---- color: semantic (muted, never neon) — re-darkened for the light ground ---- */
  --success: #4F6B52;
  --warn: #7D5A1E;
  --danger: #8A4A4E;

  /* ---- type ---- */
  --disp: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'Space Mono', 'SFMono-Regular', monospace;

  /* ---- measure (per type of text, per site-maker doctrine — never a loose px/ch on a component) ---- */
  --measure-doc: 34rem;
  --measure-body: 42rem;
  --measure-lede: 46rem;

  /* ---- spacing (8pt-derived rhythm) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---- radius ---- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 700ms;

  /* ---- layout ---- */
  --maxw: 1280px;
  --header-h: 76px;
}

/* ================= reset ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--kingdom); color: #04100e; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ================= typography ================= */
h1, h2, h3, h4 { font-family: var(--disp); font-weight: 400; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.05; max-width: none; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.12; max-width: none; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.24; max-width: none; }
h4 { font-size: 1.05rem; line-height: 1.3; max-width: none; }
p { margin: 0; }
p.doc { max-width: var(--measure-doc); }
p.body-copy { max-width: var(--measure-body); text-wrap: pretty; }
/* Per site-maker doctrine: measure tokens belong to LONG copy (3+ sentences) only — a 1-2 sentence
   lede gets max-width:none and lets clamp()+balance do the work. Add .lede-long explicitly on the rare
   multi-sentence lede that actually needs --measure-lede; don't cap short ledes by default (this was
   the exact mistake flagged 3x in the same doctrine — caught here by typography-audit before shipping). */
p.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--mut); max-width: none; text-wrap: balance; }
p.lede.lede-long { max-width: var(--measure-lede); text-wrap: pretty; }
em { font-style: italic; color: var(--kingdom); }
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--kingdom); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--kingdom-dim); }

/* ================= layout ================= */
/* DESIGNER PASS (cross-page synthesis) — this rule was the single worst defect on the site, and it was
   invisible to every gate because it produces ZERO document overflow.
   BEFORE:
     .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 6vw; }
     @media (min-width:1400px) { .wrap { padding: 0 max(6vw, calc((100vw - var(--maxw))/2 + 24px)); } }
   `.wrap` is already capped at --maxw (1280px) and centred by `margin:0 auto`, and it is border-box —
   so `(100vw - 1280)/2` as PADDING double-counts the centring and eats the CONTENT instead of adding
   margin. Measured content width of every page: 1440px -> 1072px, 1600px -> 912px, 1920px -> 592px.
   At 1920 the whole site rendered as a ~592px column and `nav.primary-nav > ul` (flex-wrap:nowrap)
   painted straight through the brand and the "Build with Us" button — the header literally printed on
   top of itself. Same blind spot as the 981-1250px overlap the integration wave fixed at the other end:
   nothing grows scrollWidth, so ui-guard/responsive-audit/axe all pass on a broken page. Caught by
   cropping the real header at 1310/1360/1440/1600/1920.
   AFTER: one gutter token, and --maxw means what it says — the CONTENT column is 1280px, gutters live
   outside it. Below ~1067px `6vw` still wins, so every mobile/tablet width renders byte-identically to
   before (390 -> 23.4px, 768 -> 46px, 1024 -> 61.4px, exactly as they already were). */
.wrap {
  --wrap-gutter: clamp(20px, 6vw, 64px);
  width: 100%;
  max-width: calc(var(--maxw) + var(--wrap-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--wrap-gutter);
}
.section { position: relative; padding: var(--sp-9) 0; }
.section-tight { padding: var(--sp-8) 0; }
.section-head { max-width: var(--measure-lede); margin: 0 0 var(--sp-6); }
.section-head h2 { margin-top: var(--sp-3); }
.section-head .eyebrow { margin-bottom: 0; }
.section-band { background: linear-gradient(180deg, transparent, var(--bg2) 14%, var(--bg2) 86%, transparent); }

.grid { display: grid; gap: var(--sp-5); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

/* ================= buttons ================= */
.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 16px 28px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 10px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap; min-height: 44px;
}
/* light-theme flip: --gold is now a mid-dark terracotta (was light champagne), so its button needs
   LIGHT text (ivory, 5.47:1 measured) instead of the old near-black (2.70:1 — would fail AA outright). */
.btn-primary { background: var(--gold); color: var(--bg); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(139, 90, 43, 0.28); }
.btn-secondary { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-secondary:hover { border-color: var(--kingdom-dim); color: var(--kingdom); }
.btn-tertiary { color: var(--mut); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.btn-tertiary:hover { color: var(--ink); }
.btn-tertiary::after { content: '→'; margin-left: 8px; transition: transform var(--dur-fast) var(--ease); display: inline-block; }
.btn-tertiary:hover::after { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* ================= chips / badges (never wrap — site-maker rule #2) ================= */
.chip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  color: var(--mut); display: inline-flex; align-items: center; gap: 6px;
}
/* Wraps to a new line rather than scrolling horizontally — a horizontally-scrollable row without
   focusable content fails WCAG scrollable-region-focusable (caught by axe-check on the generated
   category pages, where a single long audience chip inside a card triggered it). A single CHIP still
   never wraps internally (white-space:nowrap on .chip) — this is about the ROW of multiple chips. */
.chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.badge-status {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; padding: 5px 11px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px;
}
.badge-status .d { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.badge-status[data-status="live"] { color: var(--kingdom); border: 1px solid rgba(31, 111, 82, 0.4); background: var(--kingdom-glow); }
.badge-status[data-status="live"] .d { background: var(--kingdom); box-shadow: 0 0 8px var(--kingdom); animation: blink 2.6s ease-in-out infinite; }
.badge-status[data-status="beta"] { color: var(--gold); border: 1px solid rgba(139, 90, 43, 0.35); background: rgba(139, 90, 43, 0.08); }
.badge-status[data-status="beta"] .d { background: var(--gold); }
.badge-status[data-status="in-dev"] { color: var(--mut); border: 1px solid var(--line-strong); }
.badge-status[data-status="in-dev"] .d { background: var(--mut); }
.badge-status[data-status="concept"] { color: var(--faint); border: 1px dashed var(--line-strong); }
.badge-status[data-status="concept"] .d { background: transparent; border: 1px solid var(--faint); }
.badge-status[data-status="reserved"] { color: var(--faint); border: 1px solid var(--line-strong); font-style: italic; }
.badge-status[data-status="reserved"] .d { background: transparent; border: 1px dotted var(--faint); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ================= header / nav ================= */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--bg); padding: 12px 18px; z-index: 200; font-family: var(--mono); font-size: 12px; }
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

header.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  /* light-theme flip: same translucent-blur scrim, now over ivory instead of near-black */
  background: rgba(251, 247, 240, 0.86); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
header.site-header .bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--disp); font-size: 17px; letter-spacing: 0.22em; color: var(--ink); white-space: nowrap; }
.brand .mark { width: 26px; height: 26px; flex: none; }
.brand .mark circle { fill: none; stroke-width: 1.4; }
.brand .k { color: var(--kingdom); font-style: italic; }

nav.primary-nav { display: flex; align-items: center; gap: var(--sp-6); flex: 1 1 auto; min-width: 0; justify-content: center; }
nav.primary-nav > ul { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: nowrap; }
nav.primary-nav a.nav-link {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut);
  white-space: nowrap; padding: 8px 2px; position: relative; transition: color var(--dur-fast) var(--ease);
}
nav.primary-nav a.nav-link:hover, nav.primary-nav a.nav-link[aria-expanded="true"] { color: var(--ink); }
nav.primary-nav a.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--kingdom);
  transition: width var(--dur-med) var(--ease);
}
nav.primary-nav a.nav-link:hover::after { width: 100%; }
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 320px; background: var(--bg2); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: var(--sp-4); opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  /* light-theme flip: a heavy 0.5-alpha black shadow read as "floating panel" on near-black; on ivory
     it looks like a smudge. Softened + tinted with --ink's hue instead of flat black. */
  box-shadow: 0 20px 44px rgba(43, 33, 22, 0.16);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown .dd-tier { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 9px 10px; border-radius: var(--r-sm); }
/* light-theme flip: a hover overlay LIGHTENED a dark row before (white-alpha); on ivory it must
   DARKEN instead, or it would be invisible / lighten toward white-on-white. */
.dropdown .dd-tier:hover { background: rgba(43, 33, 22, 0.045); }
.dropdown .dd-tier b { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink); }
.dropdown .dd-tier span { font-family: var(--mono); font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.dropdown hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-3) 0; }
.dropdown .dd-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.dropdown .dd-cats a { font-size: 12.5px; color: var(--mut); padding: 6px 4px; border-radius: var(--r-sm); }
.dropdown .dd-cats a:hover { color: var(--kingdom); background: rgba(43, 33, 22, 0.045); }
.dropdown.dd-orgs { min-width: 280px; }
.dropdown.dd-orgs .dd-cats { grid-template-columns: 1fr; }

.header-actions { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; flex: none; }
.burger span { display: block; width: 20px; height: 1px; background: var(--ink); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; background: var(--bg); z-index: 90; padding: var(--sp-6) 6vw;
  transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mobile-menu[data-open="true"] { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-menu ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.mobile-menu a { font-family: var(--disp); font-size: 1.5rem; font-weight: 300; color: var(--ink); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.mobile-menu .mm-cta { margin-top: var(--sp-5); }

/* Nav collapses to the burger/mobile-menu at 1300px, not 980px. Root cause of the sitewide header
   overlap defect (found by screenshot, not by ui-guard/responsive-audit — neither flags it because
   nothing ever grows the page's scroll width): nav.primary-nav is flex:1 1 auto with min-width:0 so
   the FLEX ITEM shrinks, but its child <ul> keeps flex-wrap:nowrap and never shrinks below its natural
   content width (6 nav links + 2 dropdown triggers). Below ~1290px that natural width no longer fits
   between the brand and the "Build with Us" button, so the <ul> paints outside its shrunk box and
   visually overlaps both neighbors — with zero horizontal overflow at the document level, so the
   scrollbar-based gates see nothing wrong. Measured empirically (real screenshots, not estimated):
   overlap/zero-gap from 981px through ~1250px, clean from ~1280px up. 1300px is the collapse point,
   with headroom, so the desktop row never renders unless it actually has room to breathe. */
@media (max-width: 1300px) {
  nav.primary-nav { display: none; }
  .burger { display: flex; }
  .header-actions .btn-primary { display: none; }
}

/* ================= hero ================= */
.hero { position: relative; padding: clamp(64px, 12vh, 128px) 0 var(--sp-9); overflow: clip; }
.hero-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
/* light-theme flip: a colored blur READS as brightness on near-black but only as a faint tint on
   ivory, so opacity is nudged up (0.12→0.16, 0.08→0.11) to still register as ambient garden light
   rather than disappearing into the page. */
.hero-glow span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.16; background: radial-gradient(circle, var(--kingdom) 0%, transparent 72%); animation: drift 34s var(--ease) infinite alternate; }
.hero-glow span.g2 { background: radial-gradient(circle, var(--gold) 0%, transparent 72%); opacity: 0.11; animation-duration: 40s; animation-delay: -8s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(4%, 6%) scale(1.08); } }
.hero-badge { margin-bottom: var(--sp-5); }
/* h1 already inherits max-width:none from the base h1 rule — clamp() + text-wrap:balance size the
   headline to fit its real width, no authored cap (site-maker doctrine: short headline = max-width:none). */
.hero h1 em { font-style: normal; color: var(--kingdom); }
.hero .sub { margin-top: var(--sp-5); }
.hero .btn-row { margin-top: var(--sp-6); }

/* ================= cards ================= */
/* DESIGNER PASS — `.card` was a plain block, so in a grid row the box stretched to the tallest sibling
   but the CONTENT stopped at its own height: the closing "Talk to us ->" / "See it live ->" anchor sat
   wherever the copy happened to end, leaving dead space below it. Result: in every card row on the site
   the action anchors landed on different baselines whenever one title wrapped to an extra line
   (measured @1440: /insights/ 669px vs 714px; /solutions/ai-automation/ 690px vs 716px; the home
   three-tier row 860px vs 906px — and that row is a COMPARISON, where a ragged read is the whole cost).
   Flex column + `margin-top:auto` on the trailing foot pins every action to a shared baseline per row.
   `:last-child` matters: generated cards also use `.card-foot` as the TOP badge row (status + tier), and
   that one must stay where it is. `.audience-card` already declared this by hand — now it's the rule. */
.card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5);
  transition: border-color var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
  min-width: 0;
  display: flex; flex-direction: column;
}
.card > .card-foot:last-child { margin-top: auto; padding-top: var(--sp-4); }
a.card:hover, .card.is-link:hover { border-color: var(--kingdom-dim); transform: translateY(-3px); background: var(--bg3); }
.card-icon { width: 40px; height: 40px; margin-bottom: var(--sp-4); }
.card-icon svg { width: 100%; height: 100%; stroke: var(--kingdom); fill: none; stroke-width: 1.4; }
.card h3 { margin-bottom: var(--sp-2); }
/* text-wrap:pretty (integration wave): every Wave 2-4 report flagged the same defect — card body copy
   had no text-wrap set at all, so the browser's default greedy wrap left single-word "STUB" widows on
   the last line at almost every card width (typography-audit --find-broken-caps: 12-16 defects per
   template, e.g. home @1440px, products @1280px). Deferred as "frozen" through all 4 content waves
   specifically so it could be fixed ONCE here instead of chased per-page. Same treatment p.body-copy
   and p.lede.lede-long already use — this just extends it to the one selector that was missing it. */
/* DESIGNER PASS — `pretty` -> `balance`. The integration wave chose `pretty` and documented the
   reason it stopped there: `balance` "risks uneven card heights across a grid row". That objection is
   now void — `.card` is a flex column with its trailing `.card-foot` pinned by `margin-top:auto`, and
   grid rows already stretch every card to the tallest sibling, so a paragraph that balances into one
   extra line changes the row's height, never the alignment inside it. `pretty` only reworks the last
   few lines and does close to nothing on the 2-4 line card taglines that make up almost all of this
   site's body copy; `balance` equalises the whole block, which is what actually kills the stub last
   line (worst measured case on the home page: a 1-word last line at 6% of the widest line).
   Measured, not assumed — see the before/after counts in the designer pass report. */
.card p { color: var(--mut); font-size: 14.5px; line-height: 1.55; text-wrap: balance; }
/* DESIGNER PASS — `flex-wrap:wrap` is a real bug fix, not tidying. The badge+chip header row holds two
   `white-space:nowrap` children (a .badge-status and a category .chip); with nowrap on the ROW as well,
   neither could shrink and neither could drop, so on the 2-column 768px grid the pair painted straight
   out through the card border. spill-check @768: /platforms/ "reserved | Business & Stewardship" +16px
   (x2) and "concept | Marketplace & Commerce" +9px, /solutions/business-stewardship/ +10px. This is
   PRE-EXISTING — it shipped in the Products+Platforms wave and survived the integration wave, because
   nothing escaping a CARD changes the DOCUMENT's scrollWidth, so ui-guard/responsive-audit/axe all read
   clean (the same class of blind spot as the header overlap). Exactly the reasoning already written
   above `.chip-row`, which was wrapped for this reason — `.card-foot` just never got the same
   treatment. A single chip still never wraps internally; this is about the ROW. */
.card .card-foot { margin-top: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

/* -- tier column (Solutions / Products / Strategic Platforms) -- */
.tier-col { display: flex; flex-direction: column; gap: var(--sp-3); }
.tier-col .tier-eyebrow { color: var(--faint); }
/* DESIGNER PASS — this row is the MECHANISM behind the whole three-tier positioning ("the difference
   isn't a marketing label, it's who owns the artifact and how it's billed"), so it is the one row on
   the site that has to be scannable ACROSS the three columns. It wasn't: the middle column's copy runs
   longer, so Owner/Billing sat 46px lower there than in its neighbours on the home page. Pinned to a
   shared baseline. `.tier-lead` does the same for the rule above it on the home variant, which carries
   an extra example block below the divider. */
.tier-col .tier-lead { flex: 1 0 auto; }
.tier-col .tier-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); }

/* -- audience card -- */
.audience-card { display: flex; flex-direction: column; height: 100%; }

/* -- partnership card -- */
.partner-card h3 { font-size: 1.1rem; }

/* ================= before/after transformation diagram ================= */
.transform-diagram { position: relative; }
.td-stage { display: grid; gap: var(--sp-7); align-items: center; grid-template-columns: 1fr auto 1fr; }
@media (max-width: 900px) { .td-stage { grid-template-columns: 1fr; } .td-arrow { transform: rotate(90deg); } }
.td-panel { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); background: var(--bg2); }
.td-panel h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-4); }
.td-panel.after h4 { color: var(--kingdom); }
.td-nodes { display: flex; flex-wrap: wrap; gap: 10px; }
.td-node {
  font-family: var(--mono); font-size: 11px; padding: 9px 13px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  color: var(--mut); white-space: nowrap;
}
.td-arrow { color: var(--kingdom); width: 40px; height: 40px; margin: 0 auto; }
.td-ring-wrap { display: flex; justify-content: center; padding: var(--sp-3) 0; }
.td-ring { width: 100%; max-width: 260px; }
.td-ring circle.rim { fill: none; stroke: var(--kingdom-dim); stroke-width: 1; opacity: 0.5; }
.td-ring circle.node { fill: var(--bg3); stroke: var(--kingdom); stroke-width: 1.4; }
.td-ring text { font-family: var(--mono); font-size: 6.5px; fill: var(--mut); text-anchor: middle; }
.td-ring .core { fill: var(--kingdom-glow); stroke: var(--kingdom); stroke-width: 1; }
.td-ring .core-label { font-family: var(--mono); font-size: 7px; fill: var(--kingdom); text-anchor: middle; letter-spacing: 0.05em; }

/* JS toggles this class once the diagram scrolls into view; base (no-JS) state already shows the
   converged ring so the argument reads correctly with zero script. */
.transform-diagram .td-edge { stroke: var(--kingdom-dim); stroke-width: 1; opacity: 0.35; transition: opacity var(--dur-slow) var(--ease), stroke var(--dur-slow) var(--ease); }
.transform-diagram.is-active .td-edge { opacity: 0.9; stroke: var(--kingdom); }

/* ================= reserved / stewardship treatment ================= */
.reserved-panel {
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: var(--sp-7);
  background: linear-gradient(180deg, rgba(139, 90, 43, 0.05), transparent);
  text-align: center;
}
.reserved-panel .badge-status { margin-bottom: var(--sp-4); }
.reserved-panel h2 { max-width: 22ch; margin: 0 auto var(--sp-3); }
.reserved-panel p.lede { margin: 0 auto var(--sp-6); text-align: left; }
.reserved-panel .lede-wrap { max-width: var(--measure-lede); margin: 0 auto; }

/* ================= revenue / AI-native mechanism blocks ================= */
.mechanism-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
@media (max-width: 900px) { .mechanism-block { grid-template-columns: 1fr; } }
.mechanism-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.mechanism-item { display: flex; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.mechanism-item:last-child { border-bottom: 0; padding-bottom: 0; }
.mechanism-item .num { font-family: var(--mono); font-size: 11px; color: var(--kingdom); flex: none; width: 26px; padding-top: 3px; }
.mechanism-item h4 { margin-bottom: 4px; }
.mechanism-item p { color: var(--mut); font-size: 14px; }
.mechanism-visual { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); background: var(--bg2); }
.mechanism-visual .agent-row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px 0; font-family: var(--mono); font-size: 11.5px; color: var(--mut); border-bottom: 1px solid var(--line); }
.mechanism-visual .agent-row:last-child { border-bottom: 0; }
.mechanism-visual .agent-row .d { width: 6px; height: 6px; border-radius: 50%; background: var(--kingdom); box-shadow: 0 0 8px var(--kingdom); flex: none; }

/* ================= footer ================= */
footer.site-footer { border-top: 1px solid var(--line); padding: var(--sp-8) 0 var(--sp-6); background: var(--bg2); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-7); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-col h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp-4); } /* == .label-mono; kept explicit so the footer never depends on a utility class being present in copied markup */
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13.5px; color: var(--mut); }
.footer-col a:hover { color: var(--kingdom); }
.footer-brand .brand { margin-bottom: var(--sp-3); }
.footer-brand p { color: var(--faint); font-size: 13px; max-width: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-6); font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.04em; }
.footer-bottom .fl { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--kingdom); }

/* ================= scroll reveal (no-JS fallback + forced-visible timeout are in kingdom.js) ================= */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js .reveal.revealed { opacity: 1; transform: translateY(0); }

/* DESIGNER PASS — the quiet mono section label (the one that is NOT an .eyebrow: no teal, no leading
   rule, used to title a subordinate block rather than open a section). The three Insights articles each
   re-declared this inline on their "Sources" heading — same five properties, three copies, one of the
   defects that turns a set of pages into a set of documents. `.footer-col h4` is the same role and now
   inherits it instead of restating it. */
.label-mono {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: var(--sp-4);
}

/* ================= misc ================= */
.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }