@charset "utf-8";
/* ==========================================================================
   page-solutions.css — page-scoped styles for solutions.html
   Uses ONLY design-system tokens from core.css. Never hardcodes a colour that
   already exists as a token. Every rule works on dark and light bands because
   it reads the band's theme variables.

   0.  Band-flipped local aliases
   1.  Figures (.fig) + diagram primitives (.f-*)
   2.  Hero (.sol-hero)
   3.  Section index (.sol-index)
   4.  Broken handoff (.hf)
   5.  The spine (.spine)
   6.  Capability sections (.cap)
   7.  Marketing block (.mkt)
   8.  AI block (.ai)
   9.  Ledger / never / assure
   10. Engagement sizes (.size)
   11. Closing CTA (.sol-cta)
   12. Responsive 1024 / 768 / 375
   13. Reduced motion
   ========================================================================== */

/* ==========================================================================
   0. Band-flipped local aliases
   The brand tokens (--cyan, --amber, --ok) are fixed, so they are not legible
   on both bands. These page-local aliases hold a legible value per band and
   every rule below reads the alias, never the raw brand token.
   ========================================================================== */

.band {
  --p-node: var(--blue-hi);
  --p-ch: var(--cyan-hi);
  --p-amber: var(--amber);
  --p-ok: var(--ok-hi);
  --p-tint: color-mix(in srgb, var(--blue) 16%, transparent);
  --p-tint-soft: color-mix(in srgb, var(--blue) 9%, transparent);
  --p-amber-tint: color-mix(in srgb, var(--amber) 10%, transparent);
  --p-amber-panel: color-mix(in srgb, var(--amber) 6%, transparent);
  --p-amber-line: color-mix(in srgb, var(--amber) 36%, transparent);
  --p-ch-tint: color-mix(in srgb, var(--cyan) 14%, transparent);
  /* elevation: brightness step on dark, soft shadow on light */
  --p-raise: var(--bg-card-2);
  --p-raise-2: var(--bg-card-3);
}

.band--light,
.band--paper-white {
  --p-node: var(--blue);
  --p-ch: color-mix(in srgb, var(--cyan) 58%, var(--void));
  --p-amber: color-mix(in srgb, var(--amber) 56%, var(--void));
  --p-ok: var(--ok);
  --p-tint: color-mix(in srgb, var(--blue) 8%, transparent);
  --p-tint-soft: color-mix(in srgb, var(--blue) 5%, transparent);
  --p-amber-tint: color-mix(in srgb, var(--amber) 16%, transparent);
  --p-amber-panel: color-mix(in srgb, var(--amber) 12%, transparent);
  --p-amber-line: color-mix(in srgb, var(--amber) 52%, transparent);
  --p-ch-tint: color-mix(in srgb, var(--cyan) 12%, transparent);
}

/* A shared micro-label. Mono, caps, tracked — the brand's connective tissue. */
.sol-hero__kicker,
.hf__num,
.hf__chain-label,
.spine__num,
.spine__record-label,
.cap__k,
.cap__change-k,
.ledger__head-l,
.ledger__head-r,
.ai__control-k,
.mkt__list dt,
.size__rows dt {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
}

/* ==========================================================================
   1. Figures + the shared diagram kit (.dg-*)

   Page-local implementation of the site-wide diagram vocabulary, so every
   figure here obeys the ART-DIRECTION §4 geometry contract:

     channel 2.5 light / 2 dark · output 3 · port r4
     node r17, rings at 32 and 44 · human amber 2px dashed 4 4
     labels mono 10.5 / 1.4 tracking, uppercase · plate corners 10 (chips 6)

   Every mark takes its colour from a theme variable, never a hex, so nothing
   breaks when a band flips.
   ========================================================================== */

.figure { position: relative; margin: 0; }

.fig {
  display: block;
  width: 100%;
  height: auto;
  max-width: 620px;
  margin-inline: auto;
  overflow: visible;
}

.fig--hero { max-width: 560px; }
.fig--cap  { max-width: 520px; }
.fig--wide { max-width: 1080px; }

