/* ============================================================
   FOUNDRY / FORGE SCENE — the reusable forging ritual for the
   product landings (concept §8). Loaded on product-site front
   pages; avakode's hub homepage has its own layer (foundry-forge).
   Fail-safe contract (same as foundry.css): the finished tool is
   visible with no JS / reduced motion; choreography DECORATION
   (.fg-decor: ingot, hammer, sparks, flash, steam, embers) only
   appears once body.fdry-anim is armed. transform/opacity only.
   ============================================================ */
body.foundry {
  --fg-iron:   #232A4D;
  --fg-iron-2: #2E3663;
  --fg-ember:  #FF8A3D;
  --fg-heat-0: #2B0E0C;
  --fg-heat-5: #FFF7E6;
  --fg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
/* ---------- shared particles (self-contained copy) ------------ */
.fg-spark {
  position: absolute; left: 0; top: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--fg-acc, var(--fg-ember));
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--fg-acc, var(--fg-ember)) 65%, transparent);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.fg-flash {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,247,230,.95) 0%, rgba(255,138,61,.35) 42%, transparent 68%);
  will-change: transform, opacity;
}
.fg-steam {
  position: absolute; width: 16px; height: 40px; border-radius: 999px;
  background: rgba(230,236,255,.45); filter: blur(7px);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.fg-ring {
  position: absolute; width: 90px; height: 90px; border-radius: 50%;
  border: 2px solid rgba(255,214,150,.85);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.fg-haze {
  position: absolute; width: 22px; height: 52px; border-radius: 999px;
  background: rgba(255,166,90,.35); filter: blur(9px);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.fg-ground {
  position: absolute; left: 50%; bottom: -6px; width: 300px; height: 44px;
  margin-left: -150px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(3,5,14,.55) 0%, transparent 68%);
}
.fg-decor { display: none; }
body.fdry-anim .fg-decor { display: block; }
/* ============================================================
   THE SCENE
   ============================================================ */
.fg-scene { position: relative; width: 100%; max-width: 480px; margin-inline: auto; }
.fg-scene__glow {
  position: absolute; left: -14%; right: -14%; top: 2%; bottom: -120px; pointer-events: none;
  background: radial-gradient(ellipse 44% 36% at 50% 62%,
              rgba(255,138,61,.15) 0%, color-mix(in srgb, var(--fg-acc) 8%, transparent) 44%, transparent 66%);
}
.fg-scene__stage {
  position: relative; height: 320px;
  display: flex; align-items: flex-end; justify-content: center;
  /* The anvil is not symmetric: the horn eats the left of the box, so its
     WORKING FACE is centred at x=52 of the 96-unit symbol, not 48. Everything
     that belongs on the face (mark, blank, heat, sparks) is offset by that
     difference — otherwise every mark on every foundry site sits ~9px left of
     the anvil it is supposedly resting on, which reads as a crooked drawing. */
  --fgs-face: 9.6px;
}
.fg-scene__aura {
  position: absolute; width: 180px; height: 106px; border-radius: 50%;
  left: 50%; transform: translateX(calc(-50% + var(--fgs-face))); bottom: 108px; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,150,60,.5) 0%, rgba(255,90,30,.18) 45%, transparent 70%);
  filter: blur(10px); will-change: opacity;
}
.fg-scene__haze { left: 50%; bottom: 150px; margin-left: calc(-24px + var(--fgs-face)); }
.fg-scene__haze:nth-of-type(2) { margin-left: calc(12px + var(--fgs-face)); bottom: 142px; }
.fg-scene__anvil {
  width: 230px; height: 230px; color: var(--fg-iron-2); position: relative; z-index: 1;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.4));
}
/* Centered via margin (not transform) — GSAP owns the transform. */
.fg-scene__tool {
  position: absolute; bottom: var(--fgs-b, 139px); left: 50%; width: 122px; height: 122px;
  margin-left: calc(-61px + var(--fgs-face)); color: var(--fg-acc); z-index: 2;
  filter: drop-shadow(0 0 15px color-mix(in srgb, var(--fg-acc) 34%, transparent));
}
.fg-scene__ingot {
  position: absolute; bottom: 123px; left: 50%; width: 114px; height: 114px;
  margin-left: calc(-57px + var(--fgs-face)); color: var(--fg-heat-0); z-index: 2;
}
.fg-scene__hammer {
  position: absolute; bottom: 180px; left: 50%; width: 156px; height: 156px;
  transform: translateX(calc(-6% + var(--fgs-face))) rotate(30deg); transform-origin: 84% 90%;
  color: var(--fg-iron); z-index: 3;
}
.fg-scene__flash { bottom: 132px; left: 50%; margin-left: calc(-75px + var(--fgs-face)); z-index: 4; }
.fg-scene__ring  { bottom: 148px; left: 50%; margin-left: calc(-45px + var(--fgs-face)); z-index: 4; }
.fg-scene__steam { left: 50%; bottom: 160px; margin-left: calc(-8px + var(--fgs-face)); }
.fg-scene__ember {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #F59E0B; box-shadow: 0 0 6px var(--fg-ember);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
  left: 50%; bottom: 140px; margin-left: var(--fgs-face);
}
.fg-scene__ember:nth-of-type(2) { width: 3px; height: 3px; margin-left: calc(-24px + var(--fgs-face)); }
.fg-scene__ember:nth-of-type(3) { width: 5px; height: 5px; margin-left: calc(22px + var(--fgs-face)); }
/* The product's signature bit line, typed on after the quench */
.fg-scene__line {
  display: block; margin-top: 14px; text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem;
  color: var(--fdry-ink-soft, #A7AEC8); letter-spacing: .02em;
}
body.fdry-anim .fg-scene__line { opacity: 0; }
/* The wrapper (rendered by the home template) is itself .fg-decor, so a
   static visitor never sees the ritual — only the real hero panel. While
   the ritual owns the art column, the panel underneath is held invisible. */
.fg-scene-veil {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center;
}
.fg-scene-veil .fg-scene { max-width: 440px; }
/* Belt and braces for the same fault: the art column is a containing block
   whatever the class state, so nothing absolutely positioned inside it can
   ever escape to the page. */
.fdry-hero__art { position: relative; }
body.fdry-anim .has-fg-veil { position: relative; }
body.fdry-anim .has-fg-veil .fg-scene-veil.fg-decor { display: grid; }
/* Safety: if the ritual script ever dies mid-veil, the panel force-returns
   at 9s (animation beats the inline opacity the script left behind). */
body.fdry-anim .has-fg-veil > :not(.fg-scene-veil) { opacity: 0; animation: fgs-safety 0s linear 9s forwards; }
@keyframes fgs-safety { to { opacity: 1; } }
@media (max-width: 1023px) {
  .fg-scene__stage { height: 250px; --fgs-face: 7.5px; }
  .fg-scene__anvil { width: 180px; height: 180px; }
  .fg-scene__tool { width: 96px; height: 96px; bottom: var(--fgs-b-m, 108px); margin-left: calc(-48px + var(--fgs-face)); }
  .fg-scene__ingot { width: 90px; height: 90px; bottom: 96px; margin-left: calc(-45px + var(--fgs-face)); }
  .fg-scene__hammer { width: 122px; height: 122px; bottom: 141px; }
  .fg-scene__flash { bottom: 104px; }
  .fg-scene__ring { bottom: 116px; }
  .fg-scene__aura { bottom: 84px; width: 150px; height: 88px; }
  .fg-scene__steam { bottom: 126px; }
  .fg-scene__ember { bottom: 110px; }
  .fg-scene__haze { bottom: 118px; }
  .fg-scene__haze:nth-of-type(2) { bottom: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-scene__line { opacity: 1 !important; }
}
/* Marks are square-canvas SVGs; contain + breathing room (foundry.css
   ships object-fit: cover, which crushed non-square art). */
.foundry .fdry-suite__mark img { object-fit: contain; padding: 6px; box-sizing: border-box; }
/* ---------- suite cross-sell: the builder card ----------------- */
.foundry .fdry-suite__card--builder {
  border-style: dashed;
  border-color: color-mix(in srgb, #7C5CFC 45%, transparent);
  background: color-mix(in srgb, #7C5CFC 7%, rgba(255,255,255,.03));
}
.foundry .fdry-suite__card--builder .fdry-suite__mark {
  display: grid; place-items: center;
  background: color-mix(in srgb, #7C5CFC 14%, transparent);
}
/* The Foundry canvas hardcodes the hub violet as its light source; the
   legacy landings retint it in per-site foundry-product.css. New sites
   get the same retint generically from the palette (--accent /
   --accent-light are emitted per site by forge_css_variables()). This
   file loads BEFORE any per-site skin, so a bespoke skin still wins. */
body.foundry {
  --fdry-violet:    var(--accent, #7C5CFC);
  --fdry-violet-lt: var(--accent-light, #A78BFA);
  --fdry-acc:       var(--accent, #7C5CFC);
  --fdry-bg:        color-mix(in srgb, var(--accent, #7C5CFC) 5%, #05070F);
  --fdry-bg-2:      color-mix(in srgb, var(--accent, #7C5CFC) 9%, #070A14);
}
body.foundry::before {
  background:
    radial-gradient(135% 85% at 62% -6%, color-mix(in srgb, var(--accent, #7C5CFC) 24%, transparent), transparent 60%),
    radial-gradient(95% 65% at 4% 0%, color-mix(in srgb, var(--accent-light, #A78BFA) 10%, transparent), transparent 58%),
    linear-gradient(180deg, var(--fdry-bg) 0%, var(--fdry-bg-2) 40%, var(--fdry-bg) 100%);
}
.foundry .fdry-grad {
  background: linear-gradient(92deg, var(--accent-light, #A78BFA), #fff 58%, var(--accent-light, #A78BFA));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Bento: a full-width closing card (used when the grid holds 6 features —
   spans 3+3 / 2+2+2 / 6, so no orphan half-row) */
.foundry .fdry-feat__card.fgp-feat--row { grid-column: 1 / -1; }
@media (min-width: 901px) {
  .foundry .fdry-feat__card.fgp-feat--row { display: grid; grid-template-columns: 48px 1fr 1.4fr; align-items: center; column-gap: 22px; }
  .foundry .fdry-feat__card.fgp-feat--row .fdry-feat__ico { margin-bottom: 0; }
  .foundry .fdry-feat__card.fgp-feat--row h3 { margin-bottom: 0; }
}
/* ---------- product hero (generic landing, home-product.php) --- */
.fgp-hero-note {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem;
  color: var(--fdry-ink-faint, #6B7299);
}
.fgp-hero-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #7C5CFC); box-shadow: 0 0 8px var(--accent, #7C5CFC); }
/* Pin-fit: while an idea scene is pinned, ALL of it must sit inside the
   viewport — the shell becomes a centred 100svh column with a compact head. */
.foundry .fgi-scene { padding-block: 0; }
.fgi-scene .fdry-shell {
  min-height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 84px; padding-bottom: 28px; /* clears the fixed glass nav */
}
.fgi-scene .fdry-sechead { margin-bottom: clamp(16px, 2.4vw, 34px); }
.fgi-scene .fdry-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.fgi-scene .fdry-lead { font-size: clamp(.95rem, 1.3vw, 1.06rem); max-width: 760px; margin-inline: auto; }
@media (max-width: 899px) {
  .fgi-scene .fdry-shell { min-height: 0; padding-top: 0; display: block; }
}
/* Ambient grammar: one turn, one breath. Used by any scene that needs a
   sweep to keep turning or a ring to keep pinging. */
@keyframes fgi-turn { to { transform: rotate(360deg); } }
@keyframes fgi-breathe { 0%, 100% { opacity: .25; transform: scale(.9); } 50% { opacity: .7; transform: scale(1.12); } }
/* A scrub step starts dimmed only when the choreography is armed, so a static
   reader never meets a paragraph at 80%. The deck grammar supersedes this for
   scenes that crossfade their beats; it stays for the ones that do not. */
body.fdry-anim .cw-step, body.fdry-anim .if-step { opacity: .8; }
/* unlit steps stay AA through opacity (axe flattens alpha); the lit cue is the kicker's colour, not dimness */
@media (prefers-reduced-motion: reduce) {
  body.fdry-anim .cw-step, body.fdry-anim .if-step { opacity: 1; }
  .if-checkout, .if-ring { transition: none; }
}
/* Mobile: the ritual glow reaches past the viewport and widens the document
   (fixed nav ends up 420px wide on a 390px phone). Clip at the scene. */
@media (max-width: 767px) {
  .fg-scene, .fgi-scene { overflow-x: clip; }
}

/* ============================================================
   SHARED SCENE GRAMMAR (2026-09-04)
   The vocabulary every product storyboard is built from — so seven
   landings share a craft standard without sharing a layout. Per-product
   sheets live in assets/css/scenes/{slug}.css.
   plans/2026-09-04-seven-landings-rework.md §3.
   ============================================================ */

/* ── THE HOLD ────────────────────────────────────────────────────
   A tall static shell with a sticky stage inside it. The heading scrolls
   up and away, the stage holds centred in the viewport, and the JS scrubs
   the scene by section progress. PROVEN by the legacy landings: the sticky
   element must be a CHILD of the tall one, and no ScrollTrigger `pin` is
   involved — three pinned scenes in a row fight over pin-spacing. */
@media (min-width: 1024px) {
  .foundry .fgi-hold { padding-block: 0; overflow: visible; }
  .foundry .fgi-hold > .fdry-shell { min-height: 208vh; overflow: visible; display: block; padding-top: 0; padding-bottom: 0; }
  .foundry .fgi-hold .fgi-stage {
    position: sticky; top: 0; min-height: 100vh; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 104px;            /* clears the fixed glass nav */
    padding-bottom: 44px;
  }
  /* A three-beat scene needs more travel than a two-beat one. */
  .foundry .fgi-hold--long > .fdry-shell { min-height: 300vh; }
  .foundry .fgi-hold--short > .fdry-shell { min-height: 168vh; }
}
@media (max-width: 1023px) {
  .foundry .fgi-hold > .fdry-shell { min-height: 0; display: block; }
  .foundry .fgi-hold .fgi-stage { min-height: 0; display: block; }
}
/* A held stage has ONE viewport to say everything in, so its head is tuned to
   height rather than width: an h2 that wraps to four lines on a 800px laptop
   pushes the artefact's tail off the screen, which is the failure the old
   pinned driver used to bail out of. */
.fgi-stage__head { margin-bottom: clamp(12px, 2vh, 28px); }
/* A flex child with `margin-inline: auto` does not stretch: auto margins on
   the cross axis size it to its content instead. A block whose content is only
   a `width: 100%` SVG then has nothing to size to, and collapses — Guard's
   lockout ladder rendered at 300px inside a 1184px stage. Give every direct
   child of a stage a width to start from; the max-width caps still apply. */
.fgi-hold .fgi-stage > * { width: 100%; }
.fgi-hold .fgi-stage__head .fdry-h2 { font-size: clamp(1.45rem, 2.5vw, 2.15rem); }
.fgi-hold .fgi-stage__head .fdry-lead { font-size: clamp(.9rem, 1.15vw, 1.02rem); max-width: 78ch; margin-inline: auto; }
.fgi-hold .fgi-stage__head .fdry-kicker { margin-bottom: 8px; }

/* ── THE DECK ────────────────────────────────────────────────────────────
   Several beats sharing one cell, one legible at a time — the way a held
   scene keeps its whole argument inside a single viewport. Stacked and all
   readable without JS (`is-deck` is added by the scene's own script), so a
   static reader loses the choreography and none of the words. */
.fgi-deck { display: grid; gap: clamp(16px, 2.4vh, 28px); }
.fgi-deck.is-deck { grid-template-areas: "beat"; align-items: start; }
.fgi-deck.is-deck > * { grid-area: beat; }

/* A beat rail: where you are in the scene, in the scene's own words. */
.fgi-beats {
  list-style: none; margin: 0 0 4px; padding: 0; display: flex; gap: 18px; flex-wrap: wrap;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fdry-ink-faint, #6B7299);
}
.fgi-beats li { display: inline-flex; align-items: center; gap: 7px; }
.fgi-beats i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; }
.fgi-beats li.is-now { color: var(--accent-light, #A98BFF); }
.fgi-beats li.is-now i { opacity: 1; box-shadow: 0 0 9px currentColor; }

/* Height fail-safe: when a stage cannot fit the viewport (a short laptop, a
   zoomed page), its own script drops the hold and plays the scene once — the
   shell must then stop being three screens tall. */
.fgi-hold.is-unheld > .fdry-shell { min-height: 0 !important; }
.fgi-hold.is-unheld .fgi-stage { position: static !important; min-height: 0 !important; padding-top: 0 !important; }
.fgi-hold.is-unheld .fgi-deck.is-deck { grid-template-areas: none; }
.fgi-hold.is-unheld .fgi-deck.is-deck > * { grid-area: auto; }

/* ── SURFACES ───────────────────────────────────────────────────── */
.fgi-panel {
  position: relative; border-radius: 16px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  border: 1px solid rgba(255,255,255,.1);
}
.fgi-panel--flush { border-radius: 4px; }        /* instrument screens */
.fgi-panel__head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fdry-ink-faint, #6B7299);
}
.fgi-panel__head b { color: var(--fdry-ink, #ECEEF7); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .86rem; }
.fgi-panel__head .fgi-spacer { margin-left: auto; }
.fgi-split { display: grid; gap: clamp(22px, 3.4vw, 54px); align-items: center; }
@media (max-width: 899px) { .fgi-split { grid-template-columns: 1fr !important; } }

/* ── ROWS: a thing arriving, and the verdict on it ──────────────── */
.fgi-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px;
  align-items: baseline; padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.075);
}
.fgi-row__label { min-width: 0; color: var(--fdry-ink, #ECEEF7); font-size: .92rem; }
.fgi-row__expr {
  grid-column: 1; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .74rem; color: var(--fdry-ink-faint, #858DB3);
  min-width: 0; overflow-wrap: anywhere;
}
.fgi-row__verdict {
  grid-row: 1 / span 2; grid-column: 2; align-self: center;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem;
  letter-spacing: .04em; white-space: nowrap; color: var(--fdry-ink-soft, #A7AEC8);
}
.fgi-row.is-yes { border-color: color-mix(in srgb, var(--accent, #7C5CFC) 42%, transparent); background: color-mix(in srgb, var(--accent, #7C5CFC) 9%, transparent); }
.fgi-row.is-yes .fgi-row__verdict { color: var(--accent-light, #A98BFF); }
.fgi-row.is-no { opacity: .58; }
.fgi-row.is-refused { border-color: rgba(224,106,94,.42); background: rgba(224,106,94,.08); }
.fgi-row.is-refused .fgi-row__verdict { color: #E88C82; }
.fgi-row.is-refused .fgi-row__expr { text-decoration: line-through; text-decoration-color: rgba(224,106,94,.7); }

/* ── LEDGER: an append-only record, monospace, hashes and all ───── */
.fgi-ledger {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem;
  color: var(--fdry-ink-soft, #A7AEC8);
}
.fgi-ledger li {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px;
  align-items: baseline; padding: 6px 10px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.fgi-ledger li.is-new { border-color: color-mix(in srgb, var(--accent, #7C5CFC) 46%, transparent); background: color-mix(in srgb, var(--accent, #7C5CFC) 10%, transparent); }
.fgi-ledger li.is-ok { border-color: rgba(126,217,166,.45); background: rgba(126,217,166,.1); }
.fgi-ledger li.is-ok b, .fgi-ledger li.is-ok .fgi-hash { color: #7ED9A6; }
.fgi-ledger b { font-weight: 500; color: var(--fdry-ink, #ECEEF7); }
.fgi-hash { color: var(--fdry-ink-faint, #6B7299); white-space: nowrap; }
.fgi-ledger__what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .fgi-ledger li { grid-template-columns: auto 1fr auto; }
  .fgi-ledger__what { grid-column: 1 / -1; white-space: normal; }
}

/* ── NUMBERS, CHIPS, CAPTIONS ───────────────────────────────────── */
.fgi-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  color: var(--accent-light, #A98BFF);
}
.fgi-big { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1; letter-spacing: -.02em; }
.fgi-cap {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem;
  letter-spacing: .04em; color: var(--fdry-ink-faint, #6B7299);
}
.fgi-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fgi-chip {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .7rem;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.13); color: var(--fdry-ink-soft, #A7AEC8);
  background: rgba(255,255,255,.03);
}
.fgi-chip.is-on { border-color: var(--accent, #7C5CFC); color: var(--accent-light, #A98BFF); background: color-mix(in srgb, var(--accent, #7C5CFC) 12%, transparent); }
.fgi-chip.is-off { opacity: .5; }

/* ── THE CULMINATION CONSOLE ─────────────────────────────────────
   One big interaction per landing: a real <button> the visitor presses,
   and the product's own engine output happening in front of them. */
.fgi-console { max-width: 940px; margin-inline: auto; }
.fgi-console__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08);
}
.fgi-console__hint { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; color: var(--fdry-ink-faint, #6B7299); }
/* --on-accent is the palette's own answer to «what reads on this accent»:
   near-black on Speed's lime and Clearway's cyan, white on Inclusive's deep
   blue and Profit's copper. Hard-coding near-black failed AA on two of the
   seven — 3.09:1 on Inclusive, which is the last landing that can afford it. */
.fgi-btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600; font-size: .92rem;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; color: var(--on-accent, #0B0E1A);
  background: var(--accent, #7C5CFC); border: 1px solid transparent;
  transition: transform 120ms cubic-bezier(.2,.6,.2,1), filter 120ms cubic-bezier(.2,.6,.2,1);
}
.fgi-btn:hover { filter: brightness(1.08); }
.fgi-btn:active { transform: translateY(1px) scale(.99); }
.fgi-btn:focus-visible { outline: 3px solid var(--accent-light, #A98BFF); outline-offset: 3px; }
.fgi-btn--ghost { background: transparent; color: var(--fdry-ink, #ECEEF7); border-color: rgba(255,255,255,.18); }
.fgi-btn[aria-disabled="true"], .fgi-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.fgi-live { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; color: var(--fdry-ink-soft, #A7AEC8); }

/* ── STAMPS, RAILS ──────────────────────────────────────────────── */
.fgi-stamp {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 6px; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  border: 1.5px solid currentColor;
}
.fgi-stamp--hold { color: var(--accent-light, #A98BFF); }
.fgi-stamp--deny { color: #E88C82; }
.fgi-stamp--ok   { color: #7ED9A6; }
.fgi-rail { position: relative; height: 2px; border-radius: 2px; background: rgba(255,255,255,.11); overflow: hidden; }
.fgi-rail > i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--accent, #7C5CFC); transform-origin: 0 50%; display: block; }

/* ── FAIL-SAFE: static and reduced-motion show the END STATE ───── */
@media (prefers-reduced-motion: reduce) {
  .fgi-hold > .fdry-shell { min-height: 0 !important; }
  .fgi-hold .fgi-stage { position: static !important; min-height: 0 !important; padding-top: 0 !important; }
}

/* ============================================================
   INCLUSIVE FORGE — the site holds itself to AAA, not AA.
   Its design doc (inclusive-forge/docs/design-2026-08-26.md §2)
   makes the contrast target AAA for text, because the product is
   the argument. The shared dark-glass inks are comfortably AA
   everywhere in the suite and land at 5.2–6.0:1 here, so this
   site takes lighter values for the two tokens that carry every
   miss — and its two primary buttons take the AAA large-text
   size rather than a darker fill, because a CTA that recedes to
   pass a contrast check has solved the wrong problem.

   Site-wide, not front-page-only: the rule is about the site.

   The suite cross-sell wall carries eleven other products'
   accents, and repainting somebody else's brand to pass a check
   on THIS page would be the wrong fix — but measured one by one,
   ten of the eleven clear AAA on the dark glass anyway. The one
   that did not is the builder card, and not because of its
   accent: the card carries its own violet wash, which lifts the
   ground under its link to a place where #A98BFF is 6.5:1. A
   lighter step of the same violet answers it without touching
   the hue — 7.7:1, measured on that wash over this page.
   ============================================================ */
body.forge-inclusiveforge {
  --fdry-ink-faint: #A2AAC8;   /* 6.0:1 → 8.2:1, and clears AAA on the tinted cards too */
  --accent-light:   #8FADF6;   /* 5.2:1 → 8.5:1 */
}
body.forge-inclusiveforge .fdry-suite__card--builder .fdry-suite__go { color: #B79EFF; }
body.forge-inclusiveforge .fgi-btn,
body.forge-inclusiveforge .ifcheck__submit {
  font-size: 1.18rem; font-weight: 700; padding: 12px 22px;
}