/* --- labels: one family, one size, one tracking --------------------------- */
.fig text {
  font-family: var(--font-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.dg-label {
  font-size: 10.5px;
  color: var(--body);
  fill: var(--body);
}

.dg-label--ink    { color: var(--ink);       fill: var(--ink);       font-weight: 600; }
.dg-label--accent { color: var(--p-node);    fill: var(--p-node);    font-weight: 600; }
.dg-label--teal   { color: var(--p-ch-deep); fill: var(--p-ch-deep); font-weight: 600; }
.dg-label--human  { color: var(--p-amber);   fill: var(--p-amber);   font-weight: 600; }
.dg-label--on     { color: var(--paper);     fill: var(--paper);     font-weight: 600; }

/* --- routing marks -------------------------------------------------------- */
.dg-channel,
.dg-output,
.dg-ring,
.dg-return,
.dg-rule,
.dg-human {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-channel { stroke: var(--p-ch);          stroke-width: 2; }
.dg-output  { stroke: var(--p-node);        stroke-width: 3; }
.dg-ring    { stroke: var(--p-node);        stroke-width: 1.5; stroke-opacity: 0.28; }
.dg-return  { stroke: var(--p-node);        stroke-width: 2;   stroke-dasharray: 6 6; stroke-opacity: 0.75; }
.dg-rule    { stroke: var(--line);          stroke-width: 1.25; }
.dg-human   { stroke: var(--p-amber-mark);  stroke-width: 2;   stroke-dasharray: 4 4; }

.dg-node      { fill: var(--p-node); }
.dg-port      { fill: var(--p-ch); }
.dg-arrow     { fill: var(--p-node); }
.dg-arrow--ch { fill: var(--p-ch); }
.dg-human-dot { fill: var(--p-amber-mark); }
.dg-bar       { fill: color-mix(in srgb, var(--blue-deep) 20%, transparent); }

/* --- plates (one class per shape, so a band flip can never lose a fill) ---- */
.dg-plate {
  fill: var(--bg-card-2);
  stroke: var(--line);
  stroke-width: 1.25;
}

.dg-plate--active { fill: var(--p-node);       stroke: none; }
.dg-plate--field  { fill: var(--p-tint);       stroke: var(--p-node); stroke-width: 1.5; stroke-opacity: 0.45; }
.dg-plate--human  { fill: var(--p-amber-tint); stroke: var(--p-amber-mark); stroke-width: 2; stroke-dasharray: 4 4; }

/* Figure plates: the diagram reads as a deliberate object, not loose ink. */
.cap__fig,
.mkt__loop,
.ai__diagram {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-8) var(--s-6);
}

.mkt__loop,
.ai__diagram {
  padding: var(--s-10) var(--s-8);
  margin-block: var(--s-12);
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

.sol-hero { position: relative; overflow: hidden; }

.sol-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(var(--s-10), 5vw, var(--s-24));
}

.sol-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  max-width: 40ch;
}

.sol-hero__kicker {
  color: var(--p-ch);
  margin-top: calc(var(--s-3) * -1);
}

.sol-hero__title {
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

.sol-hero__accent {
  color: var(--p-ch);
  background: linear-gradient(100deg, var(--blue-hi), var(--cyan-hi));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}

.band--light .sol-hero__accent {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--blue-deep);
}

.sol-hero__lead {
  margin: 0;
  color: var(--body);
  max-width: 46ch;
}

.sol-hero__cta {
  margin-top: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
}

.sol-hero__fine {
  margin: 0;
  max-width: 44ch;
}

.sol-hero__figure {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
}

.sol-hero__figure-glow {
  position: absolute;
  inset: -12% -8% -12% -8%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--blue) 26%, transparent), transparent 78%),
    radial-gradient(closest-side at 70% 65%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 76%);
  filter: blur(6px);
}

.band--light .sol-hero__figure-glow { opacity: 0.5; }

.sol-hero__figure .fig { position: relative; z-index: 1; }

/* ==========================================================================
   3. Section index — the four-part contents strip
   ========================================================================== */

.sol-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(var(--s-12), 5vw, var(--s-20));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sol-index__item {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-6) var(--s-6) 0;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
  transition: background var(--d-2) var(--e-out);
}

.sol-index__item + .sol-index__item {
  padding-left: var(--s-6);
  border-left: 1px solid var(--line);
}

.sol-index__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: var(--s-6);
  bottom: -1px;
  height: 2px;
  background: var(--p-ch);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-3) var(--e-out);
}

.sol-index__item:hover::after,
.sol-index__item:focus-visible::after { transform: scaleX(1); }

.sol-index__num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  color: var(--p-ch);
}

.sol-index__name {
  font-family: var(--font-display);
  font-size: var(--t-title-3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.sol-index__note {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   4. Broken handoff — where the work falls through
   ========================================================================== */

.hf {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  padding: clamp(var(--s-6), 3vw, var(--s-12));
  display: grid;
  gap: clamp(var(--s-8), 3vw, var(--s-12));
}

.hf__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
}

.hf__step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.hf__step::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--line-strong, var(--line));
}

.hf__num { color: var(--muted); }

/* A stall state, not a human gate. Amber on this page means exactly one thing —
   a person is required — so the four loss states read as neutral fault chips
   and the eye keeps its amber budget for the human gates. */
.hf__state {
  justify-self: start;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--p-raise);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  line-height: 1.5;
}

.hf__body {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--body);
}

/* --- the connected counterpart chain -------------------------------------- */
.hf__chain {
  border-top: 1px solid var(--line);
  padding-top: clamp(var(--s-6), 2.5vw, var(--s-10));
  display: grid;
  gap: var(--s-5);
}

.hf__chain-label { color: var(--p-ch); }

.hf__chain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}

.hf__chain-list > li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--p-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-5);
}

.hf__chain-list > li + li::before {
  content: "";
  position: relative;
  left: calc(var(--s-4) * -1);
  width: var(--s-4);
  height: 1px;
  background: var(--p-ch);
  flex: none;
}

/* The one accent in this band: the ending you actually want. */
.hf__chain-list > li.is-final {
  color: var(--ink);
  background: var(--p-tint);
  border-color: var(--p-node);
  font-weight: 600;
}

.hf__close {
  margin: clamp(var(--s-8), 3vw, var(--s-12)) auto 0;
  max-width: 62ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--t-title-2);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}

.hf__close strong,
.hf__close em,
.hf__close b {
  font-style: normal;
  color: var(--p-ch);
  font-weight: inherit;
}

/* ==========================================================================
   5. The spine — one record, five stages
   ========================================================================== */

.spine {
  display: grid;
  gap: clamp(var(--s-8), 3vw, var(--s-12));
  margin-top: clamp(var(--s-10), 4vw, var(--s-16));
}

.spine__record {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--p-tint-soft);
  padding: var(--s-6) clamp(var(--s-6), 2.5vw, var(--s-10));
  display: grid;
  gap: var(--s-4);
}

.spine__record-label { color: var(--p-node); }

.spine__fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
}

.spine__fields > li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--ink);
}

.spine__fields > li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--faint);
  flex: none;
  margin-right: var(--s-3);
}

.spine__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(var(--s-4), 1.6vw, var(--s-8));
}

.spine__stage {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-strong, var(--line));
}

.spine__stage::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--p-node);
}

.spine__num { color: var(--p-node); }

/* The stage's own <h3> is the title; the tag is the record stage it writes to. */
.spine__tag {
  justify-self: start;
  margin: calc(var(--s-1) * -1) 0 var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--p-ch);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
}

.spine__auto {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--body);
}

.spine__human {
  margin: var(--s-2) 0 0;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--muted);
  padding-left: var(--s-4);
  border-left: 2px solid var(--p-amber-line);
}

.spine__human > span,
.spine__human > strong,
.spine__human > b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--p-amber);
  margin-bottom: var(--s-1);
}

.spine__note {
  margin: clamp(var(--s-8), 3vw, var(--s-12)) auto 0;
  max-width: 68ch;
  text-align: center;
}

/* ==========================================================================
   6. Capability sections
   ========================================================================== */

.cap { overflow: hidden; }

.cap__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--s-10), 5vw, var(--s-24));
}

.cap--flip .cap__fig { order: -1; }

.cap__copy {
  display: grid;
  align-content: start;
  gap: var(--s-6);
  max-width: 58ch;
}

.cap__copy > h2,
.cap__copy > h3 { margin: 0; }

.cap__k {
  color: var(--p-ch);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

.cap__k::before {
  content: "";
  width: var(--s-6);
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  flex: none;
}

/* --- what we build list --------------------------------------------------- */
.cap__build {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.cap__build > li {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.cap__build-t {
  display: block;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.cap__build-b {
  display: block;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

/* --- what changes --------------------------------------------------------- */
.cap__change {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-lg);
  background: var(--p-tint-soft);
  border: 1px solid var(--line);
  border-left: 2px solid var(--p-node);
}

.cap__change-k { color: var(--p-node); }

.cap__change-v {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--body);
}

/* --- human control note --------------------------------------------------- */
.cap__human {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--body);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--p-amber-panel);
  border: 1px solid var(--p-amber-line);
}

.cap__human--tight {
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-xs);
}

.cap__human-k {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--p-amber);
  margin-right: var(--s-3);
}

.cap__human-k::after {
  content: " ·";
  opacity: 0.6;
}

/* --- links ---------------------------------------------------------------- */
.cap__links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-8);
  padding-top: var(--s-2);
}

.cap__links a {
  font-size: var(--t-sm);
  font-weight: 500;
}

/* ==========================================================================
   7. Marketing block
   ========================================================================== */

.mkt__loop { overflow-x: auto; }

.mkt__grid {
  margin-top: clamp(var(--s-8), 3vw, var(--s-12));
  align-items: stretch;
}

/* keep the row edges level: the list holds the height, the card stays tidy */
.mkt__card > .mkt__list { margin-bottom: auto; }

.mkt__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.mkt__card > h3,
.mkt__card > h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title-2);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.mkt__card > p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--body);
}

.mkt__list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.mkt__list dt {
  color: var(--muted);
  padding-top: var(--s-4);
}

.mkt__list dd {
  margin: 0 0 var(--s-4);
  padding-top: var(--s-1);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-4);
}

.mkt__list dd:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* --- the honest-limits card -----------------------------------------------
   Neutral, not amber: this card states a boundary, it does not ask for a
   person. Amber on this page means exactly one thing — a human is required. */
.mkt__card--truth {
  background: var(--p-raise);
  border-color: var(--line-strong, var(--line));
}

.mkt__truth {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--body);
  padding-left: var(--s-5);
  position: relative;
}

.mkt__truth::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: var(--s-3);
  height: 1px;
  background: var(--muted);
}

/* the amber inside the card is the human-control note, and only that */
.mkt__card--truth .cap__human {
  border-radius: var(--r-md);
  margin-top: auto;
}

/* ==========================================================================
   8. AI block
   ========================================================================== */

.ai__diagram { overflow-x: auto; }

.ai__sub {
  margin: clamp(var(--s-12), 4vw, var(--s-16)) 0 var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.ai__grid { align-items: stretch; }

.ai__card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  transition: border-color var(--d-2) var(--e-out), background var(--d-2) var(--e-out);
}

.ai__card > :first-child {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.ai__card > :last-child {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--muted);
}

.ai__card:hover {
  border-color: color-mix(in srgb, var(--cyan) 45%, var(--line));
  background: var(--p-raise);
}

/* --- four things stay visible --------------------------------------------- */
.ai__controls {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: aictl;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--s-5), 2vw, var(--s-8));
}

.ai__control {
  counter-increment: aictl;
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.ai__control::before {
  content: counter(aictl, decimal-leading-zero);
  position: absolute;
  top: var(--s-3);
  right: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--faint);
}

.ai__control-k { color: var(--p-amber); }

.ai__control > p:last-child {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--body);
}

/* ==========================================================================
   9. Ledger / never / assure
   ========================================================================== */

.ledger {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin: clamp(var(--s-8), 3vw, var(--s-12)) auto 0;
  max-width: 1000px;
}

.ledger__head,
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--s-12) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(var(--s-5), 2vw, var(--s-8));
  padding: var(--s-5) clamp(var(--s-5), 2.5vw, var(--s-10));
}

.ledger__head {
  background: var(--p-raise);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-4);
}

.ledger__head-l { color: var(--p-ch); }

.ledger__head-r {
  color: var(--p-amber);
  grid-column: 3;
}

.ledger__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ledger__row + .ledger__row { border-top: 1px solid var(--line); }

.ledger__l,
.ledger__r {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
}

.ledger__l { color: var(--body); }
.ledger__r { color: var(--ink); font-weight: 500; }

.ledger__tie {
  position: relative;
  display: block;
  justify-self: center;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--p-ch), var(--p-amber));
  opacity: 0.5;
}

.ledger__tie::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: var(--r-pill);
  background: var(--muted);
}

.ledger__close {
  margin: var(--s-6) auto 0;
  max-width: 68ch;
  text-align: center;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--muted);
}

/* --- never ---------------------------------------------------------------- */
.never {
  margin: clamp(var(--s-10), 4vw, var(--s-16)) auto 0;
  max-width: 1000px;
  border: 1px dashed var(--line-strong, var(--line));
  border-radius: var(--r-lg);
  background: var(--p-raise);
  padding: clamp(var(--s-5), 2.5vw, var(--s-8));
  display: grid;
  gap: var(--s-4);
}

.never > p:first-child,
.never > h3:first-child {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.never__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-8);
}

.never__list > li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

.never__list > li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  color: var(--err-hi);
  opacity: 0.85;
}

.band--light .never__list > li::before { color: var(--err); }

/* --- assure --------------------------------------------------------------- */
.assure {
  list-style: none;
  margin: clamp(var(--s-8), 3vw, var(--s-12)) 0 0;
  padding: var(--s-6) 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4) var(--s-8);
}

.assure__item {
  position: relative;
  padding-left: var(--s-8);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

.assure__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ok) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent);
}

.assure__item::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.42em;
  width: 5px;
  height: 9px;
  border-right: 1.5px solid var(--p-ok);
  border-bottom: 1.5px solid var(--p-ok);
  transform: rotate(42deg);
}

/* ==========================================================================
   10. Engagement sizes
   ========================================================================== */

.sizes {
  margin-top: clamp(var(--s-8), 3vw, var(--s-12));
  align-items: stretch;
}

.size {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(var(--s-6), 2vw, var(--s-8));
  overflow: hidden;
}

.size > h3,
.size > h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title-2);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.size > p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--muted);
}

/* The card's eyebrow is its title here — lift it out of label greyness. */
.size > :first-child { color: var(--ink); }

.size__badge {
  align-self: flex-start;
  margin-bottom: var(--s-1);
}

.size__rows {
  margin: var(--s-2) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

.size__rows dt {
  color: var(--muted);
  padding-top: var(--s-4);
}

.size__rows dd {
  margin: 0;
  padding: var(--s-1) 0 var(--s-4);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
  border-bottom: 1px solid var(--line);
}

.size__rows dd:last-child { border-bottom: 0; }

.size__cta { margin-top: auto; }

/* --- the recommended one -------------------------------------------------- */
.size--feature {
  background: var(--p-raise-2);
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--line));
  box-shadow: var(--shadow-lift);
}

.size--feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.sizes__fine {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3) var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.sizes__fine > * {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}

/* ==========================================================================
   11. Closing CTA
   ========================================================================== */

.sol-cta { position: relative; overflow: hidden; text-align: center; }

.sol-cta__fine {
  margin-inline: auto;
  max-width: 64ch;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  line-height: 1.65;
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .sol-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-index__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sol-index__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .hf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spine__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .sol-hero__inner { grid-template-columns: 1fr; gap: var(--s-12); }
  .sol-hero__copy { max-width: 46ch; }
  .sol-hero__figure { justify-self: center; max-width: 560px; }
  .cap__inner { grid-template-columns: 1fr; gap: var(--s-10); }
  .cap--flip .cap__fig { order: 0; }
  .cap__copy { max-width: 68ch; }
  /* stacked: the plate spans the column, the diagram centres inside it */
  .cap__fig { max-width: none; width: 100%; }
  .ai__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .spine__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger__head,
  .ledger__row { grid-template-columns: minmax(0, 1fr) var(--s-8) minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .sol-index { grid-template-columns: 1fr; }
  .sol-index__item { padding-left: 0 !important; border-left: 0 !important; }
  .sol-index__item + .sol-index__item { border-top: 1px solid var(--line); }
  .sol-index__note { -webkit-line-clamp: 2; }
  .hf { padding: var(--s-6); }
  .hf__close { font-size: var(--t-lead); }
  .never__list { grid-template-columns: 1fr; }
  .mkt__loop,
  .ai__diagram { padding: var(--s-6) var(--s-4); }
}

/* Below this width a scaled-to-fit diagram renders its labels too small to
   read, so the figures become scroll panes at a legible minimum instead. */
@media (max-width: 700px) {
  .sol-hero__figure,
  .cap__fig,
  .mkt__loop,
  .ai__diagram {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* auto side margins would centre the overflow and hide the left edge */
  .sol-hero__figure .fig,
  .cap__fig .fig,
  .mkt__loop .fig,
  .ai__diagram .fig { margin-inline: 0; }
  .sol-hero__figure {
    padding-bottom: var(--s-4);
    justify-content: flex-start;
  }
  .sol-hero__figure .fig--hero { min-width: 460px; }
  .cap__fig .fig--cap { min-width: 430px; }
  .mkt__loop .fig--wide,
  .ai__diagram .fig--wide { min-width: 760px; }
}

@media (max-width: 640px) {
  .hf__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .spine__fields > li + li::before { display: none; }
  .spine__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .ai__controls { grid-template-columns: 1fr; }
  .assure { grid-template-columns: 1fr; }
  .sizes__fine { flex-direction: column; }

  /* ledger collapses to stacked pairs */
  .ledger__head { display: none; }
  .ledger__row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-5) var(--s-5);
  }
  .ledger__tie {
    width: var(--s-10);
    justify-self: start;
    margin-block: var(--s-1);
  }
  .ledger__l::before,
  .ledger__r::before {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--s-1);
  }
  /* CSS generated content is not translated by page copy — it must key off the
     document language, or Spanish pages leak English at this breakpoint. */
  .ledger__l::before { content: "System handles"; color: var(--p-ch); }
  .ledger__r::before { content: "Human retains"; color: var(--p-amber); }
  [lang="es"] .ledger__l::before { content: "El sistema se encarga"; }
  [lang="es"] .ledger__r::before { content: "La persona conserva"; }
}

@media (max-width: 420px) {
  .sol-hero__copy { gap: var(--s-5); }
  .sol-hero__figure { padding: var(--s-2); }
  .hf { padding: var(--s-5); border-radius: var(--r-lg); }
  .cap__fig,
  .mkt__loop,
  .ai__diagram { border-radius: var(--r-lg); padding: var(--s-5) var(--s-4); }
  .spine__record { padding: var(--s-5); }
  .hf__chain-list { gap: var(--s-3); }
  .hf__chain-list > li { font-size: var(--t-micro); padding: var(--s-2) var(--s-4); }
  .hf__chain-list > li + li::before { display: none; }
  .size { padding: var(--s-6); }
}

/* ==========================================================================
   13. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sol-index__item,
  .sol-index__item::after,
  .ai__card {
    transition: none !important;
  }
  .sol-index__item::after { transform: scaleX(1); opacity: 0.4; }
}

/* ==========================================================================
   14. LIGHT-PRIMARY RETOUCH (art direction v2)
   The page now sells on paper. Diagram ink goes thicker and more saturated,
   amber splits into a text-safe tone and a graphic mark, and depth comes from
   white plates + soft shadow instead of brightness steps.
   ========================================================================== */

.band { --p-amber-mark: var(--amber); --p-ch-deep: var(--cyan-hi); }

.band--light,
.band--paper-white {
  /* deep teal reads on white; cyan does not */
  --p-ch: #1B6F7B; /* text teal — #2F9AA8 was 3.3:1 on white */
  --p-ch-deep: #175D67; /* text teal — #1F7F8C was 4.4:1 on --paper */
  /* amber TEXT on light must be #8A5D05; the graphic mark stays hot */
  --p-amber: #8A5D05;
  --p-amber-mark: #C4820E;
  --p-amber-line: color-mix(in srgb, var(--amber) 62%, transparent);
  --p-amber-tint: color-mix(in srgb, var(--amber) 18%, transparent);
  --p-amber-panel: color-mix(in srgb, var(--amber) 11%, transparent);
  --p-tint: color-mix(in srgb, var(--blue) 10%, transparent);
  --p-tint-soft: color-mix(in srgb, var(--blue) 6%, transparent);
  --p-raise: color-mix(in srgb, var(--blue) 4%, var(--paper-card));
  --p-raise-2: var(--paper-card);
}

/* --------------------------------------------------------------------------
   14.1 Diagram ink — thicker, saturated, legible on paper
   -------------------------------------------------------------------------- */

/* Light bands take the thicker end of the contract: channel 2.5, output 3. */
.band--light .dg-channel,
.band--paper-white .dg-channel { stroke-width: 2.5; }

.band--light .dg-rule,
.band--paper-white .dg-rule { stroke: var(--line-strong, var(--line)); stroke-width: 1.5; }

.band--light .dg-plate,
.band--paper-white .dg-plate { fill: var(--paper-card); stroke: var(--line-strong, var(--line)); stroke-width: 1.5; }

.band--light .dg-label,
.band--paper-white .dg-label { color: var(--body); fill: var(--body); }

.band--light .dg-label--accent,
.band--paper-white .dg-label--accent { color: var(--blue-deep); fill: var(--blue-deep); }

/* --------------------------------------------------------------------------
   14.2 Figure plates — a diagram is an object, not loose ink
   -------------------------------------------------------------------------- */

.band--light .cap__fig,
.band--paper-white .cap__fig,
.band--light .mkt__loop,
.band--paper-white .mkt__loop,
.band--light .ai__diagram,
.band--paper-white .ai__diagram {
  background: var(--paper-card);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
}

.band--light .cap__fig:hover,
.band--paper-white .cap__fig:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   14.3 Hero on paper
   -------------------------------------------------------------------------- */

.band--light .sol-hero__figure-glow { display: none; }

.band--light .sol-hero__figure {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lift);
  padding: clamp(var(--s-6), 3vw, var(--s-10));
}

.band--light .sol-hero__kicker {
  color: var(--p-ch-deep);
  font-weight: 600;
}

.band--light .sol-hero__accent {
  background: linear-gradient(104deg, var(--blue) 8%, var(--blue-deep) 62%, #1F7F8C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--blue-deep);
}

.sol-hero__title { font-weight: 600; letter-spacing: -0.03em; line-height: 0.98; }
.sol-hero__lead { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.32rem); }

.band--light .sol-index { border-color: var(--line-strong, var(--line)); }
.band--light .sol-index__item + .sol-index__item { border-left-color: var(--line); }

.sol-index__item:hover,
.sol-index__item:focus-visible {
  background: color-mix(in srgb, var(--blue) 5%, transparent);
}

.band--light .sol-index__item::after { background: var(--blue); height: 2.5px; }
.band--light .sol-index__num { color: var(--p-ch-deep); }

/* --------------------------------------------------------------------------
   14.4 Component hover + surface on paper
   -------------------------------------------------------------------------- */

.band--light .hf,
.band--paper-white .hf,
.band--light .ledger,
.band--paper-white .ledger { background: var(--paper-card); }

/* The four breaks are marked, not coloured in: a small fault dot per step says
   "this is where it stalls" without spending the amber budget. Amber on this
   page means exactly one thing, and it is not this. */
.band--light .hf__step::before,
.band--paper-white .hf__step::before { background: var(--err); width: 7px; height: 7px; top: -4px; }

.band--light .hf__state,
.band--paper-white .hf__state { font-weight: 500; }

.band--light .hf__chain-list > li,
.band--paper-white .hf__chain-list > li { background: var(--paper-card); }

.band--light .hf__chain-list > li + li::before,
.band--paper-white .hf__chain-list > li + li::before { background: var(--p-ch); height: 2px; }

.band--light .hf__close strong,
.band--light .hf__close em,
.band--paper-white .hf__close em { color: var(--blue-deep); }

/* the page's one big-type moment */
.hf__close {
  font-size: var(--t-display-3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  max-width: 22ch;
}

.card,
.ai__card,
.size,
.mkt__card {
  transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out),
    border-color var(--d-2) var(--e-out);
}

.band--light .card:hover,
.band--paper-white .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
}

.band--light .ai__card:hover,
.band--paper-white .ai__card:hover {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
  background: color-mix(in srgb, var(--blue) 4%, var(--paper-card));
}

.band--light .size--feature,
.band--paper-white .size--feature {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
  box-shadow: var(--shadow-lift);
}

.band--light .size--feature::before,
.band--paper-white .size--feature::before {
  height: 3px;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue) 55%, #2F9AA8);
}

.band--light .spine__stage::before,
.band--paper-white .spine__stage::before { background: var(--blue); }

.band--light .spine__tag,
.band--paper-white .spine__tag { color: var(--p-ch-deep); border-color: color-mix(in srgb, var(--p-ch) 42%, transparent); }

.band--light .ledger__tie,
.band--paper-white .ledger__tie {
  height: 2px;
  opacity: 0.75;
  background: linear-gradient(90deg, var(--p-ch), var(--p-amber-mark));
}

.band--light .ledger__head,
.band--paper-white .ledger__head { background: color-mix(in srgb, var(--blue) 5%, var(--paper-card)); }

.band--light .assure__item::before,
.band--paper-white .assure__item::before {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
}

.band--light .assure__item::after,
.band--paper-white .assure__item::after {
  border-right-color: var(--blue-deep);
  border-bottom-color: var(--blue-deep);
  border-width: 0 2px 2px 0;
}

.band--light .never,
.band--paper-white .never { background: var(--paper-card); border-color: var(--line-strong, var(--line)); }

/* --------------------------------------------------------------------------
   14.5 Atmosphere on paper — never glow
   -------------------------------------------------------------------------- */

.band--light > .atmos,
.band--paper-white > .atmos { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .card, .ai__card, .size, .mkt__card, .cap__fig, .mkt__loop, .ai__diagram { transition: none !important; }
  .band--light .card:hover,
  .band--paper-white .card:hover,
  .band--light .cap__fig:hover { transform: none; }
}

/* 14.6 hero measure — the headline is the one dominant idea, but the primary
   CTA has to stay above the fold at 1440x900. Three lines, not four. */
.sol-hero__copy { max-width: 36rem; gap: var(--s-5); }
.sol-hero__title { font-size: clamp(2.5rem, 1.5rem + 3vw, 3.85rem); }
.sol-hero__lead { max-width: 44ch; font-size: clamp(1rem, 0.94rem + 0.42vw, 1.2rem); }
.sol-hero__cta { flex-wrap: nowrap; }
.sol-hero { padding-block: clamp(var(--s-12), 5vw, var(--s-20)); }
@media (max-width: 520px) { .sol-hero__cta { flex-wrap: wrap; } .sol-hero__cta .btn { width: 100%; } }

/* 14.7 capability rows — the figure plate holds the column, no floating void */
.cap__inner { align-items: center; }
.cap__fig { display: flex; align-items: center; justify-content: center; }
.cap__copy { align-content: center; }
@media (max-width: 1024px) { .cap__inner { align-items: start; } .cap__copy { align-content: start; } }

/* 14.8 figure presence — the wide plates get the bigger canvas */
.fig--cap { max-width: 560px; }
.fig--wide { max-width: 1120px; }
.mkt__loop, .ai__diagram { padding-block: var(--s-8); }

/* 14.9 marketing grid — cards size to content, no hollow bottoms */
.mkt__grid { align-items: start; }
.mkt__card { height: auto; }

/* 14.10 the page's one big-type moment, given room to land */
.hf__close {
  margin-top: clamp(var(--s-12), 6vw, var(--s-24));
  font-size: var(--t-display-2);
  max-width: 18ch;
  line-height: 1.08;
  letter-spacing: -0.028em;
}
.hf__close em, .hf__close strong { display: block; }
@media (max-width: 640px) { .hf__close { font-size: var(--t-display-3); max-width: 22ch; } }

/* ==========================================================================
   15. FINAL POLISH
   Each rule here closes a named legibility or hierarchy defect. Section 15
   sits last on purpose: several fixes have to outrank the band-scoped rules
   in §14, which carry higher specificity than the role classes they broke.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15.1 Diagram label ROLES must survive the band scope.

   `.band--light .dg-label` is (0,2,0); `.dg-label--on` is (0,1,0). So on every
   light band the role colours — ink, teal, human, on-fill — were all being
   flattened back to `--body`. That is why the white "NEXT STEP" chip label
   rendered as mid-blue text sitting on a mid-blue fill. Restated at matching
   specificity, the roles win again.
   -------------------------------------------------------------------------- */

.band--light .dg-label--ink,
.band--paper-white .dg-label--ink { color: var(--ink); fill: var(--ink); font-weight: 600; }

.band--light .dg-label--teal,
.band--paper-white .dg-label--teal { color: var(--p-ch-deep); fill: var(--p-ch-deep); font-weight: 600; }

.band--light .dg-label--human,
.band--paper-white .dg-label--human { color: var(--p-amber); fill: var(--p-amber); font-weight: 600; }

/* The active chip carried white type on a saturated blue fill. Reversed type
   inside an inline SVG cannot be verified against the shape behind it, so on
   paper the chip becomes a tinted plate with a solid blue edge and blue-deep
   type — the same "this is the one to look at" signal, legible on its own. */
.band--light .dg-plate--active,
.band--paper-white .dg-plate--active {
  fill: color-mix(in srgb, var(--blue) 15%, var(--paper-card));
  stroke: var(--blue-deep);
  stroke-width: 2;
}

.band--light .dg-label--on,
.band--paper-white .dg-label--on { color: var(--blue-deep); fill: var(--blue-deep); font-weight: 700; }

/* Solid blue shapes that carry no type keep the flat fill. */
.dg-mark { fill: var(--p-node); }
.band--light .dg-mark,
.band--paper-white .dg-mark { fill: var(--blue); }

/* --------------------------------------------------------------------------
   15.2 Hero — reach for scale, and make the diagram readable from a metre
   -------------------------------------------------------------------------- */

/* Scoped to the two-column hero only: an unscoped rule here would outrank the
   stacking rule in §12 and leave the figure sitting on top of the headline. */
@media (min-width: 1025px) {
  .sol-hero__inner { grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); }
  .sol-hero__copy { max-width: 39rem; }
}

.sol-hero__title {
  font-size: clamp(2.6rem, 1.3rem + 4.3vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.032em;
}

/* The page's only high-chroma moment gets a matching optical weight. */
.band--light .sol-hero__accent { font-weight: 650; }

.sol-hero__lead { font-size: clamp(1.02rem, 0.94rem + 0.5vw, 1.26rem); max-width: 42ch; }

/* The pale wash was doing no work. Two low-percentage tints, both mixed from
   brand tokens, give the band depth without putting colour under the copy. */
.band--light.sol-hero {
  background-image:
    radial-gradient(115% 88% at 80% 4%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 62%),
    radial-gradient(85% 70% at 2% 104%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 66%);
}

.band--light .sol-hero__figure { padding: clamp(var(--s-5), 2.2vw, var(--s-8)); }

/* the narrow-screen figure keeps its tight padding: every pixel is scroll pane */
@media (max-width: 420px) {
  .band--light .sol-hero__figure { padding: var(--s-3); }
}

/* Hero diagram labels were rendering under 10px on a 0.9 scale — unreadable at
   a glance. This figure carries the whole argument, so its type steps up. */
.fig--hero .dg-label { font-size: 13px; letter-spacing: 1.3px; }

/* --------------------------------------------------------------------------
   15.3 The spine — five stages read DOWN, not across

   Five columns each stacking four micro-elements was the densest block on the
   page. As rows, the same content gets full measure, the 01–05 numbering runs
   as a real sequence, and the amber human-decision rule keeps its column.
   -------------------------------------------------------------------------- */

.spine__grid { grid-template-columns: 1fr; gap: 0; }

.spine__stage {
  grid-template-columns:
    3.5rem
    minmax(0, 0.86fr)
    minmax(0, 1.55fr)
    minmax(0, 1.3fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: clamp(var(--s-6), 2.2vw, var(--s-10));
  row-gap: var(--s-2);
  padding: clamp(var(--s-6), 2vw, var(--s-8)) 0;
  border-top: 1px solid var(--line);
}

.spine__stage:last-child { border-bottom: 1px solid var(--line); }

.spine__stage::before { top: -5px; width: 9px; height: 9px; }

.spine__num  { grid-column: 1; grid-row: 1; padding-top: 0.32em; }

.spine__stage > h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  align-self: start;
}

.spine__tag  { grid-column: 2; grid-row: 2; margin: var(--s-3) 0 0; }

.spine__auto {
  grid-column: 3;
  grid-row: 1 / span 2;
  padding-top: 0.15em;
  font-size: var(--t-body);
  color: var(--ink);
  max-width: 44ch;
}

.spine__human {
  grid-column: 4;
  grid-row: 1 / span 2;
  margin: 0;
  padding-left: var(--s-5);
  border-left-width: 2px;
}

@media (max-width: 1024px) {
  .spine__stage {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    row-gap: var(--s-3);
  }
  .spine__stage > h3 { grid-column: 2; grid-row: 1; }
  .spine__tag  { grid-column: 2; grid-row: 2; margin-top: 0; }
  .spine__auto { grid-column: 2; grid-row: 3; }
  .spine__human { grid-column: 2; grid-row: 4; margin-top: var(--s-2); }
}

@media (max-width: 520px) {
  .spine__stage { grid-template-columns: 1fr; }
  .spine__num,
  .spine__stage > h3,
  .spine__tag,
  .spine__auto,
  .spine__human { grid-column: 1; }
  .spine__num { grid-row: 1; padding-top: 0; }
  .spine__stage > h3 { grid-row: 2; }
  .spine__tag { grid-row: 3; }
  .spine__auto { grid-row: 4; }
  .spine__human { grid-row: 5; }
}

/* --------------------------------------------------------------------------
   15.4 One disclosure, stated as a fact.

   Per DISCLOSURE-POLICY: this page shows diagrams, not simulated records, so
   it carries ONE short line and no amber slab. The `.synthetic-note` class is
   gone from the markup — amber is spent only on the human gate. What is left
   is a quiet muted line on the page's own left margin, still findable, still
   unambiguous about the data being invented.
   -------------------------------------------------------------------------- */

.spine__note {
  margin: clamp(var(--s-6), 2.4vw, var(--s-8)) 0 0;
  max-width: 72ch;
  text-align: left;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   15.5 The closing line joins the page's left spine

   It was the one centred element on a strictly left-aligned page, and it
   borrowed a condensed serif used nowhere else. Same words, page typeface,
   page margin.
   -------------------------------------------------------------------------- */

.hf__close {
  margin: clamp(var(--s-12), 5vw, var(--s-20)) 0 0;
  text-align: left;
  max-width: 26ch;
}

.hf__close em,
.hf__close strong,
.hf__close-em {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  letter-spacing: inherit;
}

.band--light .hf__close-em,
.band--paper-white .hf__close-em { color: var(--blue-deep); }

/* --------------------------------------------------------------------------
   15.7 MOBILE CUT for the two wide figures.

   The demand loop and the AI diagram are 960 units wide. Below 700px they were
   held open at 760px in a scroll pane, which is a 0.79 scale — so their 10.5px
   labels rendered at 8.3px, under the legibility floor. Scaling further down is
   the wrong lever. Each wide figure now has a second, purpose-drawn SVG: a
   300-unit viewBox, fewer elements, shorter labels, read as a column. It swaps
   in under 560px at roughly 1:1, so the labels render near their true size.
   -------------------------------------------------------------------------- */

.fig--m { display: none; }

/* The swap itself has to outrank §14.11 below, so it is restated at the end
   of the file. See §15.7-b. */

/* --------------------------------------------------------------------------
   15.6 Section-head balance where a headline lost its counted list
   -------------------------------------------------------------------------- */

.spine { margin-top: clamp(var(--s-8), 3.2vw, var(--s-12)); }

/* 14.11 scrollable diagram panes must start at their left edge, not centred */
@media (max-width: 700px) {
  .cap__fig { justify-content: flex-start; align-items: flex-start; }
  .cap__fig .fig--cap { flex: none; }

  /* A scroll pane with no edge cue reads as a cropped, broken graphic. An
     INSET shadow is painted on the border box, so unlike an ::after it cannot
     scroll away with the content. */
  .band--light .cap__fig,
  .band--paper-white .cap__fig,
  .band--light .mkt__loop,
  .band--paper-white .mkt__loop,
  .band--light .ai__diagram,
  .band--paper-white .ai__diagram {
    box-shadow: var(--shadow-card),
      inset -28px 0 22px -20px color-mix(in srgb, var(--ink) 40%, transparent);
  }

  .band--light .sol-hero__figure {
    box-shadow: var(--shadow-lift),
      inset -28px 0 22px -20px color-mix(in srgb, var(--ink) 40%, transparent);
  }
}

/* ==========================================================================
   16. GLYPH PLATES (ICON-SYSTEM)

   Two grids on this page take one glyph per card: the 9-up AI capability grid
   and the 4-up engagement sizes. Both had a `> :first-child` rule carrying the
   card's title styling — the plate is now that first child, so each of those
   rules is restated against the real title at higher specificity. Nothing here
   sets a colour: the plate owns `color`, the glyph inherits it via
   currentColor, so both grids re-theme with the band.
   ========================================================================== */

.ai__card > .card__icon,
.size > .card__icon { margin-bottom: var(--s-1); }

/* the heading, not the plate, keeps the card-title treatment */
.ai__card > .card__icon + h4 {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* on the size cards the eyebrow is the title — lift it back out of label grey */
.size > .card__icon + .card__index { color: var(--ink); }

/* 15.7-b The mobile cut swap. Last in the file on purpose: it has to undo the
   scroll-pane treatment §14.11 applies at 700px, which carries the same
   specificity. */
@media (max-width: 560px) {
  .mkt__loop .fig--wide,
  .ai__diagram .fig--wide { display: none; }

  .mkt__loop .fig--m,
  .ai__diagram .fig--m {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
  }

  /* the mobile cut is drawn to fit, so its type steps up rather than down */
  .fig--m .dg-label { font-size: 12px; letter-spacing: 1.1px; }

  /* nothing scrolls any more, so the cropped-edge cue is a lie — remove it */
  .band--light .mkt__loop,
  .band--paper-white .mkt__loop,
  .band--light .ai__diagram,
  .band--paper-white .ai__diagram { box-shadow: var(--shadow-card); }
}